Roo/Button.js
[roojs1] / roojs-debug.js
1 /*
2  * Based on:
3  * Ext JS Library 1.1.1
4  * Copyright(c) 2006-2007, Ext JS, LLC.
5  *
6  * Originally Released Under LGPL - original licence link has changed is not relivant.
7  *
8  * Fork - LGPL
9  * <script type="text/javascript">
10  */
11  
12
13
14
15
16 // for old browsers
17 window["undefined"] = window["undefined"];
18
19 /**
20  * @class Roo
21  * Roo core utilities and functions.
22  * @static
23  */
24 var Roo = {}; 
25 /**
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
31  * @member Roo apply
32  */
33
34  
35 Roo.apply = function(o, c, defaults){
36     if(defaults){
37         // no "this" reference for friendly out of scope calls
38         Roo.apply(o, defaults);
39     }
40     if(o && c && typeof c == 'object'){
41         for(var p in c){
42             o[p] = c[p];
43         }
44     }
45     return o;
46 };
47
48
49 (function(){
50     var idSeed = 0;
51     var ua = navigator.userAgent.toLowerCase();
52
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() {
70             try {
71                 if (ua.indexOf('chrome') != -1 && ua.indexOf('android') == -1) {
72                     window.addEventListener('touchstart', function __set_has_touch__ () {
73                         Roo.isTouch = true;
74                         window.removeEventListener('touchstart', __set_has_touch__);
75                     });
76                     return false; // no touch on chrome!?
77                 }
78                 document.createEvent("TouchEvent");  
79                 return true;  
80             } catch (e) {  
81                 return false;  
82             } 
83             
84         })();
85     // remove css image flicker
86         if(isIE && !isIE7){
87         try{
88             document.execCommand("BackgroundImageCache", false, true);
89         }catch(e){}
90     }
91     
92     Roo.apply(Roo, {
93         /**
94          * True if the browser is in strict mode
95          * @type Boolean
96          */
97         isStrict : isStrict,
98         /**
99          * True if the page is running over SSL
100          * @type Boolean
101          */
102         isSecure : isSecure,
103         /**
104          * True when the document is fully initialized and ready for action
105          * @type Boolean
106          */
107         isReady : false,
108         /**
109          * Turn on debugging output (currently only the factory uses this)
110          * @type Boolean
111          */
112         
113         debug: false,
114
115         /**
116          * True to automatically uncache orphaned Roo.Elements periodically (defaults to true)
117          * @type Boolean
118          */
119         enableGarbageCollector : true,
120
121         /**
122          * True to automatically purge event listeners after uncaching an element (defaults to false).
123          * Note: this only happens if enableGarbageCollector is true.
124          * @type Boolean
125          */
126         enableListenerCollection:false,
127
128         /**
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).
131          * @type String
132          */
133         SSL_SECURE_URL : "javascript:false",
134
135         /**
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).
138          * @type String
139          */
140         BLANK_IMAGE_URL : "http:/"+"/localhost/s.gif",
141
142         emptyFn : function(){},
143         
144         /**
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
149          */
150         applyIf : function(o, c){
151             if(o && c){
152                 for(var p in c){
153                     if(typeof o[p] == "undefined"){ o[p] = c[p]; }
154                 }
155             }
156             return o;
157         },
158
159         /**
160          * Applies event listeners to elements by selectors when the document is ready.
161          * The event name is specified with an @ suffix.
162 <pre><code>
163 Roo.addBehaviors({
164    // add a listener for click on all anchors in element with id foo
165    '#foo a@click' : function(e, t){
166        // do something
167    },
168
169    // add the same listener to multiple selectors (separated by comma BEFORE the @)
170    '#foo a, #bar span.some-class@mouseover' : function(){
171        // do something
172    }
173 });
174 </code></pre>
175          * @param {Object} obj The list of behaviors to apply
176          */
177         addBehaviors : function(o){
178             if(!Roo.isReady){
179                 Roo.onReady(function(){
180                     Roo.addBehaviors(o);
181                 });
182                 return;
183             }
184             var cache = {}; // simple cache for applying multiple behaviors to same selector does query multiple times
185             for(var b in o){
186                 var parts = b.split('@');
187                 if(parts[1]){ // for Object prototype breakers
188                     var s = parts[0];
189                     if(!cache[s]){
190                         cache[s] = Roo.select(s);
191                     }
192                     cache[s].on(parts[1], o[b]);
193                 }
194             }
195             cache = null;
196         },
197
198         /**
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.
203          */
204         id : function(el, prefix){
205             prefix = prefix || "roo-gen";
206             el = Roo.getDom(el);
207             var id = prefix + (++idSeed);
208             return el ? (el.id ? el.id : (el.id = id)) : id;
209         },
210          
211        
212         /**
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
219          * @method extend
220          */
221         extend : function(){
222             // inline overrides
223             var io = function(o){
224                 for(var m in o){
225                     this[m] = o[m];
226                 }
227             };
228             return function(sb, sp, overrides){
229                 if(typeof sp == 'object'){ // eg. prototype, rather than function constructor..
230                     overrides = sp;
231                     sp = sb;
232                     sb = function(){sp.apply(this, arguments);};
233                 }
234                 var F = function(){}, sbp, spp = sp.prototype;
235                 F.prototype = spp;
236                 sbp = sb.prototype = new F();
237                 sbp.constructor=sb;
238                 sb.superclass=spp;
239                 
240                 if(spp.constructor == Object.prototype.constructor){
241                     spp.constructor=sp;
242                    
243                 }
244                 
245                 sb.override = function(o){
246                     Roo.override(sb, o);
247                 };
248                 sbp.override = io;
249                 Roo.override(sb, overrides);
250                 return sb;
251             };
252         }(),
253
254         /**
255          * Adds a list of functions to the prototype of an existing class, overwriting any existing methods with the same name.
256          * Usage:<pre><code>
257 Roo.override(MyClass, {
258     newMethod1: function(){
259         // etc.
260     },
261     newMethod2: function(foo){
262         // etc.
263     }
264 });
265  </code></pre>
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.
269          * @method override
270          */
271         override : function(origclass, overrides){
272             if(overrides){
273                 var p = origclass.prototype;
274                 for(var method in overrides){
275                     p[method] = overrides[method];
276                 }
277             }
278         },
279         /**
280          * Creates namespaces to be used for scoping variables and classes so that they are not global.  Usage:
281          * <pre><code>
282 Roo.namespace('Company', 'Company.data');
283 Company.Widget = function() { ... }
284 Company.data.CustomStore = function(config) { ... }
285 </code></pre>
286          * @param {String} namespace1
287          * @param {String} namespace2
288          * @param {String} etc
289          * @method namespace
290          */
291         namespace : function(){
292             var a=arguments, o=null, i, j, d, rt;
293             for (i=0; i<a.length; ++i) {
294                 d=a[i].split(".");
295                 rt = d[0];
296                 /** eval:var:o */
297                 eval('if (typeof ' + rt + ' == "undefined"){' + rt + ' = {};} o = ' + rt + ';');
298                 for (j=1; j<d.length; ++j) {
299                     o[d[j]]=o[d[j]] || {};
300                     o=o[d[j]];
301                 }
302             }
303         },
304         /**
305          * Creates namespaces to be used for scoping variables and classes so that they are not global.  Usage:
306          * <pre><code>
307 Roo.factory({ xns: Roo.data, xtype : 'Store', .....});
308 Roo.factory(conf, Roo.data);
309 </code></pre>
310          * @param {String} classname
311          * @param {String} namespace (optional)
312          * @method factory
313          */
314          
315         factory : function(c, ns)
316         {
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...
319                 return c;
320             }
321             ns = c.xns ? c.xns : ns; // if c.xns is set, then use that..
322             if (c.constructor == ns[c.xtype]) {// already created...
323                 return c;
324             }
325             if (ns[c.xtype]) {
326                 if (Roo.debug) { Roo.log("Roo.Factory(" + c.xtype + ")"); }
327                 var ret = new ns[c.xtype](c);
328                 ret.xns = false;
329                 return ret;
330             }
331             c.xns = false; // prevent recursion..
332             return c;
333         },
334          /**
335          * Logs to console if it can.
336          *
337          * @param {String|Object} string
338          * @method log
339          */
340         log : function(s)
341         {
342             if ((typeof(console) == 'undefined') || (typeof(console.log) == 'undefined')) {
343                 return; // alerT?
344             }
345             
346             console.log(s);
347         },
348         /**
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.
350          * @param {Object} o
351          * @return {String}
352          */
353         urlEncode : function(o){
354             if(!o){
355                 return "";
356             }
357             var buf = [];
358             for(var key in o){
359                 var ov = o[key], k = Roo.encodeURIComponent(key);
360                 var type = typeof ov;
361                 if(type == 'undefined'){
362                     buf.push(k, "=&");
363                 }else if(type != "function" && type != "object"){
364                     buf.push(k, "=", Roo.encodeURIComponent(ov), "&");
365                 }else if(ov instanceof Array){
366                     if (ov.length) {
367                             for(var i = 0, len = ov.length; i < len; i++) {
368                                 buf.push(k, "=", Roo.encodeURIComponent(ov[i] === undefined ? '' : ov[i]), "&");
369                             }
370                         } else {
371                             buf.push(k, "=&");
372                         }
373                 }
374             }
375             buf.pop();
376             return buf.join("");
377         },
378          /**
379          * Safe version of encodeURIComponent
380          * @param {String} data 
381          * @return {String} 
382          */
383         
384         encodeURIComponent : function (data)
385         {
386             try {
387                 return encodeURIComponent(data);
388             } catch(e) {} // should be an uri encode error.
389             
390             if (data == '' || data == null){
391                return '';
392             }
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);
397             }
398             data = data.toString();
399             var buffer = '';
400             for(var i=0; i<data.length; i++){
401                 var c = data.charCodeAt(i);
402                 var bs = new Array();
403                 if (c > 0x10000){
404                         // 4 bytes
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){
410                          // 3 bytes
411                     bs[0] = 0xE0 | ((c & 0xF000) >>> 12);
412                     bs[1] = 0x80 | ((c & 0xFC0) >>> 6);
413                     bs[2] = 0x80 | (c & 0x3F);
414                 }else if (c > 0x80){
415                        // 2 bytes
416                     bs[0] = 0xC0 | ((c & 0x7C0) >>> 6);
417                     bs[1] = 0x80 | (c & 0x3F);
418                 }else{
419                         // 1 byte
420                     bs[0] = c;
421                 }
422                 for(var j=0; j<bs.length; j++){
423                     var b = bs[j];
424                     var hex = nibble_to_hex((b & 0xF0) >>> 4) 
425                             + nibble_to_hex(b &0x0F);
426                     buffer += '%'+hex;
427                }
428             }
429             return buffer;    
430              
431         },
432
433         /**
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
438          */
439         urlDecode : function(string, overwrite){
440             if(!string || !string.length){
441                 return {};
442             }
443             var obj = {};
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"){
452                         obj[name] = value;
453                     }else if(typeof obj[name] == "string"){
454                         obj[name] = [obj[name]];
455                         obj[name].push(value);
456                     }else{
457                         obj[name].push(value);
458                     }
459                 }else{
460                     obj[name] = value;
461                 }
462             }
463             return obj;
464         },
465
466         /**
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
473          */
474         each : function(array, fn, scope){
475             if(typeof array.length == "undefined" || typeof array == "string"){
476                 array = [array];
477             }
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; };
480             }
481         },
482
483         // deprecated
484         combine : function(){
485             var as = arguments, l = as.length, r = [];
486             for(var i = 0; i < l; i++){
487                 var a = as[i];
488                 if(a instanceof Array){
489                     r = r.concat(a);
490                 }else if(a.length !== undefined && !a.substr){
491                     r = r.concat(Array.prototype.slice.call(a, 0));
492                 }else{
493                     r.push(a);
494                 }
495             }
496             return r;
497         },
498
499         /**
500          * Escapes the passed string for use in a regular expression
501          * @param {String} str
502          * @return {String}
503          */
504         escapeRe : function(s) {
505             return s.replace(/([.*+?^${}()|[\]\/\\])/g, "\\$1");
506         },
507
508         // internal
509         callback : function(cb, scope, args, delay){
510             if(typeof cb == "function"){
511                 if(delay){
512                     cb.defer(delay, scope, args || []);
513                 }else{
514                     cb.apply(scope, args || []);
515                 }
516             }
517         },
518
519         /**
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
523          */
524         getDom : function(el){
525             if(!el){
526                 return null;
527             }
528             return el.dom ? el.dom : (typeof el == 'string' ? document.getElementById(el) : el);
529         },
530
531         /**
532         * Shorthand for {@link Roo.ComponentMgr#get}
533         * @param {String} id
534         * @return Roo.Component
535         */
536         getCmp : function(id){
537             return Roo.ComponentMgr.get(id);
538         },
539          
540         num : function(v, defaultValue){
541             if(typeof v != 'number'){
542                 return defaultValue;
543             }
544             return v;
545         },
546
547         destroy : function(){
548             for(var i = 0, a = arguments, len = a.length; i < len; i++) {
549                 var as = a[i];
550                 if(as){
551                     if(as.dom){
552                         as.removeAllListeners();
553                         as.remove();
554                         continue;
555                     }
556                     if(typeof as.purgeListeners == 'function'){
557                         as.purgeListeners();
558                     }
559                     if(typeof as.destroy == 'function'){
560                         as.destroy();
561                     }
562                 }
563             }
564         },
565
566         // inpired by a similar function in mootools library
567         /**
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
582          * @return {String}
583          */
584         type : function(o){
585             if(o === undefined || o === null){
586                 return false;
587             }
588             if(o.htmlElement){
589                 return 'element';
590             }
591             var t = typeof o;
592             if(t == 'object' && o.nodeName) {
593                 switch(o.nodeType) {
594                     case 1: return 'element';
595                     case 3: return (/\S/).test(o.nodeValue) ? 'textnode' : 'whitespace';
596                 }
597             }
598             if(t == 'object' || t == 'function') {
599                 switch(o.constructor) {
600                     case Array: return 'array';
601                     case RegExp: return 'regexp';
602                 }
603                 if(typeof o.length == 'number' && typeof o.item == 'function') {
604                     return 'nodelist';
605                 }
606             }
607             return t;
608         },
609
610         /**
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
614          * @return {Boolean}
615          */
616         isEmpty : function(v, allowBlank){
617             return v === null || v === undefined || (!allowBlank ? v === '' : false);
618         },
619         
620         /** @type Boolean */
621         isOpera : isOpera,
622         /** @type Boolean */
623         isSafari : isSafari,
624         /** @type Boolean */
625         isFirefox : isFirefox,
626         /** @type Boolean */
627         isIE : isIE,
628         /** @type Boolean */
629         isIE7 : isIE7,
630         /** @type Boolean */
631         isIE11 : isIE11,
632         /** @type Boolean */
633         isEdge : isEdge,
634         /** @type Boolean */
635         isGecko : isGecko,
636         /** @type Boolean */
637         isBorderBox : isBorderBox,
638         /** @type Boolean */
639         isWindows : isWindows,
640         /** @type Boolean */
641         isLinux : isLinux,
642         /** @type Boolean */
643         isMac : isMac,
644         /** @type Boolean */
645         isIOS : isIOS,
646         /** @type Boolean */
647         isAndroid : isAndroid,
648         /** @type Boolean */
649         isTouch : isTouch,
650
651         /**
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.
654          * @type Boolean
655          */
656         useShims : ((isIE && !isIE7) || (isGecko && isMac)),
657         
658         
659                 
660         /**
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}
666          */
667         selectNode : function(selector, root) 
668         {
669             var node = Roo.DomQuery.selectNode(selector,root);
670             return node ? Roo.get(node) : new Roo.Element(false);
671         },
672                 /**
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)
676                  */
677                 
678                 getGridSize : function()
679                 {
680                         var w = Roo.lib.Dom.getViewWidth();
681                         switch(true) {
682                                 case w > 1200:
683                                         return 'xl';
684                                 case w > 992:
685                                         return 'lg';
686                                 case w > 768:
687                                         return 'md';
688                                 case w > 576:
689                                         return 'sm';
690                                 default:
691                                         return 'xs'
692                         }
693                         
694                 } 
695         
696     });
697
698
699 })();
700
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",
703                 "Roo.app", "Roo.ux" 
704                );
705 /*
706  * Based on:
707  * Ext JS Library 1.1.1
708  * Copyright(c) 2006-2007, Ext JS, LLC.
709  *
710  * Originally Released Under LGPL - original licence link has changed is not relivant.
711  *
712  * Fork - LGPL
713  * <script type="text/javascript">
714  */
715
716 (function() {    
717     // wrappedn so fnCleanup is not in global scope...
718     if(Roo.isIE) {
719         function fnCleanUp() {
720             var p = Function.prototype;
721             delete p.createSequence;
722             delete p.defer;
723             delete p.createDelegate;
724             delete p.createCallback;
725             delete p.createInterceptor;
726
727             window.detachEvent("onunload", fnCleanUp);
728         }
729         window.attachEvent("onunload", fnCleanUp);
730     }
731 })();
732
733
734 /**
735  * @class Function
736  * These functions are available on every Function object (any JavaScript function).
737  */
738 Roo.apply(Function.prototype, {
739      /**
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
744     */
745     createCallback : function(/*args...*/){
746         // make args available, in function below
747         var args = arguments;
748         var method = this;
749         return function() {
750             return method.apply(window, args);
751         };
752     },
753
754     /**
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
763      */
764     createDelegate : function(obj, args, appendArgs){
765         var method = this;
766         return function() {
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
775             }
776             return method.apply(obj || window, callArgs);
777         };
778     },
779
780     /**
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
788      */
789     defer : function(millis, obj, args, appendArgs){
790         var fn = this.createDelegate(obj, args, appendArgs);
791         if(millis){
792             return setTimeout(fn, millis);
793         }
794         fn();
795         return 0;
796     },
797     /**
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
804      */
805     createSequence : function(fcn, scope){
806         if(typeof fcn != "function"){
807             return this;
808         }
809         var method = this;
810         return function() {
811             var retval = method.apply(this || window, arguments);
812             fcn.apply(scope || this || window, arguments);
813             return retval;
814         };
815     },
816
817     /**
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.
821      * @addon
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
825      */
826     createInterceptor : function(fcn, scope){
827         if(typeof fcn != "function"){
828             return this;
829         }
830         var method = this;
831         return function() {
832             fcn.target = this;
833             fcn.method = method;
834             if(fcn.apply(scope || this || window, arguments) === false){
835                 return;
836             }
837             return method.apply(this || window, arguments);
838         };
839     }
840 });
841 /*
842  * Based on:
843  * Ext JS Library 1.1.1
844  * Copyright(c) 2006-2007, Ext JS, LLC.
845  *
846  * Originally Released Under LGPL - original licence link has changed is not relivant.
847  *
848  * Fork - LGPL
849  * <script type="text/javascript">
850  */
851
852 Roo.applyIf(String, {
853     
854     /** @scope String */
855     
856     /**
857      * Escapes the passed string for ' and \
858      * @param {String} string The string to escape
859      * @return {String} The escaped string
860      * @static
861      */
862     escape : function(string) {
863         return string.replace(/('|\\)/g, "\\$1");
864     },
865
866     /**
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:
869      * <pre><code>
870 var s = String.leftPad('123', 5, '0');
871 // s now contains the string: '00123'
872 </code></pre>
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
877      * @static
878      */
879     leftPad : function (val, size, ch) {
880         var result = new String(val);
881         if(ch === null || ch === undefined || ch === '') {
882             ch = " ";
883         }
884         while (result.length < size) {
885             result = ch + result;
886         }
887         return result;
888     },
889
890     /**
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:
893      * <pre><code>
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>'
897 </code></pre>
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
902      * @static
903      */
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]);
908         });
909     }
910   
911     
912 });
913
914 /**
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.
919  * <pre><code>
920 // alternate sort directions
921 sort = sort.toggle('ASC', 'DESC');
922
923 // instead of conditional logic:
924 sort = (sort == 'ASC' ? 'DESC' : 'ASC');
925 </code></pre>
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
929  */
930  
931 String.prototype.toggle = function(value, other){
932     return this == value ? other : value;
933 };
934
935
936 /**
937   * Remove invalid unicode characters from a string 
938   *
939   * @return {String} The clean string
940   */
941 String.prototype.unicodeClean = function () {
942     return this.replace(/[\s\S]/g,
943         function(character) {
944             if (character.charCodeAt()< 256) {
945               return character;
946            }
947            try {
948                 encodeURIComponent(character);
949            } catch(e) { 
950               return '';
951            }
952            return character;
953         }
954     );
955 };
956   
957
958 /**
959   * Make the first letter of a string uppercase
960   *
961   * @return {String} The new string.
962   */
963 String.prototype.toUpperCaseFirst = function () {
964     return this.charAt(0).toUpperCase() + this.slice(1);
965 };  
966   
967 /*
968  * Based on:
969  * Ext JS Library 1.1.1
970  * Copyright(c) 2006-2007, Ext JS, LLC.
971  *
972  * Originally Released Under LGPL - original licence link has changed is not relivant.
973  *
974  * Fork - LGPL
975  * <script type="text/javascript">
976  */
977
978  /**
979  * @class Number
980  */
981 Roo.applyIf(Number.prototype, {
982     /**
983      * Checks whether or not the current number is within a desired range.  If the number is already within the
984      * range it is returned, otherwise the min or max value is returned depending on which side of the range is
985      * exceeded.  Note that this method returns the constrained value but does not change the current number.
986      * @param {Number} min The minimum number in the range
987      * @param {Number} max The maximum number in the range
988      * @return {Number} The constrained value if outside the range, otherwise the current value
989      */
990     constrain : function(min, max){
991         return Math.min(Math.max(this, min), max);
992     }
993 });/*
994  * Based on:
995  * Ext JS Library 1.1.1
996  * Copyright(c) 2006-2007, Ext JS, LLC.
997  *
998  * Originally Released Under LGPL - original licence link has changed is not relivant.
999  *
1000  * Fork - LGPL
1001  * <script type="text/javascript">
1002  */
1003  /**
1004  * @class Array
1005  */
1006 Roo.applyIf(Array.prototype, {
1007     /**
1008      * 
1009      * Checks whether or not the specified object exists in the array.
1010      * @param {Object} o The object to check for
1011      * @return {Number} The index of o in the array (or -1 if it is not found)
1012      */
1013     indexOf : function(o){
1014        for (var i = 0, len = this.length; i < len; i++){
1015               if(this[i] == o) { return i; }
1016        }
1017            return -1;
1018     },
1019
1020     /**
1021      * Removes the specified object from the array.  If the object is not found nothing happens.
1022      * @param {Object} o The object to remove
1023      */
1024     remove : function(o){
1025        var index = this.indexOf(o);
1026        if(index != -1){
1027            this.splice(index, 1);
1028        }
1029     },
1030     /**
1031      * Map (JS 1.6 compatibility)
1032      * @param {Function} function  to call
1033      */
1034     map : function(fun )
1035     {
1036         var len = this.length >>> 0;
1037         if (typeof fun != "function") {
1038             throw new TypeError();
1039         }
1040         var res = new Array(len);
1041         var thisp = arguments[1];
1042         for (var i = 0; i < len; i++)
1043         {
1044             if (i in this) {
1045                 res[i] = fun.call(thisp, this[i], i, this);
1046             }
1047         }
1048
1049         return res;
1050     },
1051     /**
1052      * equals
1053      * @param {Array} o The array to compare to
1054      * @returns {Boolean} true if the same
1055      */
1056     equals : function(b)
1057     {
1058             // https://stackoverflow.com/questions/3115982/how-to-check-if-two-arrays-are-equal-with-javascript
1059         if (this === b) {
1060             return true;
1061         }
1062         if (b == null) {
1063             return false;
1064         }
1065         if (this.length !== b.length) {
1066             return false;
1067         }
1068           
1069         // sort?? a.sort().equals(b.sort());
1070           
1071         for (var i = 0; i < this.length; ++i) {
1072             if (this[i] !== b[i]) {
1073             return false;
1074             }
1075         }
1076         return true;
1077     } 
1078     
1079     
1080     
1081     
1082 });
1083
1084 Roo.applyIf(Array, {
1085  /**
1086      * from
1087      * @static
1088      * @param {Array} o Or Array like object (eg. nodelist)
1089      * @returns {Array} 
1090      */
1091     from : function(o)
1092     {
1093         var ret= [];
1094     
1095         for (var i =0; i < o.length; i++) { 
1096             ret[i] = o[i];
1097         }
1098         return ret;
1099       
1100     }
1101 });
1102 /*
1103  * Based on:
1104  * Ext JS Library 1.1.1
1105  * Copyright(c) 2006-2007, Ext JS, LLC.
1106  *
1107  * Originally Released Under LGPL - original licence link has changed is not relivant.
1108  *
1109  * Fork - LGPL
1110  * <script type="text/javascript">
1111  */
1112
1113 /**
1114  * @class Date
1115  *
1116  * The date parsing and format syntax is a subset of
1117  * <a href="http://www.php.net/date">PHP's date() function</a>, and the formats that are
1118  * supported will provide results equivalent to their PHP versions.
1119  *
1120  * Following is the list of all currently supported formats:
1121  *<pre>
1122 Sample date:
1123 'Wed Jan 10 2007 15:05:01 GMT-0600 (Central Standard Time)'
1124
1125 Format  Output      Description
1126 ------  ----------  --------------------------------------------------------------
1127   d      10         Day of the month, 2 digits with leading zeros
1128   D      Wed        A textual representation of a day, three letters
1129   j      10         Day of the month without leading zeros
1130   l      Wednesday  A full textual representation of the day of the week
1131   S      th         English ordinal day of month suffix, 2 chars (use with j)
1132   w      3          Numeric representation of the day of the week
1133   z      9          The julian date, or day of the year (0-365)
1134   W      01         ISO-8601 2-digit week number of year, weeks starting on Monday (00-52)
1135   F      January    A full textual representation of the month
1136   m      01         Numeric representation of a month, with leading zeros
1137   M      Jan        Month name abbreviation, three letters
1138   n      1          Numeric representation of a month, without leading zeros
1139   t      31         Number of days in the given month
1140   L      0          Whether it's a leap year (1 if it is a leap year, else 0)
1141   Y      2007       A full numeric representation of a year, 4 digits
1142   y      07         A two digit representation of a year
1143   a      pm         Lowercase Ante meridiem and Post meridiem
1144   A      PM         Uppercase Ante meridiem and Post meridiem
1145   g      3          12-hour format of an hour without leading zeros
1146   G      15         24-hour format of an hour without leading zeros
1147   h      03         12-hour format of an hour with leading zeros
1148   H      15         24-hour format of an hour with leading zeros
1149   i      05         Minutes with leading zeros
1150   s      01         Seconds, with leading zeros
1151   O      -0600      Difference to Greenwich time (GMT) in hours (Allows +08, without minutes)
1152   P      -06:00     Difference to Greenwich time (GMT) with colon between hours and minutes
1153   T      CST        Timezone setting of the machine running the code
1154   Z      -21600     Timezone offset in seconds (negative if west of UTC, positive if east)
1155 </pre>
1156  *
1157  * Example usage (note that you must escape format specifiers with '\\' to render them as character literals):
1158  * <pre><code>
1159 var dt = new Date('1/10/2007 03:05:01 PM GMT-0600');
1160 document.write(dt.format('Y-m-d'));                         //2007-01-10
1161 document.write(dt.format('F j, Y, g:i a'));                 //January 10, 2007, 3:05 pm
1162 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
1163  </code></pre>
1164  *
1165  * Here are some standard date/time patterns that you might find helpful.  They
1166  * are not part of the source of Date.js, but to use them you can simply copy this
1167  * block of code into any script that is included after Date.js and they will also become
1168  * globally available on the Date object.  Feel free to add or remove patterns as needed in your code.
1169  * <pre><code>
1170 Date.patterns = {
1171     ISO8601Long:"Y-m-d H:i:s",
1172     ISO8601Short:"Y-m-d",
1173     ShortDate: "n/j/Y",
1174     LongDate: "l, F d, Y",
1175     FullDateTime: "l, F d, Y g:i:s A",
1176     MonthDay: "F d",
1177     ShortTime: "g:i A",
1178     LongTime: "g:i:s A",
1179     SortableDateTime: "Y-m-d\\TH:i:s",
1180     UniversalSortableDateTime: "Y-m-d H:i:sO",
1181     YearMonth: "F, Y"
1182 };
1183 </code></pre>
1184  *
1185  * Example usage:
1186  * <pre><code>
1187 var dt = new Date();
1188 document.write(dt.format(Date.patterns.ShortDate));
1189  </code></pre>
1190  */
1191
1192 /*
1193  * Most of the date-formatting functions below are the excellent work of Baron Schwartz.
1194  * They generate precompiled functions from date formats instead of parsing and
1195  * processing the pattern every time you format a date.  These functions are available
1196  * on every Date object (any javascript function).
1197  *
1198  * The original article and download are here:
1199  * http://www.xaprb.com/blog/2005/12/12/javascript-closures-for-runtime-efficiency/
1200  *
1201  */
1202  
1203  
1204  // was in core
1205 /**
1206  Returns the number of milliseconds between this date and date
1207  @param {Date} date (optional) Defaults to now
1208  @param {String} interval (optional) Default Date.MILLI, A valid date interval enum value (eg. Date.DAY) 
1209  @return {Number} The diff in milliseconds or units of interval
1210  @member Date getElapsed
1211  */
1212 Date.prototype.getElapsed = function(date, interval)
1213 {
1214     date = date ||  new Date();
1215     var ret = Math.abs(date.getTime()-this.getTime());
1216     switch (interval) {
1217        
1218         case  Date.SECOND:
1219             return Math.floor(ret / (1000));
1220         case  Date.MINUTE:
1221             return Math.floor(ret / (1000*60));
1222         case  Date.HOUR:
1223             return Math.floor(ret / (1000*60*60));
1224         case  Date.DAY:
1225             return Math.floor(ret / (1000*60*60*24));
1226         case  Date.MONTH: // this does not give exact number...??
1227             return ((date.format("Y") - this.format("Y")) * 12) + (date.format("m") - this.format("m"));
1228         case  Date.YEAR: // this does not give exact number...??
1229             return (date.format("Y") - this.format("Y"));
1230        
1231         case  Date.MILLI:
1232         default:
1233             return ret;
1234     }
1235 };
1236  
1237 // was in date file..
1238
1239
1240 // private
1241 Date.parseFunctions = {count:0};
1242 // private
1243 Date.parseRegexes = [];
1244 // private
1245 Date.formatFunctions = {count:0};
1246
1247 // private
1248 Date.prototype.dateFormat = function(format) {
1249     if (Date.formatFunctions[format] == null) {
1250         Date.createNewFormat(format);
1251     }
1252     var func = Date.formatFunctions[format];
1253     return this[func]();
1254 };
1255
1256
1257 /**
1258  * Formats a date given the supplied format string
1259  * @param {String} format The format string
1260  * @return {String} The formatted date
1261  * @method
1262  */
1263 Date.prototype.format = Date.prototype.dateFormat;
1264
1265 // private
1266 Date.createNewFormat = function(format) {
1267     var funcName = "format" + Date.formatFunctions.count++;
1268     Date.formatFunctions[format] = funcName;
1269     var code = "Date.prototype." + funcName + " = function(){return ";
1270     var special = false;
1271     var ch = '';
1272     for (var i = 0; i < format.length; ++i) {
1273         ch = format.charAt(i);
1274         if (!special && ch == "\\") {
1275             special = true;
1276         }
1277         else if (special) {
1278             special = false;
1279             code += "'" + String.escape(ch) + "' + ";
1280         }
1281         else {
1282             code += Date.getFormatCode(ch);
1283         }
1284     }
1285     /** eval:var:zzzzzzzzzzzzz */
1286     eval(code.substring(0, code.length - 3) + ";}");
1287 };
1288
1289 // private
1290 Date.getFormatCode = function(character) {
1291     switch (character) {
1292     case "d":
1293         return "String.leftPad(this.getDate(), 2, '0') + ";
1294     case "D":
1295         return "Date.dayNames[this.getDay()].substring(0, 3) + ";
1296     case "j":
1297         return "this.getDate() + ";
1298     case "l":
1299         return "Date.dayNames[this.getDay()] + ";
1300     case "S":
1301         return "this.getSuffix() + ";
1302     case "w":
1303         return "this.getDay() + ";
1304     case "z":
1305         return "this.getDayOfYear() + ";
1306     case "W":
1307         return "this.getWeekOfYear() + ";
1308     case "F":
1309         return "Date.monthNames[this.getMonth()] + ";
1310     case "m":
1311         return "String.leftPad(this.getMonth() + 1, 2, '0') + ";
1312     case "M":
1313         return "Date.monthNames[this.getMonth()].substring(0, 3) + ";
1314     case "n":
1315         return "(this.getMonth() + 1) + ";
1316     case "t":
1317         return "this.getDaysInMonth() + ";
1318     case "L":
1319         return "(this.isLeapYear() ? 1 : 0) + ";
1320     case "Y":
1321         return "this.getFullYear() + ";
1322     case "y":
1323         return "('' + this.getFullYear()).substring(2, 4) + ";
1324     case "a":
1325         return "(this.getHours() < 12 ? 'am' : 'pm') + ";
1326     case "A":
1327         return "(this.getHours() < 12 ? 'AM' : 'PM') + ";
1328     case "g":
1329         return "((this.getHours() % 12) ? this.getHours() % 12 : 12) + ";
1330     case "G":
1331         return "this.getHours() + ";
1332     case "h":
1333         return "String.leftPad((this.getHours() % 12) ? this.getHours() % 12 : 12, 2, '0') + ";
1334     case "H":
1335         return "String.leftPad(this.getHours(), 2, '0') + ";
1336     case "i":
1337         return "String.leftPad(this.getMinutes(), 2, '0') + ";
1338     case "s":
1339         return "String.leftPad(this.getSeconds(), 2, '0') + ";
1340     case "O":
1341         return "this.getGMTOffset() + ";
1342     case "P":
1343         return "this.getGMTColonOffset() + ";
1344     case "T":
1345         return "this.getTimezone() + ";
1346     case "Z":
1347         return "(this.getTimezoneOffset() * -60) + ";
1348     default:
1349         return "'" + String.escape(character) + "' + ";
1350     }
1351 };
1352
1353 /**
1354  * Parses the passed string using the specified format. Note that this function expects dates in normal calendar
1355  * format, meaning that months are 1-based (1 = January) and not zero-based like in JavaScript dates.  Any part of
1356  * the date format that is not specified will default to the current date value for that part.  Time parts can also
1357  * be specified, but default to 0.  Keep in mind that the input date string must precisely match the specified format
1358  * string or the parse operation will fail.
1359  * Example Usage:
1360 <pre><code>
1361 //dt = Fri May 25 2007 (current date)
1362 var dt = new Date();
1363
1364 //dt = Thu May 25 2006 (today's month/day in 2006)
1365 dt = Date.parseDate("2006", "Y");
1366
1367 //dt = Sun Jan 15 2006 (all date parts specified)
1368 dt = Date.parseDate("2006-1-15", "Y-m-d");
1369
1370 //dt = Sun Jan 15 2006 15:20:01 GMT-0600 (CST)
1371 dt = Date.parseDate("2006-1-15 3:20:01 PM", "Y-m-d h:i:s A" );
1372 </code></pre>
1373  * @param {String} input The unparsed date as a string
1374  * @param {String} format The format the date is in
1375  * @return {Date} The parsed date
1376  * @static
1377  */
1378 Date.parseDate = function(input, format) {
1379     if (Date.parseFunctions[format] == null) {
1380         Date.createParser(format);
1381     }
1382     var func = Date.parseFunctions[format];
1383     return Date[func](input);
1384 };
1385 /**
1386  * @private
1387  */
1388
1389 Date.createParser = function(format) {
1390     var funcName = "parse" + Date.parseFunctions.count++;
1391     var regexNum = Date.parseRegexes.length;
1392     var currentGroup = 1;
1393     Date.parseFunctions[format] = funcName;
1394
1395     var code = "Date." + funcName + " = function(input){\n"
1396         + "var y = -1, m = -1, d = -1, h = -1, i = -1, s = -1, o, z, v;\n"
1397         + "var d = new Date();\n"
1398         + "y = d.getFullYear();\n"
1399         + "m = d.getMonth();\n"
1400         + "d = d.getDate();\n"
1401         + "if (typeof(input) !== 'string') { input = input.toString(); }\n"
1402         + "var results = input.match(Date.parseRegexes[" + regexNum + "]);\n"
1403         + "if (results && results.length > 0) {";
1404     var regex = "";
1405
1406     var special = false;
1407     var ch = '';
1408     for (var i = 0; i < format.length; ++i) {
1409         ch = format.charAt(i);
1410         if (!special && ch == "\\") {
1411             special = true;
1412         }
1413         else if (special) {
1414             special = false;
1415             regex += String.escape(ch);
1416         }
1417         else {
1418             var obj = Date.formatCodeToRegex(ch, currentGroup);
1419             currentGroup += obj.g;
1420             regex += obj.s;
1421             if (obj.g && obj.c) {
1422                 code += obj.c;
1423             }
1424         }
1425     }
1426
1427     code += "if (y >= 0 && m >= 0 && d > 0 && h >= 0 && i >= 0 && s >= 0)\n"
1428         + "{v = new Date(y, m, d, h, i, s); v.setFullYear(y);}\n"
1429         + "else if (y >= 0 && m >= 0 && d > 0 && h >= 0 && i >= 0)\n"
1430         + "{v = new Date(y, m, d, h, i); v.setFullYear(y);}\n"
1431         + "else if (y >= 0 && m >= 0 && d > 0 && h >= 0)\n"
1432         + "{v = new Date(y, m, d, h); v.setFullYear(y);}\n"
1433         + "else if (y >= 0 && m >= 0 && d > 0)\n"
1434         + "{v = new Date(y, m, d); v.setFullYear(y);}\n"
1435         + "else if (y >= 0 && m >= 0)\n"
1436         + "{v = new Date(y, m); v.setFullYear(y);}\n"
1437         + "else if (y >= 0)\n"
1438         + "{v = new Date(y); v.setFullYear(y);}\n"
1439         + "}return (v && (z || o))?\n" // favour UTC offset over GMT offset
1440         + "    ((z)? v.add(Date.SECOND, (v.getTimezoneOffset() * 60) + (z*1)) :\n" // reset to UTC, then add offset
1441         + "        v.add(Date.HOUR, (v.getGMTOffset() / 100) + (o / -100))) : v\n" // reset to GMT, then add offset
1442         + ";}";
1443
1444     Date.parseRegexes[regexNum] = new RegExp("^" + regex + "$");
1445     /** eval:var:zzzzzzzzzzzzz */
1446     eval(code);
1447 };
1448
1449 // private
1450 Date.formatCodeToRegex = function(character, currentGroup) {
1451     switch (character) {
1452     case "D":
1453         return {g:0,
1454         c:null,
1455         s:"(?:Sun|Mon|Tue|Wed|Thu|Fri|Sat)"};
1456     case "j":
1457         return {g:1,
1458             c:"d = parseInt(results[" + currentGroup + "], 10);\n",
1459             s:"(\\d{1,2})"}; // day of month without leading zeroes
1460     case "d":
1461         return {g:1,
1462             c:"d = parseInt(results[" + currentGroup + "], 10);\n",
1463             s:"(\\d{2})"}; // day of month with leading zeroes
1464     case "l":
1465         return {g:0,
1466             c:null,
1467             s:"(?:" + Date.dayNames.join("|") + ")"};
1468     case "S":
1469         return {g:0,
1470             c:null,
1471             s:"(?:st|nd|rd|th)"};
1472     case "w":
1473         return {g:0,
1474             c:null,
1475             s:"\\d"};
1476     case "z":
1477         return {g:0,
1478             c:null,
1479             s:"(?:\\d{1,3})"};
1480     case "W":
1481         return {g:0,
1482             c:null,
1483             s:"(?:\\d{2})"};
1484     case "F":
1485         return {g:1,
1486             c:"m = parseInt(Date.monthNumbers[results[" + currentGroup + "].substring(0, 3)], 10);\n",
1487             s:"(" + Date.monthNames.join("|") + ")"};
1488     case "M":
1489         return {g:1,
1490             c:"m = parseInt(Date.monthNumbers[results[" + currentGroup + "]], 10);\n",
1491             s:"(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)"};
1492     case "n":
1493         return {g:1,
1494             c:"m = parseInt(results[" + currentGroup + "], 10) - 1;\n",
1495             s:"(\\d{1,2})"}; // Numeric representation of a month, without leading zeros
1496     case "m":
1497         return {g:1,
1498             c:"m = Math.max(0,parseInt(results[" + currentGroup + "], 10) - 1);\n",
1499             s:"(\\d{2})"}; // Numeric representation of a month, with leading zeros
1500     case "t":
1501         return {g:0,
1502             c:null,
1503             s:"\\d{1,2}"};
1504     case "L":
1505         return {g:0,
1506             c:null,
1507             s:"(?:1|0)"};
1508     case "Y":
1509         return {g:1,
1510             c:"y = parseInt(results[" + currentGroup + "], 10);\n",
1511             s:"(\\d{4})"};
1512     case "y":
1513         return {g:1,
1514             c:"var ty = parseInt(results[" + currentGroup + "], 10);\n"
1515                 + "y = ty > Date.y2kYear ? 1900 + ty : 2000 + ty;\n",
1516             s:"(\\d{1,2})"};
1517     case "a":
1518         return {g:1,
1519             c:"if (results[" + currentGroup + "] == 'am') {\n"
1520                 + "if (h == 12) { h = 0; }\n"
1521                 + "} else { if (h < 12) { h += 12; }}",
1522             s:"(am|pm)"};
1523     case "A":
1524         return {g:1,
1525             c:"if (results[" + currentGroup + "] == 'AM') {\n"
1526                 + "if (h == 12) { h = 0; }\n"
1527                 + "} else { if (h < 12) { h += 12; }}",
1528             s:"(AM|PM)"};
1529     case "g":
1530     case "G":
1531         return {g:1,
1532             c:"h = parseInt(results[" + currentGroup + "], 10);\n",
1533             s:"(\\d{1,2})"}; // 12/24-hr format  format of an hour without leading zeroes
1534     case "h":
1535     case "H":
1536         return {g:1,
1537             c:"h = parseInt(results[" + currentGroup + "], 10);\n",
1538             s:"(\\d{2})"}; //  12/24-hr format  format of an hour with leading zeroes
1539     case "i":
1540         return {g:1,
1541             c:"i = parseInt(results[" + currentGroup + "], 10);\n",
1542             s:"(\\d{2})"};
1543     case "s":
1544         return {g:1,
1545             c:"s = parseInt(results[" + currentGroup + "], 10);\n",
1546             s:"(\\d{2})"};
1547     case "O":
1548         return {g:1,
1549             c:[
1550                 "o = results[", currentGroup, "];\n",
1551                 "var sn = o.substring(0,1);\n", // get + / - sign
1552                 "var hr = o.substring(1,3)*1 + Math.floor(o.substring(3,5) / 60);\n", // get hours (performs minutes-to-hour conversion also)
1553                 "var mn = o.substring(3,5) % 60;\n", // get minutes
1554                 "o = ((-12 <= (hr*60 + mn)/60) && ((hr*60 + mn)/60 <= 14))?\n", // -12hrs <= GMT offset <= 14hrs
1555                 "    (sn + String.leftPad(hr, 2, 0) + String.leftPad(mn, 2, 0)) : null;\n"
1556             ].join(""),
1557             s:"([+\-]\\d{2,4})"};
1558     
1559     
1560     case "P":
1561         return {g:1,
1562                 c:[
1563                    "o = results[", currentGroup, "];\n",
1564                    "var sn = o.substring(0,1);\n",
1565                    "var hr = o.substring(1,3)*1 + Math.floor(o.substring(4,6) / 60);\n",
1566                    "var mn = o.substring(4,6) % 60;\n",
1567                    "o = ((-12 <= (hr*60 + mn)/60) && ((hr*60 + mn)/60 <= 14))?\n",
1568                         "    (sn + String.leftPad(hr, 2, 0) + String.leftPad(mn, 2, 0)) : null;\n"
1569             ].join(""),
1570             s:"([+\-]\\d{4})"};
1571     case "T":
1572         return {g:0,
1573             c:null,
1574             s:"[A-Z]{1,4}"}; // timezone abbrev. may be between 1 - 4 chars
1575     case "Z":
1576         return {g:1,
1577             c:"z = results[" + currentGroup + "];\n" // -43200 <= UTC offset <= 50400
1578                   + "z = (-43200 <= z*1 && z*1 <= 50400)? z : null;\n",
1579             s:"([+\-]?\\d{1,5})"}; // leading '+' sign is optional for UTC offset
1580     default:
1581         return {g:0,
1582             c:null,
1583             s:String.escape(character)};
1584     }
1585 };
1586
1587 /**
1588  * Get the timezone abbreviation of the current date (equivalent to the format specifier 'T').
1589  * @return {String} The abbreviated timezone name (e.g. 'CST')
1590  */
1591 Date.prototype.getTimezone = function() {
1592     return this.toString().replace(/^.*? ([A-Z]{1,4})[\-+][0-9]{4} .*$/, "$1");
1593 };
1594
1595 /**
1596  * Get the offset from GMT of the current date (equivalent to the format specifier 'O').
1597  * @return {String} The 4-character offset string prefixed with + or - (e.g. '-0600')
1598  */
1599 Date.prototype.getGMTOffset = function() {
1600     return (this.getTimezoneOffset() > 0 ? "-" : "+")
1601         + String.leftPad(Math.abs(Math.floor(this.getTimezoneOffset() / 60)), 2, "0")
1602         + String.leftPad(this.getTimezoneOffset() % 60, 2, "0");
1603 };
1604
1605 /**
1606  * Get the offset from GMT of the current date (equivalent to the format specifier 'P').
1607  * @return {String} 2-characters representing hours and 2-characters representing minutes
1608  * seperated by a colon and prefixed with + or - (e.g. '-06:00')
1609  */
1610 Date.prototype.getGMTColonOffset = function() {
1611         return (this.getTimezoneOffset() > 0 ? "-" : "+")
1612                 + String.leftPad(Math.abs(Math.floor(this.getTimezoneOffset() / 60)), 2, "0")
1613                 + ":"
1614                 + String.leftPad(this.getTimezoneOffset() %60, 2, "0");
1615 }
1616
1617 /**
1618  * Get the numeric day number of the year, adjusted for leap year.
1619  * @return {Number} 0 through 364 (365 in leap years)
1620  */
1621 Date.prototype.getDayOfYear = function() {
1622     var num = 0;
1623     Date.daysInMonth[1] = this.isLeapYear() ? 29 : 28;
1624     for (var i = 0; i < this.getMonth(); ++i) {
1625         num += Date.daysInMonth[i];
1626     }
1627     return num + this.getDate() - 1;
1628 };
1629
1630 /**
1631  * Get the string representation of the numeric week number of the year
1632  * (equivalent to the format specifier 'W').
1633  * @return {String} '00' through '52'
1634  */
1635 Date.prototype.getWeekOfYear = function() {
1636     // Skip to Thursday of this week
1637     var now = this.getDayOfYear() + (4 - this.getDay());
1638     // Find the first Thursday of the year
1639     var jan1 = new Date(this.getFullYear(), 0, 1);
1640     var then = (7 - jan1.getDay() + 4);
1641     return String.leftPad(((now - then) / 7) + 1, 2, "0");
1642 };
1643
1644 /**
1645  * Whether or not the current date is in a leap year.
1646  * @return {Boolean} True if the current date is in a leap year, else false
1647  */
1648 Date.prototype.isLeapYear = function() {
1649     var year = this.getFullYear();
1650     return ((year & 3) == 0 && (year % 100 || (year % 400 == 0 && year)));
1651 };
1652
1653 /**
1654  * Get the first day of the current month, adjusted for leap year.  The returned value
1655  * is the numeric day index within the week (0-6) which can be used in conjunction with
1656  * the {@link #monthNames} array to retrieve the textual day name.
1657  * Example:
1658  *<pre><code>
1659 var dt = new Date('1/10/2007');
1660 document.write(Date.dayNames[dt.getFirstDayOfMonth()]); //output: 'Monday'
1661 </code></pre>
1662  * @return {Number} The day number (0-6)
1663  */
1664 Date.prototype.getFirstDayOfMonth = function() {
1665     var day = (this.getDay() - (this.getDate() - 1)) % 7;
1666     return (day < 0) ? (day + 7) : day;
1667 };
1668
1669 /**
1670  * Get the last day of the current month, adjusted for leap year.  The returned value
1671  * is the numeric day index within the week (0-6) which can be used in conjunction with
1672  * the {@link #monthNames} array to retrieve the textual day name.
1673  * Example:
1674  *<pre><code>
1675 var dt = new Date('1/10/2007');
1676 document.write(Date.dayNames[dt.getLastDayOfMonth()]); //output: 'Wednesday'
1677 </code></pre>
1678  * @return {Number} The day number (0-6)
1679  */
1680 Date.prototype.getLastDayOfMonth = function() {
1681     var day = (this.getDay() + (Date.daysInMonth[this.getMonth()] - this.getDate())) % 7;
1682     return (day < 0) ? (day + 7) : day;
1683 };
1684
1685
1686 /**
1687  * Get the first date of this date's month
1688  * @return {Date}
1689  */
1690 Date.prototype.getFirstDateOfMonth = function() {
1691     return new Date(this.getFullYear(), this.getMonth(), 1);
1692 };
1693
1694 /**
1695  * Get the last date of this date's month
1696  * @return {Date}
1697  */
1698 Date.prototype.getLastDateOfMonth = function() {
1699     return new Date(this.getFullYear(), this.getMonth(), this.getDaysInMonth());
1700 };
1701 /**
1702  * Get the number of days in the current month, adjusted for leap year.
1703  * @return {Number} The number of days in the month
1704  */
1705 Date.prototype.getDaysInMonth = function() {
1706     Date.daysInMonth[1] = this.isLeapYear() ? 29 : 28;
1707     return Date.daysInMonth[this.getMonth()];
1708 };
1709
1710 /**
1711  * Get the English ordinal suffix of the current day (equivalent to the format specifier 'S').
1712  * @return {String} 'st, 'nd', 'rd' or 'th'
1713  */
1714 Date.prototype.getSuffix = function() {
1715     switch (this.getDate()) {
1716         case 1:
1717         case 21:
1718         case 31:
1719             return "st";
1720         case 2:
1721         case 22:
1722             return "nd";
1723         case 3:
1724         case 23:
1725             return "rd";
1726         default:
1727             return "th";
1728     }
1729 };
1730
1731 // private
1732 Date.daysInMonth = [31,28,31,30,31,30,31,31,30,31,30,31];
1733
1734 /**
1735  * An array of textual month names.
1736  * Override these values for international dates, for example...
1737  * Date.monthNames = ['JanInYourLang', 'FebInYourLang', ...];
1738  * @type Array
1739  * @static
1740  */
1741 Date.monthNames =
1742    ["January",
1743     "February",
1744     "March",
1745     "April",
1746     "May",
1747     "June",
1748     "July",
1749     "August",
1750     "September",
1751     "October",
1752     "November",
1753     "December"];
1754
1755 /**
1756  * An array of textual day names.
1757  * Override these values for international dates, for example...
1758  * Date.dayNames = ['SundayInYourLang', 'MondayInYourLang', ...];
1759  * @type Array
1760  * @static
1761  */
1762 Date.dayNames =
1763    ["Sunday",
1764     "Monday",
1765     "Tuesday",
1766     "Wednesday",
1767     "Thursday",
1768     "Friday",
1769     "Saturday"];
1770
1771 // private
1772 Date.y2kYear = 50;
1773 // private
1774 Date.monthNumbers = {
1775     Jan:0,
1776     Feb:1,
1777     Mar:2,
1778     Apr:3,
1779     May:4,
1780     Jun:5,
1781     Jul:6,
1782     Aug:7,
1783     Sep:8,
1784     Oct:9,
1785     Nov:10,
1786     Dec:11};
1787
1788 /**
1789  * Creates and returns a new Date instance with the exact same date value as the called instance.
1790  * Dates are copied and passed by reference, so if a copied date variable is modified later, the original
1791  * variable will also be changed.  When the intention is to create a new variable that will not
1792  * modify the original instance, you should create a clone.
1793  *
1794  * Example of correctly cloning a date:
1795  * <pre><code>
1796 //wrong way:
1797 var orig = new Date('10/1/2006');
1798 var copy = orig;
1799 copy.setDate(5);
1800 document.write(orig);  //returns 'Thu Oct 05 2006'!
1801
1802 //correct way:
1803 var orig = new Date('10/1/2006');
1804 var copy = orig.clone();
1805 copy.setDate(5);
1806 document.write(orig);  //returns 'Thu Oct 01 2006'
1807 </code></pre>
1808  * @return {Date} The new Date instance
1809  */
1810 Date.prototype.clone = function() {
1811         return new Date(this.getTime());
1812 };
1813
1814 /**
1815  * Clears any time information from this date
1816  @param {Boolean} clone true to create a clone of this date, clear the time and return it
1817  @return {Date} this or the clone
1818  */
1819 Date.prototype.clearTime = function(clone){
1820     if(clone){
1821         return this.clone().clearTime();
1822     }
1823     this.setHours(0);
1824     this.setMinutes(0);
1825     this.setSeconds(0);
1826     this.setMilliseconds(0);
1827     return this;
1828 };
1829
1830 // private
1831 // safari setMonth is broken -- check that this is only donw once...
1832 if(Roo.isSafari && typeof(Date.brokenSetMonth) == 'undefined'){
1833     Date.brokenSetMonth = Date.prototype.setMonth;
1834         Date.prototype.setMonth = function(num){
1835                 if(num <= -1){
1836                         var n = Math.ceil(-num);
1837                         var back_year = Math.ceil(n/12);
1838                         var month = (n % 12) ? 12 - n % 12 : 0 ;
1839                         this.setFullYear(this.getFullYear() - back_year);
1840                         return Date.brokenSetMonth.call(this, month);
1841                 } else {
1842                         return Date.brokenSetMonth.apply(this, arguments);
1843                 }
1844         };
1845 }
1846
1847 /** Date interval constant 
1848 * @static 
1849 * @type String */
1850 Date.MILLI = "ms";
1851 /** Date interval constant 
1852 * @static 
1853 * @type String */
1854 Date.SECOND = "s";
1855 /** Date interval constant 
1856 * @static 
1857 * @type String */
1858 Date.MINUTE = "mi";
1859 /** Date interval constant 
1860 * @static 
1861 * @type String */
1862 Date.HOUR = "h";
1863 /** Date interval constant 
1864 * @static 
1865 * @type String */
1866 Date.DAY = "d";
1867 /** Date interval constant 
1868 * @static 
1869 * @type String */
1870 Date.MONTH = "mo";
1871 /** Date interval constant 
1872 * @static 
1873 * @type String */
1874 Date.YEAR = "y";
1875
1876 /**
1877  * Provides a convenient method of performing basic date arithmetic.  This method
1878  * does not modify the Date instance being called - it creates and returns
1879  * a new Date instance containing the resulting date value.
1880  *
1881  * Examples:
1882  * <pre><code>
1883 //Basic usage:
1884 var dt = new Date('10/29/2006').add(Date.DAY, 5);
1885 document.write(dt); //returns 'Fri Oct 06 2006 00:00:00'
1886
1887 //Negative values will subtract correctly:
1888 var dt2 = new Date('10/1/2006').add(Date.DAY, -5);
1889 document.write(dt2); //returns 'Tue Sep 26 2006 00:00:00'
1890
1891 //You can even chain several calls together in one line!
1892 var dt3 = new Date('10/1/2006').add(Date.DAY, 5).add(Date.HOUR, 8).add(Date.MINUTE, -30);
1893 document.write(dt3); //returns 'Fri Oct 06 2006 07:30:00'
1894  </code></pre>
1895  *
1896  * @param {String} interval   A valid date interval enum value
1897  * @param {Number} value      The amount to add to the current date
1898  * @return {Date} The new Date instance
1899  */
1900 Date.prototype.add = function(interval, value){
1901   var d = this.clone();
1902   if (!interval || value === 0) { return d; }
1903   switch(interval.toLowerCase()){
1904     case Date.MILLI:
1905       d.setMilliseconds(this.getMilliseconds() + value);
1906       break;
1907     case Date.SECOND:
1908       d.setSeconds(this.getSeconds() + value);
1909       break;
1910     case Date.MINUTE:
1911       d.setMinutes(this.getMinutes() + value);
1912       break;
1913     case Date.HOUR:
1914       d.setHours(this.getHours() + value);
1915       break;
1916     case Date.DAY:
1917       d.setDate(this.getDate() + value);
1918       break;
1919     case Date.MONTH:
1920       var day = this.getDate();
1921       if(day > 28){
1922           day = Math.min(day, this.getFirstDateOfMonth().add('mo', value).getLastDateOfMonth().getDate());
1923       }
1924       d.setDate(day);
1925       d.setMonth(this.getMonth() + value);
1926       break;
1927     case Date.YEAR:
1928       d.setFullYear(this.getFullYear() + value);
1929       break;
1930   }
1931   return d;
1932 };
1933 /**
1934  * @class Roo.lib.Dom
1935  * @licence LGPL
1936  * @static
1937  * 
1938  * Dom utils (from YIU afaik)
1939  *
1940  * 
1941  **/
1942 Roo.lib.Dom = {
1943     /**
1944      * Get the view width
1945      * @param {Boolean} full True will get the full document, otherwise it's the view width
1946      * @return {Number} The width
1947      */
1948      
1949     getViewWidth : function(full) {
1950         return full ? this.getDocumentWidth() : this.getViewportWidth();
1951     },
1952     /**
1953      * Get the view height
1954      * @param {Boolean} full True will get the full document, otherwise it's the view height
1955      * @return {Number} The height
1956      */
1957     getViewHeight : function(full) {
1958         return full ? this.getDocumentHeight() : this.getViewportHeight();
1959     },
1960     /**
1961      * Get the Full Document height 
1962      * @return {Number} The height
1963      */
1964     getDocumentHeight: function() {
1965         var scrollHeight = (document.compatMode != "CSS1Compat") ? document.body.scrollHeight : document.documentElement.scrollHeight;
1966         return Math.max(scrollHeight, this.getViewportHeight());
1967     },
1968     /**
1969      * Get the Full Document width
1970      * @return {Number} The width
1971      */
1972     getDocumentWidth: function() {
1973         var scrollWidth = (document.compatMode != "CSS1Compat") ? document.body.scrollWidth : document.documentElement.scrollWidth;
1974         return Math.max(scrollWidth, this.getViewportWidth());
1975     },
1976     /**
1977      * Get the Window Viewport height
1978      * @return {Number} The height
1979      */
1980     getViewportHeight: function() {
1981         var height = self.innerHeight;
1982         var mode = document.compatMode;
1983
1984         if ((mode || Roo.isIE) && !Roo.isOpera) {
1985             height = (mode == "CSS1Compat") ?
1986                      document.documentElement.clientHeight :
1987                      document.body.clientHeight;
1988         }
1989
1990         return height;
1991     },
1992     /**
1993      * Get the Window Viewport width
1994      * @return {Number} The width
1995      */
1996     getViewportWidth: function() {
1997         var width = self.innerWidth;
1998         var mode = document.compatMode;
1999
2000         if (mode || Roo.isIE) {
2001             width = (mode == "CSS1Compat") ?
2002                     document.documentElement.clientWidth :
2003                     document.body.clientWidth;
2004         }
2005         return width;
2006     },
2007
2008     isAncestor : function(p, c) {
2009         p = Roo.getDom(p);
2010         c = Roo.getDom(c);
2011         if (!p || !c) {
2012             return false;
2013         }
2014
2015         if (p.contains && !Roo.isSafari) {
2016             return p.contains(c);
2017         } else if (p.compareDocumentPosition) {
2018             return !!(p.compareDocumentPosition(c) & 16);
2019         } else {
2020             var parent = c.parentNode;
2021             while (parent) {
2022                 if (parent == p) {
2023                     return true;
2024                 }
2025                 else if (!parent.tagName || parent.tagName.toUpperCase() == "HTML") {
2026                     return false;
2027                 }
2028                 parent = parent.parentNode;
2029             }
2030             return false;
2031         }
2032     },
2033
2034     getRegion : function(el) {
2035         return Roo.lib.Region.getRegion(el);
2036     },
2037
2038     getY : function(el) {
2039         return this.getXY(el)[1];
2040     },
2041
2042     getX : function(el) {
2043         return this.getXY(el)[0];
2044     },
2045
2046     getXY : function(el) {
2047         var p, pe, b, scroll, bd = document.body;
2048         el = Roo.getDom(el);
2049         var fly = Roo.lib.AnimBase.fly;
2050         if (el.getBoundingClientRect) {
2051             b = el.getBoundingClientRect();
2052             scroll = fly(document).getScroll();
2053             return [b.left + scroll.left, b.top + scroll.top];
2054         }
2055         var x = 0, y = 0;
2056
2057         p = el;
2058
2059         var hasAbsolute = fly(el).getStyle("position") == "absolute";
2060
2061         while (p) {
2062
2063             x += p.offsetLeft;
2064             y += p.offsetTop;
2065
2066             if (!hasAbsolute && fly(p).getStyle("position") == "absolute") {
2067                 hasAbsolute = true;
2068             }
2069
2070             if (Roo.isGecko) {
2071                 pe = fly(p);
2072
2073                 var bt = parseInt(pe.getStyle("borderTopWidth"), 10) || 0;
2074                 var bl = parseInt(pe.getStyle("borderLeftWidth"), 10) || 0;
2075
2076
2077                 x += bl;
2078                 y += bt;
2079
2080
2081                 if (p != el && pe.getStyle('overflow') != 'visible') {
2082                     x += bl;
2083                     y += bt;
2084                 }
2085             }
2086             p = p.offsetParent;
2087         }
2088
2089         if (Roo.isSafari && hasAbsolute) {
2090             x -= bd.offsetLeft;
2091             y -= bd.offsetTop;
2092         }
2093
2094         if (Roo.isGecko && !hasAbsolute) {
2095             var dbd = fly(bd);
2096             x += parseInt(dbd.getStyle("borderLeftWidth"), 10) || 0;
2097             y += parseInt(dbd.getStyle("borderTopWidth"), 10) || 0;
2098         }
2099
2100         p = el.parentNode;
2101         while (p && p != bd) {
2102             if (!Roo.isOpera || (p.tagName != 'TR' && fly(p).getStyle("display") != "inline")) {
2103                 x -= p.scrollLeft;
2104                 y -= p.scrollTop;
2105             }
2106             p = p.parentNode;
2107         }
2108         return [x, y];
2109     },
2110  
2111   
2112
2113
2114     setXY : function(el, xy) {
2115         el = Roo.fly(el, '_setXY');
2116         el.position();
2117         var pts = el.translatePoints(xy);
2118         if (xy[0] !== false) {
2119             el.dom.style.left = pts.left + "px";
2120         }
2121         if (xy[1] !== false) {
2122             el.dom.style.top = pts.top + "px";
2123         }
2124     },
2125
2126     setX : function(el, x) {
2127         this.setXY(el, [x, false]);
2128     },
2129
2130     setY : function(el, y) {
2131         this.setXY(el, [false, y]);
2132     }
2133 };
2134 /*
2135  * Portions of this file are based on pieces of Yahoo User Interface Library
2136  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
2137  * YUI licensed under the BSD License:
2138  * http://developer.yahoo.net/yui/license.txt
2139  * <script type="text/javascript">
2140  *
2141  */
2142
2143 Roo.lib.Event = function() {
2144     var loadComplete = false;
2145     var listeners = [];
2146     var unloadListeners = [];
2147     var retryCount = 0;
2148     var onAvailStack = [];
2149     var counter = 0;
2150     var lastError = null;
2151
2152     return {
2153         POLL_RETRYS: 200,
2154         POLL_INTERVAL: 20,
2155         EL: 0,
2156         TYPE: 1,
2157         FN: 2,
2158         WFN: 3,
2159         OBJ: 3,
2160         ADJ_SCOPE: 4,
2161         _interval: null,
2162
2163         startInterval: function() {
2164             if (!this._interval) {
2165                 var self = this;
2166                 var callback = function() {
2167                     self._tryPreloadAttach();
2168                 };
2169                 this._interval = setInterval(callback, this.POLL_INTERVAL);
2170
2171             }
2172         },
2173
2174         onAvailable: function(p_id, p_fn, p_obj, p_override) {
2175             onAvailStack.push({ id:         p_id,
2176                 fn:         p_fn,
2177                 obj:        p_obj,
2178                 override:   p_override,
2179                 checkReady: false    });
2180
2181             retryCount = this.POLL_RETRYS;
2182             this.startInterval();
2183         },
2184
2185
2186         addListener: function(el, eventName, fn) {
2187             el = Roo.getDom(el);
2188             if (!el || !fn) {
2189                 return false;
2190             }
2191
2192             if ("unload" == eventName) {
2193                 unloadListeners[unloadListeners.length] =
2194                 [el, eventName, fn];
2195                 return true;
2196             }
2197
2198             var wrappedFn = function(e) {
2199                 return fn(Roo.lib.Event.getEvent(e));
2200             };
2201
2202             var li = [el, eventName, fn, wrappedFn];
2203
2204             var index = listeners.length;
2205             listeners[index] = li;
2206
2207             this.doAdd(el, eventName, wrappedFn, false);
2208             return true;
2209
2210         },
2211
2212
2213         removeListener: function(el, eventName, fn) {
2214             var i, len;
2215
2216             el = Roo.getDom(el);
2217
2218             if(!fn) {
2219                 return this.purgeElement(el, false, eventName);
2220             }
2221
2222
2223             if ("unload" == eventName) {
2224
2225                 for (i = 0,len = unloadListeners.length; i < len; i++) {
2226                     var li = unloadListeners[i];
2227                     if (li &&
2228                         li[0] == el &&
2229                         li[1] == eventName &&
2230                         li[2] == fn) {
2231                         unloadListeners.splice(i, 1);
2232                         return true;
2233                     }
2234                 }
2235
2236                 return false;
2237             }
2238
2239             var cacheItem = null;
2240
2241
2242             var index = arguments[3];
2243
2244             if ("undefined" == typeof index) {
2245                 index = this._getCacheIndex(el, eventName, fn);
2246             }
2247
2248             if (index >= 0) {
2249                 cacheItem = listeners[index];
2250             }
2251
2252             if (!el || !cacheItem) {
2253                 return false;
2254             }
2255
2256             this.doRemove(el, eventName, cacheItem[this.WFN], false);
2257
2258             delete listeners[index][this.WFN];
2259             delete listeners[index][this.FN];
2260             listeners.splice(index, 1);
2261
2262             return true;
2263
2264         },
2265
2266
2267         getTarget: function(ev, resolveTextNode) {
2268             ev = ev.browserEvent || ev;
2269             ev = ev.touches ? (ev.touches[0] || ev.changedTouches[0] || ev )  : ev;
2270             var t = ev.target || ev.srcElement;
2271             return this.resolveTextNode(t);
2272         },
2273
2274
2275         resolveTextNode: function(node) {
2276             if (Roo.isSafari && node && 3 == node.nodeType) {
2277                 return node.parentNode;
2278             } else {
2279                 return node;
2280             }
2281         },
2282
2283
2284         getPageX: function(ev) {
2285             ev = ev.browserEvent || ev;
2286             ev = ev.touches ? (ev.touches[0] || ev.changedTouches[0] || ev )  : ev;
2287             var x = ev.pageX;
2288             if (!x && 0 !== x) {
2289                 x = ev.clientX || 0;
2290
2291                 if (Roo.isIE) {
2292                     x += this.getScroll()[1];
2293                 }
2294             }
2295
2296             return x;
2297         },
2298
2299
2300         getPageY: function(ev) {
2301             ev = ev.browserEvent || ev;
2302             ev = ev.touches ? (ev.touches[0] || ev.changedTouches[0] || ev )  : ev;
2303             var y = ev.pageY;
2304             if (!y && 0 !== y) {
2305                 y = ev.clientY || 0;
2306
2307                 if (Roo.isIE) {
2308                     y += this.getScroll()[0];
2309                 }
2310             }
2311
2312
2313             return y;
2314         },
2315
2316
2317         getXY: function(ev) {
2318             ev = ev.browserEvent || ev;
2319             ev = ev.touches ? (ev.touches[0] || ev.changedTouches[0] || ev )  : ev;
2320             return [this.getPageX(ev), this.getPageY(ev)];
2321         },
2322
2323
2324         getRelatedTarget: function(ev) {
2325             ev = ev.browserEvent || ev;
2326             ev = ev.touches ? (ev.touches[0] || ev.changedTouches[0] || ev )  : ev;
2327             var t = ev.relatedTarget;
2328             if (!t) {
2329                 if (ev.type == "mouseout") {
2330                     t = ev.toElement;
2331                 } else if (ev.type == "mouseover") {
2332                     t = ev.fromElement;
2333                 }
2334             }
2335
2336             return this.resolveTextNode(t);
2337         },
2338
2339
2340         getTime: function(ev) {
2341             ev = ev.browserEvent || ev;
2342             ev = ev.touches ? (ev.touches[0] || ev.changedTouches[0] || ev )  : ev;
2343             if (!ev.time) {
2344                 var t = new Date().getTime();
2345                 try {
2346                     ev.time = t;
2347                 } catch(ex) {
2348                     this.lastError = ex;
2349                     return t;
2350                 }
2351             }
2352
2353             return ev.time;
2354         },
2355
2356
2357         stopEvent: function(ev) {
2358             this.stopPropagation(ev);
2359             this.preventDefault(ev);
2360         },
2361
2362
2363         stopPropagation: function(ev) {
2364             ev = ev.browserEvent || ev;
2365             if (ev.stopPropagation) {
2366                 ev.stopPropagation();
2367             } else {
2368                 ev.cancelBubble = true;
2369             }
2370         },
2371
2372
2373         preventDefault: function(ev) {
2374             ev = ev.browserEvent || ev;
2375             if(ev.preventDefault) {
2376                 ev.preventDefault();
2377             } else {
2378                 ev.returnValue = false;
2379             }
2380         },
2381
2382
2383         getEvent: function(e) {
2384             var ev = e || window.event;
2385             if (!ev) {
2386                 var c = this.getEvent.caller;
2387                 while (c) {
2388                     ev = c.arguments[0];
2389                     if (ev && Event == ev.constructor) {
2390                         break;
2391                     }
2392                     c = c.caller;
2393                 }
2394             }
2395             return ev;
2396         },
2397
2398
2399         getCharCode: function(ev) {
2400             ev = ev.browserEvent || ev;
2401             return ev.charCode || ev.keyCode || 0;
2402         },
2403
2404
2405         _getCacheIndex: function(el, eventName, fn) {
2406             for (var i = 0,len = listeners.length; i < len; ++i) {
2407                 var li = listeners[i];
2408                 if (li &&
2409                     li[this.FN] == fn &&
2410                     li[this.EL] == el &&
2411                     li[this.TYPE] == eventName) {
2412                     return i;
2413                 }
2414             }
2415
2416             return -1;
2417         },
2418
2419
2420         elCache: {},
2421
2422
2423         getEl: function(id) {
2424             return document.getElementById(id);
2425         },
2426
2427
2428         clearCache: function() {
2429         },
2430
2431
2432         _load: function(e) {
2433             loadComplete = true;
2434             var EU = Roo.lib.Event;
2435
2436
2437             if (Roo.isIE) {
2438                 EU.doRemove(window, "load", EU._load);
2439             }
2440         },
2441
2442
2443         _tryPreloadAttach: function() {
2444
2445             if (this.locked) {
2446                 return false;
2447             }
2448
2449             this.locked = true;
2450
2451
2452             var tryAgain = !loadComplete;
2453             if (!tryAgain) {
2454                 tryAgain = (retryCount > 0);
2455             }
2456
2457
2458             var notAvail = [];
2459             for (var i = 0,len = onAvailStack.length; i < len; ++i) {
2460                 var item = onAvailStack[i];
2461                 if (item) {
2462                     var el = this.getEl(item.id);
2463
2464                     if (el) {
2465                         if (!item.checkReady ||
2466                             loadComplete ||
2467                             el.nextSibling ||
2468                             (document && document.body)) {
2469
2470                             var scope = el;
2471                             if (item.override) {
2472                                 if (item.override === true) {
2473                                     scope = item.obj;
2474                                 } else {
2475                                     scope = item.override;
2476                                 }
2477                             }
2478                             item.fn.call(scope, item.obj);
2479                             onAvailStack[i] = null;
2480                         }
2481                     } else {
2482                         notAvail.push(item);
2483                     }
2484                 }
2485             }
2486
2487             retryCount = (notAvail.length === 0) ? 0 : retryCount - 1;
2488
2489             if (tryAgain) {
2490
2491                 this.startInterval();
2492             } else {
2493                 clearInterval(this._interval);
2494                 this._interval = null;
2495             }
2496
2497             this.locked = false;
2498
2499             return true;
2500
2501         },
2502
2503
2504         purgeElement: function(el, recurse, eventName) {
2505             var elListeners = this.getListeners(el, eventName);
2506             if (elListeners) {
2507                 for (var i = 0,len = elListeners.length; i < len; ++i) {
2508                     var l = elListeners[i];
2509                     this.removeListener(el, l.type, l.fn);
2510                 }
2511             }
2512
2513             if (recurse && el && el.childNodes) {
2514                 for (i = 0,len = el.childNodes.length; i < len; ++i) {
2515                     this.purgeElement(el.childNodes[i], recurse, eventName);
2516                 }
2517             }
2518         },
2519
2520
2521         getListeners: function(el, eventName) {
2522             var results = [], searchLists;
2523             if (!eventName) {
2524                 searchLists = [listeners, unloadListeners];
2525             } else if (eventName == "unload") {
2526                 searchLists = [unloadListeners];
2527             } else {
2528                 searchLists = [listeners];
2529             }
2530
2531             for (var j = 0; j < searchLists.length; ++j) {
2532                 var searchList = searchLists[j];
2533                 if (searchList && searchList.length > 0) {
2534                     for (var i = 0,len = searchList.length; i < len; ++i) {
2535                         var l = searchList[i];
2536                         if (l && l[this.EL] === el &&
2537                             (!eventName || eventName === l[this.TYPE])) {
2538                             results.push({
2539                                 type:   l[this.TYPE],
2540                                 fn:     l[this.FN],
2541                                 obj:    l[this.OBJ],
2542                                 adjust: l[this.ADJ_SCOPE],
2543                                 index:  i
2544                             });
2545                         }
2546                     }
2547                 }
2548             }
2549
2550             return (results.length) ? results : null;
2551         },
2552
2553
2554         _unload: function(e) {
2555
2556             var EU = Roo.lib.Event, i, j, l, len, index;
2557
2558             for (i = 0,len = unloadListeners.length; i < len; ++i) {
2559                 l = unloadListeners[i];
2560                 if (l) {
2561                     var scope = window;
2562                     if (l[EU.ADJ_SCOPE]) {
2563                         if (l[EU.ADJ_SCOPE] === true) {
2564                             scope = l[EU.OBJ];
2565                         } else {
2566                             scope = l[EU.ADJ_SCOPE];
2567                         }
2568                     }
2569                     l[EU.FN].call(scope, EU.getEvent(e), l[EU.OBJ]);
2570                     unloadListeners[i] = null;
2571                     l = null;
2572                     scope = null;
2573                 }
2574             }
2575
2576             unloadListeners = null;
2577
2578             if (listeners && listeners.length > 0) {
2579                 j = listeners.length;
2580                 while (j) {
2581                     index = j - 1;
2582                     l = listeners[index];
2583                     if (l) {
2584                         EU.removeListener(l[EU.EL], l[EU.TYPE],
2585                                 l[EU.FN], index);
2586                     }
2587                     j = j - 1;
2588                 }
2589                 l = null;
2590
2591                 EU.clearCache();
2592             }
2593
2594             EU.doRemove(window, "unload", EU._unload);
2595
2596         },
2597
2598
2599         getScroll: function() {
2600             var dd = document.documentElement, db = document.body;
2601             if (dd && (dd.scrollTop || dd.scrollLeft)) {
2602                 return [dd.scrollTop, dd.scrollLeft];
2603             } else if (db) {
2604                 return [db.scrollTop, db.scrollLeft];
2605             } else {
2606                 return [0, 0];
2607             }
2608         },
2609
2610
2611         doAdd: function () {
2612             if (window.addEventListener) {
2613                 return function(el, eventName, fn, capture) {
2614                     el.addEventListener(eventName, fn, (capture));
2615                 };
2616             } else if (window.attachEvent) {
2617                 return function(el, eventName, fn, capture) {
2618                     el.attachEvent("on" + eventName, fn);
2619                 };
2620             } else {
2621                 return function() {
2622                 };
2623             }
2624         }(),
2625
2626
2627         doRemove: function() {
2628             if (window.removeEventListener) {
2629                 return function (el, eventName, fn, capture) {
2630                     el.removeEventListener(eventName, fn, (capture));
2631                 };
2632             } else if (window.detachEvent) {
2633                 return function (el, eventName, fn) {
2634                     el.detachEvent("on" + eventName, fn);
2635                 };
2636             } else {
2637                 return function() {
2638                 };
2639             }
2640         }()
2641     };
2642     
2643 }();
2644 (function() {     
2645    
2646     var E = Roo.lib.Event;
2647     E.on = E.addListener;
2648     E.un = E.removeListener;
2649
2650     if (document && document.body) {
2651         E._load();
2652     } else {
2653         E.doAdd(window, "load", E._load);
2654     }
2655     E.doAdd(window, "unload", E._unload);
2656     E._tryPreloadAttach();
2657 })();
2658
2659  
2660
2661 (function() {
2662     /**
2663      * @class Roo.lib.Ajax
2664      *
2665      * provide a simple Ajax request utility functions
2666      * 
2667      * Portions of this file are based on pieces of Yahoo User Interface Library
2668     * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
2669     * YUI licensed under the BSD License:
2670     * http://developer.yahoo.net/yui/license.txt
2671     * <script type="text/javascript">
2672     *
2673      *
2674      */
2675     Roo.lib.Ajax = {
2676         /**
2677          * @static 
2678          */
2679         request : function(method, uri, cb, data, options) {
2680             if(options){
2681                 var hs = options.headers;
2682                 if(hs){
2683                     for(var h in hs){
2684                         if(hs.hasOwnProperty(h)){
2685                             this.initHeader(h, hs[h], false);
2686                         }
2687                     }
2688                 }
2689                 if(options.xmlData){
2690                     this.initHeader('Content-Type', 'text/xml', false);
2691                     method = 'POST';
2692                     data = options.xmlData;
2693                 }
2694             }
2695
2696             return this.asyncRequest(method, uri, cb, data);
2697         },
2698         /**
2699          * serialize a form
2700          *
2701          * @static
2702          * @param {DomForm} form element
2703          * @return {String} urlencode form output.
2704          */
2705         serializeForm : function(form) {
2706             if(typeof form == 'string') {
2707                 form = (document.getElementById(form) || document.forms[form]);
2708             }
2709
2710             var el, name, val, disabled, data = '', hasSubmit = false;
2711             for (var i = 0; i < form.elements.length; i++) {
2712                 el = form.elements[i];
2713                 disabled = form.elements[i].disabled;
2714                 name = form.elements[i].name;
2715                 val = form.elements[i].value;
2716
2717                 if (!disabled && name){
2718                     switch (el.type)
2719                             {
2720                         case 'select-one':
2721                         case 'select-multiple':
2722                             for (var j = 0; j < el.options.length; j++) {
2723                                 if (el.options[j].selected) {
2724                                     if (Roo.isIE) {
2725                                         data += Roo.encodeURIComponent(name) + '=' + Roo.encodeURIComponent(el.options[j].attributes['value'].specified ? el.options[j].value : el.options[j].text) + '&';
2726                                     }
2727                                     else {
2728                                         data += Roo.encodeURIComponent(name) + '=' + Roo.encodeURIComponent(el.options[j].hasAttribute('value') ? el.options[j].value : el.options[j].text) + '&';
2729                                     }
2730                                 }
2731                             }
2732                             break;
2733                         case 'radio':
2734                         case 'checkbox':
2735                             if (el.checked) {
2736                                 data += Roo.encodeURIComponent(name) + '=' + Roo.encodeURIComponent(val) + '&';
2737                             }
2738                             break;
2739                         case 'file':
2740
2741                         case undefined:
2742
2743                         case 'reset':
2744
2745                         case 'button':
2746
2747                             break;
2748                         case 'submit':
2749                             if(hasSubmit == false) {
2750                                 data += Roo.encodeURIComponent(name) + '=' + Roo.encodeURIComponent(val) + '&';
2751                                 hasSubmit = true;
2752                             }
2753                             break;
2754                         default:
2755                             data += Roo.encodeURIComponent(name) + '=' + Roo.encodeURIComponent(val) + '&';
2756                             break;
2757                     }
2758                 }
2759             }
2760             data = data.substr(0, data.length - 1);
2761             return data;
2762         },
2763
2764         headers:{},
2765
2766         hasHeaders:false,
2767
2768         useDefaultHeader:true,
2769
2770         defaultPostHeader:'application/x-www-form-urlencoded',
2771
2772         useDefaultXhrHeader:true,
2773
2774         defaultXhrHeader:'XMLHttpRequest',
2775
2776         hasDefaultHeaders:true,
2777
2778         defaultHeaders:{},
2779
2780         poll:{},
2781
2782         timeout:{},
2783
2784         pollInterval:50,
2785
2786         transactionId:0,
2787
2788         setProgId:function(id)
2789         {
2790             this.activeX.unshift(id);
2791         },
2792
2793         setDefaultPostHeader:function(b)
2794         {
2795             this.useDefaultHeader = b;
2796         },
2797
2798         setDefaultXhrHeader:function(b)
2799         {
2800             this.useDefaultXhrHeader = b;
2801         },
2802
2803         setPollingInterval:function(i)
2804         {
2805             if (typeof i == 'number' && isFinite(i)) {
2806                 this.pollInterval = i;
2807             }
2808         },
2809
2810         createXhrObject:function(transactionId)
2811         {
2812             var obj,http;
2813             try
2814             {
2815
2816                 http = new XMLHttpRequest();
2817
2818                 obj = { conn:http, tId:transactionId };
2819             }
2820             catch(e)
2821             {
2822                 for (var i = 0; i < this.activeX.length; ++i) {
2823                     try
2824                     {
2825
2826                         http = new ActiveXObject(this.activeX[i]);
2827
2828                         obj = { conn:http, tId:transactionId };
2829                         break;
2830                     }
2831                     catch(e) {
2832                     }
2833                 }
2834             }
2835             finally
2836             {
2837                 return obj;
2838             }
2839         },
2840
2841         getConnectionObject:function()
2842         {
2843             var o;
2844             var tId = this.transactionId;
2845
2846             try
2847             {
2848                 o = this.createXhrObject(tId);
2849                 if (o) {
2850                     this.transactionId++;
2851                 }
2852             }
2853             catch(e) {
2854             }
2855             finally
2856             {
2857                 return o;
2858             }
2859         },
2860
2861         asyncRequest:function(method, uri, callback, postData)
2862         {
2863             var o = this.getConnectionObject();
2864
2865             if (!o) {
2866                 return null;
2867             }
2868             else {
2869                 o.conn.open(method, uri, true);
2870
2871                 if (this.useDefaultXhrHeader) {
2872                     if (!this.defaultHeaders['X-Requested-With']) {
2873                         this.initHeader('X-Requested-With', this.defaultXhrHeader, true);
2874                     }
2875                 }
2876
2877                 if(postData && this.useDefaultHeader){
2878                     this.initHeader('Content-Type', this.defaultPostHeader);
2879                 }
2880
2881                  if (this.hasDefaultHeaders || this.hasHeaders) {
2882                     this.setHeader(o);
2883                 }
2884
2885                 this.handleReadyState(o, callback);
2886                 o.conn.send(postData || null);
2887
2888                 return o;
2889             }
2890         },
2891
2892         handleReadyState:function(o, callback)
2893         {
2894             var oConn = this;
2895
2896             if (callback && callback.timeout) {
2897                 
2898                 this.timeout[o.tId] = window.setTimeout(function() {
2899                     oConn.abort(o, callback, true);
2900                 }, callback.timeout);
2901             }
2902
2903             this.poll[o.tId] = window.setInterval(
2904                     function() {
2905                         if (o.conn && o.conn.readyState == 4) {
2906                             window.clearInterval(oConn.poll[o.tId]);
2907                             delete oConn.poll[o.tId];
2908
2909                             if(callback && callback.timeout) {
2910                                 window.clearTimeout(oConn.timeout[o.tId]);
2911                                 delete oConn.timeout[o.tId];
2912                             }
2913
2914                             oConn.handleTransactionResponse(o, callback);
2915                         }
2916                     }
2917                     , this.pollInterval);
2918         },
2919
2920         handleTransactionResponse:function(o, callback, isAbort)
2921         {
2922
2923             if (!callback) {
2924                 this.releaseObject(o);
2925                 return;
2926             }
2927
2928             var httpStatus, responseObject;
2929
2930             try
2931             {
2932                 if (o.conn.status !== undefined && o.conn.status != 0) {
2933                     httpStatus = o.conn.status;
2934                 }
2935                 else {
2936                     httpStatus = 13030;
2937                 }
2938             }
2939             catch(e) {
2940
2941
2942                 httpStatus = 13030;
2943             }
2944
2945             if (httpStatus >= 200 && httpStatus < 300) {
2946                 responseObject = this.createResponseObject(o, callback.argument);
2947                 if (callback.success) {
2948                     if (!callback.scope) {
2949                         callback.success(responseObject);
2950                     }
2951                     else {
2952
2953
2954                         callback.success.apply(callback.scope, [responseObject]);
2955                     }
2956                 }
2957             }
2958             else {
2959                 switch (httpStatus) {
2960
2961                     case 12002:
2962                     case 12029:
2963                     case 12030:
2964                     case 12031:
2965                     case 12152:
2966                     case 13030:
2967                         responseObject = this.createExceptionObject(o.tId, callback.argument, (isAbort ? isAbort : false));
2968                         if (callback.failure) {
2969                             if (!callback.scope) {
2970                                 callback.failure(responseObject);
2971                             }
2972                             else {
2973                                 callback.failure.apply(callback.scope, [responseObject]);
2974                             }
2975                         }
2976                         break;
2977                     default:
2978                         responseObject = this.createResponseObject(o, callback.argument);
2979                         if (callback.failure) {
2980                             if (!callback.scope) {
2981                                 callback.failure(responseObject);
2982                             }
2983                             else {
2984                                 callback.failure.apply(callback.scope, [responseObject]);
2985                             }
2986                         }
2987                 }
2988             }
2989
2990             this.releaseObject(o);
2991             responseObject = null;
2992         },
2993
2994         createResponseObject:function(o, callbackArg)
2995         {
2996             var obj = {};
2997             var headerObj = {};
2998
2999             try
3000             {
3001                 var headerStr = o.conn.getAllResponseHeaders();
3002                 var header = headerStr.split('\n');
3003                 for (var i = 0; i < header.length; i++) {
3004                     var delimitPos = header[i].indexOf(':');
3005                     if (delimitPos != -1) {
3006                         headerObj[header[i].substring(0, delimitPos)] = header[i].substring(delimitPos + 2);
3007                     }
3008                 }
3009             }
3010             catch(e) {
3011             }
3012
3013             obj.tId = o.tId;
3014             obj.status = o.conn.status;
3015             obj.statusText = o.conn.statusText;
3016             obj.getResponseHeader = headerObj;
3017             obj.getAllResponseHeaders = headerStr;
3018             obj.responseText = o.conn.responseText;
3019             obj.responseXML = o.conn.responseXML;
3020
3021             if (typeof callbackArg !== undefined) {
3022                 obj.argument = callbackArg;
3023             }
3024
3025             return obj;
3026         },
3027
3028         createExceptionObject:function(tId, callbackArg, isAbort)
3029         {
3030             var COMM_CODE = 0;
3031             var COMM_ERROR = 'communication failure';
3032             var ABORT_CODE = -1;
3033             var ABORT_ERROR = 'transaction aborted';
3034
3035             var obj = {};
3036
3037             obj.tId = tId;
3038             if (isAbort) {
3039                 obj.status = ABORT_CODE;
3040                 obj.statusText = ABORT_ERROR;
3041             }
3042             else {
3043                 obj.status = COMM_CODE;
3044                 obj.statusText = COMM_ERROR;
3045             }
3046
3047             if (callbackArg) {
3048                 obj.argument = callbackArg;
3049             }
3050
3051             return obj;
3052         },
3053
3054         initHeader:function(label, value, isDefault)
3055         {
3056             var headerObj = (isDefault) ? this.defaultHeaders : this.headers;
3057
3058             if (headerObj[label] === undefined) {
3059                 headerObj[label] = value;
3060             }
3061             else {
3062
3063
3064                 headerObj[label] = value + "," + headerObj[label];
3065             }
3066
3067             if (isDefault) {
3068                 this.hasDefaultHeaders = true;
3069             }
3070             else {
3071                 this.hasHeaders = true;
3072             }
3073         },
3074
3075
3076         setHeader:function(o)
3077         {
3078             if (this.hasDefaultHeaders) {
3079                 for (var prop in this.defaultHeaders) {
3080                     if (this.defaultHeaders.hasOwnProperty(prop)) {
3081                         o.conn.setRequestHeader(prop, this.defaultHeaders[prop]);
3082                     }
3083                 }
3084             }
3085
3086             if (this.hasHeaders) {
3087                 for (var prop in this.headers) {
3088                     if (this.headers.hasOwnProperty(prop)) {
3089                         o.conn.setRequestHeader(prop, this.headers[prop]);
3090                     }
3091                 }
3092                 this.headers = {};
3093                 this.hasHeaders = false;
3094             }
3095         },
3096
3097         resetDefaultHeaders:function() {
3098             delete this.defaultHeaders;
3099             this.defaultHeaders = {};
3100             this.hasDefaultHeaders = false;
3101         },
3102
3103         abort:function(o, callback, isTimeout)
3104         {
3105             if(this.isCallInProgress(o)) {
3106                 o.conn.abort();
3107                 window.clearInterval(this.poll[o.tId]);
3108                 delete this.poll[o.tId];
3109                 if (isTimeout) {
3110                     delete this.timeout[o.tId];
3111                 }
3112
3113                 this.handleTransactionResponse(o, callback, true);
3114
3115                 return true;
3116             }
3117             else {
3118                 return false;
3119             }
3120         },
3121
3122
3123         isCallInProgress:function(o)
3124         {
3125             if (o && o.conn) {
3126                 return o.conn.readyState != 4 && o.conn.readyState != 0;
3127             }
3128             else {
3129
3130                 return false;
3131             }
3132         },
3133
3134
3135         releaseObject:function(o)
3136         {
3137
3138             o.conn = null;
3139
3140             o = null;
3141         },
3142
3143         activeX:[
3144         'MSXML2.XMLHTTP.3.0',
3145         'MSXML2.XMLHTTP',
3146         'Microsoft.XMLHTTP'
3147         ]
3148
3149
3150     };
3151 })();/*
3152  * Portions of this file are based on pieces of Yahoo User Interface Library
3153  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3154  * YUI licensed under the BSD License:
3155  * http://developer.yahoo.net/yui/license.txt
3156  * <script type="text/javascript">
3157  *
3158  */
3159
3160 Roo.lib.Region = function(t, r, b, l) {
3161     this.top = t;
3162     this[1] = t;
3163     this.right = r;
3164     this.bottom = b;
3165     this.left = l;
3166     this[0] = l;
3167 };
3168
3169
3170 Roo.lib.Region.prototype = {
3171     contains : function(region) {
3172         return ( region.left >= this.left &&
3173                  region.right <= this.right &&
3174                  region.top >= this.top &&
3175                  region.bottom <= this.bottom    );
3176
3177     },
3178
3179     getArea : function() {
3180         return ( (this.bottom - this.top) * (this.right - this.left) );
3181     },
3182
3183     intersect : function(region) {
3184         var t = Math.max(this.top, region.top);
3185         var r = Math.min(this.right, region.right);
3186         var b = Math.min(this.bottom, region.bottom);
3187         var l = Math.max(this.left, region.left);
3188
3189         if (b >= t && r >= l) {
3190             return new Roo.lib.Region(t, r, b, l);
3191         } else {
3192             return null;
3193         }
3194     },
3195     union : function(region) {
3196         var t = Math.min(this.top, region.top);
3197         var r = Math.max(this.right, region.right);
3198         var b = Math.max(this.bottom, region.bottom);
3199         var l = Math.min(this.left, region.left);
3200
3201         return new Roo.lib.Region(t, r, b, l);
3202     },
3203
3204     adjust : function(t, l, b, r) {
3205         this.top += t;
3206         this.left += l;
3207         this.right += r;
3208         this.bottom += b;
3209         return this;
3210     }
3211 };
3212
3213 Roo.lib.Region.getRegion = function(el) {
3214     var p = Roo.lib.Dom.getXY(el);
3215
3216     var t = p[1];
3217     var r = p[0] + el.offsetWidth;
3218     var b = p[1] + el.offsetHeight;
3219     var l = p[0];
3220
3221     return new Roo.lib.Region(t, r, b, l);
3222 };
3223 /*
3224  * Portions of this file are based on pieces of Yahoo User Interface Library
3225  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3226  * YUI licensed under the BSD License:
3227  * http://developer.yahoo.net/yui/license.txt
3228  * <script type="text/javascript">
3229  *
3230  */
3231 //@@dep Roo.lib.Region
3232
3233
3234 Roo.lib.Point = function(x, y) {
3235     if (x instanceof Array) {
3236         y = x[1];
3237         x = x[0];
3238     }
3239     this.x = this.right = this.left = this[0] = x;
3240     this.y = this.top = this.bottom = this[1] = y;
3241 };
3242
3243 Roo.lib.Point.prototype = new Roo.lib.Region();
3244 /*
3245  * Portions of this file are based on pieces of Yahoo User Interface Library
3246  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3247  * YUI licensed under the BSD License:
3248  * http://developer.yahoo.net/yui/license.txt
3249  * <script type="text/javascript">
3250  *
3251  */
3252  
3253 (function() {   
3254
3255     Roo.lib.Anim = {
3256         scroll : function(el, args, duration, easing, cb, scope) {
3257             this.run(el, args, duration, easing, cb, scope, Roo.lib.Scroll);
3258         },
3259
3260         motion : function(el, args, duration, easing, cb, scope) {
3261             this.run(el, args, duration, easing, cb, scope, Roo.lib.Motion);
3262         },
3263
3264         color : function(el, args, duration, easing, cb, scope) {
3265             this.run(el, args, duration, easing, cb, scope, Roo.lib.ColorAnim);
3266         },
3267
3268         run : function(el, args, duration, easing, cb, scope, type) {
3269             type = type || Roo.lib.AnimBase;
3270             if (typeof easing == "string") {
3271                 easing = Roo.lib.Easing[easing];
3272             }
3273             var anim = new type(el, args, duration, easing);
3274             anim.animateX(function() {
3275                 Roo.callback(cb, scope);
3276             });
3277             return anim;
3278         }
3279     };
3280 })();/*
3281  * Portions of this file are based on pieces of Yahoo User Interface Library
3282  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3283  * YUI licensed under the BSD License:
3284  * http://developer.yahoo.net/yui/license.txt
3285  * <script type="text/javascript">
3286  *
3287  */
3288
3289 (function() {    
3290     var libFlyweight;
3291     
3292     function fly(el) {
3293         if (!libFlyweight) {
3294             libFlyweight = new Roo.Element.Flyweight();
3295         }
3296         libFlyweight.dom = el;
3297         return libFlyweight;
3298     }
3299
3300     // since this uses fly! - it cant be in DOM (which does not have fly yet..)
3301     
3302    
3303     
3304     Roo.lib.AnimBase = function(el, attributes, duration, method) {
3305         if (el) {
3306             this.init(el, attributes, duration, method);
3307         }
3308     };
3309
3310     Roo.lib.AnimBase.fly = fly;
3311     
3312     
3313     
3314     Roo.lib.AnimBase.prototype = {
3315
3316         toString: function() {
3317             var el = this.getEl();
3318             var id = el.id || el.tagName;
3319             return ("Anim " + id);
3320         },
3321
3322         patterns: {
3323             noNegatives:        /width|height|opacity|padding/i,
3324             offsetAttribute:  /^((width|height)|(top|left))$/,
3325             defaultUnit:        /width|height|top$|bottom$|left$|right$/i,
3326             offsetUnit:         /\d+(em|%|en|ex|pt|in|cm|mm|pc)$/i
3327         },
3328
3329
3330         doMethod: function(attr, start, end) {
3331             return this.method(this.currentFrame, start, end - start, this.totalFrames);
3332         },
3333
3334
3335         setAttribute: function(attr, val, unit) {
3336             if (this.patterns.noNegatives.test(attr)) {
3337                 val = (val > 0) ? val : 0;
3338             }
3339
3340             Roo.fly(this.getEl(), '_anim').setStyle(attr, val + unit);
3341         },
3342
3343
3344         getAttribute: function(attr) {
3345             var el = this.getEl();
3346             var val = fly(el).getStyle(attr);
3347
3348             if (val !== 'auto' && !this.patterns.offsetUnit.test(val)) {
3349                 return parseFloat(val);
3350             }
3351
3352             var a = this.patterns.offsetAttribute.exec(attr) || [];
3353             var pos = !!( a[3] );
3354             var box = !!( a[2] );
3355
3356
3357             if (box || (fly(el).getStyle('position') == 'absolute' && pos)) {
3358                 val = el['offset' + a[0].charAt(0).toUpperCase() + a[0].substr(1)];
3359             } else {
3360                 val = 0;
3361             }
3362
3363             return val;
3364         },
3365
3366
3367         getDefaultUnit: function(attr) {
3368             if (this.patterns.defaultUnit.test(attr)) {
3369                 return 'px';
3370             }
3371
3372             return '';
3373         },
3374
3375         animateX : function(callback, scope) {
3376             var f = function() {
3377                 this.onComplete.removeListener(f);
3378                 if (typeof callback == "function") {
3379                     callback.call(scope || this, this);
3380                 }
3381             };
3382             this.onComplete.addListener(f, this);
3383             this.animate();
3384         },
3385
3386
3387         setRuntimeAttribute: function(attr) {
3388             var start;
3389             var end;
3390             var attributes = this.attributes;
3391
3392             this.runtimeAttributes[attr] = {};
3393
3394             var isset = function(prop) {
3395                 return (typeof prop !== 'undefined');
3396             };
3397
3398             if (!isset(attributes[attr]['to']) && !isset(attributes[attr]['by'])) {
3399                 return false;
3400             }
3401
3402             start = ( isset(attributes[attr]['from']) ) ? attributes[attr]['from'] : this.getAttribute(attr);
3403
3404
3405             if (isset(attributes[attr]['to'])) {
3406                 end = attributes[attr]['to'];
3407             } else if (isset(attributes[attr]['by'])) {
3408                 if (start.constructor == Array) {
3409                     end = [];
3410                     for (var i = 0, len = start.length; i < len; ++i) {
3411                         end[i] = start[i] + attributes[attr]['by'][i];
3412                     }
3413                 } else {
3414                     end = start + attributes[attr]['by'];
3415                 }
3416             }
3417
3418             this.runtimeAttributes[attr].start = start;
3419             this.runtimeAttributes[attr].end = end;
3420
3421
3422             this.runtimeAttributes[attr].unit = ( isset(attributes[attr].unit) ) ? attributes[attr]['unit'] : this.getDefaultUnit(attr);
3423         },
3424
3425
3426         init: function(el, attributes, duration, method) {
3427
3428             var isAnimated = false;
3429
3430
3431             var startTime = null;
3432
3433
3434             var actualFrames = 0;
3435
3436
3437             el = Roo.getDom(el);
3438
3439
3440             this.attributes = attributes || {};
3441
3442
3443             this.duration = duration || 1;
3444
3445
3446             this.method = method || Roo.lib.Easing.easeNone;
3447
3448
3449             this.useSeconds = true;
3450
3451
3452             this.currentFrame = 0;
3453
3454
3455             this.totalFrames = Roo.lib.AnimMgr.fps;
3456
3457
3458             this.getEl = function() {
3459                 return el;
3460             };
3461
3462
3463             this.isAnimated = function() {
3464                 return isAnimated;
3465             };
3466
3467
3468             this.getStartTime = function() {
3469                 return startTime;
3470             };
3471
3472             this.runtimeAttributes = {};
3473
3474
3475             this.animate = function() {
3476                 if (this.isAnimated()) {
3477                     return false;
3478                 }
3479
3480                 this.currentFrame = 0;
3481
3482                 this.totalFrames = ( this.useSeconds ) ? Math.ceil(Roo.lib.AnimMgr.fps * this.duration) : this.duration;
3483
3484                 Roo.lib.AnimMgr.registerElement(this);
3485             };
3486
3487
3488             this.stop = function(finish) {
3489                 if (finish) {
3490                     this.currentFrame = this.totalFrames;
3491                     this._onTween.fire();
3492                 }
3493                 Roo.lib.AnimMgr.stop(this);
3494             };
3495
3496             var onStart = function() {
3497                 this.onStart.fire();
3498
3499                 this.runtimeAttributes = {};
3500                 for (var attr in this.attributes) {
3501                     this.setRuntimeAttribute(attr);
3502                 }
3503
3504                 isAnimated = true;
3505                 actualFrames = 0;
3506                 startTime = new Date();
3507             };
3508
3509
3510             var onTween = function() {
3511                 var data = {
3512                     duration: new Date() - this.getStartTime(),
3513                     currentFrame: this.currentFrame
3514                 };
3515
3516                 data.toString = function() {
3517                     return (
3518                             'duration: ' + data.duration +
3519                             ', currentFrame: ' + data.currentFrame
3520                             );
3521                 };
3522
3523                 this.onTween.fire(data);
3524
3525                 var runtimeAttributes = this.runtimeAttributes;
3526
3527                 for (var attr in runtimeAttributes) {
3528                     this.setAttribute(attr, this.doMethod(attr, runtimeAttributes[attr].start, runtimeAttributes[attr].end), runtimeAttributes[attr].unit);
3529                 }
3530
3531                 actualFrames += 1;
3532             };
3533
3534             var onComplete = function() {
3535                 var actual_duration = (new Date() - startTime) / 1000 ;
3536
3537                 var data = {
3538                     duration: actual_duration,
3539                     frames: actualFrames,
3540                     fps: actualFrames / actual_duration
3541                 };
3542
3543                 data.toString = function() {
3544                     return (
3545                             'duration: ' + data.duration +
3546                             ', frames: ' + data.frames +
3547                             ', fps: ' + data.fps
3548                             );
3549                 };
3550
3551                 isAnimated = false;
3552                 actualFrames = 0;
3553                 this.onComplete.fire(data);
3554             };
3555
3556
3557             this._onStart = new Roo.util.Event(this);
3558             this.onStart = new Roo.util.Event(this);
3559             this.onTween = new Roo.util.Event(this);
3560             this._onTween = new Roo.util.Event(this);
3561             this.onComplete = new Roo.util.Event(this);
3562             this._onComplete = new Roo.util.Event(this);
3563             this._onStart.addListener(onStart);
3564             this._onTween.addListener(onTween);
3565             this._onComplete.addListener(onComplete);
3566         }
3567     };
3568 })();
3569 /*
3570  * Portions of this file are based on pieces of Yahoo User Interface Library
3571  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3572  * YUI licensed under the BSD License:
3573  * http://developer.yahoo.net/yui/license.txt
3574  * <script type="text/javascript">
3575  *
3576  */
3577
3578 Roo.lib.AnimMgr = new function() {
3579
3580     var thread = null;
3581
3582
3583     var queue = [];
3584
3585
3586     var tweenCount = 0;
3587
3588
3589     this.fps = 1000;
3590
3591
3592     this.delay = 1;
3593
3594
3595     this.registerElement = function(tween) {
3596         queue[queue.length] = tween;
3597         tweenCount += 1;
3598         tween._onStart.fire();
3599         this.start();
3600     };
3601
3602
3603     this.unRegister = function(tween, index) {
3604         tween._onComplete.fire();
3605         index = index || getIndex(tween);
3606         if (index != -1) {
3607             queue.splice(index, 1);
3608         }
3609
3610         tweenCount -= 1;
3611         if (tweenCount <= 0) {
3612             this.stop();
3613         }
3614     };
3615
3616
3617     this.start = function() {
3618         if (thread === null) {
3619             thread = setInterval(this.run, this.delay);
3620         }
3621     };
3622
3623
3624     this.stop = function(tween) {
3625         if (!tween) {
3626             clearInterval(thread);
3627
3628             for (var i = 0, len = queue.length; i < len; ++i) {
3629                 if (queue[0].isAnimated()) {
3630                     this.unRegister(queue[0], 0);
3631                 }
3632             }
3633
3634             queue = [];
3635             thread = null;
3636             tweenCount = 0;
3637         }
3638         else {
3639             this.unRegister(tween);
3640         }
3641     };
3642
3643
3644     this.run = function() {
3645         for (var i = 0, len = queue.length; i < len; ++i) {
3646             var tween = queue[i];
3647             if (!tween || !tween.isAnimated()) {
3648                 continue;
3649             }
3650
3651             if (tween.currentFrame < tween.totalFrames || tween.totalFrames === null)
3652             {
3653                 tween.currentFrame += 1;
3654
3655                 if (tween.useSeconds) {
3656                     correctFrame(tween);
3657                 }
3658                 tween._onTween.fire();
3659             }
3660             else {
3661                 Roo.lib.AnimMgr.stop(tween, i);
3662             }
3663         }
3664     };
3665
3666     var getIndex = function(anim) {
3667         for (var i = 0, len = queue.length; i < len; ++i) {
3668             if (queue[i] == anim) {
3669                 return i;
3670             }
3671         }
3672         return -1;
3673     };
3674
3675
3676     var correctFrame = function(tween) {
3677         var frames = tween.totalFrames;
3678         var frame = tween.currentFrame;
3679         var expected = (tween.currentFrame * tween.duration * 1000 / tween.totalFrames);
3680         var elapsed = (new Date() - tween.getStartTime());
3681         var tweak = 0;
3682
3683         if (elapsed < tween.duration * 1000) {
3684             tweak = Math.round((elapsed / expected - 1) * tween.currentFrame);
3685         } else {
3686             tweak = frames - (frame + 1);
3687         }
3688         if (tweak > 0 && isFinite(tweak)) {
3689             if (tween.currentFrame + tweak >= frames) {
3690                 tweak = frames - (frame + 1);
3691             }
3692
3693             tween.currentFrame += tweak;
3694         }
3695     };
3696 };
3697
3698     /*
3699  * Portions of this file are based on pieces of Yahoo User Interface Library
3700  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3701  * YUI licensed under the BSD License:
3702  * http://developer.yahoo.net/yui/license.txt
3703  * <script type="text/javascript">
3704  *
3705  */
3706 Roo.lib.Bezier = new function() {
3707
3708         this.getPosition = function(points, t) {
3709             var n = points.length;
3710             var tmp = [];
3711
3712             for (var i = 0; i < n; ++i) {
3713                 tmp[i] = [points[i][0], points[i][1]];
3714             }
3715
3716             for (var j = 1; j < n; ++j) {
3717                 for (i = 0; i < n - j; ++i) {
3718                     tmp[i][0] = (1 - t) * tmp[i][0] + t * tmp[parseInt(i + 1, 10)][0];
3719                     tmp[i][1] = (1 - t) * tmp[i][1] + t * tmp[parseInt(i + 1, 10)][1];
3720                 }
3721             }
3722
3723             return [ tmp[0][0], tmp[0][1] ];
3724
3725         };
3726     }; 
3727
3728 /**
3729  * @class Roo.lib.Color
3730  * @constructor
3731  * An abstract Color implementation. Concrete Color implementations should use
3732  * an instance of this function as their prototype, and implement the getRGB and
3733  * getHSL functions. getRGB should return an object representing the RGB
3734  * components of this Color, with the red, green, and blue components in the
3735  * range [0,255] and the alpha component in the range [0,100]. getHSL should
3736  * return an object representing the HSL components of this Color, with the hue
3737  * component in the range [0,360), the saturation and lightness components in
3738  * the range [0,100], and the alpha component in the range [0,1].
3739  *
3740  *
3741  * Color.js
3742  *
3743  * Functions for Color handling and processing.
3744  *
3745  * http://www.safalra.com/web-design/javascript/Color-handling-and-processing/
3746  *
3747  * The author of this program, Safalra (Stephen Morley), irrevocably releases all
3748  * rights to this program, with the intention of it becoming part of the public
3749  * domain. Because this program is released into the public domain, it comes with
3750  * no warranty either expressed or implied, to the extent permitted by law.
3751  * 
3752  * For more free and public domain JavaScript code by the same author, visit:
3753  * http://www.safalra.com/web-design/javascript/
3754  * 
3755  */
3756 Roo.lib.Color = function() { }
3757
3758
3759 Roo.apply(Roo.lib.Color.prototype, {
3760   
3761   rgb : null,
3762   hsv : null,
3763   hsl : null,
3764   
3765   /**
3766    * getIntegerRGB
3767    * @return {Object} an object representing the RGBA components of this Color. The red,
3768    * green, and blue components are converted to integers in the range [0,255].
3769    * The alpha is a value in the range [0,1].
3770    */
3771   getIntegerRGB : function(){
3772
3773     // get the RGB components of this Color
3774     var rgb = this.getRGB();
3775
3776     // return the integer components
3777     return {
3778       'r' : Math.round(rgb.r),
3779       'g' : Math.round(rgb.g),
3780       'b' : Math.round(rgb.b),
3781       'a' : rgb.a
3782     };
3783
3784   },
3785
3786   /**
3787    * getPercentageRGB
3788    * @return {Object} an object representing the RGBA components of this Color. The red,
3789    * green, and blue components are converted to numbers in the range [0,100].
3790    * The alpha is a value in the range [0,1].
3791    */
3792   getPercentageRGB : function(){
3793
3794     // get the RGB components of this Color
3795     var rgb = this.getRGB();
3796
3797     // return the percentage components
3798     return {
3799       'r' : 100 * rgb.r / 255,
3800       'g' : 100 * rgb.g / 255,
3801       'b' : 100 * rgb.b / 255,
3802       'a' : rgb.a
3803     };
3804
3805   },
3806
3807   /**
3808    * getCSSHexadecimalRGB
3809    * @return {String} a string representing this Color as a CSS hexadecimal RGB Color
3810    * value - that is, a string of the form #RRGGBB where each of RR, GG, and BB
3811    * are two-digit hexadecimal numbers.
3812    */
3813   getCSSHexadecimalRGB : function()
3814   {
3815
3816     // get the integer RGB components
3817     var rgb = this.getIntegerRGB();
3818
3819     // determine the hexadecimal equivalents
3820     var r16 = rgb.r.toString(16);
3821     var g16 = rgb.g.toString(16);
3822     var b16 = rgb.b.toString(16);
3823
3824     // return the CSS RGB Color value
3825     return '#'
3826         + (r16.length == 2 ? r16 : '0' + r16)
3827         + (g16.length == 2 ? g16 : '0' + g16)
3828         + (b16.length == 2 ? b16 : '0' + b16);
3829
3830   },
3831
3832   /**
3833    * getCSSIntegerRGB
3834    * @return {String} a string representing this Color as a CSS integer RGB Color
3835    * value - that is, a string of the form rgb(r,g,b) where each of r, g, and b
3836    * are integers in the range [0,255].
3837    */
3838   getCSSIntegerRGB : function(){
3839
3840     // get the integer RGB components
3841     var rgb = this.getIntegerRGB();
3842
3843     // return the CSS RGB Color value
3844     return 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')';
3845
3846   },
3847
3848   /**
3849    * getCSSIntegerRGBA
3850    * @return {String} Returns a string representing this Color as a CSS integer RGBA Color
3851    * value - that is, a string of the form rgba(r,g,b,a) where each of r, g, and
3852    * b are integers in the range [0,255] and a is in the range [0,1].
3853    */
3854   getCSSIntegerRGBA : function(){
3855
3856     // get the integer RGB components
3857     var rgb = this.getIntegerRGB();
3858
3859     // return the CSS integer RGBA Color value
3860     return 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + rgb.a + ')';
3861
3862   },
3863
3864   /**
3865    * getCSSPercentageRGB
3866    * @return {String} a string representing this Color as a CSS percentage RGB Color
3867    * value - that is, a string of the form rgb(r%,g%,b%) where each of r, g, and
3868    * b are in the range [0,100].
3869    */
3870   getCSSPercentageRGB : function(){
3871
3872     // get the percentage RGB components
3873     var rgb = this.getPercentageRGB();
3874
3875     // return the CSS RGB Color value
3876     return 'rgb(' + rgb.r + '%,' + rgb.g + '%,' + rgb.b + '%)';
3877
3878   },
3879
3880   /**
3881    * getCSSPercentageRGBA
3882    * @return {String} a string representing this Color as a CSS percentage RGBA Color
3883    * value - that is, a string of the form rgba(r%,g%,b%,a) where each of r, g,
3884    * and b are in the range [0,100] and a is in the range [0,1].
3885    */
3886   getCSSPercentageRGBA : function(){
3887
3888     // get the percentage RGB components
3889     var rgb = this.getPercentageRGB();
3890
3891     // return the CSS percentage RGBA Color value
3892     return 'rgb(' + rgb.r + '%,' + rgb.g + '%,' + rgb.b + '%,' + rgb.a + ')';
3893
3894   },
3895
3896   /**
3897    * getCSSHSL
3898    * @return {String} a string representing this Color as a CSS HSL Color value - that
3899    * is, a string of the form hsl(h,s%,l%) where h is in the range [0,100] and
3900    * s and l are in the range [0,100].
3901    */
3902   getCSSHSL : function(){
3903
3904     // get the HSL components
3905     var hsl = this.getHSL();
3906
3907     // return the CSS HSL Color value
3908     return 'hsl(' + hsl.h + ',' + hsl.s + '%,' + hsl.l + '%)';
3909
3910   },
3911
3912   /**
3913    * getCSSHSLA
3914    * @return {String} a string representing this Color as a CSS HSLA Color value - that
3915    * is, a string of the form hsla(h,s%,l%,a) where h is in the range [0,100],
3916    * s and l are in the range [0,100], and a is in the range [0,1].
3917    */
3918   getCSSHSLA : function(){
3919
3920     // get the HSL components
3921     var hsl = this.getHSL();
3922
3923     // return the CSS HSL Color value
3924     return 'hsl(' + hsl.h + ',' + hsl.s + '%,' + hsl.l + '%,' + hsl.a + ')';
3925
3926   },
3927
3928   /**
3929    * Sets the Color of the specified node to this Color. This functions sets
3930    * the CSS 'color' property for the node. The parameter is:
3931    * 
3932    * @param {DomElement} node - the node whose Color should be set
3933    */
3934   setNodeColor : function(node){
3935
3936     // set the Color of the node
3937     node.style.color = this.getCSSHexadecimalRGB();
3938
3939   },
3940
3941   /**
3942    * Sets the background Color of the specified node to this Color. This
3943    * functions sets the CSS 'background-color' property for the node. The
3944    * parameter is:
3945    *
3946    * @param {DomElement} node - the node whose background Color should be set
3947    */
3948   setNodeBackgroundColor : function(node){
3949
3950     // set the background Color of the node
3951     node.style.backgroundColor = this.getCSSHexadecimalRGB();
3952
3953   },
3954   // convert between formats..
3955   toRGB: function()
3956   {
3957     var r = this.getIntegerRGB();
3958     return new Roo.lib.RGBColor(r.r,r.g,r.b,r.a);
3959     
3960   },
3961   toHSL : function()
3962   {
3963      var hsl = this.getHSL();
3964   // return the CSS HSL Color value
3965     return new Roo.lib.HSLColor(hsl.h,  hsl.s, hsl.l ,  hsl.a );
3966     
3967   },
3968   
3969   toHSV : function()
3970   {
3971     var rgb = this.toRGB();
3972     var hsv = rgb.getHSV();
3973    // return the CSS HSL Color value
3974     return new Roo.lib.HSVColor(hsv.h,  hsv.s, hsv.v ,  hsv.a );
3975     
3976   },
3977   
3978   // modify  v = 0 ... 1 (eg. 0.5)
3979   saturate : function(v)
3980   {
3981       var rgb = this.toRGB();
3982       var hsv = rgb.getHSV();
3983       return new Roo.lib.HSVColor(hsv.h,  hsv.s * v, hsv.v ,  hsv.a );
3984       
3985   
3986   },
3987   
3988    
3989   /**
3990    * getRGB
3991    * @return {Object} the RGB and alpha components of this Color as an object with r,
3992    * g, b, and a properties. r, g, and b are in the range [0,255] and a is in
3993    * the range [0,1].
3994    */
3995   getRGB: function(){
3996    
3997     // return the RGB components
3998     return {
3999       'r' : this.rgb.r,
4000       'g' : this.rgb.g,
4001       'b' : this.rgb.b,
4002       'a' : this.alpha
4003     };
4004
4005   },
4006
4007   /**
4008    * getHSV
4009    * @return {Object} the HSV and alpha components of this Color as an object with h,
4010    * s, v, and a properties. h is in the range [0,360), s and v are in the range
4011    * [0,100], and a is in the range [0,1].
4012    */
4013   getHSV : function()
4014   {
4015     
4016     // calculate the HSV components if necessary
4017     if (this.hsv == null) {
4018       this.calculateHSV();
4019     }
4020
4021     // return the HSV components
4022     return {
4023       'h' : this.hsv.h,
4024       's' : this.hsv.s,
4025       'v' : this.hsv.v,
4026       'a' : this.alpha
4027     };
4028
4029   },
4030
4031   /**
4032    * getHSL
4033    * @return {Object} the HSL and alpha components of this Color as an object with h,
4034    * s, l, and a properties. h is in the range [0,360), s and l are in the range
4035    * [0,100], and a is in the range [0,1].
4036    */
4037   getHSL : function(){
4038     
4039      
4040     // calculate the HSV components if necessary
4041     if (this.hsl == null) { this.calculateHSL(); }
4042
4043     // return the HSL components
4044     return {
4045       'h' : this.hsl.h,
4046       's' : this.hsl.s,
4047       'l' : this.hsl.l,
4048       'a' : this.alpha
4049     };
4050
4051   }
4052   
4053
4054 });
4055
4056
4057 /**
4058  * @class Roo.lib.RGBColor
4059  * @extends Roo.lib.Color
4060  * Creates a Color specified in the RGB Color space, with an optional alpha
4061  * component. The parameters are:
4062  * @constructor
4063  * 
4064
4065  * @param {Number} r - the red component, clipped to the range [0,255]
4066  * @param {Number} g - the green component, clipped to the range [0,255]
4067  * @param {Number} b - the blue component, clipped to the range [0,255]
4068  * @param {Number} a - the alpha component, clipped to the range [0,1] - this parameter is
4069  *     optional and defaults to 1
4070  */
4071 Roo.lib.RGBColor = function (r, g, b, a){
4072
4073   // store the alpha component after clipping it if necessary
4074   this.alpha = (a === undefined ? 1 : Math.max(0, Math.min(1, a)));
4075
4076   // store the RGB components after clipping them if necessary
4077   this.rgb =
4078       {
4079         'r' : Math.max(0, Math.min(255, r)),
4080         'g' : Math.max(0, Math.min(255, g)),
4081         'b' : Math.max(0, Math.min(255, b))
4082       };
4083
4084   // initialise the HSV and HSL components to null
4085   
4086
4087   /* 
4088    * //private returns the HSV or HSL hue component of this RGBColor. The hue is in the
4089    * range [0,360). The parameters are:
4090    *
4091    * maximum - the maximum of the RGB component values
4092    * range   - the range of the RGB component values
4093    */
4094    
4095
4096 }
4097 // this does an 'exteds'
4098 Roo.extend(Roo.lib.RGBColor, Roo.lib.Color, {
4099
4100   
4101     getHue  : function(maximum, range)
4102     {
4103       var rgb = this.rgb;
4104        
4105       // check whether the range is zero
4106       if (range == 0){
4107   
4108         // set the hue to zero (any hue is acceptable as the Color is grey)
4109         var hue = 0;
4110   
4111       }else{
4112   
4113         // determine which of the components has the highest value and set the hue
4114         switch (maximum){
4115   
4116           // red has the highest value
4117           case rgb.r:
4118             var hue = (rgb.g - rgb.b) / range * 60;
4119             if (hue < 0) { hue += 360; }
4120             break;
4121   
4122           // green has the highest value
4123           case rgb.g:
4124             var hue = (rgb.b - rgb.r) / range * 60 + 120;
4125             break;
4126   
4127           // blue has the highest value
4128           case rgb.b:
4129             var hue = (rgb.r - rgb.g) / range * 60 + 240;
4130             break;
4131   
4132         }
4133   
4134       }
4135   
4136       // return the hue
4137       return hue;
4138   
4139     },
4140
4141   /* //private Calculates and stores the HSV components of this RGBColor so that they can
4142    * be returned be the getHSV function.
4143    */
4144    calculateHSV : function(){
4145     var rgb = this.rgb;
4146     // get the maximum and range of the RGB component values
4147     var maximum = Math.max(rgb.r, rgb.g, rgb.b);
4148     var range   = maximum - Math.min(rgb.r, rgb.g, rgb.b);
4149
4150     // store the HSV components
4151     this.hsv =
4152         {
4153           'h' : this.getHue(maximum, range),
4154           's' : (maximum == 0 ? 0 : 100 * range / maximum),
4155           'v' : maximum / 2.55
4156         };
4157
4158   },
4159
4160   /* //private Calculates and stores the HSL components of this RGBColor so that they can
4161    * be returned be the getHSL function.
4162    */
4163    calculateHSL : function(){
4164     var rgb = this.rgb;
4165     // get the maximum and range of the RGB component values
4166     var maximum = Math.max(rgb.r, rgb.g, rgb.b);
4167     var range   = maximum - Math.min(rgb.r, rgb.g, rgb.b);
4168
4169     // determine the lightness in the range [0,1]
4170     var l = maximum / 255 - range / 510;
4171
4172     // store the HSL components
4173     this.hsl =
4174         {
4175           'h' : this.getHue(maximum, range),
4176           's' : (range == 0 ? 0 : range / 2.55 / (l < 0.5 ? l * 2 : 2 - l * 2)),
4177           'l' : 100 * l
4178         };
4179
4180   }
4181
4182 });
4183
4184 /**
4185  * @class Roo.lib.HSVColor
4186  * @extends Roo.lib.Color
4187  * Creates a Color specified in the HSV Color space, with an optional alpha
4188  * component. The parameters are:
4189  * @constructor
4190  *
4191  * @param {Number} h - the hue component, wrapped to the range [0,360)
4192  * @param {Number} s - the saturation component, clipped to the range [0,100]
4193  * @param {Number} v - the value component, clipped to the range [0,100]
4194  * @param {Number} a - the alpha component, clipped to the range [0,1] - this parameter is
4195  *     optional and defaults to 1
4196  */
4197 Roo.lib.HSVColor = function (h, s, v, a){
4198
4199   // store the alpha component after clipping it if necessary
4200   this.alpha = (a === undefined ? 1 : Math.max(0, Math.min(1, a)));
4201
4202   // store the HSV components after clipping or wrapping them if necessary
4203   this.hsv =
4204       {
4205         'h' : (h % 360 + 360) % 360,
4206         's' : Math.max(0, Math.min(100, s)),
4207         'v' : Math.max(0, Math.min(100, v))
4208       };
4209
4210   // initialise the RGB and HSL components to null
4211   this.rgb = null;
4212   this.hsl = null;
4213 }
4214
4215 Roo.extend(Roo.lib.HSVColor, Roo.lib.Color, {
4216   /* Calculates and stores the RGB components of this HSVColor so that they can
4217    * be returned be the getRGB function.
4218    */
4219   calculateRGB: function ()
4220   {
4221     var hsv = this.hsv;
4222     // check whether the saturation is zero
4223     if (hsv.s == 0){
4224
4225       // set the Color to the appropriate shade of grey
4226       var r = hsv.v;
4227       var g = hsv.v;
4228       var b = hsv.v;
4229
4230     }else{
4231
4232       // set some temporary values
4233       var f  = hsv.h / 60 - Math.floor(hsv.h / 60);
4234       var p  = hsv.v * (1 - hsv.s / 100);
4235       var q  = hsv.v * (1 - hsv.s / 100 * f);
4236       var t  = hsv.v * (1 - hsv.s / 100 * (1 - f));
4237
4238       // set the RGB Color components to their temporary values
4239       switch (Math.floor(hsv.h / 60)){
4240         case 0: var r = hsv.v; var g = t; var b = p; break;
4241         case 1: var r = q; var g = hsv.v; var b = p; break;
4242         case 2: var r = p; var g = hsv.v; var b = t; break;
4243         case 3: var r = p; var g = q; var b = hsv.v; break;
4244         case 4: var r = t; var g = p; var b = hsv.v; break;
4245         case 5: var r = hsv.v; var g = p; var b = q; break;
4246       }
4247
4248     }
4249
4250     // store the RGB components
4251     this.rgb =
4252         {
4253           'r' : r * 2.55,
4254           'g' : g * 2.55,
4255           'b' : b * 2.55
4256         };
4257
4258   },
4259
4260   /* Calculates and stores the HSL components of this HSVColor so that they can
4261    * be returned be the getHSL function.
4262    */
4263   calculateHSL : function (){
4264
4265     var hsv = this.hsv;
4266     // determine the lightness in the range [0,100]
4267     var l = (2 - hsv.s / 100) * hsv.v / 2;
4268
4269     // store the HSL components
4270     this.hsl =
4271         {
4272           'h' : hsv.h,
4273           's' : hsv.s * hsv.v / (l < 50 ? l * 2 : 200 - l * 2),
4274           'l' : l
4275         };
4276
4277     // correct a division-by-zero error
4278     if (isNaN(hsl.s)) { hsl.s = 0; }
4279
4280   } 
4281  
4282
4283 });
4284  
4285
4286 /**
4287  * @class Roo.lib.HSLColor
4288  * @extends Roo.lib.Color
4289  *
4290  * @constructor
4291  * Creates a Color specified in the HSL Color space, with an optional alpha
4292  * component. The parameters are:
4293  *
4294  * @param {Number} h - the hue component, wrapped to the range [0,360)
4295  * @param {Number} s - the saturation component, clipped to the range [0,100]
4296  * @param {Number} l - the lightness component, clipped to the range [0,100]
4297  * @param {Number} a - the alpha component, clipped to the range [0,1] - this parameter is
4298  *     optional and defaults to 1
4299  */
4300
4301 Roo.lib.HSLColor = function(h, s, l, a){
4302
4303   // store the alpha component after clipping it if necessary
4304   this.alpha = (a === undefined ? 1 : Math.max(0, Math.min(1, a)));
4305
4306   // store the HSL components after clipping or wrapping them if necessary
4307   this.hsl =
4308       {
4309         'h' : (h % 360 + 360) % 360,
4310         's' : Math.max(0, Math.min(100, s)),
4311         'l' : Math.max(0, Math.min(100, l))
4312       };
4313
4314   // initialise the RGB and HSV components to null
4315 }
4316
4317 Roo.extend(Roo.lib.HSLColor, Roo.lib.Color, {
4318
4319   /* Calculates and stores the RGB components of this HSLColor so that they can
4320    * be returned be the getRGB function.
4321    */
4322   calculateRGB: function (){
4323
4324     // check whether the saturation is zero
4325     if (this.hsl.s == 0){
4326
4327       // store the RGB components representing the appropriate shade of grey
4328       this.rgb =
4329           {
4330             'r' : this.hsl.l * 2.55,
4331             'g' : this.hsl.l * 2.55,
4332             'b' : this.hsl.l * 2.55
4333           };
4334
4335     }else{
4336
4337       // set some temporary values
4338       var p = this.hsl.l < 50
4339             ? this.hsl.l * (1 + hsl.s / 100)
4340             : this.hsl.l + hsl.s - hsl.l * hsl.s / 100;
4341       var q = 2 * hsl.l - p;
4342
4343       // initialise the RGB components
4344       this.rgb =
4345           {
4346             'r' : (h + 120) / 60 % 6,
4347             'g' : h / 60,
4348             'b' : (h + 240) / 60 % 6
4349           };
4350
4351       // loop over the RGB components
4352       for (var key in this.rgb){
4353
4354         // ensure that the property is not inherited from the root object
4355         if (this.rgb.hasOwnProperty(key)){
4356
4357           // set the component to its value in the range [0,100]
4358           if (this.rgb[key] < 1){
4359             this.rgb[key] = q + (p - q) * this.rgb[key];
4360           }else if (this.rgb[key] < 3){
4361             this.rgb[key] = p;
4362           }else if (this.rgb[key] < 4){
4363             this.rgb[key] = q + (p - q) * (4 - this.rgb[key]);
4364           }else{
4365             this.rgb[key] = q;
4366           }
4367
4368           // set the component to its value in the range [0,255]
4369           this.rgb[key] *= 2.55;
4370
4371         }
4372
4373       }
4374
4375     }
4376
4377   },
4378
4379   /* Calculates and stores the HSV components of this HSLColor so that they can
4380    * be returned be the getHSL function.
4381    */
4382    calculateHSV : function(){
4383
4384     // set a temporary value
4385     var t = this.hsl.s * (this.hsl.l < 50 ? this.hsl.l : 100 - this.hsl.l) / 100;
4386
4387     // store the HSV components
4388     this.hsv =
4389         {
4390           'h' : this.hsl.h,
4391           's' : 200 * t / (this.hsl.l + t),
4392           'v' : t + this.hsl.l
4393         };
4394
4395     // correct a division-by-zero error
4396     if (isNaN(this.hsv.s)) { this.hsv.s = 0; }
4397
4398   }
4399  
4400
4401 });
4402 /*
4403  * Portions of this file are based on pieces of Yahoo User Interface Library
4404  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
4405  * YUI licensed under the BSD License:
4406  * http://developer.yahoo.net/yui/license.txt
4407  * <script type="text/javascript">
4408  *
4409  */
4410 (function() {
4411
4412     Roo.lib.ColorAnim = function(el, attributes, duration, method) {
4413         Roo.lib.ColorAnim.superclass.constructor.call(this, el, attributes, duration, method);
4414     };
4415
4416     Roo.extend(Roo.lib.ColorAnim, Roo.lib.AnimBase);
4417
4418     var fly = Roo.lib.AnimBase.fly;
4419     var Y = Roo.lib;
4420     var superclass = Y.ColorAnim.superclass;
4421     var proto = Y.ColorAnim.prototype;
4422
4423     proto.toString = function() {
4424         var el = this.getEl();
4425         var id = el.id || el.tagName;
4426         return ("ColorAnim " + id);
4427     };
4428
4429     proto.patterns.color = /color$/i;
4430     proto.patterns.rgb = /^rgb\(([0-9]+)\s*,\s*([0-9]+)\s*,\s*([0-9]+)\)$/i;
4431     proto.patterns.hex = /^#?([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i;
4432     proto.patterns.hex3 = /^#?([0-9A-F]{1})([0-9A-F]{1})([0-9A-F]{1})$/i;
4433     proto.patterns.transparent = /^transparent|rgba\(0, 0, 0, 0\)$/;
4434
4435
4436     proto.parseColor = function(s) {
4437         if (s.length == 3) {
4438             return s;
4439         }
4440
4441         var c = this.patterns.hex.exec(s);
4442         if (c && c.length == 4) {
4443             return [ parseInt(c[1], 16), parseInt(c[2], 16), parseInt(c[3], 16) ];
4444         }
4445
4446         c = this.patterns.rgb.exec(s);
4447         if (c && c.length == 4) {
4448             return [ parseInt(c[1], 10), parseInt(c[2], 10), parseInt(c[3], 10) ];
4449         }
4450
4451         c = this.patterns.hex3.exec(s);
4452         if (c && c.length == 4) {
4453             return [ parseInt(c[1] + c[1], 16), parseInt(c[2] + c[2], 16), parseInt(c[3] + c[3], 16) ];
4454         }
4455
4456         return null;
4457     };
4458     // since this uses fly! - it cant be in ColorAnim (which does not have fly yet..)
4459     proto.getAttribute = function(attr) {
4460         var el = this.getEl();
4461         if (this.patterns.color.test(attr)) {
4462             var val = fly(el).getStyle(attr);
4463
4464             if (this.patterns.transparent.test(val)) {
4465                 var parent = el.parentNode;
4466                 val = fly(parent).getStyle(attr);
4467
4468                 while (parent && this.patterns.transparent.test(val)) {
4469                     parent = parent.parentNode;
4470                     val = fly(parent).getStyle(attr);
4471                     if (parent.tagName.toUpperCase() == 'HTML') {
4472                         val = '#fff';
4473                     }
4474                 }
4475             }
4476         } else {
4477             val = superclass.getAttribute.call(this, attr);
4478         }
4479
4480         return val;
4481     };
4482     proto.getAttribute = function(attr) {
4483         var el = this.getEl();
4484         if (this.patterns.color.test(attr)) {
4485             var val = fly(el).getStyle(attr);
4486
4487             if (this.patterns.transparent.test(val)) {
4488                 var parent = el.parentNode;
4489                 val = fly(parent).getStyle(attr);
4490
4491                 while (parent && this.patterns.transparent.test(val)) {
4492                     parent = parent.parentNode;
4493                     val = fly(parent).getStyle(attr);
4494                     if (parent.tagName.toUpperCase() == 'HTML') {
4495                         val = '#fff';
4496                     }
4497                 }
4498             }
4499         } else {
4500             val = superclass.getAttribute.call(this, attr);
4501         }
4502
4503         return val;
4504     };
4505
4506     proto.doMethod = function(attr, start, end) {
4507         var val;
4508
4509         if (this.patterns.color.test(attr)) {
4510             val = [];
4511             for (var i = 0, len = start.length; i < len; ++i) {
4512                 val[i] = superclass.doMethod.call(this, attr, start[i], end[i]);
4513             }
4514
4515             val = 'rgb(' + Math.floor(val[0]) + ',' + Math.floor(val[1]) + ',' + Math.floor(val[2]) + ')';
4516         }
4517         else {
4518             val = superclass.doMethod.call(this, attr, start, end);
4519         }
4520
4521         return val;
4522     };
4523
4524     proto.setRuntimeAttribute = function(attr) {
4525         superclass.setRuntimeAttribute.call(this, attr);
4526
4527         if (this.patterns.color.test(attr)) {
4528             var attributes = this.attributes;
4529             var start = this.parseColor(this.runtimeAttributes[attr].start);
4530             var end = this.parseColor(this.runtimeAttributes[attr].end);
4531
4532             if (typeof attributes[attr]['to'] === 'undefined' && typeof attributes[attr]['by'] !== 'undefined') {
4533                 end = this.parseColor(attributes[attr].by);
4534
4535                 for (var i = 0, len = start.length; i < len; ++i) {
4536                     end[i] = start[i] + end[i];
4537                 }
4538             }
4539
4540             this.runtimeAttributes[attr].start = start;
4541             this.runtimeAttributes[attr].end = end;
4542         }
4543     };
4544 })();
4545
4546 /*
4547  * Portions of this file are based on pieces of Yahoo User Interface Library
4548  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
4549  * YUI licensed under the BSD License:
4550  * http://developer.yahoo.net/yui/license.txt
4551  * <script type="text/javascript">
4552  *
4553  */
4554 Roo.lib.Easing = {
4555
4556
4557     easeNone: function (t, b, c, d) {
4558         return c * t / d + b;
4559     },
4560
4561
4562     easeIn: function (t, b, c, d) {
4563         return c * (t /= d) * t + b;
4564     },
4565
4566
4567     easeOut: function (t, b, c, d) {
4568         return -c * (t /= d) * (t - 2) + b;
4569     },
4570
4571
4572     easeBoth: function (t, b, c, d) {
4573         if ((t /= d / 2) < 1) {
4574             return c / 2 * t * t + b;
4575         }
4576
4577         return -c / 2 * ((--t) * (t - 2) - 1) + b;
4578     },
4579
4580
4581     easeInStrong: function (t, b, c, d) {
4582         return c * (t /= d) * t * t * t + b;
4583     },
4584
4585
4586     easeOutStrong: function (t, b, c, d) {
4587         return -c * ((t = t / d - 1) * t * t * t - 1) + b;
4588     },
4589
4590
4591     easeBothStrong: function (t, b, c, d) {
4592         if ((t /= d / 2) < 1) {
4593             return c / 2 * t * t * t * t + b;
4594         }
4595
4596         return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
4597     },
4598
4599
4600
4601     elasticIn: function (t, b, c, d, a, p) {
4602         if (t == 0) {
4603             return b;
4604         }
4605         if ((t /= d) == 1) {
4606             return b + c;
4607         }
4608         if (!p) {
4609             p = d * .3;
4610         }
4611
4612         if (!a || a < Math.abs(c)) {
4613             a = c;
4614             var s = p / 4;
4615         }
4616         else {
4617             var s = p / (2 * Math.PI) * Math.asin(c / a);
4618         }
4619
4620         return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
4621     },
4622
4623
4624     elasticOut: function (t, b, c, d, a, p) {
4625         if (t == 0) {
4626             return b;
4627         }
4628         if ((t /= d) == 1) {
4629             return b + c;
4630         }
4631         if (!p) {
4632             p = d * .3;
4633         }
4634
4635         if (!a || a < Math.abs(c)) {
4636             a = c;
4637             var s = p / 4;
4638         }
4639         else {
4640             var s = p / (2 * Math.PI) * Math.asin(c / a);
4641         }
4642
4643         return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
4644     },
4645
4646
4647     elasticBoth: function (t, b, c, d, a, p) {
4648         if (t == 0) {
4649             return b;
4650         }
4651
4652         if ((t /= d / 2) == 2) {
4653             return b + c;
4654         }
4655
4656         if (!p) {
4657             p = d * (.3 * 1.5);
4658         }
4659
4660         if (!a || a < Math.abs(c)) {
4661             a = c;
4662             var s = p / 4;
4663         }
4664         else {
4665             var s = p / (2 * Math.PI) * Math.asin(c / a);
4666         }
4667
4668         if (t < 1) {
4669             return -.5 * (a * Math.pow(2, 10 * (t -= 1)) *
4670                           Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
4671         }
4672         return a * Math.pow(2, -10 * (t -= 1)) *
4673                Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
4674     },
4675
4676
4677
4678     backIn: function (t, b, c, d, s) {
4679         if (typeof s == 'undefined') {
4680             s = 1.70158;
4681         }
4682         return c * (t /= d) * t * ((s + 1) * t - s) + b;
4683     },
4684
4685
4686     backOut: function (t, b, c, d, s) {
4687         if (typeof s == 'undefined') {
4688             s = 1.70158;
4689         }
4690         return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
4691     },
4692
4693
4694     backBoth: function (t, b, c, d, s) {
4695         if (typeof s == 'undefined') {
4696             s = 1.70158;
4697         }
4698
4699         if ((t /= d / 2 ) < 1) {
4700             return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
4701         }
4702         return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
4703     },
4704
4705
4706     bounceIn: function (t, b, c, d) {
4707         return c - Roo.lib.Easing.bounceOut(d - t, 0, c, d) + b;
4708     },
4709
4710
4711     bounceOut: function (t, b, c, d) {
4712         if ((t /= d) < (1 / 2.75)) {
4713             return c * (7.5625 * t * t) + b;
4714         } else if (t < (2 / 2.75)) {
4715             return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
4716         } else if (t < (2.5 / 2.75)) {
4717             return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
4718         }
4719         return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
4720     },
4721
4722
4723     bounceBoth: function (t, b, c, d) {
4724         if (t < d / 2) {
4725             return Roo.lib.Easing.bounceIn(t * 2, 0, c, d) * .5 + b;
4726         }
4727         return Roo.lib.Easing.bounceOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
4728     }
4729 };/*
4730  * Portions of this file are based on pieces of Yahoo User Interface Library
4731  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
4732  * YUI licensed under the BSD License:
4733  * http://developer.yahoo.net/yui/license.txt
4734  * <script type="text/javascript">
4735  *
4736  */
4737     (function() {
4738         Roo.lib.Motion = function(el, attributes, duration, method) {
4739             if (el) {
4740                 Roo.lib.Motion.superclass.constructor.call(this, el, attributes, duration, method);
4741             }
4742         };
4743
4744         Roo.extend(Roo.lib.Motion, Roo.lib.ColorAnim);
4745
4746
4747         var Y = Roo.lib;
4748         var superclass = Y.Motion.superclass;
4749         var proto = Y.Motion.prototype;
4750
4751         proto.toString = function() {
4752             var el = this.getEl();
4753             var id = el.id || el.tagName;
4754             return ("Motion " + id);
4755         };
4756
4757         proto.patterns.points = /^points$/i;
4758
4759         proto.setAttribute = function(attr, val, unit) {
4760             if (this.patterns.points.test(attr)) {
4761                 unit = unit || 'px';
4762                 superclass.setAttribute.call(this, 'left', val[0], unit);
4763                 superclass.setAttribute.call(this, 'top', val[1], unit);
4764             } else {
4765                 superclass.setAttribute.call(this, attr, val, unit);
4766             }
4767         };
4768
4769         proto.getAttribute = function(attr) {
4770             if (this.patterns.points.test(attr)) {
4771                 var val = [
4772                         superclass.getAttribute.call(this, 'left'),
4773                         superclass.getAttribute.call(this, 'top')
4774                         ];
4775             } else {
4776                 val = superclass.getAttribute.call(this, attr);
4777             }
4778
4779             return val;
4780         };
4781
4782         proto.doMethod = function(attr, start, end) {
4783             var val = null;
4784
4785             if (this.patterns.points.test(attr)) {
4786                 var t = this.method(this.currentFrame, 0, 100, this.totalFrames) / 100;
4787                 val = Y.Bezier.getPosition(this.runtimeAttributes[attr], t);
4788             } else {
4789                 val = superclass.doMethod.call(this, attr, start, end);
4790             }
4791             return val;
4792         };
4793
4794         proto.setRuntimeAttribute = function(attr) {
4795             if (this.patterns.points.test(attr)) {
4796                 var el = this.getEl();
4797                 var attributes = this.attributes;
4798                 var start;
4799                 var control = attributes['points']['control'] || [];
4800                 var end;
4801                 var i, len;
4802
4803                 if (control.length > 0 && !(control[0] instanceof Array)) {
4804                     control = [control];
4805                 } else {
4806                     var tmp = [];
4807                     for (i = 0,len = control.length; i < len; ++i) {
4808                         tmp[i] = control[i];
4809                     }
4810                     control = tmp;
4811                 }
4812
4813                 Roo.fly(el).position();
4814
4815                 if (isset(attributes['points']['from'])) {
4816                     Roo.lib.Dom.setXY(el, attributes['points']['from']);
4817                 }
4818                 else {
4819                     Roo.lib.Dom.setXY(el, Roo.lib.Dom.getXY(el));
4820                 }
4821
4822                 start = this.getAttribute('points');
4823
4824
4825                 if (isset(attributes['points']['to'])) {
4826                     end = translateValues.call(this, attributes['points']['to'], start);
4827
4828                     var pageXY = Roo.lib.Dom.getXY(this.getEl());
4829                     for (i = 0,len = control.length; i < len; ++i) {
4830                         control[i] = translateValues.call(this, control[i], start);
4831                     }
4832
4833
4834                 } else if (isset(attributes['points']['by'])) {
4835                     end = [ start[0] + attributes['points']['by'][0], start[1] + attributes['points']['by'][1] ];
4836
4837                     for (i = 0,len = control.length; i < len; ++i) {
4838                         control[i] = [ start[0] + control[i][0], start[1] + control[i][1] ];
4839                     }
4840                 }
4841
4842                 this.runtimeAttributes[attr] = [start];
4843
4844                 if (control.length > 0) {
4845                     this.runtimeAttributes[attr] = this.runtimeAttributes[attr].concat(control);
4846                 }
4847
4848                 this.runtimeAttributes[attr][this.runtimeAttributes[attr].length] = end;
4849             }
4850             else {
4851                 superclass.setRuntimeAttribute.call(this, attr);
4852             }
4853         };
4854
4855         var translateValues = function(val, start) {
4856             var pageXY = Roo.lib.Dom.getXY(this.getEl());
4857             val = [ val[0] - pageXY[0] + start[0], val[1] - pageXY[1] + start[1] ];
4858
4859             return val;
4860         };
4861
4862         var isset = function(prop) {
4863             return (typeof prop !== 'undefined');
4864         };
4865     })();
4866 /*
4867  * Portions of this file are based on pieces of Yahoo User Interface Library
4868  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
4869  * YUI licensed under the BSD License:
4870  * http://developer.yahoo.net/yui/license.txt
4871  * <script type="text/javascript">
4872  *
4873  */
4874     (function() {
4875         Roo.lib.Scroll = function(el, attributes, duration, method) {
4876             if (el) {
4877                 Roo.lib.Scroll.superclass.constructor.call(this, el, attributes, duration, method);
4878             }
4879         };
4880
4881         Roo.extend(Roo.lib.Scroll, Roo.lib.ColorAnim);
4882
4883
4884         var Y = Roo.lib;
4885         var superclass = Y.Scroll.superclass;
4886         var proto = Y.Scroll.prototype;
4887
4888         proto.toString = function() {
4889             var el = this.getEl();
4890             var id = el.id || el.tagName;
4891             return ("Scroll " + id);
4892         };
4893
4894         proto.doMethod = function(attr, start, end) {
4895             var val = null;
4896
4897             if (attr == 'scroll') {
4898                 val = [
4899                         this.method(this.currentFrame, start[0], end[0] - start[0], this.totalFrames),
4900                         this.method(this.currentFrame, start[1], end[1] - start[1], this.totalFrames)
4901                         ];
4902
4903             } else {
4904                 val = superclass.doMethod.call(this, attr, start, end);
4905             }
4906             return val;
4907         };
4908
4909         proto.getAttribute = function(attr) {
4910             var val = null;
4911             var el = this.getEl();
4912
4913             if (attr == 'scroll') {
4914                 val = [ el.scrollLeft, el.scrollTop ];
4915             } else {
4916                 val = superclass.getAttribute.call(this, attr);
4917             }
4918
4919             return val;
4920         };
4921
4922         proto.setAttribute = function(attr, val, unit) {
4923             var el = this.getEl();
4924
4925             if (attr == 'scroll') {
4926                 el.scrollLeft = val[0];
4927                 el.scrollTop = val[1];
4928             } else {
4929                 superclass.setAttribute.call(this, attr, val, unit);
4930             }
4931         };
4932     })();
4933 /**
4934  * Originally based of this code... - refactored for Roo...
4935  * https://github.com/aaalsaleh/undo-manager
4936  
4937  * undo-manager.js
4938  * @author  Abdulrahman Alsaleh 
4939  * @copyright 2015 Abdulrahman Alsaleh 
4940  * @license  MIT License (c) 
4941  *
4942  * Hackily modifyed by alan@roojs.com
4943  *
4944  *
4945  *  
4946  *
4947  *  TOTALLY UNTESTED...
4948  *
4949  *  Documentation to be done....
4950  */
4951  
4952
4953 /**
4954 * @class Roo.lib.UndoManager
4955 * An undo manager implementation in JavaScript. It follows the W3C UndoManager and DOM Transaction
4956 * Draft and the undocumented and disabled Mozilla Firefox's UndoManager implementation.
4957
4958  * Usage:
4959  * <pre><code>
4960
4961
4962 editor.undoManager = new Roo.lib.UndoManager(1000, editor);
4963  
4964 </code></pre>
4965
4966 * For more information see this blog post with examples:
4967 *  <a href="http://www.cnitblog.com/seeyeah/archive/2011/12/30/38728.html/">DomHelper
4968      - Create Elements using DOM, HTML fragments and Templates</a>. 
4969 * @constructor
4970 * @param {Number} limit how far back to go ... use 1000?
4971 * @param {Object} scope usually use document..
4972 */
4973
4974 Roo.lib.UndoManager = function (limit, undoScopeHost)
4975 {
4976     this.stack = [];
4977     this.limit = limit;
4978     this.scope = undoScopeHost;
4979     this.fireEvent = typeof CustomEvent != 'undefined' && undoScopeHost && undoScopeHost.dispatchEvent;
4980     if (this.fireEvent) {
4981         this.bindEvents();
4982     }
4983     this.reset();
4984     
4985 };
4986         
4987 Roo.lib.UndoManager.prototype = {
4988     
4989     limit : false,
4990     stack : false,
4991     scope :  false,
4992     fireEvent : false,
4993     position : 0,
4994     length : 0,
4995     
4996     
4997      /**
4998      * To push and execute a transaction, the method undoManager.transact
4999      * must be called by passing a transaction object as the first argument, and a merge
5000      * flag as the second argument. A transaction object has the following properties:
5001      *
5002      * Usage:
5003 <pre><code>
5004 undoManager.transact({
5005     label: 'Typing',
5006     execute: function() { ... },
5007     undo: function() { ... },
5008     // redo same as execute
5009     redo: function() { this.execute(); }
5010 }, false);
5011
5012 // merge transaction
5013 undoManager.transact({
5014     label: 'Typing',
5015     execute: function() { ... },  // this will be run...
5016     undo: function() { ... }, // what to do when undo is run.
5017     // redo same as execute
5018     redo: function() { this.execute(); }
5019 }, true); 
5020 </code></pre> 
5021      *
5022      * 
5023      * @param {Object} transaction The transaction to add to the stack.
5024      * @return {String} The HTML fragment
5025      */
5026     
5027     
5028     transact : function (transaction, merge)
5029     {
5030         if (arguments.length < 2) {
5031             throw new TypeError('Not enough arguments to UndoManager.transact.');
5032         }
5033
5034         transaction.execute();
5035
5036         this.stack.splice(0, this.position);
5037         if (merge && this.length) {
5038             this.stack[0].push(transaction);
5039         } else {
5040             this.stack.unshift([transaction]);
5041         }
5042     
5043         this.position = 0;
5044
5045         if (this.limit && this.stack.length > this.limit) {
5046             this.length = this.stack.length = this.limit;
5047         } else {
5048             this.length = this.stack.length;
5049         }
5050
5051         if (this.fireEvent) {
5052             this.scope.dispatchEvent(
5053                 new CustomEvent('DOMTransaction', {
5054                     detail: {
5055                         transactions: this.stack[0].slice()
5056                     },
5057                     bubbles: true,
5058                     cancelable: false
5059                 })
5060             );
5061         }
5062         
5063         //Roo.log("transaction: pos:" + this.position + " len: " + this.length + " slen:" + this.stack.length);
5064       
5065         
5066     },
5067
5068     undo : function ()
5069     {
5070         //Roo.log("undo: pos:" + this.position + " len: " + this.length + " slen:" + this.stack.length);
5071         
5072         if (this.position < this.length) {
5073             for (var i = this.stack[this.position].length - 1; i >= 0; i--) {
5074                 this.stack[this.position][i].undo();
5075             }
5076             this.position++;
5077
5078             if (this.fireEvent) {
5079                 this.scope.dispatchEvent(
5080                     new CustomEvent('undo', {
5081                         detail: {
5082                             transactions: this.stack[this.position - 1].slice()
5083                         },
5084                         bubbles: true,
5085                         cancelable: false
5086                     })
5087                 );
5088             }
5089         }
5090     },
5091
5092     redo : function ()
5093     {
5094         if (this.position > 0) {
5095             for (var i = 0, n = this.stack[this.position - 1].length; i < n; i++) {
5096                 this.stack[this.position - 1][i].redo();
5097             }
5098             this.position--;
5099
5100             if (this.fireEvent) {
5101                 this.scope.dispatchEvent(
5102                     new CustomEvent('redo', {
5103                         detail: {
5104                             transactions: this.stack[this.position].slice()
5105                         },
5106                         bubbles: true,
5107                         cancelable: false
5108                     })
5109                 );
5110             }
5111         }
5112     },
5113
5114     item : function (index)
5115     {
5116         if (index >= 0 && index < this.length) {
5117             return this.stack[index].slice();
5118         }
5119         return null;
5120     },
5121
5122     clearUndo : function () {
5123         this.stack.length = this.length = this.position;
5124     },
5125
5126     clearRedo : function () {
5127         this.stack.splice(0, this.position);
5128         this.position = 0;
5129         this.length = this.stack.length;
5130     },
5131     /**
5132      * Reset the undo - probaly done on load to clear all history.
5133      */
5134     reset : function()
5135     {
5136         this.stack = [];
5137         this.position = 0;
5138         this.length = 0;
5139         this.current_html = this.scope.innerHTML;
5140         if (this.timer !== false) {
5141             clearTimeout(this.timer);
5142         }
5143         this.timer = false;
5144         this.merge = false;
5145         this.addEvent();
5146         
5147     },
5148     current_html : '',
5149     timer : false,
5150     merge : false,
5151     
5152     
5153     // this will handle the undo/redo on the element.?
5154     bindEvents : function()
5155     {
5156         var el  = this.scope;
5157         el.undoManager = this;
5158         
5159         
5160         this.scope.addEventListener('keydown', function(e) {
5161             if ((e.ctrlKey || e.metaKey) && e.keyCode === 90) {
5162                 if (e.shiftKey) {
5163                     el.undoManager.redo(); // Ctrl/Command + Shift + Z
5164                 } else {
5165                     el.undoManager.undo(); // Ctrl/Command + Z
5166                 }
5167         
5168                 e.preventDefault();
5169             }
5170         });
5171         /// ignore keyup..
5172         this.scope.addEventListener('keyup', function(e) {
5173             if ((e.ctrlKey || e.metaKey) && e.keyCode === 90) {
5174                 e.preventDefault();
5175             }
5176         });
5177         
5178         
5179         
5180         var t = this;
5181         
5182         el.addEventListener('input', function(e) {
5183             if(el.innerHTML == t.current_html) {
5184                 return;
5185             }
5186             // only record events every second.
5187             if (t.timer !== false) {
5188                clearTimeout(t.timer);
5189                t.timer = false;
5190             }
5191             t.timer = setTimeout(function() { t.merge = false; }, 1000);
5192             
5193             t.addEvent(t.merge);
5194             t.merge = true; // ignore changes happening every second..
5195         });
5196         },
5197     /**
5198      * Manually add an event.
5199      * Normall called without arguements - and it will just get added to the stack.
5200      * 
5201      */
5202     
5203     addEvent : function(merge)
5204     {
5205         //Roo.log("undomanager +" + (merge ? 'Y':'n'));
5206         // not sure if this should clear the timer 
5207         merge = typeof(merge) == 'undefined' ? false : merge; 
5208         
5209         this.scope.undoManager.transact({
5210             scope : this.scope,
5211             oldHTML: this.current_html,
5212             newHTML: this.scope.innerHTML,
5213             // nothing to execute (content already changed when input is fired)
5214             execute: function() { },
5215             undo: function() {
5216                 this.scope.innerHTML = this.current_html = this.oldHTML;
5217             },
5218             redo: function() {
5219                 this.scope.innerHTML = this.current_html = this.newHTML;
5220             }
5221         }, false); //merge);
5222         
5223         this.merge = merge;
5224         
5225         this.current_html = this.scope.innerHTML;
5226     }
5227     
5228     
5229      
5230     
5231     
5232     
5233 };
5234 /**
5235  * @class Roo.lib.Range
5236  * @constructor
5237  * This is a toolkit, normally used to copy features into a Dom Range element
5238  * Roo.lib.Range.wrap(x);
5239  *
5240  *
5241  *
5242  */
5243 Roo.lib.Range = function() { };
5244
5245 /**
5246  * Wrap a Dom Range object, to give it new features...
5247  * @static
5248  * @param {Range} the range to wrap
5249  */
5250 Roo.lib.Range.wrap = function(r) {
5251     return Roo.apply(r, Roo.lib.Range.prototype);
5252 };
5253 /**
5254  * find a parent node eg. LI / OL
5255  * @param {string|Array} node name or array of nodenames
5256  * @return {DomElement|false}
5257  */
5258 Roo.apply(Roo.lib.Range.prototype,
5259 {
5260     
5261     closest : function(str)
5262     {
5263         if (typeof(str) != 'string') {
5264             // assume it's a array.
5265             for(var i = 0;i < str.length;i++) {
5266                 var r = this.closest(str[i]);
5267                 if (r !== false) {
5268                     return r;
5269                 }
5270                 
5271             }
5272             return false;
5273         }
5274         str = str.toLowerCase();
5275         var n = this.commonAncestorContainer; // might not be a node
5276         while (n.nodeType != 1) {
5277             n = n.parentNode;
5278         }
5279         
5280         if (n.nodeName.toLowerCase() == str ) {
5281             return n;
5282         }
5283         if (n.nodeName.toLowerCase() == 'body') {
5284             return false;
5285         }
5286             
5287         return n.closest(str) || false;
5288         
5289     },
5290     cloneRange : function()
5291     {
5292         return Roo.lib.Range.wrap(Range.prototype.cloneRange.call(this));
5293     }
5294 });/**
5295  * @class Roo.lib.Selection
5296  * @constructor
5297  * This is a toolkit, normally used to copy features into a Dom Selection element
5298  * Roo.lib.Selection.wrap(x);
5299  *
5300  *
5301  *
5302  */
5303 Roo.lib.Selection = function() { };
5304
5305 /**
5306  * Wrap a Dom Range object, to give it new features...
5307  * @static
5308  * @param {Range} the range to wrap
5309  */
5310 Roo.lib.Selection.wrap = function(r, doc) {
5311     Roo.apply(r, Roo.lib.Selection.prototype);
5312     r.ownerDocument = doc; // usefull so we dont have to keep referening to it.
5313     return r;
5314 };
5315 /**
5316  * find a parent node eg. LI / OL
5317  * @param {string|Array} node name or array of nodenames
5318  * @return {DomElement|false}
5319  */
5320 Roo.apply(Roo.lib.Selection.prototype,
5321 {
5322     /**
5323      * the owner document
5324      */
5325     ownerDocument : false,
5326     
5327     getRangeAt : function(n)
5328     {
5329         return Roo.lib.Range.wrap(Selection.prototype.getRangeAt.call(this,n));
5330     },
5331     
5332     /**
5333      * insert node at selection 
5334      * @param {DomElement|string} node
5335      * @param {string} cursor (after|in|none) where to place the cursor after inserting.
5336      */
5337     insertNode: function(node, cursor)
5338     {
5339         if (typeof(node) == 'string') {
5340             node = this.ownerDocument.createElement(node);
5341             if (cursor == 'in') {
5342                 node.innerHTML = '&nbsp;';
5343             }
5344         }
5345         
5346         var range = this.getRangeAt(0);
5347         
5348         if (this.type != 'Caret') {
5349             range.deleteContents();
5350         }
5351         var sn = node.childNodes[0]; // select the contents.
5352
5353         
5354         
5355         range.insertNode(node);
5356         if (cursor == 'after') {
5357             node.insertAdjacentHTML('afterend', '&nbsp;');
5358             sn = node.nextSibling;
5359         }
5360         
5361         if (cursor == 'none') {
5362             return;
5363         }
5364         
5365         this.cursorText(sn);
5366     },
5367     
5368     cursorText : function(n)
5369     {
5370        
5371         //var range = this.getRangeAt(0);
5372         range = Roo.lib.Range.wrap(new Range());
5373         //range.selectNode(n);
5374         
5375         var ix = Array.from(n.parentNode.childNodes).indexOf(n);
5376         range.setStart(n.parentNode,ix);
5377         range.setEnd(n.parentNode,ix+1);
5378         //range.collapse(false);
5379          
5380         this.removeAllRanges();
5381         this.addRange(range);
5382         
5383         Roo.log([n, range, this,this.baseOffset,this.extentOffset, this.type]);
5384     },
5385     cursorAfter : function(n)
5386     {
5387         if (!n.nextSibling || n.nextSibling.nodeValue != '&nbsp;') {
5388             n.insertAdjacentHTML('afterend', '&nbsp;');
5389         }
5390         this.cursorText (n.nextSibling);
5391     }
5392         
5393     
5394 });/*
5395  * Based on:
5396  * Ext JS Library 1.1.1
5397  * Copyright(c) 2006-2007, Ext JS, LLC.
5398  *
5399  * Originally Released Under LGPL - original licence link has changed is not relivant.
5400  *
5401  * Fork - LGPL
5402  * <script type="text/javascript">
5403  */
5404
5405
5406 // nasty IE9 hack - what a pile of crap that is..
5407
5408  if (typeof Range != "undefined" && typeof Range.prototype.createContextualFragment == "undefined") {
5409     Range.prototype.createContextualFragment = function (html) {
5410         var doc = window.document;
5411         var container = doc.createElement("div");
5412         container.innerHTML = html;
5413         var frag = doc.createDocumentFragment(), n;
5414         while ((n = container.firstChild)) {
5415             frag.appendChild(n);
5416         }
5417         return frag;
5418     };
5419 }
5420
5421 /**
5422  * @class Roo.DomHelper
5423  * Utility class for working with DOM and/or Templates. It transparently supports using HTML fragments or DOM.
5424  * 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>.
5425  * @static
5426  */
5427 Roo.DomHelper = function(){
5428     var tempTableEl = null;
5429     var emptyTags = /^(?:br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i;
5430     var tableRe = /^table|tbody|tr|td$/i;
5431     var xmlns = {};
5432     // build as innerHTML where available
5433     /** @ignore */
5434     var createHtml = function(o){
5435         if(typeof o == 'string'){
5436             return o;
5437         }
5438         var b = "";
5439         if(!o.tag){
5440             o.tag = "div";
5441         }
5442         b += "<" + o.tag;
5443         for(var attr in o){
5444             if(attr == "tag" || attr == "children" || attr == "cn" || attr == "html" || typeof o[attr] == "function") { continue; }
5445             if(attr == "style"){
5446                 var s = o["style"];
5447                 if(typeof s == "function"){
5448                     s = s.call();
5449                 }
5450                 if(typeof s == "string"){
5451                     b += ' style="' + s + '"';
5452                 }else if(typeof s == "object"){
5453                     b += ' style="';
5454                     for(var key in s){
5455                         if(typeof s[key] != "function"){
5456                             b += key + ":" + s[key] + ";";
5457                         }
5458                     }
5459                     b += '"';
5460                 }
5461             }else{
5462                 if(attr == "cls"){
5463                     b += ' class="' + o["cls"] + '"';
5464                 }else if(attr == "htmlFor"){
5465                     b += ' for="' + o["htmlFor"] + '"';
5466                 }else{
5467                     b += " " + attr + '="' + o[attr] + '"';
5468                 }
5469             }
5470         }
5471         if(emptyTags.test(o.tag)){
5472             b += "/>";
5473         }else{
5474             b += ">";
5475             var cn = o.children || o.cn;
5476             if(cn){
5477                 //http://bugs.kde.org/show_bug.cgi?id=71506
5478                 if((cn instanceof Array) || (Roo.isSafari && typeof(cn.join) == "function")){
5479                     for(var i = 0, len = cn.length; i < len; i++) {
5480                         b += createHtml(cn[i], b);
5481                     }
5482                 }else{
5483                     b += createHtml(cn, b);
5484                 }
5485             }
5486             if(o.html){
5487                 b += o.html;
5488             }
5489             b += "</" + o.tag + ">";
5490         }
5491         return b;
5492     };
5493
5494     // build as dom
5495     /** @ignore */
5496     var createDom = function(o, parentNode){
5497          
5498         // defininition craeted..
5499         var ns = false;
5500         if (o.ns && o.ns != 'html') {
5501                
5502             if (o.xmlns && typeof(xmlns[o.ns]) == 'undefined') {
5503                 xmlns[o.ns] = o.xmlns;
5504                 ns = o.xmlns;
5505             }
5506             if (typeof(xmlns[o.ns]) == 'undefined') {
5507                 console.log("Trying to create namespace element " + o.ns + ", however no xmlns was sent to builder previously");
5508             }
5509             ns = xmlns[o.ns];
5510         }
5511         
5512         
5513         if (typeof(o) == 'string') {
5514             return parentNode.appendChild(document.createTextNode(o));
5515         }
5516         o.tag = o.tag || div;
5517         if (o.ns && Roo.isIE) {
5518             ns = false;
5519             o.tag = o.ns + ':' + o.tag;
5520             
5521         }
5522         var el = ns ? document.createElementNS( ns, o.tag||'div') :  document.createElement(o.tag||'div');
5523         var useSet = el.setAttribute ? true : false; // In IE some elements don't have setAttribute
5524         for(var attr in o){
5525             
5526             if(attr == "tag" || attr == "ns" ||attr == "xmlns" ||attr == "children" || attr == "cn" || attr == "html" || 
5527                     attr == "style" || typeof o[attr] == "function") { continue; }
5528                     
5529             if(attr=="cls" && Roo.isIE){
5530                 el.className = o["cls"];
5531             }else{
5532                 if(useSet) { el.setAttribute(attr=="cls" ? 'class' : attr, o[attr]);}
5533                 else { 
5534                     el[attr] = o[attr];
5535                 }
5536             }
5537         }
5538         Roo.DomHelper.applyStyles(el, o.style);
5539         var cn = o.children || o.cn;
5540         if(cn){
5541             //http://bugs.kde.org/show_bug.cgi?id=71506
5542              if((cn instanceof Array) || (Roo.isSafari && typeof(cn.join) == "function")){
5543                 for(var i = 0, len = cn.length; i < len; i++) {
5544                     createDom(cn[i], el);
5545                 }
5546             }else{
5547                 createDom(cn, el);
5548             }
5549         }
5550         if(o.html){
5551             el.innerHTML = o.html;
5552         }
5553         if(parentNode){
5554            parentNode.appendChild(el);
5555         }
5556         return el;
5557     };
5558
5559     var ieTable = function(depth, s, h, e){
5560         tempTableEl.innerHTML = [s, h, e].join('');
5561         var i = -1, el = tempTableEl;
5562         while(++i < depth && el.firstChild){
5563             el = el.firstChild;
5564         }
5565         return el;
5566     };
5567
5568     // kill repeat to save bytes
5569     var ts = '<table>',
5570         te = '</table>',
5571         tbs = ts+'<tbody>',
5572         tbe = '</tbody>'+te,
5573         trs = tbs + '<tr>',
5574         tre = '</tr>'+tbe;
5575
5576     /**
5577      * @ignore
5578      * Nasty code for IE's broken table implementation
5579      */
5580     var insertIntoTable = function(tag, where, el, html){
5581         if(!tempTableEl){
5582             tempTableEl = document.createElement('div');
5583         }
5584         var node;
5585         var before = null;
5586         if(tag == 'td'){
5587             if(where == 'afterbegin' || where == 'beforeend'){ // INTO a TD
5588                 return;
5589             }
5590             if(where == 'beforebegin'){
5591                 before = el;
5592                 el = el.parentNode;
5593             } else{
5594                 before = el.nextSibling;
5595                 el = el.parentNode;
5596             }
5597             node = ieTable(4, trs, html, tre);
5598         }
5599         else if(tag == 'tr'){
5600             if(where == 'beforebegin'){
5601                 before = el;
5602                 el = el.parentNode;
5603                 node = ieTable(3, tbs, html, tbe);
5604             } else if(where == 'afterend'){
5605                 before = el.nextSibling;
5606                 el = el.parentNode;
5607                 node = ieTable(3, tbs, html, tbe);
5608             } else{ // INTO a TR
5609                 if(where == 'afterbegin'){
5610                     before = el.firstChild;
5611                 }
5612                 node = ieTable(4, trs, html, tre);
5613             }
5614         } else if(tag == 'tbody'){
5615             if(where == 'beforebegin'){
5616                 before = el;
5617                 el = el.parentNode;
5618                 node = ieTable(2, ts, html, te);
5619             } else if(where == 'afterend'){
5620                 before = el.nextSibling;
5621                 el = el.parentNode;
5622                 node = ieTable(2, ts, html, te);
5623             } else{
5624                 if(where == 'afterbegin'){
5625                     before = el.firstChild;
5626                 }
5627                 node = ieTable(3, tbs, html, tbe);
5628             }
5629         } else{ // TABLE
5630             if(where == 'beforebegin' || where == 'afterend'){ // OUTSIDE the table
5631                 return;
5632             }
5633             if(where == 'afterbegin'){
5634                 before = el.firstChild;
5635             }
5636             node = ieTable(2, ts, html, te);
5637         }
5638         el.insertBefore(node, before);
5639         return node;
5640     };
5641     
5642     // this is a bit like the react update code...
5643     // 
5644     
5645     var updateNode = function(from, to)
5646     {
5647         // should we handle non-standard elements?
5648         Roo.log(["UpdateNode" , from, to]);
5649         if (from.nodeType != to.nodeType) {
5650             Roo.log(["ReplaceChild - mismatch notType" , to, from ]);
5651             from.parentNode.replaceChild(to, from);
5652         }
5653         
5654         if (from.nodeType == 3) {
5655             // assume it's text?!
5656             if (from.data == to.data) {
5657                 return;
5658             }
5659             from.data = to.data;
5660             return;
5661         }
5662         if (!from.parentNode) {
5663             // not sure why this is happening?
5664             return;
5665         }
5666         // assume 'to' doesnt have '1/3 nodetypes!
5667         // not sure why, by from, parent node might not exist?
5668         if (from.nodeType !=1 || from.tagName != to.tagName) {
5669             Roo.log(["ReplaceChild" , from, to ]);
5670             
5671             from.parentNode.replaceChild(to, from);
5672             return;
5673         }
5674         // compare attributes
5675         var ar = Array.from(from.attributes);
5676         for(var i = 0; i< ar.length;i++) {
5677             if (to.hasAttribute(ar[i].name)) {
5678                 continue;
5679             }
5680             if (ar[i].name == 'id') { // always keep ids?
5681                continue;
5682             }
5683             //if (ar[i].name == 'style') {
5684             //   throw "style removed?";
5685             //}
5686             Roo.log("removeAttribute" + ar[i].name);
5687             from.removeAttribute(ar[i].name);
5688         }
5689         ar = to.attributes;
5690         for(var i = 0; i< ar.length;i++) {
5691             if (from.getAttribute(ar[i].name) == to.getAttribute(ar[i].name)) {
5692                 Roo.log("skipAttribute " + ar[i].name  + '=' + to.getAttribute(ar[i].name));
5693                 continue;
5694             }
5695             Roo.log("updateAttribute " + ar[i].name + '=>' + to.getAttribute(ar[i].name));
5696             from.setAttribute(ar[i].name, to.getAttribute(ar[i].name));
5697         }
5698         // children
5699         var far = Array.from(from.childNodes);
5700         var tar = Array.from(to.childNodes);
5701         // if the lengths are different.. then it's probably a editable content change, rather than
5702         // a change of the block definition..
5703         
5704         // this did notwork , as our rebuilt nodes did not include ID's so did not match at all.
5705          /*if (from.innerHTML == to.innerHTML) {
5706             return;
5707         }
5708         if (far.length != tar.length) {
5709             from.innerHTML = to.innerHTML;
5710             return;
5711         }
5712         */
5713         
5714         for(var i = 0; i < Math.max(tar.length, far.length); i++) {
5715             if (i >= far.length) {
5716                 from.appendChild(tar[i]);
5717                 Roo.log(["add", tar[i]]);
5718                 
5719             } else if ( i  >= tar.length) {
5720                 from.removeChild(far[i]);
5721                 Roo.log(["remove", far[i]]);
5722             } else {
5723                 
5724                 updateNode(far[i], tar[i]);
5725             }    
5726         }
5727         
5728         
5729         
5730         
5731     };
5732     
5733     
5734
5735     return {
5736         /** True to force the use of DOM instead of html fragments @type Boolean */
5737         useDom : false,
5738     
5739         /**
5740          * Returns the markup for the passed Element(s) config
5741          * @param {Object} o The Dom object spec (and children)
5742          * @return {String}
5743          */
5744         markup : function(o){
5745             return createHtml(o);
5746         },
5747     
5748         /**
5749          * Applies a style specification to an element
5750          * @param {String/HTMLElement} el The element to apply styles to
5751          * @param {String/Object/Function} styles A style specification string eg "width:100px", or object in the form {width:"100px"}, or
5752          * a function which returns such a specification.
5753          */
5754         applyStyles : function(el, styles){
5755             if(styles){
5756                el = Roo.fly(el);
5757                if(typeof styles == "string"){
5758                    var re = /\s?([a-z\-]*)\:\s?([^;]*);?/gi;
5759                    var matches;
5760                    while ((matches = re.exec(styles)) != null){
5761                        el.setStyle(matches[1], matches[2]);
5762                    }
5763                }else if (typeof styles == "object"){
5764                    for (var style in styles){
5765                       el.setStyle(style, styles[style]);
5766                    }
5767                }else if (typeof styles == "function"){
5768                     Roo.DomHelper.applyStyles(el, styles.call());
5769                }
5770             }
5771         },
5772     
5773         /**
5774          * Inserts an HTML fragment into the Dom
5775          * @param {String} where Where to insert the html in relation to el - beforeBegin, afterBegin, beforeEnd, afterEnd.
5776          * @param {HTMLElement} el The context element
5777          * @param {String} html The HTML fragmenet
5778          * @return {HTMLElement} The new node
5779          */
5780         insertHtml : function(where, el, html){
5781             where = where.toLowerCase();
5782             if(el.insertAdjacentHTML){
5783                 if(tableRe.test(el.tagName)){
5784                     var rs;
5785                     if(rs = insertIntoTable(el.tagName.toLowerCase(), where, el, html)){
5786                         return rs;
5787                     }
5788                 }
5789                 switch(where){
5790                     case "beforebegin":
5791                         el.insertAdjacentHTML('BeforeBegin', html);
5792                         return el.previousSibling;
5793                     case "afterbegin":
5794                         el.insertAdjacentHTML('AfterBegin', html);
5795                         return el.firstChild;
5796                     case "beforeend":
5797                         el.insertAdjacentHTML('BeforeEnd', html);
5798                         return el.lastChild;
5799                     case "afterend":
5800                         el.insertAdjacentHTML('AfterEnd', html);
5801                         return el.nextSibling;
5802                 }
5803                 throw 'Illegal insertion point -> "' + where + '"';
5804             }
5805             var range = el.ownerDocument.createRange();
5806             var frag;
5807             switch(where){
5808                  case "beforebegin":
5809                     range.setStartBefore(el);
5810                     frag = range.createContextualFragment(html);
5811                     el.parentNode.insertBefore(frag, el);
5812                     return el.previousSibling;
5813                  case "afterbegin":
5814                     if(el.firstChild){
5815                         range.setStartBefore(el.firstChild);
5816                         frag = range.createContextualFragment(html);
5817                         el.insertBefore(frag, el.firstChild);
5818                         return el.firstChild;
5819                     }else{
5820                         el.innerHTML = html;
5821                         return el.firstChild;
5822                     }
5823                 case "beforeend":
5824                     if(el.lastChild){
5825                         range.setStartAfter(el.lastChild);
5826                         frag = range.createContextualFragment(html);
5827                         el.appendChild(frag);
5828                         return el.lastChild;
5829                     }else{
5830                         el.innerHTML = html;
5831                         return el.lastChild;
5832                     }
5833                 case "afterend":
5834                     range.setStartAfter(el);
5835                     frag = range.createContextualFragment(html);
5836                     el.parentNode.insertBefore(frag, el.nextSibling);
5837                     return el.nextSibling;
5838                 }
5839                 throw 'Illegal insertion point -> "' + where + '"';
5840         },
5841     
5842         /**
5843          * Creates new Dom element(s) and inserts them before el
5844          * @param {String/HTMLElement/Element} el The context element
5845          * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
5846          * @param {Boolean} returnElement (optional) true to return a Roo.Element
5847          * @return {HTMLElement/Roo.Element} The new node
5848          */
5849         insertBefore : function(el, o, returnElement){
5850             return this.doInsert(el, o, returnElement, "beforeBegin");
5851         },
5852     
5853         /**
5854          * Creates new Dom element(s) and inserts them after el
5855          * @param {String/HTMLElement/Element} el The context element
5856          * @param {Object} o The Dom object spec (and children)
5857          * @param {Boolean} returnElement (optional) true to return a Roo.Element
5858          * @return {HTMLElement/Roo.Element} The new node
5859          */
5860         insertAfter : function(el, o, returnElement){
5861             return this.doInsert(el, o, returnElement, "afterEnd", "nextSibling");
5862         },
5863     
5864         /**
5865          * Creates new Dom element(s) and inserts them as the first child of el
5866          * @param {String/HTMLElement/Element} el The context element
5867          * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
5868          * @param {Boolean} returnElement (optional) true to return a Roo.Element
5869          * @return {HTMLElement/Roo.Element} The new node
5870          */
5871         insertFirst : function(el, o, returnElement){
5872             return this.doInsert(el, o, returnElement, "afterBegin");
5873         },
5874     
5875         // private
5876         doInsert : function(el, o, returnElement, pos, sibling){
5877             el = Roo.getDom(el);
5878             var newNode;
5879             if(this.useDom || o.ns){
5880                 newNode = createDom(o, null);
5881                 el.parentNode.insertBefore(newNode, sibling ? el[sibling] : el);
5882             }else{
5883                 var html = createHtml(o);
5884                 newNode = this.insertHtml(pos, el, html);
5885             }
5886             return returnElement ? Roo.get(newNode, true) : newNode;
5887         },
5888     
5889         /**
5890          * Creates new Dom element(s) and appends them to el
5891          * @param {String/HTMLElement/Element} el The context element
5892          * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
5893          * @param {Boolean} returnElement (optional) true to return a Roo.Element
5894          * @return {HTMLElement/Roo.Element} The new node
5895          */
5896         append : function(el, o, returnElement){
5897             el = Roo.getDom(el);
5898             var newNode;
5899             if(this.useDom || o.ns){
5900                 newNode = createDom(o, null);
5901                 el.appendChild(newNode);
5902             }else{
5903                 var html = createHtml(o);
5904                 newNode = this.insertHtml("beforeEnd", el, html);
5905             }
5906             return returnElement ? Roo.get(newNode, true) : newNode;
5907         },
5908     
5909         /**
5910          * Creates new Dom element(s) and overwrites the contents of el with them
5911          * @param {String/HTMLElement/Element} el The context element
5912          * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
5913          * @param {Boolean} returnElement (optional) true to return a Roo.Element
5914          * @return {HTMLElement/Roo.Element} The new node
5915          */
5916         overwrite : function(el, o, returnElement)
5917         {
5918             el = Roo.getDom(el);
5919             if (o.ns) {
5920               
5921                 while (el.childNodes.length) {
5922                     el.removeChild(el.firstChild);
5923                 }
5924                 createDom(o, el);
5925             } else {
5926                 el.innerHTML = createHtml(o);   
5927             }
5928             
5929             return returnElement ? Roo.get(el.firstChild, true) : el.firstChild;
5930         },
5931     
5932         /**
5933          * Creates a new Roo.DomHelper.Template from the Dom object spec
5934          * @param {Object} o The Dom object spec (and children)
5935          * @return {Roo.DomHelper.Template} The new template
5936          */
5937         createTemplate : function(o){
5938             var html = createHtml(o);
5939             return new Roo.Template(html);
5940         },
5941          /**
5942          * Updates the first element with the spec from the o (replacing if necessary)
5943          * This iterates through the children, and updates attributes / children etc..
5944          * @param {String/HTMLElement/Element} el The context element
5945          * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
5946          */
5947         
5948         update : function(el, o)
5949         {
5950             updateNode(Roo.getDom(el), createDom(o));
5951             
5952         }
5953         
5954         
5955     };
5956 }();
5957 /*
5958  * Based on:
5959  * Ext JS Library 1.1.1
5960  * Copyright(c) 2006-2007, Ext JS, LLC.
5961  *
5962  * Originally Released Under LGPL - original licence link has changed is not relivant.
5963  *
5964  * Fork - LGPL
5965  * <script type="text/javascript">
5966  */
5967  
5968 /**
5969 * @class Roo.Template
5970 * Represents an HTML fragment template. Templates can be precompiled for greater performance.
5971 * For a list of available format functions, see {@link Roo.util.Format}.<br />
5972 * Usage:
5973 <pre><code>
5974 var t = new Roo.Template({
5975     html :  '&lt;div name="{id}"&gt;' + 
5976         '&lt;span class="{cls}"&gt;{name:trim} {someval:this.myformat}{value:ellipsis(10)}&lt;/span&gt;' +
5977         '&lt;/div&gt;',
5978     myformat: function (value, allValues) {
5979         return 'XX' + value;
5980     }
5981 });
5982 t.append('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});
5983 </code></pre>
5984 * For more information see this blog post with examples:
5985 *  <a href="http://www.cnitblog.com/seeyeah/archive/2011/12/30/38728.html/">DomHelper
5986      - Create Elements using DOM, HTML fragments and Templates</a>. 
5987 * @constructor
5988 * @param {Object} cfg - Configuration object.
5989 */
5990 Roo.Template = function(cfg){
5991     // BC!
5992     if(cfg instanceof Array){
5993         cfg = cfg.join("");
5994     }else if(arguments.length > 1){
5995         cfg = Array.prototype.join.call(arguments, "");
5996     }
5997     
5998     
5999     if (typeof(cfg) == 'object') {
6000         Roo.apply(this,cfg)
6001     } else {
6002         // bc
6003         this.html = cfg;
6004     }
6005     if (this.url) {
6006         this.load();
6007     }
6008     
6009 };
6010 Roo.Template.prototype = {
6011     
6012     /**
6013      * @cfg {Function} onLoad Called after the template has been loaded and complied (usually from a remove source)
6014      */
6015     onLoad : false,
6016     
6017     
6018     /**
6019      * @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..
6020      *                    it should be fixed so that template is observable...
6021      */
6022     url : false,
6023     /**
6024      * @cfg {String} html  The HTML fragment or an array of fragments to join("") or multiple arguments to join("")
6025      */
6026     html : '',
6027     
6028     
6029     compiled : false,
6030     loaded : false,
6031     /**
6032      * Returns an HTML fragment of this template with the specified values applied.
6033      * @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'})
6034      * @return {String} The HTML fragment
6035      */
6036     
6037    
6038     
6039     applyTemplate : function(values){
6040         //Roo.log(["applyTemplate", values]);
6041         try {
6042            
6043             if(this.compiled){
6044                 return this.compiled(values);
6045             }
6046             var useF = this.disableFormats !== true;
6047             var fm = Roo.util.Format, tpl = this;
6048             var fn = function(m, name, format, args){
6049                 if(format && useF){
6050                     if(format.substr(0, 5) == "this."){
6051                         return tpl.call(format.substr(5), values[name], values);
6052                     }else{
6053                         if(args){
6054                             // quoted values are required for strings in compiled templates, 
6055                             // but for non compiled we need to strip them
6056                             // quoted reversed for jsmin
6057                             var re = /^\s*['"](.*)["']\s*$/;
6058                             args = args.split(',');
6059                             for(var i = 0, len = args.length; i < len; i++){
6060                                 args[i] = args[i].replace(re, "$1");
6061                             }
6062                             args = [values[name]].concat(args);
6063                         }else{
6064                             args = [values[name]];
6065                         }
6066                         return fm[format].apply(fm, args);
6067                     }
6068                 }else{
6069                     return values[name] !== undefined ? values[name] : "";
6070                 }
6071             };
6072             return this.html.replace(this.re, fn);
6073         } catch (e) {
6074             Roo.log(e);
6075             throw e;
6076         }
6077          
6078     },
6079     
6080     loading : false,
6081       
6082     load : function ()
6083     {
6084          
6085         if (this.loading) {
6086             return;
6087         }
6088         var _t = this;
6089         
6090         this.loading = true;
6091         this.compiled = false;
6092         
6093         var cx = new Roo.data.Connection();
6094         cx.request({
6095             url : this.url,
6096             method : 'GET',
6097             success : function (response) {
6098                 _t.loading = false;
6099                 _t.url = false;
6100                 
6101                 _t.set(response.responseText,true);
6102                 _t.loaded = true;
6103                 if (_t.onLoad) {
6104                     _t.onLoad();
6105                 }
6106              },
6107             failure : function(response) {
6108                 Roo.log("Template failed to load from " + _t.url);
6109                 _t.loading = false;
6110             }
6111         });
6112     },
6113
6114     /**
6115      * Sets the HTML used as the template and optionally compiles it.
6116      * @param {String} html
6117      * @param {Boolean} compile (optional) True to compile the template (defaults to undefined)
6118      * @return {Roo.Template} this
6119      */
6120     set : function(html, compile){
6121         this.html = html;
6122         this.compiled = false;
6123         if(compile){
6124             this.compile();
6125         }
6126         return this;
6127     },
6128     
6129     /**
6130      * True to disable format functions (defaults to false)
6131      * @type Boolean
6132      */
6133     disableFormats : false,
6134     
6135     /**
6136     * The regular expression used to match template variables 
6137     * @type RegExp
6138     * @property 
6139     */
6140     re : /\{([\w-]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
6141     
6142     /**
6143      * Compiles the template into an internal function, eliminating the RegEx overhead.
6144      * @return {Roo.Template} this
6145      */
6146     compile : function(){
6147         var fm = Roo.util.Format;
6148         var useF = this.disableFormats !== true;
6149         var sep = Roo.isGecko ? "+" : ",";
6150         var fn = function(m, name, format, args){
6151             if(format && useF){
6152                 args = args ? ',' + args : "";
6153                 if(format.substr(0, 5) != "this."){
6154                     format = "fm." + format + '(';
6155                 }else{
6156                     format = 'this.call("'+ format.substr(5) + '", ';
6157                     args = ", values";
6158                 }
6159             }else{
6160                 args= ''; format = "(values['" + name + "'] == undefined ? '' : ";
6161             }
6162             return "'"+ sep + format + "values['" + name + "']" + args + ")"+sep+"'";
6163         };
6164         var body;
6165         // branched to use + in gecko and [].join() in others
6166         if(Roo.isGecko){
6167             body = "this.compiled = function(values){ return '" +
6168                    this.html.replace(/\\/g, '\\\\').replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn) +
6169                     "';};";
6170         }else{
6171             body = ["this.compiled = function(values){ return ['"];
6172             body.push(this.html.replace(/\\/g, '\\\\').replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn));
6173             body.push("'].join('');};");
6174             body = body.join('');
6175         }
6176         /**
6177          * eval:var:values
6178          * eval:var:fm
6179          */
6180         eval(body);
6181         return this;
6182     },
6183     
6184     // private function used to call members
6185     call : function(fnName, value, allValues){
6186         return this[fnName](value, allValues);
6187     },
6188     
6189     /**
6190      * Applies the supplied values to the template and inserts the new node(s) as the first child of el.
6191      * @param {String/HTMLElement/Roo.Element} el The context element
6192      * @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'})
6193      * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
6194      * @return {HTMLElement/Roo.Element} The new node or Element
6195      */
6196     insertFirst: function(el, values, returnElement){
6197         return this.doInsert('afterBegin', el, values, returnElement);
6198     },
6199
6200     /**
6201      * Applies the supplied values to the template and inserts the new node(s) before el.
6202      * @param {String/HTMLElement/Roo.Element} el The context element
6203      * @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'})
6204      * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
6205      * @return {HTMLElement/Roo.Element} The new node or Element
6206      */
6207     insertBefore: function(el, values, returnElement){
6208         return this.doInsert('beforeBegin', el, values, returnElement);
6209     },
6210
6211     /**
6212      * Applies the supplied values to the template and inserts the new node(s) after el.
6213      * @param {String/HTMLElement/Roo.Element} el The context element
6214      * @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'})
6215      * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
6216      * @return {HTMLElement/Roo.Element} The new node or Element
6217      */
6218     insertAfter : function(el, values, returnElement){
6219         return this.doInsert('afterEnd', el, values, returnElement);
6220     },
6221     
6222     /**
6223      * Applies the supplied values to the template and appends the new node(s) to el.
6224      * @param {String/HTMLElement/Roo.Element} el The context element
6225      * @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'})
6226      * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
6227      * @return {HTMLElement/Roo.Element} The new node or Element
6228      */
6229     append : function(el, values, returnElement){
6230         return this.doInsert('beforeEnd', el, values, returnElement);
6231     },
6232
6233     doInsert : function(where, el, values, returnEl){
6234         el = Roo.getDom(el);
6235         var newNode = Roo.DomHelper.insertHtml(where, el, this.applyTemplate(values));
6236         return returnEl ? Roo.get(newNode, true) : newNode;
6237     },
6238
6239     /**
6240      * Applies the supplied values to the template and overwrites the content of el with the new node(s).
6241      * @param {String/HTMLElement/Roo.Element} el The context element
6242      * @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'})
6243      * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
6244      * @return {HTMLElement/Roo.Element} The new node or Element
6245      */
6246     overwrite : function(el, values, returnElement){
6247         el = Roo.getDom(el);
6248         el.innerHTML = this.applyTemplate(values);
6249         return returnElement ? Roo.get(el.firstChild, true) : el.firstChild;
6250     }
6251 };
6252 /**
6253  * Alias for {@link #applyTemplate}
6254  * @method
6255  */
6256 Roo.Template.prototype.apply = Roo.Template.prototype.applyTemplate;
6257
6258 // backwards compat
6259 Roo.DomHelper.Template = Roo.Template;
6260
6261 /**
6262  * Creates a template from the passed element's value (<i>display:none</i> textarea, preferred) or innerHTML.
6263  * @param {String/HTMLElement} el A DOM element or its id
6264  * @returns {Roo.Template} The created template
6265  * @static
6266  */
6267 Roo.Template.from = function(el){
6268     el = Roo.getDom(el);
6269     return new Roo.Template(el.value || el.innerHTML);
6270 };/*
6271  * Based on:
6272  * Ext JS Library 1.1.1
6273  * Copyright(c) 2006-2007, Ext JS, LLC.
6274  *
6275  * Originally Released Under LGPL - original licence link has changed is not relivant.
6276  *
6277  * Fork - LGPL
6278  * <script type="text/javascript">
6279  */
6280  
6281
6282 /*
6283  * This is code is also distributed under MIT license for use
6284  * with jQuery and prototype JavaScript libraries.
6285  */
6286 /**
6287  * @class Roo.DomQuery
6288 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).
6289 <p>
6290 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>
6291
6292 <p>
6293 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.
6294 </p>
6295 <h4>Element Selectors:</h4>
6296 <ul class="list">
6297     <li> <b>*</b> any element</li>
6298     <li> <b>E</b> an element with the tag E</li>
6299     <li> <b>E F</b> All descendent elements of E that have the tag F</li>
6300     <li> <b>E > F</b> or <b>E/F</b> all direct children elements of E that have the tag F</li>
6301     <li> <b>E + F</b> all elements with the tag F that are immediately preceded by an element with the tag E</li>
6302     <li> <b>E ~ F</b> all elements with the tag F that are preceded by a sibling element with the tag E</li>
6303 </ul>
6304 <h4>Attribute Selectors:</h4>
6305 <p>The use of @ and quotes are optional. For example, div[@foo='bar'] is also a valid attribute selector.</p>
6306 <ul class="list">
6307     <li> <b>E[foo]</b> has an attribute "foo"</li>
6308     <li> <b>E[foo=bar]</b> has an attribute "foo" that equals "bar"</li>
6309     <li> <b>E[foo^=bar]</b> has an attribute "foo" that starts with "bar"</li>
6310     <li> <b>E[foo$=bar]</b> has an attribute "foo" that ends with "bar"</li>
6311     <li> <b>E[foo*=bar]</b> has an attribute "foo" that contains the substring "bar"</li>
6312     <li> <b>E[foo%=2]</b> has an attribute "foo" that is evenly divisible by 2</li>
6313     <li> <b>E[foo!=bar]</b> has an attribute "foo" that does not equal "bar"</li>
6314 </ul>
6315 <h4>Pseudo Classes:</h4>
6316 <ul class="list">
6317     <li> <b>E:first-child</b> E is the first child of its parent</li>
6318     <li> <b>E:last-child</b> E is the last child of its parent</li>
6319     <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>
6320     <li> <b>E:nth-child(odd)</b> E is an odd child of its parent</li>
6321     <li> <b>E:nth-child(even)</b> E is an even child of its parent</li>
6322     <li> <b>E:only-child</b> E is the only child of its parent</li>
6323     <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>
6324     <li> <b>E:first</b> the first E in the resultset</li>
6325     <li> <b>E:last</b> the last E in the resultset</li>
6326     <li> <b>E:nth(<i>n</i>)</b> the <i>n</i>th E in the resultset (1 based)</li>
6327     <li> <b>E:odd</b> shortcut for :nth-child(odd)</li>
6328     <li> <b>E:even</b> shortcut for :nth-child(even)</li>
6329     <li> <b>E:contains(foo)</b> E's innerHTML contains the substring "foo"</li>
6330     <li> <b>E:nodeValue(foo)</b> E contains a textNode with a nodeValue that equals "foo"</li>
6331     <li> <b>E:not(S)</b> an E element that does not match simple selector S</li>
6332     <li> <b>E:has(S)</b> an E element that has a descendent that matches simple selector S</li>
6333     <li> <b>E:next(S)</b> an E element whose next sibling matches simple selector S</li>
6334     <li> <b>E:prev(S)</b> an E element whose previous sibling matches simple selector S</li>
6335 </ul>
6336 <h4>CSS Value Selectors:</h4>
6337 <ul class="list">
6338     <li> <b>E{display=none}</b> css value "display" that equals "none"</li>
6339     <li> <b>E{display^=none}</b> css value "display" that starts with "none"</li>
6340     <li> <b>E{display$=none}</b> css value "display" that ends with "none"</li>
6341     <li> <b>E{display*=none}</b> css value "display" that contains the substring "none"</li>
6342     <li> <b>E{display%=2}</b> css value "display" that is evenly divisible by 2</li>
6343     <li> <b>E{display!=none}</b> css value "display" that does not equal "none"</li>
6344 </ul>
6345  * @static
6346  */
6347 Roo.DomQuery = function(){
6348     var cache = {}, simpleCache = {}, valueCache = {};
6349     var nonSpace = /\S/;
6350     var trimRe = /^\s+|\s+$/g;
6351     var tplRe = /\{(\d+)\}/g;
6352     var modeRe = /^(\s?[\/>+~]\s?|\s|$)/;
6353     var tagTokenRe = /^(#)?([\w-\*]+)/;
6354     var nthRe = /(\d*)n\+?(\d*)/, nthRe2 = /\D/;
6355
6356     function child(p, index){
6357         var i = 0;
6358         var n = p.firstChild;
6359         while(n){
6360             if(n.nodeType == 1){
6361                if(++i == index){
6362                    return n;
6363                }
6364             }
6365             n = n.nextSibling;
6366         }
6367         return null;
6368     };
6369
6370     function next(n){
6371         while((n = n.nextSibling) && n.nodeType != 1);
6372         return n;
6373     };
6374
6375     function prev(n){
6376         while((n = n.previousSibling) && n.nodeType != 1);
6377         return n;
6378     };
6379
6380     function children(d){
6381         var n = d.firstChild, ni = -1;
6382             while(n){
6383                 var nx = n.nextSibling;
6384                 if(n.nodeType == 3 && !nonSpace.test(n.nodeValue)){
6385                     d.removeChild(n);
6386                 }else{
6387                     n.nodeIndex = ++ni;
6388                 }
6389                 n = nx;
6390             }
6391             return this;
6392         };
6393
6394     function byClassName(c, a, v){
6395         if(!v){
6396             return c;
6397         }
6398         var r = [], ri = -1, cn;
6399         for(var i = 0, ci; ci = c[i]; i++){
6400             
6401             
6402             if((' '+
6403                 ( (ci instanceof SVGElement) ? ci.className.baseVal : ci.className)
6404                  +' ').indexOf(v) != -1){
6405                 r[++ri] = ci;
6406             }
6407         }
6408         return r;
6409     };
6410
6411     function attrValue(n, attr){
6412         if(!n.tagName && typeof n.length != "undefined"){
6413             n = n[0];
6414         }
6415         if(!n){
6416             return null;
6417         }
6418         if(attr == "for"){
6419             return n.htmlFor;
6420         }
6421         if(attr == "class" || attr == "className"){
6422             return (n instanceof SVGElement) ? n.className.baseVal : n.className;
6423         }
6424         return n.getAttribute(attr) || n[attr];
6425
6426     };
6427
6428     function getNodes(ns, mode, tagName){
6429         var result = [], ri = -1, cs;
6430         if(!ns){
6431             return result;
6432         }
6433         tagName = tagName || "*";
6434         if(typeof ns.getElementsByTagName != "undefined"){
6435             ns = [ns];
6436         }
6437         if(!mode){
6438             for(var i = 0, ni; ni = ns[i]; i++){
6439                 cs = ni.getElementsByTagName(tagName);
6440                 for(var j = 0, ci; ci = cs[j]; j++){
6441                     result[++ri] = ci;
6442                 }
6443             }
6444         }else if(mode == "/" || mode == ">"){
6445             var utag = tagName.toUpperCase();
6446             for(var i = 0, ni, cn; ni = ns[i]; i++){
6447                 cn = ni.children || ni.childNodes;
6448                 for(var j = 0, cj; cj = cn[j]; j++){
6449                     if(cj.nodeName == utag || cj.nodeName == tagName  || tagName == '*'){
6450                         result[++ri] = cj;
6451                     }
6452                 }
6453             }
6454         }else if(mode == "+"){
6455             var utag = tagName.toUpperCase();
6456             for(var i = 0, n; n = ns[i]; i++){
6457                 while((n = n.nextSibling) && n.nodeType != 1);
6458                 if(n && (n.nodeName == utag || n.nodeName == tagName || tagName == '*')){
6459                     result[++ri] = n;
6460                 }
6461             }
6462         }else if(mode == "~"){
6463             for(var i = 0, n; n = ns[i]; i++){
6464                 while((n = n.nextSibling) && (n.nodeType != 1 || (tagName == '*' || n.tagName.toLowerCase()!=tagName)));
6465                 if(n){
6466                     result[++ri] = n;
6467                 }
6468             }
6469         }
6470         return result;
6471     };
6472
6473     function concat(a, b){
6474         if(b.slice){
6475             return a.concat(b);
6476         }
6477         for(var i = 0, l = b.length; i < l; i++){
6478             a[a.length] = b[i];
6479         }
6480         return a;
6481     }
6482
6483     function byTag(cs, tagName){
6484         if(cs.tagName || cs == document){
6485             cs = [cs];
6486         }
6487         if(!tagName){
6488             return cs;
6489         }
6490         var r = [], ri = -1;
6491         tagName = tagName.toLowerCase();
6492         for(var i = 0, ci; ci = cs[i]; i++){
6493             if(ci.nodeType == 1 && ci.tagName.toLowerCase()==tagName){
6494                 r[++ri] = ci;
6495             }
6496         }
6497         return r;
6498     };
6499
6500     function byId(cs, attr, id){
6501         if(cs.tagName || cs == document){
6502             cs = [cs];
6503         }
6504         if(!id){
6505             return cs;
6506         }
6507         var r = [], ri = -1;
6508         for(var i = 0,ci; ci = cs[i]; i++){
6509             if(ci && ci.id == id){
6510                 r[++ri] = ci;
6511                 return r;
6512             }
6513         }
6514         return r;
6515     };
6516
6517     function byAttribute(cs, attr, value, op, custom){
6518         var r = [], ri = -1, st = custom=="{";
6519         var f = Roo.DomQuery.operators[op];
6520         for(var i = 0, ci; ci = cs[i]; i++){
6521             var a;
6522             if(st){
6523                 a = Roo.DomQuery.getStyle(ci, attr);
6524             }
6525             else if(attr == "class" || attr == "className"){
6526                 a = (ci instanceof SVGElement) ? ci.className.baseVal : ci.className;
6527             }else if(attr == "for"){
6528                 a = ci.htmlFor;
6529             }else if(attr == "href"){
6530                 a = ci.getAttribute("href", 2);
6531             }else{
6532                 a = ci.getAttribute(attr);
6533             }
6534             if((f && f(a, value)) || (!f && a)){
6535                 r[++ri] = ci;
6536             }
6537         }
6538         return r;
6539     };
6540
6541     function byPseudo(cs, name, value){
6542         return Roo.DomQuery.pseudos[name](cs, value);
6543     };
6544
6545     // This is for IE MSXML which does not support expandos.
6546     // IE runs the same speed using setAttribute, however FF slows way down
6547     // and Safari completely fails so they need to continue to use expandos.
6548     var isIE = window.ActiveXObject ? true : false;
6549
6550     // this eval is stop the compressor from
6551     // renaming the variable to something shorter
6552     
6553     /** eval:var:batch */
6554     var batch = 30803; 
6555
6556     var key = 30803;
6557
6558     function nodupIEXml(cs){
6559         var d = ++key;
6560         cs[0].setAttribute("_nodup", d);
6561         var r = [cs[0]];
6562         for(var i = 1, len = cs.length; i < len; i++){
6563             var c = cs[i];
6564             if(!c.getAttribute("_nodup") != d){
6565                 c.setAttribute("_nodup", d);
6566                 r[r.length] = c;
6567             }
6568         }
6569         for(var i = 0, len = cs.length; i < len; i++){
6570             cs[i].removeAttribute("_nodup");
6571         }
6572         return r;
6573     }
6574
6575     function nodup(cs){
6576         if(!cs){
6577             return [];
6578         }
6579         var len = cs.length, c, i, r = cs, cj, ri = -1;
6580         if(!len || typeof cs.nodeType != "undefined" || len == 1){
6581             return cs;
6582         }
6583         if(isIE && typeof cs[0].selectSingleNode != "undefined"){
6584             return nodupIEXml(cs);
6585         }
6586         var d = ++key;
6587         cs[0]._nodup = d;
6588         for(i = 1; c = cs[i]; i++){
6589             if(c._nodup != d){
6590                 c._nodup = d;
6591             }else{
6592                 r = [];
6593                 for(var j = 0; j < i; j++){
6594                     r[++ri] = cs[j];
6595                 }
6596                 for(j = i+1; cj = cs[j]; j++){
6597                     if(cj._nodup != d){
6598                         cj._nodup = d;
6599                         r[++ri] = cj;
6600                     }
6601                 }
6602                 return r;
6603             }
6604         }
6605         return r;
6606     }
6607
6608     function quickDiffIEXml(c1, c2){
6609         var d = ++key;
6610         for(var i = 0, len = c1.length; i < len; i++){
6611             c1[i].setAttribute("_qdiff", d);
6612         }
6613         var r = [];
6614         for(var i = 0, len = c2.length; i < len; i++){
6615             if(c2[i].getAttribute("_qdiff") != d){
6616                 r[r.length] = c2[i];
6617             }
6618         }
6619         for(var i = 0, len = c1.length; i < len; i++){
6620            c1[i].removeAttribute("_qdiff");
6621         }
6622         return r;
6623     }
6624
6625     function quickDiff(c1, c2){
6626         var len1 = c1.length;
6627         if(!len1){
6628             return c2;
6629         }
6630         if(isIE && c1[0].selectSingleNode){
6631             return quickDiffIEXml(c1, c2);
6632         }
6633         var d = ++key;
6634         for(var i = 0; i < len1; i++){
6635             c1[i]._qdiff = d;
6636         }
6637         var r = [];
6638         for(var i = 0, len = c2.length; i < len; i++){
6639             if(c2[i]._qdiff != d){
6640                 r[r.length] = c2[i];
6641             }
6642         }
6643         return r;
6644     }
6645
6646     function quickId(ns, mode, root, id){
6647         if(ns == root){
6648            var d = root.ownerDocument || root;
6649            return d.getElementById(id);
6650         }
6651         ns = getNodes(ns, mode, "*");
6652         return byId(ns, null, id);
6653     }
6654
6655     return {
6656         getStyle : function(el, name){
6657             return Roo.fly(el).getStyle(name);
6658         },
6659         /**
6660          * Compiles a selector/xpath query into a reusable function. The returned function
6661          * takes one parameter "root" (optional), which is the context node from where the query should start.
6662          * @param {String} selector The selector/xpath query
6663          * @param {String} type (optional) Either "select" (the default) or "simple" for a simple selector match
6664          * @return {Function}
6665          */
6666         compile : function(path, type){
6667             type = type || "select";
6668             
6669             var fn = ["var f = function(root){\n var mode; ++batch; var n = root || document;\n"];
6670             var q = path, mode, lq;
6671             var tk = Roo.DomQuery.matchers;
6672             var tklen = tk.length;
6673             var mm;
6674
6675             // accept leading mode switch
6676             var lmode = q.match(modeRe);
6677             if(lmode && lmode[1]){
6678                 fn[fn.length] = 'mode="'+lmode[1].replace(trimRe, "")+'";';
6679                 q = q.replace(lmode[1], "");
6680             }
6681             // strip leading slashes
6682             while(path.substr(0, 1)=="/"){
6683                 path = path.substr(1);
6684             }
6685
6686             while(q && lq != q){
6687                 lq = q;
6688                 var tm = q.match(tagTokenRe);
6689                 if(type == "select"){
6690                     if(tm){
6691                         if(tm[1] == "#"){
6692                             fn[fn.length] = 'n = quickId(n, mode, root, "'+tm[2]+'");';
6693                         }else{
6694                             fn[fn.length] = 'n = getNodes(n, mode, "'+tm[2]+'");';
6695                         }
6696                         q = q.replace(tm[0], "");
6697                     }else if(q.substr(0, 1) != '@'){
6698                         fn[fn.length] = 'n = getNodes(n, mode, "*");';
6699                     }
6700                 }else{
6701                     if(tm){
6702                         if(tm[1] == "#"){
6703                             fn[fn.length] = 'n = byId(n, null, "'+tm[2]+'");';
6704                         }else{
6705                             fn[fn.length] = 'n = byTag(n, "'+tm[2]+'");';
6706                         }
6707                         q = q.replace(tm[0], "");
6708                     }
6709                 }
6710                 while(!(mm = q.match(modeRe))){
6711                     var matched = false;
6712                     for(var j = 0; j < tklen; j++){
6713                         var t = tk[j];
6714                         var m = q.match(t.re);
6715                         if(m){
6716                             fn[fn.length] = t.select.replace(tplRe, function(x, i){
6717                                                     return m[i];
6718                                                 });
6719                             q = q.replace(m[0], "");
6720                             matched = true;
6721                             break;
6722                         }
6723                     }
6724                     // prevent infinite loop on bad selector
6725                     if(!matched){
6726                         throw 'Error parsing selector, parsing failed at "' + q + '"';
6727                     }
6728                 }
6729                 if(mm[1]){
6730                     fn[fn.length] = 'mode="'+mm[1].replace(trimRe, "")+'";';
6731                     q = q.replace(mm[1], "");
6732                 }
6733             }
6734             fn[fn.length] = "return nodup(n);\n}";
6735             
6736              /** 
6737               * list of variables that need from compression as they are used by eval.
6738              *  eval:var:batch 
6739              *  eval:var:nodup
6740              *  eval:var:byTag
6741              *  eval:var:ById
6742              *  eval:var:getNodes
6743              *  eval:var:quickId
6744              *  eval:var:mode
6745              *  eval:var:root
6746              *  eval:var:n
6747              *  eval:var:byClassName
6748              *  eval:var:byPseudo
6749              *  eval:var:byAttribute
6750              *  eval:var:attrValue
6751              * 
6752              **/ 
6753             eval(fn.join(""));
6754             return f;
6755         },
6756
6757         /**
6758          * Selects a group of elements.
6759          * @param {String} selector The selector/xpath query (can be a comma separated list of selectors)
6760          * @param {Node} root (optional) The start of the query (defaults to document).
6761          * @return {Array}
6762          */
6763         select : function(path, root, type){
6764             if(!root || root == document){
6765                 root = document;
6766             }
6767             if(typeof root == "string"){
6768                 root = document.getElementById(root);
6769             }
6770             var paths = path.split(",");
6771             var results = [];
6772             for(var i = 0, len = paths.length; i < len; i++){
6773                 var p = paths[i].replace(trimRe, "");
6774                 if(!cache[p]){
6775                     cache[p] = Roo.DomQuery.compile(p);
6776                     if(!cache[p]){
6777                         throw p + " is not a valid selector";
6778                     }
6779                 }
6780                 var result = cache[p](root);
6781                 if(result && result != document){
6782                     results = results.concat(result);
6783                 }
6784             }
6785             if(paths.length > 1){
6786                 return nodup(results);
6787             }
6788             return results;
6789         },
6790
6791         /**
6792          * Selects a single element.
6793          * @param {String} selector The selector/xpath query
6794          * @param {Node} root (optional) The start of the query (defaults to document).
6795          * @return {Element}
6796          */
6797         selectNode : function(path, root){
6798             return Roo.DomQuery.select(path, root)[0];
6799         },
6800
6801         /**
6802          * Selects the value of a node, optionally replacing null with the defaultValue.
6803          * @param {String} selector The selector/xpath query
6804          * @param {Node} root (optional) The start of the query (defaults to document).
6805          * @param {String} defaultValue
6806          */
6807         selectValue : function(path, root, defaultValue){
6808             path = path.replace(trimRe, "");
6809             if(!valueCache[path]){
6810                 valueCache[path] = Roo.DomQuery.compile(path, "select");
6811             }
6812             var n = valueCache[path](root);
6813             n = n[0] ? n[0] : n;
6814             var v = (n && n.firstChild ? n.firstChild.nodeValue : null);
6815             return ((v === null||v === undefined||v==='') ? defaultValue : v);
6816         },
6817
6818         /**
6819          * Selects the value of a node, parsing integers and floats.
6820          * @param {String} selector The selector/xpath query
6821          * @param {Node} root (optional) The start of the query (defaults to document).
6822          * @param {Number} defaultValue
6823          * @return {Number}
6824          */
6825         selectNumber : function(path, root, defaultValue){
6826             var v = Roo.DomQuery.selectValue(path, root, defaultValue || 0);
6827             return parseFloat(v);
6828         },
6829
6830         /**
6831          * Returns true if the passed element(s) match the passed simple selector (e.g. div.some-class or span:first-child)
6832          * @param {String/HTMLElement/Array} el An element id, element or array of elements
6833          * @param {String} selector The simple selector to test
6834          * @return {Boolean}
6835          */
6836         is : function(el, ss){
6837             if(typeof el == "string"){
6838                 el = document.getElementById(el);
6839             }
6840             var isArray = (el instanceof Array);
6841             var result = Roo.DomQuery.filter(isArray ? el : [el], ss);
6842             return isArray ? (result.length == el.length) : (result.length > 0);
6843         },
6844
6845         /**
6846          * Filters an array of elements to only include matches of a simple selector (e.g. div.some-class or span:first-child)
6847          * @param {Array} el An array of elements to filter
6848          * @param {String} selector The simple selector to test
6849          * @param {Boolean} nonMatches If true, it returns the elements that DON'T match
6850          * the selector instead of the ones that match
6851          * @return {Array}
6852          */
6853         filter : function(els, ss, nonMatches){
6854             ss = ss.replace(trimRe, "");
6855             if(!simpleCache[ss]){
6856                 simpleCache[ss] = Roo.DomQuery.compile(ss, "simple");
6857             }
6858             var result = simpleCache[ss](els);
6859             return nonMatches ? quickDiff(result, els) : result;
6860         },
6861
6862         /**
6863          * Collection of matching regular expressions and code snippets.
6864          */
6865         matchers : [{
6866                 re: /^\.([\w-]+)/,
6867                 select: 'n = byClassName(n, null, " {1} ");'
6868             }, {
6869                 re: /^\:([\w-]+)(?:\(((?:[^\s>\/]*|.*?))\))?/,
6870                 select: 'n = byPseudo(n, "{1}", "{2}");'
6871             },{
6872                 re: /^(?:([\[\{])(?:@)?([\w-]+)\s?(?:(=|.=)\s?['"]?(.*?)["']?)?[\]\}])/,
6873                 select: 'n = byAttribute(n, "{2}", "{4}", "{3}", "{1}");'
6874             }, {
6875                 re: /^#([\w-]+)/,
6876                 select: 'n = byId(n, null, "{1}");'
6877             },{
6878                 re: /^@([\w-]+)/,
6879                 select: 'return {firstChild:{nodeValue:attrValue(n, "{1}")}};'
6880             }
6881         ],
6882
6883         /**
6884          * Collection of operator comparison functions. The default operators are =, !=, ^=, $=, *=, %=, |= and ~=.
6885          * 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, &gt; &lt;.
6886          */
6887         operators : {
6888             "=" : function(a, v){
6889                 return a == v;
6890             },
6891             "!=" : function(a, v){
6892                 return a != v;
6893             },
6894             "^=" : function(a, v){
6895                 return a && a.substr(0, v.length) == v;
6896             },
6897             "$=" : function(a, v){
6898                 return a && a.substr(a.length-v.length) == v;
6899             },
6900             "*=" : function(a, v){
6901                 return a && a.indexOf(v) !== -1;
6902             },
6903             "%=" : function(a, v){
6904                 return (a % v) == 0;
6905             },
6906             "|=" : function(a, v){
6907                 return a && (a == v || a.substr(0, v.length+1) == v+'-');
6908             },
6909             "~=" : function(a, v){
6910                 return a && (' '+a+' ').indexOf(' '+v+' ') != -1;
6911             }
6912         },
6913
6914         /**
6915          * Collection of "pseudo class" processors. Each processor is passed the current nodeset (array)
6916          * and the argument (if any) supplied in the selector.
6917          */
6918         pseudos : {
6919             "first-child" : function(c){
6920                 var r = [], ri = -1, n;
6921                 for(var i = 0, ci; ci = n = c[i]; i++){
6922                     while((n = n.previousSibling) && n.nodeType != 1);
6923                     if(!n){
6924                         r[++ri] = ci;
6925                     }
6926                 }
6927                 return r;
6928             },
6929
6930             "last-child" : function(c){
6931                 var r = [], ri = -1, n;
6932                 for(var i = 0, ci; ci = n = c[i]; i++){
6933                     while((n = n.nextSibling) && n.nodeType != 1);
6934                     if(!n){
6935                         r[++ri] = ci;
6936                     }
6937                 }
6938                 return r;
6939             },
6940
6941             "nth-child" : function(c, a) {
6942                 var r = [], ri = -1;
6943                 var m = nthRe.exec(a == "even" && "2n" || a == "odd" && "2n+1" || !nthRe2.test(a) && "n+" + a || a);
6944                 var f = (m[1] || 1) - 0, l = m[2] - 0;
6945                 for(var i = 0, n; n = c[i]; i++){
6946                     var pn = n.parentNode;
6947                     if (batch != pn._batch) {
6948                         var j = 0;
6949                         for(var cn = pn.firstChild; cn; cn = cn.nextSibling){
6950                             if(cn.nodeType == 1){
6951                                cn.nodeIndex = ++j;
6952                             }
6953                         }
6954                         pn._batch = batch;
6955                     }
6956                     if (f == 1) {
6957                         if (l == 0 || n.nodeIndex == l){
6958                             r[++ri] = n;
6959                         }
6960                     } else if ((n.nodeIndex + l) % f == 0){
6961                         r[++ri] = n;
6962                     }
6963                 }
6964
6965                 return r;
6966             },
6967
6968             "only-child" : function(c){
6969                 var r = [], ri = -1;;
6970                 for(var i = 0, ci; ci = c[i]; i++){
6971                     if(!prev(ci) && !next(ci)){
6972                         r[++ri] = ci;
6973                     }
6974                 }
6975                 return r;
6976             },
6977
6978             "empty" : function(c){
6979                 var r = [], ri = -1;
6980                 for(var i = 0, ci; ci = c[i]; i++){
6981                     var cns = ci.childNodes, j = 0, cn, empty = true;
6982                     while(cn = cns[j]){
6983                         ++j;
6984                         if(cn.nodeType == 1 || cn.nodeType == 3){
6985                             empty = false;
6986                             break;
6987                         }
6988                     }
6989                     if(empty){
6990                         r[++ri] = ci;
6991                     }
6992                 }
6993                 return r;
6994             },
6995
6996             "contains" : function(c, v){
6997                 var r = [], ri = -1;
6998                 for(var i = 0, ci; ci = c[i]; i++){
6999                     if((ci.textContent||ci.innerText||'').indexOf(v) != -1){
7000                         r[++ri] = ci;
7001                     }
7002                 }
7003                 return r;
7004             },
7005
7006             "nodeValue" : function(c, v){
7007                 var r = [], ri = -1;
7008                 for(var i = 0, ci; ci = c[i]; i++){
7009                     if(ci.firstChild && ci.firstChild.nodeValue == v){
7010                         r[++ri] = ci;
7011                     }
7012                 }
7013                 return r;
7014             },
7015
7016             "checked" : function(c){
7017                 var r = [], ri = -1;
7018                 for(var i = 0, ci; ci = c[i]; i++){
7019                     if(ci.checked == true){
7020                         r[++ri] = ci;
7021                     }
7022                 }
7023                 return r;
7024             },
7025
7026             "not" : function(c, ss){
7027                 return Roo.DomQuery.filter(c, ss, true);
7028             },
7029
7030             "odd" : function(c){
7031                 return this["nth-child"](c, "odd");
7032             },
7033
7034             "even" : function(c){
7035                 return this["nth-child"](c, "even");
7036             },
7037
7038             "nth" : function(c, a){
7039                 return c[a-1] || [];
7040             },
7041
7042             "first" : function(c){
7043                 return c[0] || [];
7044             },
7045
7046             "last" : function(c){
7047                 return c[c.length-1] || [];
7048             },
7049
7050             "has" : function(c, ss){
7051                 var s = Roo.DomQuery.select;
7052                 var r = [], ri = -1;
7053                 for(var i = 0, ci; ci = c[i]; i++){
7054                     if(s(ss, ci).length > 0){
7055                         r[++ri] = ci;
7056                     }
7057                 }
7058                 return r;
7059             },
7060
7061             "next" : function(c, ss){
7062                 var is = Roo.DomQuery.is;
7063                 var r = [], ri = -1;
7064                 for(var i = 0, ci; ci = c[i]; i++){
7065                     var n = next(ci);
7066                     if(n && is(n, ss)){
7067                         r[++ri] = ci;
7068                     }
7069                 }
7070                 return r;
7071             },
7072
7073             "prev" : function(c, ss){
7074                 var is = Roo.DomQuery.is;
7075                 var r = [], ri = -1;
7076                 for(var i = 0, ci; ci = c[i]; i++){
7077                     var n = prev(ci);
7078                     if(n && is(n, ss)){
7079                         r[++ri] = ci;
7080                     }
7081                 }
7082                 return r;
7083             }
7084         }
7085     };
7086 }();
7087
7088 /**
7089  * Selects an array of DOM nodes by CSS/XPath selector. Shorthand of {@link Roo.DomQuery#select}
7090  * @param {String} path The selector/xpath query
7091  * @param {Node} root (optional) The start of the query (defaults to document).
7092  * @return {Array}
7093  * @member Roo
7094  * @method query
7095  */
7096 Roo.query = Roo.DomQuery.select;
7097 /*
7098  * Based on:
7099  * Ext JS Library 1.1.1
7100  * Copyright(c) 2006-2007, Ext JS, LLC.
7101  *
7102  * Originally Released Under LGPL - original licence link has changed is not relivant.
7103  *
7104  * Fork - LGPL
7105  * <script type="text/javascript">
7106  */
7107
7108 /**
7109  * @class Roo.util.Observable
7110  * Base class that provides a common interface for publishing events. Subclasses are expected to
7111  * to have a property "events" with all the events defined.<br>
7112  * For example:
7113  * <pre><code>
7114  Employee = function(name){
7115     this.name = name;
7116     this.addEvents({
7117         "fired" : true,
7118         "quit" : true
7119     });
7120  }
7121  Roo.extend(Employee, Roo.util.Observable);
7122 </code></pre>
7123  * @param {Object} config properties to use (incuding events / listeners)
7124  */
7125
7126 Roo.util.Observable = function(cfg){
7127     
7128     cfg = cfg|| {};
7129     this.addEvents(cfg.events || {});
7130     if (cfg.events) {
7131         delete cfg.events; // make sure
7132     }
7133      
7134     Roo.apply(this, cfg);
7135     
7136     if(this.listeners){
7137         this.on(this.listeners);
7138         delete this.listeners;
7139     }
7140 };
7141 Roo.util.Observable.prototype = {
7142     /** 
7143  * @cfg {Object} listeners  list of events and functions to call for this object, 
7144  * For example :
7145  * <pre><code>
7146     listeners :  { 
7147        'click' : function(e) {
7148            ..... 
7149         } ,
7150         .... 
7151     } 
7152   </code></pre>
7153  */
7154     
7155     
7156     /**
7157      * Fires the specified event with the passed parameters (minus the event name).
7158      * @param {String} eventName
7159      * @param {Object...} args Variable number of parameters are passed to handlers
7160      * @return {Boolean} returns false if any of the handlers return false otherwise it returns true
7161      */
7162     fireEvent : function(){
7163         var ce = this.events[arguments[0].toLowerCase()];
7164         if(typeof ce == "object"){
7165             return ce.fire.apply(ce, Array.prototype.slice.call(arguments, 1));
7166         }else{
7167             return true;
7168         }
7169     },
7170
7171     // private
7172     filterOptRe : /^(?:scope|delay|buffer|single)$/,
7173
7174     /**
7175      * Appends an event handler to this component
7176      * @param {String}   eventName The type of event to listen for
7177      * @param {Function} handler The method the event invokes
7178      * @param {Object}   scope (optional) The scope in which to execute the handler
7179      * function. The handler function's "this" context.
7180      * @param {Object}   options (optional) An object containing handler configuration
7181      * properties. This may contain any of the following properties:<ul>
7182      * <li>scope {Object} The scope in which to execute the handler function. The handler function's "this" context.</li>
7183      * <li>delay {Number} The number of milliseconds to delay the invocation of the handler after te event fires.</li>
7184      * <li>single {Boolean} True to add a handler to handle just the next firing of the event, and then remove itself.</li>
7185      * <li>buffer {Number} Causes the handler to be scheduled to run in an {@link Roo.util.DelayedTask} delayed
7186      * by the specified number of milliseconds. If the event fires again within that time, the original
7187      * handler is <em>not</em> invoked, but the new handler is scheduled in its place.</li>
7188      * </ul><br>
7189      * <p>
7190      * <b>Combining Options</b><br>
7191      * Using the options argument, it is possible to combine different types of listeners:<br>
7192      * <br>
7193      * A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)
7194                 <pre><code>
7195                 el.on('click', this.onClick, this, {
7196                         single: true,
7197                 delay: 100,
7198                 forumId: 4
7199                 });
7200                 </code></pre>
7201      * <p>
7202      * <b>Attaching multiple handlers in 1 call</b><br>
7203      * The method also allows for a single argument to be passed which is a config object containing properties
7204      * which specify multiple handlers.
7205      * <pre><code>
7206                 el.on({
7207                         'click': {
7208                         fn: this.onClick,
7209                         scope: this,
7210                         delay: 100
7211                 }, 
7212                 'mouseover': {
7213                         fn: this.onMouseOver,
7214                         scope: this
7215                 },
7216                 'mouseout': {
7217                         fn: this.onMouseOut,
7218                         scope: this
7219                 }
7220                 });
7221                 </code></pre>
7222      * <p>
7223      * Or a shorthand syntax which passes the same scope object to all handlers:
7224         <pre><code>
7225                 el.on({
7226                         'click': this.onClick,
7227                 'mouseover': this.onMouseOver,
7228                 'mouseout': this.onMouseOut,
7229                 scope: this
7230                 });
7231                 </code></pre>
7232      */
7233     addListener : function(eventName, fn, scope, o){
7234         if(typeof eventName == "object"){
7235             o = eventName;
7236             for(var e in o){
7237                 if(this.filterOptRe.test(e)){
7238                     continue;
7239                 }
7240                 if(typeof o[e] == "function"){
7241                     // shared options
7242                     this.addListener(e, o[e], o.scope,  o);
7243                 }else{
7244                     // individual options
7245                     this.addListener(e, o[e].fn, o[e].scope, o[e]);
7246                 }
7247             }
7248             return;
7249         }
7250         o = (!o || typeof o == "boolean") ? {} : o;
7251         eventName = eventName.toLowerCase();
7252         var ce = this.events[eventName] || true;
7253         if(typeof ce == "boolean"){
7254             ce = new Roo.util.Event(this, eventName);
7255             this.events[eventName] = ce;
7256         }
7257         ce.addListener(fn, scope, o);
7258     },
7259
7260     /**
7261      * Removes a listener
7262      * @param {String}   eventName     The type of event to listen for
7263      * @param {Function} handler        The handler to remove
7264      * @param {Object}   scope  (optional) The scope (this object) for the handler
7265      */
7266     removeListener : function(eventName, fn, scope){
7267         var ce = this.events[eventName.toLowerCase()];
7268         if(typeof ce == "object"){
7269             ce.removeListener(fn, scope);
7270         }
7271     },
7272
7273     /**
7274      * Removes all listeners for this object
7275      */
7276     purgeListeners : function(){
7277         for(var evt in this.events){
7278             if(typeof this.events[evt] == "object"){
7279                  this.events[evt].clearListeners();
7280             }
7281         }
7282     },
7283
7284     relayEvents : function(o, events){
7285         var createHandler = function(ename){
7286             return function(){
7287                  
7288                 return this.fireEvent.apply(this, Roo.combine(ename, Array.prototype.slice.call(arguments, 0)));
7289             };
7290         };
7291         for(var i = 0, len = events.length; i < len; i++){
7292             var ename = events[i];
7293             if(!this.events[ename]){
7294                 this.events[ename] = true;
7295             };
7296             o.on(ename, createHandler(ename), this);
7297         }
7298     },
7299
7300     /**
7301      * Used to define events on this Observable
7302      * @param {Object} object The object with the events defined
7303      */
7304     addEvents : function(o){
7305         if(!this.events){
7306             this.events = {};
7307         }
7308         Roo.applyIf(this.events, o);
7309     },
7310
7311     /**
7312      * Checks to see if this object has any listeners for a specified event
7313      * @param {String} eventName The name of the event to check for
7314      * @return {Boolean} True if the event is being listened for, else false
7315      */
7316     hasListener : function(eventName){
7317         var e = this.events[eventName];
7318         return typeof e == "object" && e.listeners.length > 0;
7319     }
7320 };
7321 /**
7322  * Appends an event handler to this element (shorthand for addListener)
7323  * @param {String}   eventName     The type of event to listen for
7324  * @param {Function} handler        The method the event invokes
7325  * @param {Object}   scope (optional) The scope in which to execute the handler
7326  * function. The handler function's "this" context.
7327  * @param {Object}   options  (optional)
7328  * @method
7329  */
7330 Roo.util.Observable.prototype.on = Roo.util.Observable.prototype.addListener;
7331 /**
7332  * Removes a listener (shorthand for removeListener)
7333  * @param {String}   eventName     The type of event to listen for
7334  * @param {Function} handler        The handler to remove
7335  * @param {Object}   scope  (optional) The scope (this object) for the handler
7336  * @method
7337  */
7338 Roo.util.Observable.prototype.un = Roo.util.Observable.prototype.removeListener;
7339
7340 /**
7341  * Starts capture on the specified Observable. All events will be passed
7342  * to the supplied function with the event name + standard signature of the event
7343  * <b>before</b> the event is fired. If the supplied function returns false,
7344  * the event will not fire.
7345  * @param {Observable} o The Observable to capture
7346  * @param {Function} fn The function to call
7347  * @param {Object} scope (optional) The scope (this object) for the fn
7348  * @static
7349  */
7350 Roo.util.Observable.capture = function(o, fn, scope){
7351     o.fireEvent = o.fireEvent.createInterceptor(fn, scope);
7352 };
7353
7354 /**
7355  * Removes <b>all</b> added captures from the Observable.
7356  * @param {Observable} o The Observable to release
7357  * @static
7358  */
7359 Roo.util.Observable.releaseCapture = function(o){
7360     o.fireEvent = Roo.util.Observable.prototype.fireEvent;
7361 };
7362
7363 (function(){
7364
7365     var createBuffered = function(h, o, scope){
7366         var task = new Roo.util.DelayedTask();
7367         return function(){
7368             task.delay(o.buffer, h, scope, Array.prototype.slice.call(arguments, 0));
7369         };
7370     };
7371
7372     var createSingle = function(h, e, fn, scope){
7373         return function(){
7374             e.removeListener(fn, scope);
7375             return h.apply(scope, arguments);
7376         };
7377     };
7378
7379     var createDelayed = function(h, o, scope){
7380         return function(){
7381             var args = Array.prototype.slice.call(arguments, 0);
7382             setTimeout(function(){
7383                 h.apply(scope, args);
7384             }, o.delay || 10);
7385         };
7386     };
7387
7388     Roo.util.Event = function(obj, name){
7389         this.name = name;
7390         this.obj = obj;
7391         this.listeners = [];
7392     };
7393
7394     Roo.util.Event.prototype = {
7395         addListener : function(fn, scope, options){
7396             var o = options || {};
7397             scope = scope || this.obj;
7398             if(!this.isListening(fn, scope)){
7399                 var l = {fn: fn, scope: scope, options: o};
7400                 var h = fn;
7401                 if(o.delay){
7402                     h = createDelayed(h, o, scope);
7403                 }
7404                 if(o.single){
7405                     h = createSingle(h, this, fn, scope);
7406                 }
7407                 if(o.buffer){
7408                     h = createBuffered(h, o, scope);
7409                 }
7410                 l.fireFn = h;
7411                 if(!this.firing){ // if we are currently firing this event, don't disturb the listener loop
7412                     this.listeners.push(l);
7413                 }else{
7414                     this.listeners = this.listeners.slice(0);
7415                     this.listeners.push(l);
7416                 }
7417             }
7418         },
7419
7420         findListener : function(fn, scope){
7421             scope = scope || this.obj;
7422             var ls = this.listeners;
7423             for(var i = 0, len = ls.length; i < len; i++){
7424                 var l = ls[i];
7425                 if(l.fn == fn && l.scope == scope){
7426                     return i;
7427                 }
7428             }
7429             return -1;
7430         },
7431
7432         isListening : function(fn, scope){
7433             return this.findListener(fn, scope) != -1;
7434         },
7435
7436         removeListener : function(fn, scope){
7437             var index;
7438             if((index = this.findListener(fn, scope)) != -1){
7439                 if(!this.firing){
7440                     this.listeners.splice(index, 1);
7441                 }else{
7442                     this.listeners = this.listeners.slice(0);
7443                     this.listeners.splice(index, 1);
7444                 }
7445                 return true;
7446             }
7447             return false;
7448         },
7449
7450         clearListeners : function(){
7451             this.listeners = [];
7452         },
7453
7454         fire : function(){
7455             var ls = this.listeners, scope, len = ls.length;
7456             if(len > 0){
7457                 this.firing = true;
7458                 var args = Array.prototype.slice.call(arguments, 0);                
7459                 for(var i = 0; i < len; i++){
7460                     var l = ls[i];
7461                     if(l.fireFn.apply(l.scope||this.obj||window, args) === false){
7462                         this.firing = false;
7463                         return false;
7464                     }
7465                 }
7466                 this.firing = false;
7467             }
7468             return true;
7469         }
7470     };
7471 })();/*
7472  * RooJS Library 
7473  * Copyright(c) 2007-2017, Roo J Solutions Ltd
7474  *
7475  * Licence LGPL 
7476  *
7477  */
7478  
7479 /**
7480  * @class Roo.Document
7481  * @extends Roo.util.Observable
7482  * This is a convience class to wrap up the main document loading code.. , rather than adding Roo.onReady(......)
7483  * 
7484  * @param {Object} config the methods and properties of the 'base' class for the application.
7485  * 
7486  *  Generic Page handler - implement this to start your app..
7487  * 
7488  * eg.
7489  *  MyProject = new Roo.Document({
7490         events : {
7491             'load' : true // your events..
7492         },
7493         listeners : {
7494             'ready' : function() {
7495                 // fired on Roo.onReady()
7496             }
7497         }
7498  * 
7499  */
7500 Roo.Document = function(cfg) {
7501      
7502     this.addEvents({ 
7503         'ready' : true
7504     });
7505     Roo.util.Observable.call(this,cfg);
7506     
7507     var _this = this;
7508     
7509     Roo.onReady(function() {
7510         _this.fireEvent('ready');
7511     },null,false);
7512     
7513     
7514 }
7515
7516 Roo.extend(Roo.Document, Roo.util.Observable, {});/*
7517  * Based on:
7518  * Ext JS Library 1.1.1
7519  * Copyright(c) 2006-2007, Ext JS, LLC.
7520  *
7521  * Originally Released Under LGPL - original licence link has changed is not relivant.
7522  *
7523  * Fork - LGPL
7524  * <script type="text/javascript">
7525  */
7526
7527 /**
7528  * @class Roo.EventManager
7529  * Registers event handlers that want to receive a normalized EventObject instead of the standard browser event and provides 
7530  * several useful events directly.
7531  * See {@link Roo.EventObject} for more details on normalized event objects.
7532  * @static
7533  */
7534 Roo.EventManager = function(){
7535     var docReadyEvent, docReadyProcId, docReadyState = false;
7536     var resizeEvent, resizeTask, textEvent, textSize;
7537     var E = Roo.lib.Event;
7538     var D = Roo.lib.Dom;
7539
7540     
7541     
7542
7543     var fireDocReady = function(){
7544         if(!docReadyState){
7545             docReadyState = true;
7546             Roo.isReady = true;
7547             if(docReadyProcId){
7548                 clearInterval(docReadyProcId);
7549             }
7550             if(Roo.isGecko || Roo.isOpera) {
7551                 document.removeEventListener("DOMContentLoaded", fireDocReady, false);
7552             }
7553             if(Roo.isIE){
7554                 var defer = document.getElementById("ie-deferred-loader");
7555                 if(defer){
7556                     defer.onreadystatechange = null;
7557                     defer.parentNode.removeChild(defer);
7558                 }
7559             }
7560             if(docReadyEvent){
7561                 docReadyEvent.fire();
7562                 docReadyEvent.clearListeners();
7563             }
7564         }
7565     };
7566     
7567     var initDocReady = function(){
7568         docReadyEvent = new Roo.util.Event();
7569         if(Roo.isGecko || Roo.isOpera) {
7570             document.addEventListener("DOMContentLoaded", fireDocReady, false);
7571         }else if(Roo.isIE){
7572             document.write("<s"+'cript id="ie-deferred-loader" defer="defer" src="/'+'/:"></s'+"cript>");
7573             var defer = document.getElementById("ie-deferred-loader");
7574             defer.onreadystatechange = function(){
7575                 if(this.readyState == "complete"){
7576                     fireDocReady();
7577                 }
7578             };
7579         }else if(Roo.isSafari){ 
7580             docReadyProcId = setInterval(function(){
7581                 var rs = document.readyState;
7582                 if(rs == "complete") {
7583                     fireDocReady();     
7584                  }
7585             }, 10);
7586         }
7587         // no matter what, make sure it fires on load
7588         E.on(window, "load", fireDocReady);
7589     };
7590
7591     var createBuffered = function(h, o){
7592         var task = new Roo.util.DelayedTask(h);
7593         return function(e){
7594             // create new event object impl so new events don't wipe out properties
7595             e = new Roo.EventObjectImpl(e);
7596             task.delay(o.buffer, h, null, [e]);
7597         };
7598     };
7599
7600     var createSingle = function(h, el, ename, fn){
7601         return function(e){
7602             Roo.EventManager.removeListener(el, ename, fn);
7603             h(e);
7604         };
7605     };
7606
7607     var createDelayed = function(h, o){
7608         return function(e){
7609             // create new event object impl so new events don't wipe out properties
7610             e = new Roo.EventObjectImpl(e);
7611             setTimeout(function(){
7612                 h(e);
7613             }, o.delay || 10);
7614         };
7615     };
7616     var transitionEndVal = false;
7617     
7618     var transitionEnd = function()
7619     {
7620         if (transitionEndVal) {
7621             return transitionEndVal;
7622         }
7623         var el = document.createElement('div');
7624
7625         var transEndEventNames = {
7626             WebkitTransition : 'webkitTransitionEnd',
7627             MozTransition    : 'transitionend',
7628             OTransition      : 'oTransitionEnd otransitionend',
7629             transition       : 'transitionend'
7630         };
7631     
7632         for (var name in transEndEventNames) {
7633             if (el.style[name] !== undefined) {
7634                 transitionEndVal = transEndEventNames[name];
7635                 return  transitionEndVal ;
7636             }
7637         }
7638     }
7639     
7640   
7641
7642     var listen = function(element, ename, opt, fn, scope)
7643     {
7644         var o = (!opt || typeof opt == "boolean") ? {} : opt;
7645         fn = fn || o.fn; scope = scope || o.scope;
7646         var el = Roo.getDom(element);
7647         
7648         
7649         if(!el){
7650             throw "Error listening for \"" + ename + '\". Element "' + element + '" doesn\'t exist.';
7651         }
7652         
7653         if (ename == 'transitionend') {
7654             ename = transitionEnd();
7655         }
7656         var h = function(e){
7657             e = Roo.EventObject.setEvent(e);
7658             var t;
7659             if(o.delegate){
7660                 t = e.getTarget(o.delegate, el);
7661                 if(!t){
7662                     return;
7663                 }
7664             }else{
7665                 t = e.target;
7666             }
7667             if(o.stopEvent === true){
7668                 e.stopEvent();
7669             }
7670             if(o.preventDefault === true){
7671                e.preventDefault();
7672             }
7673             if(o.stopPropagation === true){
7674                 e.stopPropagation();
7675             }
7676
7677             if(o.normalized === false){
7678                 e = e.browserEvent;
7679             }
7680
7681             fn.call(scope || el, e, t, o);
7682         };
7683         if(o.delay){
7684             h = createDelayed(h, o);
7685         }
7686         if(o.single){
7687             h = createSingle(h, el, ename, fn);
7688         }
7689         if(o.buffer){
7690             h = createBuffered(h, o);
7691         }
7692         
7693         fn._handlers = fn._handlers || [];
7694         
7695         
7696         fn._handlers.push([Roo.id(el), ename, h]);
7697         
7698         
7699          
7700         E.on(el, ename, h); // this adds the actuall listener to the object..
7701         
7702         
7703         if(ename == "mousewheel" && el.addEventListener){ // workaround for jQuery
7704             el.addEventListener("DOMMouseScroll", h, false);
7705             E.on(window, 'unload', function(){
7706                 el.removeEventListener("DOMMouseScroll", h, false);
7707             });
7708         }
7709         if(ename == "mousedown" && el == document){ // fix stopped mousedowns on the document
7710             Roo.EventManager.stoppedMouseDownEvent.addListener(h);
7711         }
7712         return h;
7713     };
7714
7715     var stopListening = function(el, ename, fn){
7716         var id = Roo.id(el), hds = fn._handlers, hd = fn;
7717         if(hds){
7718             for(var i = 0, len = hds.length; i < len; i++){
7719                 var h = hds[i];
7720                 if(h[0] == id && h[1] == ename){
7721                     hd = h[2];
7722                     hds.splice(i, 1);
7723                     break;
7724                 }
7725             }
7726         }
7727         E.un(el, ename, hd);
7728         el = Roo.getDom(el);
7729         if(ename == "mousewheel" && el.addEventListener){
7730             el.removeEventListener("DOMMouseScroll", hd, false);
7731         }
7732         if(ename == "mousedown" && el == document){ // fix stopped mousedowns on the document
7733             Roo.EventManager.stoppedMouseDownEvent.removeListener(hd);
7734         }
7735     };
7736
7737     var propRe = /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/;
7738     
7739     var pub = {
7740         
7741         
7742         /** 
7743          * Fix for doc tools
7744          * @scope Roo.EventManager
7745          */
7746         
7747         
7748         /** 
7749          * This is no longer needed and is deprecated. Places a simple wrapper around an event handler to override the browser event
7750          * object with a Roo.EventObject
7751          * @param {Function} fn        The method the event invokes
7752          * @param {Object}   scope    An object that becomes the scope of the handler
7753          * @param {boolean}  override If true, the obj passed in becomes
7754          *                             the execution scope of the listener
7755          * @return {Function} The wrapped function
7756          * @deprecated
7757          */
7758         wrap : function(fn, scope, override){
7759             return function(e){
7760                 Roo.EventObject.setEvent(e);
7761                 fn.call(override ? scope || window : window, Roo.EventObject, scope);
7762             };
7763         },
7764         
7765         /**
7766      * Appends an event handler to an element (shorthand for addListener)
7767      * @param {String/HTMLElement}   element        The html element or id to assign the
7768      * @param {String}   eventName The type of event to listen for
7769      * @param {Function} handler The method the event invokes
7770      * @param {Object}   scope (optional) The scope in which to execute the handler
7771      * function. The handler function's "this" context.
7772      * @param {Object}   options (optional) An object containing handler configuration
7773      * properties. This may contain any of the following properties:<ul>
7774      * <li>scope {Object} The scope in which to execute the handler function. The handler function's "this" context.</li>
7775      * <li>delegate {String} A simple selector to filter the target or look for a descendant of the target</li>
7776      * <li>stopEvent {Boolean} True to stop the event. That is stop propagation, and prevent the default action.</li>
7777      * <li>preventDefault {Boolean} True to prevent the default action</li>
7778      * <li>stopPropagation {Boolean} True to prevent event propagation</li>
7779      * <li>normalized {Boolean} False to pass a browser event to the handler function instead of an Roo.EventObject</li>
7780      * <li>delay {Number} The number of milliseconds to delay the invocation of the handler after te event fires.</li>
7781      * <li>single {Boolean} True to add a handler to handle just the next firing of the event, and then remove itself.</li>
7782      * <li>buffer {Number} Causes the handler to be scheduled to run in an {@link Roo.util.DelayedTask} delayed
7783      * by the specified number of milliseconds. If the event fires again within that time, the original
7784      * handler is <em>not</em> invoked, but the new handler is scheduled in its place.</li>
7785      * </ul><br>
7786      * <p>
7787      * <b>Combining Options</b><br>
7788      * Using the options argument, it is possible to combine different types of listeners:<br>
7789      * <br>
7790      * A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)<div style="margin: 5px 20px 20px;">
7791      * Code:<pre><code>
7792 el.on('click', this.onClick, this, {
7793     single: true,
7794     delay: 100,
7795     stopEvent : true,
7796     forumId: 4
7797 });</code></pre>
7798      * <p>
7799      * <b>Attaching multiple handlers in 1 call</b><br>
7800       * The method also allows for a single argument to be passed which is a config object containing properties
7801      * which specify multiple handlers.
7802      * <p>
7803      * Code:<pre><code>
7804 el.on({
7805     'click' : {
7806         fn: this.onClick
7807         scope: this,
7808         delay: 100
7809     },
7810     'mouseover' : {
7811         fn: this.onMouseOver
7812         scope: this
7813     },
7814     'mouseout' : {
7815         fn: this.onMouseOut
7816         scope: this
7817     }
7818 });</code></pre>
7819      * <p>
7820      * Or a shorthand syntax:<br>
7821      * Code:<pre><code>
7822 el.on({
7823     'click' : this.onClick,
7824     'mouseover' : this.onMouseOver,
7825     'mouseout' : this.onMouseOut
7826     scope: this
7827 });</code></pre>
7828      */
7829         addListener : function(element, eventName, fn, scope, options){
7830             if(typeof eventName == "object"){
7831                 var o = eventName;
7832                 for(var e in o){
7833                     if(propRe.test(e)){
7834                         continue;
7835                     }
7836                     if(typeof o[e] == "function"){
7837                         // shared options
7838                         listen(element, e, o, o[e], o.scope);
7839                     }else{
7840                         // individual options
7841                         listen(element, e, o[e]);
7842                     }
7843                 }
7844                 return;
7845             }
7846             return listen(element, eventName, options, fn, scope);
7847         },
7848         
7849         /**
7850          * Removes an event handler
7851          *
7852          * @param {String/HTMLElement}   element        The id or html element to remove the 
7853          *                             event from
7854          * @param {String}   eventName     The type of event
7855          * @param {Function} fn
7856          * @return {Boolean} True if a listener was actually removed
7857          */
7858         removeListener : function(element, eventName, fn){
7859             return stopListening(element, eventName, fn);
7860         },
7861         
7862         /**
7863          * Fires when the document is ready (before onload and before images are loaded). Can be 
7864          * accessed shorthanded Roo.onReady().
7865          * @param {Function} fn        The method the event invokes
7866          * @param {Object}   scope    An  object that becomes the scope of the handler
7867          * @param {boolean}  options
7868          */
7869         onDocumentReady : function(fn, scope, options){
7870             if(docReadyState){ // if it already fired
7871                 docReadyEvent.addListener(fn, scope, options);
7872                 docReadyEvent.fire();
7873                 docReadyEvent.clearListeners();
7874                 return;
7875             }
7876             if(!docReadyEvent){
7877                 initDocReady();
7878             }
7879             docReadyEvent.addListener(fn, scope, options);
7880         },
7881         
7882         /**
7883          * Fires when the window is resized and provides resize event buffering (50 milliseconds), passes new viewport width and height to handlers.
7884          * @param {Function} fn        The method the event invokes
7885          * @param {Object}   scope    An object that becomes the scope of the handler
7886          * @param {boolean}  options
7887          */
7888         onWindowResize : function(fn, scope, options)
7889         {
7890             if(!resizeEvent){
7891                 resizeEvent = new Roo.util.Event();
7892                 resizeTask = new Roo.util.DelayedTask(function(){
7893                     resizeEvent.fire(D.getViewWidth(), D.getViewHeight());
7894                 });
7895                 E.on(window, "resize", function()
7896                 {
7897                     if (Roo.isIE) {
7898                         resizeTask.delay(50);
7899                     } else {
7900                         resizeEvent.fire(D.getViewWidth(), D.getViewHeight());
7901                     }
7902                 });
7903             }
7904             resizeEvent.addListener(fn, scope, options);
7905         },
7906
7907         /**
7908          * Fires when the user changes the active text size. Handler gets called with 2 params, the old size and the new size.
7909          * @param {Function} fn        The method the event invokes
7910          * @param {Object}   scope    An object that becomes the scope of the handler
7911          * @param {boolean}  options
7912          */
7913         onTextResize : function(fn, scope, options){
7914             if(!textEvent){
7915                 textEvent = new Roo.util.Event();
7916                 var textEl = new Roo.Element(document.createElement('div'));
7917                 textEl.dom.className = 'x-text-resize';
7918                 textEl.dom.innerHTML = 'X';
7919                 textEl.appendTo(document.body);
7920                 textSize = textEl.dom.offsetHeight;
7921                 setInterval(function(){
7922                     if(textEl.dom.offsetHeight != textSize){
7923                         textEvent.fire(textSize, textSize = textEl.dom.offsetHeight);
7924                     }
7925                 }, this.textResizeInterval);
7926             }
7927             textEvent.addListener(fn, scope, options);
7928         },
7929
7930         /**
7931          * Removes the passed window resize listener.
7932          * @param {Function} fn        The method the event invokes
7933          * @param {Object}   scope    The scope of handler
7934          */
7935         removeResizeListener : function(fn, scope){
7936             if(resizeEvent){
7937                 resizeEvent.removeListener(fn, scope);
7938             }
7939         },
7940
7941         // private
7942         fireResize : function(){
7943             if(resizeEvent){
7944                 resizeEvent.fire(D.getViewWidth(), D.getViewHeight());
7945             }   
7946         },
7947         /**
7948          * Url used for onDocumentReady with using SSL (defaults to Roo.SSL_SECURE_URL)
7949          */
7950         ieDeferSrc : false,
7951         /**
7952          * The frequency, in milliseconds, to check for text resize events (defaults to 50)
7953          */
7954         textResizeInterval : 50
7955     };
7956     
7957     /**
7958      * Fix for doc tools
7959      * @scopeAlias pub=Roo.EventManager
7960      */
7961     
7962      /**
7963      * Appends an event handler to an element (shorthand for addListener)
7964      * @param {String/HTMLElement}   element        The html element or id to assign the
7965      * @param {String}   eventName The type of event to listen for
7966      * @param {Function} handler The method the event invokes
7967      * @param {Object}   scope (optional) The scope in which to execute the handler
7968      * function. The handler function's "this" context.
7969      * @param {Object}   options (optional) An object containing handler configuration
7970      * properties. This may contain any of the following properties:<ul>
7971      * <li>scope {Object} The scope in which to execute the handler function. The handler function's "this" context.</li>
7972      * <li>delegate {String} A simple selector to filter the target or look for a descendant of the target</li>
7973      * <li>stopEvent {Boolean} True to stop the event. That is stop propagation, and prevent the default action.</li>
7974      * <li>preventDefault {Boolean} True to prevent the default action</li>
7975      * <li>stopPropagation {Boolean} True to prevent event propagation</li>
7976      * <li>normalized {Boolean} False to pass a browser event to the handler function instead of an Roo.EventObject</li>
7977      * <li>delay {Number} The number of milliseconds to delay the invocation of the handler after te event fires.</li>
7978      * <li>single {Boolean} True to add a handler to handle just the next firing of the event, and then remove itself.</li>
7979      * <li>buffer {Number} Causes the handler to be scheduled to run in an {@link Roo.util.DelayedTask} delayed
7980      * by the specified number of milliseconds. If the event fires again within that time, the original
7981      * handler is <em>not</em> invoked, but the new handler is scheduled in its place.</li>
7982      * </ul><br>
7983      * <p>
7984      * <b>Combining Options</b><br>
7985      * Using the options argument, it is possible to combine different types of listeners:<br>
7986      * <br>
7987      * A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)<div style="margin: 5px 20px 20px;">
7988      * Code:<pre><code>
7989 el.on('click', this.onClick, this, {
7990     single: true,
7991     delay: 100,
7992     stopEvent : true,
7993     forumId: 4
7994 });</code></pre>
7995      * <p>
7996      * <b>Attaching multiple handlers in 1 call</b><br>
7997       * The method also allows for a single argument to be passed which is a config object containing properties
7998      * which specify multiple handlers.
7999      * <p>
8000      * Code:<pre><code>
8001 el.on({
8002     'click' : {
8003         fn: this.onClick
8004         scope: this,
8005         delay: 100
8006     },
8007     'mouseover' : {
8008         fn: this.onMouseOver
8009         scope: this
8010     },
8011     'mouseout' : {
8012         fn: this.onMouseOut
8013         scope: this
8014     }
8015 });</code></pre>
8016      * <p>
8017      * Or a shorthand syntax:<br>
8018      * Code:<pre><code>
8019 el.on({
8020     'click' : this.onClick,
8021     'mouseover' : this.onMouseOver,
8022     'mouseout' : this.onMouseOut
8023     scope: this
8024 });</code></pre>
8025      */
8026     pub.on = pub.addListener;
8027     pub.un = pub.removeListener;
8028
8029     pub.stoppedMouseDownEvent = new Roo.util.Event();
8030     return pub;
8031 }();
8032 /**
8033   * Fires when the document is ready (before onload and before images are loaded).  Shorthand of {@link Roo.EventManager#onDocumentReady}.
8034   * @param {Function} fn        The method the event invokes
8035   * @param {Object}   scope    An  object that becomes the scope of the handler
8036   * @param {boolean}  override If true, the obj passed in becomes
8037   *                             the execution scope of the listener
8038   * @member Roo
8039   * @method onReady
8040  */
8041 Roo.onReady = Roo.EventManager.onDocumentReady;
8042
8043 Roo.onReady(function(){
8044     var bd = Roo.get(document.body);
8045     if(!bd){ return; }
8046
8047     var cls = [
8048             Roo.isIE ? "roo-ie"
8049             : Roo.isIE11 ? "roo-ie11"
8050             : Roo.isEdge ? "roo-edge"
8051             : Roo.isGecko ? "roo-gecko"
8052             : Roo.isOpera ? "roo-opera"
8053             : Roo.isSafari ? "roo-safari" : ""];
8054
8055     if(Roo.isMac){
8056         cls.push("roo-mac");
8057     }
8058     if(Roo.isLinux){
8059         cls.push("roo-linux");
8060     }
8061     if(Roo.isIOS){
8062         cls.push("roo-ios");
8063     }
8064     if(Roo.isTouch){
8065         cls.push("roo-touch");
8066     }
8067     if(Roo.isBorderBox){
8068         cls.push('roo-border-box');
8069     }
8070     if(Roo.isStrict){ // add to the parent to allow for selectors like ".ext-strict .ext-ie"
8071         var p = bd.dom.parentNode;
8072         if(p){
8073             p.className += ' roo-strict';
8074         }
8075     }
8076     bd.addClass(cls.join(' '));
8077 });
8078
8079 /**
8080  * @class Roo.EventObject
8081  * EventObject exposes the Yahoo! UI Event functionality directly on the object
8082  * passed to your event handler. It exists mostly for convenience. It also fixes the annoying null checks automatically to cleanup your code 
8083  * Example:
8084  * <pre><code>
8085  function handleClick(e){ // e is not a standard event object, it is a Roo.EventObject
8086     e.preventDefault();
8087     var target = e.getTarget();
8088     ...
8089  }
8090  var myDiv = Roo.get("myDiv");
8091  myDiv.on("click", handleClick);
8092  //or
8093  Roo.EventManager.on("myDiv", 'click', handleClick);
8094  Roo.EventManager.addListener("myDiv", 'click', handleClick);
8095  </code></pre>
8096  * @static
8097  */
8098 Roo.EventObject = function(){
8099     
8100     var E = Roo.lib.Event;
8101     
8102     // safari keypress events for special keys return bad keycodes
8103     var safariKeys = {
8104         63234 : 37, // left
8105         63235 : 39, // right
8106         63232 : 38, // up
8107         63233 : 40, // down
8108         63276 : 33, // page up
8109         63277 : 34, // page down
8110         63272 : 46, // delete
8111         63273 : 36, // home
8112         63275 : 35  // end
8113     };
8114
8115     // normalize button clicks
8116     var btnMap = Roo.isIE ? {1:0,4:1,2:2} :
8117                 (Roo.isSafari ? {1:0,2:1,3:2} : {0:0,1:1,2:2});
8118
8119     Roo.EventObjectImpl = function(e){
8120         if(e){
8121             this.setEvent(e.browserEvent || e);
8122         }
8123     };
8124     Roo.EventObjectImpl.prototype = {
8125         /**
8126          * Used to fix doc tools.
8127          * @scope Roo.EventObject.prototype
8128          */
8129             
8130
8131         
8132         
8133         /** The normal browser event */
8134         browserEvent : null,
8135         /** The button pressed in a mouse event */
8136         button : -1,
8137         /** True if the shift key was down during the event */
8138         shiftKey : false,
8139         /** True if the control key was down during the event */
8140         ctrlKey : false,
8141         /** True if the alt key was down during the event */
8142         altKey : false,
8143
8144         /** Key constant 
8145         * @type Number */
8146         BACKSPACE : 8,
8147         /** Key constant 
8148         * @type Number */
8149         TAB : 9,
8150         /** Key constant 
8151         * @type Number */
8152         RETURN : 13,
8153         /** Key constant 
8154         * @type Number */
8155         ENTER : 13,
8156         /** Key constant 
8157         * @type Number */
8158         SHIFT : 16,
8159         /** Key constant 
8160         * @type Number */
8161         CONTROL : 17,
8162         /** Key constant 
8163         * @type Number */
8164         ESC : 27,
8165         /** Key constant 
8166         * @type Number */
8167         SPACE : 32,
8168         /** Key constant 
8169         * @type Number */
8170         PAGEUP : 33,
8171         /** Key constant 
8172         * @type Number */
8173         PAGEDOWN : 34,
8174         /** Key constant 
8175         * @type Number */
8176         END : 35,
8177         /** Key constant 
8178         * @type Number */
8179         HOME : 36,
8180         /** Key constant 
8181         * @type Number */
8182         LEFT : 37,
8183         /** Key constant 
8184         * @type Number */
8185         UP : 38,
8186         /** Key constant 
8187         * @type Number */
8188         RIGHT : 39,
8189         /** Key constant 
8190         * @type Number */
8191         DOWN : 40,
8192         /** Key constant 
8193         * @type Number */
8194         DELETE : 46,
8195         /** Key constant 
8196         * @type Number */
8197         F5 : 116,
8198
8199            /** @private */
8200         setEvent : function(e){
8201             if(e == this || (e && e.browserEvent)){ // already wrapped
8202                 return e;
8203             }
8204             this.browserEvent = e;
8205             if(e){
8206                 // normalize buttons
8207                 this.button = e.button ? btnMap[e.button] : (e.which ? e.which-1 : -1);
8208                 if(e.type == 'click' && this.button == -1){
8209                     this.button = 0;
8210                 }
8211                 this.type = e.type;
8212                 this.shiftKey = e.shiftKey;
8213                 // mac metaKey behaves like ctrlKey
8214                 this.ctrlKey = e.ctrlKey || e.metaKey;
8215                 this.altKey = e.altKey;
8216                 // in getKey these will be normalized for the mac
8217                 this.keyCode = e.keyCode;
8218                 // keyup warnings on firefox.
8219                 this.charCode = (e.type == 'keyup' || e.type == 'keydown') ? 0 : e.charCode;
8220                 // cache the target for the delayed and or buffered events
8221                 this.target = E.getTarget(e);
8222                 // same for XY
8223                 this.xy = E.getXY(e);
8224             }else{
8225                 this.button = -1;
8226                 this.shiftKey = false;
8227                 this.ctrlKey = false;
8228                 this.altKey = false;
8229                 this.keyCode = 0;
8230                 this.charCode =0;
8231                 this.target = null;
8232                 this.xy = [0, 0];
8233             }
8234             return this;
8235         },
8236
8237         /**
8238          * Stop the event (preventDefault and stopPropagation)
8239          */
8240         stopEvent : function(){
8241             if(this.browserEvent){
8242                 if(this.browserEvent.type == 'mousedown'){
8243                     Roo.EventManager.stoppedMouseDownEvent.fire(this);
8244                 }
8245                 E.stopEvent(this.browserEvent);
8246             }
8247         },
8248
8249         /**
8250          * Prevents the browsers default handling of the event.
8251          */
8252         preventDefault : function(){
8253             if(this.browserEvent){
8254                 E.preventDefault(this.browserEvent);
8255             }
8256         },
8257
8258         /** @private */
8259         isNavKeyPress : function(){
8260             var k = this.keyCode;
8261             k = Roo.isSafari ? (safariKeys[k] || k) : k;
8262             return (k >= 33 && k <= 40) || k == this.RETURN || k == this.TAB || k == this.ESC;
8263         },
8264
8265         isSpecialKey : function(){
8266             var k = this.keyCode;
8267             return (this.type == 'keypress' && this.ctrlKey) || k == 9 || k == 13  || k == 40 || k == 27 ||
8268             (k == 16) || (k == 17) ||
8269             (k >= 18 && k <= 20) ||
8270             (k >= 33 && k <= 35) ||
8271             (k >= 36 && k <= 39) ||
8272             (k >= 44 && k <= 45);
8273         },
8274         /**
8275          * Cancels bubbling of the event.
8276          */
8277         stopPropagation : function(){
8278             if(this.browserEvent){
8279                 if(this.type == 'mousedown'){
8280                     Roo.EventManager.stoppedMouseDownEvent.fire(this);
8281                 }
8282                 E.stopPropagation(this.browserEvent);
8283             }
8284         },
8285
8286         /**
8287          * Gets the key code for the event.
8288          * @return {Number}
8289          */
8290         getCharCode : function(){
8291             return this.charCode || this.keyCode;
8292         },
8293
8294         /**
8295          * Returns a normalized keyCode for the event.
8296          * @return {Number} The key code
8297          */
8298         getKey : function(){
8299             var k = this.keyCode || this.charCode;
8300             return Roo.isSafari ? (safariKeys[k] || k) : k;
8301         },
8302
8303         /**
8304          * Gets the x coordinate of the event.
8305          * @return {Number}
8306          */
8307         getPageX : function(){
8308             return this.xy[0];
8309         },
8310
8311         /**
8312          * Gets the y coordinate of the event.
8313          * @return {Number}
8314          */
8315         getPageY : function(){
8316             return this.xy[1];
8317         },
8318
8319         /**
8320          * Gets the time of the event.
8321          * @return {Number}
8322          */
8323         getTime : function(){
8324             if(this.browserEvent){
8325                 return E.getTime(this.browserEvent);
8326             }
8327             return null;
8328         },
8329
8330         /**
8331          * Gets the page coordinates of the event.
8332          * @return {Array} The xy values like [x, y]
8333          */
8334         getXY : function(){
8335             return this.xy;
8336         },
8337
8338         /**
8339          * Gets the target for the event.
8340          * @param {String} selector (optional) A simple selector to filter the target or look for an ancestor of the target
8341          * @param {Number/String/HTMLElement/Element} maxDepth (optional) The max depth to
8342                 search as a number or element (defaults to 10 || document.body)
8343          * @param {Boolean} returnEl (optional) True to return a Roo.Element object instead of DOM node
8344          * @return {HTMLelement}
8345          */
8346         getTarget : function(selector, maxDepth, returnEl){
8347             return selector ? Roo.fly(this.target).findParent(selector, maxDepth, returnEl) : this.target;
8348         },
8349         /**
8350          * Gets the related target.
8351          * @return {HTMLElement}
8352          */
8353         getRelatedTarget : function(){
8354             if(this.browserEvent){
8355                 return E.getRelatedTarget(this.browserEvent);
8356             }
8357             return null;
8358         },
8359
8360         /**
8361          * Normalizes mouse wheel delta across browsers
8362          * @return {Number} The delta
8363          */
8364         getWheelDelta : function(){
8365             var e = this.browserEvent;
8366             var delta = 0;
8367             if(e.wheelDelta){ /* IE/Opera. */
8368                 delta = e.wheelDelta/120;
8369             }else if(e.detail){ /* Mozilla case. */
8370                 delta = -e.detail/3;
8371             }
8372             return delta;
8373         },
8374
8375         /**
8376          * Returns true if the control, meta, shift or alt key was pressed during this event.
8377          * @return {Boolean}
8378          */
8379         hasModifier : function(){
8380             return !!((this.ctrlKey || this.altKey) || this.shiftKey);
8381         },
8382
8383         /**
8384          * Returns true if the target of this event equals el or is a child of el
8385          * @param {String/HTMLElement/Element} el
8386          * @param {Boolean} related (optional) true to test if the related target is within el instead of the target
8387          * @return {Boolean}
8388          */
8389         within : function(el, related){
8390             var t = this[related ? "getRelatedTarget" : "getTarget"]();
8391             return t && Roo.fly(el).contains(t);
8392         },
8393
8394         getPoint : function(){
8395             return new Roo.lib.Point(this.xy[0], this.xy[1]);
8396         }
8397     };
8398
8399     return new Roo.EventObjectImpl();
8400 }();
8401             
8402     /*
8403  * Based on:
8404  * Ext JS Library 1.1.1
8405  * Copyright(c) 2006-2007, Ext JS, LLC.
8406  *
8407  * Originally Released Under LGPL - original licence link has changed is not relivant.
8408  *
8409  * Fork - LGPL
8410  * <script type="text/javascript">
8411  */
8412
8413  
8414 // was in Composite Element!??!?!
8415  
8416 (function(){
8417     var D = Roo.lib.Dom;
8418     var E = Roo.lib.Event;
8419     var A = Roo.lib.Anim;
8420
8421     // local style camelizing for speed
8422     var propCache = {};
8423     var camelRe = /(-[a-z])/gi;
8424     var camelFn = function(m, a){ return a.charAt(1).toUpperCase(); };
8425     var view = document.defaultView;
8426
8427 /**
8428  * @class Roo.Element
8429  * Represents an Element in the DOM.<br><br>
8430  * Usage:<br>
8431 <pre><code>
8432 var el = Roo.get("my-div");
8433
8434 // or with getEl
8435 var el = getEl("my-div");
8436
8437 // or with a DOM element
8438 var el = Roo.get(myDivElement);
8439 </code></pre>
8440  * Using Roo.get() or getEl() instead of calling the constructor directly ensures you get the same object
8441  * each call instead of constructing a new one.<br><br>
8442  * <b>Animations</b><br />
8443  * Many of the functions for manipulating an element have an optional "animate" parameter. The animate parameter
8444  * should either be a boolean (true) or an object literal with animation options. The animation options are:
8445 <pre>
8446 Option    Default   Description
8447 --------- --------  ---------------------------------------------
8448 duration  .35       The duration of the animation in seconds
8449 easing    easeOut   The YUI easing method
8450 callback  none      A function to execute when the anim completes
8451 scope     this      The scope (this) of the callback function
8452 </pre>
8453 * Also, the Anim object being used for the animation will be set on your options object as "anim", which allows you to stop or
8454 * manipulate the animation. Here's an example:
8455 <pre><code>
8456 var el = Roo.get("my-div");
8457
8458 // no animation
8459 el.setWidth(100);
8460
8461 // default animation
8462 el.setWidth(100, true);
8463
8464 // animation with some options set
8465 el.setWidth(100, {
8466     duration: 1,
8467     callback: this.foo,
8468     scope: this
8469 });
8470
8471 // using the "anim" property to get the Anim object
8472 var opt = {
8473     duration: 1,
8474     callback: this.foo,
8475     scope: this
8476 };
8477 el.setWidth(100, opt);
8478 ...
8479 if(opt.anim.isAnimated()){
8480     opt.anim.stop();
8481 }
8482 </code></pre>
8483 * <b> Composite (Collections of) Elements</b><br />
8484  * For working with collections of Elements, see <a href="Roo.CompositeElement.html">Roo.CompositeElement</a>
8485  * @constructor Create a new Element directly.
8486  * @param {String/HTMLElement} element
8487  * @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).
8488  */
8489     Roo.Element = function(element, forceNew)
8490     {
8491         var dom = typeof element == "string" ?
8492                 document.getElementById(element) : element;
8493         
8494         this.listeners = {};
8495         
8496         if(!dom){ // invalid id/element
8497             return null;
8498         }
8499         var id = dom.id;
8500         if(forceNew !== true && id && Roo.Element.cache[id]){ // element object already exists
8501             return Roo.Element.cache[id];
8502         }
8503
8504         /**
8505          * The DOM element
8506          * @type HTMLElement
8507          */
8508         this.dom = dom;
8509
8510         /**
8511          * The DOM element ID
8512          * @type String
8513          */
8514         this.id = id || Roo.id(dom);
8515         
8516         return this; // assumed for cctor?
8517     };
8518
8519     var El = Roo.Element;
8520
8521     El.prototype = {
8522         /**
8523          * The element's default display mode  (defaults to "") 
8524          * @type String
8525          */
8526         originalDisplay : "",
8527
8528         
8529         // note this is overridden in BS version..
8530         visibilityMode : 1, 
8531         /**
8532          * The default unit to append to CSS values where a unit isn't provided (defaults to px).
8533          * @type String
8534          */
8535         defaultUnit : "px",
8536         
8537         /**
8538          * Sets the element's visibility mode. When setVisible() is called it
8539          * will use this to determine whether to set the visibility or the display property.
8540          * @param visMode Element.VISIBILITY or Element.DISPLAY
8541          * @return {Roo.Element} this
8542          */
8543         setVisibilityMode : function(visMode){
8544             this.visibilityMode = visMode;
8545             return this;
8546         },
8547         /**
8548          * Convenience method for setVisibilityMode(Element.DISPLAY)
8549          * @param {String} display (optional) What to set display to when visible
8550          * @return {Roo.Element} this
8551          */
8552         enableDisplayMode : function(display){
8553             this.setVisibilityMode(El.DISPLAY);
8554             if(typeof display != "undefined") { this.originalDisplay = display; }
8555             return this;
8556         },
8557
8558         /**
8559          * 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)
8560          * @param {String} selector The simple selector to test
8561          * @param {Number/String/HTMLElement/Element} maxDepth (optional) The max depth to
8562                 search as a number or element (defaults to 10 || document.body)
8563          * @param {Boolean} returnEl (optional) True to return a Roo.Element object instead of DOM node
8564          * @return {HTMLElement} The matching DOM node (or null if no match was found)
8565          */
8566         findParent : function(simpleSelector, maxDepth, returnEl){
8567             var p = this.dom, b = document.body, depth = 0, dq = Roo.DomQuery, stopEl;
8568             maxDepth = maxDepth || 50;
8569             if(typeof maxDepth != "number"){
8570                 stopEl = Roo.getDom(maxDepth);
8571                 maxDepth = 10;
8572             }
8573             while(p && p.nodeType == 1 && depth < maxDepth && p != b && p != stopEl){
8574                 if(dq.is(p, simpleSelector)){
8575                     return returnEl ? Roo.get(p) : p;
8576                 }
8577                 depth++;
8578                 p = p.parentNode;
8579             }
8580             return null;
8581         },
8582
8583
8584         /**
8585          * Looks at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child)
8586          * @param {String} selector The simple selector to test
8587          * @param {Number/String/HTMLElement/Element} maxDepth (optional) The max depth to
8588                 search as a number or element (defaults to 10 || document.body)
8589          * @param {Boolean} returnEl (optional) True to return a Roo.Element object instead of DOM node
8590          * @return {HTMLElement} The matching DOM node (or null if no match was found)
8591          */
8592         findParentNode : function(simpleSelector, maxDepth, returnEl){
8593             var p = Roo.fly(this.dom.parentNode, '_internal');
8594             return p ? p.findParent(simpleSelector, maxDepth, returnEl) : null;
8595         },
8596         
8597         /**
8598          * Looks at  the scrollable parent element
8599          */
8600         findScrollableParent : function()
8601         {
8602             var overflowRegex = /(auto|scroll)/;
8603             
8604             if(this.getStyle('position') === 'fixed'){
8605                 return Roo.isAndroid ? Roo.get(document.documentElement) : Roo.get(document.body);
8606             }
8607             
8608             var excludeStaticParent = this.getStyle('position') === "absolute";
8609             
8610             for (var parent = this; (parent = Roo.get(parent.dom.parentNode));){
8611                 
8612                 if (excludeStaticParent && parent.getStyle('position') === "static") {
8613                     continue;
8614                 }
8615                 
8616                 if (overflowRegex.test(parent.getStyle('overflow') + parent.getStyle('overflow-x') + parent.getStyle('overflow-y'))){
8617                     return parent;
8618                 }
8619                 
8620                 if(parent.dom.nodeName.toLowerCase() == 'body'){
8621                     return Roo.isAndroid ? Roo.get(document.documentElement) : Roo.get(document.body);
8622                 }
8623             }
8624             
8625             return Roo.isAndroid ? Roo.get(document.documentElement) : Roo.get(document.body);
8626         },
8627
8628         /**
8629          * Walks up the dom looking for a parent node that matches the passed simple selector (e.g. div.some-class or span:first-child).
8630          * This is a shortcut for findParentNode() that always returns an Roo.Element.
8631          * @param {String} selector The simple selector to test
8632          * @param {Number/String/HTMLElement/Element} maxDepth (optional) The max depth to
8633                 search as a number or element (defaults to 10 || document.body)
8634          * @return {Roo.Element} The matching DOM node (or null if no match was found)
8635          */
8636         up : function(simpleSelector, maxDepth){
8637             return this.findParentNode(simpleSelector, maxDepth, true);
8638         },
8639
8640
8641
8642         /**
8643          * Returns true if this element matches the passed simple selector (e.g. div.some-class or span:first-child)
8644          * @param {String} selector The simple selector to test
8645          * @return {Boolean} True if this element matches the selector, else false
8646          */
8647         is : function(simpleSelector){
8648             return Roo.DomQuery.is(this.dom, simpleSelector);
8649         },
8650
8651         /**
8652          * Perform animation on this element.
8653          * @param {Object} args The YUI animation control args
8654          * @param {Float} duration (optional) How long the animation lasts in seconds (defaults to .35)
8655          * @param {Function} onComplete (optional) Function to call when animation completes
8656          * @param {String} easing (optional) Easing method to use (defaults to 'easeOut')
8657          * @param {String} animType (optional) 'run' is the default. Can also be 'color', 'motion', or 'scroll'
8658          * @return {Roo.Element} this
8659          */
8660         animate : function(args, duration, onComplete, easing, animType){
8661             this.anim(args, {duration: duration, callback: onComplete, easing: easing}, animType);
8662             return this;
8663         },
8664
8665         /*
8666          * @private Internal animation call
8667          */
8668         anim : function(args, opt, animType, defaultDur, defaultEase, cb){
8669             animType = animType || 'run';
8670             opt = opt || {};
8671             var anim = Roo.lib.Anim[animType](
8672                 this.dom, args,
8673                 (opt.duration || defaultDur) || .35,
8674                 (opt.easing || defaultEase) || 'easeOut',
8675                 function(){
8676                     Roo.callback(cb, this);
8677                     Roo.callback(opt.callback, opt.scope || this, [this, opt]);
8678                 },
8679                 this
8680             );
8681             opt.anim = anim;
8682             return anim;
8683         },
8684
8685         // private legacy anim prep
8686         preanim : function(a, i){
8687             return !a[i] ? false : (typeof a[i] == "object" ? a[i]: {duration: a[i+1], callback: a[i+2], easing: a[i+3]});
8688         },
8689
8690         /**
8691          * Removes worthless text nodes
8692          * @param {Boolean} forceReclean (optional) By default the element
8693          * keeps track if it has been cleaned already so
8694          * you can call this over and over. However, if you update the element and
8695          * need to force a reclean, you can pass true.
8696          */
8697         clean : function(forceReclean){
8698             if(this.isCleaned && forceReclean !== true){
8699                 return this;
8700             }
8701             var ns = /\S/;
8702             var d = this.dom, n = d.firstChild, ni = -1;
8703             while(n){
8704                 var nx = n.nextSibling;
8705                 if(n.nodeType == 3 && !ns.test(n.nodeValue)){
8706                     d.removeChild(n);
8707                 }else{
8708                     n.nodeIndex = ++ni;
8709                 }
8710                 n = nx;
8711             }
8712             this.isCleaned = true;
8713             return this;
8714         },
8715
8716         // private
8717         calcOffsetsTo : function(el){
8718             el = Roo.get(el);
8719             var d = el.dom;
8720             var restorePos = false;
8721             if(el.getStyle('position') == 'static'){
8722                 el.position('relative');
8723                 restorePos = true;
8724             }
8725             var x = 0, y =0;
8726             var op = this.dom;
8727             while(op && op != d && op.tagName != 'HTML'){
8728                 x+= op.offsetLeft;
8729                 y+= op.offsetTop;
8730                 op = op.offsetParent;
8731             }
8732             if(restorePos){
8733                 el.position('static');
8734             }
8735             return [x, y];
8736         },
8737
8738         /**
8739          * Scrolls this element into view within the passed container.
8740          * @param {String/HTMLElement/Element} container (optional) The container element to scroll (defaults to document.body)
8741          * @param {Boolean} hscroll (optional) False to disable horizontal scroll (defaults to true)
8742          * @return {Roo.Element} this
8743          */
8744         scrollIntoView : function(container, hscroll){
8745             var c = Roo.getDom(container) || document.body;
8746             var el = this.dom;
8747
8748             var o = this.calcOffsetsTo(c),
8749                 l = o[0],
8750                 t = o[1],
8751                 b = t+el.offsetHeight,
8752                 r = l+el.offsetWidth;
8753
8754             var ch = c.clientHeight;
8755             var ct = parseInt(c.scrollTop, 10);
8756             var cl = parseInt(c.scrollLeft, 10);
8757             var cb = ct + ch;
8758             var cr = cl + c.clientWidth;
8759
8760             if(t < ct){
8761                 c.scrollTop = t;
8762             }else if(b > cb){
8763                 c.scrollTop = b-ch;
8764             }
8765
8766             if(hscroll !== false){
8767                 if(l < cl){
8768                     c.scrollLeft = l;
8769                 }else if(r > cr){
8770                     c.scrollLeft = r-c.clientWidth;
8771                 }
8772             }
8773             return this;
8774         },
8775
8776         // private
8777         scrollChildIntoView : function(child, hscroll){
8778             Roo.fly(child, '_scrollChildIntoView').scrollIntoView(this, hscroll);
8779         },
8780
8781         /**
8782          * Measures the element's content height and updates height to match. Note: this function uses setTimeout so
8783          * the new height may not be available immediately.
8784          * @param {Boolean} animate (optional) Animate the transition (defaults to false)
8785          * @param {Float} duration (optional) Length of the animation in seconds (defaults to .35)
8786          * @param {Function} onComplete (optional) Function to call when animation completes
8787          * @param {String} easing (optional) Easing method to use (defaults to easeOut)
8788          * @return {Roo.Element} this
8789          */
8790         autoHeight : function(animate, duration, onComplete, easing){
8791             var oldHeight = this.getHeight();
8792             this.clip();
8793             this.setHeight(1); // force clipping
8794             setTimeout(function(){
8795                 var height = parseInt(this.dom.scrollHeight, 10); // parseInt for Safari
8796                 if(!animate){
8797                     this.setHeight(height);
8798                     this.unclip();
8799                     if(typeof onComplete == "function"){
8800                         onComplete();
8801                     }
8802                 }else{
8803                     this.setHeight(oldHeight); // restore original height
8804                     this.setHeight(height, animate, duration, function(){
8805                         this.unclip();
8806                         if(typeof onComplete == "function") { onComplete(); }
8807                     }.createDelegate(this), easing);
8808                 }
8809             }.createDelegate(this), 0);
8810             return this;
8811         },
8812
8813         /**
8814          * Returns true if this element is an ancestor of the passed element
8815          * @param {HTMLElement/String} el The element to check
8816          * @return {Boolean} True if this element is an ancestor of el, else false
8817          */
8818         contains : function(el){
8819             if(!el){return false;}
8820             return D.isAncestor(this.dom, el.dom ? el.dom : el);
8821         },
8822
8823         /**
8824          * Checks whether the element is currently visible using both visibility and display properties.
8825          * @param {Boolean} deep (optional) True to walk the dom and see if parent elements are hidden (defaults to false)
8826          * @return {Boolean} True if the element is currently visible, else false
8827          */
8828         isVisible : function(deep) {
8829             var vis = !(this.getStyle("visibility") == "hidden" || this.getStyle("display") == "none");
8830             if(deep !== true || !vis){
8831                 return vis;
8832             }
8833             var p = this.dom.parentNode;
8834             while(p && p.tagName.toLowerCase() != "body"){
8835                 if(!Roo.fly(p, '_isVisible').isVisible()){
8836                     return false;
8837                 }
8838                 p = p.parentNode;
8839             }
8840             return true;
8841         },
8842
8843         /**
8844          * Creates a {@link Roo.CompositeElement} for child nodes based on the passed CSS selector (the selector should not contain an id).
8845          * @param {String} selector The CSS selector
8846          * @param {Boolean} unique (optional) True to create a unique Roo.Element for each child (defaults to false, which creates a single shared flyweight object)
8847          * @return {CompositeElement/CompositeElementLite} The composite element
8848          */
8849         select : function(selector, unique){
8850             return El.select(selector, unique, this.dom);
8851         },
8852
8853         /**
8854          * Selects child nodes based on the passed CSS selector (the selector should not contain an id).
8855          * @param {String} selector The CSS selector
8856          * @return {Array} An array of the matched nodes
8857          */
8858         query : function(selector, unique){
8859             return Roo.DomQuery.select(selector, this.dom);
8860         },
8861
8862         /**
8863          * Selects a single child at any depth below this element based on the passed CSS selector (the selector should not contain an id).
8864          * @param {String} selector The CSS selector
8865          * @param {Boolean} returnDom (optional) True to return the DOM node instead of Roo.Element (defaults to false)
8866          * @return {HTMLElement/Roo.Element} The child Roo.Element (or DOM node if returnDom = true)
8867          */
8868         child : function(selector, returnDom){
8869             var n = Roo.DomQuery.selectNode(selector, this.dom);
8870             return returnDom ? n : Roo.get(n);
8871         },
8872
8873         /**
8874          * Selects a single *direct* child based on the passed CSS selector (the selector should not contain an id).
8875          * @param {String} selector The CSS selector
8876          * @param {Boolean} returnDom (optional) True to return the DOM node instead of Roo.Element (defaults to false)
8877          * @return {HTMLElement/Roo.Element} The child Roo.Element (or DOM node if returnDom = true)
8878          */
8879         down : function(selector, returnDom){
8880             var n = Roo.DomQuery.selectNode(" > " + selector, this.dom);
8881             return returnDom ? n : Roo.get(n);
8882         },
8883
8884         /**
8885          * Initializes a {@link Roo.dd.DD} drag drop object for this element.
8886          * @param {String} group The group the DD object is member of
8887          * @param {Object} config The DD config object
8888          * @param {Object} overrides An object containing methods to override/implement on the DD object
8889          * @return {Roo.dd.DD} The DD object
8890          */
8891         initDD : function(group, config, overrides){
8892             var dd = new Roo.dd.DD(Roo.id(this.dom), group, config);
8893             return Roo.apply(dd, overrides);
8894         },
8895
8896         /**
8897          * Initializes a {@link Roo.dd.DDProxy} object for this element.
8898          * @param {String} group The group the DDProxy object is member of
8899          * @param {Object} config The DDProxy config object
8900          * @param {Object} overrides An object containing methods to override/implement on the DDProxy object
8901          * @return {Roo.dd.DDProxy} The DDProxy object
8902          */
8903         initDDProxy : function(group, config, overrides){
8904             var dd = new Roo.dd.DDProxy(Roo.id(this.dom), group, config);
8905             return Roo.apply(dd, overrides);
8906         },
8907
8908         /**
8909          * Initializes a {@link Roo.dd.DDTarget} object for this element.
8910          * @param {String} group The group the DDTarget object is member of
8911          * @param {Object} config The DDTarget config object
8912          * @param {Object} overrides An object containing methods to override/implement on the DDTarget object
8913          * @return {Roo.dd.DDTarget} The DDTarget object
8914          */
8915         initDDTarget : function(group, config, overrides){
8916             var dd = new Roo.dd.DDTarget(Roo.id(this.dom), group, config);
8917             return Roo.apply(dd, overrides);
8918         },
8919
8920         /**
8921          * Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use
8922          * the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property.
8923          * @param {Boolean} visible Whether the element is visible
8924          * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
8925          * @return {Roo.Element} this
8926          */
8927          setVisible : function(visible, animate){
8928             if(!animate || !A){
8929                 if(this.visibilityMode == El.DISPLAY){
8930                     this.setDisplayed(visible);
8931                 }else{
8932                     this.fixDisplay();
8933                     this.dom.style.visibility = visible ? "visible" : "hidden";
8934                 }
8935             }else{
8936                 // closure for composites
8937                 var dom = this.dom;
8938                 var visMode = this.visibilityMode;
8939                 if(visible){
8940                     this.setOpacity(.01);
8941                     this.setVisible(true);
8942                 }
8943                 this.anim({opacity: { to: (visible?1:0) }},
8944                       this.preanim(arguments, 1),
8945                       null, .35, 'easeIn', function(){
8946                          if(!visible){
8947                              if(visMode == El.DISPLAY){
8948                                  dom.style.display = "none";
8949                              }else{
8950                                  dom.style.visibility = "hidden";
8951                              }
8952                              Roo.get(dom).setOpacity(1);
8953                          }
8954                      });
8955             }
8956             return this;
8957         },
8958
8959         /**
8960          * Returns true if display is not "none"
8961          * @return {Boolean}
8962          */
8963         isDisplayed : function() {
8964             return this.getStyle("display") != "none";
8965         },
8966
8967         /**
8968          * Toggles the element's visibility or display, depending on visibility mode.
8969          * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
8970          * @return {Roo.Element} this
8971          */
8972         toggle : function(animate){
8973             this.setVisible(!this.isVisible(), this.preanim(arguments, 0));
8974             return this;
8975         },
8976
8977         /**
8978          * Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true.
8979          * @param {Boolean} value Boolean value to display the element using its default display, or a string to set the display directly
8980          * @return {Roo.Element} this
8981          */
8982         setDisplayed : function(value) {
8983             if(typeof value == "boolean"){
8984                value = value ? this.originalDisplay : "none";
8985             }
8986             this.setStyle("display", value);
8987             return this;
8988         },
8989
8990         /**
8991          * Tries to focus the element. Any exceptions are caught and ignored.
8992          * @return {Roo.Element} this
8993          */
8994         focus : function() {
8995             try{
8996                 this.dom.focus();
8997             }catch(e){}
8998             return this;
8999         },
9000
9001         /**
9002          * Tries to blur the element. Any exceptions are caught and ignored.
9003          * @return {Roo.Element} this
9004          */
9005         blur : function() {
9006             try{
9007                 this.dom.blur();
9008             }catch(e){}
9009             return this;
9010         },
9011
9012         /**
9013          * Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.
9014          * @param {String/Array} className The CSS class to add, or an array of classes
9015          * @return {Roo.Element} this
9016          */
9017         addClass : function(className){
9018             if(className instanceof Array){
9019                 for(var i = 0, len = className.length; i < len; i++) {
9020                     this.addClass(className[i]);
9021                 }
9022             }else{
9023                 if(className && !this.hasClass(className)){
9024                     if (this.dom instanceof SVGElement) {
9025                         this.dom.className.baseVal =this.dom.className.baseVal  + " " + className;
9026                     } else {
9027                         this.dom.className = this.dom.className + " " + className;
9028                     }
9029                 }
9030             }
9031             return this;
9032         },
9033
9034         /**
9035          * Adds one or more CSS classes to this element and removes the same class(es) from all siblings.
9036          * @param {String/Array} className The CSS class to add, or an array of classes
9037          * @return {Roo.Element} this
9038          */
9039         radioClass : function(className){
9040             var siblings = this.dom.parentNode.childNodes;
9041             for(var i = 0; i < siblings.length; i++) {
9042                 var s = siblings[i];
9043                 if(s.nodeType == 1){
9044                     Roo.get(s).removeClass(className);
9045                 }
9046             }
9047             this.addClass(className);
9048             return this;
9049         },
9050
9051         /**
9052          * Removes one or more CSS classes from the element.
9053          * @param {String/Array} className The CSS class to remove, or an array of classes
9054          * @return {Roo.Element} this
9055          */
9056         removeClass : function(className){
9057             
9058             var cn = this.dom instanceof SVGElement ? this.dom.className.baseVal : this.dom.className;
9059             if(!className || !cn){
9060                 return this;
9061             }
9062             if(className instanceof Array){
9063                 for(var i = 0, len = className.length; i < len; i++) {
9064                     this.removeClass(className[i]);
9065                 }
9066             }else{
9067                 if(this.hasClass(className)){
9068                     var re = this.classReCache[className];
9069                     if (!re) {
9070                        re = new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)', "g");
9071                        this.classReCache[className] = re;
9072                     }
9073                     if (this.dom instanceof SVGElement) {
9074                         this.dom.className.baseVal = cn.replace(re, " ");
9075                     } else {
9076                         this.dom.className = cn.replace(re, " ");
9077                     }
9078                 }
9079             }
9080             return this;
9081         },
9082
9083         // private
9084         classReCache: {},
9085
9086         /**
9087          * Toggles the specified CSS class on this element (removes it if it already exists, otherwise adds it).
9088          * @param {String} className The CSS class to toggle
9089          * @return {Roo.Element} this
9090          */
9091         toggleClass : function(className){
9092             if(this.hasClass(className)){
9093                 this.removeClass(className);
9094             }else{
9095                 this.addClass(className);
9096             }
9097             return this;
9098         },
9099
9100         /**
9101          * Checks if the specified CSS class exists on this element's DOM node.
9102          * @param {String} className The CSS class to check for
9103          * @return {Boolean} True if the class exists, else false
9104          */
9105         hasClass : function(className){
9106             if (this.dom instanceof SVGElement) {
9107                 return className && (' '+this.dom.className.baseVal +' ').indexOf(' '+className+' ') != -1; 
9108             } 
9109             return className && (' '+this.dom.className+' ').indexOf(' '+className+' ') != -1;
9110         },
9111
9112         /**
9113          * Replaces a CSS class on the element with another.  If the old name does not exist, the new name will simply be added.
9114          * @param {String} oldClassName The CSS class to replace
9115          * @param {String} newClassName The replacement CSS class
9116          * @return {Roo.Element} this
9117          */
9118         replaceClass : function(oldClassName, newClassName){
9119             this.removeClass(oldClassName);
9120             this.addClass(newClassName);
9121             return this;
9122         },
9123
9124         /**
9125          * Returns an object with properties matching the styles requested.
9126          * For example, el.getStyles('color', 'font-size', 'width') might return
9127          * {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}.
9128          * @param {String} style1 A style name
9129          * @param {String} style2 A style name
9130          * @param {String} etc.
9131          * @return {Object} The style object
9132          */
9133         getStyles : function(){
9134             var a = arguments, len = a.length, r = {};
9135             for(var i = 0; i < len; i++){
9136                 r[a[i]] = this.getStyle(a[i]);
9137             }
9138             return r;
9139         },
9140
9141         /**
9142          * Normalizes currentStyle and computedStyle. This is not YUI getStyle, it is an optimised version.
9143          * @param {String} property The style property whose value is returned.
9144          * @return {String} The current value of the style property for this element.
9145          */
9146         getStyle : function(){
9147             return view && view.getComputedStyle ?
9148                 function(prop){
9149                     var el = this.dom, v, cs, camel;
9150                     if(prop == 'float'){
9151                         prop = "cssFloat";
9152                     }
9153                     if(el.style && (v = el.style[prop])){
9154                         return v;
9155                     }
9156                     if(cs = view.getComputedStyle(el, "")){
9157                         if(!(camel = propCache[prop])){
9158                             camel = propCache[prop] = prop.replace(camelRe, camelFn);
9159                         }
9160                         return cs[camel];
9161                     }
9162                     return null;
9163                 } :
9164                 function(prop){
9165                     var el = this.dom, v, cs, camel;
9166                     if(prop == 'opacity'){
9167                         if(typeof el.style.filter == 'string'){
9168                             var m = el.style.filter.match(/alpha\(opacity=(.*)\)/i);
9169                             if(m){
9170                                 var fv = parseFloat(m[1]);
9171                                 if(!isNaN(fv)){
9172                                     return fv ? fv / 100 : 0;
9173                                 }
9174                             }
9175                         }
9176                         return 1;
9177                     }else if(prop == 'float'){
9178                         prop = "styleFloat";
9179                     }
9180                     if(!(camel = propCache[prop])){
9181                         camel = propCache[prop] = prop.replace(camelRe, camelFn);
9182                     }
9183                     if(v = el.style[camel]){
9184                         return v;
9185                     }
9186                     if(cs = el.currentStyle){
9187                         return cs[camel];
9188                     }
9189                     return null;
9190                 };
9191         }(),
9192
9193         /**
9194          * Wrapper for setting style properties, also takes single object parameter of multiple styles.
9195          * @param {String/Object} property The style property to be set, or an object of multiple styles.
9196          * @param {String} value (optional) The value to apply to the given property, or null if an object was passed.
9197          * @return {Roo.Element} this
9198          */
9199         setStyle : function(prop, value){
9200             if(typeof prop == "string"){
9201                 
9202                 if (prop == 'float') {
9203                     this.setStyle(Roo.isIE ? 'styleFloat'  : 'cssFloat', value);
9204                     return this;
9205                 }
9206                 
9207                 var camel;
9208                 if(!(camel = propCache[prop])){
9209                     camel = propCache[prop] = prop.replace(camelRe, camelFn);
9210                 }
9211                 
9212                 if(camel == 'opacity') {
9213                     this.setOpacity(value);
9214                 }else{
9215                     this.dom.style[camel] = value;
9216                 }
9217             }else{
9218                 for(var style in prop){
9219                     if(typeof prop[style] != "function"){
9220                        this.setStyle(style, prop[style]);
9221                     }
9222                 }
9223             }
9224             return this;
9225         },
9226
9227         /**
9228          * More flexible version of {@link #setStyle} for setting style properties.
9229          * @param {String/Object/Function} styles A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or
9230          * a function which returns such a specification.
9231          * @return {Roo.Element} this
9232          */
9233         applyStyles : function(style){
9234             Roo.DomHelper.applyStyles(this.dom, style);
9235             return this;
9236         },
9237
9238         /**
9239           * 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).
9240           * @return {Number} The X position of the element
9241           */
9242         getX : function(){
9243             return D.getX(this.dom);
9244         },
9245
9246         /**
9247           * 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).
9248           * @return {Number} The Y position of the element
9249           */
9250         getY : function(){
9251             return D.getY(this.dom);
9252         },
9253
9254         /**
9255           * 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).
9256           * @return {Array} The XY position of the element
9257           */
9258         getXY : function(){
9259             return D.getXY(this.dom);
9260         },
9261
9262         /**
9263          * 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).
9264          * @param {Number} The X position of the element
9265          * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
9266          * @return {Roo.Element} this
9267          */
9268         setX : function(x, animate){
9269             if(!animate || !A){
9270                 D.setX(this.dom, x);
9271             }else{
9272                 this.setXY([x, this.getY()], this.preanim(arguments, 1));
9273             }
9274             return this;
9275         },
9276
9277         /**
9278          * 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).
9279          * @param {Number} The Y position of the element
9280          * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
9281          * @return {Roo.Element} this
9282          */
9283         setY : function(y, animate){
9284             if(!animate || !A){
9285                 D.setY(this.dom, y);
9286             }else{
9287                 this.setXY([this.getX(), y], this.preanim(arguments, 1));
9288             }
9289             return this;
9290         },
9291
9292         /**
9293          * Sets the element's left position directly using CSS style (instead of {@link #setX}).
9294          * @param {String} left The left CSS property value
9295          * @return {Roo.Element} this
9296          */
9297         setLeft : function(left){
9298             this.setStyle("left", this.addUnits(left));
9299             return this;
9300         },
9301
9302         /**
9303          * Sets the element's top position directly using CSS style (instead of {@link #setY}).
9304          * @param {String} top The top CSS property value
9305          * @return {Roo.Element} this
9306          */
9307         setTop : function(top){
9308             this.setStyle("top", this.addUnits(top));
9309             return this;
9310         },
9311
9312         /**
9313          * Sets the element's CSS right style.
9314          * @param {String} right The right CSS property value
9315          * @return {Roo.Element} this
9316          */
9317         setRight : function(right){
9318             this.setStyle("right", this.addUnits(right));
9319             return this;
9320         },
9321
9322         /**
9323          * Sets the element's CSS bottom style.
9324          * @param {String} bottom The bottom CSS property value
9325          * @return {Roo.Element} this
9326          */
9327         setBottom : function(bottom){
9328             this.setStyle("bottom", this.addUnits(bottom));
9329             return this;
9330         },
9331
9332         /**
9333          * Sets the position of the element in page coordinates, regardless of how the element is positioned.
9334          * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
9335          * @param {Array} pos Contains X & Y [x, y] values for new position (coordinates are page-based)
9336          * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
9337          * @return {Roo.Element} this
9338          */
9339         setXY : function(pos, animate){
9340             if(!animate || !A){
9341                 D.setXY(this.dom, pos);
9342             }else{
9343                 this.anim({points: {to: pos}}, this.preanim(arguments, 1), 'motion');
9344             }
9345             return this;
9346         },
9347
9348         /**
9349          * Sets the position of the element in page coordinates, regardless of how the element is positioned.
9350          * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
9351          * @param {Number} x X value for new position (coordinates are page-based)
9352          * @param {Number} y Y value for new position (coordinates are page-based)
9353          * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
9354          * @return {Roo.Element} this
9355          */
9356         setLocation : function(x, y, animate){
9357             this.setXY([x, y], this.preanim(arguments, 2));
9358             return this;
9359         },
9360
9361         /**
9362          * Sets the position of the element in page coordinates, regardless of how the element is positioned.
9363          * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
9364          * @param {Number} x X value for new position (coordinates are page-based)
9365          * @param {Number} y Y value for new position (coordinates are page-based)
9366          * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
9367          * @return {Roo.Element} this
9368          */
9369         moveTo : function(x, y, animate){
9370             this.setXY([x, y], this.preanim(arguments, 2));
9371             return this;
9372         },
9373
9374         /**
9375          * Returns the region of the given element.
9376          * The element must be part of the DOM tree to have a region (display:none or elements not appended return false).
9377          * @return {Region} A Roo.lib.Region containing "top, left, bottom, right" member data.
9378          */
9379         getRegion : function(){
9380             return D.getRegion(this.dom);
9381         },
9382
9383         /**
9384          * Returns the offset height of the element
9385          * @param {Boolean} contentHeight (optional) true to get the height minus borders and padding
9386          * @return {Number} The element's height
9387          */
9388         getHeight : function(contentHeight){
9389             var h = this.dom.offsetHeight || 0;
9390             return contentHeight !== true ? h : h-this.getBorderWidth("tb")-this.getPadding("tb");
9391         },
9392
9393         /**
9394          * Returns the offset width of the element
9395          * @param {Boolean} contentWidth (optional) true to get the width minus borders and padding
9396          * @return {Number} The element's width
9397          */
9398         getWidth : function(contentWidth){
9399             var w = this.dom.offsetWidth || 0;
9400             return contentWidth !== true ? w : w-this.getBorderWidth("lr")-this.getPadding("lr");
9401         },
9402
9403         /**
9404          * Returns either the offsetHeight or the height of this element based on CSS height adjusted by padding or borders
9405          * when needed to simulate offsetHeight when offsets aren't available. This may not work on display:none elements
9406          * if a height has not been set using CSS.
9407          * @return {Number}
9408          */
9409         getComputedHeight : function(){
9410             var h = Math.max(this.dom.offsetHeight, this.dom.clientHeight);
9411             if(!h){
9412                 h = parseInt(this.getStyle('height'), 10) || 0;
9413                 if(!this.isBorderBox()){
9414                     h += this.getFrameWidth('tb');
9415                 }
9416             }
9417             return h;
9418         },
9419
9420         /**
9421          * Returns either the offsetWidth or the width of this element based on CSS width adjusted by padding or borders
9422          * when needed to simulate offsetWidth when offsets aren't available. This may not work on display:none elements
9423          * if a width has not been set using CSS.
9424          * @return {Number}
9425          */
9426         getComputedWidth : function(){
9427             var w = Math.max(this.dom.offsetWidth, this.dom.clientWidth);
9428             if(!w){
9429                 w = parseInt(this.getStyle('width'), 10) || 0;
9430                 if(!this.isBorderBox()){
9431                     w += this.getFrameWidth('lr');
9432                 }
9433             }
9434             return w;
9435         },
9436
9437         /**
9438          * Returns the size of the element.
9439          * @param {Boolean} contentSize (optional) true to get the width/size minus borders and padding
9440          * @return {Object} An object containing the element's size {width: (element width), height: (element height)}
9441          */
9442         getSize : function(contentSize){
9443             return {width: this.getWidth(contentSize), height: this.getHeight(contentSize)};
9444         },
9445
9446         /**
9447          * Returns the width and height of the viewport.
9448          * @return {Object} An object containing the viewport's size {width: (viewport width), height: (viewport height)}
9449          */
9450         getViewSize : function(){
9451             var d = this.dom, doc = document, aw = 0, ah = 0;
9452             if(d == doc || d == doc.body){
9453                 return {width : D.getViewWidth(), height: D.getViewHeight()};
9454             }else{
9455                 return {
9456                     width : d.clientWidth,
9457                     height: d.clientHeight
9458                 };
9459             }
9460         },
9461
9462         /**
9463          * Returns the value of the "value" attribute
9464          * @param {Boolean} asNumber true to parse the value as a number
9465          * @return {String/Number}
9466          */
9467         getValue : function(asNumber){
9468             return asNumber ? parseInt(this.dom.value, 10) : this.dom.value;
9469         },
9470
9471         // private
9472         adjustWidth : function(width){
9473             if(typeof width == "number"){
9474                 if(this.autoBoxAdjust && !this.isBorderBox()){
9475                    width -= (this.getBorderWidth("lr") + this.getPadding("lr"));
9476                 }
9477                 if(width < 0){
9478                     width = 0;
9479                 }
9480             }
9481             return width;
9482         },
9483
9484         // private
9485         adjustHeight : function(height){
9486             if(typeof height == "number"){
9487                if(this.autoBoxAdjust && !this.isBorderBox()){
9488                    height -= (this.getBorderWidth("tb") + this.getPadding("tb"));
9489                }
9490                if(height < 0){
9491                    height = 0;
9492                }
9493             }
9494             return height;
9495         },
9496
9497         /**
9498          * Set the width of the element
9499          * @param {Number} width The new width
9500          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
9501          * @return {Roo.Element} this
9502          */
9503         setWidth : function(width, animate){
9504             width = this.adjustWidth(width);
9505             if(!animate || !A){
9506                 this.dom.style.width = this.addUnits(width);
9507             }else{
9508                 this.anim({width: {to: width}}, this.preanim(arguments, 1));
9509             }
9510             return this;
9511         },
9512
9513         /**
9514          * Set the height of the element
9515          * @param {Number} height The new height
9516          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
9517          * @return {Roo.Element} this
9518          */
9519          setHeight : function(height, animate){
9520             height = this.adjustHeight(height);
9521             if(!animate || !A){
9522                 this.dom.style.height = this.addUnits(height);
9523             }else{
9524                 this.anim({height: {to: height}}, this.preanim(arguments, 1));
9525             }
9526             return this;
9527         },
9528
9529         /**
9530          * Set the size of the element. If animation is true, both width an height will be animated concurrently.
9531          * @param {Number} width The new width
9532          * @param {Number} height The new height
9533          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
9534          * @return {Roo.Element} this
9535          */
9536          setSize : function(width, height, animate){
9537             if(typeof width == "object"){ // in case of object from getSize()
9538                 height = width.height; width = width.width;
9539             }
9540             width = this.adjustWidth(width); height = this.adjustHeight(height);
9541             if(!animate || !A){
9542                 this.dom.style.width = this.addUnits(width);
9543                 this.dom.style.height = this.addUnits(height);
9544             }else{
9545                 this.anim({width: {to: width}, height: {to: height}}, this.preanim(arguments, 2));
9546             }
9547             return this;
9548         },
9549
9550         /**
9551          * Sets the element's position and size in one shot. If animation is true then width, height, x and y will be animated concurrently.
9552          * @param {Number} x X value for new position (coordinates are page-based)
9553          * @param {Number} y Y value for new position (coordinates are page-based)
9554          * @param {Number} width The new width
9555          * @param {Number} height The new height
9556          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
9557          * @return {Roo.Element} this
9558          */
9559         setBounds : function(x, y, width, height, animate){
9560             if(!animate || !A){
9561                 this.setSize(width, height);
9562                 this.setLocation(x, y);
9563             }else{
9564                 width = this.adjustWidth(width); height = this.adjustHeight(height);
9565                 this.anim({points: {to: [x, y]}, width: {to: width}, height: {to: height}},
9566                               this.preanim(arguments, 4), 'motion');
9567             }
9568             return this;
9569         },
9570
9571         /**
9572          * 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.
9573          * @param {Roo.lib.Region} region The region to fill
9574          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
9575          * @return {Roo.Element} this
9576          */
9577         setRegion : function(region, animate){
9578             this.setBounds(region.left, region.top, region.right-region.left, region.bottom-region.top, this.preanim(arguments, 1));
9579             return this;
9580         },
9581
9582         /**
9583          * Appends an event handler
9584          *
9585          * @param {String}   eventName     The type of event to append
9586          * @param {Function} fn        The method the event invokes
9587          * @param {Object} scope       (optional) The scope (this object) of the fn
9588          * @param {Object}   options   (optional)An object with standard {@link Roo.EventManager#addListener} options
9589          */
9590         addListener : function(eventName, fn, scope, options)
9591         {
9592             if (eventName == 'dblclick') { // doublclick (touchstart) - faked on touch.
9593                 this.addListener('touchstart', this.onTapHandler, this);
9594             }
9595             
9596             // we need to handle a special case where dom element is a svg element.
9597             // in this case we do not actua
9598             if (!this.dom) {
9599                 return;
9600             }
9601             
9602             if (this.dom instanceof SVGElement && !(this.dom instanceof SVGSVGElement)) {
9603                 if (typeof(this.listeners[eventName]) == 'undefined') {
9604                     this.listeners[eventName] =  new Roo.util.Event(this, eventName);
9605                 }
9606                 this.listeners[eventName].addListener(fn, scope, options);
9607                 return;
9608             }
9609             
9610                 
9611             Roo.EventManager.on(this.dom,  eventName, fn, scope || this, options);
9612             
9613             
9614         },
9615         tapedTwice : false,
9616         onTapHandler : function(event)
9617         {
9618             if(!this.tapedTwice) {
9619                 this.tapedTwice = true;
9620                 var s = this;
9621                 setTimeout( function() {
9622                     s.tapedTwice = false;
9623                 }, 300 );
9624                 return;
9625             }
9626             event.preventDefault();
9627             var revent = new MouseEvent('dblclick',  {
9628                 view: window,
9629                 bubbles: true,
9630                 cancelable: true
9631             });
9632              
9633             this.dom.dispatchEvent(revent);
9634             //action on double tap goes below
9635              
9636         }, 
9637  
9638         /**
9639          * Removes an event handler from this element
9640          * @param {String} eventName the type of event to remove
9641          * @param {Function} fn the method the event invokes
9642          * @param {Function} scope (needed for svg fake listeners)
9643          * @return {Roo.Element} this
9644          */
9645         removeListener : function(eventName, fn, scope){
9646             Roo.EventManager.removeListener(this.dom,  eventName, fn);
9647             if (typeof(this.listeners) == 'undefined'  || typeof(this.listeners[eventName]) == 'undefined') {
9648                 return this;
9649             }
9650             this.listeners[eventName].removeListener(fn, scope);
9651             return this;
9652         },
9653
9654         /**
9655          * Removes all previous added listeners from this element
9656          * @return {Roo.Element} this
9657          */
9658         removeAllListeners : function(){
9659             E.purgeElement(this.dom);
9660             this.listeners = {};
9661             return this;
9662         },
9663
9664         relayEvent : function(eventName, observable){
9665             this.on(eventName, function(e){
9666                 observable.fireEvent(eventName, e);
9667             });
9668         },
9669
9670         
9671         /**
9672          * Set the opacity of the element
9673          * @param {Float} opacity The new opacity. 0 = transparent, .5 = 50% visibile, 1 = fully visible, etc
9674          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
9675          * @return {Roo.Element} this
9676          */
9677          setOpacity : function(opacity, animate){
9678             if(!animate || !A){
9679                 var s = this.dom.style;
9680                 if(Roo.isIE){
9681                     s.zoom = 1;
9682                     s.filter = (s.filter || '').replace(/alpha\([^\)]*\)/gi,"") +
9683                                (opacity == 1 ? "" : "alpha(opacity=" + opacity * 100 + ")");
9684                 }else{
9685                     s.opacity = opacity;
9686                 }
9687             }else{
9688                 this.anim({opacity: {to: opacity}}, this.preanim(arguments, 1), null, .35, 'easeIn');
9689             }
9690             return this;
9691         },
9692
9693         /**
9694          * Gets the left X coordinate
9695          * @param {Boolean} local True to get the local css position instead of page coordinate
9696          * @return {Number}
9697          */
9698         getLeft : function(local){
9699             if(!local){
9700                 return this.getX();
9701             }else{
9702                 return parseInt(this.getStyle("left"), 10) || 0;
9703             }
9704         },
9705
9706         /**
9707          * Gets the right X coordinate of the element (element X position + element width)
9708          * @param {Boolean} local True to get the local css position instead of page coordinate
9709          * @return {Number}
9710          */
9711         getRight : function(local){
9712             if(!local){
9713                 return this.getX() + this.getWidth();
9714             }else{
9715                 return (this.getLeft(true) + this.getWidth()) || 0;
9716             }
9717         },
9718
9719         /**
9720          * Gets the top Y coordinate
9721          * @param {Boolean} local True to get the local css position instead of page coordinate
9722          * @return {Number}
9723          */
9724         getTop : function(local) {
9725             if(!local){
9726                 return this.getY();
9727             }else{
9728                 return parseInt(this.getStyle("top"), 10) || 0;
9729             }
9730         },
9731
9732         /**
9733          * Gets the bottom Y coordinate of the element (element Y position + element height)
9734          * @param {Boolean} local True to get the local css position instead of page coordinate
9735          * @return {Number}
9736          */
9737         getBottom : function(local){
9738             if(!local){
9739                 return this.getY() + this.getHeight();
9740             }else{
9741                 return (this.getTop(true) + this.getHeight()) || 0;
9742             }
9743         },
9744
9745         /**
9746         * Initializes positioning on this element. If a desired position is not passed, it will make the
9747         * the element positioned relative IF it is not already positioned.
9748         * @param {String} pos (optional) Positioning to use "relative", "absolute" or "fixed"
9749         * @param {Number} zIndex (optional) The zIndex to apply
9750         * @param {Number} x (optional) Set the page X position
9751         * @param {Number} y (optional) Set the page Y position
9752         */
9753         position : function(pos, zIndex, x, y){
9754             if(!pos){
9755                if(this.getStyle('position') == 'static'){
9756                    this.setStyle('position', 'relative');
9757                }
9758             }else{
9759                 this.setStyle("position", pos);
9760             }
9761             if(zIndex){
9762                 this.setStyle("z-index", zIndex);
9763             }
9764             if(x !== undefined && y !== undefined){
9765                 this.setXY([x, y]);
9766             }else if(x !== undefined){
9767                 this.setX(x);
9768             }else if(y !== undefined){
9769                 this.setY(y);
9770             }
9771         },
9772
9773         /**
9774         * Clear positioning back to the default when the document was loaded
9775         * @param {String} value (optional) The value to use for the left,right,top,bottom, defaults to '' (empty string). You could use 'auto'.
9776         * @return {Roo.Element} this
9777          */
9778         clearPositioning : function(value){
9779             value = value ||'';
9780             this.setStyle({
9781                 "left": value,
9782                 "right": value,
9783                 "top": value,
9784                 "bottom": value,
9785                 "z-index": "",
9786                 "position" : "static"
9787             });
9788             return this;
9789         },
9790
9791         /**
9792         * Gets an object with all CSS positioning properties. Useful along with setPostioning to get
9793         * snapshot before performing an update and then restoring the element.
9794         * @return {Object}
9795         */
9796         getPositioning : function(){
9797             var l = this.getStyle("left");
9798             var t = this.getStyle("top");
9799             return {
9800                 "position" : this.getStyle("position"),
9801                 "left" : l,
9802                 "right" : l ? "" : this.getStyle("right"),
9803                 "top" : t,
9804                 "bottom" : t ? "" : this.getStyle("bottom"),
9805                 "z-index" : this.getStyle("z-index")
9806             };
9807         },
9808
9809         /**
9810          * Gets the width of the border(s) for the specified side(s)
9811          * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
9812          * passing lr would get the border (l)eft width + the border (r)ight width.
9813          * @return {Number} The width of the sides passed added together
9814          */
9815         getBorderWidth : function(side){
9816             return this.addStyles(side, El.borders);
9817         },
9818
9819         /**
9820          * Gets the width of the padding(s) for the specified side(s)
9821          * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
9822          * passing lr would get the padding (l)eft + the padding (r)ight.
9823          * @return {Number} The padding of the sides passed added together
9824          */
9825         getPadding : function(side){
9826             return this.addStyles(side, El.paddings);
9827         },
9828
9829         /**
9830         * Set positioning with an object returned by getPositioning().
9831         * @param {Object} posCfg
9832         * @return {Roo.Element} this
9833          */
9834         setPositioning : function(pc){
9835             this.applyStyles(pc);
9836             if(pc.right == "auto"){
9837                 this.dom.style.right = "";
9838             }
9839             if(pc.bottom == "auto"){
9840                 this.dom.style.bottom = "";
9841             }
9842             return this;
9843         },
9844
9845         // private
9846         fixDisplay : function(){
9847             if(this.getStyle("display") == "none"){
9848                 this.setStyle("visibility", "hidden");
9849                 this.setStyle("display", this.originalDisplay); // first try reverting to default
9850                 if(this.getStyle("display") == "none"){ // if that fails, default to block
9851                     this.setStyle("display", "block");
9852                 }
9853             }
9854         },
9855
9856         /**
9857          * Quick set left and top adding default units
9858          * @param {String} left The left CSS property value
9859          * @param {String} top The top CSS property value
9860          * @return {Roo.Element} this
9861          */
9862          setLeftTop : function(left, top){
9863             this.dom.style.left = this.addUnits(left);
9864             this.dom.style.top = this.addUnits(top);
9865             return this;
9866         },
9867
9868         /**
9869          * Move this element relative to its current position.
9870          * @param {String} direction Possible values are: "l","left" - "r","right" - "t","top","up" - "b","bottom","down".
9871          * @param {Number} distance How far to move the element in pixels
9872          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
9873          * @return {Roo.Element} this
9874          */
9875          move : function(direction, distance, animate){
9876             var xy = this.getXY();
9877             direction = direction.toLowerCase();
9878             switch(direction){
9879                 case "l":
9880                 case "left":
9881                     this.moveTo(xy[0]-distance, xy[1], this.preanim(arguments, 2));
9882                     break;
9883                case "r":
9884                case "right":
9885                     this.moveTo(xy[0]+distance, xy[1], this.preanim(arguments, 2));
9886                     break;
9887                case "t":
9888                case "top":
9889                case "up":
9890                     this.moveTo(xy[0], xy[1]-distance, this.preanim(arguments, 2));
9891                     break;
9892                case "b":
9893                case "bottom":
9894                case "down":
9895                     this.moveTo(xy[0], xy[1]+distance, this.preanim(arguments, 2));
9896                     break;
9897             }
9898             return this;
9899         },
9900
9901         /**
9902          *  Store the current overflow setting and clip overflow on the element - use {@link #unclip} to remove
9903          * @return {Roo.Element} this
9904          */
9905         clip : function(){
9906             if(!this.isClipped){
9907                this.isClipped = true;
9908                this.originalClip = {
9909                    "o": this.getStyle("overflow"),
9910                    "x": this.getStyle("overflow-x"),
9911                    "y": this.getStyle("overflow-y")
9912                };
9913                this.setStyle("overflow", "hidden");
9914                this.setStyle("overflow-x", "hidden");
9915                this.setStyle("overflow-y", "hidden");
9916             }
9917             return this;
9918         },
9919
9920         /**
9921          *  Return clipping (overflow) to original clipping before clip() was called
9922          * @return {Roo.Element} this
9923          */
9924         unclip : function(){
9925             if(this.isClipped){
9926                 this.isClipped = false;
9927                 var o = this.originalClip;
9928                 if(o.o){this.setStyle("overflow", o.o);}
9929                 if(o.x){this.setStyle("overflow-x", o.x);}
9930                 if(o.y){this.setStyle("overflow-y", o.y);}
9931             }
9932             return this;
9933         },
9934
9935
9936         /**
9937          * Gets the x,y coordinates specified by the anchor position on the element.
9938          * @param {String} anchor (optional) The specified anchor position (defaults to "c").  See {@link #alignTo} for details on supported anchor positions.
9939          * @param {Object} size (optional) An object containing the size to use for calculating anchor position
9940          *                       {width: (target width), height: (target height)} (defaults to the element's current size)
9941          * @param {Boolean} local (optional) True to get the local (element top/left-relative) anchor position instead of page coordinates
9942          * @return {Array} [x, y] An array containing the element's x and y coordinates
9943          */
9944         getAnchorXY : function(anchor, local, s){
9945             //Passing a different size is useful for pre-calculating anchors,
9946             //especially for anchored animations that change the el size.
9947
9948             var w, h, vp = false;
9949             if(!s){
9950                 var d = this.dom;
9951                 if(d == document.body || d == document){
9952                     vp = true;
9953                     w = D.getViewWidth(); h = D.getViewHeight();
9954                 }else{
9955                     w = this.getWidth(); h = this.getHeight();
9956                 }
9957             }else{
9958                 w = s.width;  h = s.height;
9959             }
9960             var x = 0, y = 0, r = Math.round;
9961             switch((anchor || "tl").toLowerCase()){
9962                 case "c":
9963                     x = r(w*.5);
9964                     y = r(h*.5);
9965                 break;
9966                 case "t":
9967                     x = r(w*.5);
9968                     y = 0;
9969                 break;
9970                 case "l":
9971                     x = 0;
9972                     y = r(h*.5);
9973                 break;
9974                 case "r":
9975                     x = w;
9976                     y = r(h*.5);
9977                 break;
9978                 case "b":
9979                     x = r(w*.5);
9980                     y = h;
9981                 break;
9982                 case "tl":
9983                     x = 0;
9984                     y = 0;
9985                 break;
9986                 case "bl":
9987                     x = 0;
9988                     y = h;
9989                 break;
9990                 case "br":
9991                     x = w;
9992                     y = h;
9993                 break;
9994                 case "tr":
9995                     x = w;
9996                     y = 0;
9997                 break;
9998             }
9999             if(local === true){
10000                 return [x, y];
10001             }
10002             if(vp){
10003                 var sc = this.getScroll();
10004                 return [x + sc.left, y + sc.top];
10005             }
10006             //Add the element's offset xy
10007             var o = this.getXY();
10008             return [x+o[0], y+o[1]];
10009         },
10010
10011         /**
10012          * Gets the x,y coordinates to align this element with another element. See {@link #alignTo} for more info on the
10013          * supported position values.
10014          * @param {String/HTMLElement/Roo.Element} element The element to align to.
10015          * @param {String} position The position to align to.
10016          * @param {Array} offsets (optional) Offset the positioning by [x, y]
10017          * @return {Array} [x, y]
10018          */
10019         getAlignToXY : function(el, p, o)
10020         {
10021             el = Roo.get(el);
10022             var d = this.dom;
10023             if(!el.dom){
10024                 throw "Element.alignTo with an element that doesn't exist";
10025             }
10026             var c = false; //constrain to viewport
10027             var p1 = "", p2 = "";
10028             o = o || [0,0];
10029
10030             if(!p){
10031                 p = "tl-bl";
10032             }else if(p == "?"){
10033                 p = "tl-bl?";
10034             }else if(p.indexOf("-") == -1){
10035                 p = "tl-" + p;
10036             }
10037             p = p.toLowerCase();
10038             var m = p.match(/^([a-z]+)-([a-z]+)(\?)?$/);
10039             if(!m){
10040                throw "Element.alignTo with an invalid alignment " + p;
10041             }
10042             p1 = m[1]; p2 = m[2]; c = !!m[3];
10043
10044             //Subtract the aligned el's internal xy from the target's offset xy
10045             //plus custom offset to get the aligned el's new offset xy
10046             var a1 = this.getAnchorXY(p1, true);
10047             var a2 = el.getAnchorXY(p2, false);
10048             var x = a2[0] - a1[0] + o[0];
10049             var y = a2[1] - a1[1] + o[1];
10050             if(c){
10051                 //constrain the aligned el to viewport if necessary
10052                 var w = this.getWidth(), h = this.getHeight(), r = el.getRegion();
10053                 // 5px of margin for ie
10054                 var dw = D.getViewWidth()-5, dh = D.getViewHeight()-5;
10055
10056                 //If we are at a viewport boundary and the aligned el is anchored on a target border that is
10057                 //perpendicular to the vp border, allow the aligned el to slide on that border,
10058                 //otherwise swap the aligned el to the opposite border of the target.
10059                 var p1y = p1.charAt(0), p1x = p1.charAt(p1.length-1);
10060                var p2y = p2.charAt(0), p2x = p2.charAt(p2.length-1);
10061                var swapY = ((p1y=="t" && p2y=="b") || (p1y=="b" && p2y=="t")  );
10062                var swapX = ((p1x=="r" && p2x=="l") || (p1x=="l" && p2x=="r"));
10063
10064                var doc = document;
10065                var scrollX = (doc.documentElement.scrollLeft || doc.body.scrollLeft || 0)+5;
10066                var scrollY = (doc.documentElement.scrollTop || doc.body.scrollTop || 0)+5;
10067
10068                if((x+w) > dw + scrollX){
10069                     x = swapX ? r.left-w : dw+scrollX-w;
10070                 }
10071                if(x < scrollX){
10072                    x = swapX ? r.right : scrollX;
10073                }
10074                if((y+h) > dh + scrollY){
10075                     y = swapY ? r.top-h : dh+scrollY-h;
10076                 }
10077                if (y < scrollY){
10078                    y = swapY ? r.bottom : scrollY;
10079                }
10080             }
10081             return [x,y];
10082         },
10083
10084         // private
10085         getConstrainToXY : function(){
10086             var os = {top:0, left:0, bottom:0, right: 0};
10087
10088             return function(el, local, offsets, proposedXY){
10089                 el = Roo.get(el);
10090                 offsets = offsets ? Roo.applyIf(offsets, os) : os;
10091
10092                 var vw, vh, vx = 0, vy = 0;
10093                 if(el.dom == document.body || el.dom == document){
10094                     vw = Roo.lib.Dom.getViewWidth();
10095                     vh = Roo.lib.Dom.getViewHeight();
10096                 }else{
10097                     vw = el.dom.clientWidth;
10098                     vh = el.dom.clientHeight;
10099                     if(!local){
10100                         var vxy = el.getXY();
10101                         vx = vxy[0];
10102                         vy = vxy[1];
10103                     }
10104                 }
10105
10106                 var s = el.getScroll();
10107
10108                 vx += offsets.left + s.left;
10109                 vy += offsets.top + s.top;
10110
10111                 vw -= offsets.right;
10112                 vh -= offsets.bottom;
10113
10114                 var vr = vx+vw;
10115                 var vb = vy+vh;
10116
10117                 var xy = proposedXY || (!local ? this.getXY() : [this.getLeft(true), this.getTop(true)]);
10118                 var x = xy[0], y = xy[1];
10119                 var w = this.dom.offsetWidth, h = this.dom.offsetHeight;
10120
10121                 // only move it if it needs it
10122                 var moved = false;
10123
10124                 // first validate right/bottom
10125                 if((x + w) > vr){
10126                     x = vr - w;
10127                     moved = true;
10128                 }
10129                 if((y + h) > vb){
10130                     y = vb - h;
10131                     moved = true;
10132                 }
10133                 // then make sure top/left isn't negative
10134                 if(x < vx){
10135                     x = vx;
10136                     moved = true;
10137                 }
10138                 if(y < vy){
10139                     y = vy;
10140                     moved = true;
10141                 }
10142                 return moved ? [x, y] : false;
10143             };
10144         }(),
10145
10146         // private
10147         adjustForConstraints : function(xy, parent, offsets){
10148             return this.getConstrainToXY(parent || document, false, offsets, xy) ||  xy;
10149         },
10150
10151         /**
10152          * Aligns this element with another element relative to the specified anchor points. If the other element is the
10153          * document it aligns it to the viewport.
10154          * The position parameter is optional, and can be specified in any one of the following formats:
10155          * <ul>
10156          *   <li><b>Blank</b>: Defaults to aligning the element's top-left corner to the target's bottom-left corner ("tl-bl").</li>
10157          *   <li><b>One anchor (deprecated)</b>: The passed anchor position is used as the target element's anchor point.
10158          *       The element being aligned will position its top-left corner (tl) to that point.  <i>This method has been
10159          *       deprecated in favor of the newer two anchor syntax below</i>.</li>
10160          *   <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
10161          *       element's anchor point, and the second value is used as the target's anchor point.</li>
10162          * </ul>
10163          * In addition to the anchor points, the position parameter also supports the "?" character.  If "?" is passed at the end of
10164          * the position string, the element will attempt to align as specified, but the position will be adjusted to constrain to
10165          * the viewport if necessary.  Note that the element being aligned might be swapped to align to a different position than
10166          * that specified in order to enforce the viewport constraints.
10167          * Following are all of the supported anchor positions:
10168     <pre>
10169     Value  Description
10170     -----  -----------------------------
10171     tl     The top left corner (default)
10172     t      The center of the top edge
10173     tr     The top right corner
10174     l      The center of the left edge
10175     c      In the center of the element
10176     r      The center of the right edge
10177     bl     The bottom left corner
10178     b      The center of the bottom edge
10179     br     The bottom right corner
10180     </pre>
10181     Example Usage:
10182     <pre><code>
10183     // align el to other-el using the default positioning ("tl-bl", non-constrained)
10184     el.alignTo("other-el");
10185
10186     // align the top left corner of el with the top right corner of other-el (constrained to viewport)
10187     el.alignTo("other-el", "tr?");
10188
10189     // align the bottom right corner of el with the center left edge of other-el
10190     el.alignTo("other-el", "br-l?");
10191
10192     // align the center of el with the bottom left corner of other-el and
10193     // adjust the x position by -6 pixels (and the y position by 0)
10194     el.alignTo("other-el", "c-bl", [-6, 0]);
10195     </code></pre>
10196          * @param {String/HTMLElement/Roo.Element} element The element to align to.
10197          * @param {String} position The position to align to.
10198          * @param {Array} offsets (optional) Offset the positioning by [x, y]
10199          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
10200          * @return {Roo.Element} this
10201          */
10202         alignTo : function(element, position, offsets, animate){
10203             var xy = this.getAlignToXY(element, position, offsets);
10204             this.setXY(xy, this.preanim(arguments, 3));
10205             return this;
10206         },
10207
10208         /**
10209          * Anchors an element to another element and realigns it when the window is resized.
10210          * @param {String/HTMLElement/Roo.Element} element The element to align to.
10211          * @param {String} position The position to align to.
10212          * @param {Array} offsets (optional) Offset the positioning by [x, y]
10213          * @param {Boolean/Object} animate (optional) True for the default animation or a standard Element animation config object
10214          * @param {Boolean/Number} monitorScroll (optional) True to monitor body scroll and reposition. If this parameter
10215          * is a number, it is used as the buffer delay (defaults to 50ms).
10216          * @param {Function} callback The function to call after the animation finishes
10217          * @return {Roo.Element} this
10218          */
10219         anchorTo : function(el, alignment, offsets, animate, monitorScroll, callback){
10220             var action = function(){
10221                 this.alignTo(el, alignment, offsets, animate);
10222                 Roo.callback(callback, this);
10223             };
10224             Roo.EventManager.onWindowResize(action, this);
10225             var tm = typeof monitorScroll;
10226             if(tm != 'undefined'){
10227                 Roo.EventManager.on(window, 'scroll', action, this,
10228                     {buffer: tm == 'number' ? monitorScroll : 50});
10229             }
10230             action.call(this); // align immediately
10231             return this;
10232         },
10233         /**
10234          * Clears any opacity settings from this element. Required in some cases for IE.
10235          * @return {Roo.Element} this
10236          */
10237         clearOpacity : function(){
10238             if (window.ActiveXObject) {
10239                 if(typeof this.dom.style.filter == 'string' && (/alpha/i).test(this.dom.style.filter)){
10240                     this.dom.style.filter = "";
10241                 }
10242             } else {
10243                 this.dom.style.opacity = "";
10244                 this.dom.style["-moz-opacity"] = "";
10245                 this.dom.style["-khtml-opacity"] = "";
10246             }
10247             return this;
10248         },
10249
10250         /**
10251          * Hide this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
10252          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
10253          * @return {Roo.Element} this
10254          */
10255         hide : function(animate){
10256             this.setVisible(false, this.preanim(arguments, 0));
10257             return this;
10258         },
10259
10260         /**
10261         * Show this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
10262         * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
10263          * @return {Roo.Element} this
10264          */
10265         show : function(animate){
10266             this.setVisible(true, this.preanim(arguments, 0));
10267             return this;
10268         },
10269
10270         /**
10271          * @private Test if size has a unit, otherwise appends the default
10272          */
10273         addUnits : function(size){
10274             return Roo.Element.addUnits(size, this.defaultUnit);
10275         },
10276
10277         /**
10278          * Temporarily enables offsets (width,height,x,y) for an element with display:none, use endMeasure() when done.
10279          * @return {Roo.Element} this
10280          */
10281         beginMeasure : function(){
10282             var el = this.dom;
10283             if(el.offsetWidth || el.offsetHeight){
10284                 return this; // offsets work already
10285             }
10286             var changed = [];
10287             var p = this.dom, b = document.body; // start with this element
10288             while((!el.offsetWidth && !el.offsetHeight) && p && p.tagName && p != b){
10289                 var pe = Roo.get(p);
10290                 if(pe.getStyle('display') == 'none'){
10291                     changed.push({el: p, visibility: pe.getStyle("visibility")});
10292                     p.style.visibility = "hidden";
10293                     p.style.display = "block";
10294                 }
10295                 p = p.parentNode;
10296             }
10297             this._measureChanged = changed;
10298             return this;
10299
10300         },
10301
10302         /**
10303          * Restores displays to before beginMeasure was called
10304          * @return {Roo.Element} this
10305          */
10306         endMeasure : function(){
10307             var changed = this._measureChanged;
10308             if(changed){
10309                 for(var i = 0, len = changed.length; i < len; i++) {
10310                     var r = changed[i];
10311                     r.el.style.visibility = r.visibility;
10312                     r.el.style.display = "none";
10313                 }
10314                 this._measureChanged = null;
10315             }
10316             return this;
10317         },
10318
10319         /**
10320         * Update the innerHTML of this element, optionally searching for and processing scripts
10321         * @param {String} html The new HTML
10322         * @param {Boolean} loadScripts (optional) true to look for and process scripts
10323         * @param {Function} callback For async script loading you can be noticed when the update completes
10324         * @return {Roo.Element} this
10325          */
10326         update : function(html, loadScripts, callback){
10327             if(typeof html == "undefined"){
10328                 html = "";
10329             }
10330             if(loadScripts !== true){
10331                 this.dom.innerHTML = html;
10332                 if(typeof callback == "function"){
10333                     callback();
10334                 }
10335                 return this;
10336             }
10337             var id = Roo.id();
10338             var dom = this.dom;
10339
10340             html += '<span id="' + id + '"></span>';
10341
10342             E.onAvailable(id, function(){
10343                 var hd = document.getElementsByTagName("head")[0];
10344                 var re = /(?:<script([^>]*)?>)((\n|\r|.)*?)(?:<\/script>)/ig;
10345                 var srcRe = /\ssrc=([\'\"])(.*?)\1/i;
10346                 var typeRe = /\stype=([\'\"])(.*?)\1/i;
10347
10348                 var match;
10349                 while(match = re.exec(html)){
10350                     var attrs = match[1];
10351                     var srcMatch = attrs ? attrs.match(srcRe) : false;
10352                     if(srcMatch && srcMatch[2]){
10353                        var s = document.createElement("script");
10354                        s.src = srcMatch[2];
10355                        var typeMatch = attrs.match(typeRe);
10356                        if(typeMatch && typeMatch[2]){
10357                            s.type = typeMatch[2];
10358                        }
10359                        hd.appendChild(s);
10360                     }else if(match[2] && match[2].length > 0){
10361                         if(window.execScript) {
10362                            window.execScript(match[2]);
10363                         } else {
10364                             /**
10365                              * eval:var:id
10366                              * eval:var:dom
10367                              * eval:var:html
10368                              * 
10369                              */
10370                            window.eval(match[2]);
10371                         }
10372                     }
10373                 }
10374                 var el = document.getElementById(id);
10375                 if(el){el.parentNode.removeChild(el);}
10376                 if(typeof callback == "function"){
10377                     callback();
10378                 }
10379             });
10380             dom.innerHTML = html.replace(/(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)/ig, "");
10381             return this;
10382         },
10383
10384         /**
10385          * Direct access to the UpdateManager update() method (takes the same parameters).
10386          * @param {String/Function} url The url for this request or a function to call to get the url
10387          * @param {String/Object} params (optional) The parameters to pass as either a url encoded string "param1=1&amp;param2=2" or an object {param1: 1, param2: 2}
10388          * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
10389          * @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.
10390          * @return {Roo.Element} this
10391          */
10392         load : function(){
10393             var um = this.getUpdateManager();
10394             um.update.apply(um, arguments);
10395             return this;
10396         },
10397
10398         /**
10399         * Gets this element's UpdateManager
10400         * @return {Roo.UpdateManager} The UpdateManager
10401         */
10402         getUpdateManager : function(){
10403             if(!this.updateManager){
10404                 this.updateManager = new Roo.UpdateManager(this);
10405             }
10406             return this.updateManager;
10407         },
10408
10409         /**
10410          * Disables text selection for this element (normalized across browsers)
10411          * @return {Roo.Element} this
10412          */
10413         unselectable : function(){
10414             this.dom.unselectable = "on";
10415             this.swallowEvent("selectstart", true);
10416             this.applyStyles("-moz-user-select:none;-khtml-user-select:none;");
10417             this.addClass("x-unselectable");
10418             return this;
10419         },
10420
10421         /**
10422         * Calculates the x, y to center this element on the screen
10423         * @return {Array} The x, y values [x, y]
10424         */
10425         getCenterXY : function(){
10426             return this.getAlignToXY(document, 'c-c');
10427         },
10428
10429         /**
10430         * Centers the Element in either the viewport, or another Element.
10431         * @param {String/HTMLElement/Roo.Element} centerIn (optional) The element in which to center the element.
10432         */
10433         center : function(centerIn){
10434             this.alignTo(centerIn || document, 'c-c');
10435             return this;
10436         },
10437
10438         /**
10439          * Tests various css rules/browsers to determine if this element uses a border box
10440          * @return {Boolean}
10441          */
10442         isBorderBox : function(){
10443             return noBoxAdjust[this.dom.tagName.toLowerCase()] || Roo.isBorderBox;
10444         },
10445
10446         /**
10447          * Return a box {x, y, width, height} that can be used to set another elements
10448          * size/location to match this element.
10449          * @param {Boolean} contentBox (optional) If true a box for the content of the element is returned.
10450          * @param {Boolean} local (optional) If true the element's left and top are returned instead of page x/y.
10451          * @return {Object} box An object in the format {x, y, width, height}
10452          */
10453         getBox : function(contentBox, local){
10454             var xy;
10455             if(!local){
10456                 xy = this.getXY();
10457             }else{
10458                 var left = parseInt(this.getStyle("left"), 10) || 0;
10459                 var top = parseInt(this.getStyle("top"), 10) || 0;
10460                 xy = [left, top];
10461             }
10462             var el = this.dom, w = el.offsetWidth, h = el.offsetHeight, bx;
10463             if(!contentBox){
10464                 bx = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: w, height: h};
10465             }else{
10466                 var l = this.getBorderWidth("l")+this.getPadding("l");
10467                 var r = this.getBorderWidth("r")+this.getPadding("r");
10468                 var t = this.getBorderWidth("t")+this.getPadding("t");
10469                 var b = this.getBorderWidth("b")+this.getPadding("b");
10470                 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)};
10471             }
10472             bx.right = bx.x + bx.width;
10473             bx.bottom = bx.y + bx.height;
10474             return bx;
10475         },
10476
10477         /**
10478          * Returns the sum width of the padding and borders for the passed "sides". See getBorderWidth()
10479          for more information about the sides.
10480          * @param {String} sides
10481          * @return {Number}
10482          */
10483         getFrameWidth : function(sides, onlyContentBox){
10484             return onlyContentBox && Roo.isBorderBox ? 0 : (this.getPadding(sides) + this.getBorderWidth(sides));
10485         },
10486
10487         /**
10488          * 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.
10489          * @param {Object} box The box to fill {x, y, width, height}
10490          * @param {Boolean} adjust (optional) Whether to adjust for box-model issues automatically
10491          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
10492          * @return {Roo.Element} this
10493          */
10494         setBox : function(box, adjust, animate){
10495             var w = box.width, h = box.height;
10496             if((adjust && !this.autoBoxAdjust) && !this.isBorderBox()){
10497                w -= (this.getBorderWidth("lr") + this.getPadding("lr"));
10498                h -= (this.getBorderWidth("tb") + this.getPadding("tb"));
10499             }
10500             this.setBounds(box.x, box.y, w, h, this.preanim(arguments, 2));
10501             return this;
10502         },
10503
10504         /**
10505          * Forces the browser to repaint this element
10506          * @return {Roo.Element} this
10507          */
10508          repaint : function(){
10509             var dom = this.dom;
10510             this.addClass("x-repaint");
10511             setTimeout(function(){
10512                 Roo.get(dom).removeClass("x-repaint");
10513             }, 1);
10514             return this;
10515         },
10516
10517         /**
10518          * Returns an object with properties top, left, right and bottom representing the margins of this element unless sides is passed,
10519          * then it returns the calculated width of the sides (see getPadding)
10520          * @param {String} sides (optional) Any combination of l, r, t, b to get the sum of those sides
10521          * @return {Object/Number}
10522          */
10523         getMargins : function(side){
10524             if(!side){
10525                 return {
10526                     top: parseInt(this.getStyle("margin-top"), 10) || 0,
10527                     left: parseInt(this.getStyle("margin-left"), 10) || 0,
10528                     bottom: parseInt(this.getStyle("margin-bottom"), 10) || 0,
10529                     right: parseInt(this.getStyle("margin-right"), 10) || 0
10530                 };
10531             }else{
10532                 return this.addStyles(side, El.margins);
10533              }
10534         },
10535
10536         // private
10537         addStyles : function(sides, styles){
10538             var val = 0, v, w;
10539             for(var i = 0, len = sides.length; i < len; i++){
10540                 v = this.getStyle(styles[sides.charAt(i)]);
10541                 if(v){
10542                      w = parseInt(v, 10);
10543                      if(w){ val += w; }
10544                 }
10545             }
10546             return val;
10547         },
10548
10549         /**
10550          * Creates a proxy element of this element
10551          * @param {String/Object} config The class name of the proxy element or a DomHelper config object
10552          * @param {String/HTMLElement} renderTo (optional) The element or element id to render the proxy to (defaults to document.body)
10553          * @param {Boolean} matchBox (optional) True to align and size the proxy to this element now (defaults to false)
10554          * @return {Roo.Element} The new proxy element
10555          */
10556         createProxy : function(config, renderTo, matchBox){
10557             if(renderTo){
10558                 renderTo = Roo.getDom(renderTo);
10559             }else{
10560                 renderTo = document.body;
10561             }
10562             config = typeof config == "object" ?
10563                 config : {tag : "div", cls: config};
10564             var proxy = Roo.DomHelper.append(renderTo, config, true);
10565             if(matchBox){
10566                proxy.setBox(this.getBox());
10567             }
10568             return proxy;
10569         },
10570
10571         /**
10572          * Puts a mask over this element to disable user interaction. Requires core.css.
10573          * This method can only be applied to elements which accept child nodes.
10574          * @param {String} msg (optional) A message to display in the mask
10575          * @param {String} msgCls (optional) A css class to apply to the msg element - use no-spinner to hide the spinner on bootstrap
10576          * @return {Element} The mask  element
10577          */
10578         mask : function(msg, msgCls)
10579         {
10580             if(this.getStyle("position") == "static" && this.dom.tagName !== 'BODY'){
10581                 this.setStyle("position", "relative");
10582             }
10583             if(!this._mask){
10584                 this._mask = Roo.DomHelper.append(this.dom, {cls:"roo-el-mask"}, true);
10585             }
10586             
10587             this.addClass("x-masked");
10588             this._mask.setDisplayed(true);
10589             
10590             // we wander
10591             var z = 0;
10592             var dom = this.dom;
10593             while (dom && dom.style) {
10594                 if (!isNaN(parseInt(dom.style.zIndex))) {
10595                     z = Math.max(z, parseInt(dom.style.zIndex));
10596                 }
10597                 dom = dom.parentNode;
10598             }
10599             // if we are masking the body - then it hides everything..
10600             if (this.dom == document.body) {
10601                 z = 1000000;
10602                 this._mask.setWidth(Roo.lib.Dom.getDocumentWidth());
10603                 this._mask.setHeight(Roo.lib.Dom.getDocumentHeight());
10604             }
10605            
10606             if(typeof msg == 'string'){
10607                 if(!this._maskMsg){
10608                     this._maskMsg = Roo.DomHelper.append(this.dom, {
10609                         cls: "roo-el-mask-msg", 
10610                         cn: [
10611                             {
10612                                 tag: 'i',
10613                                 cls: 'fa fa-spinner fa-spin'
10614                             },
10615                             {
10616                                 tag: 'div'
10617                             }   
10618                         ]
10619                     }, true);
10620                 }
10621                 var mm = this._maskMsg;
10622                 mm.dom.className = msgCls ? "roo-el-mask-msg " + msgCls : "roo-el-mask-msg";
10623                 if (mm.dom.lastChild) { // weird IE issue?
10624                     mm.dom.lastChild.innerHTML = msg;
10625                 }
10626                 mm.setDisplayed(true);
10627                 mm.center(this);
10628                 mm.setStyle('z-index', z + 102);
10629             }
10630             if(Roo.isIE && !(Roo.isIE7 && Roo.isStrict) && this.getStyle('height') == 'auto'){ // ie will not expand full height automatically
10631                 this._mask.setHeight(this.getHeight());
10632             }
10633             this._mask.setStyle('z-index', z + 100);
10634             
10635             return this._mask;
10636         },
10637
10638         /**
10639          * Removes a previously applied mask. If removeEl is true the mask overlay is destroyed, otherwise
10640          * it is cached for reuse.
10641          */
10642         unmask : function(removeEl){
10643             if(this._mask){
10644                 if(removeEl === true){
10645                     this._mask.remove();
10646                     delete this._mask;
10647                     if(this._maskMsg){
10648                         this._maskMsg.remove();
10649                         delete this._maskMsg;
10650                     }
10651                 }else{
10652                     this._mask.setDisplayed(false);
10653                     if(this._maskMsg){
10654                         this._maskMsg.setDisplayed(false);
10655                     }
10656                 }
10657             }
10658             this.removeClass("x-masked");
10659         },
10660
10661         /**
10662          * Returns true if this element is masked
10663          * @return {Boolean}
10664          */
10665         isMasked : function(){
10666             return this._mask && this._mask.isVisible();
10667         },
10668
10669         /**
10670          * Creates an iframe shim for this element to keep selects and other windowed objects from
10671          * showing through.
10672          * @return {Roo.Element} The new shim element
10673          */
10674         createShim : function(){
10675             var el = document.createElement('iframe');
10676             el.frameBorder = 'no';
10677             el.className = 'roo-shim';
10678             if(Roo.isIE && Roo.isSecure){
10679                 el.src = Roo.SSL_SECURE_URL;
10680             }
10681             var shim = Roo.get(this.dom.parentNode.insertBefore(el, this.dom));
10682             shim.autoBoxAdjust = false;
10683             return shim;
10684         },
10685
10686         /**
10687          * Removes this element from the DOM and deletes it from the cache
10688          */
10689         remove : function(){
10690             if(this.dom.parentNode){
10691                 this.dom.parentNode.removeChild(this.dom);
10692             }
10693             delete El.cache[this.dom.id];
10694         },
10695
10696         /**
10697          * Sets up event handlers to add and remove a css class when the mouse is over this element
10698          * @param {String} className
10699          * @param {Boolean} preventFlicker (optional) If set to true, it prevents flickering by filtering
10700          * mouseout events for children elements
10701          * @return {Roo.Element} this
10702          */
10703         addClassOnOver : function(className, preventFlicker){
10704             this.on("mouseover", function(){
10705                 Roo.fly(this, '_internal').addClass(className);
10706             }, this.dom);
10707             var removeFn = function(e){
10708                 if(preventFlicker !== true || !e.within(this, true)){
10709                     Roo.fly(this, '_internal').removeClass(className);
10710                 }
10711             };
10712             this.on("mouseout", removeFn, this.dom);
10713             return this;
10714         },
10715
10716         /**
10717          * Sets up event handlers to add and remove a css class when this element has the focus
10718          * @param {String} className
10719          * @return {Roo.Element} this
10720          */
10721         addClassOnFocus : function(className){
10722             this.on("focus", function(){
10723                 Roo.fly(this, '_internal').addClass(className);
10724             }, this.dom);
10725             this.on("blur", function(){
10726                 Roo.fly(this, '_internal').removeClass(className);
10727             }, this.dom);
10728             return this;
10729         },
10730         /**
10731          * 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)
10732          * @param {String} className
10733          * @return {Roo.Element} this
10734          */
10735         addClassOnClick : function(className){
10736             var dom = this.dom;
10737             this.on("mousedown", function(){
10738                 Roo.fly(dom, '_internal').addClass(className);
10739                 var d = Roo.get(document);
10740                 var fn = function(){
10741                     Roo.fly(dom, '_internal').removeClass(className);
10742                     d.removeListener("mouseup", fn);
10743                 };
10744                 d.on("mouseup", fn);
10745             });
10746             return this;
10747         },
10748
10749         /**
10750          * Stops the specified event from bubbling and optionally prevents the default action
10751          * @param {String} eventName
10752          * @param {Boolean} preventDefault (optional) true to prevent the default action too
10753          * @return {Roo.Element} this
10754          */
10755         swallowEvent : function(eventName, preventDefault){
10756             var fn = function(e){
10757                 e.stopPropagation();
10758                 if(preventDefault){
10759                     e.preventDefault();
10760                 }
10761             };
10762             if(eventName instanceof Array){
10763                 for(var i = 0, len = eventName.length; i < len; i++){
10764                      this.on(eventName[i], fn);
10765                 }
10766                 return this;
10767             }
10768             this.on(eventName, fn);
10769             return this;
10770         },
10771
10772         /**
10773          * @private
10774          */
10775         fitToParentDelegate : Roo.emptyFn, // keep a reference to the fitToParent delegate
10776
10777         /**
10778          * Sizes this element to its parent element's dimensions performing
10779          * neccessary box adjustments.
10780          * @param {Boolean} monitorResize (optional) If true maintains the fit when the browser window is resized.
10781          * @param {String/HTMLElment/Element} targetParent (optional) The target parent, default to the parentNode.
10782          * @return {Roo.Element} this
10783          */
10784         fitToParent : function(monitorResize, targetParent) {
10785           Roo.EventManager.removeResizeListener(this.fitToParentDelegate); // always remove previous fitToParent delegate from onWindowResize
10786           this.fitToParentDelegate = Roo.emptyFn; // remove reference to previous delegate
10787           if (monitorResize === true && !this.dom.parentNode) { // check if this Element still exists
10788             return this;
10789           }
10790           var p = Roo.get(targetParent || this.dom.parentNode);
10791           this.setSize(p.getComputedWidth() - p.getFrameWidth('lr'), p.getComputedHeight() - p.getFrameWidth('tb'));
10792           if (monitorResize === true) {
10793             this.fitToParentDelegate = this.fitToParent.createDelegate(this, [true, targetParent]);
10794             Roo.EventManager.onWindowResize(this.fitToParentDelegate);
10795           }
10796           return this;
10797         },
10798
10799         /**
10800          * Gets the next sibling, skipping text nodes
10801          * @return {HTMLElement} The next sibling or null
10802          */
10803         getNextSibling : function(){
10804             var n = this.dom.nextSibling;
10805             while(n && n.nodeType != 1){
10806                 n = n.nextSibling;
10807             }
10808             return n;
10809         },
10810
10811         /**
10812          * Gets the previous sibling, skipping text nodes
10813          * @return {HTMLElement} The previous sibling or null
10814          */
10815         getPrevSibling : function(){
10816             var n = this.dom.previousSibling;
10817             while(n && n.nodeType != 1){
10818                 n = n.previousSibling;
10819             }
10820             return n;
10821         },
10822
10823
10824         /**
10825          * Appends the passed element(s) to this element
10826          * @param {String/HTMLElement/Array/Element/CompositeElement} el
10827          * @return {Roo.Element} this
10828          */
10829         appendChild: function(el){
10830             el = Roo.get(el);
10831             el.appendTo(this);
10832             return this;
10833         },
10834
10835         /**
10836          * Creates the passed DomHelper config and appends it to this element or optionally inserts it before the passed child element.
10837          * @param {Object} config DomHelper element config object.  If no tag is specified (e.g., {tag:'input'}) then a div will be
10838          * automatically generated with the specified attributes.
10839          * @param {HTMLElement} insertBefore (optional) a child element of this element
10840          * @param {Boolean} returnDom (optional) true to return the dom node instead of creating an Element
10841          * @return {Roo.Element} The new child element
10842          */
10843         createChild: function(config, insertBefore, returnDom){
10844             config = config || {tag:'div'};
10845             if(insertBefore){
10846                 return Roo.DomHelper.insertBefore(insertBefore, config, returnDom !== true);
10847             }
10848             return Roo.DomHelper[!this.dom.firstChild ? 'overwrite' : 'append'](this.dom, config,  returnDom !== true);
10849         },
10850
10851         /**
10852          * Appends this element to the passed element
10853          * @param {String/HTMLElement/Element} el The new parent element
10854          * @return {Roo.Element} this
10855          */
10856         appendTo: function(el){
10857             el = Roo.getDom(el);
10858             el.appendChild(this.dom);
10859             return this;
10860         },
10861
10862         /**
10863          * Inserts this element before the passed element in the DOM
10864          * @param {String/HTMLElement/Element} el The element to insert before
10865          * @return {Roo.Element} this
10866          */
10867         insertBefore: function(el){
10868             el = Roo.getDom(el);
10869             el.parentNode.insertBefore(this.dom, el);
10870             return this;
10871         },
10872
10873         /**
10874          * Inserts this element after the passed element in the DOM
10875          * @param {String/HTMLElement/Element} el The element to insert after
10876          * @return {Roo.Element} this
10877          */
10878         insertAfter: function(el){
10879             el = Roo.getDom(el);
10880             el.parentNode.insertBefore(this.dom, el.nextSibling);
10881             return this;
10882         },
10883
10884         /**
10885          * Inserts (or creates) an element (or DomHelper config) as the first child of the this element
10886          * @param {String/HTMLElement/Element/Object} el The id or element to insert or a DomHelper config to create and insert
10887          * @return {Roo.Element} The new child
10888          */
10889         insertFirst: function(el, returnDom){
10890             el = el || {};
10891             if(typeof el == 'object' && !el.nodeType){ // dh config
10892                 return this.createChild(el, this.dom.firstChild, returnDom);
10893             }else{
10894                 el = Roo.getDom(el);
10895                 this.dom.insertBefore(el, this.dom.firstChild);
10896                 return !returnDom ? Roo.get(el) : el;
10897             }
10898         },
10899
10900         /**
10901          * Inserts (or creates) the passed element (or DomHelper config) as a sibling of this element
10902          * @param {String/HTMLElement/Element/Object} el The id or element to insert or a DomHelper config to create and insert
10903          * @param {String} where (optional) 'before' or 'after' defaults to before
10904          * @param {Boolean} returnDom (optional) True to return the raw DOM element instead of Roo.Element
10905          * @return {Roo.Element} the inserted Element
10906          */
10907         insertSibling: function(el, where, returnDom){
10908             where = where ? where.toLowerCase() : 'before';
10909             el = el || {};
10910             var rt, refNode = where == 'before' ? this.dom : this.dom.nextSibling;
10911
10912             if(typeof el == 'object' && !el.nodeType){ // dh config
10913                 if(where == 'after' && !this.dom.nextSibling){
10914                     rt = Roo.DomHelper.append(this.dom.parentNode, el, !returnDom);
10915                 }else{
10916                     rt = Roo.DomHelper[where == 'after' ? 'insertAfter' : 'insertBefore'](this.dom, el, !returnDom);
10917                 }
10918
10919             }else{
10920                 rt = this.dom.parentNode.insertBefore(Roo.getDom(el),
10921                             where == 'before' ? this.dom : this.dom.nextSibling);
10922                 if(!returnDom){
10923                     rt = Roo.get(rt);
10924                 }
10925             }
10926             return rt;
10927         },
10928
10929         /**
10930          * Creates and wraps this element with another element
10931          * @param {Object} config (optional) DomHelper element config object for the wrapper element or null for an empty div
10932          * @param {Boolean} returnDom (optional) True to return the raw DOM element instead of Roo.Element
10933          * @return {HTMLElement/Element} The newly created wrapper element
10934          */
10935         wrap: function(config, returnDom){
10936             if(!config){
10937                 config = {tag: "div"};
10938             }
10939             var newEl = Roo.DomHelper.insertBefore(this.dom, config, !returnDom);
10940             newEl.dom ? newEl.dom.appendChild(this.dom) : newEl.appendChild(this.dom);
10941             return newEl;
10942         },
10943
10944         /**
10945          * Replaces the passed element with this element
10946          * @param {String/HTMLElement/Element} el The element to replace
10947          * @return {Roo.Element} this
10948          */
10949         replace: function(el){
10950             el = Roo.get(el);
10951             this.insertBefore(el);
10952             el.remove();
10953             return this;
10954         },
10955
10956         /**
10957          * Inserts an html fragment into this element
10958          * @param {String} where Where to insert the html in relation to the this element - beforeBegin, afterBegin, beforeEnd, afterEnd.
10959          * @param {String} html The HTML fragment
10960          * @param {Boolean} returnEl True to return an Roo.Element
10961          * @return {HTMLElement/Roo.Element} The inserted node (or nearest related if more than 1 inserted)
10962          */
10963         insertHtml : function(where, html, returnEl){
10964             var el = Roo.DomHelper.insertHtml(where, this.dom, html);
10965             return returnEl ? Roo.get(el) : el;
10966         },
10967
10968         /**
10969          * Sets the passed attributes as attributes of this element (a style attribute can be a string, object or function)
10970          * @param {Object} o The object with the attributes
10971          * @param {Boolean} useSet (optional) false to override the default setAttribute to use expandos.
10972          * @return {Roo.Element} this
10973          */
10974         set : function(o, useSet){
10975             var el = this.dom;
10976             useSet = typeof useSet == 'undefined' ? (el.setAttribute ? true : false) : useSet;
10977             for(var attr in o){
10978                 if(attr == "style" || typeof o[attr] == "function")  { continue; }
10979                 if(attr=="cls"){
10980                     el.className = o["cls"];
10981                 }else{
10982                     if(useSet) {
10983                         el.setAttribute(attr, o[attr]);
10984                     } else {
10985                         el[attr] = o[attr];
10986                     }
10987                 }
10988             }
10989             if(o.style){
10990                 Roo.DomHelper.applyStyles(el, o.style);
10991             }
10992             return this;
10993         },
10994
10995         /**
10996          * Convenience method for constructing a KeyMap
10997          * @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:
10998          *                                  {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
10999          * @param {Function} fn The function to call
11000          * @param {Object} scope (optional) The scope of the function
11001          * @return {Roo.KeyMap} The KeyMap created
11002          */
11003         addKeyListener : function(key, fn, scope){
11004             var config;
11005             if(typeof key != "object" || key instanceof Array){
11006                 config = {
11007                     key: key,
11008                     fn: fn,
11009                     scope: scope
11010                 };
11011             }else{
11012                 config = {
11013                     key : key.key,
11014                     shift : key.shift,
11015                     ctrl : key.ctrl,
11016                     alt : key.alt,
11017                     fn: fn,
11018                     scope: scope
11019                 };
11020             }
11021             return new Roo.KeyMap(this, config);
11022         },
11023
11024         /**
11025          * Creates a KeyMap for this element
11026          * @param {Object} config The KeyMap config. See {@link Roo.KeyMap} for more details
11027          * @return {Roo.KeyMap} The KeyMap created
11028          */
11029         addKeyMap : function(config){
11030             return new Roo.KeyMap(this, config);
11031         },
11032
11033         /**
11034          * Returns true if this element is scrollable.
11035          * @return {Boolean}
11036          */
11037          isScrollable : function(){
11038             var dom = this.dom;
11039             return dom.scrollHeight > dom.clientHeight || dom.scrollWidth > dom.clientWidth;
11040         },
11041
11042         /**
11043          * 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().
11044          * @param {String} side Either "left" for scrollLeft values or "top" for scrollTop values.
11045          * @param {Number} value The new scroll value
11046          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
11047          * @return {Element} this
11048          */
11049
11050         scrollTo : function(side, value, animate){
11051             var prop = side.toLowerCase() == "left" ? "scrollLeft" : "scrollTop";
11052             if(!animate || !A){
11053                 this.dom[prop] = value;
11054             }else{
11055                 var to = prop == "scrollLeft" ? [value, this.dom.scrollTop] : [this.dom.scrollLeft, value];
11056                 this.anim({scroll: {"to": to}}, this.preanim(arguments, 2), 'scroll');
11057             }
11058             return this;
11059         },
11060
11061         /**
11062          * Scrolls this element the specified direction. Does bounds checking to make sure the scroll is
11063          * within this element's scrollable range.
11064          * @param {String} direction Possible values are: "l","left" - "r","right" - "t","top","up" - "b","bottom","down".
11065          * @param {Number} distance How far to scroll the element in pixels
11066          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
11067          * @return {Boolean} Returns true if a scroll was triggered or false if the element
11068          * was scrolled as far as it could go.
11069          */
11070          scroll : function(direction, distance, animate){
11071              if(!this.isScrollable()){
11072                  return;
11073              }
11074              var el = this.dom;
11075              var l = el.scrollLeft, t = el.scrollTop;
11076              var w = el.scrollWidth, h = el.scrollHeight;
11077              var cw = el.clientWidth, ch = el.clientHeight;
11078              direction = direction.toLowerCase();
11079              var scrolled = false;
11080              var a = this.preanim(arguments, 2);
11081              switch(direction){
11082                  case "l":
11083                  case "left":
11084                      if(w - l > cw){
11085                          var v = Math.min(l + distance, w-cw);
11086                          this.scrollTo("left", v, a);
11087                          scrolled = true;
11088                      }
11089                      break;
11090                 case "r":
11091                 case "right":
11092                      if(l > 0){
11093                          var v = Math.max(l - distance, 0);
11094                          this.scrollTo("left", v, a);
11095                          scrolled = true;
11096                      }
11097                      break;
11098                 case "t":
11099                 case "top":
11100                 case "up":
11101                      if(t > 0){
11102                          var v = Math.max(t - distance, 0);
11103                          this.scrollTo("top", v, a);
11104                          scrolled = true;
11105                      }
11106                      break;
11107                 case "b":
11108                 case "bottom":
11109                 case "down":
11110                      if(h - t > ch){
11111                          var v = Math.min(t + distance, h-ch);
11112                          this.scrollTo("top", v, a);
11113                          scrolled = true;
11114                      }
11115                      break;
11116              }
11117              return scrolled;
11118         },
11119
11120         /**
11121          * Translates the passed page coordinates into left/top css values for this element
11122          * @param {Number/Array} x The page x or an array containing [x, y]
11123          * @param {Number} y The page y
11124          * @return {Object} An object with left and top properties. e.g. {left: (value), top: (value)}
11125          */
11126         translatePoints : function(x, y){
11127             if(typeof x == 'object' || x instanceof Array){
11128                 y = x[1]; x = x[0];
11129             }
11130             var p = this.getStyle('position');
11131             var o = this.getXY();
11132
11133             var l = parseInt(this.getStyle('left'), 10);
11134             var t = parseInt(this.getStyle('top'), 10);
11135
11136             if(isNaN(l)){
11137                 l = (p == "relative") ? 0 : this.dom.offsetLeft;
11138             }
11139             if(isNaN(t)){
11140                 t = (p == "relative") ? 0 : this.dom.offsetTop;
11141             }
11142
11143             return {left: (x - o[0] + l), top: (y - o[1] + t)};
11144         },
11145
11146         /**
11147          * Returns the current scroll position of the element.
11148          * @return {Object} An object containing the scroll position in the format {left: (scrollLeft), top: (scrollTop)}
11149          */
11150         getScroll : function(){
11151             var d = this.dom, doc = document;
11152             if(d == doc || d == doc.body){
11153                 var l = window.pageXOffset || doc.documentElement.scrollLeft || doc.body.scrollLeft || 0;
11154                 var t = window.pageYOffset || doc.documentElement.scrollTop || doc.body.scrollTop || 0;
11155                 return {left: l, top: t};
11156             }else{
11157                 return {left: d.scrollLeft, top: d.scrollTop};
11158             }
11159         },
11160
11161         /**
11162          * Return the CSS color for the specified CSS attribute. rgb, 3 digit (like #fff) and valid values
11163          * are convert to standard 6 digit hex color.
11164          * @param {String} attr The css attribute
11165          * @param {String} defaultValue The default value to use when a valid color isn't found
11166          * @param {String} prefix (optional) defaults to #. Use an empty string when working with
11167          * YUI color anims.
11168          */
11169         getColor : function(attr, defaultValue, prefix){
11170             var v = this.getStyle(attr);
11171             if(!v || v == "transparent" || v == "inherit") {
11172                 return defaultValue;
11173             }
11174             var color = typeof prefix == "undefined" ? "#" : prefix;
11175             if(v.substr(0, 4) == "rgb("){
11176                 var rvs = v.slice(4, v.length -1).split(",");
11177                 for(var i = 0; i < 3; i++){
11178                     var h = parseInt(rvs[i]).toString(16);
11179                     if(h < 16){
11180                         h = "0" + h;
11181                     }
11182                     color += h;
11183                 }
11184             } else {
11185                 if(v.substr(0, 1) == "#"){
11186                     if(v.length == 4) {
11187                         for(var i = 1; i < 4; i++){
11188                             var c = v.charAt(i);
11189                             color +=  c + c;
11190                         }
11191                     }else if(v.length == 7){
11192                         color += v.substr(1);
11193                     }
11194                 }
11195             }
11196             return(color.length > 5 ? color.toLowerCase() : defaultValue);
11197         },
11198
11199         /**
11200          * Wraps the specified element with a special markup/CSS block that renders by default as a gray container with a
11201          * gradient background, rounded corners and a 4-way shadow.
11202          * @param {String} class (optional) A base CSS class to apply to the containing wrapper element (defaults to 'x-box').
11203          * Note that there are a number of CSS rules that are dependent on this name to make the overall effect work,
11204          * so if you supply an alternate base class, make sure you also supply all of the necessary rules.
11205          * @return {Roo.Element} this
11206          */
11207         boxWrap : function(cls){
11208             cls = cls || 'x-box';
11209             var el = Roo.get(this.insertHtml('beforeBegin', String.format('<div class="{0}">'+El.boxMarkup+'</div>', cls)));
11210             el.child('.'+cls+'-mc').dom.appendChild(this.dom);
11211             return el;
11212         },
11213
11214         /**
11215          * Returns the value of a namespaced attribute from the element's underlying DOM node.
11216          * @param {String} namespace The namespace in which to look for the attribute
11217          * @param {String} name The attribute name
11218          * @return {String} The attribute value
11219          */
11220         getAttributeNS : Roo.isIE ? function(ns, name){
11221             var d = this.dom;
11222             var type = typeof d[ns+":"+name];
11223             if(type != 'undefined' && type != 'unknown'){
11224                 return d[ns+":"+name];
11225             }
11226             return d[name];
11227         } : function(ns, name){
11228             var d = this.dom;
11229             return d.getAttributeNS(ns, name) || d.getAttribute(ns+":"+name) || d.getAttribute(name) || d[name];
11230         },
11231         
11232         
11233         /**
11234          * Sets or Returns the value the dom attribute value
11235          * @param {String|Object} name The attribute name (or object to set multiple attributes)
11236          * @param {String} value (optional) The value to set the attribute to
11237          * @return {String} The attribute value
11238          */
11239         attr : function(name){
11240             if (arguments.length > 1) {
11241                 this.dom.setAttribute(name, arguments[1]);
11242                 return arguments[1];
11243             }
11244             if (typeof(name) == 'object') {
11245                 for(var i in name) {
11246                     this.attr(i, name[i]);
11247                 }
11248                 return name;
11249             }
11250             
11251             
11252             if (!this.dom.hasAttribute(name)) {
11253                 return undefined;
11254             }
11255             return this.dom.getAttribute(name);
11256         }
11257         
11258         
11259         
11260     };
11261
11262     var ep = El.prototype;
11263
11264     /**
11265      * Appends an event handler (Shorthand for addListener)
11266      * @param {String}   eventName     The type of event to append
11267      * @param {Function} fn        The method the event invokes
11268      * @param {Object} scope       (optional) The scope (this object) of the fn
11269      * @param {Object}   options   (optional)An object with standard {@link Roo.EventManager#addListener} options
11270      * @method
11271      */
11272     ep.on = ep.addListener;
11273         // backwards compat
11274     ep.mon = ep.addListener;
11275
11276     /**
11277      * Removes an event handler from this element (shorthand for removeListener)
11278      * @param {String} eventName the type of event to remove
11279      * @param {Function} fn the method the event invokes
11280      * @return {Roo.Element} this
11281      * @method
11282      */
11283     ep.un = ep.removeListener;
11284
11285     /**
11286      * true to automatically adjust width and height settings for box-model issues (default to true)
11287      */
11288     ep.autoBoxAdjust = true;
11289
11290     // private
11291     El.unitPattern = /\d+(px|em|%|en|ex|pt|in|cm|mm|pc)$/i;
11292
11293     // private
11294     El.addUnits = function(v, defaultUnit){
11295         if(v === "" || v == "auto"){
11296             return v;
11297         }
11298         if(v === undefined){
11299             return '';
11300         }
11301         if(typeof v == "number" || !El.unitPattern.test(v)){
11302             return v + (defaultUnit || 'px');
11303         }
11304         return v;
11305     };
11306
11307     // special markup used throughout Roo when box wrapping elements
11308     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>';
11309     /**
11310      * Visibility mode constant - Use visibility to hide element
11311      * @static
11312      * @type Number
11313      */
11314     El.VISIBILITY = 1;
11315     /**
11316      * Visibility mode constant - Use display to hide element
11317      * @static
11318      * @type Number
11319      */
11320     El.DISPLAY = 2;
11321
11322     El.borders = {l: "border-left-width", r: "border-right-width", t: "border-top-width", b: "border-bottom-width"};
11323     El.paddings = {l: "padding-left", r: "padding-right", t: "padding-top", b: "padding-bottom"};
11324     El.margins = {l: "margin-left", r: "margin-right", t: "margin-top", b: "margin-bottom"};
11325
11326
11327
11328     /**
11329      * @private
11330      */
11331     El.cache = {};
11332
11333     var docEl;
11334
11335     /**
11336      * Static method to retrieve Element objects. Uses simple caching to consistently return the same object.
11337      * Automatically fixes if an object was recreated with the same id via AJAX or DOM.
11338      * @param {String/HTMLElement/Element} el The id of the node, a DOM Node or an existing Element.
11339      * @return {Element} The Element object
11340      * @static
11341      */
11342     El.get = function(el){
11343         var ex, elm, id;
11344         if(!el){ return null; }
11345         if(typeof el == "string"){ // element id
11346             if(!(elm = document.getElementById(el))){
11347                 return null;
11348             }
11349             if(ex = El.cache[el]){
11350                 ex.dom = elm;
11351             }else{
11352                 ex = El.cache[el] = new El(elm);
11353             }
11354             return ex;
11355         }else if(el.tagName){ // dom element
11356             if(!(id = el.id)){
11357                 id = Roo.id(el);
11358             }
11359             if(ex = El.cache[id]){
11360                 ex.dom = el;
11361             }else{
11362                 ex = El.cache[id] = new El(el);
11363             }
11364             return ex;
11365         }else if(el instanceof El){
11366             if(el != docEl){
11367                 el.dom = document.getElementById(el.id) || el.dom; // refresh dom element in case no longer valid,
11368                                                               // catch case where it hasn't been appended
11369                 El.cache[el.id] = el; // in case it was created directly with Element(), let's cache it
11370             }
11371             return el;
11372         }else if(el.isComposite){
11373             return el;
11374         }else if(el instanceof Array){
11375             return El.select(el);
11376         }else if(el == document){
11377             // create a bogus element object representing the document object
11378             if(!docEl){
11379                 var f = function(){};
11380                 f.prototype = El.prototype;
11381                 docEl = new f();
11382                 docEl.dom = document;
11383             }
11384             return docEl;
11385         }
11386         return null;
11387     };
11388
11389     // private
11390     El.uncache = function(el){
11391         for(var i = 0, a = arguments, len = a.length; i < len; i++) {
11392             if(a[i]){
11393                 delete El.cache[a[i].id || a[i]];
11394             }
11395         }
11396     };
11397
11398     // private
11399     // Garbage collection - uncache elements/purge listeners on orphaned elements
11400     // so we don't hold a reference and cause the browser to retain them
11401     El.garbageCollect = function(){
11402         if(!Roo.enableGarbageCollector){
11403             clearInterval(El.collectorThread);
11404             return;
11405         }
11406         for(var eid in El.cache){
11407             var el = El.cache[eid], d = el.dom;
11408             // -------------------------------------------------------
11409             // Determining what is garbage:
11410             // -------------------------------------------------------
11411             // !d
11412             // dom node is null, definitely garbage
11413             // -------------------------------------------------------
11414             // !d.parentNode
11415             // no parentNode == direct orphan, definitely garbage
11416             // -------------------------------------------------------
11417             // !d.offsetParent && !document.getElementById(eid)
11418             // display none elements have no offsetParent so we will
11419             // also try to look it up by it's id. However, check
11420             // offsetParent first so we don't do unneeded lookups.
11421             // This enables collection of elements that are not orphans
11422             // directly, but somewhere up the line they have an orphan
11423             // parent.
11424             // -------------------------------------------------------
11425             if(!d || !d.parentNode || (!d.offsetParent && !document.getElementById(eid))){
11426                 delete El.cache[eid];
11427                 if(d && Roo.enableListenerCollection){
11428                     E.purgeElement(d);
11429                 }
11430             }
11431         }
11432     }
11433     El.collectorThreadId = setInterval(El.garbageCollect, 30000);
11434
11435
11436     // dom is optional
11437     El.Flyweight = function(dom){
11438         this.dom = dom;
11439     };
11440     El.Flyweight.prototype = El.prototype;
11441
11442     El._flyweights = {};
11443     /**
11444      * Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element -
11445      * the dom node can be overwritten by other code.
11446      * @param {String/HTMLElement} el The dom node or id
11447      * @param {String} named (optional) Allows for creation of named reusable flyweights to
11448      *                                  prevent conflicts (e.g. internally Roo uses "_internal")
11449      * @static
11450      * @return {Element} The shared Element object
11451      */
11452     El.fly = function(el, named){
11453         named = named || '_global';
11454         el = Roo.getDom(el);
11455         if(!el){
11456             return null;
11457         }
11458         if(!El._flyweights[named]){
11459             El._flyweights[named] = new El.Flyweight();
11460         }
11461         El._flyweights[named].dom = el;
11462         return El._flyweights[named];
11463     };
11464
11465     /**
11466      * Static method to retrieve Element objects. Uses simple caching to consistently return the same object.
11467      * Automatically fixes if an object was recreated with the same id via AJAX or DOM.
11468      * Shorthand of {@link Roo.Element#get}
11469      * @param {String/HTMLElement/Element} el The id of the node, a DOM Node or an existing Element.
11470      * @return {Element} The Element object
11471      * @member Roo
11472      * @method get
11473      */
11474     Roo.get = El.get;
11475     /**
11476      * Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element -
11477      * the dom node can be overwritten by other code.
11478      * Shorthand of {@link Roo.Element#fly}
11479      * @param {String/HTMLElement} el The dom node or id
11480      * @param {String} named (optional) Allows for creation of named reusable flyweights to
11481      *                                  prevent conflicts (e.g. internally Roo uses "_internal")
11482      * @static
11483      * @return {Element} The shared Element object
11484      * @member Roo
11485      * @method fly
11486      */
11487     Roo.fly = El.fly;
11488
11489     // speedy lookup for elements never to box adjust
11490     var noBoxAdjust = Roo.isStrict ? {
11491         select:1
11492     } : {
11493         input:1, select:1, textarea:1
11494     };
11495     if(Roo.isIE || Roo.isGecko){
11496         noBoxAdjust['button'] = 1;
11497     }
11498
11499
11500     Roo.EventManager.on(window, 'unload', function(){
11501         delete El.cache;
11502         delete El._flyweights;
11503     });
11504 })();
11505
11506
11507
11508
11509 if(Roo.DomQuery){
11510     Roo.Element.selectorFunction = Roo.DomQuery.select;
11511 }
11512
11513 Roo.Element.select = function(selector, unique, root){
11514     var els;
11515     if(typeof selector == "string"){
11516         els = Roo.Element.selectorFunction(selector, root);
11517     }else if(selector.length !== undefined){
11518         els = selector;
11519     }else{
11520         throw "Invalid selector";
11521     }
11522     if(unique === true){
11523         return new Roo.CompositeElement(els);
11524     }else{
11525         return new Roo.CompositeElementLite(els);
11526     }
11527 };
11528 /**
11529  * Selects elements based on the passed CSS selector to enable working on them as 1.
11530  * @param {String/Array} selector The CSS selector or an array of elements
11531  * @param {Boolean} unique (optional) true to create a unique Roo.Element for each element (defaults to a shared flyweight object)
11532  * @param {HTMLElement/String} root (optional) The root element of the query or id of the root
11533  * @return {CompositeElementLite/CompositeElement}
11534  * @member Roo
11535  * @method select
11536  */
11537 Roo.select = Roo.Element.select;
11538
11539
11540
11541
11542
11543
11544
11545
11546
11547
11548
11549
11550
11551
11552 /*
11553  * Based on:
11554  * Ext JS Library 1.1.1
11555  * Copyright(c) 2006-2007, Ext JS, LLC.
11556  *
11557  * Originally Released Under LGPL - original licence link has changed is not relivant.
11558  *
11559  * Fork - LGPL
11560  * <script type="text/javascript">
11561  */
11562
11563
11564
11565 //Notifies Element that fx methods are available
11566 Roo.enableFx = true;
11567
11568 /**
11569  * @class Roo.Fx
11570  * <p>A class to provide basic animation and visual effects support.  <b>Note:</b> This class is automatically applied
11571  * to the {@link Roo.Element} interface when included, so all effects calls should be performed via Element.
11572  * Conversely, since the effects are not actually defined in Element, Roo.Fx <b>must</b> be included in order for the 
11573  * Element effects to work.</p><br/>
11574  *
11575  * <p>It is important to note that although the Fx methods and many non-Fx Element methods support "method chaining" in that
11576  * they return the Element object itself as the method return value, it is not always possible to mix the two in a single
11577  * method chain.  The Fx methods use an internal effects queue so that each effect can be properly timed and sequenced.
11578  * Non-Fx methods, on the other hand, have no such internal queueing and will always execute immediately.  For this reason,
11579  * while it may be possible to mix certain Fx and non-Fx method calls in a single chain, it may not always provide the
11580  * expected results and should be done with care.</p><br/>
11581  *
11582  * <p>Motion effects support 8-way anchoring, meaning that you can choose one of 8 different anchor points on the Element
11583  * that will serve as either the start or end point of the animation.  Following are all of the supported anchor positions:</p>
11584 <pre>
11585 Value  Description
11586 -----  -----------------------------
11587 tl     The top left corner
11588 t      The center of the top edge
11589 tr     The top right corner
11590 l      The center of the left edge
11591 r      The center of the right edge
11592 bl     The bottom left corner
11593 b      The center of the bottom edge
11594 br     The bottom right corner
11595 </pre>
11596  * <b>Although some Fx methods accept specific custom config parameters, the ones shown in the Config Options section
11597  * below are common options that can be passed to any Fx method.</b>
11598  * @cfg {Function} callback A function called when the effect is finished
11599  * @cfg {Object} scope The scope of the effect function
11600  * @cfg {String} easing A valid Easing value for the effect
11601  * @cfg {String} afterCls A css class to apply after the effect
11602  * @cfg {Number} duration The length of time (in seconds) that the effect should last
11603  * @cfg {Boolean} remove Whether the Element should be removed from the DOM and destroyed after the effect finishes
11604  * @cfg {Boolean} useDisplay Whether to use the <i>display</i> CSS property instead of <i>visibility</i> when hiding Elements (only applies to 
11605  * effects that end with the element being visually hidden, ignored otherwise)
11606  * @cfg {String/Object/Function} afterStyle A style specification string, e.g. "width:100px", or an object in the form {width:"100px"}, or
11607  * a function which returns such a specification that will be applied to the Element after the effect finishes
11608  * @cfg {Boolean} block Whether the effect should block other effects from queueing while it runs
11609  * @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
11610  * @cfg {Boolean} stopFx Whether subsequent effects should be stopped and removed after the current effect finishes
11611  */
11612 Roo.Fx = {
11613         /**
11614          * Slides the element into view.  An anchor point can be optionally passed to set the point of
11615          * origin for the slide effect.  This function automatically handles wrapping the element with
11616          * a fixed-size container if needed.  See the Fx class overview for valid anchor point options.
11617          * Usage:
11618          *<pre><code>
11619 // default: slide the element in from the top
11620 el.slideIn();
11621
11622 // custom: slide the element in from the right with a 2-second duration
11623 el.slideIn('r', { duration: 2 });
11624
11625 // common config options shown with default values
11626 el.slideIn('t', {
11627     easing: 'easeOut',
11628     duration: .5
11629 });
11630 </code></pre>
11631          * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
11632          * @param {Object} options (optional) Object literal with any of the Fx config options
11633          * @return {Roo.Element} The Element
11634          */
11635     slideIn : function(anchor, o){
11636         var el = this.getFxEl();
11637         o = o || {};
11638
11639         el.queueFx(o, function(){
11640
11641             anchor = anchor || "t";
11642
11643             // fix display to visibility
11644             this.fixDisplay();
11645
11646             // restore values after effect
11647             var r = this.getFxRestore();
11648             var b = this.getBox();
11649             // fixed size for slide
11650             this.setSize(b);
11651
11652             // wrap if needed
11653             var wrap = this.fxWrap(r.pos, o, "hidden");
11654
11655             var st = this.dom.style;
11656             st.visibility = "visible";
11657             st.position = "absolute";
11658
11659             // clear out temp styles after slide and unwrap
11660             var after = function(){
11661                 el.fxUnwrap(wrap, r.pos, o);
11662                 st.width = r.width;
11663                 st.height = r.height;
11664                 el.afterFx(o);
11665             };
11666             // time to calc the positions
11667             var a, pt = {to: [b.x, b.y]}, bw = {to: b.width}, bh = {to: b.height};
11668
11669             switch(anchor.toLowerCase()){
11670                 case "t":
11671                     wrap.setSize(b.width, 0);
11672                     st.left = st.bottom = "0";
11673                     a = {height: bh};
11674                 break;
11675                 case "l":
11676                     wrap.setSize(0, b.height);
11677                     st.right = st.top = "0";
11678                     a = {width: bw};
11679                 break;
11680                 case "r":
11681                     wrap.setSize(0, b.height);
11682                     wrap.setX(b.right);
11683                     st.left = st.top = "0";
11684                     a = {width: bw, points: pt};
11685                 break;
11686                 case "b":
11687                     wrap.setSize(b.width, 0);
11688                     wrap.setY(b.bottom);
11689                     st.left = st.top = "0";
11690                     a = {height: bh, points: pt};
11691                 break;
11692                 case "tl":
11693                     wrap.setSize(0, 0);
11694                     st.right = st.bottom = "0";
11695                     a = {width: bw, height: bh};
11696                 break;
11697                 case "bl":
11698                     wrap.setSize(0, 0);
11699                     wrap.setY(b.y+b.height);
11700                     st.right = st.top = "0";
11701                     a = {width: bw, height: bh, points: pt};
11702                 break;
11703                 case "br":
11704                     wrap.setSize(0, 0);
11705                     wrap.setXY([b.right, b.bottom]);
11706                     st.left = st.top = "0";
11707                     a = {width: bw, height: bh, points: pt};
11708                 break;
11709                 case "tr":
11710                     wrap.setSize(0, 0);
11711                     wrap.setX(b.x+b.width);
11712                     st.left = st.bottom = "0";
11713                     a = {width: bw, height: bh, points: pt};
11714                 break;
11715             }
11716             this.dom.style.visibility = "visible";
11717             wrap.show();
11718
11719             arguments.callee.anim = wrap.fxanim(a,
11720                 o,
11721                 'motion',
11722                 .5,
11723                 'easeOut', after);
11724         });
11725         return this;
11726     },
11727     
11728         /**
11729          * Slides the element out of view.  An anchor point can be optionally passed to set the end point
11730          * for the slide effect.  When the effect is completed, the element will be hidden (visibility = 
11731          * 'hidden') but block elements will still take up space in the document.  The element must be removed
11732          * from the DOM using the 'remove' config option if desired.  This function automatically handles 
11733          * wrapping the element with a fixed-size container if needed.  See the Fx class overview for valid anchor point options.
11734          * Usage:
11735          *<pre><code>
11736 // default: slide the element out to the top
11737 el.slideOut();
11738
11739 // custom: slide the element out to the right with a 2-second duration
11740 el.slideOut('r', { duration: 2 });
11741
11742 // common config options shown with default values
11743 el.slideOut('t', {
11744     easing: 'easeOut',
11745     duration: .5,
11746     remove: false,
11747     useDisplay: false
11748 });
11749 </code></pre>
11750          * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
11751          * @param {Object} options (optional) Object literal with any of the Fx config options
11752          * @return {Roo.Element} The Element
11753          */
11754     slideOut : function(anchor, o){
11755         var el = this.getFxEl();
11756         o = o || {};
11757
11758         el.queueFx(o, function(){
11759
11760             anchor = anchor || "t";
11761
11762             // restore values after effect
11763             var r = this.getFxRestore();
11764             
11765             var b = this.getBox();
11766             // fixed size for slide
11767             this.setSize(b);
11768
11769             // wrap if needed
11770             var wrap = this.fxWrap(r.pos, o, "visible");
11771
11772             var st = this.dom.style;
11773             st.visibility = "visible";
11774             st.position = "absolute";
11775
11776             wrap.setSize(b);
11777
11778             var after = function(){
11779                 if(o.useDisplay){
11780                     el.setDisplayed(false);
11781                 }else{
11782                     el.hide();
11783                 }
11784
11785                 el.fxUnwrap(wrap, r.pos, o);
11786
11787                 st.width = r.width;
11788                 st.height = r.height;
11789
11790                 el.afterFx(o);
11791             };
11792
11793             var a, zero = {to: 0};
11794             switch(anchor.toLowerCase()){
11795                 case "t":
11796                     st.left = st.bottom = "0";
11797                     a = {height: zero};
11798                 break;
11799                 case "l":
11800                     st.right = st.top = "0";
11801                     a = {width: zero};
11802                 break;
11803                 case "r":
11804                     st.left = st.top = "0";
11805                     a = {width: zero, points: {to:[b.right, b.y]}};
11806                 break;
11807                 case "b":
11808                     st.left = st.top = "0";
11809                     a = {height: zero, points: {to:[b.x, b.bottom]}};
11810                 break;
11811                 case "tl":
11812                     st.right = st.bottom = "0";
11813                     a = {width: zero, height: zero};
11814                 break;
11815                 case "bl":
11816                     st.right = st.top = "0";
11817                     a = {width: zero, height: zero, points: {to:[b.x, b.bottom]}};
11818                 break;
11819                 case "br":
11820                     st.left = st.top = "0";
11821                     a = {width: zero, height: zero, points: {to:[b.x+b.width, b.bottom]}};
11822                 break;
11823                 case "tr":
11824                     st.left = st.bottom = "0";
11825                     a = {width: zero, height: zero, points: {to:[b.right, b.y]}};
11826                 break;
11827             }
11828
11829             arguments.callee.anim = wrap.fxanim(a,
11830                 o,
11831                 'motion',
11832                 .5,
11833                 "easeOut", after);
11834         });
11835         return this;
11836     },
11837
11838         /**
11839          * Fades the element out while slowly expanding it in all directions.  When the effect is completed, the 
11840          * element will be hidden (visibility = 'hidden') but block elements will still take up space in the document. 
11841          * The element must be removed from the DOM using the 'remove' config option if desired.
11842          * Usage:
11843          *<pre><code>
11844 // default
11845 el.puff();
11846
11847 // common config options shown with default values
11848 el.puff({
11849     easing: 'easeOut',
11850     duration: .5,
11851     remove: false,
11852     useDisplay: false
11853 });
11854 </code></pre>
11855          * @param {Object} options (optional) Object literal with any of the Fx config options
11856          * @return {Roo.Element} The Element
11857          */
11858     puff : function(o){
11859         var el = this.getFxEl();
11860         o = o || {};
11861
11862         el.queueFx(o, function(){
11863             this.clearOpacity();
11864             this.show();
11865
11866             // restore values after effect
11867             var r = this.getFxRestore();
11868             var st = this.dom.style;
11869
11870             var after = function(){
11871                 if(o.useDisplay){
11872                     el.setDisplayed(false);
11873                 }else{
11874                     el.hide();
11875                 }
11876
11877                 el.clearOpacity();
11878
11879                 el.setPositioning(r.pos);
11880                 st.width = r.width;
11881                 st.height = r.height;
11882                 st.fontSize = '';
11883                 el.afterFx(o);
11884             };
11885
11886             var width = this.getWidth();
11887             var height = this.getHeight();
11888
11889             arguments.callee.anim = this.fxanim({
11890                     width : {to: this.adjustWidth(width * 2)},
11891                     height : {to: this.adjustHeight(height * 2)},
11892                     points : {by: [-(width * .5), -(height * .5)]},
11893                     opacity : {to: 0},
11894                     fontSize: {to:200, unit: "%"}
11895                 },
11896                 o,
11897                 'motion',
11898                 .5,
11899                 "easeOut", after);
11900         });
11901         return this;
11902     },
11903
11904         /**
11905          * Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television).
11906          * When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still 
11907          * take up space in the document. The element must be removed from the DOM using the 'remove' config option if desired.
11908          * Usage:
11909          *<pre><code>
11910 // default
11911 el.switchOff();
11912
11913 // all config options shown with default values
11914 el.switchOff({
11915     easing: 'easeIn',
11916     duration: .3,
11917     remove: false,
11918     useDisplay: false
11919 });
11920 </code></pre>
11921          * @param {Object} options (optional) Object literal with any of the Fx config options
11922          * @return {Roo.Element} The Element
11923          */
11924     switchOff : function(o){
11925         var el = this.getFxEl();
11926         o = o || {};
11927
11928         el.queueFx(o, function(){
11929             this.clearOpacity();
11930             this.clip();
11931
11932             // restore values after effect
11933             var r = this.getFxRestore();
11934             var st = this.dom.style;
11935
11936             var after = function(){
11937                 if(o.useDisplay){
11938                     el.setDisplayed(false);
11939                 }else{
11940                     el.hide();
11941                 }
11942
11943                 el.clearOpacity();
11944                 el.setPositioning(r.pos);
11945                 st.width = r.width;
11946                 st.height = r.height;
11947
11948                 el.afterFx(o);
11949             };
11950
11951             this.fxanim({opacity:{to:0.3}}, null, null, .1, null, function(){
11952                 this.clearOpacity();
11953                 (function(){
11954                     this.fxanim({
11955                         height:{to:1},
11956                         points:{by:[0, this.getHeight() * .5]}
11957                     }, o, 'motion', 0.3, 'easeIn', after);
11958                 }).defer(100, this);
11959             });
11960         });
11961         return this;
11962     },
11963
11964     /**
11965      * Highlights the Element by setting a color (applies to the background-color by default, but can be
11966      * changed using the "attr" config option) and then fading back to the original color. If no original
11967      * color is available, you should provide the "endColor" config option which will be cleared after the animation.
11968      * Usage:
11969 <pre><code>
11970 // default: highlight background to yellow
11971 el.highlight();
11972
11973 // custom: highlight foreground text to blue for 2 seconds
11974 el.highlight("0000ff", { attr: 'color', duration: 2 });
11975
11976 // common config options shown with default values
11977 el.highlight("ffff9c", {
11978     attr: "background-color", //can be any valid CSS property (attribute) that supports a color value
11979     endColor: (current color) or "ffffff",
11980     easing: 'easeIn',
11981     duration: 1
11982 });
11983 </code></pre>
11984      * @param {String} color (optional) The highlight color. Should be a 6 char hex color without the leading # (defaults to yellow: 'ffff9c')
11985      * @param {Object} options (optional) Object literal with any of the Fx config options
11986      * @return {Roo.Element} The Element
11987      */ 
11988     highlight : function(color, o){
11989         var el = this.getFxEl();
11990         o = o || {};
11991
11992         el.queueFx(o, function(){
11993             color = color || "ffff9c";
11994             attr = o.attr || "backgroundColor";
11995
11996             this.clearOpacity();
11997             this.show();
11998
11999             var origColor = this.getColor(attr);
12000             var restoreColor = this.dom.style[attr];
12001             endColor = (o.endColor || origColor) || "ffffff";
12002
12003             var after = function(){
12004                 el.dom.style[attr] = restoreColor;
12005                 el.afterFx(o);
12006             };
12007
12008             var a = {};
12009             a[attr] = {from: color, to: endColor};
12010             arguments.callee.anim = this.fxanim(a,
12011                 o,
12012                 'color',
12013                 1,
12014                 'easeIn', after);
12015         });
12016         return this;
12017     },
12018
12019    /**
12020     * Shows a ripple of exploding, attenuating borders to draw attention to an Element.
12021     * Usage:
12022 <pre><code>
12023 // default: a single light blue ripple
12024 el.frame();
12025
12026 // custom: 3 red ripples lasting 3 seconds total
12027 el.frame("ff0000", 3, { duration: 3 });
12028
12029 // common config options shown with default values
12030 el.frame("C3DAF9", 1, {
12031     duration: 1 //duration of entire animation (not each individual ripple)
12032     // Note: Easing is not configurable and will be ignored if included
12033 });
12034 </code></pre>
12035     * @param {String} color (optional) The color of the border.  Should be a 6 char hex color without the leading # (defaults to light blue: 'C3DAF9').
12036     * @param {Number} count (optional) The number of ripples to display (defaults to 1)
12037     * @param {Object} options (optional) Object literal with any of the Fx config options
12038     * @return {Roo.Element} The Element
12039     */
12040     frame : function(color, count, o){
12041         var el = this.getFxEl();
12042         o = o || {};
12043
12044         el.queueFx(o, function(){
12045             color = color || "#C3DAF9";
12046             if(color.length == 6){
12047                 color = "#" + color;
12048             }
12049             count = count || 1;
12050             duration = o.duration || 1;
12051             this.show();
12052
12053             var b = this.getBox();
12054             var animFn = function(){
12055                 var proxy = this.createProxy({
12056
12057                      style:{
12058                         visbility:"hidden",
12059                         position:"absolute",
12060                         "z-index":"35000", // yee haw
12061                         border:"0px solid " + color
12062                      }
12063                   });
12064                 var scale = Roo.isBorderBox ? 2 : 1;
12065                 proxy.animate({
12066                     top:{from:b.y, to:b.y - 20},
12067                     left:{from:b.x, to:b.x - 20},
12068                     borderWidth:{from:0, to:10},
12069                     opacity:{from:1, to:0},
12070                     height:{from:b.height, to:(b.height + (20*scale))},
12071                     width:{from:b.width, to:(b.width + (20*scale))}
12072                 }, duration, function(){
12073                     proxy.remove();
12074                 });
12075                 if(--count > 0){
12076                      animFn.defer((duration/2)*1000, this);
12077                 }else{
12078                     el.afterFx(o);
12079                 }
12080             };
12081             animFn.call(this);
12082         });
12083         return this;
12084     },
12085
12086    /**
12087     * Creates a pause before any subsequent queued effects begin.  If there are
12088     * no effects queued after the pause it will have no effect.
12089     * Usage:
12090 <pre><code>
12091 el.pause(1);
12092 </code></pre>
12093     * @param {Number} seconds The length of time to pause (in seconds)
12094     * @return {Roo.Element} The Element
12095     */
12096     pause : function(seconds){
12097         var el = this.getFxEl();
12098         var o = {};
12099
12100         el.queueFx(o, function(){
12101             setTimeout(function(){
12102                 el.afterFx(o);
12103             }, seconds * 1000);
12104         });
12105         return this;
12106     },
12107
12108    /**
12109     * Fade an element in (from transparent to opaque).  The ending opacity can be specified
12110     * using the "endOpacity" config option.
12111     * Usage:
12112 <pre><code>
12113 // default: fade in from opacity 0 to 100%
12114 el.fadeIn();
12115
12116 // custom: fade in from opacity 0 to 75% over 2 seconds
12117 el.fadeIn({ endOpacity: .75, duration: 2});
12118
12119 // common config options shown with default values
12120 el.fadeIn({
12121     endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)
12122     easing: 'easeOut',
12123     duration: .5
12124 });
12125 </code></pre>
12126     * @param {Object} options (optional) Object literal with any of the Fx config options
12127     * @return {Roo.Element} The Element
12128     */
12129     fadeIn : function(o){
12130         var el = this.getFxEl();
12131         o = o || {};
12132         el.queueFx(o, function(){
12133             this.setOpacity(0);
12134             this.fixDisplay();
12135             this.dom.style.visibility = 'visible';
12136             var to = o.endOpacity || 1;
12137             arguments.callee.anim = this.fxanim({opacity:{to:to}},
12138                 o, null, .5, "easeOut", function(){
12139                 if(to == 1){
12140                     this.clearOpacity();
12141                 }
12142                 el.afterFx(o);
12143             });
12144         });
12145         return this;
12146     },
12147
12148    /**
12149     * Fade an element out (from opaque to transparent).  The ending opacity can be specified
12150     * using the "endOpacity" config option.
12151     * Usage:
12152 <pre><code>
12153 // default: fade out from the element's current opacity to 0
12154 el.fadeOut();
12155
12156 // custom: fade out from the element's current opacity to 25% over 2 seconds
12157 el.fadeOut({ endOpacity: .25, duration: 2});
12158
12159 // common config options shown with default values
12160 el.fadeOut({
12161     endOpacity: 0, //can be any value between 0 and 1 (e.g. .5)
12162     easing: 'easeOut',
12163     duration: .5
12164     remove: false,
12165     useDisplay: false
12166 });
12167 </code></pre>
12168     * @param {Object} options (optional) Object literal with any of the Fx config options
12169     * @return {Roo.Element} The Element
12170     */
12171     fadeOut : function(o){
12172         var el = this.getFxEl();
12173         o = o || {};
12174         el.queueFx(o, function(){
12175             arguments.callee.anim = this.fxanim({opacity:{to:o.endOpacity || 0}},
12176                 o, null, .5, "easeOut", function(){
12177                 if(this.visibilityMode == Roo.Element.DISPLAY || o.useDisplay){
12178                      this.dom.style.display = "none";
12179                 }else{
12180                      this.dom.style.visibility = "hidden";
12181                 }
12182                 this.clearOpacity();
12183                 el.afterFx(o);
12184             });
12185         });
12186         return this;
12187     },
12188
12189    /**
12190     * Animates the transition of an element's dimensions from a starting height/width
12191     * to an ending height/width.
12192     * Usage:
12193 <pre><code>
12194 // change height and width to 100x100 pixels
12195 el.scale(100, 100);
12196
12197 // common config options shown with default values.  The height and width will default to
12198 // the element's existing values if passed as null.
12199 el.scale(
12200     [element's width],
12201     [element's height], {
12202     easing: 'easeOut',
12203     duration: .35
12204 });
12205 </code></pre>
12206     * @param {Number} width  The new width (pass undefined to keep the original width)
12207     * @param {Number} height  The new height (pass undefined to keep the original height)
12208     * @param {Object} options (optional) Object literal with any of the Fx config options
12209     * @return {Roo.Element} The Element
12210     */
12211     scale : function(w, h, o){
12212         this.shift(Roo.apply({}, o, {
12213             width: w,
12214             height: h
12215         }));
12216         return this;
12217     },
12218
12219    /**
12220     * Animates the transition of any combination of an element's dimensions, xy position and/or opacity.
12221     * Any of these properties not specified in the config object will not be changed.  This effect 
12222     * requires that at least one new dimension, position or opacity setting must be passed in on
12223     * the config object in order for the function to have any effect.
12224     * Usage:
12225 <pre><code>
12226 // slide the element horizontally to x position 200 while changing the height and opacity
12227 el.shift({ x: 200, height: 50, opacity: .8 });
12228
12229 // common config options shown with default values.
12230 el.shift({
12231     width: [element's width],
12232     height: [element's height],
12233     x: [element's x position],
12234     y: [element's y position],
12235     opacity: [element's opacity],
12236     easing: 'easeOut',
12237     duration: .35
12238 });
12239 </code></pre>
12240     * @param {Object} options  Object literal with any of the Fx config options
12241     * @return {Roo.Element} The Element
12242     */
12243     shift : function(o){
12244         var el = this.getFxEl();
12245         o = o || {};
12246         el.queueFx(o, function(){
12247             var a = {}, w = o.width, h = o.height, x = o.x, y = o.y,  op = o.opacity;
12248             if(w !== undefined){
12249                 a.width = {to: this.adjustWidth(w)};
12250             }
12251             if(h !== undefined){
12252                 a.height = {to: this.adjustHeight(h)};
12253             }
12254             if(x !== undefined || y !== undefined){
12255                 a.points = {to: [
12256                     x !== undefined ? x : this.getX(),
12257                     y !== undefined ? y : this.getY()
12258                 ]};
12259             }
12260             if(op !== undefined){
12261                 a.opacity = {to: op};
12262             }
12263             if(o.xy !== undefined){
12264                 a.points = {to: o.xy};
12265             }
12266             arguments.callee.anim = this.fxanim(a,
12267                 o, 'motion', .35, "easeOut", function(){
12268                 el.afterFx(o);
12269             });
12270         });
12271         return this;
12272     },
12273
12274         /**
12275          * Slides the element while fading it out of view.  An anchor point can be optionally passed to set the 
12276          * ending point of the effect.
12277          * Usage:
12278          *<pre><code>
12279 // default: slide the element downward while fading out
12280 el.ghost();
12281
12282 // custom: slide the element out to the right with a 2-second duration
12283 el.ghost('r', { duration: 2 });
12284
12285 // common config options shown with default values
12286 el.ghost('b', {
12287     easing: 'easeOut',
12288     duration: .5
12289     remove: false,
12290     useDisplay: false
12291 });
12292 </code></pre>
12293          * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to bottom: 'b')
12294          * @param {Object} options (optional) Object literal with any of the Fx config options
12295          * @return {Roo.Element} The Element
12296          */
12297     ghost : function(anchor, o){
12298         var el = this.getFxEl();
12299         o = o || {};
12300
12301         el.queueFx(o, function(){
12302             anchor = anchor || "b";
12303
12304             // restore values after effect
12305             var r = this.getFxRestore();
12306             var w = this.getWidth(),
12307                 h = this.getHeight();
12308
12309             var st = this.dom.style;
12310
12311             var after = function(){
12312                 if(o.useDisplay){
12313                     el.setDisplayed(false);
12314                 }else{
12315                     el.hide();
12316                 }
12317
12318                 el.clearOpacity();
12319                 el.setPositioning(r.pos);
12320                 st.width = r.width;
12321                 st.height = r.height;
12322
12323                 el.afterFx(o);
12324             };
12325
12326             var a = {opacity: {to: 0}, points: {}}, pt = a.points;
12327             switch(anchor.toLowerCase()){
12328                 case "t":
12329                     pt.by = [0, -h];
12330                 break;
12331                 case "l":
12332                     pt.by = [-w, 0];
12333                 break;
12334                 case "r":
12335                     pt.by = [w, 0];
12336                 break;
12337                 case "b":
12338                     pt.by = [0, h];
12339                 break;
12340                 case "tl":
12341                     pt.by = [-w, -h];
12342                 break;
12343                 case "bl":
12344                     pt.by = [-w, h];
12345                 break;
12346                 case "br":
12347                     pt.by = [w, h];
12348                 break;
12349                 case "tr":
12350                     pt.by = [w, -h];
12351                 break;
12352             }
12353
12354             arguments.callee.anim = this.fxanim(a,
12355                 o,
12356                 'motion',
12357                 .5,
12358                 "easeOut", after);
12359         });
12360         return this;
12361     },
12362
12363         /**
12364          * Ensures that all effects queued after syncFx is called on the element are
12365          * run concurrently.  This is the opposite of {@link #sequenceFx}.
12366          * @return {Roo.Element} The Element
12367          */
12368     syncFx : function(){
12369         this.fxDefaults = Roo.apply(this.fxDefaults || {}, {
12370             block : false,
12371             concurrent : true,
12372             stopFx : false
12373         });
12374         return this;
12375     },
12376
12377         /**
12378          * Ensures that all effects queued after sequenceFx is called on the element are
12379          * run in sequence.  This is the opposite of {@link #syncFx}.
12380          * @return {Roo.Element} The Element
12381          */
12382     sequenceFx : function(){
12383         this.fxDefaults = Roo.apply(this.fxDefaults || {}, {
12384             block : false,
12385             concurrent : false,
12386             stopFx : false
12387         });
12388         return this;
12389     },
12390
12391         /* @private */
12392     nextFx : function(){
12393         var ef = this.fxQueue[0];
12394         if(ef){
12395             ef.call(this);
12396         }
12397     },
12398
12399         /**
12400          * Returns true if the element has any effects actively running or queued, else returns false.
12401          * @return {Boolean} True if element has active effects, else false
12402          */
12403     hasActiveFx : function(){
12404         return this.fxQueue && this.fxQueue[0];
12405     },
12406
12407         /**
12408          * Stops any running effects and clears the element's internal effects queue if it contains
12409          * any additional effects that haven't started yet.
12410          * @return {Roo.Element} The Element
12411          */
12412     stopFx : function(){
12413         if(this.hasActiveFx()){
12414             var cur = this.fxQueue[0];
12415             if(cur && cur.anim && cur.anim.isAnimated()){
12416                 this.fxQueue = [cur]; // clear out others
12417                 cur.anim.stop(true);
12418             }
12419         }
12420         return this;
12421     },
12422
12423         /* @private */
12424     beforeFx : function(o){
12425         if(this.hasActiveFx() && !o.concurrent){
12426            if(o.stopFx){
12427                this.stopFx();
12428                return true;
12429            }
12430            return false;
12431         }
12432         return true;
12433     },
12434
12435         /**
12436          * Returns true if the element is currently blocking so that no other effect can be queued
12437          * until this effect is finished, else returns false if blocking is not set.  This is commonly
12438          * used to ensure that an effect initiated by a user action runs to completion prior to the
12439          * same effect being restarted (e.g., firing only one effect even if the user clicks several times).
12440          * @return {Boolean} True if blocking, else false
12441          */
12442     hasFxBlock : function(){
12443         var q = this.fxQueue;
12444         return q && q[0] && q[0].block;
12445     },
12446
12447         /* @private */
12448     queueFx : function(o, fn){
12449         if(!this.fxQueue){
12450             this.fxQueue = [];
12451         }
12452         if(!this.hasFxBlock()){
12453             Roo.applyIf(o, this.fxDefaults);
12454             if(!o.concurrent){
12455                 var run = this.beforeFx(o);
12456                 fn.block = o.block;
12457                 this.fxQueue.push(fn);
12458                 if(run){
12459                     this.nextFx();
12460                 }
12461             }else{
12462                 fn.call(this);
12463             }
12464         }
12465         return this;
12466     },
12467
12468         /* @private */
12469     fxWrap : function(pos, o, vis){
12470         var wrap;
12471         if(!o.wrap || !(wrap = Roo.get(o.wrap))){
12472             var wrapXY;
12473             if(o.fixPosition){
12474                 wrapXY = this.getXY();
12475             }
12476             var div = document.createElement("div");
12477             div.style.visibility = vis;
12478             wrap = Roo.get(this.dom.parentNode.insertBefore(div, this.dom));
12479             wrap.setPositioning(pos);
12480             if(wrap.getStyle("position") == "static"){
12481                 wrap.position("relative");
12482             }
12483             this.clearPositioning('auto');
12484             wrap.clip();
12485             wrap.dom.appendChild(this.dom);
12486             if(wrapXY){
12487                 wrap.setXY(wrapXY);
12488             }
12489         }
12490         return wrap;
12491     },
12492
12493         /* @private */
12494     fxUnwrap : function(wrap, pos, o){
12495         this.clearPositioning();
12496         this.setPositioning(pos);
12497         if(!o.wrap){
12498             wrap.dom.parentNode.insertBefore(this.dom, wrap.dom);
12499             wrap.remove();
12500         }
12501     },
12502
12503         /* @private */
12504     getFxRestore : function(){
12505         var st = this.dom.style;
12506         return {pos: this.getPositioning(), width: st.width, height : st.height};
12507     },
12508
12509         /* @private */
12510     afterFx : function(o){
12511         if(o.afterStyle){
12512             this.applyStyles(o.afterStyle);
12513         }
12514         if(o.afterCls){
12515             this.addClass(o.afterCls);
12516         }
12517         if(o.remove === true){
12518             this.remove();
12519         }
12520         Roo.callback(o.callback, o.scope, [this]);
12521         if(!o.concurrent){
12522             this.fxQueue.shift();
12523             this.nextFx();
12524         }
12525     },
12526
12527         /* @private */
12528     getFxEl : function(){ // support for composite element fx
12529         return Roo.get(this.dom);
12530     },
12531
12532         /* @private */
12533     fxanim : function(args, opt, animType, defaultDur, defaultEase, cb){
12534         animType = animType || 'run';
12535         opt = opt || {};
12536         var anim = Roo.lib.Anim[animType](
12537             this.dom, args,
12538             (opt.duration || defaultDur) || .35,
12539             (opt.easing || defaultEase) || 'easeOut',
12540             function(){
12541                 Roo.callback(cb, this);
12542             },
12543             this
12544         );
12545         opt.anim = anim;
12546         return anim;
12547     }
12548 };
12549
12550 // backwords compat
12551 Roo.Fx.resize = Roo.Fx.scale;
12552
12553 //When included, Roo.Fx is automatically applied to Element so that all basic
12554 //effects are available directly via the Element API
12555 Roo.apply(Roo.Element.prototype, Roo.Fx);/*
12556  * Based on:
12557  * Ext JS Library 1.1.1
12558  * Copyright(c) 2006-2007, Ext JS, LLC.
12559  *
12560  * Originally Released Under LGPL - original licence link has changed is not relivant.
12561  *
12562  * Fork - LGPL
12563  * <script type="text/javascript">
12564  */
12565
12566
12567 /**
12568  * @class Roo.CompositeElement
12569  * Standard composite class. Creates a Roo.Element for every element in the collection.
12570  * <br><br>
12571  * <b>NOTE: Although they are not listed, this class supports all of the set/update methods of Roo.Element. All Roo.Element
12572  * actions will be performed on all the elements in this collection.</b>
12573  * <br><br>
12574  * All methods return <i>this</i> and can be chained.
12575  <pre><code>
12576  var els = Roo.select("#some-el div.some-class", true);
12577  // or select directly from an existing element
12578  var el = Roo.get('some-el');
12579  el.select('div.some-class', true);
12580
12581  els.setWidth(100); // all elements become 100 width
12582  els.hide(true); // all elements fade out and hide
12583  // or
12584  els.setWidth(100).hide(true);
12585  </code></pre>
12586  */
12587 Roo.CompositeElement = function(els){
12588     this.elements = [];
12589     this.addElements(els);
12590 };
12591 Roo.CompositeElement.prototype = {
12592     isComposite: true,
12593     addElements : function(els){
12594         if(!els) {
12595             return this;
12596         }
12597         if(typeof els == "string"){
12598             els = Roo.Element.selectorFunction(els);
12599         }
12600         var yels = this.elements;
12601         var index = yels.length-1;
12602         for(var i = 0, len = els.length; i < len; i++) {
12603                 yels[++index] = Roo.get(els[i]);
12604         }
12605         return this;
12606     },
12607
12608     /**
12609     * Clears this composite and adds the elements returned by the passed selector.
12610     * @param {String/Array} els A string CSS selector, an array of elements or an element
12611     * @return {CompositeElement} this
12612     */
12613     fill : function(els){
12614         this.elements = [];
12615         this.add(els);
12616         return this;
12617     },
12618
12619     /**
12620     * Filters this composite to only elements that match the passed selector.
12621     * @param {String} selector A string CSS selector
12622     * @param {Boolean} inverse return inverse filter (not matches)
12623     * @return {CompositeElement} this
12624     */
12625     filter : function(selector, inverse){
12626         var els = [];
12627         inverse = inverse || false;
12628         this.each(function(el){
12629             var match = inverse ? !el.is(selector) : el.is(selector);
12630             if(match){
12631                 els[els.length] = el.dom;
12632             }
12633         });
12634         this.fill(els);
12635         return this;
12636     },
12637
12638     invoke : function(fn, args){
12639         var els = this.elements;
12640         for(var i = 0, len = els.length; i < len; i++) {
12641                 Roo.Element.prototype[fn].apply(els[i], args);
12642         }
12643         return this;
12644     },
12645     /**
12646     * Adds elements to this composite.
12647     * @param {String/Array} els A string CSS selector, an array of elements or an element
12648     * @return {CompositeElement} this
12649     */
12650     add : function(els){
12651         if(typeof els == "string"){
12652             this.addElements(Roo.Element.selectorFunction(els));
12653         }else if(els.length !== undefined){
12654             this.addElements(els);
12655         }else{
12656             this.addElements([els]);
12657         }
12658         return this;
12659     },
12660     /**
12661     * Calls the passed function passing (el, this, index) for each element in this composite.
12662     * @param {Function} fn The function to call
12663     * @param {Object} scope (optional) The <i>this</i> object (defaults to the element)
12664     * @return {CompositeElement} this
12665     */
12666     each : function(fn, scope){
12667         var els = this.elements;
12668         for(var i = 0, len = els.length; i < len; i++){
12669             if(fn.call(scope || els[i], els[i], this, i) === false) {
12670                 break;
12671             }
12672         }
12673         return this;
12674     },
12675
12676     /**
12677      * Returns the Element object at the specified index
12678      * @param {Number} index
12679      * @return {Roo.Element}
12680      */
12681     item : function(index){
12682         return this.elements[index] || null;
12683     },
12684
12685     /**
12686      * Returns the first Element
12687      * @return {Roo.Element}
12688      */
12689     first : function(){
12690         return this.item(0);
12691     },
12692
12693     /**
12694      * Returns the last Element
12695      * @return {Roo.Element}
12696      */
12697     last : function(){
12698         return this.item(this.elements.length-1);
12699     },
12700
12701     /**
12702      * Returns the number of elements in this composite
12703      * @return Number
12704      */
12705     getCount : function(){
12706         return this.elements.length;
12707     },
12708
12709     /**
12710      * Returns true if this composite contains the passed element
12711      * @return Boolean
12712      */
12713     contains : function(el){
12714         return this.indexOf(el) !== -1;
12715     },
12716
12717     /**
12718      * Returns true if this composite contains the passed element
12719      * @return Boolean
12720      */
12721     indexOf : function(el){
12722         return this.elements.indexOf(Roo.get(el));
12723     },
12724
12725
12726     /**
12727     * Removes the specified element(s).
12728     * @param {Mixed} el The id of an element, the Element itself, the index of the element in this composite
12729     * or an array of any of those.
12730     * @param {Boolean} removeDom (optional) True to also remove the element from the document
12731     * @return {CompositeElement} this
12732     */
12733     removeElement : function(el, removeDom){
12734         if(el instanceof Array){
12735             for(var i = 0, len = el.length; i < len; i++){
12736                 this.removeElement(el[i]);
12737             }
12738             return this;
12739         }
12740         var index = typeof el == 'number' ? el : this.indexOf(el);
12741         if(index !== -1){
12742             if(removeDom){
12743                 var d = this.elements[index];
12744                 if(d.dom){
12745                     d.remove();
12746                 }else{
12747                     d.parentNode.removeChild(d);
12748                 }
12749             }
12750             this.elements.splice(index, 1);
12751         }
12752         return this;
12753     },
12754
12755     /**
12756     * Replaces the specified element with the passed element.
12757     * @param {String/HTMLElement/Element/Number} el The id of an element, the Element itself, the index of the element in this composite
12758     * to replace.
12759     * @param {String/HTMLElement/Element} replacement The id of an element or the Element itself.
12760     * @param {Boolean} domReplace (Optional) True to remove and replace the element in the document too.
12761     * @return {CompositeElement} this
12762     */
12763     replaceElement : function(el, replacement, domReplace){
12764         var index = typeof el == 'number' ? el : this.indexOf(el);
12765         if(index !== -1){
12766             if(domReplace){
12767                 this.elements[index].replaceWith(replacement);
12768             }else{
12769                 this.elements.splice(index, 1, Roo.get(replacement))
12770             }
12771         }
12772         return this;
12773     },
12774
12775     /**
12776      * Removes all elements.
12777      */
12778     clear : function(){
12779         this.elements = [];
12780     }
12781 };
12782 (function(){
12783     Roo.CompositeElement.createCall = function(proto, fnName){
12784         if(!proto[fnName]){
12785             proto[fnName] = function(){
12786                 return this.invoke(fnName, arguments);
12787             };
12788         }
12789     };
12790     for(var fnName in Roo.Element.prototype){
12791         if(typeof Roo.Element.prototype[fnName] == "function"){
12792             Roo.CompositeElement.createCall(Roo.CompositeElement.prototype, fnName);
12793         }
12794     };
12795 })();
12796 /*
12797  * Based on:
12798  * Ext JS Library 1.1.1
12799  * Copyright(c) 2006-2007, Ext JS, LLC.
12800  *
12801  * Originally Released Under LGPL - original licence link has changed is not relivant.
12802  *
12803  * Fork - LGPL
12804  * <script type="text/javascript">
12805  */
12806
12807 /**
12808  * @class Roo.CompositeElementLite
12809  * @extends Roo.CompositeElement
12810  * Flyweight composite class. Reuses the same Roo.Element for element operations.
12811  <pre><code>
12812  var els = Roo.select("#some-el div.some-class");
12813  // or select directly from an existing element
12814  var el = Roo.get('some-el');
12815  el.select('div.some-class');
12816
12817  els.setWidth(100); // all elements become 100 width
12818  els.hide(true); // all elements fade out and hide
12819  // or
12820  els.setWidth(100).hide(true);
12821  </code></pre><br><br>
12822  * <b>NOTE: Although they are not listed, this class supports all of the set/update methods of Roo.Element. All Roo.Element
12823  * actions will be performed on all the elements in this collection.</b>
12824  */
12825 Roo.CompositeElementLite = function(els){
12826     Roo.CompositeElementLite.superclass.constructor.call(this, els);
12827     this.el = new Roo.Element.Flyweight();
12828 };
12829 Roo.extend(Roo.CompositeElementLite, Roo.CompositeElement, {
12830     addElements : function(els){
12831         if(els){
12832             if(els instanceof Array){
12833                 this.elements = this.elements.concat(els);
12834             }else{
12835                 var yels = this.elements;
12836                 var index = yels.length-1;
12837                 for(var i = 0, len = els.length; i < len; i++) {
12838                     yels[++index] = els[i];
12839                 }
12840             }
12841         }
12842         return this;
12843     },
12844     invoke : function(fn, args){
12845         var els = this.elements;
12846         var el = this.el;
12847         for(var i = 0, len = els.length; i < len; i++) {
12848             el.dom = els[i];
12849                 Roo.Element.prototype[fn].apply(el, args);
12850         }
12851         return this;
12852     },
12853     /**
12854      * Returns a flyweight Element of the dom element object at the specified index
12855      * @param {Number} index
12856      * @return {Roo.Element}
12857      */
12858     item : function(index){
12859         if(!this.elements[index]){
12860             return null;
12861         }
12862         this.el.dom = this.elements[index];
12863         return this.el;
12864     },
12865
12866     // fixes scope with flyweight
12867     addListener : function(eventName, handler, scope, opt){
12868         var els = this.elements;
12869         for(var i = 0, len = els.length; i < len; i++) {
12870             Roo.EventManager.on(els[i], eventName, handler, scope || els[i], opt);
12871         }
12872         return this;
12873     },
12874
12875     /**
12876     * Calls the passed function passing (el, this, index) for each element in this composite. <b>The element
12877     * passed is the flyweight (shared) Roo.Element instance, so if you require a
12878     * a reference to the dom node, use el.dom.</b>
12879     * @param {Function} fn The function to call
12880     * @param {Object} scope (optional) The <i>this</i> object (defaults to the element)
12881     * @return {CompositeElement} this
12882     */
12883     each : function(fn, scope){
12884         var els = this.elements;
12885         var el = this.el;
12886         for(var i = 0, len = els.length; i < len; i++){
12887             el.dom = els[i];
12888                 if(fn.call(scope || el, el, this, i) === false){
12889                 break;
12890             }
12891         }
12892         return this;
12893     },
12894
12895     indexOf : function(el){
12896         return this.elements.indexOf(Roo.getDom(el));
12897     },
12898
12899     replaceElement : function(el, replacement, domReplace){
12900         var index = typeof el == 'number' ? el : this.indexOf(el);
12901         if(index !== -1){
12902             replacement = Roo.getDom(replacement);
12903             if(domReplace){
12904                 var d = this.elements[index];
12905                 d.parentNode.insertBefore(replacement, d);
12906                 d.parentNode.removeChild(d);
12907             }
12908             this.elements.splice(index, 1, replacement);
12909         }
12910         return this;
12911     }
12912 });
12913 Roo.CompositeElementLite.prototype.on = Roo.CompositeElementLite.prototype.addListener;
12914
12915 /*
12916  * Based on:
12917  * Ext JS Library 1.1.1
12918  * Copyright(c) 2006-2007, Ext JS, LLC.
12919  *
12920  * Originally Released Under LGPL - original licence link has changed is not relivant.
12921  *
12922  * Fork - LGPL
12923  * <script type="text/javascript">
12924  */
12925
12926  
12927
12928 /**
12929  * @class Roo.data.Connection
12930  * @extends Roo.util.Observable
12931  * The class encapsulates a connection to the page's originating domain, allowing requests to be made
12932  * either to a configured URL, or to a URL specified at request time. 
12933  * 
12934  * Requests made by this class are asynchronous, and will return immediately. No data from
12935  * the server will be available to the statement immediately following the {@link #request} call.
12936  * To process returned data, use a callback in the request options object, or an event listener.
12937  * 
12938  * Note: If you are doing a file upload, you will not get a normal response object sent back to
12939  * your callback or event handler.  Since the upload is handled via in IFRAME, there is no XMLHttpRequest.
12940  * The response object is created using the innerHTML of the IFRAME's document as the responseText
12941  * property and, if present, the IFRAME's XML document as the responseXML property.
12942  * 
12943  * This means that a valid XML or HTML document must be returned. If JSON data is required, it is suggested
12944  * that it be placed either inside a &lt;textarea> in an HTML document and retrieved from the responseText
12945  * using a regex, or inside a CDATA section in an XML document and retrieved from the responseXML using
12946  * standard DOM methods.
12947  * @constructor
12948  * @param {Object} config a configuration object.
12949  */
12950 Roo.data.Connection = function(config){
12951     Roo.apply(this, config);
12952     this.addEvents({
12953         /**
12954          * @event beforerequest
12955          * Fires before a network request is made to retrieve a data object.
12956          * @param {Connection} conn This Connection object.
12957          * @param {Object} options The options config object passed to the {@link #request} method.
12958          */
12959         "beforerequest" : true,
12960         /**
12961          * @event requestcomplete
12962          * Fires if the request was successfully completed.
12963          * @param {Connection} conn This Connection object.
12964          * @param {Object} response The XHR object containing the response data.
12965          * See {@link http://www.w3.org/TR/XMLHttpRequest/} for details.
12966          * @param {Object} options The options config object passed to the {@link #request} method.
12967          */
12968         "requestcomplete" : true,
12969         /**
12970          * @event requestexception
12971          * Fires if an error HTTP status was returned from the server.
12972          * See {@link http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html} for details of HTTP status codes.
12973          * @param {Connection} conn This Connection object.
12974          * @param {Object} response The XHR object containing the response data.
12975          * See {@link http://www.w3.org/TR/XMLHttpRequest/} for details.
12976          * @param {Object} options The options config object passed to the {@link #request} method.
12977          */
12978         "requestexception" : true
12979     });
12980     Roo.data.Connection.superclass.constructor.call(this);
12981 };
12982
12983 Roo.extend(Roo.data.Connection, Roo.util.Observable, {
12984     /**
12985      * @cfg {String} url (Optional) The default URL to be used for requests to the server. (defaults to undefined)
12986      */
12987     /**
12988      * @cfg {Object} extraParams (Optional) An object containing properties which are used as
12989      * extra parameters to each request made by this object. (defaults to undefined)
12990      */
12991     /**
12992      * @cfg {Object} defaultHeaders (Optional) An object containing request headers which are added
12993      *  to each request made by this object. (defaults to undefined)
12994      */
12995     /**
12996      * @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)
12997      */
12998     /**
12999      * @cfg {Number} timeout (Optional) The timeout in milliseconds to be used for requests. (defaults to 30000)
13000      */
13001     timeout : 30000,
13002     /**
13003      * @cfg {Boolean} autoAbort (Optional) Whether this request should abort any pending requests. (defaults to false)
13004      * @type Boolean
13005      */
13006     autoAbort:false,
13007
13008     /**
13009      * @cfg {Boolean} disableCaching (Optional) True to add a unique cache-buster param to GET requests. (defaults to true)
13010      * @type Boolean
13011      */
13012     disableCaching: true,
13013
13014     /**
13015      * Sends an HTTP request to a remote server.
13016      * @param {Object} options An object which may contain the following properties:<ul>
13017      * <li><b>url</b> {String} (Optional) The URL to which to send the request. Defaults to configured URL</li>
13018      * <li><b>params</b> {Object/String/Function} (Optional) An object containing properties which are used as parameters to the
13019      * request, a url encoded string or a function to call to get either.</li>
13020      * <li><b>method</b> {String} (Optional) The HTTP method to use for the request. Defaults to the configured method, or
13021      * if no method was configured, "GET" if no parameters are being sent, and "POST" if parameters are being sent.</li>
13022      * <li><b>callback</b> {Function} (Optional) The function to be called upon receipt of the HTTP response.
13023      * The callback is called regardless of success or failure and is passed the following parameters:<ul>
13024      * <li>options {Object} The parameter to the request call.</li>
13025      * <li>success {Boolean} True if the request succeeded.</li>
13026      * <li>response {Object} The XMLHttpRequest object containing the response data.</li>
13027      * </ul></li>
13028      * <li><b>success</b> {Function} (Optional) The function to be called upon success of the request.
13029      * The callback is passed the following parameters:<ul>
13030      * <li>response {Object} The XMLHttpRequest object containing the response data.</li>
13031      * <li>options {Object} The parameter to the request call.</li>
13032      * </ul></li>
13033      * <li><b>failure</b> {Function} (Optional) The function to be called upon failure of the request.
13034      * The callback is passed the following parameters:<ul>
13035      * <li>response {Object} The XMLHttpRequest object containing the response data.</li>
13036      * <li>options {Object} The parameter to the request call.</li>
13037      * </ul></li>
13038      * <li><b>scope</b> {Object} (Optional) The scope in which to execute the callbacks: The "this" object
13039      * for the callback function. Defaults to the browser window.</li>
13040      * <li><b>form</b> {Object/String} (Optional) A form object or id to pull parameters from.</li>
13041      * <li><b>isUpload</b> {Boolean} (Optional) True if the form object is a file upload (will usually be automatically detected).</li>
13042      * <li><b>headers</b> {Object} (Optional) Request headers to set for the request.</li>
13043      * <li><b>xmlData</b> {Object} (Optional) XML document to use for the post. Note: This will be used instead of
13044      * params for the post data. Any params will be appended to the URL.</li>
13045      * <li><b>disableCaching</b> {Boolean} (Optional) True to add a unique cache-buster param to GET requests.</li>
13046      * </ul>
13047      * @return {Number} transactionId
13048      */
13049     request : function(o){
13050         if(this.fireEvent("beforerequest", this, o) !== false){
13051             var p = o.params;
13052
13053             if(typeof p == "function"){
13054                 p = p.call(o.scope||window, o);
13055             }
13056             if(typeof p == "object"){
13057                 p = Roo.urlEncode(o.params);
13058             }
13059             if(this.extraParams){
13060                 var extras = Roo.urlEncode(this.extraParams);
13061                 p = p ? (p + '&' + extras) : extras;
13062             }
13063
13064             var url = o.url || this.url;
13065             if(typeof url == 'function'){
13066                 url = url.call(o.scope||window, o);
13067             }
13068
13069             if(o.form){
13070                 var form = Roo.getDom(o.form);
13071                 url = url || form.action;
13072
13073                 var enctype = form.getAttribute("enctype");
13074                 
13075                 if (o.formData) {
13076                     return this.doFormDataUpload(o, url);
13077                 }
13078                 
13079                 if(o.isUpload || (enctype && enctype.toLowerCase() == 'multipart/form-data')){
13080                     return this.doFormUpload(o, p, url);
13081                 }
13082                 var f = Roo.lib.Ajax.serializeForm(form);
13083                 p = p ? (p + '&' + f) : f;
13084             }
13085             
13086             if (!o.form && o.formData) {
13087                 o.formData = o.formData === true ? new FormData() : o.formData;
13088                 for (var k in o.params) {
13089                     o.formData.append(k,o.params[k]);
13090                 }
13091                     
13092                 return this.doFormDataUpload(o, url);
13093             }
13094             
13095
13096             var hs = o.headers;
13097             if(this.defaultHeaders){
13098                 hs = Roo.apply(hs || {}, this.defaultHeaders);
13099                 if(!o.headers){
13100                     o.headers = hs;
13101                 }
13102             }
13103
13104             var cb = {
13105                 success: this.handleResponse,
13106                 failure: this.handleFailure,
13107                 scope: this,
13108                 argument: {options: o},
13109                 timeout : o.timeout || this.timeout
13110             };
13111
13112             var method = o.method||this.method||(p ? "POST" : "GET");
13113
13114             if(method == 'GET' && (this.disableCaching && o.disableCaching !== false) || o.disableCaching === true){
13115                 url += (url.indexOf('?') != -1 ? '&' : '?') + '_dc=' + (new Date().getTime());
13116             }
13117
13118             if(typeof o.autoAbort == 'boolean'){ // options gets top priority
13119                 if(o.autoAbort){
13120                     this.abort();
13121                 }
13122             }else if(this.autoAbort !== false){
13123                 this.abort();
13124             }
13125
13126             if((method == 'GET' && p) || o.xmlData){
13127                 url += (url.indexOf('?') != -1 ? '&' : '?') + p;
13128                 p = '';
13129             }
13130             Roo.lib.Ajax.useDefaultHeader = typeof(o.headers) == 'undefined' || typeof(o.headers['Content-Type']) == 'undefined';
13131             this.transId = Roo.lib.Ajax.request(method, url, cb, p, o);
13132             Roo.lib.Ajax.useDefaultHeader == true;
13133             return this.transId;
13134         }else{
13135             Roo.callback(o.callback, o.scope, [o, null, null]);
13136             return null;
13137         }
13138     },
13139
13140     /**
13141      * Determine whether this object has a request outstanding.
13142      * @param {Number} transactionId (Optional) defaults to the last transaction
13143      * @return {Boolean} True if there is an outstanding request.
13144      */
13145     isLoading : function(transId){
13146         if(transId){
13147             return Roo.lib.Ajax.isCallInProgress(transId);
13148         }else{
13149             return this.transId ? true : false;
13150         }
13151     },
13152
13153     /**
13154      * Aborts any outstanding request.
13155      * @param {Number} transactionId (Optional) defaults to the last transaction
13156      */
13157     abort : function(transId){
13158         if(transId || this.isLoading()){
13159             Roo.lib.Ajax.abort(transId || this.transId);
13160         }
13161     },
13162
13163     // private
13164     handleResponse : function(response){
13165         this.transId = false;
13166         var options = response.argument.options;
13167         response.argument = options ? options.argument : null;
13168         this.fireEvent("requestcomplete", this, response, options);
13169         Roo.callback(options.success, options.scope, [response, options]);
13170         Roo.callback(options.callback, options.scope, [options, true, response]);
13171     },
13172
13173     // private
13174     handleFailure : function(response, e){
13175         this.transId = false;
13176         var options = response.argument.options;
13177         response.argument = options ? options.argument : null;
13178         this.fireEvent("requestexception", this, response, options, e);
13179         Roo.callback(options.failure, options.scope, [response, options]);
13180         Roo.callback(options.callback, options.scope, [options, false, response]);
13181     },
13182
13183     // private
13184     doFormUpload : function(o, ps, url){
13185         var id = Roo.id();
13186         var frame = document.createElement('iframe');
13187         frame.id = id;
13188         frame.name = id;
13189         frame.className = 'x-hidden';
13190         if(Roo.isIE){
13191             frame.src = Roo.SSL_SECURE_URL;
13192         }
13193         document.body.appendChild(frame);
13194
13195         if(Roo.isIE){
13196            document.frames[id].name = id;
13197         }
13198
13199         var form = Roo.getDom(o.form);
13200         form.target = id;
13201         form.method = 'POST';
13202         form.enctype = form.encoding = 'multipart/form-data';
13203         if(url){
13204             form.action = url;
13205         }
13206
13207         var hiddens, hd;
13208         if(ps){ // add dynamic params
13209             hiddens = [];
13210             ps = Roo.urlDecode(ps, false);
13211             for(var k in ps){
13212                 if(ps.hasOwnProperty(k)){
13213                     hd = document.createElement('input');
13214                     hd.type = 'hidden';
13215                     hd.name = k;
13216                     hd.value = ps[k];
13217                     form.appendChild(hd);
13218                     hiddens.push(hd);
13219                 }
13220             }
13221         }
13222
13223         function cb(){
13224             var r = {  // bogus response object
13225                 responseText : '',
13226                 responseXML : null
13227             };
13228
13229             r.argument = o ? o.argument : null;
13230
13231             try { //
13232                 var doc;
13233                 if(Roo.isIE){
13234                     doc = frame.contentWindow.document;
13235                 }else {
13236                     doc = (frame.contentDocument || window.frames[id].document);
13237                 }
13238                 if(doc && doc.body){
13239                     r.responseText = doc.body.innerHTML;
13240                 }
13241                 if(doc && doc.XMLDocument){
13242                     r.responseXML = doc.XMLDocument;
13243                 }else {
13244                     r.responseXML = doc;
13245                 }
13246             }
13247             catch(e) {
13248                 // ignore
13249             }
13250
13251             Roo.EventManager.removeListener(frame, 'load', cb, this);
13252
13253             this.fireEvent("requestcomplete", this, r, o);
13254             Roo.callback(o.success, o.scope, [r, o]);
13255             Roo.callback(o.callback, o.scope, [o, true, r]);
13256
13257             setTimeout(function(){document.body.removeChild(frame);}, 100);
13258         }
13259
13260         Roo.EventManager.on(frame, 'load', cb, this);
13261         form.submit();
13262
13263         if(hiddens){ // remove dynamic params
13264             for(var i = 0, len = hiddens.length; i < len; i++){
13265                 form.removeChild(hiddens[i]);
13266             }
13267         }
13268     },
13269     // this is a 'formdata version???'
13270     
13271     
13272     doFormDataUpload : function(o,  url)
13273     {
13274         var formData;
13275         if (o.form) {
13276             var form =  Roo.getDom(o.form);
13277             form.enctype = form.encoding = 'multipart/form-data';
13278             formData = o.formData === true ? new FormData(form) : o.formData;
13279         } else {
13280             formData = o.formData === true ? new FormData() : o.formData;
13281         }
13282         
13283       
13284         var cb = {
13285             success: this.handleResponse,
13286             failure: this.handleFailure,
13287             scope: this,
13288             argument: {options: o},
13289             timeout : o.timeout || this.timeout
13290         };
13291  
13292         if(typeof o.autoAbort == 'boolean'){ // options gets top priority
13293             if(o.autoAbort){
13294                 this.abort();
13295             }
13296         }else if(this.autoAbort !== false){
13297             this.abort();
13298         }
13299
13300         //Roo.lib.Ajax.defaultPostHeader = null;
13301         Roo.lib.Ajax.useDefaultHeader = false;
13302         this.transId = Roo.lib.Ajax.request( "POST", url, cb,  formData, o);
13303         Roo.lib.Ajax.useDefaultHeader = true;
13304  
13305          
13306     }
13307     
13308 });
13309 /*
13310  * Based on:
13311  * Ext JS Library 1.1.1
13312  * Copyright(c) 2006-2007, Ext JS, LLC.
13313  *
13314  * Originally Released Under LGPL - original licence link has changed is not relivant.
13315  *
13316  * Fork - LGPL
13317  * <script type="text/javascript">
13318  */
13319  
13320 /**
13321  * Global Ajax request class.
13322  * 
13323  * @class Roo.Ajax
13324  * @extends Roo.data.Connection
13325  * @static
13326  * 
13327  * @cfg {String} url  The default URL to be used for requests to the server. (defaults to undefined)
13328  * @cfg {Object} extraParams  An object containing properties which are used as extra parameters to each request made by this object. (defaults to undefined)
13329  * @cfg {Object} defaultHeaders  An object containing request headers which are added to each request made by this object. (defaults to undefined)
13330  * @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)
13331  * @cfg {Number} timeout (Optional) The timeout in milliseconds to be used for requests. (defaults to 30000)
13332  * @cfg {Boolean} autoAbort (Optional) Whether a new request should abort any pending requests. (defaults to false)
13333  * @cfg {Boolean} disableCaching (Optional)   True to add a unique cache-buster param to GET requests. (defaults to true)
13334  */
13335 Roo.Ajax = new Roo.data.Connection({
13336     // fix up the docs
13337     /**
13338      * @scope Roo.Ajax
13339      * @type {Boolear} 
13340      */
13341     autoAbort : false,
13342
13343     /**
13344      * Serialize the passed form into a url encoded string
13345      * @scope Roo.Ajax
13346      * @param {String/HTMLElement} form
13347      * @return {String}
13348      */
13349     serializeForm : function(form){
13350         return Roo.lib.Ajax.serializeForm(form);
13351     }
13352 });/*
13353  * Based on:
13354  * Ext JS Library 1.1.1
13355  * Copyright(c) 2006-2007, Ext JS, LLC.
13356  *
13357  * Originally Released Under LGPL - original licence link has changed is not relivant.
13358  *
13359  * Fork - LGPL
13360  * <script type="text/javascript">
13361  */
13362
13363  
13364 /**
13365  * @class Roo.UpdateManager
13366  * @extends Roo.util.Observable
13367  * Provides AJAX-style update for Element object.<br><br>
13368  * Usage:<br>
13369  * <pre><code>
13370  * // Get it from a Roo.Element object
13371  * var el = Roo.get("foo");
13372  * var mgr = el.getUpdateManager();
13373  * mgr.update("http://myserver.com/index.php", "param1=1&amp;param2=2");
13374  * ...
13375  * mgr.formUpdate("myFormId", "http://myserver.com/index.php");
13376  * <br>
13377  * // or directly (returns the same UpdateManager instance)
13378  * var mgr = new Roo.UpdateManager("myElementId");
13379  * mgr.startAutoRefresh(60, "http://myserver.com/index.php");
13380  * mgr.on("update", myFcnNeedsToKnow);
13381  * <br>
13382    // short handed call directly from the element object
13383    Roo.get("foo").load({
13384         url: "bar.php",
13385         scripts:true,
13386         params: "for=bar",
13387         text: "Loading Foo..."
13388    });
13389  * </code></pre>
13390  * @constructor
13391  * Create new UpdateManager directly.
13392  * @param {String/HTMLElement/Roo.Element} el The element to update
13393  * @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).
13394  */
13395 Roo.UpdateManager = function(el, forceNew){
13396     el = Roo.get(el);
13397     if(!forceNew && el.updateManager){
13398         return el.updateManager;
13399     }
13400     /**
13401      * The Element object
13402      * @type Roo.Element
13403      */
13404     this.el = el;
13405     /**
13406      * Cached url to use for refreshes. Overwritten every time update() is called unless "discardUrl" param is set to true.
13407      * @type String
13408      */
13409     this.defaultUrl = null;
13410
13411     this.addEvents({
13412         /**
13413          * @event beforeupdate
13414          * Fired before an update is made, return false from your handler and the update is cancelled.
13415          * @param {Roo.Element} el
13416          * @param {String/Object/Function} url
13417          * @param {String/Object} params
13418          */
13419         "beforeupdate": true,
13420         /**
13421          * @event update
13422          * Fired after successful update is made.
13423          * @param {Roo.Element} el
13424          * @param {Object} oResponseObject The response Object
13425          */
13426         "update": true,
13427         /**
13428          * @event failure
13429          * Fired on update failure.
13430          * @param {Roo.Element} el
13431          * @param {Object} oResponseObject The response Object
13432          */
13433         "failure": true
13434     });
13435     var d = Roo.UpdateManager.defaults;
13436     /**
13437      * Blank page URL to use with SSL file uploads (Defaults to Roo.UpdateManager.defaults.sslBlankUrl or "about:blank").
13438      * @type String
13439      */
13440     this.sslBlankUrl = d.sslBlankUrl;
13441     /**
13442      * Whether to append unique parameter on get request to disable caching (Defaults to Roo.UpdateManager.defaults.disableCaching or false).
13443      * @type Boolean
13444      */
13445     this.disableCaching = d.disableCaching;
13446     /**
13447      * Text for loading indicator (Defaults to Roo.UpdateManager.defaults.indicatorText or '&lt;div class="loading-indicator"&gt;Loading...&lt;/div&gt;').
13448      * @type String
13449      */
13450     this.indicatorText = d.indicatorText;
13451     /**
13452      * Whether to show indicatorText when loading (Defaults to Roo.UpdateManager.defaults.showLoadIndicator or true).
13453      * @type String
13454      */
13455     this.showLoadIndicator = d.showLoadIndicator;
13456     /**
13457      * Timeout for requests or form posts in seconds (Defaults to Roo.UpdateManager.defaults.timeout or 30 seconds).
13458      * @type Number
13459      */
13460     this.timeout = d.timeout;
13461
13462     /**
13463      * True to process scripts in the output (Defaults to Roo.UpdateManager.defaults.loadScripts (false)).
13464      * @type Boolean
13465      */
13466     this.loadScripts = d.loadScripts;
13467
13468     /**
13469      * Transaction object of current executing transaction
13470      */
13471     this.transaction = null;
13472
13473     /**
13474      * @private
13475      */
13476     this.autoRefreshProcId = null;
13477     /**
13478      * Delegate for refresh() prebound to "this", use myUpdater.refreshDelegate.createCallback(arg1, arg2) to bind arguments
13479      * @type Function
13480      */
13481     this.refreshDelegate = this.refresh.createDelegate(this);
13482     /**
13483      * Delegate for update() prebound to "this", use myUpdater.updateDelegate.createCallback(arg1, arg2) to bind arguments
13484      * @type Function
13485      */
13486     this.updateDelegate = this.update.createDelegate(this);
13487     /**
13488      * Delegate for formUpdate() prebound to "this", use myUpdater.formUpdateDelegate.createCallback(arg1, arg2) to bind arguments
13489      * @type Function
13490      */
13491     this.formUpdateDelegate = this.formUpdate.createDelegate(this);
13492     /**
13493      * @private
13494      */
13495     this.successDelegate = this.processSuccess.createDelegate(this);
13496     /**
13497      * @private
13498      */
13499     this.failureDelegate = this.processFailure.createDelegate(this);
13500
13501     if(!this.renderer){
13502      /**
13503       * The renderer for this UpdateManager. Defaults to {@link Roo.UpdateManager.BasicRenderer}.
13504       */
13505     this.renderer = new Roo.UpdateManager.BasicRenderer();
13506     }
13507     
13508     Roo.UpdateManager.superclass.constructor.call(this);
13509 };
13510
13511 Roo.extend(Roo.UpdateManager, Roo.util.Observable, {
13512     /**
13513      * Get the Element this UpdateManager is bound to
13514      * @return {Roo.Element} The element
13515      */
13516     getEl : function(){
13517         return this.el;
13518     },
13519     /**
13520      * Performs an async request, updating this element with the response. If params are specified it uses POST, otherwise it uses GET.
13521      * @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:
13522 <pre><code>
13523 um.update({<br/>
13524     url: "your-url.php",<br/>
13525     params: {param1: "foo", param2: "bar"}, // or a URL encoded string<br/>
13526     callback: yourFunction,<br/>
13527     scope: yourObject, //(optional scope)  <br/>
13528     discardUrl: false, <br/>
13529     nocache: false,<br/>
13530     text: "Loading...",<br/>
13531     timeout: 30,<br/>
13532     scripts: false<br/>
13533 });
13534 </code></pre>
13535      * The only required property is url. The optional properties nocache, text and scripts
13536      * are shorthand for disableCaching, indicatorText and loadScripts and are used to set their associated property on this UpdateManager instance.
13537      * @param {String/Object} params (optional) The parameters to pass as either a url encoded string "param1=1&amp;param2=2" or an object {param1: 1, param2: 2}
13538      * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess, oResponse)
13539      * @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.
13540      */
13541     update : function(url, params, callback, discardUrl){
13542         if(this.fireEvent("beforeupdate", this.el, url, params) !== false){
13543             var method = this.method,
13544                 cfg;
13545             if(typeof url == "object"){ // must be config object
13546                 cfg = url;
13547                 url = cfg.url;
13548                 params = params || cfg.params;
13549                 callback = callback || cfg.callback;
13550                 discardUrl = discardUrl || cfg.discardUrl;
13551                 if(callback && cfg.scope){
13552                     callback = callback.createDelegate(cfg.scope);
13553                 }
13554                 if(typeof cfg.method != "undefined"){method = cfg.method;};
13555                 if(typeof cfg.nocache != "undefined"){this.disableCaching = cfg.nocache;};
13556                 if(typeof cfg.text != "undefined"){this.indicatorText = '<div class="loading-indicator">'+cfg.text+"</div>";};
13557                 if(typeof cfg.scripts != "undefined"){this.loadScripts = cfg.scripts;};
13558                 if(typeof cfg.timeout != "undefined"){this.timeout = cfg.timeout;};
13559             }
13560             this.showLoading();
13561             if(!discardUrl){
13562                 this.defaultUrl = url;
13563             }
13564             if(typeof url == "function"){
13565                 url = url.call(this);
13566             }
13567
13568             method = method || (params ? "POST" : "GET");
13569             if(method == "GET"){
13570                 url = this.prepareUrl(url);
13571             }
13572
13573             var o = Roo.apply(cfg ||{}, {
13574                 url : url,
13575                 params: params,
13576                 success: this.successDelegate,
13577                 failure: this.failureDelegate,
13578                 callback: undefined,
13579                 timeout: (this.timeout*1000),
13580                 argument: {"url": url, "form": null, "callback": callback, "params": params}
13581             });
13582             Roo.log("updated manager called with timeout of " + o.timeout);
13583             this.transaction = Roo.Ajax.request(o);
13584         }
13585     },
13586
13587     /**
13588      * 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.
13589      * Uses this.sslBlankUrl for SSL file uploads to prevent IE security warning.
13590      * @param {String/HTMLElement} form The form Id or form element
13591      * @param {String} url (optional) The url to pass the form to. If omitted the action attribute on the form will be used.
13592      * @param {Boolean} reset (optional) Whether to try to reset the form after the update
13593      * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess, oResponse)
13594      */
13595     formUpdate : function(form, url, reset, callback){
13596         if(this.fireEvent("beforeupdate", this.el, form, url) !== false){
13597             if(typeof url == "function"){
13598                 url = url.call(this);
13599             }
13600             form = Roo.getDom(form);
13601             this.transaction = Roo.Ajax.request({
13602                 form: form,
13603                 url:url,
13604                 success: this.successDelegate,
13605                 failure: this.failureDelegate,
13606                 timeout: (this.timeout*1000),
13607                 argument: {"url": url, "form": form, "callback": callback, "reset": reset}
13608             });
13609             this.showLoading.defer(1, this);
13610         }
13611     },
13612
13613     /**
13614      * Refresh the element with the last used url or defaultUrl. If there is no url, it returns immediately
13615      * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
13616      */
13617     refresh : function(callback){
13618         if(this.defaultUrl == null){
13619             return;
13620         }
13621         this.update(this.defaultUrl, null, callback, true);
13622     },
13623
13624     /**
13625      * Set this element to auto refresh.
13626      * @param {Number} interval How often to update (in seconds).
13627      * @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)
13628      * @param {String/Object} params (optional) The parameters to pass as either a url encoded string "&param1=1&param2=2" or as an object {param1: 1, param2: 2}
13629      * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
13630      * @param {Boolean} refreshNow (optional) Whether to execute the refresh now, or wait the interval
13631      */
13632     startAutoRefresh : function(interval, url, params, callback, refreshNow){
13633         if(refreshNow){
13634             this.update(url || this.defaultUrl, params, callback, true);
13635         }
13636         if(this.autoRefreshProcId){
13637             clearInterval(this.autoRefreshProcId);
13638         }
13639         this.autoRefreshProcId = setInterval(this.update.createDelegate(this, [url || this.defaultUrl, params, callback, true]), interval*1000);
13640     },
13641
13642     /**
13643      * Stop auto refresh on this element.
13644      */
13645      stopAutoRefresh : function(){
13646         if(this.autoRefreshProcId){
13647             clearInterval(this.autoRefreshProcId);
13648             delete this.autoRefreshProcId;
13649         }
13650     },
13651
13652     isAutoRefreshing : function(){
13653        return this.autoRefreshProcId ? true : false;
13654     },
13655     /**
13656      * Called to update the element to "Loading" state. Override to perform custom action.
13657      */
13658     showLoading : function(){
13659         if(this.showLoadIndicator){
13660             this.el.update(this.indicatorText);
13661         }
13662     },
13663
13664     /**
13665      * Adds unique parameter to query string if disableCaching = true
13666      * @private
13667      */
13668     prepareUrl : function(url){
13669         if(this.disableCaching){
13670             var append = "_dc=" + (new Date().getTime());
13671             if(url.indexOf("?") !== -1){
13672                 url += "&" + append;
13673             }else{
13674                 url += "?" + append;
13675             }
13676         }
13677         return url;
13678     },
13679
13680     /**
13681      * @private
13682      */
13683     processSuccess : function(response){
13684         this.transaction = null;
13685         if(response.argument.form && response.argument.reset){
13686             try{ // put in try/catch since some older FF releases had problems with this
13687                 response.argument.form.reset();
13688             }catch(e){}
13689         }
13690         if(this.loadScripts){
13691             this.renderer.render(this.el, response, this,
13692                 this.updateComplete.createDelegate(this, [response]));
13693         }else{
13694             this.renderer.render(this.el, response, this);
13695             this.updateComplete(response);
13696         }
13697     },
13698
13699     updateComplete : function(response){
13700         this.fireEvent("update", this.el, response);
13701         if(typeof response.argument.callback == "function"){
13702             response.argument.callback(this.el, true, response);
13703         }
13704     },
13705
13706     /**
13707      * @private
13708      */
13709     processFailure : function(response){
13710         this.transaction = null;
13711         this.fireEvent("failure", this.el, response);
13712         if(typeof response.argument.callback == "function"){
13713             response.argument.callback(this.el, false, response);
13714         }
13715     },
13716
13717     /**
13718      * Set the content renderer for this UpdateManager. See {@link Roo.UpdateManager.BasicRenderer#render} for more details.
13719      * @param {Object} renderer The object implementing the render() method
13720      */
13721     setRenderer : function(renderer){
13722         this.renderer = renderer;
13723     },
13724
13725     getRenderer : function(){
13726        return this.renderer;
13727     },
13728
13729     /**
13730      * Set the defaultUrl used for updates
13731      * @param {String/Function} defaultUrl The url or a function to call to get the url
13732      */
13733     setDefaultUrl : function(defaultUrl){
13734         this.defaultUrl = defaultUrl;
13735     },
13736
13737     /**
13738      * Aborts the executing transaction
13739      */
13740     abort : function(){
13741         if(this.transaction){
13742             Roo.Ajax.abort(this.transaction);
13743         }
13744     },
13745
13746     /**
13747      * Returns true if an update is in progress
13748      * @return {Boolean}
13749      */
13750     isUpdating : function(){
13751         if(this.transaction){
13752             return Roo.Ajax.isLoading(this.transaction);
13753         }
13754         return false;
13755     }
13756 });
13757
13758 /**
13759  * @class Roo.UpdateManager.defaults
13760  * @static (not really - but it helps the doc tool)
13761  * The defaults collection enables customizing the default properties of UpdateManager
13762  */
13763    Roo.UpdateManager.defaults = {
13764        /**
13765          * Timeout for requests or form posts in seconds (Defaults 30 seconds).
13766          * @type Number
13767          */
13768          timeout : 30,
13769
13770          /**
13771          * True to process scripts by default (Defaults to false).
13772          * @type Boolean
13773          */
13774         loadScripts : false,
13775
13776         /**
13777         * Blank page URL to use with SSL file uploads (Defaults to "javascript:false").
13778         * @type String
13779         */
13780         sslBlankUrl : (Roo.SSL_SECURE_URL || "javascript:false"),
13781         /**
13782          * Whether to append unique parameter on get request to disable caching (Defaults to false).
13783          * @type Boolean
13784          */
13785         disableCaching : false,
13786         /**
13787          * Whether to show indicatorText when loading (Defaults to true).
13788          * @type Boolean
13789          */
13790         showLoadIndicator : true,
13791         /**
13792          * Text for loading indicator (Defaults to '&lt;div class="loading-indicator"&gt;Loading...&lt;/div&gt;').
13793          * @type String
13794          */
13795         indicatorText : '<div class="loading-indicator">Loading...</div>'
13796    };
13797
13798 /**
13799  * Static convenience method. This method is deprecated in favor of el.load({url:'foo.php', ...}).
13800  *Usage:
13801  * <pre><code>Roo.UpdateManager.updateElement("my-div", "stuff.php");</code></pre>
13802  * @param {String/HTMLElement/Roo.Element} el The element to update
13803  * @param {String} url The url
13804  * @param {String/Object} params (optional) Url encoded param string or an object of name/value pairs
13805  * @param {Object} options (optional) A config object with any of the UpdateManager properties you want to set - for example: {disableCaching:true, indicatorText: "Loading data..."}
13806  * @static
13807  * @deprecated
13808  * @member Roo.UpdateManager
13809  */
13810 Roo.UpdateManager.updateElement = function(el, url, params, options){
13811     var um = Roo.get(el, true).getUpdateManager();
13812     Roo.apply(um, options);
13813     um.update(url, params, options ? options.callback : null);
13814 };
13815 // alias for backwards compat
13816 Roo.UpdateManager.update = Roo.UpdateManager.updateElement;
13817 /**
13818  * @class Roo.UpdateManager.BasicRenderer
13819  * Default Content renderer. Updates the elements innerHTML with the responseText.
13820  */
13821 Roo.UpdateManager.BasicRenderer = function(){};
13822
13823 Roo.UpdateManager.BasicRenderer.prototype = {
13824     /**
13825      * This is called when the transaction is completed and it's time to update the element - The BasicRenderer
13826      * updates the elements innerHTML with the responseText - To perform a custom render (i.e. XML or JSON processing),
13827      * create an object with a "render(el, response)" method and pass it to setRenderer on the UpdateManager.
13828      * @param {Roo.Element} el The element being rendered
13829      * @param {Object} response The YUI Connect response object
13830      * @param {UpdateManager} updateManager The calling update manager
13831      * @param {Function} callback A callback that will need to be called if loadScripts is true on the UpdateManager
13832      */
13833      render : function(el, response, updateManager, callback){
13834         el.update(response.responseText, updateManager.loadScripts, callback);
13835     }
13836 };
13837 /*
13838  * Based on:
13839  * Roo JS
13840  * (c)) Alan Knowles
13841  * Licence : LGPL
13842  */
13843
13844
13845 /**
13846  * @class Roo.DomTemplate
13847  * @extends Roo.Template
13848  * An effort at a dom based template engine..
13849  *
13850  * Similar to XTemplate, except it uses dom parsing to create the template..
13851  *
13852  * Supported features:
13853  *
13854  *  Tags:
13855
13856 <pre><code>
13857       {a_variable} - output encoded.
13858       {a_variable.format:("Y-m-d")} - call a method on the variable
13859       {a_variable:raw} - unencoded output
13860       {a_variable:toFixed(1,2)} - Roo.util.Format."toFixed"
13861       {a_variable:this.method_on_template(...)} - call a method on the template object.
13862  
13863 </code></pre>
13864  *  The tpl tag:
13865 <pre><code>
13866         &lt;div roo-for="a_variable or condition.."&gt;&lt;/div&gt;
13867         &lt;div roo-if="a_variable or condition"&gt;&lt;/div&gt;
13868         &lt;div roo-exec="some javascript"&gt;&lt;/div&gt;
13869         &lt;div roo-name="named_template"&gt;&lt;/div&gt; 
13870   
13871 </code></pre>
13872  *      
13873  */
13874 Roo.DomTemplate = function()
13875 {
13876      Roo.DomTemplate.superclass.constructor.apply(this, arguments);
13877      if (this.html) {
13878         this.compile();
13879      }
13880 };
13881
13882
13883 Roo.extend(Roo.DomTemplate, Roo.Template, {
13884     /**
13885      * id counter for sub templates.
13886      */
13887     id : 0,
13888     /**
13889      * flag to indicate if dom parser is inside a pre,
13890      * it will strip whitespace if not.
13891      */
13892     inPre : false,
13893     
13894     /**
13895      * The various sub templates
13896      */
13897     tpls : false,
13898     
13899     
13900     
13901     /**
13902      *
13903      * basic tag replacing syntax
13904      * WORD:WORD()
13905      *
13906      * // you can fake an object call by doing this
13907      *  x.t:(test,tesT) 
13908      * 
13909      */
13910     re : /(\{|\%7B)([\w-\.]+)(?:\:([\w\.]*)(?:\(([^)]*?)?\))?)?(\}|\%7D)/g,
13911     //re : /\{([\w-\.]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
13912     
13913     iterChild : function (node, method) {
13914         
13915         var oldPre = this.inPre;
13916         if (node.tagName == 'PRE') {
13917             this.inPre = true;
13918         }
13919         for( var i = 0; i < node.childNodes.length; i++) {
13920             method.call(this, node.childNodes[i]);
13921         }
13922         this.inPre = oldPre;
13923     },
13924     
13925     
13926     
13927     /**
13928      * compile the template
13929      *
13930      * This is not recursive, so I'm not sure how nested templates are really going to be handled..
13931      *
13932      */
13933     compile: function()
13934     {
13935         var s = this.html;
13936         
13937         // covert the html into DOM...
13938         var doc = false;
13939         var div =false;
13940         try {
13941             doc = document.implementation.createHTMLDocument("");
13942             doc.documentElement.innerHTML =   this.html  ;
13943             div = doc.documentElement;
13944         } catch (e) {
13945             // old IE... - nasty -- it causes all sorts of issues.. with
13946             // images getting pulled from server..
13947             div = document.createElement('div');
13948             div.innerHTML = this.html;
13949         }
13950         //doc.documentElement.innerHTML = htmlBody
13951          
13952         
13953         
13954         this.tpls = [];
13955         var _t = this;
13956         this.iterChild(div, function(n) {_t.compileNode(n, true); });
13957         
13958         var tpls = this.tpls;
13959         
13960         // create a top level template from the snippet..
13961         
13962         //Roo.log(div.innerHTML);
13963         
13964         var tpl = {
13965             uid : 'master',
13966             id : this.id++,
13967             attr : false,
13968             value : false,
13969             body : div.innerHTML,
13970             
13971             forCall : false,
13972             execCall : false,
13973             dom : div,
13974             isTop : true
13975             
13976         };
13977         tpls.unshift(tpl);
13978         
13979         
13980         // compile them...
13981         this.tpls = [];
13982         Roo.each(tpls, function(tp){
13983             this.compileTpl(tp);
13984             this.tpls[tp.id] = tp;
13985         }, this);
13986         
13987         this.master = tpls[0];
13988         return this;
13989         
13990         
13991     },
13992     
13993     compileNode : function(node, istop) {
13994         // test for
13995         //Roo.log(node);
13996         
13997         
13998         // skip anything not a tag..
13999         if (node.nodeType != 1) {
14000             if (node.nodeType == 3 && !this.inPre) {
14001                 // reduce white space..
14002                 node.nodeValue = node.nodeValue.replace(/\s+/g, ' '); 
14003                 
14004             }
14005             return;
14006         }
14007         
14008         var tpl = {
14009             uid : false,
14010             id : false,
14011             attr : false,
14012             value : false,
14013             body : '',
14014             
14015             forCall : false,
14016             execCall : false,
14017             dom : false,
14018             isTop : istop
14019             
14020             
14021         };
14022         
14023         
14024         switch(true) {
14025             case (node.hasAttribute('roo-for')): tpl.attr = 'for'; break;
14026             case (node.hasAttribute('roo-if')): tpl.attr = 'if'; break;
14027             case (node.hasAttribute('roo-name')): tpl.attr = 'name'; break;
14028             case (node.hasAttribute('roo-exec')): tpl.attr = 'exec'; break;
14029             // no default..
14030         }
14031         
14032         
14033         if (!tpl.attr) {
14034             // just itterate children..
14035             this.iterChild(node,this.compileNode);
14036             return;
14037         }
14038         tpl.uid = this.id++;
14039         tpl.value = node.getAttribute('roo-' +  tpl.attr);
14040         node.removeAttribute('roo-'+ tpl.attr);
14041         if (tpl.attr != 'name') {
14042             var placeholder = document.createTextNode('{domtpl' + tpl.uid + '}');
14043             node.parentNode.replaceChild(placeholder,  node);
14044         } else {
14045             
14046             var placeholder =  document.createElement('span');
14047             placeholder.className = 'roo-tpl-' + tpl.value;
14048             node.parentNode.replaceChild(placeholder,  node);
14049         }
14050         
14051         // parent now sees '{domtplXXXX}
14052         this.iterChild(node,this.compileNode);
14053         
14054         // we should now have node body...
14055         var div = document.createElement('div');
14056         div.appendChild(node);
14057         tpl.dom = node;
14058         // this has the unfortunate side effect of converting tagged attributes
14059         // eg. href="{...}" into %7C...%7D
14060         // this has been fixed by searching for those combo's although it's a bit hacky..
14061         
14062         
14063         tpl.body = div.innerHTML;
14064         
14065         
14066          
14067         tpl.id = tpl.uid;
14068         switch(tpl.attr) {
14069             case 'for' :
14070                 switch (tpl.value) {
14071                     case '.':  tpl.forCall = new Function('values', 'parent', 'with(values){ return values; }'); break;
14072                     case '..': tpl.forCall= new Function('values', 'parent', 'with(values){ return parent; }'); break;
14073                     default:   tpl.forCall= new Function('values', 'parent', 'with(values){ return '+tpl.value+'; }');
14074                 }
14075                 break;
14076             
14077             case 'exec':
14078                 tpl.execCall = new Function('values', 'parent', 'with(values){ '+(Roo.util.Format.htmlDecode(tpl.value))+'; }');
14079                 break;
14080             
14081             case 'if':     
14082                 tpl.ifCall = new Function('values', 'parent', 'with(values){ return '+(Roo.util.Format.htmlDecode(tpl.value))+'; }');
14083                 break;
14084             
14085             case 'name':
14086                 tpl.id  = tpl.value; // replace non characters???
14087                 break;
14088             
14089         }
14090         
14091         
14092         this.tpls.push(tpl);
14093         
14094         
14095         
14096     },
14097     
14098     
14099     
14100     
14101     /**
14102      * Compile a segment of the template into a 'sub-template'
14103      *
14104      * 
14105      * 
14106      *
14107      */
14108     compileTpl : function(tpl)
14109     {
14110         var fm = Roo.util.Format;
14111         var useF = this.disableFormats !== true;
14112         
14113         var sep = Roo.isGecko ? "+\n" : ",\n";
14114         
14115         var undef = function(str) {
14116             Roo.debug && Roo.log("Property not found :"  + str);
14117             return '';
14118         };
14119           
14120         //Roo.log(tpl.body);
14121         
14122         
14123         
14124         var fn = function(m, lbrace, name, format, args)
14125         {
14126             //Roo.log("ARGS");
14127             //Roo.log(arguments);
14128             args = args ? args.replace(/\\'/g,"'") : args;
14129             //["{TEST:(a,b,c)}", "TEST", "", "a,b,c", 0, "{TEST:(a,b,c)}"]
14130             if (typeof(format) == 'undefined') {
14131                 format =  'htmlEncode'; 
14132             }
14133             if (format == 'raw' ) {
14134                 format = false;
14135             }
14136             
14137             if(name.substr(0, 6) == 'domtpl'){
14138                 return "'"+ sep +'this.applySubTemplate('+name.substr(6)+', values, parent)'+sep+"'";
14139             }
14140             
14141             // build an array of options to determine if value is undefined..
14142             
14143             // basically get 'xxxx.yyyy' then do
14144             // (typeof(xxxx) == 'undefined' || typeof(xxx.yyyy) == 'undefined') ?
14145             //    (function () { Roo.log("Property not found"); return ''; })() :
14146             //    ......
14147             
14148             var udef_ar = [];
14149             var lookfor = '';
14150             Roo.each(name.split('.'), function(st) {
14151                 lookfor += (lookfor.length ? '.': '') + st;
14152                 udef_ar.push(  "(typeof(" + lookfor + ") == 'undefined')"  );
14153             });
14154             
14155             var udef_st = '((' + udef_ar.join(" || ") +") ? undef('" + name + "') : "; // .. needs )
14156             
14157             
14158             if(format && useF){
14159                 
14160                 args = args ? ',' + args : "";
14161                  
14162                 if(format.substr(0, 5) != "this."){
14163                     format = "fm." + format + '(';
14164                 }else{
14165                     format = 'this.call("'+ format.substr(5) + '", ';
14166                     args = ", values";
14167                 }
14168                 
14169                 return "'"+ sep +   udef_st   +    format + name + args + "))"+sep+"'";
14170             }
14171              
14172             if (args && args.length) {
14173                 // called with xxyx.yuu:(test,test)
14174                 // change to ()
14175                 return "'"+ sep + udef_st  + name + '(' +  args + "))"+sep+"'";
14176             }
14177             // raw.. - :raw modifier..
14178             return "'"+ sep + udef_st  + name + ")"+sep+"'";
14179             
14180         };
14181         var body;
14182         // branched to use + in gecko and [].join() in others
14183         if(Roo.isGecko){
14184             body = "tpl.compiled = function(values, parent){  with(values) { return '" +
14185                    tpl.body.replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn) +
14186                     "';};};";
14187         }else{
14188             body = ["tpl.compiled = function(values, parent){  with (values) { return ['"];
14189             body.push(tpl.body.replace(/(\r\n|\n)/g,
14190                             '\\n').replace(/'/g, "\\'").replace(this.re, fn));
14191             body.push("'].join('');};};");
14192             body = body.join('');
14193         }
14194         
14195         Roo.debug && Roo.log(body.replace(/\\n/,'\n'));
14196        
14197         /** eval:var:tpl eval:var:fm eval:var:useF eval:var:undef  */
14198         eval(body);
14199         
14200         return this;
14201     },
14202      
14203     /**
14204      * same as applyTemplate, except it's done to one of the subTemplates
14205      * when using named templates, you can do:
14206      *
14207      * var str = pl.applySubTemplate('your-name', values);
14208      *
14209      * 
14210      * @param {Number} id of the template
14211      * @param {Object} values to apply to template
14212      * @param {Object} parent (normaly the instance of this object)
14213      */
14214     applySubTemplate : function(id, values, parent)
14215     {
14216         
14217         
14218         var t = this.tpls[id];
14219         
14220         
14221         try { 
14222             if(t.ifCall && !t.ifCall.call(this, values, parent)){
14223                 Roo.debug && Roo.log('if call on ' + t.value + ' return false');
14224                 return '';
14225             }
14226         } catch(e) {
14227             Roo.log('Xtemplate.applySubTemplate('+ id+ '): Exception thrown on roo-if="' + t.value + '" - ' + e.toString());
14228             Roo.log(values);
14229           
14230             return '';
14231         }
14232         try { 
14233             
14234             if(t.execCall && t.execCall.call(this, values, parent)){
14235                 return '';
14236             }
14237         } catch(e) {
14238             Roo.log('Xtemplate.applySubTemplate('+ id+ '): Exception thrown on roo-for="' + t.value + '" - ' + e.toString());
14239             Roo.log(values);
14240             return '';
14241         }
14242         
14243         try {
14244             var vs = t.forCall ? t.forCall.call(this, values, parent) : values;
14245             parent = t.target ? values : parent;
14246             if(t.forCall && vs instanceof Array){
14247                 var buf = [];
14248                 for(var i = 0, len = vs.length; i < len; i++){
14249                     try {
14250                         buf[buf.length] = t.compiled.call(this, vs[i], parent);
14251                     } catch (e) {
14252                         Roo.log('Xtemplate.applySubTemplate('+ id+ '): Exception thrown on body="' + t.value + '" - ' + e.toString());
14253                         Roo.log(e.body);
14254                         //Roo.log(t.compiled);
14255                         Roo.log(vs[i]);
14256                     }   
14257                 }
14258                 return buf.join('');
14259             }
14260         } catch (e) {
14261             Roo.log('Xtemplate.applySubTemplate('+ id+ '): Exception thrown on roo-for="' + t.value + '" - ' + e.toString());
14262             Roo.log(values);
14263             return '';
14264         }
14265         try {
14266             return t.compiled.call(this, vs, parent);
14267         } catch (e) {
14268             Roo.log('Xtemplate.applySubTemplate('+ id+ '): Exception thrown on body="' + t.value + '" - ' + e.toString());
14269             Roo.log(e.body);
14270             //Roo.log(t.compiled);
14271             Roo.log(values);
14272             return '';
14273         }
14274     },
14275
14276    
14277
14278     applyTemplate : function(values){
14279         return this.master.compiled.call(this, values, {});
14280         //var s = this.subs;
14281     },
14282
14283     apply : function(){
14284         return this.applyTemplate.apply(this, arguments);
14285     }
14286
14287  });
14288
14289 Roo.DomTemplate.from = function(el){
14290     el = Roo.getDom(el);
14291     return new Roo.Domtemplate(el.value || el.innerHTML);
14292 };/*
14293  * Based on:
14294  * Ext JS Library 1.1.1
14295  * Copyright(c) 2006-2007, Ext JS, LLC.
14296  *
14297  * Originally Released Under LGPL - original licence link has changed is not relivant.
14298  *
14299  * Fork - LGPL
14300  * <script type="text/javascript">
14301  */
14302
14303 /**
14304  * @class Roo.util.DelayedTask
14305  * Provides a convenient method of performing setTimeout where a new
14306  * timeout cancels the old timeout. An example would be performing validation on a keypress.
14307  * You can use this class to buffer
14308  * the keypress events for a certain number of milliseconds, and perform only if they stop
14309  * for that amount of time.
14310  * @constructor The parameters to this constructor serve as defaults and are not required.
14311  * @param {Function} fn (optional) The default function to timeout
14312  * @param {Object} scope (optional) The default scope of that timeout
14313  * @param {Array} args (optional) The default Array of arguments
14314  */
14315 Roo.util.DelayedTask = function(fn, scope, args){
14316     var id = null, d, t;
14317
14318     var call = function(){
14319         var now = new Date().getTime();
14320         if(now - t >= d){
14321             clearInterval(id);
14322             id = null;
14323             fn.apply(scope, args || []);
14324         }
14325     };
14326     /**
14327      * Cancels any pending timeout and queues a new one
14328      * @param {Number} delay The milliseconds to delay
14329      * @param {Function} newFn (optional) Overrides function passed to constructor
14330      * @param {Object} newScope (optional) Overrides scope passed to constructor
14331      * @param {Array} newArgs (optional) Overrides args passed to constructor
14332      */
14333     this.delay = function(delay, newFn, newScope, newArgs){
14334         if(id && delay != d){
14335             this.cancel();
14336         }
14337         d = delay;
14338         t = new Date().getTime();
14339         fn = newFn || fn;
14340         scope = newScope || scope;
14341         args = newArgs || args;
14342         if(!id){
14343             id = setInterval(call, d);
14344         }
14345     };
14346
14347     /**
14348      * Cancel the last queued timeout
14349      */
14350     this.cancel = function(){
14351         if(id){
14352             clearInterval(id);
14353             id = null;
14354         }
14355     };
14356 };/*
14357  * Based on:
14358  * Ext JS Library 1.1.1
14359  * Copyright(c) 2006-2007, Ext JS, LLC.
14360  *
14361  * Originally Released Under LGPL - original licence link has changed is not relivant.
14362  *
14363  * Fork - LGPL
14364  * <script type="text/javascript">
14365  */
14366 /**
14367  * @class Roo.util.TaskRunner
14368  * Manage background tasks - not sure why this is better that setInterval?
14369  * @static
14370  *
14371  */
14372  
14373 Roo.util.TaskRunner = function(interval){
14374     interval = interval || 10;
14375     var tasks = [], removeQueue = [];
14376     var id = 0;
14377     var running = false;
14378
14379     var stopThread = function(){
14380         running = false;
14381         clearInterval(id);
14382         id = 0;
14383     };
14384
14385     var startThread = function(){
14386         if(!running){
14387             running = true;
14388             id = setInterval(runTasks, interval);
14389         }
14390     };
14391
14392     var removeTask = function(task){
14393         removeQueue.push(task);
14394         if(task.onStop){
14395             task.onStop();
14396         }
14397     };
14398
14399     var runTasks = function(){
14400         if(removeQueue.length > 0){
14401             for(var i = 0, len = removeQueue.length; i < len; i++){
14402                 tasks.remove(removeQueue[i]);
14403             }
14404             removeQueue = [];
14405             if(tasks.length < 1){
14406                 stopThread();
14407                 return;
14408             }
14409         }
14410         var now = new Date().getTime();
14411         for(var i = 0, len = tasks.length; i < len; ++i){
14412             var t = tasks[i];
14413             var itime = now - t.taskRunTime;
14414             if(t.interval <= itime){
14415                 var rt = t.run.apply(t.scope || t, t.args || [++t.taskRunCount]);
14416                 t.taskRunTime = now;
14417                 if(rt === false || t.taskRunCount === t.repeat){
14418                     removeTask(t);
14419                     return;
14420                 }
14421             }
14422             if(t.duration && t.duration <= (now - t.taskStartTime)){
14423                 removeTask(t);
14424             }
14425         }
14426     };
14427
14428     /**
14429      * Queues a new task.
14430      * @param {Object} task
14431      *
14432      * Task property : interval = how frequent to run.
14433      * Task object should implement
14434      * function run()
14435      * Task object may implement
14436      * function onStop()
14437      */
14438     this.start = function(task){
14439         tasks.push(task);
14440         task.taskStartTime = new Date().getTime();
14441         task.taskRunTime = 0;
14442         task.taskRunCount = 0;
14443         startThread();
14444         return task;
14445     };
14446     /**
14447      * Stop  new task.
14448      * @param {Object} task
14449      */
14450     this.stop = function(task){
14451         removeTask(task);
14452         return task;
14453     };
14454     /**
14455      * Stop all Tasks
14456      */
14457     this.stopAll = function(){
14458         stopThread();
14459         for(var i = 0, len = tasks.length; i < len; i++){
14460             if(tasks[i].onStop){
14461                 tasks[i].onStop();
14462             }
14463         }
14464         tasks = [];
14465         removeQueue = [];
14466     };
14467 };
14468
14469 Roo.TaskMgr = new Roo.util.TaskRunner();/*
14470  * Based on:
14471  * Ext JS Library 1.1.1
14472  * Copyright(c) 2006-2007, Ext JS, LLC.
14473  *
14474  * Originally Released Under LGPL - original licence link has changed is not relivant.
14475  *
14476  * Fork - LGPL
14477  * <script type="text/javascript">
14478  */
14479
14480  
14481 /**
14482  * @class Roo.util.MixedCollection
14483  * @extends Roo.util.Observable
14484  * A Collection class that maintains both numeric indexes and keys and exposes events.
14485  * @constructor
14486  * @param {Boolean} allowFunctions True if the addAll function should add function references to the
14487  * collection (defaults to false)
14488  * @param {Function} keyFn A function that can accept an item of the type(s) stored in this MixedCollection
14489  * and return the key value for that item.  This is used when available to look up the key on items that
14490  * were passed without an explicit key parameter to a MixedCollection method.  Passing this parameter is
14491  * equivalent to providing an implementation for the {@link #getKey} method.
14492  */
14493 Roo.util.MixedCollection = function(allowFunctions, keyFn){
14494     this.items = [];
14495     this.map = {};
14496     this.keys = [];
14497     this.length = 0;
14498     this.addEvents({
14499         /**
14500          * @event clear
14501          * Fires when the collection is cleared.
14502          */
14503         "clear" : true,
14504         /**
14505          * @event add
14506          * Fires when an item is added to the collection.
14507          * @param {Number} index The index at which the item was added.
14508          * @param {Object} o The item added.
14509          * @param {String} key The key associated with the added item.
14510          */
14511         "add" : true,
14512         /**
14513          * @event replace
14514          * Fires when an item is replaced in the collection.
14515          * @param {String} key he key associated with the new added.
14516          * @param {Object} old The item being replaced.
14517          * @param {Object} new The new item.
14518          */
14519         "replace" : true,
14520         /**
14521          * @event remove
14522          * Fires when an item is removed from the collection.
14523          * @param {Object} o The item being removed.
14524          * @param {String} key (optional) The key associated with the removed item.
14525          */
14526         "remove" : true,
14527         "sort" : true
14528     });
14529     this.allowFunctions = allowFunctions === true;
14530     if(keyFn){
14531         this.getKey = keyFn;
14532     }
14533     Roo.util.MixedCollection.superclass.constructor.call(this);
14534 };
14535
14536 Roo.extend(Roo.util.MixedCollection, Roo.util.Observable, {
14537     allowFunctions : false,
14538     
14539 /**
14540  * Adds an item to the collection.
14541  * @param {String} key The key to associate with the item
14542  * @param {Object} o The item to add.
14543  * @return {Object} The item added.
14544  */
14545     add : function(key, o){
14546         if(arguments.length == 1){
14547             o = arguments[0];
14548             key = this.getKey(o);
14549         }
14550         if(typeof key == "undefined" || key === null){
14551             this.length++;
14552             this.items.push(o);
14553             this.keys.push(null);
14554         }else{
14555             var old = this.map[key];
14556             if(old){
14557                 return this.replace(key, o);
14558             }
14559             this.length++;
14560             this.items.push(o);
14561             this.map[key] = o;
14562             this.keys.push(key);
14563         }
14564         this.fireEvent("add", this.length-1, o, key);
14565         return o;
14566     },
14567        
14568 /**
14569   * MixedCollection has a generic way to fetch keys if you implement getKey.
14570 <pre><code>
14571 // normal way
14572 var mc = new Roo.util.MixedCollection();
14573 mc.add(someEl.dom.id, someEl);
14574 mc.add(otherEl.dom.id, otherEl);
14575 //and so on
14576
14577 // using getKey
14578 var mc = new Roo.util.MixedCollection();
14579 mc.getKey = function(el){
14580    return el.dom.id;
14581 };
14582 mc.add(someEl);
14583 mc.add(otherEl);
14584
14585 // or via the constructor
14586 var mc = new Roo.util.MixedCollection(false, function(el){
14587    return el.dom.id;
14588 });
14589 mc.add(someEl);
14590 mc.add(otherEl);
14591 </code></pre>
14592  * @param o {Object} The item for which to find the key.
14593  * @return {Object} The key for the passed item.
14594  */
14595     getKey : function(o){
14596          return o.id; 
14597     },
14598    
14599 /**
14600  * Replaces an item in the collection.
14601  * @param {String} key The key associated with the item to replace, or the item to replace.
14602  * @param o {Object} o (optional) If the first parameter passed was a key, the item to associate with that key.
14603  * @return {Object}  The new item.
14604  */
14605     replace : function(key, o){
14606         if(arguments.length == 1){
14607             o = arguments[0];
14608             key = this.getKey(o);
14609         }
14610         var old = this.item(key);
14611         if(typeof key == "undefined" || key === null || typeof old == "undefined"){
14612              return this.add(key, o);
14613         }
14614         var index = this.indexOfKey(key);
14615         this.items[index] = o;
14616         this.map[key] = o;
14617         this.fireEvent("replace", key, old, o);
14618         return o;
14619     },
14620    
14621 /**
14622  * Adds all elements of an Array or an Object to the collection.
14623  * @param {Object/Array} objs An Object containing properties which will be added to the collection, or
14624  * an Array of values, each of which are added to the collection.
14625  */
14626     addAll : function(objs){
14627         if(arguments.length > 1 || objs instanceof Array){
14628             var args = arguments.length > 1 ? arguments : objs;
14629             for(var i = 0, len = args.length; i < len; i++){
14630                 this.add(args[i]);
14631             }
14632         }else{
14633             for(var key in objs){
14634                 if(this.allowFunctions || typeof objs[key] != "function"){
14635                     this.add(key, objs[key]);
14636                 }
14637             }
14638         }
14639     },
14640    
14641 /**
14642  * Executes the specified function once for every item in the collection, passing each
14643  * item as the first and only parameter. returning false from the function will stop the iteration.
14644  * @param {Function} fn The function to execute for each item.
14645  * @param {Object} scope (optional) The scope in which to execute the function.
14646  */
14647     each : function(fn, scope){
14648         var items = [].concat(this.items); // each safe for removal
14649         for(var i = 0, len = items.length; i < len; i++){
14650             if(fn.call(scope || items[i], items[i], i, len) === false){
14651                 break;
14652             }
14653         }
14654     },
14655    
14656 /**
14657  * Executes the specified function once for every key in the collection, passing each
14658  * key, and its associated item as the first two parameters.
14659  * @param {Function} fn The function to execute for each item.
14660  * @param {Object} scope (optional) The scope in which to execute the function.
14661  */
14662     eachKey : function(fn, scope){
14663         for(var i = 0, len = this.keys.length; i < len; i++){
14664             fn.call(scope || window, this.keys[i], this.items[i], i, len);
14665         }
14666     },
14667    
14668 /**
14669  * Returns the first item in the collection which elicits a true return value from the
14670  * passed selection function.
14671  * @param {Function} fn The selection function to execute for each item.
14672  * @param {Object} scope (optional) The scope in which to execute the function.
14673  * @return {Object} The first item in the collection which returned true from the selection function.
14674  */
14675     find : function(fn, scope){
14676         for(var i = 0, len = this.items.length; i < len; i++){
14677             if(fn.call(scope || window, this.items[i], this.keys[i])){
14678                 return this.items[i];
14679             }
14680         }
14681         return null;
14682     },
14683    
14684 /**
14685  * Inserts an item at the specified index in the collection.
14686  * @param {Number} index The index to insert the item at.
14687  * @param {String} key The key to associate with the new item, or the item itself.
14688  * @param {Object} o  (optional) If the second parameter was a key, the new item.
14689  * @return {Object} The item inserted.
14690  */
14691     insert : function(index, key, o){
14692         if(arguments.length == 2){
14693             o = arguments[1];
14694             key = this.getKey(o);
14695         }
14696         if(index >= this.length){
14697             return this.add(key, o);
14698         }
14699         this.length++;
14700         this.items.splice(index, 0, o);
14701         if(typeof key != "undefined" && key != null){
14702             this.map[key] = o;
14703         }
14704         this.keys.splice(index, 0, key);
14705         this.fireEvent("add", index, o, key);
14706         return o;
14707     },
14708    
14709 /**
14710  * Removed an item from the collection.
14711  * @param {Object} o The item to remove.
14712  * @return {Object} The item removed.
14713  */
14714     remove : function(o){
14715         return this.removeAt(this.indexOf(o));
14716     },
14717    
14718 /**
14719  * Remove an item from a specified index in the collection.
14720  * @param {Number} index The index within the collection of the item to remove.
14721  */
14722     removeAt : function(index){
14723         if(index < this.length && index >= 0){
14724             this.length--;
14725             var o = this.items[index];
14726             this.items.splice(index, 1);
14727             var key = this.keys[index];
14728             if(typeof key != "undefined"){
14729                 delete this.map[key];
14730             }
14731             this.keys.splice(index, 1);
14732             this.fireEvent("remove", o, key);
14733         }
14734     },
14735    
14736 /**
14737  * Removed an item associated with the passed key fom the collection.
14738  * @param {String} key The key of the item to remove.
14739  */
14740     removeKey : function(key){
14741         return this.removeAt(this.indexOfKey(key));
14742     },
14743    
14744 /**
14745  * Returns the number of items in the collection.
14746  * @return {Number} the number of items in the collection.
14747  */
14748     getCount : function(){
14749         return this.length; 
14750     },
14751    
14752 /**
14753  * Returns index within the collection of the passed Object.
14754  * @param {Object} o The item to find the index of.
14755  * @return {Number} index of the item.
14756  */
14757     indexOf : function(o){
14758         if(!this.items.indexOf){
14759             for(var i = 0, len = this.items.length; i < len; i++){
14760                 if(this.items[i] == o) {
14761                     return i;
14762                 }
14763             }
14764             return -1;
14765         }else{
14766             return this.items.indexOf(o);
14767         }
14768     },
14769    
14770 /**
14771  * Returns index within the collection of the passed key.
14772  * @param {String} key The key to find the index of.
14773  * @return {Number} index of the key.
14774  */
14775     indexOfKey : function(key){
14776         if(!this.keys.indexOf){
14777             for(var i = 0, len = this.keys.length; i < len; i++){
14778                 if(this.keys[i] == key) {
14779                     return i;
14780                 }
14781             }
14782             return -1;
14783         }else{
14784             return this.keys.indexOf(key);
14785         }
14786     },
14787    
14788 /**
14789  * Returns the item associated with the passed key OR index. Key has priority over index.
14790  * @param {String/Number} key The key or index of the item.
14791  * @return {Object} The item associated with the passed key.
14792  */
14793     item : function(key){
14794         if (key === 'length') {
14795             return null;
14796         }
14797         var item = typeof this.map[key] != "undefined" ? this.map[key] : this.items[key];
14798         return typeof item != 'function' || this.allowFunctions ? item : null; // for prototype!
14799     },
14800     
14801 /**
14802  * Returns the item at the specified index.
14803  * @param {Number} index The index of the item.
14804  * @return {Object}
14805  */
14806     itemAt : function(index){
14807         return this.items[index];
14808     },
14809     
14810 /**
14811  * Returns the item associated with the passed key.
14812  * @param {String/Number} key The key of the item.
14813  * @return {Object} The item associated with the passed key.
14814  */
14815     key : function(key){
14816         return this.map[key];
14817     },
14818    
14819 /**
14820  * Returns true if the collection contains the passed Object as an item.
14821  * @param {Object} o  The Object to look for in the collection.
14822  * @return {Boolean} True if the collection contains the Object as an item.
14823  */
14824     contains : function(o){
14825         return this.indexOf(o) != -1;
14826     },
14827    
14828 /**
14829  * Returns true if the collection contains the passed Object as a key.
14830  * @param {String} key The key to look for in the collection.
14831  * @return {Boolean} True if the collection contains the Object as a key.
14832  */
14833     containsKey : function(key){
14834         return typeof this.map[key] != "undefined";
14835     },
14836    
14837 /**
14838  * Removes all items from the collection.
14839  */
14840     clear : function(){
14841         this.length = 0;
14842         this.items = [];
14843         this.keys = [];
14844         this.map = {};
14845         this.fireEvent("clear");
14846     },
14847    
14848 /**
14849  * Returns the first item in the collection.
14850  * @return {Object} the first item in the collection..
14851  */
14852     first : function(){
14853         return this.items[0]; 
14854     },
14855    
14856 /**
14857  * Returns the last item in the collection.
14858  * @return {Object} the last item in the collection..
14859  */
14860     last : function(){
14861         return this.items[this.length-1];   
14862     },
14863     
14864     _sort : function(property, dir, fn){
14865         var dsc = String(dir).toUpperCase() == "DESC" ? -1 : 1;
14866         fn = fn || function(a, b){
14867             return a-b;
14868         };
14869         var c = [], k = this.keys, items = this.items;
14870         for(var i = 0, len = items.length; i < len; i++){
14871             c[c.length] = {key: k[i], value: items[i], index: i};
14872         }
14873         c.sort(function(a, b){
14874             var v = fn(a[property], b[property]) * dsc;
14875             if(v == 0){
14876                 v = (a.index < b.index ? -1 : 1);
14877             }
14878             return v;
14879         });
14880         for(var i = 0, len = c.length; i < len; i++){
14881             items[i] = c[i].value;
14882             k[i] = c[i].key;
14883         }
14884         this.fireEvent("sort", this);
14885     },
14886     
14887     /**
14888      * Sorts this collection with the passed comparison function
14889      * @param {String} direction (optional) "ASC" or "DESC"
14890      * @param {Function} fn (optional) comparison function
14891      */
14892     sort : function(dir, fn){
14893         this._sort("value", dir, fn);
14894     },
14895     
14896     /**
14897      * Sorts this collection by keys
14898      * @param {String} direction (optional) "ASC" or "DESC"
14899      * @param {Function} fn (optional) a comparison function (defaults to case insensitive string)
14900      */
14901     keySort : function(dir, fn){
14902         this._sort("key", dir, fn || function(a, b){
14903             return String(a).toUpperCase()-String(b).toUpperCase();
14904         });
14905     },
14906     
14907     /**
14908      * Returns a range of items in this collection
14909      * @param {Number} startIndex (optional) defaults to 0
14910      * @param {Number} endIndex (optional) default to the last item
14911      * @return {Array} An array of items
14912      */
14913     getRange : function(start, end){
14914         var items = this.items;
14915         if(items.length < 1){
14916             return [];
14917         }
14918         start = start || 0;
14919         end = Math.min(typeof end == "undefined" ? this.length-1 : end, this.length-1);
14920         var r = [];
14921         if(start <= end){
14922             for(var i = start; i <= end; i++) {
14923                     r[r.length] = items[i];
14924             }
14925         }else{
14926             for(var i = start; i >= end; i--) {
14927                     r[r.length] = items[i];
14928             }
14929         }
14930         return r;
14931     },
14932         
14933     /**
14934      * Filter the <i>objects</i> in this collection by a specific property. 
14935      * Returns a new collection that has been filtered.
14936      * @param {String} property A property on your objects
14937      * @param {String/RegExp} value Either string that the property values 
14938      * should start with or a RegExp to test against the property
14939      * @return {MixedCollection} The new filtered collection
14940      */
14941     filter : function(property, value){
14942         if(!value.exec){ // not a regex
14943             value = String(value);
14944             if(value.length == 0){
14945                 return this.clone();
14946             }
14947             value = new RegExp("^" + Roo.escapeRe(value), "i");
14948         }
14949         return this.filterBy(function(o){
14950             return o && value.test(o[property]);
14951         });
14952         },
14953     
14954     /**
14955      * Filter by a function. * Returns a new collection that has been filtered.
14956      * The passed function will be called with each 
14957      * object in the collection. If the function returns true, the value is included 
14958      * otherwise it is filtered.
14959      * @param {Function} fn The function to be called, it will receive the args o (the object), k (the key)
14960      * @param {Object} scope (optional) The scope of the function (defaults to this) 
14961      * @return {MixedCollection} The new filtered collection
14962      */
14963     filterBy : function(fn, scope){
14964         var r = new Roo.util.MixedCollection();
14965         r.getKey = this.getKey;
14966         var k = this.keys, it = this.items;
14967         for(var i = 0, len = it.length; i < len; i++){
14968             if(fn.call(scope||this, it[i], k[i])){
14969                                 r.add(k[i], it[i]);
14970                         }
14971         }
14972         return r;
14973     },
14974     
14975     /**
14976      * Creates a duplicate of this collection
14977      * @return {MixedCollection}
14978      */
14979     clone : function(){
14980         var r = new Roo.util.MixedCollection();
14981         var k = this.keys, it = this.items;
14982         for(var i = 0, len = it.length; i < len; i++){
14983             r.add(k[i], it[i]);
14984         }
14985         r.getKey = this.getKey;
14986         return r;
14987     }
14988 });
14989 /**
14990  * Returns the item associated with the passed key or index.
14991  * @method
14992  * @param {String/Number} key The key or index of the item.
14993  * @return {Object} The item associated with the passed key.
14994  */
14995 Roo.util.MixedCollection.prototype.get = Roo.util.MixedCollection.prototype.item;/*
14996  * Based on:
14997  * Ext JS Library 1.1.1
14998  * Copyright(c) 2006-2007, Ext JS, LLC.
14999  *
15000  * Originally Released Under LGPL - original licence link has changed is not relivant.
15001  *
15002  * Fork - LGPL
15003  * <script type="text/javascript">
15004  */
15005 /**
15006  * @class Roo.util.JSON
15007  * Modified version of Douglas Crockford"s json.js that doesn"t
15008  * mess with the Object prototype 
15009  * http://www.json.org/js.html
15010  * @static
15011  */
15012 Roo.util.JSON = new (function(){
15013     var useHasOwn = {}.hasOwnProperty ? true : false;
15014     
15015     // crashes Safari in some instances
15016     //var validRE = /^("(\\.|[^"\\\n\r])*?"|[,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t])+?$/;
15017     
15018     var pad = function(n) {
15019         return n < 10 ? "0" + n : n;
15020     };
15021     
15022     var m = {
15023         "\b": '\\b',
15024         "\t": '\\t',
15025         "\n": '\\n',
15026         "\f": '\\f',
15027         "\r": '\\r',
15028         '"' : '\\"',
15029         "\\": '\\\\'
15030     };
15031
15032     var encodeString = function(s){
15033         if (/["\\\x00-\x1f]/.test(s)) {
15034             return '"' + s.replace(/([\x00-\x1f\\"])/g, function(a, b) {
15035                 var c = m[b];
15036                 if(c){
15037                     return c;
15038                 }
15039                 c = b.charCodeAt();
15040                 return "\\u00" +
15041                     Math.floor(c / 16).toString(16) +
15042                     (c % 16).toString(16);
15043             }) + '"';
15044         }
15045         return '"' + s + '"';
15046     };
15047     
15048     var encodeArray = function(o){
15049         var a = ["["], b, i, l = o.length, v;
15050             for (i = 0; i < l; i += 1) {
15051                 v = o[i];
15052                 switch (typeof v) {
15053                     case "undefined":
15054                     case "function":
15055                     case "unknown":
15056                         break;
15057                     default:
15058                         if (b) {
15059                             a.push(',');
15060                         }
15061                         a.push(v === null ? "null" : Roo.util.JSON.encode(v));
15062                         b = true;
15063                 }
15064             }
15065             a.push("]");
15066             return a.join("");
15067     };
15068     
15069     var encodeDate = function(o){
15070         return '"' + o.getFullYear() + "-" +
15071                 pad(o.getMonth() + 1) + "-" +
15072                 pad(o.getDate()) + "T" +
15073                 pad(o.getHours()) + ":" +
15074                 pad(o.getMinutes()) + ":" +
15075                 pad(o.getSeconds()) + '"';
15076     };
15077     
15078     /**
15079      * Encodes an Object, Array or other value
15080      * @param {Mixed} o The variable to encode
15081      * @return {String} The JSON string
15082      */
15083     this.encode = function(o)
15084     {
15085         // should this be extended to fully wrap stringify..
15086         
15087         if(typeof o == "undefined" || o === null){
15088             return "null";
15089         }else if(o instanceof Array){
15090             return encodeArray(o);
15091         }else if(o instanceof Date){
15092             return encodeDate(o);
15093         }else if(typeof o == "string"){
15094             return encodeString(o);
15095         }else if(typeof o == "number"){
15096             return isFinite(o) ? String(o) : "null";
15097         }else if(typeof o == "boolean"){
15098             return String(o);
15099         }else {
15100             var a = ["{"], b, i, v;
15101             for (i in o) {
15102                 if(!useHasOwn || o.hasOwnProperty(i)) {
15103                     v = o[i];
15104                     switch (typeof v) {
15105                     case "undefined":
15106                     case "function":
15107                     case "unknown":
15108                         break;
15109                     default:
15110                         if(b){
15111                             a.push(',');
15112                         }
15113                         a.push(this.encode(i), ":",
15114                                 v === null ? "null" : this.encode(v));
15115                         b = true;
15116                     }
15117                 }
15118             }
15119             a.push("}");
15120             return a.join("");
15121         }
15122     };
15123     
15124     /**
15125      * Decodes (parses) a JSON string to an object. If the JSON is invalid, this function throws a SyntaxError.
15126      * @param {String} json The JSON string
15127      * @return {Object} The resulting object
15128      */
15129     this.decode = function(json){
15130         
15131         return  /** eval:var:json */ eval("(" + json + ')');
15132     };
15133 })();
15134 /** 
15135  * Shorthand for {@link Roo.util.JSON#encode}
15136  * @member Roo encode 
15137  * @method */
15138 Roo.encode = typeof(JSON) != 'undefined' && JSON.stringify ? JSON.stringify : Roo.util.JSON.encode;
15139 /** 
15140  * Shorthand for {@link Roo.util.JSON#decode}
15141  * @member Roo decode 
15142  * @method */
15143 Roo.decode = typeof(JSON) != 'undefined' && JSON.parse ? JSON.parse : Roo.util.JSON.decode;
15144 /*
15145  * Based on:
15146  * Ext JS Library 1.1.1
15147  * Copyright(c) 2006-2007, Ext JS, LLC.
15148  *
15149  * Originally Released Under LGPL - original licence link has changed is not relivant.
15150  *
15151  * Fork - LGPL
15152  * <script type="text/javascript">
15153  */
15154  
15155 /**
15156  * @class Roo.util.Format
15157  * Reusable data formatting functions
15158  * @static
15159  */
15160 Roo.util.Format = function(){
15161     var trimRe = /^\s+|\s+$/g;
15162     return {
15163         /**
15164          * Truncate a string and add an ellipsis ('...') to the end if it exceeds the specified length
15165          * @param {String} value The string to truncate
15166          * @param {Number} length The maximum length to allow before truncating
15167          * @return {String} The converted text
15168          */
15169         ellipsis : function(value, len){
15170             if(value && value.length > len){
15171                 return value.substr(0, len-3)+"...";
15172             }
15173             return value;
15174         },
15175
15176         /**
15177          * Checks a reference and converts it to empty string if it is undefined
15178          * @param {Mixed} value Reference to check
15179          * @return {Mixed} Empty string if converted, otherwise the original value
15180          */
15181         undef : function(value){
15182             return typeof value != "undefined" ? value : "";
15183         },
15184
15185         /**
15186          * Convert certain characters (&, <, >, and ') to their HTML character equivalents for literal display in web pages.
15187          * @param {String} value The string to encode
15188          * @return {String} The encoded text
15189          */
15190         htmlEncode : function(value){
15191             return !value ? value : String(value).replace(/&/g, "&amp;").replace(/>/g, "&gt;").replace(/</g, "&lt;").replace(/"/g, "&quot;");
15192         },
15193
15194         /**
15195          * Convert certain characters (&, <, >, and ') from their HTML character equivalents.
15196          * @param {String} value The string to decode
15197          * @return {String} The decoded text
15198          */
15199         htmlDecode : function(value){
15200             return !value ? value : String(value).replace(/&amp;/g, "&").replace(/&gt;/g, ">").replace(/&lt;/g, "<").replace(/&quot;/g, '"');
15201         },
15202
15203         /**
15204          * Trims any whitespace from either side of a string
15205          * @param {String} value The text to trim
15206          * @return {String} The trimmed text
15207          */
15208         trim : function(value){
15209             return String(value).replace(trimRe, "");
15210         },
15211
15212         /**
15213          * Returns a substring from within an original string
15214          * @param {String} value The original text
15215          * @param {Number} start The start index of the substring
15216          * @param {Number} length The length of the substring
15217          * @return {String} The substring
15218          */
15219         substr : function(value, start, length){
15220             return String(value).substr(start, length);
15221         },
15222
15223         /**
15224          * Converts a string to all lower case letters
15225          * @param {String} value The text to convert
15226          * @return {String} The converted text
15227          */
15228         lowercase : function(value){
15229             return String(value).toLowerCase();
15230         },
15231
15232         /**
15233          * Converts a string to all upper case letters
15234          * @param {String} value The text to convert
15235          * @return {String} The converted text
15236          */
15237         uppercase : function(value){
15238             return String(value).toUpperCase();
15239         },
15240
15241         /**
15242          * Converts the first character only of a string to upper case
15243          * @param {String} value The text to convert
15244          * @return {String} The converted text
15245          */
15246         capitalize : function(value){
15247             return !value ? value : value.charAt(0).toUpperCase() + value.substr(1).toLowerCase();
15248         },
15249
15250         // private
15251         call : function(value, fn){
15252             if(arguments.length > 2){
15253                 var args = Array.prototype.slice.call(arguments, 2);
15254                 args.unshift(value);
15255                  
15256                 return /** eval:var:value */  eval(fn).apply(window, args);
15257             }else{
15258                 /** eval:var:value */
15259                 return /** eval:var:value */ eval(fn).call(window, value);
15260             }
15261         },
15262
15263        
15264         /**
15265          * safer version of Math.toFixed..??/
15266          * @param {Number/String} value The numeric value to format
15267          * @param {Number/String} value Decimal places 
15268          * @return {String} The formatted currency string
15269          */
15270         toFixed : function(v, n)
15271         {
15272             // why not use to fixed - precision is buggered???
15273             if (!n) {
15274                 return Math.round(v-0);
15275             }
15276             var fact = Math.pow(10,n+1);
15277             v = (Math.round((v-0)*fact))/fact;
15278             var z = (''+fact).substring(2);
15279             if (v == Math.floor(v)) {
15280                 return Math.floor(v) + '.' + z;
15281             }
15282             
15283             // now just padd decimals..
15284             var ps = String(v).split('.');
15285             var fd = (ps[1] + z);
15286             var r = fd.substring(0,n); 
15287             var rm = fd.substring(n); 
15288             if (rm < 5) {
15289                 return ps[0] + '.' + r;
15290             }
15291             r*=1; // turn it into a number;
15292             r++;
15293             if (String(r).length != n) {
15294                 ps[0]*=1;
15295                 ps[0]++;
15296                 r = String(r).substring(1); // chop the end off.
15297             }
15298             
15299             return ps[0] + '.' + r;
15300              
15301         },
15302         
15303         /**
15304          * Format a number as US currency
15305          * @param {Number/String} value The numeric value to format
15306          * @return {String} The formatted currency string
15307          */
15308         usMoney : function(v){
15309             return '$' + Roo.util.Format.number(v);
15310         },
15311         
15312         /**
15313          * Format a number
15314          * eventually this should probably emulate php's number_format
15315          * @param {Number/String} value The numeric value to format
15316          * @param {Number} decimals number of decimal places
15317          * @param {String} delimiter for thousands (default comma)
15318          * @return {String} The formatted currency string
15319          */
15320         number : function(v, decimals, thousandsDelimiter)
15321         {
15322             // multiply and round.
15323             decimals = typeof(decimals) == 'undefined' ? 2 : decimals;
15324             thousandsDelimiter = typeof(thousandsDelimiter) == 'undefined' ? ',' : thousandsDelimiter;
15325             
15326             var mul = Math.pow(10, decimals);
15327             var zero = String(mul).substring(1);
15328             v = (Math.round((v-0)*mul))/mul;
15329             
15330             // if it's '0' number.. then
15331             
15332             //v = (v == Math.floor(v)) ? v + "." + zero : ((v*10 == Math.floor(v*10)) ? v + "0" : v);
15333             v = String(v);
15334             var ps = v.split('.');
15335             var whole = ps[0];
15336             
15337             var r = /(\d+)(\d{3})/;
15338             // add comma's
15339             
15340             if(thousandsDelimiter.length != 0) {
15341                 whole = whole.replace(/\B(?=(\d{3})+(?!\d))/g, thousandsDelimiter );
15342             } 
15343             
15344             var sub = ps[1] ?
15345                     // has decimals..
15346                     (decimals ?  ('.'+ ps[1] + zero.substring(ps[1].length)) : '') :
15347                     // does not have decimals
15348                     (decimals ? ('.' + zero) : '');
15349             
15350             
15351             return whole + sub ;
15352         },
15353         
15354         /**
15355          * Parse a value into a formatted date using the specified format pattern.
15356          * @param {Mixed} value The value to format
15357          * @param {String} format (optional) Any valid date format string (defaults to 'm/d/Y')
15358          * @return {String} The formatted date string
15359          */
15360         date : function(v, format){
15361             if(!v){
15362                 return "";
15363             }
15364             if(!(v instanceof Date)){
15365                 v = new Date(Date.parse(v));
15366             }
15367             return v.dateFormat(format || Roo.util.Format.defaults.date);
15368         },
15369
15370         /**
15371          * Returns a date rendering function that can be reused to apply a date format multiple times efficiently
15372          * @param {String} format Any valid date format string
15373          * @return {Function} The date formatting function
15374          */
15375         dateRenderer : function(format){
15376             return function(v){
15377                 return Roo.util.Format.date(v, format);  
15378             };
15379         },
15380
15381         // private
15382         stripTagsRE : /<\/?[^>]+>/gi,
15383         
15384         /**
15385          * Strips all HTML tags
15386          * @param {Mixed} value The text from which to strip tags
15387          * @return {String} The stripped text
15388          */
15389         stripTags : function(v){
15390             return !v ? v : String(v).replace(this.stripTagsRE, "");
15391         },
15392         
15393         /**
15394          * Size in Mb,Gb etc.
15395          * @param {Number} value The number to be formated
15396          * @param {number} decimals how many decimal places
15397          * @return {String} the formated string
15398          */
15399         size : function(value, decimals)
15400         {
15401             var sizes = ['b', 'k', 'M', 'G', 'T'];
15402             if (value == 0) {
15403                 return 0;
15404             }
15405             var i = parseInt(Math.floor(Math.log(value) / Math.log(1024)));
15406             return Roo.util.Format.number(value/ Math.pow(1024, i) ,decimals)   + sizes[i];
15407         }
15408         
15409         
15410         
15411     };
15412 }();
15413 Roo.util.Format.defaults = {
15414     date : 'd/M/Y'
15415 };/*
15416  * Based on:
15417  * Ext JS Library 1.1.1
15418  * Copyright(c) 2006-2007, Ext JS, LLC.
15419  *
15420  * Originally Released Under LGPL - original licence link has changed is not relivant.
15421  *
15422  * Fork - LGPL
15423  * <script type="text/javascript">
15424  */
15425
15426
15427  
15428
15429 /**
15430  * @class Roo.MasterTemplate
15431  * @extends Roo.Template
15432  * Provides a template that can have child templates. The syntax is:
15433 <pre><code>
15434 var t = new Roo.MasterTemplate(
15435         '&lt;select name="{name}"&gt;',
15436                 '&lt;tpl name="options"&gt;&lt;option value="{value:trim}"&gt;{text:ellipsis(10)}&lt;/option&gt;&lt;/tpl&gt;',
15437         '&lt;/select&gt;'
15438 );
15439 t.add('options', {value: 'foo', text: 'bar'});
15440 // or you can add multiple child elements in one shot
15441 t.addAll('options', [
15442     {value: 'foo', text: 'bar'},
15443     {value: 'foo2', text: 'bar2'},
15444     {value: 'foo3', text: 'bar3'}
15445 ]);
15446 // then append, applying the master template values
15447 t.append('my-form', {name: 'my-select'});
15448 </code></pre>
15449 * A name attribute for the child template is not required if you have only one child
15450 * template or you want to refer to them by index.
15451  */
15452 Roo.MasterTemplate = function(){
15453     Roo.MasterTemplate.superclass.constructor.apply(this, arguments);
15454     this.originalHtml = this.html;
15455     var st = {};
15456     var m, re = this.subTemplateRe;
15457     re.lastIndex = 0;
15458     var subIndex = 0;
15459     while(m = re.exec(this.html)){
15460         var name = m[1], content = m[2];
15461         st[subIndex] = {
15462             name: name,
15463             index: subIndex,
15464             buffer: [],
15465             tpl : new Roo.Template(content)
15466         };
15467         if(name){
15468             st[name] = st[subIndex];
15469         }
15470         st[subIndex].tpl.compile();
15471         st[subIndex].tpl.call = this.call.createDelegate(this);
15472         subIndex++;
15473     }
15474     this.subCount = subIndex;
15475     this.subs = st;
15476 };
15477 Roo.extend(Roo.MasterTemplate, Roo.Template, {
15478     /**
15479     * The regular expression used to match sub templates
15480     * @type RegExp
15481     * @property
15482     */
15483     subTemplateRe : /<tpl(?:\sname="([\w-]+)")?>((?:.|\n)*?)<\/tpl>/gi,
15484
15485     /**
15486      * Applies the passed values to a child template.
15487      * @param {String/Number} name (optional) The name or index of the child template
15488      * @param {Array/Object} values The values to be applied to the template
15489      * @return {MasterTemplate} this
15490      */
15491      add : function(name, values){
15492         if(arguments.length == 1){
15493             values = arguments[0];
15494             name = 0;
15495         }
15496         var s = this.subs[name];
15497         s.buffer[s.buffer.length] = s.tpl.apply(values);
15498         return this;
15499     },
15500
15501     /**
15502      * Applies all the passed values to a child template.
15503      * @param {String/Number} name (optional) The name or index of the child template
15504      * @param {Array} values The values to be applied to the template, this should be an array of objects.
15505      * @param {Boolean} reset (optional) True to reset the template first
15506      * @return {MasterTemplate} this
15507      */
15508     fill : function(name, values, reset){
15509         var a = arguments;
15510         if(a.length == 1 || (a.length == 2 && typeof a[1] == "boolean")){
15511             values = a[0];
15512             name = 0;
15513             reset = a[1];
15514         }
15515         if(reset){
15516             this.reset();
15517         }
15518         for(var i = 0, len = values.length; i < len; i++){
15519             this.add(name, values[i]);
15520         }
15521         return this;
15522     },
15523
15524     /**
15525      * Resets the template for reuse
15526      * @return {MasterTemplate} this
15527      */
15528      reset : function(){
15529         var s = this.subs;
15530         for(var i = 0; i < this.subCount; i++){
15531             s[i].buffer = [];
15532         }
15533         return this;
15534     },
15535
15536     applyTemplate : function(values){
15537         var s = this.subs;
15538         var replaceIndex = -1;
15539         this.html = this.originalHtml.replace(this.subTemplateRe, function(m, name){
15540             return s[++replaceIndex].buffer.join("");
15541         });
15542         return Roo.MasterTemplate.superclass.applyTemplate.call(this, values);
15543     },
15544
15545     apply : function(){
15546         return this.applyTemplate.apply(this, arguments);
15547     },
15548
15549     compile : function(){return this;}
15550 });
15551
15552 /**
15553  * Alias for fill().
15554  * @method
15555  */
15556 Roo.MasterTemplate.prototype.addAll = Roo.MasterTemplate.prototype.fill;
15557  /**
15558  * Creates a template from the passed element's value (display:none textarea, preferred) or innerHTML. e.g.
15559  * var tpl = Roo.MasterTemplate.from('element-id');
15560  * @param {String/HTMLElement} el
15561  * @param {Object} config
15562  * @static
15563  */
15564 Roo.MasterTemplate.from = function(el, config){
15565     el = Roo.getDom(el);
15566     return new Roo.MasterTemplate(el.value || el.innerHTML, config || '');
15567 };/*
15568  * Based on:
15569  * Ext JS Library 1.1.1
15570  * Copyright(c) 2006-2007, Ext JS, LLC.
15571  *
15572  * Originally Released Under LGPL - original licence link has changed is not relivant.
15573  *
15574  * Fork - LGPL
15575  * <script type="text/javascript">
15576  */
15577
15578  
15579 /**
15580  * @class Roo.util.CSS
15581  * Utility class for manipulating CSS rules
15582  * @static
15583
15584  */
15585 Roo.util.CSS = function(){
15586         var rules = null;
15587         var doc = document;
15588
15589     var camelRe = /(-[a-z])/gi;
15590     var camelFn = function(m, a){ return a.charAt(1).toUpperCase(); };
15591
15592    return {
15593    /**
15594     * Very simple dynamic creation of stylesheets from a text blob of rules.  The text will wrapped in a style
15595     * tag and appended to the HEAD of the document.
15596     * @param {String|Object} cssText The text containing the css rules
15597     * @param {String} id An id to add to the stylesheet for later removal
15598     * @return {StyleSheet}
15599     */
15600     createStyleSheet : function(cssText, id){
15601         var ss;
15602         var head = doc.getElementsByTagName("head")[0];
15603         var nrules = doc.createElement("style");
15604         nrules.setAttribute("type", "text/css");
15605         if(id){
15606             nrules.setAttribute("id", id);
15607         }
15608         if (typeof(cssText) != 'string') {
15609             // support object maps..
15610             // not sure if this a good idea.. 
15611             // perhaps it should be merged with the general css handling
15612             // and handle js style props.
15613             var cssTextNew = [];
15614             for(var n in cssText) {
15615                 var citems = [];
15616                 for(var k in cssText[n]) {
15617                     citems.push( k + ' : ' +cssText[n][k] + ';' );
15618                 }
15619                 cssTextNew.push( n + ' { ' + citems.join(' ') + '} ');
15620                 
15621             }
15622             cssText = cssTextNew.join("\n");
15623             
15624         }
15625        
15626        
15627        if(Roo.isIE){
15628            head.appendChild(nrules);
15629            ss = nrules.styleSheet;
15630            ss.cssText = cssText;
15631        }else{
15632            try{
15633                 nrules.appendChild(doc.createTextNode(cssText));
15634            }catch(e){
15635                nrules.cssText = cssText; 
15636            }
15637            head.appendChild(nrules);
15638            ss = nrules.styleSheet ? nrules.styleSheet : (nrules.sheet || doc.styleSheets[doc.styleSheets.length-1]);
15639        }
15640        this.cacheStyleSheet(ss);
15641        return ss;
15642    },
15643
15644    /**
15645     * Removes a style or link tag by id
15646     * @param {String} id The id of the tag
15647     */
15648    removeStyleSheet : function(id){
15649        var existing = doc.getElementById(id);
15650        if(existing){
15651            existing.parentNode.removeChild(existing);
15652        }
15653    },
15654
15655    /**
15656     * Dynamically swaps an existing stylesheet reference for a new one
15657     * @param {String} id The id of an existing link tag to remove
15658     * @param {String} url The href of the new stylesheet to include
15659     */
15660    swapStyleSheet : function(id, url){
15661        this.removeStyleSheet(id);
15662        var ss = doc.createElement("link");
15663        ss.setAttribute("rel", "stylesheet");
15664        ss.setAttribute("type", "text/css");
15665        ss.setAttribute("id", id);
15666        ss.setAttribute("href", url);
15667        doc.getElementsByTagName("head")[0].appendChild(ss);
15668    },
15669    
15670    /**
15671     * Refresh the rule cache if you have dynamically added stylesheets
15672     * @return {Object} An object (hash) of rules indexed by selector
15673     */
15674    refreshCache : function(){
15675        return this.getRules(true);
15676    },
15677
15678    // private
15679    cacheStyleSheet : function(stylesheet){
15680        if(!rules){
15681            rules = {};
15682        }
15683        try{// try catch for cross domain access issue
15684            var ssRules = stylesheet.cssRules || stylesheet.rules;
15685            for(var j = ssRules.length-1; j >= 0; --j){
15686                rules[ssRules[j].selectorText] = ssRules[j];
15687            }
15688        }catch(e){}
15689    },
15690    
15691    /**
15692     * Gets all css rules for the document
15693     * @param {Boolean} refreshCache true to refresh the internal cache
15694     * @return {Object} An object (hash) of rules indexed by selector
15695     */
15696    getRules : function(refreshCache){
15697                 if(rules == null || refreshCache){
15698                         rules = {};
15699                         var ds = doc.styleSheets;
15700                         for(var i =0, len = ds.length; i < len; i++){
15701                             try{
15702                         this.cacheStyleSheet(ds[i]);
15703                     }catch(e){} 
15704                 }
15705                 }
15706                 return rules;
15707         },
15708         
15709         /**
15710     * Gets an an individual CSS rule by selector(s)
15711     * @param {String/Array} selector The CSS selector or an array of selectors to try. The first selector that is found is returned.
15712     * @param {Boolean} refreshCache true to refresh the internal cache if you have recently updated any rules or added styles dynamically
15713     * @return {CSSRule} The CSS rule or null if one is not found
15714     */
15715    getRule : function(selector, refreshCache){
15716                 var rs = this.getRules(refreshCache);
15717                 if(!(selector instanceof Array)){
15718                     return rs[selector];
15719                 }
15720                 for(var i = 0; i < selector.length; i++){
15721                         if(rs[selector[i]]){
15722                                 return rs[selector[i]];
15723                         }
15724                 }
15725                 return null;
15726         },
15727         
15728         
15729         /**
15730     * Updates a rule property
15731     * @param {String/Array} selector If it's an array it tries each selector until it finds one. Stops immediately once one is found.
15732     * @param {String} property The css property
15733     * @param {String} value The new value for the property
15734     * @return {Boolean} true If a rule was found and updated
15735     */
15736    updateRule : function(selector, property, value){
15737                 if(!(selector instanceof Array)){
15738                         var rule = this.getRule(selector);
15739                         if(rule){
15740                                 rule.style[property.replace(camelRe, camelFn)] = value;
15741                                 return true;
15742                         }
15743                 }else{
15744                         for(var i = 0; i < selector.length; i++){
15745                                 if(this.updateRule(selector[i], property, value)){
15746                                         return true;
15747                                 }
15748                         }
15749                 }
15750                 return false;
15751         }
15752    };   
15753 }();/*
15754  * Based on:
15755  * Ext JS Library 1.1.1
15756  * Copyright(c) 2006-2007, Ext JS, LLC.
15757  *
15758  * Originally Released Under LGPL - original licence link has changed is not relivant.
15759  *
15760  * Fork - LGPL
15761  * <script type="text/javascript">
15762  */
15763
15764  
15765
15766 /**
15767  * @class Roo.util.ClickRepeater
15768  * @extends Roo.util.Observable
15769  * 
15770  * A wrapper class which can be applied to any element. Fires a "click" event while the
15771  * mouse is pressed. The interval between firings may be specified in the config but
15772  * defaults to 10 milliseconds.
15773  * 
15774  * Optionally, a CSS class may be applied to the element during the time it is pressed.
15775  * 
15776  * @cfg {String/HTMLElement/Element} el The element to act as a button.
15777  * @cfg {Number} delay The initial delay before the repeating event begins firing.
15778  * Similar to an autorepeat key delay.
15779  * @cfg {Number} interval The interval between firings of the "click" event. Default 10 ms.
15780  * @cfg {String} pressClass A CSS class name to be applied to the element while pressed.
15781  * @cfg {Boolean} accelerate True if autorepeating should start slowly and accelerate.
15782  *           "interval" and "delay" are ignored. "immediate" is honored.
15783  * @cfg {Boolean} preventDefault True to prevent the default click event
15784  * @cfg {Boolean} stopDefault True to stop the default click event
15785  * 
15786  * @history
15787  *     2007-02-02 jvs Original code contributed by Nige "Animal" White
15788  *     2007-02-02 jvs Renamed to ClickRepeater
15789  *   2007-02-03 jvs Modifications for FF Mac and Safari 
15790  *
15791  *  @constructor
15792  * @param {String/HTMLElement/Element} el The element to listen on
15793  * @param {Object} config
15794  **/
15795 Roo.util.ClickRepeater = function(el, config)
15796 {
15797     this.el = Roo.get(el);
15798     this.el.unselectable();
15799
15800     Roo.apply(this, config);
15801
15802     this.addEvents({
15803     /**
15804      * @event mousedown
15805      * Fires when the mouse button is depressed.
15806      * @param {Roo.util.ClickRepeater} this
15807      */
15808         "mousedown" : true,
15809     /**
15810      * @event click
15811      * Fires on a specified interval during the time the element is pressed.
15812      * @param {Roo.util.ClickRepeater} this
15813      */
15814         "click" : true,
15815     /**
15816      * @event mouseup
15817      * Fires when the mouse key is released.
15818      * @param {Roo.util.ClickRepeater} this
15819      */
15820         "mouseup" : true
15821     });
15822
15823     this.el.on("mousedown", this.handleMouseDown, this);
15824     if(this.preventDefault || this.stopDefault){
15825         this.el.on("click", function(e){
15826             if(this.preventDefault){
15827                 e.preventDefault();
15828             }
15829             if(this.stopDefault){
15830                 e.stopEvent();
15831             }
15832         }, this);
15833     }
15834
15835     // allow inline handler
15836     if(this.handler){
15837         this.on("click", this.handler,  this.scope || this);
15838     }
15839
15840     Roo.util.ClickRepeater.superclass.constructor.call(this);
15841 };
15842
15843 Roo.extend(Roo.util.ClickRepeater, Roo.util.Observable, {
15844     interval : 20,
15845     delay: 250,
15846     preventDefault : true,
15847     stopDefault : false,
15848     timer : 0,
15849
15850     // private
15851     handleMouseDown : function(){
15852         clearTimeout(this.timer);
15853         this.el.blur();
15854         if(this.pressClass){
15855             this.el.addClass(this.pressClass);
15856         }
15857         this.mousedownTime = new Date();
15858
15859         Roo.get(document).on("mouseup", this.handleMouseUp, this);
15860         this.el.on("mouseout", this.handleMouseOut, this);
15861
15862         this.fireEvent("mousedown", this);
15863         this.fireEvent("click", this);
15864         
15865         this.timer = this.click.defer(this.delay || this.interval, this);
15866     },
15867
15868     // private
15869     click : function(){
15870         this.fireEvent("click", this);
15871         this.timer = this.click.defer(this.getInterval(), this);
15872     },
15873
15874     // private
15875     getInterval: function(){
15876         if(!this.accelerate){
15877             return this.interval;
15878         }
15879         var pressTime = this.mousedownTime.getElapsed();
15880         if(pressTime < 500){
15881             return 400;
15882         }else if(pressTime < 1700){
15883             return 320;
15884         }else if(pressTime < 2600){
15885             return 250;
15886         }else if(pressTime < 3500){
15887             return 180;
15888         }else if(pressTime < 4400){
15889             return 140;
15890         }else if(pressTime < 5300){
15891             return 80;
15892         }else if(pressTime < 6200){
15893             return 50;
15894         }else{
15895             return 10;
15896         }
15897     },
15898
15899     // private
15900     handleMouseOut : function(){
15901         clearTimeout(this.timer);
15902         if(this.pressClass){
15903             this.el.removeClass(this.pressClass);
15904         }
15905         this.el.on("mouseover", this.handleMouseReturn, this);
15906     },
15907
15908     // private
15909     handleMouseReturn : function(){
15910         this.el.un("mouseover", this.handleMouseReturn);
15911         if(this.pressClass){
15912             this.el.addClass(this.pressClass);
15913         }
15914         this.click();
15915     },
15916
15917     // private
15918     handleMouseUp : function(){
15919         clearTimeout(this.timer);
15920         this.el.un("mouseover", this.handleMouseReturn);
15921         this.el.un("mouseout", this.handleMouseOut);
15922         Roo.get(document).un("mouseup", this.handleMouseUp);
15923         this.el.removeClass(this.pressClass);
15924         this.fireEvent("mouseup", this);
15925     }
15926 });/**
15927  * @class Roo.util.Clipboard
15928  * @static
15929  * 
15930  * Clipboard UTILS
15931  * 
15932  **/
15933 Roo.util.Clipboard = {
15934     /**
15935      * Writes a string to the clipboard - using the Clipboard API if https, otherwise using text area.
15936      * @param {String} text to copy to clipboard
15937      */
15938     write : function(text) {
15939         // navigator clipboard api needs a secure context (https)
15940         if (navigator.clipboard && window.isSecureContext) {
15941             // navigator clipboard api method'
15942             navigator.clipboard.writeText(text);
15943             return ;
15944         } 
15945         // text area method
15946         var ta = document.createElement("textarea");
15947         ta.value = text;
15948         // make the textarea out of viewport
15949         ta.style.position = "fixed";
15950         ta.style.left = "-999999px";
15951         ta.style.top = "-999999px";
15952         document.body.appendChild(ta);
15953         ta.focus();
15954         ta.select();
15955         document.execCommand('copy');
15956         (function() {
15957             ta.remove();
15958         }).defer(100);
15959         
15960     }
15961         
15962 }
15963     /*
15964  * Based on:
15965  * Ext JS Library 1.1.1
15966  * Copyright(c) 2006-2007, Ext JS, LLC.
15967  *
15968  * Originally Released Under LGPL - original licence link has changed is not relivant.
15969  *
15970  * Fork - LGPL
15971  * <script type="text/javascript">
15972  */
15973
15974  
15975 /**
15976  * @class Roo.KeyNav
15977  * <p>Provides a convenient wrapper for normalized keyboard navigation.  KeyNav allows you to bind
15978  * navigation keys to function calls that will get called when the keys are pressed, providing an easy
15979  * way to implement custom navigation schemes for any UI component.</p>
15980  * <p>The following are all of the possible keys that can be implemented: enter, left, right, up, down, tab, esc,
15981  * pageUp, pageDown, del, home, end.  Usage:</p>
15982  <pre><code>
15983 var nav = new Roo.KeyNav("my-element", {
15984     "left" : function(e){
15985         this.moveLeft(e.ctrlKey);
15986     },
15987     "right" : function(e){
15988         this.moveRight(e.ctrlKey);
15989     },
15990     "enter" : function(e){
15991         this.save();
15992     },
15993     scope : this
15994 });
15995 </code></pre>
15996  * @constructor
15997  * @param {String/HTMLElement/Roo.Element} el The element to bind to
15998  * @param {Object} config The config
15999  */
16000 Roo.KeyNav = function(el, config){
16001     this.el = Roo.get(el);
16002     Roo.apply(this, config);
16003     if(!this.disabled){
16004         this.disabled = true;
16005         this.enable();
16006     }
16007 };
16008
16009 Roo.KeyNav.prototype = {
16010     /**
16011      * @cfg {Boolean} disabled
16012      * True to disable this KeyNav instance (defaults to false)
16013      */
16014     disabled : false,
16015     /**
16016      * @cfg {String} defaultEventAction
16017      * The method to call on the {@link Roo.EventObject} after this KeyNav intercepts a key.  Valid values are
16018      * {@link Roo.EventObject#stopEvent}, {@link Roo.EventObject#preventDefault} and
16019      * {@link Roo.EventObject#stopPropagation} (defaults to 'stopEvent')
16020      */
16021     defaultEventAction: "stopEvent",
16022     /**
16023      * @cfg {Boolean} forceKeyDown
16024      * Handle the keydown event instead of keypress (defaults to false).  KeyNav automatically does this for IE since
16025      * IE does not propagate special keys on keypress, but setting this to true will force other browsers to also
16026      * handle keydown instead of keypress.
16027      */
16028     forceKeyDown : false,
16029
16030     // private
16031     prepareEvent : function(e){
16032         var k = e.getKey();
16033         var h = this.keyToHandler[k];
16034         //if(h && this[h]){
16035         //    e.stopPropagation();
16036         //}
16037         if(Roo.isSafari && h && k >= 37 && k <= 40){
16038             e.stopEvent();
16039         }
16040     },
16041
16042     // private
16043     relay : function(e){
16044         var k = e.getKey();
16045         var h = this.keyToHandler[k];
16046         if(h && this[h]){
16047             if(this.doRelay(e, this[h], h) !== true){
16048                 e[this.defaultEventAction]();
16049             }
16050         }
16051     },
16052
16053     // private
16054     doRelay : function(e, h, hname){
16055         return h.call(this.scope || this, e);
16056     },
16057
16058     // possible handlers
16059     enter : false,
16060     left : false,
16061     right : false,
16062     up : false,
16063     down : false,
16064     tab : false,
16065     esc : false,
16066     pageUp : false,
16067     pageDown : false,
16068     del : false,
16069     home : false,
16070     end : false,
16071
16072     // quick lookup hash
16073     keyToHandler : {
16074         37 : "left",
16075         39 : "right",
16076         38 : "up",
16077         40 : "down",
16078         33 : "pageUp",
16079         34 : "pageDown",
16080         46 : "del",
16081         36 : "home",
16082         35 : "end",
16083         13 : "enter",
16084         27 : "esc",
16085         9  : "tab"
16086     },
16087
16088         /**
16089          * Enable this KeyNav
16090          */
16091         enable: function(){
16092                 if(this.disabled){
16093             // ie won't do special keys on keypress, no one else will repeat keys with keydown
16094             // the EventObject will normalize Safari automatically
16095             if(this.forceKeyDown || Roo.isIE || Roo.isAir){
16096                 this.el.on("keydown", this.relay,  this);
16097             }else{
16098                 this.el.on("keydown", this.prepareEvent,  this);
16099                 this.el.on("keypress", this.relay,  this);
16100             }
16101                     this.disabled = false;
16102                 }
16103         },
16104
16105         /**
16106          * Disable this KeyNav
16107          */
16108         disable: function(){
16109                 if(!this.disabled){
16110                     if(this.forceKeyDown || Roo.isIE || Roo.isAir){
16111                 this.el.un("keydown", this.relay);
16112             }else{
16113                 this.el.un("keydown", this.prepareEvent);
16114                 this.el.un("keypress", this.relay);
16115             }
16116                     this.disabled = true;
16117                 }
16118         }
16119 };/*
16120  * Based on:
16121  * Ext JS Library 1.1.1
16122  * Copyright(c) 2006-2007, Ext JS, LLC.
16123  *
16124  * Originally Released Under LGPL - original licence link has changed is not relivant.
16125  *
16126  * Fork - LGPL
16127  * <script type="text/javascript">
16128  */
16129
16130  
16131 /**
16132  * @class Roo.KeyMap
16133  * Handles mapping keys to actions for an element. One key map can be used for multiple actions.
16134  * The constructor accepts the same config object as defined by {@link #addBinding}.
16135  * If you bind a callback function to a KeyMap, anytime the KeyMap handles an expected key
16136  * combination it will call the function with this signature (if the match is a multi-key
16137  * combination the callback will still be called only once): (String key, Roo.EventObject e)
16138  * A KeyMap can also handle a string representation of keys.<br />
16139  * Usage:
16140  <pre><code>
16141 // map one key by key code
16142 var map = new Roo.KeyMap("my-element", {
16143     key: 13, // or Roo.EventObject.ENTER
16144     fn: myHandler,
16145     scope: myObject
16146 });
16147
16148 // map multiple keys to one action by string
16149 var map = new Roo.KeyMap("my-element", {
16150     key: "a\r\n\t",
16151     fn: myHandler,
16152     scope: myObject
16153 });
16154
16155 // map multiple keys to multiple actions by strings and array of codes
16156 var map = new Roo.KeyMap("my-element", [
16157     {
16158         key: [10,13],
16159         fn: function(){ alert("Return was pressed"); }
16160     }, {
16161         key: "abc",
16162         fn: function(){ alert('a, b or c was pressed'); }
16163     }, {
16164         key: "\t",
16165         ctrl:true,
16166         shift:true,
16167         fn: function(){ alert('Control + shift + tab was pressed.'); }
16168     }
16169 ]);
16170 </code></pre>
16171  * <b>Note: A KeyMap starts enabled</b>
16172  * @constructor
16173  * @param {String/HTMLElement/Roo.Element} el The element to bind to
16174  * @param {Object} config The config (see {@link #addBinding})
16175  * @param {String} eventName (optional) The event to bind to (defaults to "keydown")
16176  */
16177 Roo.KeyMap = function(el, config, eventName){
16178     this.el  = Roo.get(el);
16179     this.eventName = eventName || "keydown";
16180     this.bindings = [];
16181     if(config){
16182         this.addBinding(config);
16183     }
16184     this.enable();
16185 };
16186
16187 Roo.KeyMap.prototype = {
16188     /**
16189      * True to stop the event from bubbling and prevent the default browser action if the
16190      * key was handled by the KeyMap (defaults to false)
16191      * @type Boolean
16192      */
16193     stopEvent : false,
16194
16195     /**
16196      * Add a new binding to this KeyMap. The following config object properties are supported:
16197      * <pre>
16198 Property    Type             Description
16199 ----------  ---------------  ----------------------------------------------------------------------
16200 key         String/Array     A single keycode or an array of keycodes to handle
16201 shift       Boolean          True to handle key only when shift is pressed (defaults to false)
16202 ctrl        Boolean          True to handle key only when ctrl is pressed (defaults to false)
16203 alt         Boolean          True to handle key only when alt is pressed (defaults to false)
16204 fn          Function         The function to call when KeyMap finds the expected key combination
16205 scope       Object           The scope of the callback function
16206 </pre>
16207      *
16208      * Usage:
16209      * <pre><code>
16210 // Create a KeyMap
16211 var map = new Roo.KeyMap(document, {
16212     key: Roo.EventObject.ENTER,
16213     fn: handleKey,
16214     scope: this
16215 });
16216
16217 //Add a new binding to the existing KeyMap later
16218 map.addBinding({
16219     key: 'abc',
16220     shift: true,
16221     fn: handleKey,
16222     scope: this
16223 });
16224 </code></pre>
16225      * @param {Object/Array} config A single KeyMap config or an array of configs
16226      */
16227         addBinding : function(config){
16228         if(config instanceof Array){
16229             for(var i = 0, len = config.length; i < len; i++){
16230                 this.addBinding(config[i]);
16231             }
16232             return;
16233         }
16234         var keyCode = config.key,
16235             shift = config.shift, 
16236             ctrl = config.ctrl, 
16237             alt = config.alt,
16238             fn = config.fn,
16239             scope = config.scope;
16240         if(typeof keyCode == "string"){
16241             var ks = [];
16242             var keyString = keyCode.toUpperCase();
16243             for(var j = 0, len = keyString.length; j < len; j++){
16244                 ks.push(keyString.charCodeAt(j));
16245             }
16246             keyCode = ks;
16247         }
16248         var keyArray = keyCode instanceof Array;
16249         var handler = function(e){
16250             if((!shift || e.shiftKey) && (!ctrl || e.ctrlKey) &&  (!alt || e.altKey)){
16251                 var k = e.getKey();
16252                 if(keyArray){
16253                     for(var i = 0, len = keyCode.length; i < len; i++){
16254                         if(keyCode[i] == k){
16255                           if(this.stopEvent){
16256                               e.stopEvent();
16257                           }
16258                           fn.call(scope || window, k, e);
16259                           return;
16260                         }
16261                     }
16262                 }else{
16263                     if(k == keyCode){
16264                         if(this.stopEvent){
16265                            e.stopEvent();
16266                         }
16267                         fn.call(scope || window, k, e);
16268                     }
16269                 }
16270             }
16271         };
16272         this.bindings.push(handler);  
16273         },
16274
16275     /**
16276      * Shorthand for adding a single key listener
16277      * @param {Number/Array/Object} key Either the numeric key code, array of key codes or an object with the
16278      * following options:
16279      * {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
16280      * @param {Function} fn The function to call
16281      * @param {Object} scope (optional) The scope of the function
16282      */
16283     on : function(key, fn, scope){
16284         var keyCode, shift, ctrl, alt;
16285         if(typeof key == "object" && !(key instanceof Array)){
16286             keyCode = key.key;
16287             shift = key.shift;
16288             ctrl = key.ctrl;
16289             alt = key.alt;
16290         }else{
16291             keyCode = key;
16292         }
16293         this.addBinding({
16294             key: keyCode,
16295             shift: shift,
16296             ctrl: ctrl,
16297             alt: alt,
16298             fn: fn,
16299             scope: scope
16300         })
16301     },
16302
16303     // private
16304     handleKeyDown : function(e){
16305             if(this.enabled){ //just in case
16306             var b = this.bindings;
16307             for(var i = 0, len = b.length; i < len; i++){
16308                 b[i].call(this, e);
16309             }
16310             }
16311         },
16312         
16313         /**
16314          * Returns true if this KeyMap is enabled
16315          * @return {Boolean} 
16316          */
16317         isEnabled : function(){
16318             return this.enabled;  
16319         },
16320         
16321         /**
16322          * Enables this KeyMap
16323          */
16324         enable: function(){
16325                 if(!this.enabled){
16326                     this.el.on(this.eventName, this.handleKeyDown, this);
16327                     this.enabled = true;
16328                 }
16329         },
16330
16331         /**
16332          * Disable this KeyMap
16333          */
16334         disable: function(){
16335                 if(this.enabled){
16336                     this.el.removeListener(this.eventName, this.handleKeyDown, this);
16337                     this.enabled = false;
16338                 }
16339         }
16340 };/*
16341  * Based on:
16342  * Ext JS Library 1.1.1
16343  * Copyright(c) 2006-2007, Ext JS, LLC.
16344  *
16345  * Originally Released Under LGPL - original licence link has changed is not relivant.
16346  *
16347  * Fork - LGPL
16348  * <script type="text/javascript">
16349  */
16350
16351  
16352 /**
16353  * @class Roo.util.TextMetrics
16354  * Provides precise pixel measurements for blocks of text so that you can determine exactly how high and
16355  * wide, in pixels, a given block of text will be.
16356  * @static
16357  */
16358 Roo.util.TextMetrics = function(){
16359     var shared;
16360     return {
16361         /**
16362          * Measures the size of the specified text
16363          * @param {String/HTMLElement} el The element, dom node or id from which to copy existing CSS styles
16364          * that can affect the size of the rendered text
16365          * @param {String} text The text to measure
16366          * @param {Number} fixedWidth (optional) If the text will be multiline, you have to set a fixed width
16367          * in order to accurately measure the text height
16368          * @return {Object} An object containing the text's size {width: (width), height: (height)}
16369          */
16370         measure : function(el, text, fixedWidth){
16371             if(!shared){
16372                 shared = Roo.util.TextMetrics.Instance(el, fixedWidth);
16373             }
16374             shared.bind(el);
16375             shared.setFixedWidth(fixedWidth || 'auto');
16376             return shared.getSize(text);
16377         },
16378
16379         /**
16380          * Return a unique TextMetrics instance that can be bound directly to an element and reused.  This reduces
16381          * the overhead of multiple calls to initialize the style properties on each measurement.
16382          * @param {String/HTMLElement} el The element, dom node or id that the instance will be bound to
16383          * @param {Number} fixedWidth (optional) If the text will be multiline, you have to set a fixed width
16384          * in order to accurately measure the text height
16385          * @return {Roo.util.TextMetrics.Instance} instance The new instance
16386          */
16387         createInstance : function(el, fixedWidth){
16388             return Roo.util.TextMetrics.Instance(el, fixedWidth);
16389         }
16390     };
16391 }();
16392
16393 /**
16394  * @class Roo.util.TextMetrics.Instance
16395  * Instance of  TextMetrics Calcuation
16396  * @constructor
16397  * Create a new TextMetrics Instance
16398  * @param {Object} bindto
16399  * @param {Boolean} fixedWidth
16400  */
16401
16402 Roo.util.TextMetrics.Instance = function(bindTo, fixedWidth)
16403 {
16404     var ml = new Roo.Element(document.createElement('div'));
16405     document.body.appendChild(ml.dom);
16406     ml.position('absolute');
16407     ml.setLeftTop(-1000, -1000);
16408     ml.hide();
16409
16410     if(fixedWidth){
16411         ml.setWidth(fixedWidth);
16412     }
16413      
16414     var instance = {
16415         /**
16416          * Returns the size of the specified text based on the internal element's style and width properties
16417          * @param {String} text The text to measure
16418          * @return {Object} An object containing the text's size {width: (width), height: (height)}
16419          */
16420         getSize : function(text){
16421             ml.update(text);
16422             var s = ml.getSize();
16423             ml.update('');
16424             return s;
16425         },
16426
16427         /**
16428          * Binds this TextMetrics instance to an element from which to copy existing CSS styles
16429          * that can affect the size of the rendered text
16430          * @param {String/HTMLElement} el The element, dom node or id
16431          */
16432         bind : function(el){
16433             ml.setStyle(
16434                 Roo.fly(el).getStyles('font-size','font-style', 'font-weight', 'font-family','line-height')
16435             );
16436         },
16437
16438         /**
16439          * Sets a fixed width on the internal measurement element.  If the text will be multiline, you have
16440          * to set a fixed width in order to accurately measure the text height.
16441          * @param {Number} width The width to set on the element
16442          */
16443         setFixedWidth : function(width){
16444             ml.setWidth(width);
16445         },
16446
16447         /**
16448          * Returns the measured width of the specified text
16449          * @param {String} text The text to measure
16450          * @return {Number} width The width in pixels
16451          */
16452         getWidth : function(text){
16453             ml.dom.style.width = 'auto';
16454             return this.getSize(text).width;
16455         },
16456
16457         /**
16458          * Returns the measured height of the specified text.  For multiline text, be sure to call
16459          * {@link #setFixedWidth} if necessary.
16460          * @param {String} text The text to measure
16461          * @return {Number} height The height in pixels
16462          */
16463         getHeight : function(text){
16464             return this.getSize(text).height;
16465         }
16466     };
16467
16468     instance.bind(bindTo);
16469
16470     return instance;
16471 };
16472
16473 // backwards compat
16474 Roo.Element.measureText = Roo.util.TextMetrics.measure;/*
16475  * Based on:
16476  * Ext JS Library 1.1.1
16477  * Copyright(c) 2006-2007, Ext JS, LLC.
16478  *
16479  * Originally Released Under LGPL - original licence link has changed is not relivant.
16480  *
16481  * Fork - LGPL
16482  * <script type="text/javascript">
16483  */
16484
16485 /**
16486  * @class Roo.state.Provider
16487  * Abstract base class for state provider implementations. This class provides methods
16488  * for encoding and decoding <b>typed</b> variables including dates and defines the 
16489  * Provider interface.
16490  */
16491 Roo.state.Provider = function(){
16492     /**
16493      * @event statechange
16494      * Fires when a state change occurs.
16495      * @param {Provider} this This state provider
16496      * @param {String} key The state key which was changed
16497      * @param {String} value The encoded value for the state
16498      */
16499     this.addEvents({
16500         "statechange": true
16501     });
16502     this.state = {};
16503     Roo.state.Provider.superclass.constructor.call(this);
16504 };
16505 Roo.extend(Roo.state.Provider, Roo.util.Observable, {
16506     /**
16507      * Returns the current value for a key
16508      * @param {String} name The key name
16509      * @param {Mixed} defaultValue A default value to return if the key's value is not found
16510      * @return {Mixed} The state data
16511      */
16512     get : function(name, defaultValue){
16513         return typeof this.state[name] == "undefined" ?
16514             defaultValue : this.state[name];
16515     },
16516     
16517     /**
16518      * Clears a value from the state
16519      * @param {String} name The key name
16520      */
16521     clear : function(name){
16522         delete this.state[name];
16523         this.fireEvent("statechange", this, name, null);
16524     },
16525     
16526     /**
16527      * Sets the value for a key
16528      * @param {String} name The key name
16529      * @param {Mixed} value The value to set
16530      */
16531     set : function(name, value){
16532         this.state[name] = value;
16533         this.fireEvent("statechange", this, name, value);
16534     },
16535     
16536     /**
16537      * Decodes a string previously encoded with {@link #encodeValue}.
16538      * @param {String} value The value to decode
16539      * @return {Mixed} The decoded value
16540      */
16541     decodeValue : function(cookie){
16542         var re = /^(a|n|d|b|s|o)\:(.*)$/;
16543         var matches = re.exec(unescape(cookie));
16544         if(!matches || !matches[1]) {
16545             return; // non state cookie
16546         }
16547         var type = matches[1];
16548         var v = matches[2];
16549         switch(type){
16550             case "n":
16551                 return parseFloat(v);
16552             case "d":
16553                 return new Date(Date.parse(v));
16554             case "b":
16555                 return (v == "1");
16556             case "a":
16557                 var all = [];
16558                 var values = v.split("^");
16559                 for(var i = 0, len = values.length; i < len; i++){
16560                     all.push(this.decodeValue(values[i]));
16561                 }
16562                 return all;
16563            case "o":
16564                 var all = {};
16565                 var values = v.split("^");
16566                 for(var i = 0, len = values.length; i < len; i++){
16567                     var kv = values[i].split("=");
16568                     all[kv[0]] = this.decodeValue(kv[1]);
16569                 }
16570                 return all;
16571            default:
16572                 return v;
16573         }
16574     },
16575     
16576     /**
16577      * Encodes a value including type information.  Decode with {@link #decodeValue}.
16578      * @param {Mixed} value The value to encode
16579      * @return {String} The encoded value
16580      */
16581     encodeValue : function(v){
16582         var enc;
16583         if(typeof v == "number"){
16584             enc = "n:" + v;
16585         }else if(typeof v == "boolean"){
16586             enc = "b:" + (v ? "1" : "0");
16587         }else if(v instanceof Date){
16588             enc = "d:" + v.toGMTString();
16589         }else if(v instanceof Array){
16590             var flat = "";
16591             for(var i = 0, len = v.length; i < len; i++){
16592                 flat += this.encodeValue(v[i]);
16593                 if(i != len-1) {
16594                     flat += "^";
16595                 }
16596             }
16597             enc = "a:" + flat;
16598         }else if(typeof v == "object"){
16599             var flat = "";
16600             for(var key in v){
16601                 if(typeof v[key] != "function"){
16602                     flat += key + "=" + this.encodeValue(v[key]) + "^";
16603                 }
16604             }
16605             enc = "o:" + flat.substring(0, flat.length-1);
16606         }else{
16607             enc = "s:" + v;
16608         }
16609         return escape(enc);        
16610     }
16611 });
16612
16613 /*
16614  * Based on:
16615  * Ext JS Library 1.1.1
16616  * Copyright(c) 2006-2007, Ext JS, LLC.
16617  *
16618  * Originally Released Under LGPL - original licence link has changed is not relivant.
16619  *
16620  * Fork - LGPL
16621  * <script type="text/javascript">
16622  */
16623 /**
16624  * @class Roo.state.Manager
16625  * This is the global state manager. By default all components that are "state aware" check this class
16626  * for state information if you don't pass them a custom state provider. In order for this class
16627  * to be useful, it must be initialized with a provider when your application initializes.
16628  <pre><code>
16629 // in your initialization function
16630 init : function(){
16631    Roo.state.Manager.setProvider(new Roo.state.CookieProvider());
16632    ...
16633    // supposed you have a {@link Roo.BorderLayout}
16634    var layout = new Roo.BorderLayout(...);
16635    layout.restoreState();
16636    // or a {Roo.BasicDialog}
16637    var dialog = new Roo.BasicDialog(...);
16638    dialog.restoreState();
16639  </code></pre>
16640  * @static
16641  */
16642 Roo.state.Manager = function(){
16643     var provider = new Roo.state.Provider();
16644     
16645     return {
16646         /**
16647          * Configures the default state provider for your application
16648          * @param {Provider} stateProvider The state provider to set
16649          */
16650         setProvider : function(stateProvider){
16651             provider = stateProvider;
16652         },
16653         
16654         /**
16655          * Returns the current value for a key
16656          * @param {String} name The key name
16657          * @param {Mixed} defaultValue The default value to return if the key lookup does not match
16658          * @return {Mixed} The state data
16659          */
16660         get : function(key, defaultValue){
16661             return provider.get(key, defaultValue);
16662         },
16663         
16664         /**
16665          * Sets the value for a key
16666          * @param {String} name The key name
16667          * @param {Mixed} value The state data
16668          */
16669          set : function(key, value){
16670             provider.set(key, value);
16671         },
16672         
16673         /**
16674          * Clears a value from the state
16675          * @param {String} name The key name
16676          */
16677         clear : function(key){
16678             provider.clear(key);
16679         },
16680         
16681         /**
16682          * Gets the currently configured state provider
16683          * @return {Provider} The state provider
16684          */
16685         getProvider : function(){
16686             return provider;
16687         }
16688     };
16689 }();
16690 /*
16691  * Based on:
16692  * Ext JS Library 1.1.1
16693  * Copyright(c) 2006-2007, Ext JS, LLC.
16694  *
16695  * Originally Released Under LGPL - original licence link has changed is not relivant.
16696  *
16697  * Fork - LGPL
16698  * <script type="text/javascript">
16699  */
16700 /**
16701  * @class Roo.state.CookieProvider
16702  * @extends Roo.state.Provider
16703  * The default Provider implementation which saves state via cookies.
16704  * <br />Usage:
16705  <pre><code>
16706    var cp = new Roo.state.CookieProvider({
16707        path: "/cgi-bin/",
16708        expires: new Date(new Date().getTime()+(1000*60*60*24*30)); //30 days
16709        domain: "roojs.com"
16710    })
16711    Roo.state.Manager.setProvider(cp);
16712  </code></pre>
16713  * @cfg {String} path The path for which the cookie is active (defaults to root '/' which makes it active for all pages in the site)
16714  * @cfg {Date} expires The cookie expiration date (defaults to 7 days from now)
16715  * @cfg {String} domain The domain to save the cookie for.  Note that you cannot specify a different domain than
16716  * your page is on, but you can specify a sub-domain, or simply the domain itself like 'roojs.com' to include
16717  * all sub-domains if you need to access cookies across different sub-domains (defaults to null which uses the same
16718  * domain the page is running on including the 'www' like 'www.roojs.com')
16719  * @cfg {Boolean} secure True if the site is using SSL (defaults to false)
16720  * @constructor
16721  * Create a new CookieProvider
16722  * @param {Object} config The configuration object
16723  */
16724 Roo.state.CookieProvider = function(config){
16725     Roo.state.CookieProvider.superclass.constructor.call(this);
16726     this.path = "/";
16727     this.expires = new Date(new Date().getTime()+(1000*60*60*24*7)); //7 days
16728     this.domain = null;
16729     this.secure = false;
16730     Roo.apply(this, config);
16731     this.state = this.readCookies();
16732 };
16733
16734 Roo.extend(Roo.state.CookieProvider, Roo.state.Provider, {
16735     // private
16736     set : function(name, value){
16737         if(typeof value == "undefined" || value === null){
16738             this.clear(name);
16739             return;
16740         }
16741         this.setCookie(name, value);
16742         Roo.state.CookieProvider.superclass.set.call(this, name, value);
16743     },
16744
16745     // private
16746     clear : function(name){
16747         this.clearCookie(name);
16748         Roo.state.CookieProvider.superclass.clear.call(this, name);
16749     },
16750
16751     // private
16752     readCookies : function(){
16753         var cookies = {};
16754         var c = document.cookie + ";";
16755         var re = /\s?(.*?)=(.*?);/g;
16756         var matches;
16757         while((matches = re.exec(c)) != null){
16758             var name = matches[1];
16759             var value = matches[2];
16760             if(name && name.substring(0,3) == "ys-"){
16761                 cookies[name.substr(3)] = this.decodeValue(value);
16762             }
16763         }
16764         return cookies;
16765     },
16766
16767     // private
16768     setCookie : function(name, value){
16769         document.cookie = "ys-"+ name + "=" + this.encodeValue(value) +
16770            ((this.expires == null) ? "" : ("; expires=" + this.expires.toGMTString())) +
16771            ((this.path == null) ? "" : ("; path=" + this.path)) +
16772            ((this.domain == null) ? "" : ("; domain=" + this.domain)) +
16773            ((this.secure == true) ? "; secure" : "");
16774     },
16775
16776     // private
16777     clearCookie : function(name){
16778         document.cookie = "ys-" + name + "=null; expires=Thu, 01-Jan-70 00:00:01 GMT" +
16779            ((this.path == null) ? "" : ("; path=" + this.path)) +
16780            ((this.domain == null) ? "" : ("; domain=" + this.domain)) +
16781            ((this.secure == true) ? "; secure" : "");
16782     }
16783 });/*
16784  * Based on:
16785  * Ext JS Library 1.1.1
16786  * Copyright(c) 2006-2007, Ext JS, LLC.
16787  *
16788  * Originally Released Under LGPL - original licence link has changed is not relivant.
16789  *
16790  * Fork - LGPL
16791  * <script type="text/javascript">
16792  */
16793  
16794
16795 /**
16796  * @class Roo.ComponentMgr
16797  * Provides a common registry of all components on a page so that they can be easily accessed by component id (see {@link Roo.getCmp}).
16798  * @static
16799  */
16800 Roo.ComponentMgr = function(){
16801     var all = new Roo.util.MixedCollection();
16802
16803     return {
16804         /**
16805          * Registers a component.
16806          * @param {Roo.Component} c The component
16807          */
16808         register : function(c){
16809             all.add(c);
16810         },
16811
16812         /**
16813          * Unregisters a component.
16814          * @param {Roo.Component} c The component
16815          */
16816         unregister : function(c){
16817             all.remove(c);
16818         },
16819
16820         /**
16821          * Returns a component by id
16822          * @param {String} id The component id
16823          */
16824         get : function(id){
16825             return all.get(id);
16826         },
16827
16828         /**
16829          * Registers a function that will be called when a specified component is added to ComponentMgr
16830          * @param {String} id The component id
16831          * @param {Funtction} fn The callback function
16832          * @param {Object} scope The scope of the callback
16833          */
16834         onAvailable : function(id, fn, scope){
16835             all.on("add", function(index, o){
16836                 if(o.id == id){
16837                     fn.call(scope || o, o);
16838                     all.un("add", fn, scope);
16839                 }
16840             });
16841         }
16842     };
16843 }();/*
16844  * Based on:
16845  * Ext JS Library 1.1.1
16846  * Copyright(c) 2006-2007, Ext JS, LLC.
16847  *
16848  * Originally Released Under LGPL - original licence link has changed is not relivant.
16849  *
16850  * Fork - LGPL
16851  * <script type="text/javascript">
16852  */
16853  
16854 /**
16855  * @class Roo.Component
16856  * @extends Roo.util.Observable
16857  * Base class for all major Roo components.  All subclasses of Component can automatically participate in the standard
16858  * Roo component lifecycle of creation, rendering and destruction.  They also have automatic support for basic hide/show
16859  * and enable/disable behavior.  Component allows any subclass to be lazy-rendered into any {@link Roo.Container} and
16860  * to be automatically registered with the {@link Roo.ComponentMgr} so that it can be referenced at any time via {@link Roo.getCmp}.
16861  * All visual components (widgets) that require rendering into a layout should subclass Component.
16862  * @constructor
16863  * @param {Roo.Element/String/Object} config The configuration options.  If an element is passed, it is set as the internal
16864  * 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
16865  * and is used as the component id.  Otherwise, it is assumed to be a standard config object and is applied to the component.
16866  */
16867 Roo.Component = function(config){
16868     config = config || {};
16869     if(config.tagName || config.dom || typeof config == "string"){ // element object
16870         config = {el: config, id: config.id || config};
16871     }
16872     this.initialConfig = config;
16873
16874     Roo.apply(this, config);
16875     this.addEvents({
16876         /**
16877          * @event disable
16878          * Fires after the component is disabled.
16879              * @param {Roo.Component} this
16880              */
16881         disable : true,
16882         /**
16883          * @event enable
16884          * Fires after the component is enabled.
16885              * @param {Roo.Component} this
16886              */
16887         enable : true,
16888         /**
16889          * @event beforeshow
16890          * Fires before the component is shown.  Return false to stop the show.
16891              * @param {Roo.Component} this
16892              */
16893         beforeshow : true,
16894         /**
16895          * @event show
16896          * Fires after the component is shown.
16897              * @param {Roo.Component} this
16898              */
16899         show : true,
16900         /**
16901          * @event beforehide
16902          * Fires before the component is hidden. Return false to stop the hide.
16903              * @param {Roo.Component} this
16904              */
16905         beforehide : true,
16906         /**
16907          * @event hide
16908          * Fires after the component is hidden.
16909              * @param {Roo.Component} this
16910              */
16911         hide : true,
16912         /**
16913          * @event beforerender
16914          * Fires before the component is rendered. Return false to stop the render.
16915              * @param {Roo.Component} this
16916              */
16917         beforerender : true,
16918         /**
16919          * @event render
16920          * Fires after the component is rendered.
16921              * @param {Roo.Component} this
16922              */
16923         render : true,
16924         /**
16925          * @event beforedestroy
16926          * Fires before the component is destroyed. Return false to stop the destroy.
16927              * @param {Roo.Component} this
16928              */
16929         beforedestroy : true,
16930         /**
16931          * @event destroy
16932          * Fires after the component is destroyed.
16933              * @param {Roo.Component} this
16934              */
16935         destroy : true
16936     });
16937     if(!this.id){
16938         this.id = "roo-comp-" + (++Roo.Component.AUTO_ID);
16939     }
16940     Roo.ComponentMgr.register(this);
16941     Roo.Component.superclass.constructor.call(this);
16942     this.initComponent();
16943     if(this.renderTo){ // not supported by all components yet. use at your own risk!
16944         this.render(this.renderTo);
16945         delete this.renderTo;
16946     }
16947 };
16948
16949 /** @private */
16950 Roo.Component.AUTO_ID = 1000;
16951
16952 Roo.extend(Roo.Component, Roo.util.Observable, {
16953     /**
16954      * @scope Roo.Component.prototype
16955      * @type {Boolean}
16956      * true if this component is hidden. Read-only.
16957      */
16958     hidden : false,
16959     /**
16960      * @type {Boolean}
16961      * true if this component is disabled. Read-only.
16962      */
16963     disabled : false,
16964     /**
16965      * @type {Boolean}
16966      * true if this component has been rendered. Read-only.
16967      */
16968     rendered : false,
16969     
16970     /** @cfg {String} disableClass
16971      * CSS class added to the component when it is disabled (defaults to "x-item-disabled").
16972      */
16973     disabledClass : "x-item-disabled",
16974         /** @cfg {Boolean} allowDomMove
16975          * Whether the component can move the Dom node when rendering (defaults to true).
16976          */
16977     allowDomMove : true,
16978     /** @cfg {String} hideMode (display|visibility)
16979      * How this component should hidden. Supported values are
16980      * "visibility" (css visibility), "offsets" (negative offset position) and
16981      * "display" (css display) - defaults to "display".
16982      */
16983     hideMode: 'display',
16984
16985     /** @private */
16986     ctype : "Roo.Component",
16987
16988     /**
16989      * @cfg {String} actionMode 
16990      * which property holds the element that used for  hide() / show() / disable() / enable()
16991      * default is 'el' for forms you probably want to set this to fieldEl 
16992      */
16993     actionMode : "el",
16994
16995     /** @private */
16996     getActionEl : function(){
16997         return this[this.actionMode];
16998     },
16999
17000     initComponent : Roo.emptyFn,
17001     /**
17002      * If this is a lazy rendering component, render it to its container element.
17003      * @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.
17004      */
17005     render : function(container, position){
17006         
17007         if(this.rendered){
17008             return this;
17009         }
17010         
17011         if(this.fireEvent("beforerender", this) === false){
17012             return false;
17013         }
17014         
17015         if(!container && this.el){
17016             this.el = Roo.get(this.el);
17017             container = this.el.dom.parentNode;
17018             this.allowDomMove = false;
17019         }
17020         this.container = Roo.get(container);
17021         this.rendered = true;
17022         if(position !== undefined){
17023             if(typeof position == 'number'){
17024                 position = this.container.dom.childNodes[position];
17025             }else{
17026                 position = Roo.getDom(position);
17027             }
17028         }
17029         this.onRender(this.container, position || null);
17030         if(this.cls){
17031             this.el.addClass(this.cls);
17032             delete this.cls;
17033         }
17034         if(this.style){
17035             this.el.applyStyles(this.style);
17036             delete this.style;
17037         }
17038         this.fireEvent("render", this);
17039         this.afterRender(this.container);
17040         if(this.hidden){
17041             this.hide();
17042         }
17043         if(this.disabled){
17044             this.disable();
17045         }
17046
17047         return this;
17048         
17049     },
17050
17051     /** @private */
17052     // default function is not really useful
17053     onRender : function(ct, position){
17054         if(this.el){
17055             this.el = Roo.get(this.el);
17056             if(this.allowDomMove !== false){
17057                 ct.dom.insertBefore(this.el.dom, position);
17058             }
17059         }
17060     },
17061
17062     /** @private */
17063     getAutoCreate : function(){
17064         var cfg = typeof this.autoCreate == "object" ?
17065                       this.autoCreate : Roo.apply({}, this.defaultAutoCreate);
17066         if(this.id && !cfg.id){
17067             cfg.id = this.id;
17068         }
17069         return cfg;
17070     },
17071
17072     /** @private */
17073     afterRender : Roo.emptyFn,
17074
17075     /**
17076      * Destroys this component by purging any event listeners, removing the component's element from the DOM,
17077      * removing the component from its {@link Roo.Container} (if applicable) and unregistering it from {@link Roo.ComponentMgr}.
17078      */
17079     destroy : function(){
17080         if(this.fireEvent("beforedestroy", this) !== false){
17081             this.purgeListeners();
17082             this.beforeDestroy();
17083             if(this.rendered){
17084                 this.el.removeAllListeners();
17085                 this.el.remove();
17086                 if(this.actionMode == "container"){
17087                     this.container.remove();
17088                 }
17089             }
17090             this.onDestroy();
17091             Roo.ComponentMgr.unregister(this);
17092             this.fireEvent("destroy", this);
17093         }
17094     },
17095
17096         /** @private */
17097     beforeDestroy : function(){
17098
17099     },
17100
17101         /** @private */
17102         onDestroy : function(){
17103
17104     },
17105
17106     /**
17107      * Returns the underlying {@link Roo.Element}.
17108      * @return {Roo.Element} The element
17109      */
17110     getEl : function(){
17111         return this.el;
17112     },
17113
17114     /**
17115      * Returns the id of this component.
17116      * @return {String}
17117      */
17118     getId : function(){
17119         return this.id;
17120     },
17121
17122     /**
17123      * Try to focus this component.
17124      * @param {Boolean} selectText True to also select the text in this component (if applicable)
17125      * @return {Roo.Component} this
17126      */
17127     focus : function(selectText){
17128         if(this.rendered){
17129             this.el.focus();
17130             if(selectText === true){
17131                 this.el.dom.select();
17132             }
17133         }
17134         return this;
17135     },
17136
17137     /** @private */
17138     blur : function(){
17139         if(this.rendered){
17140             this.el.blur();
17141         }
17142         return this;
17143     },
17144
17145     /**
17146      * Disable this component.
17147      * @return {Roo.Component} this
17148      */
17149     disable : function(){
17150         if(this.rendered){
17151             this.onDisable();
17152         }
17153         this.disabled = true;
17154         this.fireEvent("disable", this);
17155         return this;
17156     },
17157
17158         // private
17159     onDisable : function(){
17160         this.getActionEl().addClass(this.disabledClass);
17161         this.el.dom.disabled = true;
17162     },
17163
17164     /**
17165      * Enable this component.
17166      * @return {Roo.Component} this
17167      */
17168     enable : function(){
17169         if(this.rendered){
17170             this.onEnable();
17171         }
17172         this.disabled = false;
17173         this.fireEvent("enable", this);
17174         return this;
17175     },
17176
17177         // private
17178     onEnable : function(){
17179         this.getActionEl().removeClass(this.disabledClass);
17180         this.el.dom.disabled = false;
17181     },
17182
17183     /**
17184      * Convenience function for setting disabled/enabled by boolean.
17185      * @param {Boolean} disabled
17186      */
17187     setDisabled : function(disabled){
17188         this[disabled ? "disable" : "enable"]();
17189     },
17190
17191     /**
17192      * Show this component.
17193      * @return {Roo.Component} this
17194      */
17195     show: function(){
17196         if(this.fireEvent("beforeshow", this) !== false){
17197             this.hidden = false;
17198             if(this.rendered){
17199                 this.onShow();
17200             }
17201             this.fireEvent("show", this);
17202         }
17203         return this;
17204     },
17205
17206     // private
17207     onShow : function(){
17208         var ae = this.getActionEl();
17209         if(this.hideMode == 'visibility'){
17210             ae.dom.style.visibility = "visible";
17211         }else if(this.hideMode == 'offsets'){
17212             ae.removeClass('x-hidden');
17213         }else{
17214             ae.dom.style.display = "";
17215         }
17216     },
17217
17218     /**
17219      * Hide this component.
17220      * @return {Roo.Component} this
17221      */
17222     hide: function(){
17223         if(this.fireEvent("beforehide", this) !== false){
17224             this.hidden = true;
17225             if(this.rendered){
17226                 this.onHide();
17227             }
17228             this.fireEvent("hide", this);
17229         }
17230         return this;
17231     },
17232
17233     // private
17234     onHide : function(){
17235         var ae = this.getActionEl();
17236         if(this.hideMode == 'visibility'){
17237             ae.dom.style.visibility = "hidden";
17238         }else if(this.hideMode == 'offsets'){
17239             ae.addClass('x-hidden');
17240         }else{
17241             ae.dom.style.display = "none";
17242         }
17243     },
17244
17245     /**
17246      * Convenience function to hide or show this component by boolean.
17247      * @param {Boolean} visible True to show, false to hide
17248      * @return {Roo.Component} this
17249      */
17250     setVisible: function(visible){
17251         if(visible) {
17252             this.show();
17253         }else{
17254             this.hide();
17255         }
17256         return this;
17257     },
17258
17259     /**
17260      * Returns true if this component is visible.
17261      */
17262     isVisible : function(){
17263         return this.getActionEl().isVisible();
17264     },
17265
17266     cloneConfig : function(overrides){
17267         overrides = overrides || {};
17268         var id = overrides.id || Roo.id();
17269         var cfg = Roo.applyIf(overrides, this.initialConfig);
17270         cfg.id = id; // prevent dup id
17271         return new this.constructor(cfg);
17272     }
17273 });/*
17274  * Based on:
17275  * Ext JS Library 1.1.1
17276  * Copyright(c) 2006-2007, Ext JS, LLC.
17277  *
17278  * Originally Released Under LGPL - original licence link has changed is not relivant.
17279  *
17280  * Fork - LGPL
17281  * <script type="text/javascript">
17282  */
17283
17284 /**
17285  * @class Roo.BoxComponent
17286  * @extends Roo.Component
17287  * Base class for any visual {@link Roo.Component} that uses a box container.  BoxComponent provides automatic box
17288  * model adjustments for sizing and positioning and will work correctly withnin the Component rendering model.  All
17289  * container classes should subclass BoxComponent so that they will work consistently when nested within other Roo
17290  * layout containers.
17291  * @constructor
17292  * @param {Roo.Element/String/Object} config The configuration options.
17293  */
17294 Roo.BoxComponent = function(config){
17295     Roo.Component.call(this, config);
17296     this.addEvents({
17297         /**
17298          * @event resize
17299          * Fires after the component is resized.
17300              * @param {Roo.Component} this
17301              * @param {Number} adjWidth The box-adjusted width that was set
17302              * @param {Number} adjHeight The box-adjusted height that was set
17303              * @param {Number} rawWidth The width that was originally specified
17304              * @param {Number} rawHeight The height that was originally specified
17305              */
17306         resize : true,
17307         /**
17308          * @event move
17309          * Fires after the component is moved.
17310              * @param {Roo.Component} this
17311              * @param {Number} x The new x position
17312              * @param {Number} y The new y position
17313              */
17314         move : true
17315     });
17316 };
17317
17318 Roo.extend(Roo.BoxComponent, Roo.Component, {
17319     // private, set in afterRender to signify that the component has been rendered
17320     boxReady : false,
17321     // private, used to defer height settings to subclasses
17322     deferHeight: false,
17323     /** @cfg {Number} width
17324      * width (optional) size of component
17325      */
17326      /** @cfg {Number} height
17327      * height (optional) size of component
17328      */
17329      
17330     /**
17331      * Sets the width and height of the component.  This method fires the resize event.  This method can accept
17332      * either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
17333      * @param {Number/Object} width The new width to set, or a size object in the format {width, height}
17334      * @param {Number} height The new height to set (not required if a size object is passed as the first arg)
17335      * @return {Roo.BoxComponent} this
17336      */
17337     setSize : function(w, h){
17338         // support for standard size objects
17339         if(typeof w == 'object'){
17340             h = w.height;
17341             w = w.width;
17342         }
17343         // not rendered
17344         if(!this.boxReady){
17345             this.width = w;
17346             this.height = h;
17347             return this;
17348         }
17349
17350         // prevent recalcs when not needed
17351         if(this.lastSize && this.lastSize.width == w && this.lastSize.height == h){
17352             return this;
17353         }
17354         this.lastSize = {width: w, height: h};
17355
17356         var adj = this.adjustSize(w, h);
17357         var aw = adj.width, ah = adj.height;
17358         if(aw !== undefined || ah !== undefined){ // this code is nasty but performs better with floaters
17359             var rz = this.getResizeEl();
17360             if(!this.deferHeight && aw !== undefined && ah !== undefined){
17361                 rz.setSize(aw, ah);
17362             }else if(!this.deferHeight && ah !== undefined){
17363                 rz.setHeight(ah);
17364             }else if(aw !== undefined){
17365                 rz.setWidth(aw);
17366             }
17367             this.onResize(aw, ah, w, h);
17368             this.fireEvent('resize', this, aw, ah, w, h);
17369         }
17370         return this;
17371     },
17372
17373     /**
17374      * Gets the current size of the component's underlying element.
17375      * @return {Object} An object containing the element's size {width: (element width), height: (element height)}
17376      */
17377     getSize : function(){
17378         return this.el.getSize();
17379     },
17380
17381     /**
17382      * Gets the current XY position of the component's underlying element.
17383      * @param {Boolean} local (optional) If true the element's left and top are returned instead of page XY (defaults to false)
17384      * @return {Array} The XY position of the element (e.g., [100, 200])
17385      */
17386     getPosition : function(local){
17387         if(local === true){
17388             return [this.el.getLeft(true), this.el.getTop(true)];
17389         }
17390         return this.xy || this.el.getXY();
17391     },
17392
17393     /**
17394      * Gets the current box measurements of the component's underlying element.
17395      * @param {Boolean} local (optional) If true the element's left and top are returned instead of page XY (defaults to false)
17396      * @returns {Object} box An object in the format {x, y, width, height}
17397      */
17398     getBox : function(local){
17399         var s = this.el.getSize();
17400         if(local){
17401             s.x = this.el.getLeft(true);
17402             s.y = this.el.getTop(true);
17403         }else{
17404             var xy = this.xy || this.el.getXY();
17405             s.x = xy[0];
17406             s.y = xy[1];
17407         }
17408         return s;
17409     },
17410
17411     /**
17412      * Sets the current box measurements of the component's underlying element.
17413      * @param {Object} box An object in the format {x, y, width, height}
17414      * @returns {Roo.BoxComponent} this
17415      */
17416     updateBox : function(box){
17417         this.setSize(box.width, box.height);
17418         this.setPagePosition(box.x, box.y);
17419         return this;
17420     },
17421
17422     // protected
17423     getResizeEl : function(){
17424         return this.resizeEl || this.el;
17425     },
17426
17427     // protected
17428     getPositionEl : function(){
17429         return this.positionEl || this.el;
17430     },
17431
17432     /**
17433      * Sets the left and top of the component.  To set the page XY position instead, use {@link #setPagePosition}.
17434      * This method fires the move event.
17435      * @param {Number} left The new left
17436      * @param {Number} top The new top
17437      * @returns {Roo.BoxComponent} this
17438      */
17439     setPosition : function(x, y){
17440         this.x = x;
17441         this.y = y;
17442         if(!this.boxReady){
17443             return this;
17444         }
17445         var adj = this.adjustPosition(x, y);
17446         var ax = adj.x, ay = adj.y;
17447
17448         var el = this.getPositionEl();
17449         if(ax !== undefined || ay !== undefined){
17450             if(ax !== undefined && ay !== undefined){
17451                 el.setLeftTop(ax, ay);
17452             }else if(ax !== undefined){
17453                 el.setLeft(ax);
17454             }else if(ay !== undefined){
17455                 el.setTop(ay);
17456             }
17457             this.onPosition(ax, ay);
17458             this.fireEvent('move', this, ax, ay);
17459         }
17460         return this;
17461     },
17462
17463     /**
17464      * Sets the page XY position of the component.  To set the left and top instead, use {@link #setPosition}.
17465      * This method fires the move event.
17466      * @param {Number} x The new x position
17467      * @param {Number} y The new y position
17468      * @returns {Roo.BoxComponent} this
17469      */
17470     setPagePosition : function(x, y){
17471         this.pageX = x;
17472         this.pageY = y;
17473         if(!this.boxReady){
17474             return;
17475         }
17476         if(x === undefined || y === undefined){ // cannot translate undefined points
17477             return;
17478         }
17479         var p = this.el.translatePoints(x, y);
17480         this.setPosition(p.left, p.top);
17481         return this;
17482     },
17483
17484     // private
17485     onRender : function(ct, position){
17486         Roo.BoxComponent.superclass.onRender.call(this, ct, position);
17487         if(this.resizeEl){
17488             this.resizeEl = Roo.get(this.resizeEl);
17489         }
17490         if(this.positionEl){
17491             this.positionEl = Roo.get(this.positionEl);
17492         }
17493     },
17494
17495     // private
17496     afterRender : function(){
17497         Roo.BoxComponent.superclass.afterRender.call(this);
17498         this.boxReady = true;
17499         this.setSize(this.width, this.height);
17500         if(this.x || this.y){
17501             this.setPosition(this.x, this.y);
17502         }
17503         if(this.pageX || this.pageY){
17504             this.setPagePosition(this.pageX, this.pageY);
17505         }
17506     },
17507
17508     /**
17509      * Force the component's size to recalculate based on the underlying element's current height and width.
17510      * @returns {Roo.BoxComponent} this
17511      */
17512     syncSize : function(){
17513         delete this.lastSize;
17514         this.setSize(this.el.getWidth(), this.el.getHeight());
17515         return this;
17516     },
17517
17518     /**
17519      * Called after the component is resized, this method is empty by default but can be implemented by any
17520      * subclass that needs to perform custom logic after a resize occurs.
17521      * @param {Number} adjWidth The box-adjusted width that was set
17522      * @param {Number} adjHeight The box-adjusted height that was set
17523      * @param {Number} rawWidth The width that was originally specified
17524      * @param {Number} rawHeight The height that was originally specified
17525      */
17526     onResize : function(adjWidth, adjHeight, rawWidth, rawHeight){
17527
17528     },
17529
17530     /**
17531      * Called after the component is moved, this method is empty by default but can be implemented by any
17532      * subclass that needs to perform custom logic after a move occurs.
17533      * @param {Number} x The new x position
17534      * @param {Number} y The new y position
17535      */
17536     onPosition : function(x, y){
17537
17538     },
17539
17540     // private
17541     adjustSize : function(w, h){
17542         if(this.autoWidth){
17543             w = 'auto';
17544         }
17545         if(this.autoHeight){
17546             h = 'auto';
17547         }
17548         return {width : w, height: h};
17549     },
17550
17551     // private
17552     adjustPosition : function(x, y){
17553         return {x : x, y: y};
17554     }
17555 });/*
17556  * Based on:
17557  * Ext JS Library 1.1.1
17558  * Copyright(c) 2006-2007, Ext JS, LLC.
17559  *
17560  * Originally Released Under LGPL - original licence link has changed is not relivant.
17561  *
17562  * Fork - LGPL
17563  * <script type="text/javascript">
17564  */
17565  (function(){ 
17566 /**
17567  * @class Roo.Layer
17568  * @extends Roo.Element
17569  * An extended {@link Roo.Element} object that supports a shadow and shim, constrain to viewport and
17570  * automatic maintaining of shadow/shim positions.
17571  * @cfg {Boolean} shim False to disable the iframe shim in browsers which need one (defaults to true)
17572  * @cfg {String/Boolean} shadow True to create a shadow element with default class "x-layer-shadow", or
17573  * you can pass a string with a CSS class name. False turns off the shadow.
17574  * @cfg {Object} dh DomHelper object config to create element with (defaults to {tag: "div", cls: "x-layer"}).
17575  * @cfg {Boolean} constrain False to disable constrain to viewport (defaults to true)
17576  * @cfg {String} cls CSS class to add to the element
17577  * @cfg {Number} zindex Starting z-index (defaults to 11000)
17578  * @cfg {Number} shadowOffset Number of pixels to offset the shadow (defaults to 3)
17579  * @constructor
17580  * @param {Object} config An object with config options.
17581  * @param {String/HTMLElement} existingEl (optional) Uses an existing DOM element. If the element is not found it creates it.
17582  */
17583
17584 Roo.Layer = function(config, existingEl){
17585     config = config || {};
17586     var dh = Roo.DomHelper;
17587     var cp = config.parentEl, pel = cp ? Roo.getDom(cp) : document.body;
17588     if(existingEl){
17589         this.dom = Roo.getDom(existingEl);
17590     }
17591     if(!this.dom){
17592         var o = config.dh || {tag: "div", cls: "x-layer"};
17593         this.dom = dh.append(pel, o);
17594     }
17595     if(config.cls){
17596         this.addClass(config.cls);
17597     }
17598     this.constrain = config.constrain !== false;
17599     this.visibilityMode = Roo.Element.VISIBILITY;
17600     if(config.id){
17601         this.id = this.dom.id = config.id;
17602     }else{
17603         this.id = Roo.id(this.dom);
17604     }
17605     this.zindex = config.zindex || this.getZIndex();
17606     this.position("absolute", this.zindex);
17607     if(config.shadow){
17608         this.shadowOffset = config.shadowOffset || 4;
17609         this.shadow = new Roo.Shadow({
17610             offset : this.shadowOffset,
17611             mode : config.shadow
17612         });
17613     }else{
17614         this.shadowOffset = 0;
17615     }
17616     this.useShim = config.shim !== false && Roo.useShims;
17617     this.useDisplay = config.useDisplay;
17618     this.hide();
17619 };
17620
17621 var supr = Roo.Element.prototype;
17622
17623 // shims are shared among layer to keep from having 100 iframes
17624 var shims = [];
17625
17626 Roo.extend(Roo.Layer, Roo.Element, {
17627
17628     getZIndex : function(){
17629         return this.zindex || parseInt(this.getStyle("z-index"), 10) || 11000;
17630     },
17631
17632     getShim : function(){
17633         if(!this.useShim){
17634             return null;
17635         }
17636         if(this.shim){
17637             return this.shim;
17638         }
17639         var shim = shims.shift();
17640         if(!shim){
17641             shim = this.createShim();
17642             shim.enableDisplayMode('block');
17643             shim.dom.style.display = 'none';
17644             shim.dom.style.visibility = 'visible';
17645         }
17646         var pn = this.dom.parentNode;
17647         if(shim.dom.parentNode != pn){
17648             pn.insertBefore(shim.dom, this.dom);
17649         }
17650         shim.setStyle('z-index', this.getZIndex()-2);
17651         this.shim = shim;
17652         return shim;
17653     },
17654
17655     hideShim : function(){
17656         if(this.shim){
17657             this.shim.setDisplayed(false);
17658             shims.push(this.shim);
17659             delete this.shim;
17660         }
17661     },
17662
17663     disableShadow : function(){
17664         if(this.shadow){
17665             this.shadowDisabled = true;
17666             this.shadow.hide();
17667             this.lastShadowOffset = this.shadowOffset;
17668             this.shadowOffset = 0;
17669         }
17670     },
17671
17672     enableShadow : function(show){
17673         if(this.shadow){
17674             this.shadowDisabled = false;
17675             this.shadowOffset = this.lastShadowOffset;
17676             delete this.lastShadowOffset;
17677             if(show){
17678                 this.sync(true);
17679             }
17680         }
17681     },
17682
17683     // private
17684     // this code can execute repeatedly in milliseconds (i.e. during a drag) so
17685     // code size was sacrificed for effeciency (e.g. no getBox/setBox, no XY calls)
17686     sync : function(doShow){
17687         var sw = this.shadow;
17688         if(!this.updating && this.isVisible() && (sw || this.useShim)){
17689             var sh = this.getShim();
17690
17691             var w = this.getWidth(),
17692                 h = this.getHeight();
17693
17694             var l = this.getLeft(true),
17695                 t = this.getTop(true);
17696
17697             if(sw && !this.shadowDisabled){
17698                 if(doShow && !sw.isVisible()){
17699                     sw.show(this);
17700                 }else{
17701                     sw.realign(l, t, w, h);
17702                 }
17703                 if(sh){
17704                     if(doShow){
17705                        sh.show();
17706                     }
17707                     // fit the shim behind the shadow, so it is shimmed too
17708                     var a = sw.adjusts, s = sh.dom.style;
17709                     s.left = (Math.min(l, l+a.l))+"px";
17710                     s.top = (Math.min(t, t+a.t))+"px";
17711                     s.width = (w+a.w)+"px";
17712                     s.height = (h+a.h)+"px";
17713                 }
17714             }else if(sh){
17715                 if(doShow){
17716                    sh.show();
17717                 }
17718                 sh.setSize(w, h);
17719                 sh.setLeftTop(l, t);
17720             }
17721             
17722         }
17723     },
17724
17725     // private
17726     destroy : function(){
17727         this.hideShim();
17728         if(this.shadow){
17729             this.shadow.hide();
17730         }
17731         this.removeAllListeners();
17732         var pn = this.dom.parentNode;
17733         if(pn){
17734             pn.removeChild(this.dom);
17735         }
17736         Roo.Element.uncache(this.id);
17737     },
17738
17739     remove : function(){
17740         this.destroy();
17741     },
17742
17743     // private
17744     beginUpdate : function(){
17745         this.updating = true;
17746     },
17747
17748     // private
17749     endUpdate : function(){
17750         this.updating = false;
17751         this.sync(true);
17752     },
17753
17754     // private
17755     hideUnders : function(negOffset){
17756         if(this.shadow){
17757             this.shadow.hide();
17758         }
17759         this.hideShim();
17760     },
17761
17762     // private
17763     constrainXY : function(){
17764         if(this.constrain){
17765             var vw = Roo.lib.Dom.getViewWidth(),
17766                 vh = Roo.lib.Dom.getViewHeight();
17767             var s = Roo.get(document).getScroll();
17768
17769             var xy = this.getXY();
17770             var x = xy[0], y = xy[1];   
17771             var w = this.dom.offsetWidth+this.shadowOffset, h = this.dom.offsetHeight+this.shadowOffset;
17772             // only move it if it needs it
17773             var moved = false;
17774             // first validate right/bottom
17775             if((x + w) > vw+s.left){
17776                 x = vw - w - this.shadowOffset;
17777                 moved = true;
17778             }
17779             if((y + h) > vh+s.top){
17780                 y = vh - h - this.shadowOffset;
17781                 moved = true;
17782             }
17783             // then make sure top/left isn't negative
17784             if(x < s.left){
17785                 x = s.left;
17786                 moved = true;
17787             }
17788             if(y < s.top){
17789                 y = s.top;
17790                 moved = true;
17791             }
17792             if(moved){
17793                 if(this.avoidY){
17794                     var ay = this.avoidY;
17795                     if(y <= ay && (y+h) >= ay){
17796                         y = ay-h-5;   
17797                     }
17798                 }
17799                 xy = [x, y];
17800                 this.storeXY(xy);
17801                 supr.setXY.call(this, xy);
17802                 this.sync();
17803             }
17804         }
17805     },
17806
17807     isVisible : function(){
17808         return this.visible;    
17809     },
17810
17811     // private
17812     showAction : function(){
17813         this.visible = true; // track visibility to prevent getStyle calls
17814         if(this.useDisplay === true){
17815             this.setDisplayed("");
17816         }else if(this.lastXY){
17817             supr.setXY.call(this, this.lastXY);
17818         }else if(this.lastLT){
17819             supr.setLeftTop.call(this, this.lastLT[0], this.lastLT[1]);
17820         }
17821     },
17822
17823     // private
17824     hideAction : function(){
17825         this.visible = false;
17826         if(this.useDisplay === true){
17827             this.setDisplayed(false);
17828         }else{
17829             this.setLeftTop(-10000,-10000);
17830         }
17831     },
17832
17833     // overridden Element method
17834     setVisible : function(v, a, d, c, e){
17835         if(v){
17836             this.showAction();
17837         }
17838         if(a && v){
17839             var cb = function(){
17840                 this.sync(true);
17841                 if(c){
17842                     c();
17843                 }
17844             }.createDelegate(this);
17845             supr.setVisible.call(this, true, true, d, cb, e);
17846         }else{
17847             if(!v){
17848                 this.hideUnders(true);
17849             }
17850             var cb = c;
17851             if(a){
17852                 cb = function(){
17853                     this.hideAction();
17854                     if(c){
17855                         c();
17856                     }
17857                 }.createDelegate(this);
17858             }
17859             supr.setVisible.call(this, v, a, d, cb, e);
17860             if(v){
17861                 this.sync(true);
17862             }else if(!a){
17863                 this.hideAction();
17864             }
17865         }
17866     },
17867
17868     storeXY : function(xy){
17869         delete this.lastLT;
17870         this.lastXY = xy;
17871     },
17872
17873     storeLeftTop : function(left, top){
17874         delete this.lastXY;
17875         this.lastLT = [left, top];
17876     },
17877
17878     // private
17879     beforeFx : function(){
17880         this.beforeAction();
17881         return Roo.Layer.superclass.beforeFx.apply(this, arguments);
17882     },
17883
17884     // private
17885     afterFx : function(){
17886         Roo.Layer.superclass.afterFx.apply(this, arguments);
17887         this.sync(this.isVisible());
17888     },
17889
17890     // private
17891     beforeAction : function(){
17892         if(!this.updating && this.shadow){
17893             this.shadow.hide();
17894         }
17895     },
17896
17897     // overridden Element method
17898     setLeft : function(left){
17899         this.storeLeftTop(left, this.getTop(true));
17900         supr.setLeft.apply(this, arguments);
17901         this.sync();
17902     },
17903
17904     setTop : function(top){
17905         this.storeLeftTop(this.getLeft(true), top);
17906         supr.setTop.apply(this, arguments);
17907         this.sync();
17908     },
17909
17910     setLeftTop : function(left, top){
17911         this.storeLeftTop(left, top);
17912         supr.setLeftTop.apply(this, arguments);
17913         this.sync();
17914     },
17915
17916     setXY : function(xy, a, d, c, e){
17917         this.fixDisplay();
17918         this.beforeAction();
17919         this.storeXY(xy);
17920         var cb = this.createCB(c);
17921         supr.setXY.call(this, xy, a, d, cb, e);
17922         if(!a){
17923             cb();
17924         }
17925     },
17926
17927     // private
17928     createCB : function(c){
17929         var el = this;
17930         return function(){
17931             el.constrainXY();
17932             el.sync(true);
17933             if(c){
17934                 c();
17935             }
17936         };
17937     },
17938
17939     // overridden Element method
17940     setX : function(x, a, d, c, e){
17941         this.setXY([x, this.getY()], a, d, c, e);
17942     },
17943
17944     // overridden Element method
17945     setY : function(y, a, d, c, e){
17946         this.setXY([this.getX(), y], a, d, c, e);
17947     },
17948
17949     // overridden Element method
17950     setSize : function(w, h, a, d, c, e){
17951         this.beforeAction();
17952         var cb = this.createCB(c);
17953         supr.setSize.call(this, w, h, a, d, cb, e);
17954         if(!a){
17955             cb();
17956         }
17957     },
17958
17959     // overridden Element method
17960     setWidth : function(w, a, d, c, e){
17961         this.beforeAction();
17962         var cb = this.createCB(c);
17963         supr.setWidth.call(this, w, a, d, cb, e);
17964         if(!a){
17965             cb();
17966         }
17967     },
17968
17969     // overridden Element method
17970     setHeight : function(h, a, d, c, e){
17971         this.beforeAction();
17972         var cb = this.createCB(c);
17973         supr.setHeight.call(this, h, a, d, cb, e);
17974         if(!a){
17975             cb();
17976         }
17977     },
17978
17979     // overridden Element method
17980     setBounds : function(x, y, w, h, a, d, c, e){
17981         this.beforeAction();
17982         var cb = this.createCB(c);
17983         if(!a){
17984             this.storeXY([x, y]);
17985             supr.setXY.call(this, [x, y]);
17986             supr.setSize.call(this, w, h, a, d, cb, e);
17987             cb();
17988         }else{
17989             supr.setBounds.call(this, x, y, w, h, a, d, cb, e);
17990         }
17991         return this;
17992     },
17993     
17994     /**
17995      * Sets the z-index of this layer and adjusts any shadow and shim z-indexes. The layer z-index is automatically
17996      * incremented by two more than the value passed in so that it always shows above any shadow or shim (the shadow
17997      * element, if any, will be assigned z-index + 1, and the shim element, if any, will be assigned the unmodified z-index).
17998      * @param {Number} zindex The new z-index to set
17999      * @return {this} The Layer
18000      */
18001     setZIndex : function(zindex){
18002         this.zindex = zindex;
18003         this.setStyle("z-index", zindex + 2);
18004         if(this.shadow){
18005             this.shadow.setZIndex(zindex + 1);
18006         }
18007         if(this.shim){
18008             this.shim.setStyle("z-index", zindex);
18009         }
18010     }
18011 });
18012 })();/*
18013  * Original code for Roojs - LGPL
18014  * <script type="text/javascript">
18015  */
18016  
18017 /**
18018  * @class Roo.XComponent
18019  * A delayed Element creator...
18020  * Or a way to group chunks of interface together.
18021  * technically this is a wrapper around a tree of Roo elements (which defines a 'module'),
18022  *  used in conjunction with XComponent.build() it will create an instance of each element,
18023  *  then call addxtype() to build the User interface.
18024  * 
18025  * Mypart.xyx = new Roo.XComponent({
18026
18027     parent : 'Mypart.xyz', // empty == document.element.!!
18028     order : '001',
18029     name : 'xxxx'
18030     region : 'xxxx'
18031     disabled : function() {} 
18032      
18033     tree : function() { // return an tree of xtype declared components
18034         var MODULE = this;
18035         return 
18036         {
18037             xtype : 'NestedLayoutPanel',
18038             // technicall
18039         }
18040      ]
18041  *})
18042  *
18043  *
18044  * It can be used to build a big heiracy, with parent etc.
18045  * or you can just use this to render a single compoent to a dom element
18046  * MYPART.render(Roo.Element | String(id) | dom_element )
18047  *
18048  *
18049  * Usage patterns.
18050  *
18051  * Classic Roo
18052  *
18053  * Roo is designed primarily as a single page application, so the UI build for a standard interface will
18054  * expect a single 'TOP' level module normally indicated by the 'parent' of the XComponent definition being defined as false.
18055  *
18056  * Each sub module is expected to have a parent pointing to the class name of it's parent module.
18057  *
18058  * When the top level is false, a 'Roo.BorderLayout' is created and the element is flagged as 'topModule'
18059  * - if mulitple topModules exist, the last one is defined as the top module.
18060  *
18061  * Embeded Roo
18062  * 
18063  * When the top level or multiple modules are to embedded into a existing HTML page,
18064  * the parent element can container '#id' of the element where the module will be drawn.
18065  *
18066  * Bootstrap Roo
18067  *
18068  * Unlike classic Roo, the bootstrap tends not to be used as a single page.
18069  * it relies more on a include mechanism, where sub modules are included into an outer page.
18070  * This is normally managed by the builder tools using Roo.apply( options, Included.Sub.Module )
18071  * 
18072  * Bootstrap Roo Included elements
18073  *
18074  * Our builder application needs the ability to preview these sub compoennts. They will normally have parent=false set,
18075  * hence confusing the component builder as it thinks there are multiple top level elements. 
18076  *
18077  * String Over-ride & Translations
18078  *
18079  * Our builder application writes all the strings as _strings and _named_strings. This is to enable the translation of elements,
18080  * and also the 'overlaying of string values - needed when different versions of the same application with different text content
18081  * are needed. @see Roo.XComponent.overlayString  
18082  * 
18083  * 
18084  * 
18085  * @extends Roo.util.Observable
18086  * @constructor
18087  * @param cfg {Object} configuration of component
18088  * 
18089  */
18090 Roo.XComponent = function(cfg) {
18091     Roo.apply(this, cfg);
18092     this.addEvents({ 
18093         /**
18094              * @event built
18095              * Fires when this the componnt is built
18096              * @param {Roo.XComponent} c the component
18097              */
18098         'built' : true
18099         
18100     });
18101     this.region = this.region || 'center'; // default..
18102     Roo.XComponent.register(this);
18103     this.modules = false;
18104     this.el = false; // where the layout goes..
18105     
18106     
18107 }
18108 Roo.extend(Roo.XComponent, Roo.util.Observable, {
18109     /**
18110      * @property el
18111      * The created element (with Roo.factory())
18112      * @type {Roo.Layout}
18113      */
18114     el  : false,
18115     
18116     /**
18117      * @property el
18118      * for BC  - use el in new code
18119      * @type {Roo.Layout}
18120      */
18121     panel : false,
18122     
18123     /**
18124      * @property layout
18125      * for BC  - use el in new code
18126      * @type {Roo.Layout}
18127      */
18128     layout : false,
18129     
18130      /**
18131      * @cfg {Function|boolean} disabled
18132      * If this module is disabled by some rule, return true from the funtion
18133      */
18134     disabled : false,
18135     
18136     /**
18137      * @cfg {String} parent 
18138      * Name of parent element which it get xtype added to..
18139      */
18140     parent: false,
18141     
18142     /**
18143      * @cfg {String} order
18144      * Used to set the order in which elements are created (usefull for multiple tabs)
18145      */
18146     
18147     order : false,
18148     /**
18149      * @cfg {String} name
18150      * String to display while loading.
18151      */
18152     name : false,
18153     /**
18154      * @cfg {String} region
18155      * Region to render component to (defaults to center)
18156      */
18157     region : 'center',
18158     
18159     /**
18160      * @cfg {Array} items
18161      * A single item array - the first element is the root of the tree..
18162      * It's done this way to stay compatible with the Xtype system...
18163      */
18164     items : false,
18165     
18166     /**
18167      * @property _tree
18168      * The method that retuns the tree of parts that make up this compoennt 
18169      * @type {function}
18170      */
18171     _tree  : false,
18172     
18173      /**
18174      * render
18175      * render element to dom or tree
18176      * @param {Roo.Element|String|DomElement} optional render to if parent is not set.
18177      */
18178     
18179     render : function(el)
18180     {
18181         
18182         el = el || false;
18183         var hp = this.parent ? 1 : 0;
18184         Roo.debug &&  Roo.log(this);
18185         
18186         var tree = this._tree ? this._tree() : this.tree();
18187
18188         
18189         if (!el && typeof(this.parent) == 'string' && this.parent.substring(0,1) == '#') {
18190             // if parent is a '#.....' string, then let's use that..
18191             var ename = this.parent.substr(1);
18192             this.parent = false;
18193             Roo.debug && Roo.log(ename);
18194             switch (ename) {
18195                 case 'bootstrap-body':
18196                     if (typeof(tree.el) != 'undefined' && tree.el == document.body)  {
18197                         // this is the BorderLayout standard?
18198                        this.parent = { el : true };
18199                        break;
18200                     }
18201                     if (["Nest", "Content", "Grid", "Tree"].indexOf(tree.xtype)  > -1)  {
18202                         // need to insert stuff...
18203                         this.parent =  {
18204                              el : new Roo.bootstrap.layout.Border({
18205                                  el : document.body, 
18206                      
18207                                  center: {
18208                                     titlebar: false,
18209                                     autoScroll:false,
18210                                     closeOnTab: true,
18211                                     tabPosition: 'top',
18212                                       //resizeTabs: true,
18213                                     alwaysShowTabs: true,
18214                                     hideTabs: false
18215                                      //minTabWidth: 140
18216                                  }
18217                              })
18218                         
18219                          };
18220                          break;
18221                     }
18222                          
18223                     if (typeof(Roo.bootstrap.Body) != 'undefined' ) {
18224                         this.parent = { el :  new  Roo.bootstrap.Body() };
18225                         Roo.debug && Roo.log("setting el to doc body");
18226                          
18227                     } else {
18228                         throw "Container is bootstrap body, but Roo.bootstrap.Body is not defined";
18229                     }
18230                     break;
18231                 case 'bootstrap':
18232                     this.parent = { el : true};
18233                     // fall through
18234                 default:
18235                     el = Roo.get(ename);
18236                     if (typeof(Roo.bootstrap) != 'undefined' && tree['|xns'] == 'Roo.bootstrap') {
18237                         this.parent = { el : true};
18238                     }
18239                     
18240                     break;
18241             }
18242                 
18243             
18244             if (!el && !this.parent) {
18245                 Roo.debug && Roo.log("Warning - element can not be found :#" + ename );
18246                 return;
18247             }
18248         }
18249         
18250         Roo.debug && Roo.log("EL:");
18251         Roo.debug && Roo.log(el);
18252         Roo.debug && Roo.log("this.parent.el:");
18253         Roo.debug && Roo.log(this.parent.el);
18254         
18255
18256         // altertive root elements ??? - we need a better way to indicate these.
18257         var is_alt = Roo.XComponent.is_alt ||
18258                     (typeof(tree.el) != 'undefined' && tree.el == document.body) ||
18259                     (typeof(Roo.bootstrap) != 'undefined' && tree.xns == Roo.bootstrap) ||
18260                     (typeof(Roo.mailer) != 'undefined' && tree.xns == Roo.mailer) ;
18261         
18262         
18263         
18264         if (!this.parent && is_alt) {
18265             //el = Roo.get(document.body);
18266             this.parent = { el : true };
18267         }
18268             
18269             
18270         
18271         if (!this.parent) {
18272             
18273             Roo.debug && Roo.log("no parent - creating one");
18274             
18275             el = el ? Roo.get(el) : false;      
18276             
18277             if (typeof(Roo.BorderLayout) == 'undefined' ) {
18278                 
18279                 this.parent =  {
18280                     el : new Roo.bootstrap.layout.Border({
18281                         el: el || document.body,
18282                     
18283                         center: {
18284                             titlebar: false,
18285                             autoScroll:false,
18286                             closeOnTab: true,
18287                             tabPosition: 'top',
18288                              //resizeTabs: true,
18289                             alwaysShowTabs: false,
18290                             hideTabs: true,
18291                             minTabWidth: 140,
18292                             overflow: 'visible'
18293                          }
18294                      })
18295                 };
18296             } else {
18297             
18298                 // it's a top level one..
18299                 this.parent =  {
18300                     el : new Roo.BorderLayout(el || document.body, {
18301                         center: {
18302                             titlebar: false,
18303                             autoScroll:false,
18304                             closeOnTab: true,
18305                             tabPosition: 'top',
18306                              //resizeTabs: true,
18307                             alwaysShowTabs: el && hp? false :  true,
18308                             hideTabs: el || !hp ? true :  false,
18309                             minTabWidth: 140
18310                          }
18311                     })
18312                 };
18313             }
18314         }
18315         
18316         if (!this.parent.el) {
18317                 // probably an old style ctor, which has been disabled.
18318                 return;
18319
18320         }
18321                 // The 'tree' method is  '_tree now' 
18322             
18323         tree.region = tree.region || this.region;
18324         var is_body = false;
18325         if (this.parent.el === true) {
18326             // bootstrap... - body..
18327             if (el) {
18328                 tree.el = el;
18329             }
18330             this.parent.el = Roo.factory(tree);
18331             is_body = true;
18332         }
18333         
18334         this.el = this.parent.el.addxtype(tree, undefined, is_body);
18335         this.fireEvent('built', this);
18336         
18337         this.panel = this.el;
18338         this.layout = this.panel.layout;
18339         this.parentLayout = this.parent.layout  || false;  
18340          
18341     }
18342     
18343 });
18344
18345 Roo.apply(Roo.XComponent, {
18346     /**
18347      * @property  hideProgress
18348      * true to disable the building progress bar.. usefull on single page renders.
18349      * @type Boolean
18350      */
18351     hideProgress : false,
18352     /**
18353      * @property  buildCompleted
18354      * True when the builder has completed building the interface.
18355      * @type Boolean
18356      */
18357     buildCompleted : false,
18358      
18359     /**
18360      * @property  topModule
18361      * the upper most module - uses document.element as it's constructor.
18362      * @type Object
18363      */
18364      
18365     topModule  : false,
18366       
18367     /**
18368      * @property  modules
18369      * array of modules to be created by registration system.
18370      * @type {Array} of Roo.XComponent
18371      */
18372     
18373     modules : [],
18374     /**
18375      * @property  elmodules
18376      * array of modules to be created by which use #ID 
18377      * @type {Array} of Roo.XComponent
18378      */
18379      
18380     elmodules : [],
18381
18382      /**
18383      * @property  is_alt
18384      * Is an alternative Root - normally used by bootstrap or other systems,
18385      *    where the top element in the tree can wrap 'body' 
18386      * @type {boolean}  (default false)
18387      */
18388      
18389     is_alt : false,
18390     /**
18391      * @property  build_from_html
18392      * Build elements from html - used by bootstrap HTML stuff 
18393      *    - this is cleared after build is completed
18394      * @type {boolean}    (default false)
18395      */
18396      
18397     build_from_html : false,
18398     /**
18399      * Register components to be built later.
18400      *
18401      * This solves the following issues
18402      * - Building is not done on page load, but after an authentication process has occured.
18403      * - Interface elements are registered on page load
18404      * - Parent Interface elements may not be loaded before child, so this handles that..
18405      * 
18406      *
18407      * example:
18408      * 
18409      * MyApp.register({
18410           order : '000001',
18411           module : 'Pman.Tab.projectMgr',
18412           region : 'center',
18413           parent : 'Pman.layout',
18414           disabled : false,  // or use a function..
18415         })
18416      
18417      * * @param {Object} details about module
18418      */
18419     register : function(obj) {
18420                 
18421         Roo.XComponent.event.fireEvent('register', obj);
18422         switch(typeof(obj.disabled) ) {
18423                 
18424             case 'undefined':
18425                 break;
18426             
18427             case 'function':
18428                 if ( obj.disabled() ) {
18429                         return;
18430                 }
18431                 break;
18432             
18433             default:
18434                 if (obj.disabled || obj.region == '#disabled') {
18435                         return;
18436                 }
18437                 break;
18438         }
18439                 
18440         this.modules.push(obj);
18441          
18442     },
18443     /**
18444      * convert a string to an object..
18445      * eg. 'AAA.BBB' -> finds AAA.BBB
18446
18447      */
18448     
18449     toObject : function(str)
18450     {
18451         if (!str || typeof(str) == 'object') {
18452             return str;
18453         }
18454         if (str.substring(0,1) == '#') {
18455             return str;
18456         }
18457
18458         var ar = str.split('.');
18459         var rt, o;
18460         rt = ar.shift();
18461             /** eval:var:o */
18462         try {
18463             eval('if (typeof ' + rt + ' == "undefined"){ o = false;} o = ' + rt + ';');
18464         } catch (e) {
18465             throw "Module not found : " + str;
18466         }
18467         
18468         if (o === false) {
18469             throw "Module not found : " + str;
18470         }
18471         Roo.each(ar, function(e) {
18472             if (typeof(o[e]) == 'undefined') {
18473                 throw "Module not found : " + str;
18474             }
18475             o = o[e];
18476         });
18477         
18478         return o;
18479         
18480     },
18481     
18482     
18483     /**
18484      * move modules into their correct place in the tree..
18485      * 
18486      */
18487     preBuild : function ()
18488     {
18489         var _t = this;
18490         Roo.each(this.modules , function (obj)
18491         {
18492             Roo.XComponent.event.fireEvent('beforebuild', obj);
18493             
18494             var opar = obj.parent;
18495             try { 
18496                 obj.parent = this.toObject(opar);
18497             } catch(e) {
18498                 Roo.debug && Roo.log("parent:toObject failed: " + e.toString());
18499                 return;
18500             }
18501             
18502             if (!obj.parent) {
18503                 Roo.debug && Roo.log("GOT top level module");
18504                 Roo.debug && Roo.log(obj);
18505                 obj.modules = new Roo.util.MixedCollection(false, 
18506                     function(o) { return o.order + '' }
18507                 );
18508                 this.topModule = obj;
18509                 return;
18510             }
18511                         // parent is a string (usually a dom element name..)
18512             if (typeof(obj.parent) == 'string') {
18513                 this.elmodules.push(obj);
18514                 return;
18515             }
18516             if (obj.parent.constructor != Roo.XComponent) {
18517                 Roo.debug && Roo.log("Warning : Object Parent is not instance of XComponent:" + obj.name)
18518             }
18519             if (!obj.parent.modules) {
18520                 obj.parent.modules = new Roo.util.MixedCollection(false, 
18521                     function(o) { return o.order + '' }
18522                 );
18523             }
18524             if (obj.parent.disabled) {
18525                 obj.disabled = true;
18526             }
18527             obj.parent.modules.add(obj);
18528         }, this);
18529     },
18530     
18531      /**
18532      * make a list of modules to build.
18533      * @return {Array} list of modules. 
18534      */ 
18535     
18536     buildOrder : function()
18537     {
18538         var _this = this;
18539         var cmp = function(a,b) {   
18540             return String(a).toUpperCase() > String(b).toUpperCase() ? 1 : -1;
18541         };
18542         if ((!this.topModule || !this.topModule.modules) && !this.elmodules.length) {
18543             throw "No top level modules to build";
18544         }
18545         
18546         // make a flat list in order of modules to build.
18547         var mods = this.topModule ? [ this.topModule ] : [];
18548                 
18549         
18550         // elmodules (is a list of DOM based modules )
18551         Roo.each(this.elmodules, function(e) {
18552             mods.push(e);
18553             if (!this.topModule &&
18554                 typeof(e.parent) == 'string' &&
18555                 e.parent.substring(0,1) == '#' &&
18556                 Roo.get(e.parent.substr(1))
18557                ) {
18558                 
18559                 _this.topModule = e;
18560             }
18561             
18562         });
18563
18564         
18565         // add modules to their parents..
18566         var addMod = function(m) {
18567             Roo.debug && Roo.log("build Order: add: " + m.name);
18568                 
18569             mods.push(m);
18570             if (m.modules && !m.disabled) {
18571                 Roo.debug && Roo.log("build Order: " + m.modules.length + " child modules");
18572                 m.modules.keySort('ASC',  cmp );
18573                 Roo.debug && Roo.log("build Order: " + m.modules.length + " child modules (after sort)");
18574     
18575                 m.modules.each(addMod);
18576             } else {
18577                 Roo.debug && Roo.log("build Order: no child modules");
18578             }
18579             // not sure if this is used any more..
18580             if (m.finalize) {
18581                 m.finalize.name = m.name + " (clean up) ";
18582                 mods.push(m.finalize);
18583             }
18584             
18585         }
18586         if (this.topModule && this.topModule.modules) { 
18587             this.topModule.modules.keySort('ASC',  cmp );
18588             this.topModule.modules.each(addMod);
18589         } 
18590         return mods;
18591     },
18592     
18593      /**
18594      * Build the registered modules.
18595      * @param {Object} parent element.
18596      * @param {Function} optional method to call after module has been added.
18597      * 
18598      */ 
18599    
18600     build : function(opts) 
18601     {
18602         
18603         if (typeof(opts) != 'undefined') {
18604             Roo.apply(this,opts);
18605         }
18606         
18607         this.preBuild();
18608         var mods = this.buildOrder();
18609       
18610         //this.allmods = mods;
18611         //Roo.debug && Roo.log(mods);
18612         //return;
18613         if (!mods.length) { // should not happen
18614             throw "NO modules!!!";
18615         }
18616         
18617         
18618         var msg = "Building Interface...";
18619         // flash it up as modal - so we store the mask!?
18620         if (!this.hideProgress && Roo.MessageBox) {
18621             Roo.MessageBox.show({ title: 'loading' });
18622             Roo.MessageBox.show({
18623                title: "Please wait...",
18624                msg: msg,
18625                width:450,
18626                progress:true,
18627                buttons : false,
18628                closable:false,
18629                modal: false
18630               
18631             });
18632         }
18633         var total = mods.length;
18634         
18635         var _this = this;
18636         var progressRun = function() {
18637             if (!mods.length) {
18638                 Roo.debug && Roo.log('hide?');
18639                 if (!this.hideProgress && Roo.MessageBox) {
18640                     Roo.MessageBox.hide();
18641                 }
18642                 Roo.XComponent.build_from_html = false; // reset, so dialogs will be build from javascript
18643                 
18644                 Roo.XComponent.event.fireEvent('buildcomplete', _this.topModule);
18645                 
18646                 // THE END...
18647                 return false;   
18648             }
18649             
18650             var m = mods.shift();
18651             
18652             
18653             Roo.debug && Roo.log(m);
18654             // not sure if this is supported any more.. - modules that are are just function
18655             if (typeof(m) == 'function') { 
18656                 m.call(this);
18657                 return progressRun.defer(10, _this);
18658             } 
18659             
18660             
18661             msg = "Building Interface " + (total  - mods.length) + 
18662                     " of " + total + 
18663                     (m.name ? (' - ' + m.name) : '');
18664                         Roo.debug && Roo.log(msg);
18665             if (!_this.hideProgress &&  Roo.MessageBox) { 
18666                 Roo.MessageBox.updateProgress(  (total  - mods.length)/total, msg  );
18667             }
18668             
18669          
18670             // is the module disabled?
18671             var disabled = (typeof(m.disabled) == 'function') ?
18672                 m.disabled.call(m.module.disabled) : m.disabled;    
18673             
18674             
18675             if (disabled) {
18676                 return progressRun(); // we do not update the display!
18677             }
18678             
18679             // now build 
18680             
18681                         
18682                         
18683             m.render();
18684             // it's 10 on top level, and 1 on others??? why...
18685             return progressRun.defer(10, _this);
18686              
18687         }
18688         progressRun.defer(1, _this);
18689      
18690         
18691         
18692     },
18693     /**
18694      * Overlay a set of modified strings onto a component
18695      * This is dependant on our builder exporting the strings and 'named strings' elements.
18696      * 
18697      * @param {Object} element to overlay on - eg. Pman.Dialog.Login
18698      * @param {Object} associative array of 'named' string and it's new value.
18699      * 
18700      */
18701         overlayStrings : function( component, strings )
18702     {
18703         if (typeof(component['_named_strings']) == 'undefined') {
18704             throw "ERROR: component does not have _named_strings";
18705         }
18706         for ( var k in strings ) {
18707             var md = typeof(component['_named_strings'][k]) == 'undefined' ? false : component['_named_strings'][k];
18708             if (md !== false) {
18709                 component['_strings'][md] = strings[k];
18710             } else {
18711                 Roo.log('could not find named string: ' + k + ' in');
18712                 Roo.log(component);
18713             }
18714             
18715         }
18716         
18717     },
18718     
18719         
18720         /**
18721          * Event Object.
18722          *
18723          *
18724          */
18725         event: false, 
18726     /**
18727          * wrapper for event.on - aliased later..  
18728          * Typically use to register a event handler for register:
18729          *
18730          * eg. Roo.XComponent.on('register', function(comp) { comp.disable = true } );
18731          *
18732          */
18733     on : false
18734    
18735     
18736     
18737 });
18738
18739 Roo.XComponent.event = new Roo.util.Observable({
18740                 events : { 
18741                         /**
18742                          * @event register
18743                          * Fires when an Component is registered,
18744                          * set the disable property on the Component to stop registration.
18745                          * @param {Roo.XComponent} c the component being registerd.
18746                          * 
18747                          */
18748                         'register' : true,
18749             /**
18750                          * @event beforebuild
18751                          * Fires before each Component is built
18752                          * can be used to apply permissions.
18753                          * @param {Roo.XComponent} c the component being registerd.
18754                          * 
18755                          */
18756                         'beforebuild' : true,
18757                         /**
18758                          * @event buildcomplete
18759                          * Fires on the top level element when all elements have been built
18760                          * @param {Roo.XComponent} the top level component.
18761                          */
18762                         'buildcomplete' : true
18763                         
18764                 }
18765 });
18766
18767 Roo.XComponent.on = Roo.XComponent.event.on.createDelegate(Roo.XComponent.event); 
18768  //
18769  /**
18770  * marked - a markdown parser
18771  * Copyright (c) 2011-2014, Christopher Jeffrey. (MIT Licensed)
18772  * https://github.com/chjj/marked
18773  */
18774
18775
18776 /**
18777  *
18778  * Roo.Markdown - is a very crude wrapper around marked..
18779  *
18780  * usage:
18781  * 
18782  * alert( Roo.Markdown.toHtml("Markdown *rocks*.") );
18783  * 
18784  * Note: move the sample code to the bottom of this
18785  * file before uncommenting it.
18786  *
18787  */
18788
18789 Roo.Markdown = {};
18790 Roo.Markdown.toHtml = function(text) {
18791     
18792     var c = new Roo.Markdown.marked.setOptions({
18793             renderer: new Roo.Markdown.marked.Renderer(),
18794             gfm: true,
18795             tables: true,
18796             breaks: false,
18797             pedantic: false,
18798             sanitize: false,
18799             smartLists: true,
18800             smartypants: false
18801           });
18802     // A FEW HACKS!!?
18803     
18804     text = text.replace(/\\\n/g,' ');
18805     return Roo.Markdown.marked(text);
18806 };
18807 //
18808 // converter
18809 //
18810 // Wraps all "globals" so that the only thing
18811 // exposed is makeHtml().
18812 //
18813 (function() {
18814     
18815      /**
18816          * eval:var:escape
18817          * eval:var:unescape
18818          * eval:var:replace
18819          */
18820       
18821     /**
18822      * Helpers
18823      */
18824     
18825     var escape = function (html, encode) {
18826       return html
18827         .replace(!encode ? /&(?!#?\w+;)/g : /&/g, '&amp;')
18828         .replace(/</g, '&lt;')
18829         .replace(/>/g, '&gt;')
18830         .replace(/"/g, '&quot;')
18831         .replace(/'/g, '&#39;');
18832     }
18833     
18834     var unescape = function (html) {
18835         // explicitly match decimal, hex, and named HTML entities 
18836       return html.replace(/&(#(?:\d+)|(?:#x[0-9A-Fa-f]+)|(?:\w+));?/g, function(_, n) {
18837         n = n.toLowerCase();
18838         if (n === 'colon') { return ':'; }
18839         if (n.charAt(0) === '#') {
18840           return n.charAt(1) === 'x'
18841             ? String.fromCharCode(parseInt(n.substring(2), 16))
18842             : String.fromCharCode(+n.substring(1));
18843         }
18844         return '';
18845       });
18846     }
18847     
18848     var replace = function (regex, opt) {
18849       regex = regex.source;
18850       opt = opt || '';
18851       return function self(name, val) {
18852         if (!name) { return new RegExp(regex, opt); }
18853         val = val.source || val;
18854         val = val.replace(/(^|[^\[])\^/g, '$1');
18855         regex = regex.replace(name, val);
18856         return self;
18857       };
18858     }
18859
18860
18861          /**
18862          * eval:var:noop
18863     */
18864     var noop = function () {}
18865     noop.exec = noop;
18866     
18867          /**
18868          * eval:var:merge
18869     */
18870     var merge = function (obj) {
18871       var i = 1
18872         , target
18873         , key;
18874     
18875       for (; i < arguments.length; i++) {
18876         target = arguments[i];
18877         for (key in target) {
18878           if (Object.prototype.hasOwnProperty.call(target, key)) {
18879             obj[key] = target[key];
18880           }
18881         }
18882       }
18883     
18884       return obj;
18885     }
18886     
18887     
18888     /**
18889      * Block-Level Grammar
18890      */
18891     
18892     
18893     
18894     
18895     var block = {
18896       newline: /^\n+/,
18897       code: /^( {4}[^\n]+\n*)+/,
18898       fences: noop,
18899       hr: /^( *[-*_]){3,} *(?:\n+|$)/,
18900       heading: /^ *(#{1,6}) *([^\n]+?) *#* *(?:\n+|$)/,
18901       nptable: noop,
18902       lheading: /^([^\n]+)\n *(=|-){2,} *(?:\n+|$)/,
18903       blockquote: /^( *>[^\n]+(\n(?!def)[^\n]+)*\n*)+/,
18904       list: /^( *)(bull) [\s\S]+?(?:hr|def|\n{2,}(?! )(?!\1bull )\n*|\s*$)/,
18905       html: /^ *(?:comment *(?:\n|\s*$)|closed *(?:\n{2,}|\s*$)|closing *(?:\n{2,}|\s*$))/,
18906       def: /^ *\[([^\]]+)\]: *<?([^\s>]+)>?(?: +["(]([^\n]+)[")])? *(?:\n+|$)/,
18907       table: noop,
18908       paragraph: /^((?:[^\n]+\n?(?!hr|heading|lheading|blockquote|tag|def))+)\n*/,
18909       text: /^[^\n]+/
18910     };
18911     
18912     block.bullet = /(?:[*+-]|\d+\.)/;
18913     block.item = /^( *)(bull) [^\n]*(?:\n(?!\1bull )[^\n]*)*/;
18914     block.item = replace(block.item, 'gm')
18915       (/bull/g, block.bullet)
18916       ();
18917     
18918     block.list = replace(block.list)
18919       (/bull/g, block.bullet)
18920       ('hr', '\\n+(?=\\1?(?:[-*_] *){3,}(?:\\n+|$))')
18921       ('def', '\\n+(?=' + block.def.source + ')')
18922       ();
18923     
18924     block.blockquote = replace(block.blockquote)
18925       ('def', block.def)
18926       ();
18927     
18928     block._tag = '(?!(?:'
18929       + 'a|em|strong|small|s|cite|q|dfn|abbr|data|time|code'
18930       + '|var|samp|kbd|sub|sup|i|b|u|mark|ruby|rt|rp|bdi|bdo'
18931       + '|span|br|wbr|ins|del|img)\\b)\\w+(?!:/|[^\\w\\s@]*@)\\b';
18932     
18933     block.html = replace(block.html)
18934       ('comment', /<!--[\s\S]*?-->/)
18935       ('closed', /<(tag)[\s\S]+?<\/\1>/)
18936       ('closing', /<tag(?:"[^"]*"|'[^']*'|[^'">])*?>/)
18937       (/tag/g, block._tag)
18938       ();
18939     
18940     block.paragraph = replace(block.paragraph)
18941       ('hr', block.hr)
18942       ('heading', block.heading)
18943       ('lheading', block.lheading)
18944       ('blockquote', block.blockquote)
18945       ('tag', '<' + block._tag)
18946       ('def', block.def)
18947       ();
18948     
18949     /**
18950      * Normal Block Grammar
18951      */
18952     
18953     block.normal = merge({}, block);
18954     
18955     /**
18956      * GFM Block Grammar
18957      */
18958     
18959     block.gfm = merge({}, block.normal, {
18960       fences: /^ *(`{3,}|~{3,})[ \.]*(\S+)? *\n([\s\S]*?)\s*\1 *(?:\n+|$)/,
18961       paragraph: /^/,
18962       heading: /^ *(#{1,6}) +([^\n]+?) *#* *(?:\n+|$)/
18963     });
18964     
18965     block.gfm.paragraph = replace(block.paragraph)
18966       ('(?!', '(?!'
18967         + block.gfm.fences.source.replace('\\1', '\\2') + '|'
18968         + block.list.source.replace('\\1', '\\3') + '|')
18969       ();
18970     
18971     /**
18972      * GFM + Tables Block Grammar
18973      */
18974     
18975     block.tables = merge({}, block.gfm, {
18976       nptable: /^ *(\S.*\|.*)\n *([-:]+ *\|[-| :]*)\n((?:.*\|.*(?:\n|$))*)\n*/,
18977       table: /^ *\|(.+)\n *\|( *[-:]+[-| :]*)\n((?: *\|.*(?:\n|$))*)\n*/
18978     });
18979     
18980     /**
18981      * Block Lexer
18982      */
18983     
18984     var Lexer = function (options) {
18985       this.tokens = [];
18986       this.tokens.links = {};
18987       this.options = options || marked.defaults;
18988       this.rules = block.normal;
18989     
18990       if (this.options.gfm) {
18991         if (this.options.tables) {
18992           this.rules = block.tables;
18993         } else {
18994           this.rules = block.gfm;
18995         }
18996       }
18997     }
18998     
18999     /**
19000      * Expose Block Rules
19001      */
19002     
19003     Lexer.rules = block;
19004     
19005     /**
19006      * Static Lex Method
19007      */
19008     
19009     Lexer.lex = function(src, options) {
19010       var lexer = new Lexer(options);
19011       return lexer.lex(src);
19012     };
19013     
19014     /**
19015      * Preprocessing
19016      */
19017     
19018     Lexer.prototype.lex = function(src) {
19019       src = src
19020         .replace(/\r\n|\r/g, '\n')
19021         .replace(/\t/g, '    ')
19022         .replace(/\u00a0/g, ' ')
19023         .replace(/\u2424/g, '\n');
19024     
19025       return this.token(src, true);
19026     };
19027     
19028     /**
19029      * Lexing
19030      */
19031     
19032     Lexer.prototype.token = function(src, top, bq) {
19033       var src = src.replace(/^ +$/gm, '')
19034         , next
19035         , loose
19036         , cap
19037         , bull
19038         , b
19039         , item
19040         , space
19041         , i
19042         , l;
19043     
19044       while (src) {
19045         // newline
19046         if (cap = this.rules.newline.exec(src)) {
19047           src = src.substring(cap[0].length);
19048           if (cap[0].length > 1) {
19049             this.tokens.push({
19050               type: 'space'
19051             });
19052           }
19053         }
19054     
19055         // code
19056         if (cap = this.rules.code.exec(src)) {
19057           src = src.substring(cap[0].length);
19058           cap = cap[0].replace(/^ {4}/gm, '');
19059           this.tokens.push({
19060             type: 'code',
19061             text: !this.options.pedantic
19062               ? cap.replace(/\n+$/, '')
19063               : cap
19064           });
19065           continue;
19066         }
19067     
19068         // fences (gfm)
19069         if (cap = this.rules.fences.exec(src)) {
19070           src = src.substring(cap[0].length);
19071           this.tokens.push({
19072             type: 'code',
19073             lang: cap[2],
19074             text: cap[3] || ''
19075           });
19076           continue;
19077         }
19078     
19079         // heading
19080         if (cap = this.rules.heading.exec(src)) {
19081           src = src.substring(cap[0].length);
19082           this.tokens.push({
19083             type: 'heading',
19084             depth: cap[1].length,
19085             text: cap[2]
19086           });
19087           continue;
19088         }
19089     
19090         // table no leading pipe (gfm)
19091         if (top && (cap = this.rules.nptable.exec(src))) {
19092           src = src.substring(cap[0].length);
19093     
19094           item = {
19095             type: 'table',
19096             header: cap[1].replace(/^ *| *\| *$/g, '').split(/ *\| */),
19097             align: cap[2].replace(/^ *|\| *$/g, '').split(/ *\| */),
19098             cells: cap[3].replace(/\n$/, '').split('\n')
19099           };
19100     
19101           for (i = 0; i < item.align.length; i++) {
19102             if (/^ *-+: *$/.test(item.align[i])) {
19103               item.align[i] = 'right';
19104             } else if (/^ *:-+: *$/.test(item.align[i])) {
19105               item.align[i] = 'center';
19106             } else if (/^ *:-+ *$/.test(item.align[i])) {
19107               item.align[i] = 'left';
19108             } else {
19109               item.align[i] = null;
19110             }
19111           }
19112     
19113           for (i = 0; i < item.cells.length; i++) {
19114             item.cells[i] = item.cells[i].split(/ *\| */);
19115           }
19116     
19117           this.tokens.push(item);
19118     
19119           continue;
19120         }
19121     
19122         // lheading
19123         if (cap = this.rules.lheading.exec(src)) {
19124           src = src.substring(cap[0].length);
19125           this.tokens.push({
19126             type: 'heading',
19127             depth: cap[2] === '=' ? 1 : 2,
19128             text: cap[1]
19129           });
19130           continue;
19131         }
19132     
19133         // hr
19134         if (cap = this.rules.hr.exec(src)) {
19135           src = src.substring(cap[0].length);
19136           this.tokens.push({
19137             type: 'hr'
19138           });
19139           continue;
19140         }
19141     
19142         // blockquote
19143         if (cap = this.rules.blockquote.exec(src)) {
19144           src = src.substring(cap[0].length);
19145     
19146           this.tokens.push({
19147             type: 'blockquote_start'
19148           });
19149     
19150           cap = cap[0].replace(/^ *> ?/gm, '');
19151     
19152           // Pass `top` to keep the current
19153           // "toplevel" state. This is exactly
19154           // how markdown.pl works.
19155           this.token(cap, top, true);
19156     
19157           this.tokens.push({
19158             type: 'blockquote_end'
19159           });
19160     
19161           continue;
19162         }
19163     
19164         // list
19165         if (cap = this.rules.list.exec(src)) {
19166           src = src.substring(cap[0].length);
19167           bull = cap[2];
19168     
19169           this.tokens.push({
19170             type: 'list_start',
19171             ordered: bull.length > 1
19172           });
19173     
19174           // Get each top-level item.
19175           cap = cap[0].match(this.rules.item);
19176     
19177           next = false;
19178           l = cap.length;
19179           i = 0;
19180     
19181           for (; i < l; i++) {
19182             item = cap[i];
19183     
19184             // Remove the list item's bullet
19185             // so it is seen as the next token.
19186             space = item.length;
19187             item = item.replace(/^ *([*+-]|\d+\.) +/, '');
19188     
19189             // Outdent whatever the
19190             // list item contains. Hacky.
19191             if (~item.indexOf('\n ')) {
19192               space -= item.length;
19193               item = !this.options.pedantic
19194                 ? item.replace(new RegExp('^ {1,' + space + '}', 'gm'), '')
19195                 : item.replace(/^ {1,4}/gm, '');
19196             }
19197     
19198             // Determine whether the next list item belongs here.
19199             // Backpedal if it does not belong in this list.
19200             if (this.options.smartLists && i !== l - 1) {
19201               b = block.bullet.exec(cap[i + 1])[0];
19202               if (bull !== b && !(bull.length > 1 && b.length > 1)) {
19203                 src = cap.slice(i + 1).join('\n') + src;
19204                 i = l - 1;
19205               }
19206             }
19207     
19208             // Determine whether item is loose or not.
19209             // Use: /(^|\n)(?! )[^\n]+\n\n(?!\s*$)/
19210             // for discount behavior.
19211             loose = next || /\n\n(?!\s*$)/.test(item);
19212             if (i !== l - 1) {
19213               next = item.charAt(item.length - 1) === '\n';
19214               if (!loose) { loose = next; }
19215             }
19216     
19217             this.tokens.push({
19218               type: loose
19219                 ? 'loose_item_start'
19220                 : 'list_item_start'
19221             });
19222     
19223             // Recurse.
19224             this.token(item, false, bq);
19225     
19226             this.tokens.push({
19227               type: 'list_item_end'
19228             });
19229           }
19230     
19231           this.tokens.push({
19232             type: 'list_end'
19233           });
19234     
19235           continue;
19236         }
19237     
19238         // html
19239         if (cap = this.rules.html.exec(src)) {
19240           src = src.substring(cap[0].length);
19241           this.tokens.push({
19242             type: this.options.sanitize
19243               ? 'paragraph'
19244               : 'html',
19245             pre: !this.options.sanitizer
19246               && (cap[1] === 'pre' || cap[1] === 'script' || cap[1] === 'style'),
19247             text: cap[0]
19248           });
19249           continue;
19250         }
19251     
19252         // def
19253         if ((!bq && top) && (cap = this.rules.def.exec(src))) {
19254           src = src.substring(cap[0].length);
19255           this.tokens.links[cap[1].toLowerCase()] = {
19256             href: cap[2],
19257             title: cap[3]
19258           };
19259           continue;
19260         }
19261     
19262         // table (gfm)
19263         if (top && (cap = this.rules.table.exec(src))) {
19264           src = src.substring(cap[0].length);
19265     
19266           item = {
19267             type: 'table',
19268             header: cap[1].replace(/^ *| *\| *$/g, '').split(/ *\| */),
19269             align: cap[2].replace(/^ *|\| *$/g, '').split(/ *\| */),
19270             cells: cap[3].replace(/(?: *\| *)?\n$/, '').split('\n')
19271           };
19272     
19273           for (i = 0; i < item.align.length; i++) {
19274             if (/^ *-+: *$/.test(item.align[i])) {
19275               item.align[i] = 'right';
19276             } else if (/^ *:-+: *$/.test(item.align[i])) {
19277               item.align[i] = 'center';
19278             } else if (/^ *:-+ *$/.test(item.align[i])) {
19279               item.align[i] = 'left';
19280             } else {
19281               item.align[i] = null;
19282             }
19283           }
19284     
19285           for (i = 0; i < item.cells.length; i++) {
19286             item.cells[i] = item.cells[i]
19287               .replace(/^ *\| *| *\| *$/g, '')
19288               .split(/ *\| */);
19289           }
19290     
19291           this.tokens.push(item);
19292     
19293           continue;
19294         }
19295     
19296         // top-level paragraph
19297         if (top && (cap = this.rules.paragraph.exec(src))) {
19298           src = src.substring(cap[0].length);
19299           this.tokens.push({
19300             type: 'paragraph',
19301             text: cap[1].charAt(cap[1].length - 1) === '\n'
19302               ? cap[1].slice(0, -1)
19303               : cap[1]
19304           });
19305           continue;
19306         }
19307     
19308         // text
19309         if (cap = this.rules.text.exec(src)) {
19310           // Top-level should never reach here.
19311           src = src.substring(cap[0].length);
19312           this.tokens.push({
19313             type: 'text',
19314             text: cap[0]
19315           });
19316           continue;
19317         }
19318     
19319         if (src) {
19320           throw new
19321             Error('Infinite loop on byte: ' + src.charCodeAt(0));
19322         }
19323       }
19324     
19325       return this.tokens;
19326     };
19327     
19328     /**
19329      * Inline-Level Grammar
19330      */
19331     
19332     var inline = {
19333       escape: /^\\([\\`*{}\[\]()#+\-.!_>])/,
19334       autolink: /^<([^ >]+(@|:\/)[^ >]+)>/,
19335       url: noop,
19336       tag: /^<!--[\s\S]*?-->|^<\/?\w+(?:"[^"]*"|'[^']*'|[^'">])*?>/,
19337       link: /^!?\[(inside)\]\(href\)/,
19338       reflink: /^!?\[(inside)\]\s*\[([^\]]*)\]/,
19339       nolink: /^!?\[((?:\[[^\]]*\]|[^\[\]])*)\]/,
19340       strong: /^__([\s\S]+?)__(?!_)|^\*\*([\s\S]+?)\*\*(?!\*)/,
19341       em: /^\b_((?:[^_]|__)+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
19342       code: /^(`+)\s*([\s\S]*?[^`])\s*\1(?!`)/,
19343       br: /^ {2,}\n(?!\s*$)/,
19344       del: noop,
19345       text: /^[\s\S]+?(?=[\\<!\[_*`]| {2,}\n|$)/
19346     };
19347     
19348     inline._inside = /(?:\[[^\]]*\]|[^\[\]]|\](?=[^\[]*\]))*/;
19349     inline._href = /\s*<?([\s\S]*?)>?(?:\s+['"]([\s\S]*?)['"])?\s*/;
19350     
19351     inline.link = replace(inline.link)
19352       ('inside', inline._inside)
19353       ('href', inline._href)
19354       ();
19355     
19356     inline.reflink = replace(inline.reflink)
19357       ('inside', inline._inside)
19358       ();
19359     
19360     /**
19361      * Normal Inline Grammar
19362      */
19363     
19364     inline.normal = merge({}, inline);
19365     
19366     /**
19367      * Pedantic Inline Grammar
19368      */
19369     
19370     inline.pedantic = merge({}, inline.normal, {
19371       strong: /^__(?=\S)([\s\S]*?\S)__(?!_)|^\*\*(?=\S)([\s\S]*?\S)\*\*(?!\*)/,
19372       em: /^_(?=\S)([\s\S]*?\S)_(?!_)|^\*(?=\S)([\s\S]*?\S)\*(?!\*)/
19373     });
19374     
19375     /**
19376      * GFM Inline Grammar
19377      */
19378     
19379     inline.gfm = merge({}, inline.normal, {
19380       escape: replace(inline.escape)('])', '~|])')(),
19381       url: /^(https?:\/\/[^\s<]+[^<.,:;"')\]\s])/,
19382       del: /^~~(?=\S)([\s\S]*?\S)~~/,
19383       text: replace(inline.text)
19384         (']|', '~]|')
19385         ('|', '|https?://|')
19386         ()
19387     });
19388     
19389     /**
19390      * GFM + Line Breaks Inline Grammar
19391      */
19392     
19393     inline.breaks = merge({}, inline.gfm, {
19394       br: replace(inline.br)('{2,}', '*')(),
19395       text: replace(inline.gfm.text)('{2,}', '*')()
19396     });
19397     
19398     /**
19399      * Inline Lexer & Compiler
19400      */
19401     
19402     var InlineLexer  = function (links, options) {
19403       this.options = options || marked.defaults;
19404       this.links = links;
19405       this.rules = inline.normal;
19406       this.renderer = this.options.renderer || new Renderer;
19407       this.renderer.options = this.options;
19408     
19409       if (!this.links) {
19410         throw new
19411           Error('Tokens array requires a `links` property.');
19412       }
19413     
19414       if (this.options.gfm) {
19415         if (this.options.breaks) {
19416           this.rules = inline.breaks;
19417         } else {
19418           this.rules = inline.gfm;
19419         }
19420       } else if (this.options.pedantic) {
19421         this.rules = inline.pedantic;
19422       }
19423     }
19424     
19425     /**
19426      * Expose Inline Rules
19427      */
19428     
19429     InlineLexer.rules = inline;
19430     
19431     /**
19432      * Static Lexing/Compiling Method
19433      */
19434     
19435     InlineLexer.output = function(src, links, options) {
19436       var inline = new InlineLexer(links, options);
19437       return inline.output(src);
19438     };
19439     
19440     /**
19441      * Lexing/Compiling
19442      */
19443     
19444     InlineLexer.prototype.output = function(src) {
19445       var out = ''
19446         , link
19447         , text
19448         , href
19449         , cap;
19450     
19451       while (src) {
19452         // escape
19453         if (cap = this.rules.escape.exec(src)) {
19454           src = src.substring(cap[0].length);
19455           out += cap[1];
19456           continue;
19457         }
19458     
19459         // autolink
19460         if (cap = this.rules.autolink.exec(src)) {
19461           src = src.substring(cap[0].length);
19462           if (cap[2] === '@') {
19463             text = cap[1].charAt(6) === ':'
19464               ? this.mangle(cap[1].substring(7))
19465               : this.mangle(cap[1]);
19466             href = this.mangle('mailto:') + text;
19467           } else {
19468             text = escape(cap[1]);
19469             href = text;
19470           }
19471           out += this.renderer.link(href, null, text);
19472           continue;
19473         }
19474     
19475         // url (gfm)
19476         if (!this.inLink && (cap = this.rules.url.exec(src))) {
19477           src = src.substring(cap[0].length);
19478           text = escape(cap[1]);
19479           href = text;
19480           out += this.renderer.link(href, null, text);
19481           continue;
19482         }
19483     
19484         // tag
19485         if (cap = this.rules.tag.exec(src)) {
19486           if (!this.inLink && /^<a /i.test(cap[0])) {
19487             this.inLink = true;
19488           } else if (this.inLink && /^<\/a>/i.test(cap[0])) {
19489             this.inLink = false;
19490           }
19491           src = src.substring(cap[0].length);
19492           out += this.options.sanitize
19493             ? this.options.sanitizer
19494               ? this.options.sanitizer(cap[0])
19495               : escape(cap[0])
19496             : cap[0];
19497           continue;
19498         }
19499     
19500         // link
19501         if (cap = this.rules.link.exec(src)) {
19502           src = src.substring(cap[0].length);
19503           this.inLink = true;
19504           out += this.outputLink(cap, {
19505             href: cap[2],
19506             title: cap[3]
19507           });
19508           this.inLink = false;
19509           continue;
19510         }
19511     
19512         // reflink, nolink
19513         if ((cap = this.rules.reflink.exec(src))
19514             || (cap = this.rules.nolink.exec(src))) {
19515           src = src.substring(cap[0].length);
19516           link = (cap[2] || cap[1]).replace(/\s+/g, ' ');
19517           link = this.links[link.toLowerCase()];
19518           if (!link || !link.href) {
19519             out += cap[0].charAt(0);
19520             src = cap[0].substring(1) + src;
19521             continue;
19522           }
19523           this.inLink = true;
19524           out += this.outputLink(cap, link);
19525           this.inLink = false;
19526           continue;
19527         }
19528     
19529         // strong
19530         if (cap = this.rules.strong.exec(src)) {
19531           src = src.substring(cap[0].length);
19532           out += this.renderer.strong(this.output(cap[2] || cap[1]));
19533           continue;
19534         }
19535     
19536         // em
19537         if (cap = this.rules.em.exec(src)) {
19538           src = src.substring(cap[0].length);
19539           out += this.renderer.em(this.output(cap[2] || cap[1]));
19540           continue;
19541         }
19542     
19543         // code
19544         if (cap = this.rules.code.exec(src)) {
19545           src = src.substring(cap[0].length);
19546           out += this.renderer.codespan(escape(cap[2], true));
19547           continue;
19548         }
19549     
19550         // br
19551         if (cap = this.rules.br.exec(src)) {
19552           src = src.substring(cap[0].length);
19553           out += this.renderer.br();
19554           continue;
19555         }
19556     
19557         // del (gfm)
19558         if (cap = this.rules.del.exec(src)) {
19559           src = src.substring(cap[0].length);
19560           out += this.renderer.del(this.output(cap[1]));
19561           continue;
19562         }
19563     
19564         // text
19565         if (cap = this.rules.text.exec(src)) {
19566           src = src.substring(cap[0].length);
19567           out += this.renderer.text(escape(this.smartypants(cap[0])));
19568           continue;
19569         }
19570     
19571         if (src) {
19572           throw new
19573             Error('Infinite loop on byte: ' + src.charCodeAt(0));
19574         }
19575       }
19576     
19577       return out;
19578     };
19579     
19580     /**
19581      * Compile Link
19582      */
19583     
19584     InlineLexer.prototype.outputLink = function(cap, link) {
19585       var href = escape(link.href)
19586         , title = link.title ? escape(link.title) : null;
19587     
19588       return cap[0].charAt(0) !== '!'
19589         ? this.renderer.link(href, title, this.output(cap[1]))
19590         : this.renderer.image(href, title, escape(cap[1]));
19591     };
19592     
19593     /**
19594      * Smartypants Transformations
19595      */
19596     
19597     InlineLexer.prototype.smartypants = function(text) {
19598       if (!this.options.smartypants)  { return text; }
19599       return text
19600         // em-dashes
19601         .replace(/---/g, '\u2014')
19602         // en-dashes
19603         .replace(/--/g, '\u2013')
19604         // opening singles
19605         .replace(/(^|[-\u2014/(\[{"\s])'/g, '$1\u2018')
19606         // closing singles & apostrophes
19607         .replace(/'/g, '\u2019')
19608         // opening doubles
19609         .replace(/(^|[-\u2014/(\[{\u2018\s])"/g, '$1\u201c')
19610         // closing doubles
19611         .replace(/"/g, '\u201d')
19612         // ellipses
19613         .replace(/\.{3}/g, '\u2026');
19614     };
19615     
19616     /**
19617      * Mangle Links
19618      */
19619     
19620     InlineLexer.prototype.mangle = function(text) {
19621       if (!this.options.mangle) { return text; }
19622       var out = ''
19623         , l = text.length
19624         , i = 0
19625         , ch;
19626     
19627       for (; i < l; i++) {
19628         ch = text.charCodeAt(i);
19629         if (Math.random() > 0.5) {
19630           ch = 'x' + ch.toString(16);
19631         }
19632         out += '&#' + ch + ';';
19633       }
19634     
19635       return out;
19636     };
19637     
19638     /**
19639      * Renderer
19640      */
19641     
19642      /**
19643          * eval:var:Renderer
19644     */
19645     
19646     var Renderer   = function (options) {
19647       this.options = options || {};
19648     }
19649     
19650     Renderer.prototype.code = function(code, lang, escaped) {
19651       if (this.options.highlight) {
19652         var out = this.options.highlight(code, lang);
19653         if (out != null && out !== code) {
19654           escaped = true;
19655           code = out;
19656         }
19657       } else {
19658             // hack!!! - it's already escapeD?
19659             escaped = true;
19660       }
19661     
19662       if (!lang) {
19663         return '<pre><code>'
19664           + (escaped ? code : escape(code, true))
19665           + '\n</code></pre>';
19666       }
19667     
19668       return '<pre><code class="'
19669         + this.options.langPrefix
19670         + escape(lang, true)
19671         + '">'
19672         + (escaped ? code : escape(code, true))
19673         + '\n</code></pre>\n';
19674     };
19675     
19676     Renderer.prototype.blockquote = function(quote) {
19677       return '<blockquote>\n' + quote + '</blockquote>\n';
19678     };
19679     
19680     Renderer.prototype.html = function(html) {
19681       return html;
19682     };
19683     
19684     Renderer.prototype.heading = function(text, level, raw) {
19685       return '<h'
19686         + level
19687         + ' id="'
19688         + this.options.headerPrefix
19689         + raw.toLowerCase().replace(/[^\w]+/g, '-')
19690         + '">'
19691         + text
19692         + '</h'
19693         + level
19694         + '>\n';
19695     };
19696     
19697     Renderer.prototype.hr = function() {
19698       return this.options.xhtml ? '<hr/>\n' : '<hr>\n';
19699     };
19700     
19701     Renderer.prototype.list = function(body, ordered) {
19702       var type = ordered ? 'ol' : 'ul';
19703       return '<' + type + '>\n' + body + '</' + type + '>\n';
19704     };
19705     
19706     Renderer.prototype.listitem = function(text) {
19707       return '<li>' + text + '</li>\n';
19708     };
19709     
19710     Renderer.prototype.paragraph = function(text) {
19711       return '<p>' + text + '</p>\n';
19712     };
19713     
19714     Renderer.prototype.table = function(header, body) {
19715       return '<table class="table table-striped">\n'
19716         + '<thead>\n'
19717         + header
19718         + '</thead>\n'
19719         + '<tbody>\n'
19720         + body
19721         + '</tbody>\n'
19722         + '</table>\n';
19723     };
19724     
19725     Renderer.prototype.tablerow = function(content) {
19726       return '<tr>\n' + content + '</tr>\n';
19727     };
19728     
19729     Renderer.prototype.tablecell = function(content, flags) {
19730       var type = flags.header ? 'th' : 'td';
19731       var tag = flags.align
19732         ? '<' + type + ' style="text-align:' + flags.align + '">'
19733         : '<' + type + '>';
19734       return tag + content + '</' + type + '>\n';
19735     };
19736     
19737     // span level renderer
19738     Renderer.prototype.strong = function(text) {
19739       return '<strong>' + text + '</strong>';
19740     };
19741     
19742     Renderer.prototype.em = function(text) {
19743       return '<em>' + text + '</em>';
19744     };
19745     
19746     Renderer.prototype.codespan = function(text) {
19747       return '<code>' + text + '</code>';
19748     };
19749     
19750     Renderer.prototype.br = function() {
19751       return this.options.xhtml ? '<br/>' : '<br>';
19752     };
19753     
19754     Renderer.prototype.del = function(text) {
19755       return '<del>' + text + '</del>';
19756     };
19757     
19758     Renderer.prototype.link = function(href, title, text) {
19759       if (this.options.sanitize) {
19760         try {
19761           var prot = decodeURIComponent(unescape(href))
19762             .replace(/[^\w:]/g, '')
19763             .toLowerCase();
19764         } catch (e) {
19765           return '';
19766         }
19767         if (prot.indexOf('javascript:') === 0 || prot.indexOf('vbscript:') === 0) {
19768           return '';
19769         }
19770       }
19771       var out = '<a href="' + href + '"';
19772       if (title) {
19773         out += ' title="' + title + '"';
19774       }
19775       out += '>' + text + '</a>';
19776       return out;
19777     };
19778     
19779     Renderer.prototype.image = function(href, title, text) {
19780       var out = '<img src="' + href + '" alt="' + text + '"';
19781       if (title) {
19782         out += ' title="' + title + '"';
19783       }
19784       out += this.options.xhtml ? '/>' : '>';
19785       return out;
19786     };
19787     
19788     Renderer.prototype.text = function(text) {
19789       return text;
19790     };
19791     
19792     /**
19793      * Parsing & Compiling
19794      */
19795          /**
19796          * eval:var:Parser
19797     */
19798     
19799     var Parser= function (options) {
19800       this.tokens = [];
19801       this.token = null;
19802       this.options = options || marked.defaults;
19803       this.options.renderer = this.options.renderer || new Renderer;
19804       this.renderer = this.options.renderer;
19805       this.renderer.options = this.options;
19806     }
19807     
19808     /**
19809      * Static Parse Method
19810      */
19811     
19812     Parser.parse = function(src, options, renderer) {
19813       var parser = new Parser(options, renderer);
19814       return parser.parse(src);
19815     };
19816     
19817     /**
19818      * Parse Loop
19819      */
19820     
19821     Parser.prototype.parse = function(src) {
19822       this.inline = new InlineLexer(src.links, this.options, this.renderer);
19823       this.tokens = src.reverse();
19824     
19825       var out = '';
19826       while (this.next()) {
19827         out += this.tok();
19828       }
19829     
19830       return out;
19831     };
19832     
19833     /**
19834      * Next Token
19835      */
19836     
19837     Parser.prototype.next = function() {
19838       return this.token = this.tokens.pop();
19839     };
19840     
19841     /**
19842      * Preview Next Token
19843      */
19844     
19845     Parser.prototype.peek = function() {
19846       return this.tokens[this.tokens.length - 1] || 0;
19847     };
19848     
19849     /**
19850      * Parse Text Tokens
19851      */
19852     
19853     Parser.prototype.parseText = function() {
19854       var body = this.token.text;
19855     
19856       while (this.peek().type === 'text') {
19857         body += '\n' + this.next().text;
19858       }
19859     
19860       return this.inline.output(body);
19861     };
19862     
19863     /**
19864      * Parse Current Token
19865      */
19866     
19867     Parser.prototype.tok = function() {
19868       switch (this.token.type) {
19869         case 'space': {
19870           return '';
19871         }
19872         case 'hr': {
19873           return this.renderer.hr();
19874         }
19875         case 'heading': {
19876           return this.renderer.heading(
19877             this.inline.output(this.token.text),
19878             this.token.depth,
19879             this.token.text);
19880         }
19881         case 'code': {
19882           return this.renderer.code(this.token.text,
19883             this.token.lang,
19884             this.token.escaped);
19885         }
19886         case 'table': {
19887           var header = ''
19888             , body = ''
19889             , i
19890             , row
19891             , cell
19892             , flags
19893             , j;
19894     
19895           // header
19896           cell = '';
19897           for (i = 0; i < this.token.header.length; i++) {
19898             flags = { header: true, align: this.token.align[i] };
19899             cell += this.renderer.tablecell(
19900               this.inline.output(this.token.header[i]),
19901               { header: true, align: this.token.align[i] }
19902             );
19903           }
19904           header += this.renderer.tablerow(cell);
19905     
19906           for (i = 0; i < this.token.cells.length; i++) {
19907             row = this.token.cells[i];
19908     
19909             cell = '';
19910             for (j = 0; j < row.length; j++) {
19911               cell += this.renderer.tablecell(
19912                 this.inline.output(row[j]),
19913                 { header: false, align: this.token.align[j] }
19914               );
19915             }
19916     
19917             body += this.renderer.tablerow(cell);
19918           }
19919           return this.renderer.table(header, body);
19920         }
19921         case 'blockquote_start': {
19922           var body = '';
19923     
19924           while (this.next().type !== 'blockquote_end') {
19925             body += this.tok();
19926           }
19927     
19928           return this.renderer.blockquote(body);
19929         }
19930         case 'list_start': {
19931           var body = ''
19932             , ordered = this.token.ordered;
19933     
19934           while (this.next().type !== 'list_end') {
19935             body += this.tok();
19936           }
19937     
19938           return this.renderer.list(body, ordered);
19939         }
19940         case 'list_item_start': {
19941           var body = '';
19942     
19943           while (this.next().type !== 'list_item_end') {
19944             body += this.token.type === 'text'
19945               ? this.parseText()
19946               : this.tok();
19947           }
19948     
19949           return this.renderer.listitem(body);
19950         }
19951         case 'loose_item_start': {
19952           var body = '';
19953     
19954           while (this.next().type !== 'list_item_end') {
19955             body += this.tok();
19956           }
19957     
19958           return this.renderer.listitem(body);
19959         }
19960         case 'html': {
19961           var html = !this.token.pre && !this.options.pedantic
19962             ? this.inline.output(this.token.text)
19963             : this.token.text;
19964           return this.renderer.html(html);
19965         }
19966         case 'paragraph': {
19967           return this.renderer.paragraph(this.inline.output(this.token.text));
19968         }
19969         case 'text': {
19970           return this.renderer.paragraph(this.parseText());
19971         }
19972       }
19973     };
19974   
19975     
19976     /**
19977      * Marked
19978      */
19979          /**
19980          * eval:var:marked
19981     */
19982     var marked = function (src, opt, callback) {
19983       if (callback || typeof opt === 'function') {
19984         if (!callback) {
19985           callback = opt;
19986           opt = null;
19987         }
19988     
19989         opt = merge({}, marked.defaults, opt || {});
19990     
19991         var highlight = opt.highlight
19992           , tokens
19993           , pending
19994           , i = 0;
19995     
19996         try {
19997           tokens = Lexer.lex(src, opt)
19998         } catch (e) {
19999           return callback(e);
20000         }
20001     
20002         pending = tokens.length;
20003          /**
20004          * eval:var:done
20005     */
20006         var done = function(err) {
20007           if (err) {
20008             opt.highlight = highlight;
20009             return callback(err);
20010           }
20011     
20012           var out;
20013     
20014           try {
20015             out = Parser.parse(tokens, opt);
20016           } catch (e) {
20017             err = e;
20018           }
20019     
20020           opt.highlight = highlight;
20021     
20022           return err
20023             ? callback(err)
20024             : callback(null, out);
20025         };
20026     
20027         if (!highlight || highlight.length < 3) {
20028           return done();
20029         }
20030     
20031         delete opt.highlight;
20032     
20033         if (!pending) { return done(); }
20034     
20035         for (; i < tokens.length; i++) {
20036           (function(token) {
20037             if (token.type !== 'code') {
20038               return --pending || done();
20039             }
20040             return highlight(token.text, token.lang, function(err, code) {
20041               if (err) { return done(err); }
20042               if (code == null || code === token.text) {
20043                 return --pending || done();
20044               }
20045               token.text = code;
20046               token.escaped = true;
20047               --pending || done();
20048             });
20049           })(tokens[i]);
20050         }
20051     
20052         return;
20053       }
20054       try {
20055         if (opt) { opt = merge({}, marked.defaults, opt); }
20056         return Parser.parse(Lexer.lex(src, opt), opt);
20057       } catch (e) {
20058         e.message += '\nPlease report this to https://github.com/chjj/marked.';
20059         if ((opt || marked.defaults).silent) {
20060           return '<p>An error occured:</p><pre>'
20061             + escape(e.message + '', true)
20062             + '</pre>';
20063         }
20064         throw e;
20065       }
20066     }
20067     
20068     /**
20069      * Options
20070      */
20071     
20072     marked.options =
20073     marked.setOptions = function(opt) {
20074       merge(marked.defaults, opt);
20075       return marked;
20076     };
20077     
20078     marked.defaults = {
20079       gfm: true,
20080       tables: true,
20081       breaks: false,
20082       pedantic: false,
20083       sanitize: false,
20084       sanitizer: null,
20085       mangle: true,
20086       smartLists: false,
20087       silent: false,
20088       highlight: null,
20089       langPrefix: 'lang-',
20090       smartypants: false,
20091       headerPrefix: '',
20092       renderer: new Renderer,
20093       xhtml: false
20094     };
20095     
20096     /**
20097      * Expose
20098      */
20099     
20100     marked.Parser = Parser;
20101     marked.parser = Parser.parse;
20102     
20103     marked.Renderer = Renderer;
20104     
20105     marked.Lexer = Lexer;
20106     marked.lexer = Lexer.lex;
20107     
20108     marked.InlineLexer = InlineLexer;
20109     marked.inlineLexer = InlineLexer.output;
20110     
20111     marked.parse = marked;
20112     
20113     Roo.Markdown.marked = marked;
20114
20115 })();/*
20116  * Based on:
20117  * Ext JS Library 1.1.1
20118  * Copyright(c) 2006-2007, Ext JS, LLC.
20119  *
20120  * Originally Released Under LGPL - original licence link has changed is not relivant.
20121  *
20122  * Fork - LGPL
20123  * <script type="text/javascript">
20124  */
20125
20126
20127
20128 /*
20129  * These classes are derivatives of the similarly named classes in the YUI Library.
20130  * The original license:
20131  * Copyright (c) 2006, Yahoo! Inc. All rights reserved.
20132  * Code licensed under the BSD License:
20133  * http://developer.yahoo.net/yui/license.txt
20134  */
20135
20136 (function() {
20137
20138 var Event=Roo.EventManager;
20139 var Dom=Roo.lib.Dom;
20140
20141 /**
20142  * @class Roo.dd.DragDrop
20143  * @extends Roo.util.Observable
20144  * Defines the interface and base operation of items that that can be
20145  * dragged or can be drop targets.  It was designed to be extended, overriding
20146  * the event handlers for startDrag, onDrag, onDragOver and onDragOut.
20147  * Up to three html elements can be associated with a DragDrop instance:
20148  * <ul>
20149  * <li>linked element: the element that is passed into the constructor.
20150  * This is the element which defines the boundaries for interaction with
20151  * other DragDrop objects.</li>
20152  * <li>handle element(s): The drag operation only occurs if the element that
20153  * was clicked matches a handle element.  By default this is the linked
20154  * element, but there are times that you will want only a portion of the
20155  * linked element to initiate the drag operation, and the setHandleElId()
20156  * method provides a way to define this.</li>
20157  * <li>drag element: this represents the element that would be moved along
20158  * with the cursor during a drag operation.  By default, this is the linked
20159  * element itself as in {@link Roo.dd.DD}.  setDragElId() lets you define
20160  * a separate element that would be moved, as in {@link Roo.dd.DDProxy}.
20161  * </li>
20162  * </ul>
20163  * This class should not be instantiated until the onload event to ensure that
20164  * the associated elements are available.
20165  * The following would define a DragDrop obj that would interact with any
20166  * other DragDrop obj in the "group1" group:
20167  * <pre>
20168  *  dd = new Roo.dd.DragDrop("div1", "group1");
20169  * </pre>
20170  * Since none of the event handlers have been implemented, nothing would
20171  * actually happen if you were to run the code above.  Normally you would
20172  * override this class or one of the default implementations, but you can
20173  * also override the methods you want on an instance of the class...
20174  * <pre>
20175  *  dd.onDragDrop = function(e, id) {
20176  *  &nbsp;&nbsp;alert("dd was dropped on " + id);
20177  *  }
20178  * </pre>
20179  * @constructor
20180  * @param {String} id of the element that is linked to this instance
20181  * @param {String} sGroup the group of related DragDrop objects
20182  * @param {object} config an object containing configurable attributes
20183  *                Valid properties for DragDrop:
20184  *                    padding, isTarget, maintainOffset, primaryButtonOnly
20185  */
20186 Roo.dd.DragDrop = function(id, sGroup, config) {
20187     if (id) {
20188         this.init(id, sGroup, config);
20189     }
20190     
20191 };
20192
20193 Roo.extend(Roo.dd.DragDrop, Roo.util.Observable , {
20194
20195     /**
20196      * The id of the element associated with this object.  This is what we
20197      * refer to as the "linked element" because the size and position of
20198      * this element is used to determine when the drag and drop objects have
20199      * interacted.
20200      * @property id
20201      * @type String
20202      */
20203     id: null,
20204
20205     /**
20206      * Configuration attributes passed into the constructor
20207      * @property config
20208      * @type object
20209      */
20210     config: null,
20211
20212     /**
20213      * The id of the element that will be dragged.  By default this is same
20214      * as the linked element , but could be changed to another element. Ex:
20215      * Roo.dd.DDProxy
20216      * @property dragElId
20217      * @type String
20218      * @private
20219      */
20220     dragElId: null,
20221
20222     /**
20223      * the id of the element that initiates the drag operation.  By default
20224      * this is the linked element, but could be changed to be a child of this
20225      * element.  This lets us do things like only starting the drag when the
20226      * header element within the linked html element is clicked.
20227      * @property handleElId
20228      * @type String
20229      * @private
20230      */
20231     handleElId: null,
20232
20233     /**
20234      * An associative array of HTML tags that will be ignored if clicked.
20235      * @property invalidHandleTypes
20236      * @type {string: string}
20237      */
20238     invalidHandleTypes: null,
20239
20240     /**
20241      * An associative array of ids for elements that will be ignored if clicked
20242      * @property invalidHandleIds
20243      * @type {string: string}
20244      */
20245     invalidHandleIds: null,
20246
20247     /**
20248      * An indexted array of css class names for elements that will be ignored
20249      * if clicked.
20250      * @property invalidHandleClasses
20251      * @type string[]
20252      */
20253     invalidHandleClasses: null,
20254
20255     /**
20256      * The linked element's absolute X position at the time the drag was
20257      * started
20258      * @property startPageX
20259      * @type int
20260      * @private
20261      */
20262     startPageX: 0,
20263
20264     /**
20265      * The linked element's absolute X position at the time the drag was
20266      * started
20267      * @property startPageY
20268      * @type int
20269      * @private
20270      */
20271     startPageY: 0,
20272
20273     /**
20274      * The group defines a logical collection of DragDrop objects that are
20275      * related.  Instances only get events when interacting with other
20276      * DragDrop object in the same group.  This lets us define multiple
20277      * groups using a single DragDrop subclass if we want.
20278      * @property groups
20279      * @type {string: string}
20280      */
20281     groups: null,
20282
20283     /**
20284      * Individual drag/drop instances can be locked.  This will prevent
20285      * onmousedown start drag.
20286      * @property locked
20287      * @type boolean
20288      * @private
20289      */
20290     locked: false,
20291
20292     /**
20293      * Lock this instance
20294      * @method lock
20295      */
20296     lock: function() { this.locked = true; },
20297
20298     /**
20299      * Unlock this instace
20300      * @method unlock
20301      */
20302     unlock: function() { this.locked = false; },
20303
20304     /**
20305      * By default, all insances can be a drop target.  This can be disabled by
20306      * setting isTarget to false.
20307      * @method isTarget
20308      * @type boolean
20309      */
20310     isTarget: true,
20311
20312     /**
20313      * The padding configured for this drag and drop object for calculating
20314      * the drop zone intersection with this object.
20315      * @method padding
20316      * @type int[]
20317      */
20318     padding: null,
20319
20320     /**
20321      * Cached reference to the linked element
20322      * @property _domRef
20323      * @private
20324      */
20325     _domRef: null,
20326
20327     /**
20328      * Internal typeof flag
20329      * @property __ygDragDrop
20330      * @private
20331      */
20332     __ygDragDrop: true,
20333
20334     /**
20335      * Set to true when horizontal contraints are applied
20336      * @property constrainX
20337      * @type boolean
20338      * @private
20339      */
20340     constrainX: false,
20341
20342     /**
20343      * Set to true when vertical contraints are applied
20344      * @property constrainY
20345      * @type boolean
20346      * @private
20347      */
20348     constrainY: false,
20349
20350     /**
20351      * The left constraint
20352      * @property minX
20353      * @type int
20354      * @private
20355      */
20356     minX: 0,
20357
20358     /**
20359      * The right constraint
20360      * @property maxX
20361      * @type int
20362      * @private
20363      */
20364     maxX: 0,
20365
20366     /**
20367      * The up constraint
20368      * @property minY
20369      * @type int
20370      * @type int
20371      * @private
20372      */
20373     minY: 0,
20374
20375     /**
20376      * The down constraint
20377      * @property maxY
20378      * @type int
20379      * @private
20380      */
20381     maxY: 0,
20382
20383     /**
20384      * Maintain offsets when we resetconstraints.  Set to true when you want
20385      * the position of the element relative to its parent to stay the same
20386      * when the page changes
20387      *
20388      * @property maintainOffset
20389      * @type boolean
20390      */
20391     maintainOffset: false,
20392
20393     /**
20394      * Array of pixel locations the element will snap to if we specified a
20395      * horizontal graduation/interval.  This array is generated automatically
20396      * when you define a tick interval.
20397      * @property xTicks
20398      * @type int[]
20399      */
20400     xTicks: null,
20401
20402     /**
20403      * Array of pixel locations the element will snap to if we specified a
20404      * vertical graduation/interval.  This array is generated automatically
20405      * when you define a tick interval.
20406      * @property yTicks
20407      * @type int[]
20408      */
20409     yTicks: null,
20410
20411     /**
20412      * By default the drag and drop instance will only respond to the primary
20413      * button click (left button for a right-handed mouse).  Set to true to
20414      * allow drag and drop to start with any mouse click that is propogated
20415      * by the browser
20416      * @property primaryButtonOnly
20417      * @type boolean
20418      */
20419     primaryButtonOnly: true,
20420
20421     /**
20422      * The availabe property is false until the linked dom element is accessible.
20423      * @property available
20424      * @type boolean
20425      */
20426     available: false,
20427
20428     /**
20429      * By default, drags can only be initiated if the mousedown occurs in the
20430      * region the linked element is.  This is done in part to work around a
20431      * bug in some browsers that mis-report the mousedown if the previous
20432      * mouseup happened outside of the window.  This property is set to true
20433      * if outer handles are defined.
20434      *
20435      * @property hasOuterHandles
20436      * @type boolean
20437      * @default false
20438      */
20439     hasOuterHandles: false,
20440
20441     /**
20442      * Code that executes immediately before the startDrag event
20443      * @method b4StartDrag
20444      * @private
20445      */
20446     b4StartDrag: function(x, y) { },
20447
20448     /**
20449      * Abstract method called after a drag/drop object is clicked
20450      * and the drag or mousedown time thresholds have beeen met.
20451      * @method startDrag
20452      * @param {int} X click location
20453      * @param {int} Y click location
20454      */
20455     startDrag: function(x, y) { /* override this */ },
20456
20457     /**
20458      * Code that executes immediately before the onDrag event
20459      * @method b4Drag
20460      * @private
20461      */
20462     b4Drag: function(e) { },
20463
20464     /**
20465      * Abstract method called during the onMouseMove event while dragging an
20466      * object.
20467      * @method onDrag
20468      * @param {Event} e the mousemove event
20469      */
20470     onDrag: function(e) { /* override this */ },
20471
20472     /**
20473      * Abstract method called when this element fist begins hovering over
20474      * another DragDrop obj
20475      * @method onDragEnter
20476      * @param {Event} e the mousemove event
20477      * @param {String|DragDrop[]} id In POINT mode, the element
20478      * id this is hovering over.  In INTERSECT mode, an array of one or more
20479      * dragdrop items being hovered over.
20480      */
20481     onDragEnter: function(e, id) { /* override this */ },
20482
20483     /**
20484      * Code that executes immediately before the onDragOver event
20485      * @method b4DragOver
20486      * @private
20487      */
20488     b4DragOver: function(e) { },
20489
20490     /**
20491      * Abstract method called when this element is hovering over another
20492      * DragDrop obj
20493      * @method onDragOver
20494      * @param {Event} e the mousemove event
20495      * @param {String|DragDrop[]} id In POINT mode, the element
20496      * id this is hovering over.  In INTERSECT mode, an array of dd items
20497      * being hovered over.
20498      */
20499     onDragOver: function(e, id) { /* override this */ },
20500
20501     /**
20502      * Code that executes immediately before the onDragOut event
20503      * @method b4DragOut
20504      * @private
20505      */
20506     b4DragOut: function(e) { },
20507
20508     /**
20509      * Abstract method called when we are no longer hovering over an element
20510      * @method onDragOut
20511      * @param {Event} e the mousemove event
20512      * @param {String|DragDrop[]} id In POINT mode, the element
20513      * id this was hovering over.  In INTERSECT mode, an array of dd items
20514      * that the mouse is no longer over.
20515      */
20516     onDragOut: function(e, id) { /* override this */ },
20517
20518     /**
20519      * Code that executes immediately before the onDragDrop event
20520      * @method b4DragDrop
20521      * @private
20522      */
20523     b4DragDrop: function(e) { },
20524
20525     /**
20526      * Abstract method called when this item is dropped on another DragDrop
20527      * obj
20528      * @method onDragDrop
20529      * @param {Event} e the mouseup event
20530      * @param {String|DragDrop[]} id In POINT mode, the element
20531      * id this was dropped on.  In INTERSECT mode, an array of dd items this
20532      * was dropped on.
20533      */
20534     onDragDrop: function(e, id) { /* override this */ },
20535
20536     /**
20537      * Abstract method called when this item is dropped on an area with no
20538      * drop target
20539      * @method onInvalidDrop
20540      * @param {Event} e the mouseup event
20541      */
20542     onInvalidDrop: function(e) { /* override this */ },
20543
20544     /**
20545      * Code that executes immediately before the endDrag event
20546      * @method b4EndDrag
20547      * @private
20548      */
20549     b4EndDrag: function(e) { },
20550
20551     /**
20552      * Fired when we are done dragging the object
20553      * @method endDrag
20554      * @param {Event} e the mouseup event
20555      */
20556     endDrag: function(e) { /* override this */ },
20557
20558     /**
20559      * Code executed immediately before the onMouseDown event
20560      * @method b4MouseDown
20561      * @param {Event} e the mousedown event
20562      * @private
20563      */
20564     b4MouseDown: function(e) {  },
20565
20566     /**
20567      * Event handler that fires when a drag/drop obj gets a mousedown
20568      * @method onMouseDown
20569      * @param {Event} e the mousedown event
20570      */
20571     onMouseDown: function(e) { /* override this */ },
20572
20573     /**
20574      * Event handler that fires when a drag/drop obj gets a mouseup
20575      * @method onMouseUp
20576      * @param {Event} e the mouseup event
20577      */
20578     onMouseUp: function(e) { /* override this */ },
20579
20580     /**
20581      * Override the onAvailable method to do what is needed after the initial
20582      * position was determined.
20583      * @method onAvailable
20584      */
20585     onAvailable: function () {
20586     },
20587
20588     /*
20589      * Provides default constraint padding to "constrainTo" elements (defaults to {left: 0, right:0, top:0, bottom:0}).
20590      * @type Object
20591      */
20592     defaultPadding : {left:0, right:0, top:0, bottom:0},
20593
20594     /*
20595      * Initializes the drag drop object's constraints to restrict movement to a certain element.
20596  *
20597  * Usage:
20598  <pre><code>
20599  var dd = new Roo.dd.DDProxy("dragDiv1", "proxytest",
20600                 { dragElId: "existingProxyDiv" });
20601  dd.startDrag = function(){
20602      this.constrainTo("parent-id");
20603  };
20604  </code></pre>
20605  * Or you can initalize it using the {@link Roo.Element} object:
20606  <pre><code>
20607  Roo.get("dragDiv1").initDDProxy("proxytest", {dragElId: "existingProxyDiv"}, {
20608      startDrag : function(){
20609          this.constrainTo("parent-id");
20610      }
20611  });
20612  </code></pre>
20613      * @param {String/HTMLElement/Element} constrainTo The element to constrain to.
20614      * @param {Object/Number} pad (optional) Pad provides a way to specify "padding" of the constraints,
20615      * and can be either a number for symmetrical padding (4 would be equal to {left:4, right:4, top:4, bottom:4}) or
20616      * an object containing the sides to pad. For example: {right:10, bottom:10}
20617      * @param {Boolean} inContent (optional) Constrain the draggable in the content box of the element (inside padding and borders)
20618      */
20619     constrainTo : function(constrainTo, pad, inContent){
20620         if(typeof pad == "number"){
20621             pad = {left: pad, right:pad, top:pad, bottom:pad};
20622         }
20623         pad = pad || this.defaultPadding;
20624         var b = Roo.get(this.getEl()).getBox();
20625         var ce = Roo.get(constrainTo);
20626         var s = ce.getScroll();
20627         var c, cd = ce.dom;
20628         if(cd == document.body){
20629             c = { x: s.left, y: s.top, width: Roo.lib.Dom.getViewWidth(), height: Roo.lib.Dom.getViewHeight()};
20630         }else{
20631             xy = ce.getXY();
20632             c = {x : xy[0]+s.left, y: xy[1]+s.top, width: cd.clientWidth, height: cd.clientHeight};
20633         }
20634
20635
20636         var topSpace = b.y - c.y;
20637         var leftSpace = b.x - c.x;
20638
20639         this.resetConstraints();
20640         this.setXConstraint(leftSpace - (pad.left||0), // left
20641                 c.width - leftSpace - b.width - (pad.right||0) //right
20642         );
20643         this.setYConstraint(topSpace - (pad.top||0), //top
20644                 c.height - topSpace - b.height - (pad.bottom||0) //bottom
20645         );
20646     },
20647
20648     /**
20649      * Returns a reference to the linked element
20650      * @method getEl
20651      * @return {HTMLElement} the html element
20652      */
20653     getEl: function() {
20654         if (!this._domRef) {
20655             this._domRef = Roo.getDom(this.id);
20656         }
20657
20658         return this._domRef;
20659     },
20660
20661     /**
20662      * Returns a reference to the actual element to drag.  By default this is
20663      * the same as the html element, but it can be assigned to another
20664      * element. An example of this can be found in Roo.dd.DDProxy
20665      * @method getDragEl
20666      * @return {HTMLElement} the html element
20667      */
20668     getDragEl: function() {
20669         return Roo.getDom(this.dragElId);
20670     },
20671
20672     /**
20673      * Sets up the DragDrop object.  Must be called in the constructor of any
20674      * Roo.dd.DragDrop subclass
20675      * @method init
20676      * @param id the id of the linked element
20677      * @param {String} sGroup the group of related items
20678      * @param {object} config configuration attributes
20679      */
20680     init: function(id, sGroup, config) {
20681         this.initTarget(id, sGroup, config);
20682         if (!Roo.isTouch) {
20683             Event.on(this.id, "mousedown", this.handleMouseDown, this);
20684         }
20685         Event.on(this.id, "touchstart", this.handleMouseDown, this);
20686         // Event.on(this.id, "selectstart", Event.preventDefault);
20687     },
20688
20689     /**
20690      * Initializes Targeting functionality only... the object does not
20691      * get a mousedown handler.
20692      * @method initTarget
20693      * @param id the id of the linked element
20694      * @param {String} sGroup the group of related items
20695      * @param {object} config configuration attributes
20696      */
20697     initTarget: function(id, sGroup, config) {
20698
20699         // configuration attributes
20700         this.config = config || {};
20701
20702         // create a local reference to the drag and drop manager
20703         this.DDM = Roo.dd.DDM;
20704         // initialize the groups array
20705         this.groups = {};
20706
20707         // assume that we have an element reference instead of an id if the
20708         // parameter is not a string
20709         if (typeof id !== "string") {
20710             id = Roo.id(id);
20711         }
20712
20713         // set the id
20714         this.id = id;
20715
20716         // add to an interaction group
20717         this.addToGroup((sGroup) ? sGroup : "default");
20718
20719         // We don't want to register this as the handle with the manager
20720         // so we just set the id rather than calling the setter.
20721         this.handleElId = id;
20722
20723         // the linked element is the element that gets dragged by default
20724         this.setDragElId(id);
20725
20726         // by default, clicked anchors will not start drag operations.
20727         this.invalidHandleTypes = { A: "A" };
20728         this.invalidHandleIds = {};
20729         this.invalidHandleClasses = [];
20730
20731         this.applyConfig();
20732
20733         this.handleOnAvailable();
20734     },
20735
20736     /**
20737      * Applies the configuration parameters that were passed into the constructor.
20738      * This is supposed to happen at each level through the inheritance chain.  So
20739      * a DDProxy implentation will execute apply config on DDProxy, DD, and
20740      * DragDrop in order to get all of the parameters that are available in
20741      * each object.
20742      * @method applyConfig
20743      */
20744     applyConfig: function() {
20745
20746         // configurable properties:
20747         //    padding, isTarget, maintainOffset, primaryButtonOnly
20748         this.padding           = this.config.padding || [0, 0, 0, 0];
20749         this.isTarget          = (this.config.isTarget !== false);
20750         this.maintainOffset    = (this.config.maintainOffset);
20751         this.primaryButtonOnly = (this.config.primaryButtonOnly !== false);
20752
20753     },
20754
20755     /**
20756      * Executed when the linked element is available
20757      * @method handleOnAvailable
20758      * @private
20759      */
20760     handleOnAvailable: function() {
20761         this.available = true;
20762         this.resetConstraints();
20763         this.onAvailable();
20764     },
20765
20766      /**
20767      * Configures the padding for the target zone in px.  Effectively expands
20768      * (or reduces) the virtual object size for targeting calculations.
20769      * Supports css-style shorthand; if only one parameter is passed, all sides
20770      * will have that padding, and if only two are passed, the top and bottom
20771      * will have the first param, the left and right the second.
20772      * @method setPadding
20773      * @param {int} iTop    Top pad
20774      * @param {int} iRight  Right pad
20775      * @param {int} iBot    Bot pad
20776      * @param {int} iLeft   Left pad
20777      */
20778     setPadding: function(iTop, iRight, iBot, iLeft) {
20779         // this.padding = [iLeft, iRight, iTop, iBot];
20780         if (!iRight && 0 !== iRight) {
20781             this.padding = [iTop, iTop, iTop, iTop];
20782         } else if (!iBot && 0 !== iBot) {
20783             this.padding = [iTop, iRight, iTop, iRight];
20784         } else {
20785             this.padding = [iTop, iRight, iBot, iLeft];
20786         }
20787     },
20788
20789     /**
20790      * Stores the initial placement of the linked element.
20791      * @method setInitialPosition
20792      * @param {int} diffX   the X offset, default 0
20793      * @param {int} diffY   the Y offset, default 0
20794      */
20795     setInitPosition: function(diffX, diffY) {
20796         var el = this.getEl();
20797
20798         if (!this.DDM.verifyEl(el)) {
20799             return;
20800         }
20801
20802         var dx = diffX || 0;
20803         var dy = diffY || 0;
20804
20805         var p = Dom.getXY( el );
20806
20807         this.initPageX = p[0] - dx;
20808         this.initPageY = p[1] - dy;
20809
20810         this.lastPageX = p[0];
20811         this.lastPageY = p[1];
20812
20813
20814         this.setStartPosition(p);
20815     },
20816
20817     /**
20818      * Sets the start position of the element.  This is set when the obj
20819      * is initialized, the reset when a drag is started.
20820      * @method setStartPosition
20821      * @param pos current position (from previous lookup)
20822      * @private
20823      */
20824     setStartPosition: function(pos) {
20825         var p = pos || Dom.getXY( this.getEl() );
20826         this.deltaSetXY = null;
20827
20828         this.startPageX = p[0];
20829         this.startPageY = p[1];
20830     },
20831
20832     /**
20833      * Add this instance to a group of related drag/drop objects.  All
20834      * instances belong to at least one group, and can belong to as many
20835      * groups as needed.
20836      * @method addToGroup
20837      * @param sGroup {string} the name of the group
20838      */
20839     addToGroup: function(sGroup) {
20840         this.groups[sGroup] = true;
20841         this.DDM.regDragDrop(this, sGroup);
20842     },
20843
20844     /**
20845      * Remove's this instance from the supplied interaction group
20846      * @method removeFromGroup
20847      * @param {string}  sGroup  The group to drop
20848      */
20849     removeFromGroup: function(sGroup) {
20850         if (this.groups[sGroup]) {
20851             delete this.groups[sGroup];
20852         }
20853
20854         this.DDM.removeDDFromGroup(this, sGroup);
20855     },
20856
20857     /**
20858      * Allows you to specify that an element other than the linked element
20859      * will be moved with the cursor during a drag
20860      * @method setDragElId
20861      * @param id {string} the id of the element that will be used to initiate the drag
20862      */
20863     setDragElId: function(id) {
20864         this.dragElId = id;
20865     },
20866
20867     /**
20868      * Allows you to specify a child of the linked element that should be
20869      * used to initiate the drag operation.  An example of this would be if
20870      * you have a content div with text and links.  Clicking anywhere in the
20871      * content area would normally start the drag operation.  Use this method
20872      * to specify that an element inside of the content div is the element
20873      * that starts the drag operation.
20874      * @method setHandleElId
20875      * @param id {string} the id of the element that will be used to
20876      * initiate the drag.
20877      */
20878     setHandleElId: function(id) {
20879         if (typeof id !== "string") {
20880             id = Roo.id(id);
20881         }
20882         this.handleElId = id;
20883         this.DDM.regHandle(this.id, id);
20884     },
20885
20886     /**
20887      * Allows you to set an element outside of the linked element as a drag
20888      * handle
20889      * @method setOuterHandleElId
20890      * @param id the id of the element that will be used to initiate the drag
20891      */
20892     setOuterHandleElId: function(id) {
20893         if (typeof id !== "string") {
20894             id = Roo.id(id);
20895         }
20896         Event.on(id, "mousedown",
20897                 this.handleMouseDown, this);
20898         this.setHandleElId(id);
20899
20900         this.hasOuterHandles = true;
20901     },
20902
20903     /**
20904      * Remove all drag and drop hooks for this element
20905      * @method unreg
20906      */
20907     unreg: function() {
20908         Event.un(this.id, "mousedown",
20909                 this.handleMouseDown);
20910         Event.un(this.id, "touchstart",
20911                 this.handleMouseDown);
20912         this._domRef = null;
20913         this.DDM._remove(this);
20914     },
20915
20916     destroy : function(){
20917         this.unreg();
20918     },
20919
20920     /**
20921      * Returns true if this instance is locked, or the drag drop mgr is locked
20922      * (meaning that all drag/drop is disabled on the page.)
20923      * @method isLocked
20924      * @return {boolean} true if this obj or all drag/drop is locked, else
20925      * false
20926      */
20927     isLocked: function() {
20928         return (this.DDM.isLocked() || this.locked);
20929     },
20930
20931     /**
20932      * Fired when this object is clicked
20933      * @method handleMouseDown
20934      * @param {Event} e
20935      * @param {Roo.dd.DragDrop} oDD the clicked dd object (this dd obj)
20936      * @private
20937      */
20938     handleMouseDown: function(e, oDD){
20939      
20940         if (!Roo.isTouch && this.primaryButtonOnly && e.button != 0) {
20941             //Roo.log('not touch/ button !=0');
20942             return;
20943         }
20944         if (e.browserEvent.touches && e.browserEvent.touches.length != 1) {
20945             return; // double touch..
20946         }
20947         
20948
20949         if (this.isLocked()) {
20950             //Roo.log('locked');
20951             return;
20952         }
20953
20954         this.DDM.refreshCache(this.groups);
20955 //        Roo.log([Roo.lib.Event.getPageX(e), Roo.lib.Event.getPageY(e)]);
20956         var pt = new Roo.lib.Point(Roo.lib.Event.getPageX(e), Roo.lib.Event.getPageY(e));
20957         if (!this.hasOuterHandles && !this.DDM.isOverTarget(pt, this) )  {
20958             //Roo.log('no outer handes or not over target');
20959                 // do nothing.
20960         } else {
20961 //            Roo.log('check validator');
20962             if (this.clickValidator(e)) {
20963 //                Roo.log('validate success');
20964                 // set the initial element position
20965                 this.setStartPosition();
20966
20967
20968                 this.b4MouseDown(e);
20969                 this.onMouseDown(e);
20970
20971                 this.DDM.handleMouseDown(e, this);
20972
20973                 this.DDM.stopEvent(e);
20974             } else {
20975
20976
20977             }
20978         }
20979     },
20980
20981     clickValidator: function(e) {
20982         var target = e.getTarget();
20983         return ( this.isValidHandleChild(target) &&
20984                     (this.id == this.handleElId ||
20985                         this.DDM.handleWasClicked(target, this.id)) );
20986     },
20987
20988     /**
20989      * Allows you to specify a tag name that should not start a drag operation
20990      * when clicked.  This is designed to facilitate embedding links within a
20991      * drag handle that do something other than start the drag.
20992      * @method addInvalidHandleType
20993      * @param {string} tagName the type of element to exclude
20994      */
20995     addInvalidHandleType: function(tagName) {
20996         var type = tagName.toUpperCase();
20997         this.invalidHandleTypes[type] = type;
20998     },
20999
21000     /**
21001      * Lets you to specify an element id for a child of a drag handle
21002      * that should not initiate a drag
21003      * @method addInvalidHandleId
21004      * @param {string} id the element id of the element you wish to ignore
21005      */
21006     addInvalidHandleId: function(id) {
21007         if (typeof id !== "string") {
21008             id = Roo.id(id);
21009         }
21010         this.invalidHandleIds[id] = id;
21011     },
21012
21013     /**
21014      * Lets you specify a css class of elements that will not initiate a drag
21015      * @method addInvalidHandleClass
21016      * @param {string} cssClass the class of the elements you wish to ignore
21017      */
21018     addInvalidHandleClass: function(cssClass) {
21019         this.invalidHandleClasses.push(cssClass);
21020     },
21021
21022     /**
21023      * Unsets an excluded tag name set by addInvalidHandleType
21024      * @method removeInvalidHandleType
21025      * @param {string} tagName the type of element to unexclude
21026      */
21027     removeInvalidHandleType: function(tagName) {
21028         var type = tagName.toUpperCase();
21029         // this.invalidHandleTypes[type] = null;
21030         delete this.invalidHandleTypes[type];
21031     },
21032
21033     /**
21034      * Unsets an invalid handle id
21035      * @method removeInvalidHandleId
21036      * @param {string} id the id of the element to re-enable
21037      */
21038     removeInvalidHandleId: function(id) {
21039         if (typeof id !== "string") {
21040             id = Roo.id(id);
21041         }
21042         delete this.invalidHandleIds[id];
21043     },
21044
21045     /**
21046      * Unsets an invalid css class
21047      * @method removeInvalidHandleClass
21048      * @param {string} cssClass the class of the element(s) you wish to
21049      * re-enable
21050      */
21051     removeInvalidHandleClass: function(cssClass) {
21052         for (var i=0, len=this.invalidHandleClasses.length; i<len; ++i) {
21053             if (this.invalidHandleClasses[i] == cssClass) {
21054                 delete this.invalidHandleClasses[i];
21055             }
21056         }
21057     },
21058
21059     /**
21060      * Checks the tag exclusion list to see if this click should be ignored
21061      * @method isValidHandleChild
21062      * @param {HTMLElement} node the HTMLElement to evaluate
21063      * @return {boolean} true if this is a valid tag type, false if not
21064      */
21065     isValidHandleChild: function(node) {
21066
21067         var valid = true;
21068         // var n = (node.nodeName == "#text") ? node.parentNode : node;
21069         var nodeName;
21070         try {
21071             nodeName = node.nodeName.toUpperCase();
21072         } catch(e) {
21073             nodeName = node.nodeName;
21074         }
21075         valid = valid && !this.invalidHandleTypes[nodeName];
21076         valid = valid && !this.invalidHandleIds[node.id];
21077
21078         for (var i=0, len=this.invalidHandleClasses.length; valid && i<len; ++i) {
21079             valid = !Dom.hasClass(node, this.invalidHandleClasses[i]);
21080         }
21081
21082
21083         return valid;
21084
21085     },
21086
21087     /**
21088      * Create the array of horizontal tick marks if an interval was specified
21089      * in setXConstraint().
21090      * @method setXTicks
21091      * @private
21092      */
21093     setXTicks: function(iStartX, iTickSize) {
21094         this.xTicks = [];
21095         this.xTickSize = iTickSize;
21096
21097         var tickMap = {};
21098
21099         for (var i = this.initPageX; i >= this.minX; i = i - iTickSize) {
21100             if (!tickMap[i]) {
21101                 this.xTicks[this.xTicks.length] = i;
21102                 tickMap[i] = true;
21103             }
21104         }
21105
21106         for (i = this.initPageX; i <= this.maxX; i = i + iTickSize) {
21107             if (!tickMap[i]) {
21108                 this.xTicks[this.xTicks.length] = i;
21109                 tickMap[i] = true;
21110             }
21111         }
21112
21113         this.xTicks.sort(this.DDM.numericSort) ;
21114     },
21115
21116     /**
21117      * Create the array of vertical tick marks if an interval was specified in
21118      * setYConstraint().
21119      * @method setYTicks
21120      * @private
21121      */
21122     setYTicks: function(iStartY, iTickSize) {
21123         this.yTicks = [];
21124         this.yTickSize = iTickSize;
21125
21126         var tickMap = {};
21127
21128         for (var i = this.initPageY; i >= this.minY; i = i - iTickSize) {
21129             if (!tickMap[i]) {
21130                 this.yTicks[this.yTicks.length] = i;
21131                 tickMap[i] = true;
21132             }
21133         }
21134
21135         for (i = this.initPageY; i <= this.maxY; i = i + iTickSize) {
21136             if (!tickMap[i]) {
21137                 this.yTicks[this.yTicks.length] = i;
21138                 tickMap[i] = true;
21139             }
21140         }
21141
21142         this.yTicks.sort(this.DDM.numericSort) ;
21143     },
21144
21145     /**
21146      * By default, the element can be dragged any place on the screen.  Use
21147      * this method to limit the horizontal travel of the element.  Pass in
21148      * 0,0 for the parameters if you want to lock the drag to the y axis.
21149      * @method setXConstraint
21150      * @param {int} iLeft the number of pixels the element can move to the left
21151      * @param {int} iRight the number of pixels the element can move to the
21152      * right
21153      * @param {int} iTickSize optional parameter for specifying that the
21154      * element
21155      * should move iTickSize pixels at a time.
21156      */
21157     setXConstraint: function(iLeft, iRight, iTickSize) {
21158         this.leftConstraint = iLeft;
21159         this.rightConstraint = iRight;
21160
21161         this.minX = this.initPageX - iLeft;
21162         this.maxX = this.initPageX + iRight;
21163         if (iTickSize) { this.setXTicks(this.initPageX, iTickSize); }
21164
21165         this.constrainX = true;
21166     },
21167
21168     /**
21169      * Clears any constraints applied to this instance.  Also clears ticks
21170      * since they can't exist independent of a constraint at this time.
21171      * @method clearConstraints
21172      */
21173     clearConstraints: function() {
21174         this.constrainX = false;
21175         this.constrainY = false;
21176         this.clearTicks();
21177     },
21178
21179     /**
21180      * Clears any tick interval defined for this instance
21181      * @method clearTicks
21182      */
21183     clearTicks: function() {
21184         this.xTicks = null;
21185         this.yTicks = null;
21186         this.xTickSize = 0;
21187         this.yTickSize = 0;
21188     },
21189
21190     /**
21191      * By default, the element can be dragged any place on the screen.  Set
21192      * this to limit the vertical travel of the element.  Pass in 0,0 for the
21193      * parameters if you want to lock the drag to the x axis.
21194      * @method setYConstraint
21195      * @param {int} iUp the number of pixels the element can move up
21196      * @param {int} iDown the number of pixels the element can move down
21197      * @param {int} iTickSize optional parameter for specifying that the
21198      * element should move iTickSize pixels at a time.
21199      */
21200     setYConstraint: function(iUp, iDown, iTickSize) {
21201         this.topConstraint = iUp;
21202         this.bottomConstraint = iDown;
21203
21204         this.minY = this.initPageY - iUp;
21205         this.maxY = this.initPageY + iDown;
21206         if (iTickSize) { this.setYTicks(this.initPageY, iTickSize); }
21207
21208         this.constrainY = true;
21209
21210     },
21211
21212     /**
21213      * resetConstraints must be called if you manually reposition a dd element.
21214      * @method resetConstraints
21215      * @param {boolean} maintainOffset
21216      */
21217     resetConstraints: function() {
21218
21219
21220         // Maintain offsets if necessary
21221         if (this.initPageX || this.initPageX === 0) {
21222             // figure out how much this thing has moved
21223             var dx = (this.maintainOffset) ? this.lastPageX - this.initPageX : 0;
21224             var dy = (this.maintainOffset) ? this.lastPageY - this.initPageY : 0;
21225
21226             this.setInitPosition(dx, dy);
21227
21228         // This is the first time we have detected the element's position
21229         } else {
21230             this.setInitPosition();
21231         }
21232
21233         if (this.constrainX) {
21234             this.setXConstraint( this.leftConstraint,
21235                                  this.rightConstraint,
21236                                  this.xTickSize        );
21237         }
21238
21239         if (this.constrainY) {
21240             this.setYConstraint( this.topConstraint,
21241                                  this.bottomConstraint,
21242                                  this.yTickSize         );
21243         }
21244     },
21245
21246     /**
21247      * Normally the drag element is moved pixel by pixel, but we can specify
21248      * that it move a number of pixels at a time.  This method resolves the
21249      * location when we have it set up like this.
21250      * @method getTick
21251      * @param {int} val where we want to place the object
21252      * @param {int[]} tickArray sorted array of valid points
21253      * @return {int} the closest tick
21254      * @private
21255      */
21256     getTick: function(val, tickArray) {
21257
21258         if (!tickArray) {
21259             // If tick interval is not defined, it is effectively 1 pixel,
21260             // so we return the value passed to us.
21261             return val;
21262         } else if (tickArray[0] >= val) {
21263             // The value is lower than the first tick, so we return the first
21264             // tick.
21265             return tickArray[0];
21266         } else {
21267             for (var i=0, len=tickArray.length; i<len; ++i) {
21268                 var next = i + 1;
21269                 if (tickArray[next] && tickArray[next] >= val) {
21270                     var diff1 = val - tickArray[i];
21271                     var diff2 = tickArray[next] - val;
21272                     return (diff2 > diff1) ? tickArray[i] : tickArray[next];
21273                 }
21274             }
21275
21276             // The value is larger than the last tick, so we return the last
21277             // tick.
21278             return tickArray[tickArray.length - 1];
21279         }
21280     },
21281
21282     /**
21283      * toString method
21284      * @method toString
21285      * @return {string} string representation of the dd obj
21286      */
21287     toString: function() {
21288         return ("DragDrop " + this.id);
21289     }
21290
21291 });
21292
21293 })();
21294 /*
21295  * Based on:
21296  * Ext JS Library 1.1.1
21297  * Copyright(c) 2006-2007, Ext JS, LLC.
21298  *
21299  * Originally Released Under LGPL - original licence link has changed is not relivant.
21300  *
21301  * Fork - LGPL
21302  * <script type="text/javascript">
21303  */
21304
21305
21306 /**
21307  * The drag and drop utility provides a framework for building drag and drop
21308  * applications.  In addition to enabling drag and drop for specific elements,
21309  * the drag and drop elements are tracked by the manager class, and the
21310  * interactions between the various elements are tracked during the drag and
21311  * the implementing code is notified about these important moments.
21312  */
21313
21314 // Only load the library once.  Rewriting the manager class would orphan
21315 // existing drag and drop instances.
21316 if (!Roo.dd.DragDropMgr) {
21317
21318 /**
21319  * @class Roo.dd.DragDropMgr
21320  * DragDropMgr is a singleton that tracks the element interaction for
21321  * all DragDrop items in the window.  Generally, you will not call
21322  * this class directly, but it does have helper methods that could
21323  * be useful in your DragDrop implementations.
21324  * @static
21325  */
21326 Roo.dd.DragDropMgr = function() {
21327
21328     var Event = Roo.EventManager;
21329
21330     return {
21331
21332         /**
21333          * Two dimensional Array of registered DragDrop objects.  The first
21334          * dimension is the DragDrop item group, the second the DragDrop
21335          * object.
21336          * @property ids
21337          * @type {string: string}
21338          * @private
21339          * @static
21340          */
21341         ids: {},
21342
21343         /**
21344          * Array of element ids defined as drag handles.  Used to determine
21345          * if the element that generated the mousedown event is actually the
21346          * handle and not the html element itself.
21347          * @property handleIds
21348          * @type {string: string}
21349          * @private
21350          * @static
21351          */
21352         handleIds: {},
21353
21354         /**
21355          * the DragDrop object that is currently being dragged
21356          * @property dragCurrent
21357          * @type DragDrop
21358          * @private
21359          * @static
21360          **/
21361         dragCurrent: null,
21362
21363         /**
21364          * the DragDrop object(s) that are being hovered over
21365          * @property dragOvers
21366          * @type Array
21367          * @private
21368          * @static
21369          */
21370         dragOvers: {},
21371
21372         /**
21373          * the X distance between the cursor and the object being dragged
21374          * @property deltaX
21375          * @type int
21376          * @private
21377          * @static
21378          */
21379         deltaX: 0,
21380
21381         /**
21382          * the Y distance between the cursor and the object being dragged
21383          * @property deltaY
21384          * @type int
21385          * @private
21386          * @static
21387          */
21388         deltaY: 0,
21389
21390         /**
21391          * Flag to determine if we should prevent the default behavior of the
21392          * events we define. By default this is true, but this can be set to
21393          * false if you need the default behavior (not recommended)
21394          * @property preventDefault
21395          * @type boolean
21396          * @static
21397          */
21398         preventDefault: true,
21399
21400         /**
21401          * Flag to determine if we should stop the propagation of the events
21402          * we generate. This is true by default but you may want to set it to
21403          * false if the html element contains other features that require the
21404          * mouse click.
21405          * @property stopPropagation
21406          * @type boolean
21407          * @static
21408          */
21409         stopPropagation: true,
21410
21411         /**
21412          * Internal flag that is set to true when drag and drop has been
21413          * intialized
21414          * @property initialized
21415          * @private
21416          * @static
21417          */
21418         initalized: false,
21419
21420         /**
21421          * All drag and drop can be disabled.
21422          * @property locked
21423          * @private
21424          * @static
21425          */
21426         locked: false,
21427
21428         /**
21429          * Called the first time an element is registered.
21430          * @method init
21431          * @private
21432          * @static
21433          */
21434         init: function() {
21435             this.initialized = true;
21436         },
21437
21438         /**
21439          * In point mode, drag and drop interaction is defined by the
21440          * location of the cursor during the drag/drop
21441          * @property POINT
21442          * @type int
21443          * @static
21444          */
21445         POINT: 0,
21446
21447         /**
21448          * In intersect mode, drag and drop interactio nis defined by the
21449          * overlap of two or more drag and drop objects.
21450          * @property INTERSECT
21451          * @type int
21452          * @static
21453          */
21454         INTERSECT: 1,
21455
21456         /**
21457          * The current drag and drop mode.  Default: POINT
21458          * @property mode
21459          * @type int
21460          * @static
21461          */
21462         mode: 0,
21463
21464         /**
21465          * Runs method on all drag and drop objects
21466          * @method _execOnAll
21467          * @private
21468          * @static
21469          */
21470         _execOnAll: function(sMethod, args) {
21471             for (var i in this.ids) {
21472                 for (var j in this.ids[i]) {
21473                     var oDD = this.ids[i][j];
21474                     if (! this.isTypeOfDD(oDD)) {
21475                         continue;
21476                     }
21477                     oDD[sMethod].apply(oDD, args);
21478                 }
21479             }
21480         },
21481
21482         /**
21483          * Drag and drop initialization.  Sets up the global event handlers
21484          * @method _onLoad
21485          * @private
21486          * @static
21487          */
21488         _onLoad: function() {
21489
21490             this.init();
21491
21492             if (!Roo.isTouch) {
21493                 Event.on(document, "mouseup",   this.handleMouseUp, this, true);
21494                 Event.on(document, "mousemove", this.handleMouseMove, this, true);
21495             }
21496             Event.on(document, "touchend",   this.handleMouseUp, this, true);
21497             Event.on(document, "touchmove", this.handleMouseMove, this, true);
21498             
21499             Event.on(window,   "unload",    this._onUnload, this, true);
21500             Event.on(window,   "resize",    this._onResize, this, true);
21501             // Event.on(window,   "mouseout",    this._test);
21502
21503         },
21504
21505         /**
21506          * Reset constraints on all drag and drop objs
21507          * @method _onResize
21508          * @private
21509          * @static
21510          */
21511         _onResize: function(e) {
21512             this._execOnAll("resetConstraints", []);
21513         },
21514
21515         /**
21516          * Lock all drag and drop functionality
21517          * @method lock
21518          * @static
21519          */
21520         lock: function() { this.locked = true; },
21521
21522         /**
21523          * Unlock all drag and drop functionality
21524          * @method unlock
21525          * @static
21526          */
21527         unlock: function() { this.locked = false; },
21528
21529         /**
21530          * Is drag and drop locked?
21531          * @method isLocked
21532          * @return {boolean} True if drag and drop is locked, false otherwise.
21533          * @static
21534          */
21535         isLocked: function() { return this.locked; },
21536
21537         /**
21538          * Location cache that is set for all drag drop objects when a drag is
21539          * initiated, cleared when the drag is finished.
21540          * @property locationCache
21541          * @private
21542          * @static
21543          */
21544         locationCache: {},
21545
21546         /**
21547          * Set useCache to false if you want to force object the lookup of each
21548          * drag and drop linked element constantly during a drag.
21549          * @property useCache
21550          * @type boolean
21551          * @static
21552          */
21553         useCache: true,
21554
21555         /**
21556          * The number of pixels that the mouse needs to move after the
21557          * mousedown before the drag is initiated.  Default=3;
21558          * @property clickPixelThresh
21559          * @type int
21560          * @static
21561          */
21562         clickPixelThresh: 3,
21563
21564         /**
21565          * The number of milliseconds after the mousedown event to initiate the
21566          * drag if we don't get a mouseup event. Default=1000
21567          * @property clickTimeThresh
21568          * @type int
21569          * @static
21570          */
21571         clickTimeThresh: 350,
21572
21573         /**
21574          * Flag that indicates that either the drag pixel threshold or the
21575          * mousdown time threshold has been met
21576          * @property dragThreshMet
21577          * @type boolean
21578          * @private
21579          * @static
21580          */
21581         dragThreshMet: false,
21582
21583         /**
21584          * Timeout used for the click time threshold
21585          * @property clickTimeout
21586          * @type Object
21587          * @private
21588          * @static
21589          */
21590         clickTimeout: null,
21591
21592         /**
21593          * The X position of the mousedown event stored for later use when a
21594          * drag threshold is met.
21595          * @property startX
21596          * @type int
21597          * @private
21598          * @static
21599          */
21600         startX: 0,
21601
21602         /**
21603          * The Y position of the mousedown event stored for later use when a
21604          * drag threshold is met.
21605          * @property startY
21606          * @type int
21607          * @private
21608          * @static
21609          */
21610         startY: 0,
21611
21612         /**
21613          * Each DragDrop instance must be registered with the DragDropMgr.
21614          * This is executed in DragDrop.init()
21615          * @method regDragDrop
21616          * @param {DragDrop} oDD the DragDrop object to register
21617          * @param {String} sGroup the name of the group this element belongs to
21618          * @static
21619          */
21620         regDragDrop: function(oDD, sGroup) {
21621             if (!this.initialized) { this.init(); }
21622
21623             if (!this.ids[sGroup]) {
21624                 this.ids[sGroup] = {};
21625             }
21626             this.ids[sGroup][oDD.id] = oDD;
21627         },
21628
21629         /**
21630          * Removes the supplied dd instance from the supplied group. Executed
21631          * by DragDrop.removeFromGroup, so don't call this function directly.
21632          * @method removeDDFromGroup
21633          * @private
21634          * @static
21635          */
21636         removeDDFromGroup: function(oDD, sGroup) {
21637             if (!this.ids[sGroup]) {
21638                 this.ids[sGroup] = {};
21639             }
21640
21641             var obj = this.ids[sGroup];
21642             if (obj && obj[oDD.id]) {
21643                 delete obj[oDD.id];
21644             }
21645         },
21646
21647         /**
21648          * Unregisters a drag and drop item.  This is executed in
21649          * DragDrop.unreg, use that method instead of calling this directly.
21650          * @method _remove
21651          * @private
21652          * @static
21653          */
21654         _remove: function(oDD) {
21655             for (var g in oDD.groups) {
21656                 if (g && this.ids[g][oDD.id]) {
21657                     delete this.ids[g][oDD.id];
21658                 }
21659             }
21660             delete this.handleIds[oDD.id];
21661         },
21662
21663         /**
21664          * Each DragDrop handle element must be registered.  This is done
21665          * automatically when executing DragDrop.setHandleElId()
21666          * @method regHandle
21667          * @param {String} sDDId the DragDrop id this element is a handle for
21668          * @param {String} sHandleId the id of the element that is the drag
21669          * handle
21670          * @static
21671          */
21672         regHandle: function(sDDId, sHandleId) {
21673             if (!this.handleIds[sDDId]) {
21674                 this.handleIds[sDDId] = {};
21675             }
21676             this.handleIds[sDDId][sHandleId] = sHandleId;
21677         },
21678
21679         /**
21680          * Utility function to determine if a given element has been
21681          * registered as a drag drop item.
21682          * @method isDragDrop
21683          * @param {String} id the element id to check
21684          * @return {boolean} true if this element is a DragDrop item,
21685          * false otherwise
21686          * @static
21687          */
21688         isDragDrop: function(id) {
21689             return ( this.getDDById(id) ) ? true : false;
21690         },
21691
21692         /**
21693          * Returns the drag and drop instances that are in all groups the
21694          * passed in instance belongs to.
21695          * @method getRelated
21696          * @param {DragDrop} p_oDD the obj to get related data for
21697          * @param {boolean} bTargetsOnly if true, only return targetable objs
21698          * @return {DragDrop[]} the related instances
21699          * @static
21700          */
21701         getRelated: function(p_oDD, bTargetsOnly) {
21702             var oDDs = [];
21703             for (var i in p_oDD.groups) {
21704                 for (j in this.ids[i]) {
21705                     var dd = this.ids[i][j];
21706                     if (! this.isTypeOfDD(dd)) {
21707                         continue;
21708                     }
21709                     if (!bTargetsOnly || dd.isTarget) {
21710                         oDDs[oDDs.length] = dd;
21711                     }
21712                 }
21713             }
21714
21715             return oDDs;
21716         },
21717
21718         /**
21719          * Returns true if the specified dd target is a legal target for
21720          * the specifice drag obj
21721          * @method isLegalTarget
21722          * @param {DragDrop} the drag obj
21723          * @param {DragDrop} the target
21724          * @return {boolean} true if the target is a legal target for the
21725          * dd obj
21726          * @static
21727          */
21728         isLegalTarget: function (oDD, oTargetDD) {
21729             var targets = this.getRelated(oDD, true);
21730             for (var i=0, len=targets.length;i<len;++i) {
21731                 if (targets[i].id == oTargetDD.id) {
21732                     return true;
21733                 }
21734             }
21735
21736             return false;
21737         },
21738
21739         /**
21740          * My goal is to be able to transparently determine if an object is
21741          * typeof DragDrop, and the exact subclass of DragDrop.  typeof
21742          * returns "object", oDD.constructor.toString() always returns
21743          * "DragDrop" and not the name of the subclass.  So for now it just
21744          * evaluates a well-known variable in DragDrop.
21745          * @method isTypeOfDD
21746          * @param {Object} the object to evaluate
21747          * @return {boolean} true if typeof oDD = DragDrop
21748          * @static
21749          */
21750         isTypeOfDD: function (oDD) {
21751             return (oDD && oDD.__ygDragDrop);
21752         },
21753
21754         /**
21755          * Utility function to determine if a given element has been
21756          * registered as a drag drop handle for the given Drag Drop object.
21757          * @method isHandle
21758          * @param {String} id the element id to check
21759          * @return {boolean} true if this element is a DragDrop handle, false
21760          * otherwise
21761          * @static
21762          */
21763         isHandle: function(sDDId, sHandleId) {
21764             return ( this.handleIds[sDDId] &&
21765                             this.handleIds[sDDId][sHandleId] );
21766         },
21767
21768         /**
21769          * Returns the DragDrop instance for a given id
21770          * @method getDDById
21771          * @param {String} id the id of the DragDrop object
21772          * @return {DragDrop} the drag drop object, null if it is not found
21773          * @static
21774          */
21775         getDDById: function(id) {
21776             for (var i in this.ids) {
21777                 if (this.ids[i][id]) {
21778                     return this.ids[i][id];
21779                 }
21780             }
21781             return null;
21782         },
21783
21784         /**
21785          * Fired after a registered DragDrop object gets the mousedown event.
21786          * Sets up the events required to track the object being dragged
21787          * @method handleMouseDown
21788          * @param {Event} e the event
21789          * @param oDD the DragDrop object being dragged
21790          * @private
21791          * @static
21792          */
21793         handleMouseDown: function(e, oDD) {
21794             if(Roo.QuickTips){
21795                 Roo.QuickTips.disable();
21796             }
21797             this.currentTarget = e.getTarget();
21798
21799             this.dragCurrent = oDD;
21800
21801             var el = oDD.getEl();
21802
21803             // track start position
21804             this.startX = e.getPageX();
21805             this.startY = e.getPageY();
21806
21807             this.deltaX = this.startX - el.offsetLeft;
21808             this.deltaY = this.startY - el.offsetTop;
21809
21810             this.dragThreshMet = false;
21811
21812             this.clickTimeout = setTimeout(
21813                     function() {
21814                         var DDM = Roo.dd.DDM;
21815                         DDM.startDrag(DDM.startX, DDM.startY);
21816                     },
21817                     this.clickTimeThresh );
21818         },
21819
21820         /**
21821          * Fired when either the drag pixel threshol or the mousedown hold
21822          * time threshold has been met.
21823          * @method startDrag
21824          * @param x {int} the X position of the original mousedown
21825          * @param y {int} the Y position of the original mousedown
21826          * @static
21827          */
21828         startDrag: function(x, y) {
21829             clearTimeout(this.clickTimeout);
21830             if (this.dragCurrent) {
21831                 this.dragCurrent.b4StartDrag(x, y);
21832                 this.dragCurrent.startDrag(x, y);
21833             }
21834             this.dragThreshMet = true;
21835         },
21836
21837         /**
21838          * Internal function to handle the mouseup event.  Will be invoked
21839          * from the context of the document.
21840          * @method handleMouseUp
21841          * @param {Event} e the event
21842          * @private
21843          * @static
21844          */
21845         handleMouseUp: function(e) {
21846
21847             if(Roo.QuickTips){
21848                 Roo.QuickTips.enable();
21849             }
21850             if (! this.dragCurrent) {
21851                 return;
21852             }
21853
21854             clearTimeout(this.clickTimeout);
21855
21856             if (this.dragThreshMet) {
21857                 this.fireEvents(e, true);
21858             } else {
21859             }
21860
21861             this.stopDrag(e);
21862
21863             this.stopEvent(e);
21864         },
21865
21866         /**
21867          * Utility to stop event propagation and event default, if these
21868          * features are turned on.
21869          * @method stopEvent
21870          * @param {Event} e the event as returned by this.getEvent()
21871          * @static
21872          */
21873         stopEvent: function(e){
21874             if(this.stopPropagation) {
21875                 e.stopPropagation();
21876             }
21877
21878             if (this.preventDefault) {
21879                 e.preventDefault();
21880             }
21881         },
21882
21883         /**
21884          * Internal function to clean up event handlers after the drag
21885          * operation is complete
21886          * @method stopDrag
21887          * @param {Event} e the event
21888          * @private
21889          * @static
21890          */
21891         stopDrag: function(e) {
21892             // Fire the drag end event for the item that was dragged
21893             if (this.dragCurrent) {
21894                 if (this.dragThreshMet) {
21895                     this.dragCurrent.b4EndDrag(e);
21896                     this.dragCurrent.endDrag(e);
21897                 }
21898
21899                 this.dragCurrent.onMouseUp(e);
21900             }
21901
21902             this.dragCurrent = null;
21903             this.dragOvers = {};
21904         },
21905
21906         /**
21907          * Internal function to handle the mousemove event.  Will be invoked
21908          * from the context of the html element.
21909          *
21910          * @TODO figure out what we can do about mouse events lost when the
21911          * user drags objects beyond the window boundary.  Currently we can
21912          * detect this in internet explorer by verifying that the mouse is
21913          * down during the mousemove event.  Firefox doesn't give us the
21914          * button state on the mousemove event.
21915          * @method handleMouseMove
21916          * @param {Event} e the event
21917          * @private
21918          * @static
21919          */
21920         handleMouseMove: function(e) {
21921             if (! this.dragCurrent) {
21922                 return true;
21923             }
21924
21925             // var button = e.which || e.button;
21926
21927             // check for IE mouseup outside of page boundary
21928             if (Roo.isIE && (e.button !== 0 && e.button !== 1 && e.button !== 2)) {
21929                 this.stopEvent(e);
21930                 return this.handleMouseUp(e);
21931             }
21932
21933             if (!this.dragThreshMet) {
21934                 var diffX = Math.abs(this.startX - e.getPageX());
21935                 var diffY = Math.abs(this.startY - e.getPageY());
21936                 if (diffX > this.clickPixelThresh ||
21937                             diffY > this.clickPixelThresh) {
21938                     this.startDrag(this.startX, this.startY);
21939                 }
21940             }
21941
21942             if (this.dragThreshMet) {
21943                 this.dragCurrent.b4Drag(e);
21944                 this.dragCurrent.onDrag(e);
21945                 if(!this.dragCurrent.moveOnly){
21946                     this.fireEvents(e, false);
21947                 }
21948             }
21949
21950             this.stopEvent(e);
21951
21952             return true;
21953         },
21954
21955         /**
21956          * Iterates over all of the DragDrop elements to find ones we are
21957          * hovering over or dropping on
21958          * @method fireEvents
21959          * @param {Event} e the event
21960          * @param {boolean} isDrop is this a drop op or a mouseover op?
21961          * @private
21962          * @static
21963          */
21964         fireEvents: function(e, isDrop) {
21965             var dc = this.dragCurrent;
21966
21967             // If the user did the mouse up outside of the window, we could
21968             // get here even though we have ended the drag.
21969             if (!dc || dc.isLocked()) {
21970                 return;
21971             }
21972
21973             var pt = e.getPoint();
21974
21975             // cache the previous dragOver array
21976             var oldOvers = [];
21977
21978             var outEvts   = [];
21979             var overEvts  = [];
21980             var dropEvts  = [];
21981             var enterEvts = [];
21982
21983             // Check to see if the object(s) we were hovering over is no longer
21984             // being hovered over so we can fire the onDragOut event
21985             for (var i in this.dragOvers) {
21986
21987                 var ddo = this.dragOvers[i];
21988
21989                 if (! this.isTypeOfDD(ddo)) {
21990                     continue;
21991                 }
21992
21993                 if (! this.isOverTarget(pt, ddo, this.mode)) {
21994                     outEvts.push( ddo );
21995                 }
21996
21997                 oldOvers[i] = true;
21998                 delete this.dragOvers[i];
21999             }
22000
22001             for (var sGroup in dc.groups) {
22002
22003                 if ("string" != typeof sGroup) {
22004                     continue;
22005                 }
22006
22007                 for (i in this.ids[sGroup]) {
22008                     var oDD = this.ids[sGroup][i];
22009                     if (! this.isTypeOfDD(oDD)) {
22010                         continue;
22011                     }
22012
22013                     if (oDD.isTarget && !oDD.isLocked() && oDD != dc) {
22014                         if (this.isOverTarget(pt, oDD, this.mode)) {
22015                             // look for drop interactions
22016                             if (isDrop) {
22017                                 dropEvts.push( oDD );
22018                             // look for drag enter and drag over interactions
22019                             } else {
22020
22021                                 // initial drag over: dragEnter fires
22022                                 if (!oldOvers[oDD.id]) {
22023                                     enterEvts.push( oDD );
22024                                 // subsequent drag overs: dragOver fires
22025                                 } else {
22026                                     overEvts.push( oDD );
22027                                 }
22028
22029                                 this.dragOvers[oDD.id] = oDD;
22030                             }
22031                         }
22032                     }
22033                 }
22034             }
22035
22036             if (this.mode) {
22037                 if (outEvts.length) {
22038                     dc.b4DragOut(e, outEvts);
22039                     dc.onDragOut(e, outEvts);
22040                 }
22041
22042                 if (enterEvts.length) {
22043                     dc.onDragEnter(e, enterEvts);
22044                 }
22045
22046                 if (overEvts.length) {
22047                     dc.b4DragOver(e, overEvts);
22048                     dc.onDragOver(e, overEvts);
22049                 }
22050
22051                 if (dropEvts.length) {
22052                     dc.b4DragDrop(e, dropEvts);
22053                     dc.onDragDrop(e, dropEvts);
22054                 }
22055
22056             } else {
22057                 // fire dragout events
22058                 var len = 0;
22059                 for (i=0, len=outEvts.length; i<len; ++i) {
22060                     dc.b4DragOut(e, outEvts[i].id);
22061                     dc.onDragOut(e, outEvts[i].id);
22062                 }
22063
22064                 // fire enter events
22065                 for (i=0,len=enterEvts.length; i<len; ++i) {
22066                     // dc.b4DragEnter(e, oDD.id);
22067                     dc.onDragEnter(e, enterEvts[i].id);
22068                 }
22069
22070                 // fire over events
22071                 for (i=0,len=overEvts.length; i<len; ++i) {
22072                     dc.b4DragOver(e, overEvts[i].id);
22073                     dc.onDragOver(e, overEvts[i].id);
22074                 }
22075
22076                 // fire drop events
22077                 for (i=0, len=dropEvts.length; i<len; ++i) {
22078                     dc.b4DragDrop(e, dropEvts[i].id);
22079                     dc.onDragDrop(e, dropEvts[i].id);
22080                 }
22081
22082             }
22083
22084             // notify about a drop that did not find a target
22085             if (isDrop && !dropEvts.length) {
22086                 dc.onInvalidDrop(e);
22087             }
22088
22089         },
22090
22091         /**
22092          * Helper function for getting the best match from the list of drag
22093          * and drop objects returned by the drag and drop events when we are
22094          * in INTERSECT mode.  It returns either the first object that the
22095          * cursor is over, or the object that has the greatest overlap with
22096          * the dragged element.
22097          * @method getBestMatch
22098          * @param  {DragDrop[]} dds The array of drag and drop objects
22099          * targeted
22100          * @return {DragDrop}       The best single match
22101          * @static
22102          */
22103         getBestMatch: function(dds) {
22104             var winner = null;
22105             // Return null if the input is not what we expect
22106             //if (!dds || !dds.length || dds.length == 0) {
22107                // winner = null;
22108             // If there is only one item, it wins
22109             //} else if (dds.length == 1) {
22110
22111             var len = dds.length;
22112
22113             if (len == 1) {
22114                 winner = dds[0];
22115             } else {
22116                 // Loop through the targeted items
22117                 for (var i=0; i<len; ++i) {
22118                     var dd = dds[i];
22119                     // If the cursor is over the object, it wins.  If the
22120                     // cursor is over multiple matches, the first one we come
22121                     // to wins.
22122                     if (dd.cursorIsOver) {
22123                         winner = dd;
22124                         break;
22125                     // Otherwise the object with the most overlap wins
22126                     } else {
22127                         if (!winner ||
22128                             winner.overlap.getArea() < dd.overlap.getArea()) {
22129                             winner = dd;
22130                         }
22131                     }
22132                 }
22133             }
22134
22135             return winner;
22136         },
22137
22138         /**
22139          * Refreshes the cache of the top-left and bottom-right points of the
22140          * drag and drop objects in the specified group(s).  This is in the
22141          * format that is stored in the drag and drop instance, so typical
22142          * usage is:
22143          * <code>
22144          * Roo.dd.DragDropMgr.refreshCache(ddinstance.groups);
22145          * </code>
22146          * Alternatively:
22147          * <code>
22148          * Roo.dd.DragDropMgr.refreshCache({group1:true, group2:true});
22149          * </code>
22150          * @TODO this really should be an indexed array.  Alternatively this
22151          * method could accept both.
22152          * @method refreshCache
22153          * @param {Object} groups an associative array of groups to refresh
22154          * @static
22155          */
22156         refreshCache: function(groups) {
22157             for (var sGroup in groups) {
22158                 if ("string" != typeof sGroup) {
22159                     continue;
22160                 }
22161                 for (var i in this.ids[sGroup]) {
22162                     var oDD = this.ids[sGroup][i];
22163
22164                     if (this.isTypeOfDD(oDD)) {
22165                     // if (this.isTypeOfDD(oDD) && oDD.isTarget) {
22166                         var loc = this.getLocation(oDD);
22167                         if (loc) {
22168                             this.locationCache[oDD.id] = loc;
22169                         } else {
22170                             delete this.locationCache[oDD.id];
22171                             // this will unregister the drag and drop object if
22172                             // the element is not in a usable state
22173                             // oDD.unreg();
22174                         }
22175                     }
22176                 }
22177             }
22178         },
22179
22180         /**
22181          * This checks to make sure an element exists and is in the DOM.  The
22182          * main purpose is to handle cases where innerHTML is used to remove
22183          * drag and drop objects from the DOM.  IE provides an 'unspecified
22184          * error' when trying to access the offsetParent of such an element
22185          * @method verifyEl
22186          * @param {HTMLElement} el the element to check
22187          * @return {boolean} true if the element looks usable
22188          * @static
22189          */
22190         verifyEl: function(el) {
22191             if (el) {
22192                 var parent;
22193                 if(Roo.isIE){
22194                     try{
22195                         parent = el.offsetParent;
22196                     }catch(e){}
22197                 }else{
22198                     parent = el.offsetParent;
22199                 }
22200                 if (parent) {
22201                     return true;
22202                 }
22203             }
22204
22205             return false;
22206         },
22207
22208         /**
22209          * Returns a Region object containing the drag and drop element's position
22210          * and size, including the padding configured for it
22211          * @method getLocation
22212          * @param {DragDrop} oDD the drag and drop object to get the
22213          *                       location for
22214          * @return {Roo.lib.Region} a Region object representing the total area
22215          *                             the element occupies, including any padding
22216          *                             the instance is configured for.
22217          * @static
22218          */
22219         getLocation: function(oDD) {
22220             if (! this.isTypeOfDD(oDD)) {
22221                 return null;
22222             }
22223
22224             var el = oDD.getEl(), pos, x1, x2, y1, y2, t, r, b, l;
22225
22226             try {
22227                 pos= Roo.lib.Dom.getXY(el);
22228             } catch (e) { }
22229
22230             if (!pos) {
22231                 return null;
22232             }
22233
22234             x1 = pos[0];
22235             x2 = x1 + el.offsetWidth;
22236             y1 = pos[1];
22237             y2 = y1 + el.offsetHeight;
22238
22239             t = y1 - oDD.padding[0];
22240             r = x2 + oDD.padding[1];
22241             b = y2 + oDD.padding[2];
22242             l = x1 - oDD.padding[3];
22243
22244             return new Roo.lib.Region( t, r, b, l );
22245         },
22246
22247         /**
22248          * Checks the cursor location to see if it over the target
22249          * @method isOverTarget
22250          * @param {Roo.lib.Point} pt The point to evaluate
22251          * @param {DragDrop} oTarget the DragDrop object we are inspecting
22252          * @return {boolean} true if the mouse is over the target
22253          * @private
22254          * @static
22255          */
22256         isOverTarget: function(pt, oTarget, intersect) {
22257             // use cache if available
22258             var loc = this.locationCache[oTarget.id];
22259             if (!loc || !this.useCache) {
22260                 loc = this.getLocation(oTarget);
22261                 this.locationCache[oTarget.id] = loc;
22262
22263             }
22264
22265             if (!loc) {
22266                 return false;
22267             }
22268
22269             oTarget.cursorIsOver = loc.contains( pt );
22270
22271             // DragDrop is using this as a sanity check for the initial mousedown
22272             // in this case we are done.  In POINT mode, if the drag obj has no
22273             // contraints, we are also done. Otherwise we need to evaluate the
22274             // location of the target as related to the actual location of the
22275             // dragged element.
22276             var dc = this.dragCurrent;
22277             if (!dc || !dc.getTargetCoord ||
22278                     (!intersect && !dc.constrainX && !dc.constrainY)) {
22279                 return oTarget.cursorIsOver;
22280             }
22281
22282             oTarget.overlap = null;
22283
22284             // Get the current location of the drag element, this is the
22285             // location of the mouse event less the delta that represents
22286             // where the original mousedown happened on the element.  We
22287             // need to consider constraints and ticks as well.
22288             var pos = dc.getTargetCoord(pt.x, pt.y);
22289
22290             var el = dc.getDragEl();
22291             var curRegion = new Roo.lib.Region( pos.y,
22292                                                    pos.x + el.offsetWidth,
22293                                                    pos.y + el.offsetHeight,
22294                                                    pos.x );
22295
22296             var overlap = curRegion.intersect(loc);
22297
22298             if (overlap) {
22299                 oTarget.overlap = overlap;
22300                 return (intersect) ? true : oTarget.cursorIsOver;
22301             } else {
22302                 return false;
22303             }
22304         },
22305
22306         /**
22307          * unload event handler
22308          * @method _onUnload
22309          * @private
22310          * @static
22311          */
22312         _onUnload: function(e, me) {
22313             Roo.dd.DragDropMgr.unregAll();
22314         },
22315
22316         /**
22317          * Cleans up the drag and drop events and objects.
22318          * @method unregAll
22319          * @private
22320          * @static
22321          */
22322         unregAll: function() {
22323
22324             if (this.dragCurrent) {
22325                 this.stopDrag();
22326                 this.dragCurrent = null;
22327             }
22328
22329             this._execOnAll("unreg", []);
22330
22331             for (i in this.elementCache) {
22332                 delete this.elementCache[i];
22333             }
22334
22335             this.elementCache = {};
22336             this.ids = {};
22337         },
22338
22339         /**
22340          * A cache of DOM elements
22341          * @property elementCache
22342          * @private
22343          * @static
22344          */
22345         elementCache: {},
22346
22347         /**
22348          * Get the wrapper for the DOM element specified
22349          * @method getElWrapper
22350          * @param {String} id the id of the element to get
22351          * @return {Roo.dd.DDM.ElementWrapper} the wrapped element
22352          * @private
22353          * @deprecated This wrapper isn't that useful
22354          * @static
22355          */
22356         getElWrapper: function(id) {
22357             var oWrapper = this.elementCache[id];
22358             if (!oWrapper || !oWrapper.el) {
22359                 oWrapper = this.elementCache[id] =
22360                     new this.ElementWrapper(Roo.getDom(id));
22361             }
22362             return oWrapper;
22363         },
22364
22365         /**
22366          * Returns the actual DOM element
22367          * @method getElement
22368          * @param {String} id the id of the elment to get
22369          * @return {Object} The element
22370          * @deprecated use Roo.getDom instead
22371          * @static
22372          */
22373         getElement: function(id) {
22374             return Roo.getDom(id);
22375         },
22376
22377         /**
22378          * Returns the style property for the DOM element (i.e.,
22379          * document.getElById(id).style)
22380          * @method getCss
22381          * @param {String} id the id of the elment to get
22382          * @return {Object} The style property of the element
22383          * @deprecated use Roo.getDom instead
22384          * @static
22385          */
22386         getCss: function(id) {
22387             var el = Roo.getDom(id);
22388             return (el) ? el.style : null;
22389         },
22390
22391         /**
22392          * Inner class for cached elements
22393          * @class DragDropMgr.ElementWrapper
22394          * @for DragDropMgr
22395          * @private
22396          * @deprecated
22397          */
22398         ElementWrapper: function(el) {
22399                 /**
22400                  * The element
22401                  * @property el
22402                  */
22403                 this.el = el || null;
22404                 /**
22405                  * The element id
22406                  * @property id
22407                  */
22408                 this.id = this.el && el.id;
22409                 /**
22410                  * A reference to the style property
22411                  * @property css
22412                  */
22413                 this.css = this.el && el.style;
22414             },
22415
22416         /**
22417          * Returns the X position of an html element
22418          * @method getPosX
22419          * @param el the element for which to get the position
22420          * @return {int} the X coordinate
22421          * @for DragDropMgr
22422          * @deprecated use Roo.lib.Dom.getX instead
22423          * @static
22424          */
22425         getPosX: function(el) {
22426             return Roo.lib.Dom.getX(el);
22427         },
22428
22429         /**
22430          * Returns the Y position of an html element
22431          * @method getPosY
22432          * @param el the element for which to get the position
22433          * @return {int} the Y coordinate
22434          * @deprecated use Roo.lib.Dom.getY instead
22435          * @static
22436          */
22437         getPosY: function(el) {
22438             return Roo.lib.Dom.getY(el);
22439         },
22440
22441         /**
22442          * Swap two nodes.  In IE, we use the native method, for others we
22443          * emulate the IE behavior
22444          * @method swapNode
22445          * @param n1 the first node to swap
22446          * @param n2 the other node to swap
22447          * @static
22448          */
22449         swapNode: function(n1, n2) {
22450             if (n1.swapNode) {
22451                 n1.swapNode(n2);
22452             } else {
22453                 var p = n2.parentNode;
22454                 var s = n2.nextSibling;
22455
22456                 if (s == n1) {
22457                     p.insertBefore(n1, n2);
22458                 } else if (n2 == n1.nextSibling) {
22459                     p.insertBefore(n2, n1);
22460                 } else {
22461                     n1.parentNode.replaceChild(n2, n1);
22462                     p.insertBefore(n1, s);
22463                 }
22464             }
22465         },
22466
22467         /**
22468          * Returns the current scroll position
22469          * @method getScroll
22470          * @private
22471          * @static
22472          */
22473         getScroll: function () {
22474             var t, l, dde=document.documentElement, db=document.body;
22475             if (dde && (dde.scrollTop || dde.scrollLeft)) {
22476                 t = dde.scrollTop;
22477                 l = dde.scrollLeft;
22478             } else if (db) {
22479                 t = db.scrollTop;
22480                 l = db.scrollLeft;
22481             } else {
22482
22483             }
22484             return { top: t, left: l };
22485         },
22486
22487         /**
22488          * Returns the specified element style property
22489          * @method getStyle
22490          * @param {HTMLElement} el          the element
22491          * @param {string}      styleProp   the style property
22492          * @return {string} The value of the style property
22493          * @deprecated use Roo.lib.Dom.getStyle
22494          * @static
22495          */
22496         getStyle: function(el, styleProp) {
22497             return Roo.fly(el).getStyle(styleProp);
22498         },
22499
22500         /**
22501          * Gets the scrollTop
22502          * @method getScrollTop
22503          * @return {int} the document's scrollTop
22504          * @static
22505          */
22506         getScrollTop: function () { return this.getScroll().top; },
22507
22508         /**
22509          * Gets the scrollLeft
22510          * @method getScrollLeft
22511          * @return {int} the document's scrollTop
22512          * @static
22513          */
22514         getScrollLeft: function () { return this.getScroll().left; },
22515
22516         /**
22517          * Sets the x/y position of an element to the location of the
22518          * target element.
22519          * @method moveToEl
22520          * @param {HTMLElement} moveEl      The element to move
22521          * @param {HTMLElement} targetEl    The position reference element
22522          * @static
22523          */
22524         moveToEl: function (moveEl, targetEl) {
22525             var aCoord = Roo.lib.Dom.getXY(targetEl);
22526             Roo.lib.Dom.setXY(moveEl, aCoord);
22527         },
22528
22529         /**
22530          * Numeric array sort function
22531          * @method numericSort
22532          * @static
22533          */
22534         numericSort: function(a, b) { return (a - b); },
22535
22536         /**
22537          * Internal counter
22538          * @property _timeoutCount
22539          * @private
22540          * @static
22541          */
22542         _timeoutCount: 0,
22543
22544         /**
22545          * Trying to make the load order less important.  Without this we get
22546          * an error if this file is loaded before the Event Utility.
22547          * @method _addListeners
22548          * @private
22549          * @static
22550          */
22551         _addListeners: function() {
22552             var DDM = Roo.dd.DDM;
22553             if ( Roo.lib.Event && document ) {
22554                 DDM._onLoad();
22555             } else {
22556                 if (DDM._timeoutCount > 2000) {
22557                 } else {
22558                     setTimeout(DDM._addListeners, 10);
22559                     if (document && document.body) {
22560                         DDM._timeoutCount += 1;
22561                     }
22562                 }
22563             }
22564         },
22565
22566         /**
22567          * Recursively searches the immediate parent and all child nodes for
22568          * the handle element in order to determine wheter or not it was
22569          * clicked.
22570          * @method handleWasClicked
22571          * @param node the html element to inspect
22572          * @static
22573          */
22574         handleWasClicked: function(node, id) {
22575             if (this.isHandle(id, node.id)) {
22576                 return true;
22577             } else {
22578                 // check to see if this is a text node child of the one we want
22579                 var p = node.parentNode;
22580
22581                 while (p) {
22582                     if (this.isHandle(id, p.id)) {
22583                         return true;
22584                     } else {
22585                         p = p.parentNode;
22586                     }
22587                 }
22588             }
22589
22590             return false;
22591         }
22592
22593     };
22594
22595 }();
22596
22597 // shorter alias, save a few bytes
22598 Roo.dd.DDM = Roo.dd.DragDropMgr;
22599 Roo.dd.DDM._addListeners();
22600
22601 }/*
22602  * Based on:
22603  * Ext JS Library 1.1.1
22604  * Copyright(c) 2006-2007, Ext JS, LLC.
22605  *
22606  * Originally Released Under LGPL - original licence link has changed is not relivant.
22607  *
22608  * Fork - LGPL
22609  * <script type="text/javascript">
22610  */
22611
22612 /**
22613  * @class Roo.dd.DD
22614  * A DragDrop implementation where the linked element follows the
22615  * mouse cursor during a drag.
22616  * @extends Roo.dd.DragDrop
22617  * @constructor
22618  * @param {String} id the id of the linked element
22619  * @param {String} sGroup the group of related DragDrop items
22620  * @param {object} config an object containing configurable attributes
22621  *                Valid properties for DD:
22622  *                    scroll
22623  */
22624 Roo.dd.DD = function(id, sGroup, config) {
22625     if (id) {
22626         this.init(id, sGroup, config);
22627     }
22628 };
22629
22630 Roo.extend(Roo.dd.DD, Roo.dd.DragDrop, {
22631
22632     /**
22633      * When set to true, the utility automatically tries to scroll the browser
22634      * window wehn a drag and drop element is dragged near the viewport boundary.
22635      * Defaults to true.
22636      * @property scroll
22637      * @type boolean
22638      */
22639     scroll: true,
22640
22641     /**
22642      * Sets the pointer offset to the distance between the linked element's top
22643      * left corner and the location the element was clicked
22644      * @method autoOffset
22645      * @param {int} iPageX the X coordinate of the click
22646      * @param {int} iPageY the Y coordinate of the click
22647      */
22648     autoOffset: function(iPageX, iPageY) {
22649         var x = iPageX - this.startPageX;
22650         var y = iPageY - this.startPageY;
22651         this.setDelta(x, y);
22652     },
22653
22654     /**
22655      * Sets the pointer offset.  You can call this directly to force the
22656      * offset to be in a particular location (e.g., pass in 0,0 to set it
22657      * to the center of the object)
22658      * @method setDelta
22659      * @param {int} iDeltaX the distance from the left
22660      * @param {int} iDeltaY the distance from the top
22661      */
22662     setDelta: function(iDeltaX, iDeltaY) {
22663         this.deltaX = iDeltaX;
22664         this.deltaY = iDeltaY;
22665     },
22666
22667     /**
22668      * Sets the drag element to the location of the mousedown or click event,
22669      * maintaining the cursor location relative to the location on the element
22670      * that was clicked.  Override this if you want to place the element in a
22671      * location other than where the cursor is.
22672      * @method setDragElPos
22673      * @param {int} iPageX the X coordinate of the mousedown or drag event
22674      * @param {int} iPageY the Y coordinate of the mousedown or drag event
22675      */
22676     setDragElPos: function(iPageX, iPageY) {
22677         // the first time we do this, we are going to check to make sure
22678         // the element has css positioning
22679
22680         var el = this.getDragEl();
22681         this.alignElWithMouse(el, iPageX, iPageY);
22682     },
22683
22684     /**
22685      * Sets the element to the location of the mousedown or click event,
22686      * maintaining the cursor location relative to the location on the element
22687      * that was clicked.  Override this if you want to place the element in a
22688      * location other than where the cursor is.
22689      * @method alignElWithMouse
22690      * @param {HTMLElement} el the element to move
22691      * @param {int} iPageX the X coordinate of the mousedown or drag event
22692      * @param {int} iPageY the Y coordinate of the mousedown or drag event
22693      */
22694     alignElWithMouse: function(el, iPageX, iPageY) {
22695         var oCoord = this.getTargetCoord(iPageX, iPageY);
22696         var fly = el.dom ? el : Roo.fly(el);
22697         if (!this.deltaSetXY) {
22698             var aCoord = [oCoord.x, oCoord.y];
22699             fly.setXY(aCoord);
22700             var newLeft = fly.getLeft(true);
22701             var newTop  = fly.getTop(true);
22702             this.deltaSetXY = [ newLeft - oCoord.x, newTop - oCoord.y ];
22703         } else {
22704             fly.setLeftTop(oCoord.x + this.deltaSetXY[0], oCoord.y + this.deltaSetXY[1]);
22705         }
22706
22707         this.cachePosition(oCoord.x, oCoord.y);
22708         this.autoScroll(oCoord.x, oCoord.y, el.offsetHeight, el.offsetWidth);
22709         return oCoord;
22710     },
22711
22712     /**
22713      * Saves the most recent position so that we can reset the constraints and
22714      * tick marks on-demand.  We need to know this so that we can calculate the
22715      * number of pixels the element is offset from its original position.
22716      * @method cachePosition
22717      * @param iPageX the current x position (optional, this just makes it so we
22718      * don't have to look it up again)
22719      * @param iPageY the current y position (optional, this just makes it so we
22720      * don't have to look it up again)
22721      */
22722     cachePosition: function(iPageX, iPageY) {
22723         if (iPageX) {
22724             this.lastPageX = iPageX;
22725             this.lastPageY = iPageY;
22726         } else {
22727             var aCoord = Roo.lib.Dom.getXY(this.getEl());
22728             this.lastPageX = aCoord[0];
22729             this.lastPageY = aCoord[1];
22730         }
22731     },
22732
22733     /**
22734      * Auto-scroll the window if the dragged object has been moved beyond the
22735      * visible window boundary.
22736      * @method autoScroll
22737      * @param {int} x the drag element's x position
22738      * @param {int} y the drag element's y position
22739      * @param {int} h the height of the drag element
22740      * @param {int} w the width of the drag element
22741      * @private
22742      */
22743     autoScroll: function(x, y, h, w) {
22744
22745         if (this.scroll) {
22746             // The client height
22747             var clientH = Roo.lib.Dom.getViewWidth();
22748
22749             // The client width
22750             var clientW = Roo.lib.Dom.getViewHeight();
22751
22752             // The amt scrolled down
22753             var st = this.DDM.getScrollTop();
22754
22755             // The amt scrolled right
22756             var sl = this.DDM.getScrollLeft();
22757
22758             // Location of the bottom of the element
22759             var bot = h + y;
22760
22761             // Location of the right of the element
22762             var right = w + x;
22763
22764             // The distance from the cursor to the bottom of the visible area,
22765             // adjusted so that we don't scroll if the cursor is beyond the
22766             // element drag constraints
22767             var toBot = (clientH + st - y - this.deltaY);
22768
22769             // The distance from the cursor to the right of the visible area
22770             var toRight = (clientW + sl - x - this.deltaX);
22771
22772
22773             // How close to the edge the cursor must be before we scroll
22774             // var thresh = (document.all) ? 100 : 40;
22775             var thresh = 40;
22776
22777             // How many pixels to scroll per autoscroll op.  This helps to reduce
22778             // clunky scrolling. IE is more sensitive about this ... it needs this
22779             // value to be higher.
22780             var scrAmt = (document.all) ? 80 : 30;
22781
22782             // Scroll down if we are near the bottom of the visible page and the
22783             // obj extends below the crease
22784             if ( bot > clientH && toBot < thresh ) {
22785                 window.scrollTo(sl, st + scrAmt);
22786             }
22787
22788             // Scroll up if the window is scrolled down and the top of the object
22789             // goes above the top border
22790             if ( y < st && st > 0 && y - st < thresh ) {
22791                 window.scrollTo(sl, st - scrAmt);
22792             }
22793
22794             // Scroll right if the obj is beyond the right border and the cursor is
22795             // near the border.
22796             if ( right > clientW && toRight < thresh ) {
22797                 window.scrollTo(sl + scrAmt, st);
22798             }
22799
22800             // Scroll left if the window has been scrolled to the right and the obj
22801             // extends past the left border
22802             if ( x < sl && sl > 0 && x - sl < thresh ) {
22803                 window.scrollTo(sl - scrAmt, st);
22804             }
22805         }
22806     },
22807
22808     /**
22809      * Finds the location the element should be placed if we want to move
22810      * it to where the mouse location less the click offset would place us.
22811      * @method getTargetCoord
22812      * @param {int} iPageX the X coordinate of the click
22813      * @param {int} iPageY the Y coordinate of the click
22814      * @return an object that contains the coordinates (Object.x and Object.y)
22815      * @private
22816      */
22817     getTargetCoord: function(iPageX, iPageY) {
22818
22819
22820         var x = iPageX - this.deltaX;
22821         var y = iPageY - this.deltaY;
22822
22823         if (this.constrainX) {
22824             if (x < this.minX) { x = this.minX; }
22825             if (x > this.maxX) { x = this.maxX; }
22826         }
22827
22828         if (this.constrainY) {
22829             if (y < this.minY) { y = this.minY; }
22830             if (y > this.maxY) { y = this.maxY; }
22831         }
22832
22833         x = this.getTick(x, this.xTicks);
22834         y = this.getTick(y, this.yTicks);
22835
22836
22837         return {x:x, y:y};
22838     },
22839
22840     /*
22841      * Sets up config options specific to this class. Overrides
22842      * Roo.dd.DragDrop, but all versions of this method through the
22843      * inheritance chain are called
22844      */
22845     applyConfig: function() {
22846         Roo.dd.DD.superclass.applyConfig.call(this);
22847         this.scroll = (this.config.scroll !== false);
22848     },
22849
22850     /*
22851      * Event that fires prior to the onMouseDown event.  Overrides
22852      * Roo.dd.DragDrop.
22853      */
22854     b4MouseDown: function(e) {
22855         // this.resetConstraints();
22856         this.autoOffset(e.getPageX(),
22857                             e.getPageY());
22858     },
22859
22860     /*
22861      * Event that fires prior to the onDrag event.  Overrides
22862      * Roo.dd.DragDrop.
22863      */
22864     b4Drag: function(e) {
22865         this.setDragElPos(e.getPageX(),
22866                             e.getPageY());
22867     },
22868
22869     toString: function() {
22870         return ("DD " + this.id);
22871     }
22872
22873     //////////////////////////////////////////////////////////////////////////
22874     // Debugging ygDragDrop events that can be overridden
22875     //////////////////////////////////////////////////////////////////////////
22876     /*
22877     startDrag: function(x, y) {
22878     },
22879
22880     onDrag: function(e) {
22881     },
22882
22883     onDragEnter: function(e, id) {
22884     },
22885
22886     onDragOver: function(e, id) {
22887     },
22888
22889     onDragOut: function(e, id) {
22890     },
22891
22892     onDragDrop: function(e, id) {
22893     },
22894
22895     endDrag: function(e) {
22896     }
22897
22898     */
22899
22900 });/*
22901  * Based on:
22902  * Ext JS Library 1.1.1
22903  * Copyright(c) 2006-2007, Ext JS, LLC.
22904  *
22905  * Originally Released Under LGPL - original licence link has changed is not relivant.
22906  *
22907  * Fork - LGPL
22908  * <script type="text/javascript">
22909  */
22910
22911 /**
22912  * @class Roo.dd.DDProxy
22913  * A DragDrop implementation that inserts an empty, bordered div into
22914  * the document that follows the cursor during drag operations.  At the time of
22915  * the click, the frame div is resized to the dimensions of the linked html
22916  * element, and moved to the exact location of the linked element.
22917  *
22918  * References to the "frame" element refer to the single proxy element that
22919  * was created to be dragged in place of all DDProxy elements on the
22920  * page.
22921  *
22922  * @extends Roo.dd.DD
22923  * @constructor
22924  * @param {String} id the id of the linked html element
22925  * @param {String} sGroup the group of related DragDrop objects
22926  * @param {object} config an object containing configurable attributes
22927  *                Valid properties for DDProxy in addition to those in DragDrop:
22928  *                   resizeFrame, centerFrame, dragElId
22929  */
22930 Roo.dd.DDProxy = function(id, sGroup, config) {
22931     if (id) {
22932         this.init(id, sGroup, config);
22933         this.initFrame();
22934     }
22935 };
22936
22937 /**
22938  * The default drag frame div id
22939  * @property Roo.dd.DDProxy.dragElId
22940  * @type String
22941  * @static
22942  */
22943 Roo.dd.DDProxy.dragElId = "ygddfdiv";
22944
22945 Roo.extend(Roo.dd.DDProxy, Roo.dd.DD, {
22946
22947     /**
22948      * By default we resize the drag frame to be the same size as the element
22949      * we want to drag (this is to get the frame effect).  We can turn it off
22950      * if we want a different behavior.
22951      * @property resizeFrame
22952      * @type boolean
22953      */
22954     resizeFrame: true,
22955
22956     /**
22957      * By default the frame is positioned exactly where the drag element is, so
22958      * we use the cursor offset provided by Roo.dd.DD.  Another option that works only if
22959      * you do not have constraints on the obj is to have the drag frame centered
22960      * around the cursor.  Set centerFrame to true for this effect.
22961      * @property centerFrame
22962      * @type boolean
22963      */
22964     centerFrame: false,
22965
22966     /**
22967      * Creates the proxy element if it does not yet exist
22968      * @method createFrame
22969      */
22970     createFrame: function() {
22971         var self = this;
22972         var body = document.body;
22973
22974         if (!body || !body.firstChild) {
22975             setTimeout( function() { self.createFrame(); }, 50 );
22976             return;
22977         }
22978
22979         var div = this.getDragEl();
22980
22981         if (!div) {
22982             div    = document.createElement("div");
22983             div.id = this.dragElId;
22984             var s  = div.style;
22985
22986             s.position   = "absolute";
22987             s.visibility = "hidden";
22988             s.cursor     = "move";
22989             s.border     = "2px solid #aaa";
22990             s.zIndex     = 999;
22991
22992             // appendChild can blow up IE if invoked prior to the window load event
22993             // while rendering a table.  It is possible there are other scenarios
22994             // that would cause this to happen as well.
22995             body.insertBefore(div, body.firstChild);
22996         }
22997     },
22998
22999     /**
23000      * Initialization for the drag frame element.  Must be called in the
23001      * constructor of all subclasses
23002      * @method initFrame
23003      */
23004     initFrame: function() {
23005         this.createFrame();
23006     },
23007
23008     applyConfig: function() {
23009         Roo.dd.DDProxy.superclass.applyConfig.call(this);
23010
23011         this.resizeFrame = (this.config.resizeFrame !== false);
23012         this.centerFrame = (this.config.centerFrame);
23013         this.setDragElId(this.config.dragElId || Roo.dd.DDProxy.dragElId);
23014     },
23015
23016     /**
23017      * Resizes the drag frame to the dimensions of the clicked object, positions
23018      * it over the object, and finally displays it
23019      * @method showFrame
23020      * @param {int} iPageX X click position
23021      * @param {int} iPageY Y click position
23022      * @private
23023      */
23024     showFrame: function(iPageX, iPageY) {
23025         var el = this.getEl();
23026         var dragEl = this.getDragEl();
23027         var s = dragEl.style;
23028
23029         this._resizeProxy();
23030
23031         if (this.centerFrame) {
23032             this.setDelta( Math.round(parseInt(s.width,  10)/2),
23033                            Math.round(parseInt(s.height, 10)/2) );
23034         }
23035
23036         this.setDragElPos(iPageX, iPageY);
23037
23038         Roo.fly(dragEl).show();
23039     },
23040
23041     /**
23042      * The proxy is automatically resized to the dimensions of the linked
23043      * element when a drag is initiated, unless resizeFrame is set to false
23044      * @method _resizeProxy
23045      * @private
23046      */
23047     _resizeProxy: function() {
23048         if (this.resizeFrame) {
23049             var el = this.getEl();
23050             Roo.fly(this.getDragEl()).setSize(el.offsetWidth, el.offsetHeight);
23051         }
23052     },
23053
23054     // overrides Roo.dd.DragDrop
23055     b4MouseDown: function(e) {
23056         var x = e.getPageX();
23057         var y = e.getPageY();
23058         this.autoOffset(x, y);
23059         this.setDragElPos(x, y);
23060     },
23061
23062     // overrides Roo.dd.DragDrop
23063     b4StartDrag: function(x, y) {
23064         // show the drag frame
23065         this.showFrame(x, y);
23066     },
23067
23068     // overrides Roo.dd.DragDrop
23069     b4EndDrag: function(e) {
23070         Roo.fly(this.getDragEl()).hide();
23071     },
23072
23073     // overrides Roo.dd.DragDrop
23074     // By default we try to move the element to the last location of the frame.
23075     // This is so that the default behavior mirrors that of Roo.dd.DD.
23076     endDrag: function(e) {
23077
23078         var lel = this.getEl();
23079         var del = this.getDragEl();
23080
23081         // Show the drag frame briefly so we can get its position
23082         del.style.visibility = "";
23083
23084         this.beforeMove();
23085         // Hide the linked element before the move to get around a Safari
23086         // rendering bug.
23087         lel.style.visibility = "hidden";
23088         Roo.dd.DDM.moveToEl(lel, del);
23089         del.style.visibility = "hidden";
23090         lel.style.visibility = "";
23091
23092         this.afterDrag();
23093     },
23094
23095     beforeMove : function(){
23096
23097     },
23098
23099     afterDrag : function(){
23100
23101     },
23102
23103     toString: function() {
23104         return ("DDProxy " + this.id);
23105     }
23106
23107 });
23108 /*
23109  * Based on:
23110  * Ext JS Library 1.1.1
23111  * Copyright(c) 2006-2007, Ext JS, LLC.
23112  *
23113  * Originally Released Under LGPL - original licence link has changed is not relivant.
23114  *
23115  * Fork - LGPL
23116  * <script type="text/javascript">
23117  */
23118
23119  /**
23120  * @class Roo.dd.DDTarget
23121  * A DragDrop implementation that does not move, but can be a drop
23122  * target.  You would get the same result by simply omitting implementation
23123  * for the event callbacks, but this way we reduce the processing cost of the
23124  * event listener and the callbacks.
23125  * @extends Roo.dd.DragDrop
23126  * @constructor
23127  * @param {String} id the id of the element that is a drop target
23128  * @param {String} sGroup the group of related DragDrop objects
23129  * @param {object} config an object containing configurable attributes
23130  *                 Valid properties for DDTarget in addition to those in
23131  *                 DragDrop:
23132  *                    none
23133  */
23134 Roo.dd.DDTarget = function(id, sGroup, config) {
23135     if (id) {
23136         this.initTarget(id, sGroup, config);
23137     }
23138     if (config && (config.listeners || config.events)) { 
23139         Roo.dd.DragDrop.superclass.constructor.call(this,  { 
23140             listeners : config.listeners || {}, 
23141             events : config.events || {} 
23142         });    
23143     }
23144 };
23145
23146 // Roo.dd.DDTarget.prototype = new Roo.dd.DragDrop();
23147 Roo.extend(Roo.dd.DDTarget, Roo.dd.DragDrop, {
23148     toString: function() {
23149         return ("DDTarget " + this.id);
23150     }
23151 });
23152 /*
23153  * Based on:
23154  * Ext JS Library 1.1.1
23155  * Copyright(c) 2006-2007, Ext JS, LLC.
23156  *
23157  * Originally Released Under LGPL - original licence link has changed is not relivant.
23158  *
23159  * Fork - LGPL
23160  * <script type="text/javascript">
23161  */
23162  
23163
23164 /**
23165  * @class Roo.dd.ScrollManager
23166  * Provides automatic scrolling of overflow regions in the page during drag operations.<br><br>
23167  * <b>Note: This class uses "Point Mode" and is untested in "Intersect Mode".</b>
23168  * @static
23169  */
23170 Roo.dd.ScrollManager = function(){
23171     var ddm = Roo.dd.DragDropMgr;
23172     var els = {};
23173     var dragEl = null;
23174     var proc = {};
23175     
23176     
23177     
23178     var onStop = function(e){
23179         dragEl = null;
23180         clearProc();
23181     };
23182     
23183     var triggerRefresh = function(){
23184         if(ddm.dragCurrent){
23185              ddm.refreshCache(ddm.dragCurrent.groups);
23186         }
23187     };
23188     
23189     var doScroll = function(){
23190         if(ddm.dragCurrent){
23191             var dds = Roo.dd.ScrollManager;
23192             if(!dds.animate){
23193                 if(proc.el.scroll(proc.dir, dds.increment)){
23194                     triggerRefresh();
23195                 }
23196             }else{
23197                 proc.el.scroll(proc.dir, dds.increment, true, dds.animDuration, triggerRefresh);
23198             }
23199         }
23200     };
23201     
23202     var clearProc = function(){
23203         if(proc.id){
23204             clearInterval(proc.id);
23205         }
23206         proc.id = 0;
23207         proc.el = null;
23208         proc.dir = "";
23209     };
23210     
23211     var startProc = function(el, dir){
23212          Roo.log('scroll startproc');
23213         clearProc();
23214         proc.el = el;
23215         proc.dir = dir;
23216         proc.id = setInterval(doScroll, Roo.dd.ScrollManager.frequency);
23217     };
23218     
23219     var onFire = function(e, isDrop){
23220        
23221         if(isDrop || !ddm.dragCurrent){ return; }
23222         var dds = Roo.dd.ScrollManager;
23223         if(!dragEl || dragEl != ddm.dragCurrent){
23224             dragEl = ddm.dragCurrent;
23225             // refresh regions on drag start
23226             dds.refreshCache();
23227         }
23228         
23229         var xy = Roo.lib.Event.getXY(e);
23230         var pt = new Roo.lib.Point(xy[0], xy[1]);
23231         for(var id in els){
23232             var el = els[id], r = el._region;
23233             if(r && r.contains(pt) && el.isScrollable()){
23234                 if(r.bottom - pt.y <= dds.thresh){
23235                     if(proc.el != el){
23236                         startProc(el, "down");
23237                     }
23238                     return;
23239                 }else if(r.right - pt.x <= dds.thresh){
23240                     if(proc.el != el){
23241                         startProc(el, "left");
23242                     }
23243                     return;
23244                 }else if(pt.y - r.top <= dds.thresh){
23245                     if(proc.el != el){
23246                         startProc(el, "up");
23247                     }
23248                     return;
23249                 }else if(pt.x - r.left <= dds.thresh){
23250                     if(proc.el != el){
23251                         startProc(el, "right");
23252                     }
23253                     return;
23254                 }
23255             }
23256         }
23257         clearProc();
23258     };
23259     
23260     ddm.fireEvents = ddm.fireEvents.createSequence(onFire, ddm);
23261     ddm.stopDrag = ddm.stopDrag.createSequence(onStop, ddm);
23262     
23263     return {
23264         /**
23265          * Registers new overflow element(s) to auto scroll
23266          * @param {String/HTMLElement/Element/Array} el The id of or the element to be scrolled or an array of either
23267          */
23268         register : function(el){
23269             if(el instanceof Array){
23270                 for(var i = 0, len = el.length; i < len; i++) {
23271                         this.register(el[i]);
23272                 }
23273             }else{
23274                 el = Roo.get(el);
23275                 els[el.id] = el;
23276             }
23277             Roo.dd.ScrollManager.els = els;
23278         },
23279         
23280         /**
23281          * Unregisters overflow element(s) so they are no longer scrolled
23282          * @param {String/HTMLElement/Element/Array} el The id of or the element to be removed or an array of either
23283          */
23284         unregister : function(el){
23285             if(el instanceof Array){
23286                 for(var i = 0, len = el.length; i < len; i++) {
23287                         this.unregister(el[i]);
23288                 }
23289             }else{
23290                 el = Roo.get(el);
23291                 delete els[el.id];
23292             }
23293         },
23294         
23295         /**
23296          * The number of pixels from the edge of a container the pointer needs to be to 
23297          * trigger scrolling (defaults to 25)
23298          * @type Number
23299          */
23300         thresh : 25,
23301         
23302         /**
23303          * The number of pixels to scroll in each scroll increment (defaults to 50)
23304          * @type Number
23305          */
23306         increment : 100,
23307         
23308         /**
23309          * The frequency of scrolls in milliseconds (defaults to 500)
23310          * @type Number
23311          */
23312         frequency : 500,
23313         
23314         /**
23315          * True to animate the scroll (defaults to true)
23316          * @type Boolean
23317          */
23318         animate: true,
23319         
23320         /**
23321          * The animation duration in seconds - 
23322          * MUST BE less than Roo.dd.ScrollManager.frequency! (defaults to .4)
23323          * @type Number
23324          */
23325         animDuration: .4,
23326         
23327         /**
23328          * Manually trigger a cache refresh.
23329          */
23330         refreshCache : function(){
23331             for(var id in els){
23332                 if(typeof els[id] == 'object'){ // for people extending the object prototype
23333                     els[id]._region = els[id].getRegion();
23334                 }
23335             }
23336         }
23337     };
23338 }();/*
23339  * Based on:
23340  * Ext JS Library 1.1.1
23341  * Copyright(c) 2006-2007, Ext JS, LLC.
23342  *
23343  * Originally Released Under LGPL - original licence link has changed is not relivant.
23344  *
23345  * Fork - LGPL
23346  * <script type="text/javascript">
23347  */
23348  
23349
23350 /**
23351  * @class Roo.dd.Registry
23352  * Provides easy access to all drag drop components that are registered on a page.  Items can be retrieved either
23353  * directly by DOM node id, or by passing in the drag drop event that occurred and looking up the event target.
23354  * @static
23355  */
23356 Roo.dd.Registry = function(){
23357     var elements = {}; 
23358     var handles = {}; 
23359     var autoIdSeed = 0;
23360
23361     var getId = function(el, autogen){
23362         if(typeof el == "string"){
23363             return el;
23364         }
23365         var id = el.id;
23366         if(!id && autogen !== false){
23367             id = "roodd-" + (++autoIdSeed);
23368             el.id = id;
23369         }
23370         return id;
23371     };
23372     
23373     return {
23374     /**
23375      * Register a drag drop element
23376      * @param {String|HTMLElement} element The id or DOM node to register
23377      * @param {Object} data (optional) A custom data object that will be passed between the elements that are involved
23378      * in drag drop operations.  You can populate this object with any arbitrary properties that your own code
23379      * knows how to interpret, plus there are some specific properties known to the Registry that should be
23380      * populated in the data object (if applicable):
23381      * <pre>
23382 Value      Description<br />
23383 ---------  ------------------------------------------<br />
23384 handles    Array of DOM nodes that trigger dragging<br />
23385            for the element being registered<br />
23386 isHandle   True if the element passed in triggers<br />
23387            dragging itself, else false
23388 </pre>
23389      */
23390         register : function(el, data){
23391             data = data || {};
23392             if(typeof el == "string"){
23393                 el = document.getElementById(el);
23394             }
23395             data.ddel = el;
23396             elements[getId(el)] = data;
23397             if(data.isHandle !== false){
23398                 handles[data.ddel.id] = data;
23399             }
23400             if(data.handles){
23401                 var hs = data.handles;
23402                 for(var i = 0, len = hs.length; i < len; i++){
23403                         handles[getId(hs[i])] = data;
23404                 }
23405             }
23406         },
23407
23408     /**
23409      * Unregister a drag drop element
23410      * @param {String|HTMLElement}  element The id or DOM node to unregister
23411      */
23412         unregister : function(el){
23413             var id = getId(el, false);
23414             var data = elements[id];
23415             if(data){
23416                 delete elements[id];
23417                 if(data.handles){
23418                     var hs = data.handles;
23419                     for(var i = 0, len = hs.length; i < len; i++){
23420                         delete handles[getId(hs[i], false)];
23421                     }
23422                 }
23423             }
23424         },
23425
23426     /**
23427      * Returns the handle registered for a DOM Node by id
23428      * @param {String|HTMLElement} id The DOM node or id to look up
23429      * @return {Object} handle The custom handle data
23430      */
23431         getHandle : function(id){
23432             if(typeof id != "string"){ // must be element?
23433                 id = id.id;
23434             }
23435             return handles[id];
23436         },
23437
23438     /**
23439      * Returns the handle that is registered for the DOM node that is the target of the event
23440      * @param {Event} e The event
23441      * @return {Object} handle The custom handle data
23442      */
23443         getHandleFromEvent : function(e){
23444             var t = Roo.lib.Event.getTarget(e);
23445             return t ? handles[t.id] : null;
23446         },
23447
23448     /**
23449      * Returns a custom data object that is registered for a DOM node by id
23450      * @param {String|HTMLElement} id The DOM node or id to look up
23451      * @return {Object} data The custom data
23452      */
23453         getTarget : function(id){
23454             if(typeof id != "string"){ // must be element?
23455                 id = id.id;
23456             }
23457             return elements[id];
23458         },
23459
23460     /**
23461      * Returns a custom data object that is registered for the DOM node that is the target of the event
23462      * @param {Event} e The event
23463      * @return {Object} data The custom data
23464      */
23465         getTargetFromEvent : function(e){
23466             var t = Roo.lib.Event.getTarget(e);
23467             return t ? elements[t.id] || handles[t.id] : null;
23468         }
23469     };
23470 }();/*
23471  * Based on:
23472  * Ext JS Library 1.1.1
23473  * Copyright(c) 2006-2007, Ext JS, LLC.
23474  *
23475  * Originally Released Under LGPL - original licence link has changed is not relivant.
23476  *
23477  * Fork - LGPL
23478  * <script type="text/javascript">
23479  */
23480  
23481
23482 /**
23483  * @class Roo.dd.StatusProxy
23484  * A specialized drag proxy that supports a drop status icon, {@link Roo.Layer} styles and auto-repair.  This is the
23485  * default drag proxy used by all Roo.dd components.
23486  * @constructor
23487  * @param {Object} config
23488  */
23489 Roo.dd.StatusProxy = function(config){
23490     Roo.apply(this, config);
23491     this.id = this.id || Roo.id();
23492     this.el = new Roo.Layer({
23493         dh: {
23494             id: this.id, tag: "div", cls: "x-dd-drag-proxy "+this.dropNotAllowed, children: [
23495                 {tag: "div", cls: "x-dd-drop-icon"},
23496                 {tag: "div", cls: "x-dd-drag-ghost"}
23497             ]
23498         }, 
23499         shadow: !config || config.shadow !== false
23500     });
23501     this.ghost = Roo.get(this.el.dom.childNodes[1]);
23502     this.dropStatus = this.dropNotAllowed;
23503 };
23504
23505 Roo.dd.StatusProxy.prototype = {
23506     /**
23507      * @cfg {String} dropAllowed
23508      * The CSS class to apply to the status element when drop is allowed (defaults to "x-dd-drop-ok").
23509      */
23510     dropAllowed : "x-dd-drop-ok",
23511     /**
23512      * @cfg {String} dropNotAllowed
23513      * The CSS class to apply to the status element when drop is not allowed (defaults to "x-dd-drop-nodrop").
23514      */
23515     dropNotAllowed : "x-dd-drop-nodrop",
23516
23517     /**
23518      * Updates the proxy's visual element to indicate the status of whether or not drop is allowed
23519      * over the current target element.
23520      * @param {String} cssClass The css class for the new drop status indicator image
23521      */
23522     setStatus : function(cssClass){
23523         cssClass = cssClass || this.dropNotAllowed;
23524         if(this.dropStatus != cssClass){
23525             this.el.replaceClass(this.dropStatus, cssClass);
23526             this.dropStatus = cssClass;
23527         }
23528     },
23529
23530     /**
23531      * Resets the status indicator to the default dropNotAllowed value
23532      * @param {Boolean} clearGhost True to also remove all content from the ghost, false to preserve it
23533      */
23534     reset : function(clearGhost){
23535         this.el.dom.className = "x-dd-drag-proxy " + this.dropNotAllowed;
23536         this.dropStatus = this.dropNotAllowed;
23537         if(clearGhost){
23538             this.ghost.update("");
23539         }
23540     },
23541
23542     /**
23543      * Updates the contents of the ghost element
23544      * @param {String} html The html that will replace the current innerHTML of the ghost element
23545      */
23546     update : function(html){
23547         if(typeof html == "string"){
23548             this.ghost.update(html);
23549         }else{
23550             this.ghost.update("");
23551             html.style.margin = "0";
23552             this.ghost.dom.appendChild(html);
23553         }
23554         // ensure float = none set?? cant remember why though.
23555         var el = this.ghost.dom.firstChild;
23556                 if(el){
23557                         Roo.fly(el).setStyle('float', 'none');
23558                 }
23559     },
23560     
23561     /**
23562      * Returns the underlying proxy {@link Roo.Layer}
23563      * @return {Roo.Layer} el
23564     */
23565     getEl : function(){
23566         return this.el;
23567     },
23568
23569     /**
23570      * Returns the ghost element
23571      * @return {Roo.Element} el
23572      */
23573     getGhost : function(){
23574         return this.ghost;
23575     },
23576
23577     /**
23578      * Hides the proxy
23579      * @param {Boolean} clear True to reset the status and clear the ghost contents, false to preserve them
23580      */
23581     hide : function(clear){
23582         this.el.hide();
23583         if(clear){
23584             this.reset(true);
23585         }
23586     },
23587
23588     /**
23589      * Stops the repair animation if it's currently running
23590      */
23591     stop : function(){
23592         if(this.anim && this.anim.isAnimated && this.anim.isAnimated()){
23593             this.anim.stop();
23594         }
23595     },
23596
23597     /**
23598      * Displays this proxy
23599      */
23600     show : function(){
23601         this.el.show();
23602     },
23603
23604     /**
23605      * Force the Layer to sync its shadow and shim positions to the element
23606      */
23607     sync : function(){
23608         this.el.sync();
23609     },
23610
23611     /**
23612      * Causes the proxy to return to its position of origin via an animation.  Should be called after an
23613      * invalid drop operation by the item being dragged.
23614      * @param {Array} xy The XY position of the element ([x, y])
23615      * @param {Function} callback The function to call after the repair is complete
23616      * @param {Object} scope The scope in which to execute the callback
23617      */
23618     repair : function(xy, callback, scope){
23619         this.callback = callback;
23620         this.scope = scope;
23621         if(xy && this.animRepair !== false){
23622             this.el.addClass("x-dd-drag-repair");
23623             this.el.hideUnders(true);
23624             this.anim = this.el.shift({
23625                 duration: this.repairDuration || .5,
23626                 easing: 'easeOut',
23627                 xy: xy,
23628                 stopFx: true,
23629                 callback: this.afterRepair,
23630                 scope: this
23631             });
23632         }else{
23633             this.afterRepair();
23634         }
23635     },
23636
23637     // private
23638     afterRepair : function(){
23639         this.hide(true);
23640         if(typeof this.callback == "function"){
23641             this.callback.call(this.scope || this);
23642         }
23643         this.callback = null;
23644         this.scope = null;
23645     }
23646 };/*
23647  * Based on:
23648  * Ext JS Library 1.1.1
23649  * Copyright(c) 2006-2007, Ext JS, LLC.
23650  *
23651  * Originally Released Under LGPL - original licence link has changed is not relivant.
23652  *
23653  * Fork - LGPL
23654  * <script type="text/javascript">
23655  */
23656
23657 /**
23658  * @class Roo.dd.DragSource
23659  * @extends Roo.dd.DDProxy
23660  * A simple class that provides the basic implementation needed to make any element draggable.
23661  * @constructor
23662  * @param {String/HTMLElement/Element} el The container element
23663  * @param {Object} config
23664  */
23665 Roo.dd.DragSource = function(el, config){
23666     this.el = Roo.get(el);
23667     this.dragData = {};
23668     
23669     Roo.apply(this, config);
23670     
23671     if(!this.proxy){
23672         this.proxy = new Roo.dd.StatusProxy();
23673     }
23674
23675     Roo.dd.DragSource.superclass.constructor.call(this, this.el.dom, this.ddGroup || this.group,
23676           {dragElId : this.proxy.id, resizeFrame: false, isTarget: false, scroll: this.scroll === true});
23677     
23678     this.dragging = false;
23679 };
23680
23681 Roo.extend(Roo.dd.DragSource, Roo.dd.DDProxy, {
23682     /**
23683      * @cfg {String} dropAllowed
23684      * The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").
23685      */
23686     dropAllowed : "x-dd-drop-ok",
23687     /**
23688      * @cfg {String} dropNotAllowed
23689      * The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").
23690      */
23691     dropNotAllowed : "x-dd-drop-nodrop",
23692
23693     /**
23694      * Returns the data object associated with this drag source
23695      * @return {Object} data An object containing arbitrary data
23696      */
23697     getDragData : function(e){
23698         return this.dragData;
23699     },
23700
23701     // private
23702     onDragEnter : function(e, id){
23703         var target = Roo.dd.DragDropMgr.getDDById(id);
23704         this.cachedTarget = target;
23705         if(this.beforeDragEnter(target, e, id) !== false){
23706             if(target.isNotifyTarget){
23707                 var status = target.notifyEnter(this, e, this.dragData);
23708                 this.proxy.setStatus(status);
23709             }else{
23710                 this.proxy.setStatus(this.dropAllowed);
23711             }
23712             
23713             if(this.afterDragEnter){
23714                 /**
23715                  * An empty function by default, but provided so that you can perform a custom action
23716                  * when the dragged item enters the drop target by providing an implementation.
23717                  * @param {Roo.dd.DragDrop} target The drop target
23718                  * @param {Event} e The event object
23719                  * @param {String} id The id of the dragged element
23720                  * @method afterDragEnter
23721                  */
23722                 this.afterDragEnter(target, e, id);
23723             }
23724         }
23725     },
23726
23727     /**
23728      * An empty function by default, but provided so that you can perform a custom action
23729      * before the dragged item enters the drop target and optionally cancel the onDragEnter.
23730      * @param {Roo.dd.DragDrop} target The drop target
23731      * @param {Event} e The event object
23732      * @param {String} id The id of the dragged element
23733      * @return {Boolean} isValid True if the drag event is valid, else false to cancel
23734      */
23735     beforeDragEnter : function(target, e, id){
23736         return true;
23737     },
23738
23739     // private
23740     alignElWithMouse: function() {
23741         Roo.dd.DragSource.superclass.alignElWithMouse.apply(this, arguments);
23742         this.proxy.sync();
23743     },
23744
23745     // private
23746     onDragOver : function(e, id){
23747         var target = this.cachedTarget || Roo.dd.DragDropMgr.getDDById(id);
23748         if(this.beforeDragOver(target, e, id) !== false){
23749             if(target.isNotifyTarget){
23750                 var status = target.notifyOver(this, e, this.dragData);
23751                 this.proxy.setStatus(status);
23752             }
23753
23754             if(this.afterDragOver){
23755                 /**
23756                  * An empty function by default, but provided so that you can perform a custom action
23757                  * while the dragged item is over the drop target by providing an implementation.
23758                  * @param {Roo.dd.DragDrop} target The drop target
23759                  * @param {Event} e The event object
23760                  * @param {String} id The id of the dragged element
23761                  * @method afterDragOver
23762                  */
23763                 this.afterDragOver(target, e, id);
23764             }
23765         }
23766     },
23767
23768     /**
23769      * An empty function by default, but provided so that you can perform a custom action
23770      * while the dragged item is over the drop target and optionally cancel the onDragOver.
23771      * @param {Roo.dd.DragDrop} target The drop target
23772      * @param {Event} e The event object
23773      * @param {String} id The id of the dragged element
23774      * @return {Boolean} isValid True if the drag event is valid, else false to cancel
23775      */
23776     beforeDragOver : function(target, e, id){
23777         return true;
23778     },
23779
23780     // private
23781     onDragOut : function(e, id){
23782         var target = this.cachedTarget || Roo.dd.DragDropMgr.getDDById(id);
23783         if(this.beforeDragOut(target, e, id) !== false){
23784             if(target.isNotifyTarget){
23785                 target.notifyOut(this, e, this.dragData);
23786             }
23787             this.proxy.reset();
23788             if(this.afterDragOut){
23789                 /**
23790                  * An empty function by default, but provided so that you can perform a custom action
23791                  * after the dragged item is dragged out of the target without dropping.
23792                  * @param {Roo.dd.DragDrop} target The drop target
23793                  * @param {Event} e The event object
23794                  * @param {String} id The id of the dragged element
23795                  * @method afterDragOut
23796                  */
23797                 this.afterDragOut(target, e, id);
23798             }
23799         }
23800         this.cachedTarget = null;
23801     },
23802
23803     /**
23804      * An empty function by default, but provided so that you can perform a custom action before the dragged
23805      * item is dragged out of the target without dropping, and optionally cancel the onDragOut.
23806      * @param {Roo.dd.DragDrop} target The drop target
23807      * @param {Event} e The event object
23808      * @param {String} id The id of the dragged element
23809      * @return {Boolean} isValid True if the drag event is valid, else false to cancel
23810      */
23811     beforeDragOut : function(target, e, id){
23812         return true;
23813     },
23814     
23815     // private
23816     onDragDrop : function(e, id){
23817         var target = this.cachedTarget || Roo.dd.DragDropMgr.getDDById(id);
23818         if(this.beforeDragDrop(target, e, id) !== false){
23819             if(target.isNotifyTarget){
23820                 if(target.notifyDrop(this, e, this.dragData)){ // valid drop?
23821                     this.onValidDrop(target, e, id);
23822                 }else{
23823                     this.onInvalidDrop(target, e, id);
23824                 }
23825             }else{
23826                 this.onValidDrop(target, e, id);
23827             }
23828             
23829             if(this.afterDragDrop){
23830                 /**
23831                  * An empty function by default, but provided so that you can perform a custom action
23832                  * after a valid drag drop has occurred by providing an implementation.
23833                  * @param {Roo.dd.DragDrop} target The drop target
23834                  * @param {Event} e The event object
23835                  * @param {String} id The id of the dropped element
23836                  * @method afterDragDrop
23837                  */
23838                 this.afterDragDrop(target, e, id);
23839             }
23840         }
23841         delete this.cachedTarget;
23842     },
23843
23844     /**
23845      * An empty function by default, but provided so that you can perform a custom action before the dragged
23846      * item is dropped onto the target and optionally cancel the onDragDrop.
23847      * @param {Roo.dd.DragDrop} target The drop target
23848      * @param {Event} e The event object
23849      * @param {String} id The id of the dragged element
23850      * @return {Boolean} isValid True if the drag drop event is valid, else false to cancel
23851      */
23852     beforeDragDrop : function(target, e, id){
23853         return true;
23854     },
23855
23856     // private
23857     onValidDrop : function(target, e, id){
23858         this.hideProxy();
23859         if(this.afterValidDrop){
23860             /**
23861              * An empty function by default, but provided so that you can perform a custom action
23862              * after a valid drop has occurred by providing an implementation.
23863              * @param {Object} target The target DD 
23864              * @param {Event} e The event object
23865              * @param {String} id The id of the dropped element
23866              * @method afterInvalidDrop
23867              */
23868             this.afterValidDrop(target, e, id);
23869         }
23870     },
23871
23872     // private
23873     getRepairXY : function(e, data){
23874         return this.el.getXY();  
23875     },
23876
23877     // private
23878     onInvalidDrop : function(target, e, id){
23879         this.beforeInvalidDrop(target, e, id);
23880         if(this.cachedTarget){
23881             if(this.cachedTarget.isNotifyTarget){
23882                 this.cachedTarget.notifyOut(this, e, this.dragData);
23883             }
23884             this.cacheTarget = null;
23885         }
23886         this.proxy.repair(this.getRepairXY(e, this.dragData), this.afterRepair, this);
23887
23888         if(this.afterInvalidDrop){
23889             /**
23890              * An empty function by default, but provided so that you can perform a custom action
23891              * after an invalid drop has occurred by providing an implementation.
23892              * @param {Event} e The event object
23893              * @param {String} id The id of the dropped element
23894              * @method afterInvalidDrop
23895              */
23896             this.afterInvalidDrop(e, id);
23897         }
23898     },
23899
23900     // private
23901     afterRepair : function(){
23902         if(Roo.enableFx){
23903             this.el.highlight(this.hlColor || "c3daf9");
23904         }
23905         this.dragging = false;
23906     },
23907
23908     /**
23909      * An empty function by default, but provided so that you can perform a custom action after an invalid
23910      * drop has occurred.
23911      * @param {Roo.dd.DragDrop} target The drop target
23912      * @param {Event} e The event object
23913      * @param {String} id The id of the dragged element
23914      * @return {Boolean} isValid True if the invalid drop should proceed, else false to cancel
23915      */
23916     beforeInvalidDrop : function(target, e, id){
23917         return true;
23918     },
23919
23920     // private
23921     handleMouseDown : function(e){
23922         if(this.dragging) {
23923             return;
23924         }
23925         var data = this.getDragData(e);
23926         if(data && this.onBeforeDrag(data, e) !== false){
23927             this.dragData = data;
23928             this.proxy.stop();
23929             Roo.dd.DragSource.superclass.handleMouseDown.apply(this, arguments);
23930         } 
23931     },
23932
23933     /**
23934      * An empty function by default, but provided so that you can perform a custom action before the initial
23935      * drag event begins and optionally cancel it.
23936      * @param {Object} data An object containing arbitrary data to be shared with drop targets
23937      * @param {Event} e The event object
23938      * @return {Boolean} isValid True if the drag event is valid, else false to cancel
23939      */
23940     onBeforeDrag : function(data, e){
23941         return true;
23942     },
23943
23944     /**
23945      * An empty function by default, but provided so that you can perform a custom action once the initial
23946      * drag event has begun.  The drag cannot be canceled from this function.
23947      * @param {Number} x The x position of the click on the dragged object
23948      * @param {Number} y The y position of the click on the dragged object
23949      */
23950     onStartDrag : Roo.emptyFn,
23951
23952     // private - YUI override
23953     startDrag : function(x, y){
23954         this.proxy.reset();
23955         this.dragging = true;
23956         this.proxy.update("");
23957         this.onInitDrag(x, y);
23958         this.proxy.show();
23959     },
23960
23961     // private
23962     onInitDrag : function(x, y){
23963         var clone = this.el.dom.cloneNode(true);
23964         clone.id = Roo.id(); // prevent duplicate ids
23965         this.proxy.update(clone);
23966         this.onStartDrag(x, y);
23967         return true;
23968     },
23969
23970     /**
23971      * Returns the drag source's underlying {@link Roo.dd.StatusProxy}
23972      * @return {Roo.dd.StatusProxy} proxy The StatusProxy
23973      */
23974     getProxy : function(){
23975         return this.proxy;  
23976     },
23977
23978     /**
23979      * Hides the drag source's {@link Roo.dd.StatusProxy}
23980      */
23981     hideProxy : function(){
23982         this.proxy.hide();  
23983         this.proxy.reset(true);
23984         this.dragging = false;
23985     },
23986
23987     // private
23988     triggerCacheRefresh : function(){
23989         Roo.dd.DDM.refreshCache(this.groups);
23990     },
23991
23992     // private - override to prevent hiding
23993     b4EndDrag: function(e) {
23994     },
23995
23996     // private - override to prevent moving
23997     endDrag : function(e){
23998         this.onEndDrag(this.dragData, e);
23999     },
24000
24001     // private
24002     onEndDrag : function(data, e){
24003     },
24004     
24005     // private - pin to cursor
24006     autoOffset : function(x, y) {
24007         this.setDelta(-12, -20);
24008     }    
24009 });/*
24010  * Based on:
24011  * Ext JS Library 1.1.1
24012  * Copyright(c) 2006-2007, Ext JS, LLC.
24013  *
24014  * Originally Released Under LGPL - original licence link has changed is not relivant.
24015  *
24016  * Fork - LGPL
24017  * <script type="text/javascript">
24018  */
24019
24020
24021 /**
24022  * @class Roo.dd.DropTarget
24023  * @extends Roo.dd.DDTarget
24024  * A simple class that provides the basic implementation needed to make any element a drop target that can have
24025  * draggable items dropped onto it.  The drop has no effect until an implementation of notifyDrop is provided.
24026  * @constructor
24027  * @param {String/HTMLElement/Element} el The container element
24028  * @param {Object} config
24029  */
24030 Roo.dd.DropTarget = function(el, config){
24031     this.el = Roo.get(el);
24032     
24033     var listeners = false; ;
24034     if (config && config.listeners) {
24035         listeners= config.listeners;
24036         delete config.listeners;
24037     }
24038     Roo.apply(this, config);
24039     
24040     if(this.containerScroll){
24041         Roo.dd.ScrollManager.register(this.el);
24042     }
24043     this.addEvents( {
24044          /**
24045          * @scope Roo.dd.DropTarget
24046          */
24047          
24048          /**
24049          * @event enter
24050          * The function a {@link Roo.dd.DragSource} calls once to notify this drop target that the source is now over the
24051          * target.  This default implementation adds the CSS class specified by overClass (if any) to the drop element
24052          * and returns the dropAllowed config value.  This method should be overridden if drop validation is required.
24053          * 
24054          * IMPORTANT : it should set  this.valid to true|false
24055          * 
24056          * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
24057          * @param {Event} e The event
24058          * @param {Object} data An object containing arbitrary data supplied by the drag source
24059          */
24060         "enter" : true,
24061         
24062          /**
24063          * @event over
24064          * The function a {@link Roo.dd.DragSource} calls continuously while it is being dragged over the target.
24065          * This method will be called on every mouse movement while the drag source is over the drop target.
24066          * This default implementation simply returns the dropAllowed config value.
24067          * 
24068          * IMPORTANT : it should set  this.valid to true|false
24069          * 
24070          * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
24071          * @param {Event} e The event
24072          * @param {Object} data An object containing arbitrary data supplied by the drag source
24073          
24074          */
24075         "over" : true,
24076         /**
24077          * @event out
24078          * The function a {@link Roo.dd.DragSource} calls once to notify this drop target that the source has been dragged
24079          * out of the target without dropping.  This default implementation simply removes the CSS class specified by
24080          * overClass (if any) from the drop element.
24081          * 
24082          * 
24083          * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
24084          * @param {Event} e The event
24085          * @param {Object} data An object containing arbitrary data supplied by the drag source
24086          */
24087          "out" : true,
24088          
24089         /**
24090          * @event drop
24091          * The function a {@link Roo.dd.DragSource} calls once to notify this drop target that the dragged item has
24092          * been dropped on it.  This method has no default implementation and returns false, so you must provide an
24093          * implementation that does something to process the drop event and returns true so that the drag source's
24094          * repair action does not run.
24095          * 
24096          * IMPORTANT : it should set this.success
24097          * 
24098          * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
24099          * @param {Event} e The event
24100          * @param {Object} data An object containing arbitrary data supplied by the drag source
24101         */
24102          "drop" : true
24103     });
24104             
24105      
24106     Roo.dd.DropTarget.superclass.constructor.call(  this, 
24107         this.el.dom, 
24108         this.ddGroup || this.group,
24109         {
24110             isTarget: true,
24111             listeners : listeners || {} 
24112            
24113         
24114         }
24115     );
24116
24117 };
24118
24119 Roo.extend(Roo.dd.DropTarget, Roo.dd.DDTarget, {
24120     /**
24121      * @cfg {String} overClass
24122      * The CSS class applied to the drop target element while the drag source is over it (defaults to "").
24123      */
24124      /**
24125      * @cfg {String} ddGroup
24126      * The drag drop group to handle drop events for
24127      */
24128      
24129     /**
24130      * @cfg {String} dropAllowed
24131      * The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").
24132      */
24133     dropAllowed : "x-dd-drop-ok",
24134     /**
24135      * @cfg {String} dropNotAllowed
24136      * The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").
24137      */
24138     dropNotAllowed : "x-dd-drop-nodrop",
24139     /**
24140      * @cfg {boolean} success
24141      * set this after drop listener.. 
24142      */
24143     success : false,
24144     /**
24145      * @cfg {boolean|String} valid true/false or string (ok-add/ok-sub/ok/nodrop)
24146      * if the drop point is valid for over/enter..
24147      */
24148     valid : false,
24149     // private
24150     isTarget : true,
24151
24152     // private
24153     isNotifyTarget : true,
24154     
24155     /**
24156      * @hide
24157      */
24158     notifyEnter : function(dd, e, data)
24159     {
24160         this.valid = true;
24161         this.fireEvent('enter', dd, e, data);
24162         if(this.overClass){
24163             this.el.addClass(this.overClass);
24164         }
24165         return typeof(this.valid) == 'string' ? 'x-dd-drop-' + this.valid : (
24166             this.valid ? this.dropAllowed : this.dropNotAllowed
24167         );
24168     },
24169
24170     /**
24171      * @hide
24172      */
24173     notifyOver : function(dd, e, data)
24174     {
24175         this.valid = true;
24176         this.fireEvent('over', dd, e, data);
24177         return typeof(this.valid) == 'string' ? 'x-dd-drop-' + this.valid : (
24178             this.valid ? this.dropAllowed : this.dropNotAllowed
24179         );
24180     },
24181
24182     /**
24183      * @hide
24184      */
24185     notifyOut : function(dd, e, data)
24186     {
24187         this.fireEvent('out', dd, e, data);
24188         if(this.overClass){
24189             this.el.removeClass(this.overClass);
24190         }
24191     },
24192
24193     /**
24194      * @hide
24195      */
24196     notifyDrop : function(dd, e, data)
24197     {
24198         this.success = false;
24199         this.fireEvent('drop', dd, e, data);
24200         return this.success;
24201     }
24202 });/*
24203  * Based on:
24204  * Ext JS Library 1.1.1
24205  * Copyright(c) 2006-2007, Ext JS, LLC.
24206  *
24207  * Originally Released Under LGPL - original licence link has changed is not relivant.
24208  *
24209  * Fork - LGPL
24210  * <script type="text/javascript">
24211  */
24212
24213
24214 /**
24215  * @class Roo.dd.DragZone
24216  * @extends Roo.dd.DragSource
24217  * This class provides a container DD instance that proxies for multiple child node sources.<br />
24218  * By default, this class requires that draggable child nodes are registered with {@link Roo.dd.Registry}.
24219  * @constructor
24220  * @param {String/HTMLElement/Element} el The container element
24221  * @param {Object} config
24222  */
24223 Roo.dd.DragZone = function(el, config){
24224     Roo.dd.DragZone.superclass.constructor.call(this, el, config);
24225     if(this.containerScroll){
24226         Roo.dd.ScrollManager.register(this.el);
24227     }
24228 };
24229
24230 Roo.extend(Roo.dd.DragZone, Roo.dd.DragSource, {
24231     /**
24232      * @cfg {Boolean} containerScroll True to register this container with the Scrollmanager
24233      * for auto scrolling during drag operations.
24234      */
24235     /**
24236      * @cfg {String} hlColor The color to use when visually highlighting the drag source in the afterRepair
24237      * method after a failed drop (defaults to "c3daf9" - light blue)
24238      */
24239
24240     /**
24241      * Called when a mousedown occurs in this container. Looks in {@link Roo.dd.Registry}
24242      * for a valid target to drag based on the mouse down. Override this method
24243      * to provide your own lookup logic (e.g. finding a child by class name). Make sure your returned
24244      * object has a "ddel" attribute (with an HTML Element) for other functions to work.
24245      * @param {EventObject} e The mouse down event
24246      * @return {Object} The dragData
24247      */
24248     getDragData : function(e){
24249         return Roo.dd.Registry.getHandleFromEvent(e);
24250     },
24251     
24252     /**
24253      * Called once drag threshold has been reached to initialize the proxy element. By default, it clones the
24254      * this.dragData.ddel
24255      * @param {Number} x The x position of the click on the dragged object
24256      * @param {Number} y The y position of the click on the dragged object
24257      * @return {Boolean} true to continue the drag, false to cancel
24258      */
24259     onInitDrag : function(x, y){
24260         this.proxy.update(this.dragData.ddel.cloneNode(true));
24261         this.onStartDrag(x, y);
24262         return true;
24263     },
24264     
24265     /**
24266      * Called after a repair of an invalid drop. By default, highlights this.dragData.ddel 
24267      */
24268     afterRepair : function(){
24269         if(Roo.enableFx){
24270             Roo.Element.fly(this.dragData.ddel).highlight(this.hlColor || "c3daf9");
24271         }
24272         this.dragging = false;
24273     },
24274
24275     /**
24276      * Called before a repair of an invalid drop to get the XY to animate to. By default returns
24277      * the XY of this.dragData.ddel
24278      * @param {EventObject} e The mouse up event
24279      * @return {Array} The xy location (e.g. [100, 200])
24280      */
24281     getRepairXY : function(e){
24282         return Roo.Element.fly(this.dragData.ddel).getXY();  
24283     }
24284 });/*
24285  * Based on:
24286  * Ext JS Library 1.1.1
24287  * Copyright(c) 2006-2007, Ext JS, LLC.
24288  *
24289  * Originally Released Under LGPL - original licence link has changed is not relivant.
24290  *
24291  * Fork - LGPL
24292  * <script type="text/javascript">
24293  */
24294 /**
24295  * @class Roo.dd.DropZone
24296  * @extends Roo.dd.DropTarget
24297  * This class provides a container DD instance that proxies for multiple child node targets.<br />
24298  * By default, this class requires that child nodes accepting drop are registered with {@link Roo.dd.Registry}.
24299  * @constructor
24300  * @param {String/HTMLElement/Element} el The container element
24301  * @param {Object} config
24302  */
24303 Roo.dd.DropZone = function(el, config){
24304     Roo.dd.DropZone.superclass.constructor.call(this, el, config);
24305 };
24306
24307 Roo.extend(Roo.dd.DropZone, Roo.dd.DropTarget, {
24308     /**
24309      * Returns a custom data object associated with the DOM node that is the target of the event.  By default
24310      * this looks up the event target in the {@link Roo.dd.Registry}, although you can override this method to
24311      * provide your own custom lookup.
24312      * @param {Event} e The event
24313      * @return {Object} data The custom data
24314      */
24315     getTargetFromEvent : function(e){
24316         return Roo.dd.Registry.getTargetFromEvent(e);
24317     },
24318
24319     /**
24320      * Called internally when the DropZone determines that a {@link Roo.dd.DragSource} has entered a drop node
24321      * that it has registered.  This method has no default implementation and should be overridden to provide
24322      * node-specific processing if necessary.
24323      * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from 
24324      * {@link #getTargetFromEvent} for this node)
24325      * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
24326      * @param {Event} e The event
24327      * @param {Object} data An object containing arbitrary data supplied by the drag source
24328      */
24329     onNodeEnter : function(n, dd, e, data){
24330         
24331     },
24332
24333     /**
24334      * Called internally while the DropZone determines that a {@link Roo.dd.DragSource} is over a drop node
24335      * that it has registered.  The default implementation returns this.dropNotAllowed, so it should be
24336      * overridden to provide the proper feedback.
24337      * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
24338      * {@link #getTargetFromEvent} for this node)
24339      * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
24340      * @param {Event} e The event
24341      * @param {Object} data An object containing arbitrary data supplied by the drag source
24342      * @return {String} status The CSS class that communicates the drop status back to the source so that the
24343      * underlying {@link Roo.dd.StatusProxy} can be updated
24344      */
24345     onNodeOver : function(n, dd, e, data){
24346         return this.dropAllowed;
24347     },
24348
24349     /**
24350      * Called internally when the DropZone determines that a {@link Roo.dd.DragSource} has been dragged out of
24351      * the drop node without dropping.  This method has no default implementation and should be overridden to provide
24352      * node-specific processing if necessary.
24353      * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
24354      * {@link #getTargetFromEvent} for this node)
24355      * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
24356      * @param {Event} e The event
24357      * @param {Object} data An object containing arbitrary data supplied by the drag source
24358      */
24359     onNodeOut : function(n, dd, e, data){
24360         
24361     },
24362
24363     /**
24364      * Called internally when the DropZone determines that a {@link Roo.dd.DragSource} has been dropped onto
24365      * the drop node.  The default implementation returns false, so it should be overridden to provide the
24366      * appropriate processing of the drop event and return true so that the drag source's repair action does not run.
24367      * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
24368      * {@link #getTargetFromEvent} for this node)
24369      * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
24370      * @param {Event} e The event
24371      * @param {Object} data An object containing arbitrary data supplied by the drag source
24372      * @return {Boolean} True if the drop was valid, else false
24373      */
24374     onNodeDrop : function(n, dd, e, data){
24375         return false;
24376     },
24377
24378     /**
24379      * Called internally while the DropZone determines that a {@link Roo.dd.DragSource} is being dragged over it,
24380      * but not over any of its registered drop nodes.  The default implementation returns this.dropNotAllowed, so
24381      * it should be overridden to provide the proper feedback if necessary.
24382      * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
24383      * @param {Event} e The event
24384      * @param {Object} data An object containing arbitrary data supplied by the drag source
24385      * @return {String} status The CSS class that communicates the drop status back to the source so that the
24386      * underlying {@link Roo.dd.StatusProxy} can be updated
24387      */
24388     onContainerOver : function(dd, e, data){
24389         return this.dropNotAllowed;
24390     },
24391
24392     /**
24393      * Called internally when the DropZone determines that a {@link Roo.dd.DragSource} has been dropped on it,
24394      * but not on any of its registered drop nodes.  The default implementation returns false, so it should be
24395      * overridden to provide the appropriate processing of the drop event if you need the drop zone itself to
24396      * be able to accept drops.  It should return true when valid so that the drag source's repair action does not run.
24397      * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
24398      * @param {Event} e The event
24399      * @param {Object} data An object containing arbitrary data supplied by the drag source
24400      * @return {Boolean} True if the drop was valid, else false
24401      */
24402     onContainerDrop : function(dd, e, data){
24403         return false;
24404     },
24405
24406     /**
24407      * The function a {@link Roo.dd.DragSource} calls once to notify this drop zone that the source is now over
24408      * the zone.  The default implementation returns this.dropNotAllowed and expects that only registered drop
24409      * nodes can process drag drop operations, so if you need the drop zone itself to be able to process drops
24410      * you should override this method and provide a custom implementation.
24411      * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
24412      * @param {Event} e The event
24413      * @param {Object} data An object containing arbitrary data supplied by the drag source
24414      * @return {String} status The CSS class that communicates the drop status back to the source so that the
24415      * underlying {@link Roo.dd.StatusProxy} can be updated
24416      */
24417     notifyEnter : function(dd, e, data){
24418         return this.dropNotAllowed;
24419     },
24420
24421     /**
24422      * The function a {@link Roo.dd.DragSource} calls continuously while it is being dragged over the drop zone.
24423      * This method will be called on every mouse movement while the drag source is over the drop zone.
24424      * It will call {@link #onNodeOver} while the drag source is over a registered node, and will also automatically
24425      * delegate to the appropriate node-specific methods as necessary when the drag source enters and exits
24426      * registered nodes ({@link #onNodeEnter}, {@link #onNodeOut}). If the drag source is not currently over a
24427      * registered node, it will call {@link #onContainerOver}.
24428      * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
24429      * @param {Event} e The event
24430      * @param {Object} data An object containing arbitrary data supplied by the drag source
24431      * @return {String} status The CSS class that communicates the drop status back to the source so that the
24432      * underlying {@link Roo.dd.StatusProxy} can be updated
24433      */
24434     notifyOver : function(dd, e, data){
24435         var n = this.getTargetFromEvent(e);
24436         if(!n){ // not over valid drop target
24437             if(this.lastOverNode){
24438                 this.onNodeOut(this.lastOverNode, dd, e, data);
24439                 this.lastOverNode = null;
24440             }
24441             return this.onContainerOver(dd, e, data);
24442         }
24443         if(this.lastOverNode != n){
24444             if(this.lastOverNode){
24445                 this.onNodeOut(this.lastOverNode, dd, e, data);
24446             }
24447             this.onNodeEnter(n, dd, e, data);
24448             this.lastOverNode = n;
24449         }
24450         return this.onNodeOver(n, dd, e, data);
24451     },
24452
24453     /**
24454      * The function a {@link Roo.dd.DragSource} calls once to notify this drop zone that the source has been dragged
24455      * out of the zone without dropping.  If the drag source is currently over a registered node, the notification
24456      * will be delegated to {@link #onNodeOut} for node-specific handling, otherwise it will be ignored.
24457      * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
24458      * @param {Event} e The event
24459      * @param {Object} data An object containing arbitrary data supplied by the drag zone
24460      */
24461     notifyOut : function(dd, e, data){
24462         if(this.lastOverNode){
24463             this.onNodeOut(this.lastOverNode, dd, e, data);
24464             this.lastOverNode = null;
24465         }
24466     },
24467
24468     /**
24469      * The function a {@link Roo.dd.DragSource} calls once to notify this drop zone that the dragged item has
24470      * been dropped on it.  The drag zone will look up the target node based on the event passed in, and if there
24471      * is a node registered for that event, it will delegate to {@link #onNodeDrop} for node-specific handling,
24472      * otherwise it will call {@link #onContainerDrop}.
24473      * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
24474      * @param {Event} e The event
24475      * @param {Object} data An object containing arbitrary data supplied by the drag source
24476      * @return {Boolean} True if the drop was valid, else false
24477      */
24478     notifyDrop : function(dd, e, data){
24479         if(this.lastOverNode){
24480             this.onNodeOut(this.lastOverNode, dd, e, data);
24481             this.lastOverNode = null;
24482         }
24483         var n = this.getTargetFromEvent(e);
24484         return n ?
24485             this.onNodeDrop(n, dd, e, data) :
24486             this.onContainerDrop(dd, e, data);
24487     },
24488
24489     // private
24490     triggerCacheRefresh : function(){
24491         Roo.dd.DDM.refreshCache(this.groups);
24492     }  
24493 });/*
24494  * Based on:
24495  * Ext JS Library 1.1.1
24496  * Copyright(c) 2006-2007, Ext JS, LLC.
24497  *
24498  * Originally Released Under LGPL - original licence link has changed is not relivant.
24499  *
24500  * Fork - LGPL
24501  * <script type="text/javascript">
24502  */
24503
24504
24505 /**
24506  * @class Roo.data.SortTypes
24507  * @static
24508  * Defines the default sorting (casting?) comparison functions used when sorting data.
24509  */
24510 Roo.data.SortTypes = {
24511     /**
24512      * Default sort that does nothing
24513      * @param {Mixed} s The value being converted
24514      * @return {Mixed} The comparison value
24515      */
24516     none : function(s){
24517         return s;
24518     },
24519     
24520     /**
24521      * The regular expression used to strip tags
24522      * @type {RegExp}
24523      * @property
24524      */
24525     stripTagsRE : /<\/?[^>]+>/gi,
24526     
24527     /**
24528      * Strips all HTML tags to sort on text only
24529      * @param {Mixed} s The value being converted
24530      * @return {String} The comparison value
24531      */
24532     asText : function(s){
24533         return String(s).replace(this.stripTagsRE, "");
24534     },
24535     
24536     /**
24537      * Strips all HTML tags to sort on text only - Case insensitive
24538      * @param {Mixed} s The value being converted
24539      * @return {String} The comparison value
24540      */
24541     asUCText : function(s){
24542         return String(s).toUpperCase().replace(this.stripTagsRE, "");
24543     },
24544     
24545     /**
24546      * Case insensitive string
24547      * @param {Mixed} s The value being converted
24548      * @return {String} The comparison value
24549      */
24550     asUCString : function(s) {
24551         return String(s).toUpperCase();
24552     },
24553     
24554     /**
24555      * Date sorting
24556      * @param {Mixed} s The value being converted
24557      * @return {Number} The comparison value
24558      */
24559     asDate : function(s) {
24560         if(!s){
24561             return 0;
24562         }
24563         if(s instanceof Date){
24564             return s.getTime();
24565         }
24566         return Date.parse(String(s));
24567     },
24568     
24569     /**
24570      * Float sorting
24571      * @param {Mixed} s The value being converted
24572      * @return {Float} The comparison value
24573      */
24574     asFloat : function(s) {
24575         var val = parseFloat(String(s).replace(/,/g, ""));
24576         if(isNaN(val)) {
24577             val = 0;
24578         }
24579         return val;
24580     },
24581     
24582     /**
24583      * Integer sorting
24584      * @param {Mixed} s The value being converted
24585      * @return {Number} The comparison value
24586      */
24587     asInt : function(s) {
24588         var val = parseInt(String(s).replace(/,/g, ""));
24589         if(isNaN(val)) {
24590             val = 0;
24591         }
24592         return val;
24593     }
24594 };/*
24595  * Based on:
24596  * Ext JS Library 1.1.1
24597  * Copyright(c) 2006-2007, Ext JS, LLC.
24598  *
24599  * Originally Released Under LGPL - original licence link has changed is not relivant.
24600  *
24601  * Fork - LGPL
24602  * <script type="text/javascript">
24603  */
24604
24605 /**
24606 * @class Roo.data.Record
24607  * Instances of this class encapsulate both record <em>definition</em> information, and record
24608  * <em>value</em> information for use in {@link Roo.data.Store} objects, or any code which needs
24609  * to access Records cached in an {@link Roo.data.Store} object.<br>
24610  * <p>
24611  * Constructors for this class are generated by passing an Array of field definition objects to {@link #create}.
24612  * Instances are usually only created by {@link Roo.data.Reader} implementations when processing unformatted data
24613  * objects.<br>
24614  * <p>
24615  * Record objects generated by this constructor inherit all the methods of Roo.data.Record listed below.
24616  * @constructor
24617  * This constructor should not be used to create Record objects. Instead, use the constructor generated by
24618  * {@link #create}. The parameters are the same.
24619  * @param {Array} data An associative Array of data values keyed by the field name.
24620  * @param {Object} id (Optional) The id of the record. This id should be unique, and is used by the
24621  * {@link Roo.data.Store} object which owns the Record to index its collection of Records. If
24622  * not specified an integer id is generated.
24623  */
24624 Roo.data.Record = function(data, id){
24625     this.id = (id || id === 0) ? id : ++Roo.data.Record.AUTO_ID;
24626     this.data = data;
24627 };
24628
24629 /**
24630  * Generate a constructor for a specific record layout.
24631  * @param {Array} o An Array of field definition objects which specify field names, and optionally,
24632  * data types, and a mapping for an {@link Roo.data.Reader} to extract the field's value from a data object.
24633  * Each field definition object may contain the following properties: <ul>
24634  * <li><b>name</b> : String<p style="margin-left:1em">The name by which the field is referenced within the Record. This is referenced by,
24635  * for example the <em>dataIndex</em> property in column definition objects passed to {@link Roo.grid.ColumnModel}</p></li>
24636  * <li><b>mapping</b> : String<p style="margin-left:1em">(Optional) A path specification for use by the {@link Roo.data.Reader} implementation
24637  * that is creating the Record to access the data value from the data object. If an {@link Roo.data.JsonReader}
24638  * is being used, then this is a string containing the javascript expression to reference the data relative to 
24639  * the record item's root. If an {@link Roo.data.XmlReader} is being used, this is an {@link Roo.DomQuery} path
24640  * to the data item relative to the record element. If the mapping expression is the same as the field name,
24641  * this may be omitted.</p></li>
24642  * <li><b>type</b> : String<p style="margin-left:1em">(Optional) The data type for conversion to displayable value. Possible values are
24643  * <ul><li>auto (Default, implies no conversion)</li>
24644  * <li>string</li>
24645  * <li>int</li>
24646  * <li>float</li>
24647  * <li>boolean</li>
24648  * <li>date</li></ul></p></li>
24649  * <li><b>sortType</b> : Mixed<p style="margin-left:1em">(Optional) A member of {@link Roo.data.SortTypes}.</p></li>
24650  * <li><b>sortDir</b> : String<p style="margin-left:1em">(Optional) Initial direction to sort. "ASC" or "DESC"</p></li>
24651  * <li><b>convert</b> : Function<p style="margin-left:1em">(Optional) A function which converts the value provided
24652  * by the Reader into an object that will be stored in the Record. It is passed the
24653  * following parameters:<ul>
24654  * <li><b>v</b> : Mixed<p style="margin-left:1em">The data value as read by the Reader.</p></li>
24655  * </ul></p></li>
24656  * <li><b>dateFormat</b> : String<p style="margin-left:1em">(Optional) A format String for the Date.parseDate function.</p></li>
24657  * </ul>
24658  * <br>usage:<br><pre><code>
24659 var TopicRecord = Roo.data.Record.create(
24660     {name: 'title', mapping: 'topic_title'},
24661     {name: 'author', mapping: 'username'},
24662     {name: 'totalPosts', mapping: 'topic_replies', type: 'int'},
24663     {name: 'lastPost', mapping: 'post_time', type: 'date'},
24664     {name: 'lastPoster', mapping: 'user2'},
24665     {name: 'excerpt', mapping: 'post_text'}
24666 );
24667
24668 var myNewRecord = new TopicRecord({
24669     title: 'Do my job please',
24670     author: 'noobie',
24671     totalPosts: 1,
24672     lastPost: new Date(),
24673     lastPoster: 'Animal',
24674     excerpt: 'No way dude!'
24675 });
24676 myStore.add(myNewRecord);
24677 </code></pre>
24678  * @method create
24679  * @static
24680  */
24681 Roo.data.Record.create = function(o){
24682     var f = function(){
24683         f.superclass.constructor.apply(this, arguments);
24684     };
24685     Roo.extend(f, Roo.data.Record);
24686     var p = f.prototype;
24687     p.fields = new Roo.util.MixedCollection(false, function(field){
24688         return field.name;
24689     });
24690     for(var i = 0, len = o.length; i < len; i++){
24691         p.fields.add(new Roo.data.Field(o[i]));
24692     }
24693     f.getField = function(name){
24694         return p.fields.get(name);  
24695     };
24696     return f;
24697 };
24698
24699 Roo.data.Record.AUTO_ID = 1000;
24700 Roo.data.Record.EDIT = 'edit';
24701 Roo.data.Record.REJECT = 'reject';
24702 Roo.data.Record.COMMIT = 'commit';
24703
24704 Roo.data.Record.prototype = {
24705     /**
24706      * Readonly flag - true if this record has been modified.
24707      * @type Boolean
24708      */
24709     dirty : false,
24710     editing : false,
24711     error: null,
24712     modified: null,
24713
24714     // private
24715     join : function(store){
24716         this.store = store;
24717     },
24718
24719     /**
24720      * Set the named field to the specified value.
24721      * @param {String} name The name of the field to set.
24722      * @param {Object} value The value to set the field to.
24723      */
24724     set : function(name, value){
24725         if(this.data[name] == value){
24726             return;
24727         }
24728         this.dirty = true;
24729         if(!this.modified){
24730             this.modified = {};
24731         }
24732         if(typeof this.modified[name] == 'undefined'){
24733             this.modified[name] = this.data[name];
24734         }
24735         this.data[name] = value;
24736         if(!this.editing && this.store){
24737             this.store.afterEdit(this);
24738         }       
24739     },
24740
24741     /**
24742      * Get the value of the named field.
24743      * @param {String} name The name of the field to get the value of.
24744      * @return {Object} The value of the field.
24745      */
24746     get : function(name){
24747         return this.data[name]; 
24748     },
24749
24750     // private
24751     beginEdit : function(){
24752         this.editing = true;
24753         this.modified = {}; 
24754     },
24755
24756     // private
24757     cancelEdit : function(){
24758         this.editing = false;
24759         delete this.modified;
24760     },
24761
24762     // private
24763     endEdit : function(){
24764         this.editing = false;
24765         if(this.dirty && this.store){
24766             this.store.afterEdit(this);
24767         }
24768     },
24769
24770     /**
24771      * Usually called by the {@link Roo.data.Store} which owns the Record.
24772      * Rejects all changes made to the Record since either creation, or the last commit operation.
24773      * Modified fields are reverted to their original values.
24774      * <p>
24775      * Developers should subscribe to the {@link Roo.data.Store#update} event to have their code notified
24776      * of reject operations.
24777      */
24778     reject : function(){
24779         var m = this.modified;
24780         for(var n in m){
24781             if(typeof m[n] != "function"){
24782                 this.data[n] = m[n];
24783             }
24784         }
24785         this.dirty = false;
24786         delete this.modified;
24787         this.editing = false;
24788         if(this.store){
24789             this.store.afterReject(this);
24790         }
24791     },
24792
24793     /**
24794      * Usually called by the {@link Roo.data.Store} which owns the Record.
24795      * Commits all changes made to the Record since either creation, or the last commit operation.
24796      * <p>
24797      * Developers should subscribe to the {@link Roo.data.Store#update} event to have their code notified
24798      * of commit operations.
24799      */
24800     commit : function(){
24801         this.dirty = false;
24802         delete this.modified;
24803         this.editing = false;
24804         if(this.store){
24805             this.store.afterCommit(this);
24806         }
24807     },
24808
24809     // private
24810     hasError : function(){
24811         return this.error != null;
24812     },
24813
24814     // private
24815     clearError : function(){
24816         this.error = null;
24817     },
24818
24819     /**
24820      * Creates a copy of this record.
24821      * @param {String} id (optional) A new record id if you don't want to use this record's id
24822      * @return {Record}
24823      */
24824     copy : function(newId) {
24825         return new this.constructor(Roo.apply({}, this.data), newId || this.id);
24826     }
24827 };/*
24828  * Based on:
24829  * Ext JS Library 1.1.1
24830  * Copyright(c) 2006-2007, Ext JS, LLC.
24831  *
24832  * Originally Released Under LGPL - original licence link has changed is not relivant.
24833  *
24834  * Fork - LGPL
24835  * <script type="text/javascript">
24836  */
24837
24838
24839
24840 /**
24841  * @class Roo.data.Store
24842  * @extends Roo.util.Observable
24843  * The Store class encapsulates a client side cache of {@link Roo.data.Record} objects which provide input data
24844  * for widgets such as the Roo.grid.Grid, or the Roo.form.ComboBox.<br>
24845  * <p>
24846  * A Store object uses an implementation of {@link Roo.data.DataProxy} to access a data object unless you call loadData() directly and pass in your data. The Store object
24847  * has no knowledge of the format of the data returned by the Proxy.<br>
24848  * <p>
24849  * A Store object uses its configured implementation of {@link Roo.data.DataReader} to create {@link Roo.data.Record}
24850  * instances from the data object. These records are cached and made available through accessor functions.
24851  * @constructor
24852  * Creates a new Store.
24853  * @param {Object} config A config object containing the objects needed for the Store to access data,
24854  * and read the data into Records.
24855  */
24856 Roo.data.Store = function(config){
24857     this.data = new Roo.util.MixedCollection(false);
24858     this.data.getKey = function(o){
24859         return o.id;
24860     };
24861     this.baseParams = {};
24862     // private
24863     this.paramNames = {
24864         "start" : "start",
24865         "limit" : "limit",
24866         "sort" : "sort",
24867         "dir" : "dir",
24868         "multisort" : "_multisort"
24869     };
24870
24871     if(config && config.data){
24872         this.inlineData = config.data;
24873         delete config.data;
24874     }
24875
24876     Roo.apply(this, config);
24877     
24878     if(this.reader){ // reader passed
24879         this.reader = Roo.factory(this.reader, Roo.data);
24880         this.reader.xmodule = this.xmodule || false;
24881         if(!this.recordType){
24882             this.recordType = this.reader.recordType;
24883         }
24884         if(this.reader.onMetaChange){
24885             this.reader.onMetaChange = this.onMetaChange.createDelegate(this);
24886         }
24887     }
24888
24889     if(this.recordType){
24890         this.fields = this.recordType.prototype.fields;
24891     }
24892     this.modified = [];
24893
24894     this.addEvents({
24895         /**
24896          * @event datachanged
24897          * Fires when the data cache has changed, and a widget which is using this Store
24898          * as a Record cache should refresh its view.
24899          * @param {Store} this
24900          */
24901         datachanged : true,
24902         /**
24903          * @event metachange
24904          * Fires when this store's reader provides new metadata (fields). This is currently only support for JsonReaders.
24905          * @param {Store} this
24906          * @param {Object} meta The JSON metadata
24907          */
24908         metachange : true,
24909         /**
24910          * @event add
24911          * Fires when Records have been added to the Store
24912          * @param {Store} this
24913          * @param {Roo.data.Record[]} records The array of Records added
24914          * @param {Number} index The index at which the record(s) were added
24915          */
24916         add : true,
24917         /**
24918          * @event remove
24919          * Fires when a Record has been removed from the Store
24920          * @param {Store} this
24921          * @param {Roo.data.Record} record The Record that was removed
24922          * @param {Number} index The index at which the record was removed
24923          */
24924         remove : true,
24925         /**
24926          * @event update
24927          * Fires when a Record has been updated
24928          * @param {Store} this
24929          * @param {Roo.data.Record} record The Record that was updated
24930          * @param {String} operation The update operation being performed.  Value may be one of:
24931          * <pre><code>
24932  Roo.data.Record.EDIT
24933  Roo.data.Record.REJECT
24934  Roo.data.Record.COMMIT
24935          * </code></pre>
24936          */
24937         update : true,
24938         /**
24939          * @event clear
24940          * Fires when the data cache has been cleared.
24941          * @param {Store} this
24942          */
24943         clear : true,
24944         /**
24945          * @event beforeload
24946          * Fires before a request is made for a new data object.  If the beforeload handler returns false
24947          * the load action will be canceled.
24948          * @param {Store} this
24949          * @param {Object} options The loading options that were specified (see {@link #load} for details)
24950          */
24951         beforeload : true,
24952         /**
24953          * @event beforeloadadd
24954          * Fires after a new set of Records has been loaded.
24955          * @param {Store} this
24956          * @param {Roo.data.Record[]} records The Records that were loaded
24957          * @param {Object} options The loading options that were specified (see {@link #load} for details)
24958          */
24959         beforeloadadd : true,
24960         /**
24961          * @event load
24962          * Fires after a new set of Records has been loaded, before they are added to the store.
24963          * @param {Store} this
24964          * @param {Roo.data.Record[]} records The Records that were loaded
24965          * @param {Object} options The loading options that were specified (see {@link #load} for details)
24966          * @params {Object} return from reader
24967          */
24968         load : true,
24969         /**
24970          * @event loadexception
24971          * Fires if an exception occurs in the Proxy during loading.
24972          * Called with the signature of the Proxy's "loadexception" event.
24973          * If you return Json { data: [] , success: false, .... } then this will be thrown with the following args
24974          * 
24975          * @param {Proxy} 
24976          * @param {Object} return from JsonData.reader() - success, totalRecords, records
24977          * @param {Object} load options 
24978          * @param {Object} jsonData from your request (normally this contains the Exception)
24979          */
24980         loadexception : true
24981     });
24982     
24983     if(this.proxy){
24984         this.proxy = Roo.factory(this.proxy, Roo.data);
24985         this.proxy.xmodule = this.xmodule || false;
24986         this.relayEvents(this.proxy,  ["loadexception"]);
24987     }
24988     this.sortToggle = {};
24989     this.sortOrder = []; // array of order of sorting - updated by grid if multisort is enabled.
24990
24991     Roo.data.Store.superclass.constructor.call(this);
24992
24993     if(this.inlineData){
24994         this.loadData(this.inlineData);
24995         delete this.inlineData;
24996     }
24997 };
24998
24999 Roo.extend(Roo.data.Store, Roo.util.Observable, {
25000      /**
25001     * @cfg {boolean} isLocal   flag if data is locally available (and can be always looked up
25002     * without a remote query - used by combo/forms at present.
25003     */
25004     
25005     /**
25006     * @cfg {Roo.data.DataProxy} proxy [required] The Proxy object which provides access to a data object.
25007     */
25008     /**
25009     * @cfg {Array} data Inline data to be loaded when the store is initialized.
25010     */
25011     /**
25012     * @cfg {Roo.data.DataReader} reader [required]  The Reader object which processes the data object and returns
25013     * an Array of Roo.data.record objects which are cached keyed by their <em>id</em> property.
25014     */
25015     /**
25016     * @cfg {Object} baseParams An object containing properties which are to be sent as parameters
25017     * on any HTTP request
25018     */
25019     /**
25020     * @cfg {Object} sortInfo A config object in the format: {field: "fieldName", direction: "ASC|DESC"}
25021     */
25022     /**
25023     * @cfg {Boolean} multiSort enable multi column sorting (sort is based on the order of columns, remote only at present)
25024     */
25025     multiSort: false,
25026     /**
25027     * @cfg {boolean} remoteSort True if sorting is to be handled by requesting the Proxy to provide a refreshed
25028     * version of the data object in sorted order, as opposed to sorting the Record cache in place (defaults to false).
25029     */
25030     remoteSort : false,
25031
25032     /**
25033     * @cfg {boolean} pruneModifiedRecords True to clear all modified record information each time the store is
25034      * loaded or when a record is removed. (defaults to false).
25035     */
25036     pruneModifiedRecords : false,
25037
25038     // private
25039     lastOptions : null,
25040
25041     /**
25042      * Add Records to the Store and fires the add event.
25043      * @param {Roo.data.Record[]} records An Array of Roo.data.Record objects to add to the cache.
25044      */
25045     add : function(records){
25046         records = [].concat(records);
25047         for(var i = 0, len = records.length; i < len; i++){
25048             records[i].join(this);
25049         }
25050         var index = this.data.length;
25051         this.data.addAll(records);
25052         this.fireEvent("add", this, records, index);
25053     },
25054
25055     /**
25056      * Remove a Record from the Store and fires the remove event.
25057      * @param {Ext.data.Record} record The Roo.data.Record object to remove from the cache.
25058      */
25059     remove : function(record){
25060         var index = this.data.indexOf(record);
25061         this.data.removeAt(index);
25062  
25063         if(this.pruneModifiedRecords){
25064             this.modified.remove(record);
25065         }
25066         this.fireEvent("remove", this, record, index);
25067     },
25068
25069     /**
25070      * Remove all Records from the Store and fires the clear event.
25071      */
25072     removeAll : function(){
25073         this.data.clear();
25074         if(this.pruneModifiedRecords){
25075             this.modified = [];
25076         }
25077         this.fireEvent("clear", this);
25078     },
25079
25080     /**
25081      * Inserts Records to the Store at the given index and fires the add event.
25082      * @param {Number} index The start index at which to insert the passed Records.
25083      * @param {Roo.data.Record[]} records An Array of Roo.data.Record objects to add to the cache.
25084      */
25085     insert : function(index, records){
25086         records = [].concat(records);
25087         for(var i = 0, len = records.length; i < len; i++){
25088             this.data.insert(index, records[i]);
25089             records[i].join(this);
25090         }
25091         this.fireEvent("add", this, records, index);
25092     },
25093
25094     /**
25095      * Get the index within the cache of the passed Record.
25096      * @param {Roo.data.Record} record The Roo.data.Record object to to find.
25097      * @return {Number} The index of the passed Record. Returns -1 if not found.
25098      */
25099     indexOf : function(record){
25100         return this.data.indexOf(record);
25101     },
25102
25103     /**
25104      * Get the index within the cache of the Record with the passed id.
25105      * @param {String} id The id of the Record to find.
25106      * @return {Number} The index of the Record. Returns -1 if not found.
25107      */
25108     indexOfId : function(id){
25109         return this.data.indexOfKey(id);
25110     },
25111
25112     /**
25113      * Get the Record with the specified id.
25114      * @param {String} id The id of the Record to find.
25115      * @return {Roo.data.Record} The Record with the passed id. Returns undefined if not found.
25116      */
25117     getById : function(id){
25118         return this.data.key(id);
25119     },
25120
25121     /**
25122      * Get the Record at the specified index.
25123      * @param {Number} index The index of the Record to find.
25124      * @return {Roo.data.Record} The Record at the passed index. Returns undefined if not found.
25125      */
25126     getAt : function(index){
25127         return this.data.itemAt(index);
25128     },
25129
25130     /**
25131      * Returns a range of Records between specified indices.
25132      * @param {Number} startIndex (optional) The starting index (defaults to 0)
25133      * @param {Number} endIndex (optional) The ending index (defaults to the last Record in the Store)
25134      * @return {Roo.data.Record[]} An array of Records
25135      */
25136     getRange : function(start, end){
25137         return this.data.getRange(start, end);
25138     },
25139
25140     // private
25141     storeOptions : function(o){
25142         o = Roo.apply({}, o);
25143         delete o.callback;
25144         delete o.scope;
25145         this.lastOptions = o;
25146     },
25147
25148     /**
25149      * Loads the Record cache from the configured Proxy using the configured Reader.
25150      * <p>
25151      * If using remote paging, then the first load call must specify the <em>start</em>
25152      * and <em>limit</em> properties in the options.params property to establish the initial
25153      * position within the dataset, and the number of Records to cache on each read from the Proxy.
25154      * <p>
25155      * <strong>It is important to note that for remote data sources, loading is asynchronous,
25156      * and this call will return before the new data has been loaded. Perform any post-processing
25157      * in a callback function, or in a "load" event handler.</strong>
25158      * <p>
25159      * @param {Object} options An object containing properties which control loading options:<ul>
25160      * <li>params {Object} An object containing properties to pass as HTTP parameters to a remote data source.</li>
25161      * <li>params.data {Object} if you are using a MemoryProxy / JsonReader, use this as the data to load stuff..
25162      * <pre>
25163                 {
25164                     data : data,  // array of key=>value data like JsonReader
25165                     total : data.length,
25166                     success : true
25167                     
25168                 }
25169         </pre>
25170             }.</li>
25171      * <li>callback {Function} A function to be called after the Records have been loaded. The callback is
25172      * passed the following arguments:<ul>
25173      * <li>r : Roo.data.Record[]</li>
25174      * <li>options: Options object from the load call</li>
25175      * <li>success: Boolean success indicator</li></ul></li>
25176      * <li>scope {Object} Scope with which to call the callback (defaults to the Store object)</li>
25177      * <li>add {Boolean} indicator to append loaded records rather than replace the current cache.</li>
25178      * </ul>
25179      */
25180     load : function(options){
25181         options = options || {};
25182         if(this.fireEvent("beforeload", this, options) !== false){
25183             this.storeOptions(options);
25184             var p = Roo.apply(options.params || {}, this.baseParams);
25185             // if meta was not loaded from remote source.. try requesting it.
25186             if (!this.reader.metaFromRemote) {
25187                 p._requestMeta = 1;
25188             }
25189             if(this.sortInfo && this.remoteSort){
25190                 var pn = this.paramNames;
25191                 p[pn["sort"]] = this.sortInfo.field;
25192                 p[pn["dir"]] = this.sortInfo.direction;
25193             }
25194             if (this.multiSort) {
25195                 var pn = this.paramNames;
25196                 p[pn["multisort"]] = Roo.encode( { sort : this.sortToggle, order: this.sortOrder });
25197             }
25198             
25199             this.proxy.load(p, this.reader, this.loadRecords, this, options);
25200         }
25201     },
25202
25203     /**
25204      * Reloads the Record cache from the configured Proxy using the configured Reader and
25205      * the options from the last load operation performed.
25206      * @param {Object} options (optional) An object containing properties which may override the options
25207      * used in the last load operation. See {@link #load} for details (defaults to null, in which case
25208      * the most recently used options are reused).
25209      */
25210     reload : function(options){
25211         this.load(Roo.applyIf(options||{}, this.lastOptions));
25212     },
25213
25214     // private
25215     // Called as a callback by the Reader during a load operation.
25216     loadRecords : function(o, options, success){
25217          
25218         if(!o){
25219             if(success !== false){
25220                 this.fireEvent("load", this, [], options, o);
25221             }
25222             if(options.callback){
25223                 options.callback.call(options.scope || this, [], options, false);
25224             }
25225             return;
25226         }
25227         // if data returned failure - throw an exception.
25228         if (o.success === false) {
25229             // show a message if no listener is registered.
25230             if (!this.hasListener('loadexception') && typeof(o.raw.errorMsg) != 'undefined') {
25231                     Roo.MessageBox.alert("Error loading",o.raw.errorMsg);
25232             }
25233             // loadmask wil be hooked into this..
25234             this.fireEvent("loadexception", this, o, options, o.raw.errorMsg);
25235             return;
25236         }
25237         var r = o.records, t = o.totalRecords || r.length;
25238         
25239         this.fireEvent("beforeloadadd", this, r, options, o);
25240         
25241         if(!options || options.add !== true){
25242             if(this.pruneModifiedRecords){
25243                 this.modified = [];
25244             }
25245             for(var i = 0, len = r.length; i < len; i++){
25246                 r[i].join(this);
25247             }
25248             if(this.snapshot){
25249                 this.data = this.snapshot;
25250                 delete this.snapshot;
25251             }
25252             this.data.clear();
25253             this.data.addAll(r);
25254             this.totalLength = t;
25255             this.applySort();
25256             this.fireEvent("datachanged", this);
25257         }else{
25258             this.totalLength = Math.max(t, this.data.length+r.length);
25259             this.add(r);
25260         }
25261         
25262         if(this.parent && !Roo.isIOS && !this.useNativeIOS && this.parent.emptyTitle.length) {
25263                 
25264             var e = new Roo.data.Record({});
25265
25266             e.set(this.parent.displayField, this.parent.emptyTitle);
25267             e.set(this.parent.valueField, '');
25268
25269             this.insert(0, e);
25270         }
25271             
25272         this.fireEvent("load", this, r, options, o);
25273         if(options.callback){
25274             options.callback.call(options.scope || this, r, options, true);
25275         }
25276     },
25277
25278
25279     /**
25280      * Loads data from a passed data block. A Reader which understands the format of the data
25281      * must have been configured in the constructor.
25282      * @param {Object} data The data block from which to read the Records.  The format of the data expected
25283      * is dependent on the type of Reader that is configured and should correspond to that Reader's readRecords parameter.
25284      * @param {Boolean} append (Optional) True to append the new Records rather than replace the existing cache.
25285      */
25286     loadData : function(o, append){
25287         var r = this.reader.readRecords(o);
25288         this.loadRecords(r, {add: append}, true);
25289     },
25290     
25291      /**
25292      * using 'cn' the nested child reader read the child array into it's child stores.
25293      * @param {Object} rec The record with a 'children array
25294      */
25295     loadDataFromChildren : function(rec)
25296     {
25297         this.loadData(this.reader.toLoadData(rec));
25298     },
25299     
25300
25301     /**
25302      * Gets the number of cached records.
25303      * <p>
25304      * <em>If using paging, this may not be the total size of the dataset. If the data object
25305      * used by the Reader contains the dataset size, then the getTotalCount() function returns
25306      * the data set size</em>
25307      */
25308     getCount : function(){
25309         return this.data.length || 0;
25310     },
25311
25312     /**
25313      * Gets the total number of records in the dataset as returned by the server.
25314      * <p>
25315      * <em>If using paging, for this to be accurate, the data object used by the Reader must contain
25316      * the dataset size</em>
25317      */
25318     getTotalCount : function(){
25319         return this.totalLength || 0;
25320     },
25321
25322     /**
25323      * Returns the sort state of the Store as an object with two properties:
25324      * <pre><code>
25325  field {String} The name of the field by which the Records are sorted
25326  direction {String} The sort order, "ASC" or "DESC"
25327      * </code></pre>
25328      */
25329     getSortState : function(){
25330         return this.sortInfo;
25331     },
25332
25333     // private
25334     applySort : function(){
25335         if(this.sortInfo && !this.remoteSort){
25336             var s = this.sortInfo, f = s.field;
25337             var st = this.fields.get(f).sortType;
25338             var fn = function(r1, r2){
25339                 var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
25340                 return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
25341             };
25342             this.data.sort(s.direction, fn);
25343             if(this.snapshot && this.snapshot != this.data){
25344                 this.snapshot.sort(s.direction, fn);
25345             }
25346         }
25347     },
25348
25349     /**
25350      * Sets the default sort column and order to be used by the next load operation.
25351      * @param {String} fieldName The name of the field to sort by.
25352      * @param {String} dir (optional) The sort order, "ASC" or "DESC" (defaults to "ASC")
25353      */
25354     setDefaultSort : function(field, dir){
25355         this.sortInfo = {field: field, direction: dir ? dir.toUpperCase() : "ASC"};
25356     },
25357
25358     /**
25359      * Sort the Records.
25360      * If remote sorting is used, the sort is performed on the server, and the cache is
25361      * reloaded. If local sorting is used, the cache is sorted internally.
25362      * @param {String} fieldName The name of the field to sort by.
25363      * @param {String} dir (optional) The sort order, "ASC" or "DESC" (defaults to "ASC")
25364      */
25365     sort : function(fieldName, dir){
25366         var f = this.fields.get(fieldName);
25367         if(!dir){
25368             this.sortToggle[f.name] = this.sortToggle[f.name] || f.sortDir;
25369             
25370             if(this.multiSort || (this.sortInfo && this.sortInfo.field == f.name) ){ // toggle sort dir
25371                 dir = (this.sortToggle[f.name] || "ASC").toggle("ASC", "DESC");
25372             }else{
25373                 dir = f.sortDir;
25374             }
25375         }
25376         this.sortToggle[f.name] = dir;
25377         this.sortInfo = {field: f.name, direction: dir};
25378         if(!this.remoteSort){
25379             this.applySort();
25380             this.fireEvent("datachanged", this);
25381         }else{
25382             this.load(this.lastOptions);
25383         }
25384     },
25385
25386     /**
25387      * Calls the specified function for each of the Records in the cache.
25388      * @param {Function} fn The function to call. The Record is passed as the first parameter.
25389      * Returning <em>false</em> aborts and exits the iteration.
25390      * @param {Object} scope (optional) The scope in which to call the function (defaults to the Record).
25391      */
25392     each : function(fn, scope){
25393         this.data.each(fn, scope);
25394     },
25395
25396     /**
25397      * Gets all records modified since the last commit.  Modified records are persisted across load operations
25398      * (e.g., during paging).
25399      * @return {Roo.data.Record[]} An array of Records containing outstanding modifications.
25400      */
25401     getModifiedRecords : function(){
25402         return this.modified;
25403     },
25404
25405     // private
25406     createFilterFn : function(property, value, anyMatch){
25407         if(!value.exec){ // not a regex
25408             value = String(value);
25409             if(value.length == 0){
25410                 return false;
25411             }
25412             value = new RegExp((anyMatch === true ? '' : '^') + Roo.escapeRe(value), "i");
25413         }
25414         return function(r){
25415             return value.test(r.data[property]);
25416         };
25417     },
25418
25419     /**
25420      * Sums the value of <i>property</i> for each record between start and end and returns the result.
25421      * @param {String} property A field on your records
25422      * @param {Number} start The record index to start at (defaults to 0)
25423      * @param {Number} end The last record index to include (defaults to length - 1)
25424      * @return {Number} The sum
25425      */
25426     sum : function(property, start, end){
25427         var rs = this.data.items, v = 0;
25428         start = start || 0;
25429         end = (end || end === 0) ? end : rs.length-1;
25430
25431         for(var i = start; i <= end; i++){
25432             v += (rs[i].data[property] || 0);
25433         }
25434         return v;
25435     },
25436
25437     /**
25438      * Filter the records by a specified property.
25439      * @param {String} field A field on your records
25440      * @param {String/RegExp} value Either a string that the field
25441      * should start with or a RegExp to test against the field
25442      * @param {Boolean} anyMatch True to match any part not just the beginning
25443      */
25444     filter : function(property, value, anyMatch){
25445         var fn = this.createFilterFn(property, value, anyMatch);
25446         return fn ? this.filterBy(fn) : this.clearFilter();
25447     },
25448
25449     /**
25450      * Filter by a function. The specified function will be called with each
25451      * record in this data source. If the function returns true the record is included,
25452      * otherwise it is filtered.
25453      * @param {Function} fn The function to be called, it will receive 2 args (record, id)
25454      * @param {Object} scope (optional) The scope of the function (defaults to this)
25455      */
25456     filterBy : function(fn, scope){
25457         this.snapshot = this.snapshot || this.data;
25458         this.data = this.queryBy(fn, scope||this);
25459         this.fireEvent("datachanged", this);
25460     },
25461
25462     /**
25463      * Query the records by a specified property.
25464      * @param {String} field A field on your records
25465      * @param {String/RegExp} value Either a string that the field
25466      * should start with or a RegExp to test against the field
25467      * @param {Boolean} anyMatch True to match any part not just the beginning
25468      * @return {MixedCollection} Returns an Roo.util.MixedCollection of the matched records
25469      */
25470     query : function(property, value, anyMatch){
25471         var fn = this.createFilterFn(property, value, anyMatch);
25472         return fn ? this.queryBy(fn) : this.data.clone();
25473     },
25474
25475     /**
25476      * Query by a function. The specified function will be called with each
25477      * record in this data source. If the function returns true the record is included
25478      * in the results.
25479      * @param {Function} fn The function to be called, it will receive 2 args (record, id)
25480      * @param {Object} scope (optional) The scope of the function (defaults to this)
25481       @return {MixedCollection} Returns an Roo.util.MixedCollection of the matched records
25482      **/
25483     queryBy : function(fn, scope){
25484         var data = this.snapshot || this.data;
25485         return data.filterBy(fn, scope||this);
25486     },
25487
25488     /**
25489      * Collects unique values for a particular dataIndex from this store.
25490      * @param {String} dataIndex The property to collect
25491      * @param {Boolean} allowNull (optional) Pass true to allow null, undefined or empty string values
25492      * @param {Boolean} bypassFilter (optional) Pass true to collect from all records, even ones which are filtered
25493      * @return {Array} An array of the unique values
25494      **/
25495     collect : function(dataIndex, allowNull, bypassFilter){
25496         var d = (bypassFilter === true && this.snapshot) ?
25497                 this.snapshot.items : this.data.items;
25498         var v, sv, r = [], l = {};
25499         for(var i = 0, len = d.length; i < len; i++){
25500             v = d[i].data[dataIndex];
25501             sv = String(v);
25502             if((allowNull || !Roo.isEmpty(v)) && !l[sv]){
25503                 l[sv] = true;
25504                 r[r.length] = v;
25505             }
25506         }
25507         return r;
25508     },
25509
25510     /**
25511      * Revert to a view of the Record cache with no filtering applied.
25512      * @param {Boolean} suppressEvent If true the filter is cleared silently without notifying listeners
25513      */
25514     clearFilter : function(suppressEvent){
25515         if(this.snapshot && this.snapshot != this.data){
25516             this.data = this.snapshot;
25517             delete this.snapshot;
25518             if(suppressEvent !== true){
25519                 this.fireEvent("datachanged", this);
25520             }
25521         }
25522     },
25523
25524     // private
25525     afterEdit : function(record){
25526         if(this.modified.indexOf(record) == -1){
25527             this.modified.push(record);
25528         }
25529         this.fireEvent("update", this, record, Roo.data.Record.EDIT);
25530     },
25531     
25532     // private
25533     afterReject : function(record){
25534         this.modified.remove(record);
25535         this.fireEvent("update", this, record, Roo.data.Record.REJECT);
25536     },
25537
25538     // private
25539     afterCommit : function(record){
25540         this.modified.remove(record);
25541         this.fireEvent("update", this, record, Roo.data.Record.COMMIT);
25542     },
25543
25544     /**
25545      * Commit all Records with outstanding changes. To handle updates for changes, subscribe to the
25546      * Store's "update" event, and perform updating when the third parameter is Roo.data.Record.COMMIT.
25547      */
25548     commitChanges : function(){
25549         var m = this.modified.slice(0);
25550         this.modified = [];
25551         for(var i = 0, len = m.length; i < len; i++){
25552             m[i].commit();
25553         }
25554     },
25555
25556     /**
25557      * Cancel outstanding changes on all changed records.
25558      */
25559     rejectChanges : function(){
25560         var m = this.modified.slice(0);
25561         this.modified = [];
25562         for(var i = 0, len = m.length; i < len; i++){
25563             m[i].reject();
25564         }
25565     },
25566
25567     onMetaChange : function(meta, rtype, o){
25568         this.recordType = rtype;
25569         this.fields = rtype.prototype.fields;
25570         delete this.snapshot;
25571         this.sortInfo = meta.sortInfo || this.sortInfo;
25572         this.modified = [];
25573         this.fireEvent('metachange', this, this.reader.meta);
25574     },
25575     
25576     moveIndex : function(data, type)
25577     {
25578         var index = this.indexOf(data);
25579         
25580         var newIndex = index + type;
25581         
25582         this.remove(data);
25583         
25584         this.insert(newIndex, data);
25585         
25586     }
25587 });/*
25588  * Based on:
25589  * Ext JS Library 1.1.1
25590  * Copyright(c) 2006-2007, Ext JS, LLC.
25591  *
25592  * Originally Released Under LGPL - original licence link has changed is not relivant.
25593  *
25594  * Fork - LGPL
25595  * <script type="text/javascript">
25596  */
25597
25598 /**
25599  * @class Roo.data.SimpleStore
25600  * @extends Roo.data.Store
25601  * Small helper class to make creating Stores from Array data easier.
25602  * @cfg {Number} id The array index of the record id. Leave blank to auto generate ids.
25603  * @cfg {Array} fields An array of field definition objects, or field name strings.
25604  * @cfg {Object} an existing reader (eg. copied from another store)
25605  * @cfg {Array} data The multi-dimensional array of data
25606  * @cfg {Roo.data.DataProxy} proxy [not-required]  
25607  * @cfg {Roo.data.Reader} reader  [not-required] 
25608  * @constructor
25609  * @param {Object} config
25610  */
25611 Roo.data.SimpleStore = function(config)
25612 {
25613     Roo.data.SimpleStore.superclass.constructor.call(this, {
25614         isLocal : true,
25615         reader: typeof(config.reader) != 'undefined' ? config.reader : new Roo.data.ArrayReader({
25616                 id: config.id
25617             },
25618             Roo.data.Record.create(config.fields)
25619         ),
25620         proxy : new Roo.data.MemoryProxy(config.data)
25621     });
25622     this.load();
25623 };
25624 Roo.extend(Roo.data.SimpleStore, Roo.data.Store);/*
25625  * Based on:
25626  * Ext JS Library 1.1.1
25627  * Copyright(c) 2006-2007, Ext JS, LLC.
25628  *
25629  * Originally Released Under LGPL - original licence link has changed is not relivant.
25630  *
25631  * Fork - LGPL
25632  * <script type="text/javascript">
25633  */
25634
25635 /**
25636 /**
25637  * @extends Roo.data.Store
25638  * @class Roo.data.JsonStore
25639  * Small helper class to make creating Stores for JSON data easier. <br/>
25640 <pre><code>
25641 var store = new Roo.data.JsonStore({
25642     url: 'get-images.php',
25643     root: 'images',
25644     fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}]
25645 });
25646 </code></pre>
25647  * <b>Note: Although they are not listed, this class inherits all of the config options of Store,
25648  * JsonReader and HttpProxy (unless inline data is provided).</b>
25649  * @cfg {Array} fields An array of field definition objects, or field name strings.
25650  * @constructor
25651  * @param {Object} config
25652  */
25653 Roo.data.JsonStore = function(c){
25654     Roo.data.JsonStore.superclass.constructor.call(this, Roo.apply(c, {
25655         proxy: !c.data ? new Roo.data.HttpProxy({url: c.url}) : undefined,
25656         reader: new Roo.data.JsonReader(c, c.fields)
25657     }));
25658 };
25659 Roo.extend(Roo.data.JsonStore, Roo.data.Store);/*
25660  * Based on:
25661  * Ext JS Library 1.1.1
25662  * Copyright(c) 2006-2007, Ext JS, LLC.
25663  *
25664  * Originally Released Under LGPL - original licence link has changed is not relivant.
25665  *
25666  * Fork - LGPL
25667  * <script type="text/javascript">
25668  */
25669
25670  
25671 Roo.data.Field = function(config){
25672     if(typeof config == "string"){
25673         config = {name: config};
25674     }
25675     Roo.apply(this, config);
25676     
25677     if(!this.type){
25678         this.type = "auto";
25679     }
25680     
25681     var st = Roo.data.SortTypes;
25682     // named sortTypes are supported, here we look them up
25683     if(typeof this.sortType == "string"){
25684         this.sortType = st[this.sortType];
25685     }
25686     
25687     // set default sortType for strings and dates
25688     if(!this.sortType){
25689         switch(this.type){
25690             case "string":
25691                 this.sortType = st.asUCString;
25692                 break;
25693             case "date":
25694                 this.sortType = st.asDate;
25695                 break;
25696             default:
25697                 this.sortType = st.none;
25698         }
25699     }
25700
25701     // define once
25702     var stripRe = /[\$,%]/g;
25703
25704     // prebuilt conversion function for this field, instead of
25705     // switching every time we're reading a value
25706     if(!this.convert){
25707         var cv, dateFormat = this.dateFormat;
25708         switch(this.type){
25709             case "":
25710             case "auto":
25711             case undefined:
25712                 cv = function(v){ return v; };
25713                 break;
25714             case "string":
25715                 cv = function(v){ return (v === undefined || v === null) ? '' : String(v); };
25716                 break;
25717             case "int":
25718                 cv = function(v){
25719                     return v !== undefined && v !== null && v !== '' ?
25720                            parseInt(String(v).replace(stripRe, ""), 10) : '';
25721                     };
25722                 break;
25723             case "float":
25724                 cv = function(v){
25725                     return v !== undefined && v !== null && v !== '' ?
25726                            parseFloat(String(v).replace(stripRe, ""), 10) : ''; 
25727                     };
25728                 break;
25729             case "bool":
25730             case "boolean":
25731                 cv = function(v){ return v === true || v === "true" || v == 1; };
25732                 break;
25733             case "date":
25734                 cv = function(v){
25735                     if(!v){
25736                         return '';
25737                     }
25738                     if(v instanceof Date){
25739                         return v;
25740                     }
25741                     if(dateFormat){
25742                         if(dateFormat == "timestamp"){
25743                             return new Date(v*1000);
25744                         }
25745                         return Date.parseDate(v, dateFormat);
25746                     }
25747                     var parsed = Date.parse(v);
25748                     return parsed ? new Date(parsed) : null;
25749                 };
25750              break;
25751             
25752         }
25753         this.convert = cv;
25754     }
25755 };
25756
25757 Roo.data.Field.prototype = {
25758     dateFormat: null,
25759     defaultValue: "",
25760     mapping: null,
25761     sortType : null,
25762     sortDir : "ASC"
25763 };/*
25764  * Based on:
25765  * Ext JS Library 1.1.1
25766  * Copyright(c) 2006-2007, Ext JS, LLC.
25767  *
25768  * Originally Released Under LGPL - original licence link has changed is not relivant.
25769  *
25770  * Fork - LGPL
25771  * <script type="text/javascript">
25772  */
25773  
25774 // Base class for reading structured data from a data source.  This class is intended to be
25775 // extended (see ArrayReader, JsonReader and XmlReader) and should not be created directly.
25776
25777 /**
25778  * @class Roo.data.DataReader
25779  * @abstract
25780  * Base class for reading structured data from a data source.  This class is intended to be
25781  * extended (see {Roo.data.ArrayReader}, {Roo.data.JsonReader} and {Roo.data.XmlReader}) and should not be created directly.
25782  */
25783
25784 Roo.data.DataReader = function(meta, recordType){
25785     
25786     this.meta = meta;
25787     
25788     this.recordType = recordType instanceof Array ? 
25789         Roo.data.Record.create(recordType) : recordType;
25790 };
25791
25792 Roo.data.DataReader.prototype = {
25793     
25794     
25795     readerType : 'Data',
25796      /**
25797      * Create an empty record
25798      * @param {Object} data (optional) - overlay some values
25799      * @return {Roo.data.Record} record created.
25800      */
25801     newRow :  function(d) {
25802         var da =  {};
25803         this.recordType.prototype.fields.each(function(c) {
25804             switch( c.type) {
25805                 case 'int' : da[c.name] = 0; break;
25806                 case 'date' : da[c.name] = new Date(); break;
25807                 case 'float' : da[c.name] = 0.0; break;
25808                 case 'boolean' : da[c.name] = false; break;
25809                 default : da[c.name] = ""; break;
25810             }
25811             
25812         });
25813         return new this.recordType(Roo.apply(da, d));
25814     }
25815     
25816     
25817 };/*
25818  * Based on:
25819  * Ext JS Library 1.1.1
25820  * Copyright(c) 2006-2007, Ext JS, LLC.
25821  *
25822  * Originally Released Under LGPL - original licence link has changed is not relivant.
25823  *
25824  * Fork - LGPL
25825  * <script type="text/javascript">
25826  */
25827
25828 /**
25829  * @class Roo.data.DataProxy
25830  * @extends Roo.util.Observable
25831  * @abstract
25832  * This class is an abstract base class for implementations which provide retrieval of
25833  * unformatted data objects.<br>
25834  * <p>
25835  * DataProxy implementations are usually used in conjunction with an implementation of Roo.data.DataReader
25836  * (of the appropriate type which knows how to parse the data object) to provide a block of
25837  * {@link Roo.data.Records} to an {@link Roo.data.Store}.<br>
25838  * <p>
25839  * Custom implementations must implement the load method as described in
25840  * {@link Roo.data.HttpProxy#load}.
25841  */
25842 Roo.data.DataProxy = function(){
25843     this.addEvents({
25844         /**
25845          * @event beforeload
25846          * Fires before a network request is made to retrieve a data object.
25847          * @param {Object} This DataProxy object.
25848          * @param {Object} params The params parameter to the load function.
25849          */
25850         beforeload : true,
25851         /**
25852          * @event load
25853          * Fires before the load method's callback is called.
25854          * @param {Object} This DataProxy object.
25855          * @param {Object} o The data object.
25856          * @param {Object} arg The callback argument object passed to the load function.
25857          */
25858         load : true,
25859         /**
25860          * @event loadexception
25861          * Fires if an Exception occurs during data retrieval.
25862          * @param {Object} This DataProxy object.
25863          * @param {Object} o The data object.
25864          * @param {Object} arg The callback argument object passed to the load function.
25865          * @param {Object} e The Exception.
25866          */
25867         loadexception : true
25868     });
25869     Roo.data.DataProxy.superclass.constructor.call(this);
25870 };
25871
25872 Roo.extend(Roo.data.DataProxy, Roo.util.Observable);
25873
25874     /**
25875      * @cfg {void} listeners (Not available) Constructor blocks listeners from being set
25876      */
25877 /*
25878  * Based on:
25879  * Ext JS Library 1.1.1
25880  * Copyright(c) 2006-2007, Ext JS, LLC.
25881  *
25882  * Originally Released Under LGPL - original licence link has changed is not relivant.
25883  *
25884  * Fork - LGPL
25885  * <script type="text/javascript">
25886  */
25887 /**
25888  * @class Roo.data.MemoryProxy
25889  * An implementation of Roo.data.DataProxy that simply passes the data specified in its constructor
25890  * to the Reader when its load method is called.
25891  * @constructor
25892  * @param {Object} data The data object which the Reader uses to construct a block of Roo.data.Records.
25893  */
25894 Roo.data.MemoryProxy = function(data){
25895     if (data.data) {
25896         data = data.data;
25897     }
25898     Roo.data.MemoryProxy.superclass.constructor.call(this);
25899     this.data = data;
25900 };
25901
25902 Roo.extend(Roo.data.MemoryProxy, Roo.data.DataProxy, {
25903     
25904     /**
25905      * Load data from the requested source (in this case an in-memory
25906      * data object passed to the constructor), read the data object into
25907      * a block of Roo.data.Records using the passed Roo.data.DataReader implementation, and
25908      * process that block using the passed callback.
25909      * @param {Object} params This parameter is not used by the MemoryProxy class.
25910      * @param {Roo.data.DataReader} reader The Reader object which converts the data
25911      * object into a block of Roo.data.Records.
25912      * @param {Function} callback The function into which to pass the block of Roo.data.records.
25913      * The function must be passed <ul>
25914      * <li>The Record block object</li>
25915      * <li>The "arg" argument from the load function</li>
25916      * <li>A boolean success indicator</li>
25917      * </ul>
25918      * @param {Object} scope The scope in which to call the callback
25919      * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
25920      */
25921     load : function(params, reader, callback, scope, arg){
25922         params = params || {};
25923         var result;
25924         try {
25925             result = reader.readRecords(params.data ? params.data :this.data);
25926         }catch(e){
25927             this.fireEvent("loadexception", this, arg, null, e);
25928             callback.call(scope, null, arg, false);
25929             return;
25930         }
25931         callback.call(scope, result, arg, true);
25932     },
25933     
25934     // private
25935     update : function(params, records){
25936         
25937     }
25938 });/*
25939  * Based on:
25940  * Ext JS Library 1.1.1
25941  * Copyright(c) 2006-2007, Ext JS, LLC.
25942  *
25943  * Originally Released Under LGPL - original licence link has changed is not relivant.
25944  *
25945  * Fork - LGPL
25946  * <script type="text/javascript">
25947  */
25948 /**
25949  * @class Roo.data.HttpProxy
25950  * @extends Roo.data.DataProxy
25951  * An implementation of {@link Roo.data.DataProxy} that reads a data object from an {@link Roo.data.Connection} object
25952  * configured to reference a certain URL.<br><br>
25953  * <p>
25954  * <em>Note that this class cannot be used to retrieve data from a domain other than the domain
25955  * from which the running page was served.<br><br>
25956  * <p>
25957  * For cross-domain access to remote data, use an {@link Roo.data.ScriptTagProxy}.</em><br><br>
25958  * <p>
25959  * Be aware that to enable the browser to parse an XML document, the server must set
25960  * the Content-Type header in the HTTP response to "text/xml".
25961  * @constructor
25962  * @param {Object} conn Connection config options to add to each request (e.g. {url: 'foo.php'} or
25963  * an {@link Roo.data.Connection} object.  If a Connection config is passed, the singleton {@link Roo.Ajax} object
25964  * will be used to make the request.
25965  */
25966 Roo.data.HttpProxy = function(conn){
25967     Roo.data.HttpProxy.superclass.constructor.call(this);
25968     // is conn a conn config or a real conn?
25969     this.conn = conn;
25970     this.useAjax = !conn || !conn.events;
25971   
25972 };
25973
25974 Roo.extend(Roo.data.HttpProxy, Roo.data.DataProxy, {
25975     // thse are take from connection...
25976     
25977     /**
25978      * @cfg {String} url (Optional) The default URL to be used for requests to the server. (defaults to undefined)
25979      */
25980     /**
25981      * @cfg {Object} extraParams (Optional) An object containing properties which are used as
25982      * extra parameters to each request made by this object. (defaults to undefined)
25983      */
25984     /**
25985      * @cfg {Object} defaultHeaders (Optional) An object containing request headers which are added
25986      *  to each request made by this object. (defaults to undefined)
25987      */
25988     /**
25989      * @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)
25990      */
25991     /**
25992      * @cfg {Number} timeout (Optional) The timeout in milliseconds to be used for requests. (defaults to 30000)
25993      */
25994      /**
25995      * @cfg {Boolean} autoAbort (Optional) Whether this request should abort any pending requests. (defaults to false)
25996      * @type Boolean
25997      */
25998   
25999
26000     /**
26001      * @cfg {Boolean} disableCaching (Optional) True to add a unique cache-buster param to GET requests. (defaults to true)
26002      * @type Boolean
26003      */
26004     /**
26005      * Return the {@link Roo.data.Connection} object being used by this Proxy.
26006      * @return {Connection} The Connection object. This object may be used to subscribe to events on
26007      * a finer-grained basis than the DataProxy events.
26008      */
26009     getConnection : function(){
26010         return this.useAjax ? Roo.Ajax : this.conn;
26011     },
26012
26013     /**
26014      * Load data from the configured {@link Roo.data.Connection}, read the data object into
26015      * a block of Roo.data.Records using the passed {@link Roo.data.DataReader} implementation, and
26016      * process that block using the passed callback.
26017      * @param {Object} params An object containing properties which are to be used as HTTP parameters
26018      * for the request to the remote server.
26019      * @param {Roo.data.DataReader} reader The Reader object which converts the data
26020      * object into a block of Roo.data.Records.
26021      * @param {Function} callback The function into which to pass the block of Roo.data.Records.
26022      * The function must be passed <ul>
26023      * <li>The Record block object</li>
26024      * <li>The "arg" argument from the load function</li>
26025      * <li>A boolean success indicator</li>
26026      * </ul>
26027      * @param {Object} scope The scope in which to call the callback
26028      * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
26029      */
26030     load : function(params, reader, callback, scope, arg){
26031         if(this.fireEvent("beforeload", this, params) !== false){
26032             var  o = {
26033                 params : params || {},
26034                 request: {
26035                     callback : callback,
26036                     scope : scope,
26037                     arg : arg
26038                 },
26039                 reader: reader,
26040                 callback : this.loadResponse,
26041                 scope: this
26042             };
26043             if(this.useAjax){
26044                 Roo.applyIf(o, this.conn);
26045                 if(this.activeRequest){
26046                     Roo.Ajax.abort(this.activeRequest);
26047                 }
26048                 this.activeRequest = Roo.Ajax.request(o);
26049             }else{
26050                 this.conn.request(o);
26051             }
26052         }else{
26053             callback.call(scope||this, null, arg, false);
26054         }
26055     },
26056
26057     // private
26058     loadResponse : function(o, success, response){
26059         delete this.activeRequest;
26060         if(!success){
26061             this.fireEvent("loadexception", this, o, response);
26062             o.request.callback.call(o.request.scope, null, o.request.arg, false);
26063             return;
26064         }
26065         var result;
26066         try {
26067             result = o.reader.read(response);
26068         }catch(e){
26069             o.success = false;
26070             o.raw = { errorMsg : response.responseText };
26071             this.fireEvent("loadexception", this, o, response, e);
26072             o.request.callback.call(o.request.scope, o, o.request.arg, false);
26073             return;
26074         }
26075         
26076         this.fireEvent("load", this, o, o.request.arg);
26077         o.request.callback.call(o.request.scope, result, o.request.arg, true);
26078     },
26079
26080     // private
26081     update : function(dataSet){
26082
26083     },
26084
26085     // private
26086     updateResponse : function(dataSet){
26087
26088     }
26089 });/*
26090  * Based on:
26091  * Ext JS Library 1.1.1
26092  * Copyright(c) 2006-2007, Ext JS, LLC.
26093  *
26094  * Originally Released Under LGPL - original licence link has changed is not relivant.
26095  *
26096  * Fork - LGPL
26097  * <script type="text/javascript">
26098  */
26099
26100 /**
26101  * @class Roo.data.ScriptTagProxy
26102  * An implementation of Roo.data.DataProxy that reads a data object from a URL which may be in a domain
26103  * other than the originating domain of the running page.<br><br>
26104  * <p>
26105  * <em>Note that if you are retrieving data from a page that is in a domain that is NOT the same as the originating domain
26106  * of the running page, you must use this class, rather than DataProxy.</em><br><br>
26107  * <p>
26108  * The content passed back from a server resource requested by a ScriptTagProxy is executable JavaScript
26109  * source code that is used as the source inside a &lt;script> tag.<br><br>
26110  * <p>
26111  * In order for the browser to process the returned data, the server must wrap the data object
26112  * with a call to a callback function, the name of which is passed as a parameter by the ScriptTagProxy.
26113  * Below is a Java example for a servlet which returns data for either a ScriptTagProxy, or an HttpProxy
26114  * depending on whether the callback name was passed:
26115  * <p>
26116  * <pre><code>
26117 boolean scriptTag = false;
26118 String cb = request.getParameter("callback");
26119 if (cb != null) {
26120     scriptTag = true;
26121     response.setContentType("text/javascript");
26122 } else {
26123     response.setContentType("application/x-json");
26124 }
26125 Writer out = response.getWriter();
26126 if (scriptTag) {
26127     out.write(cb + "(");
26128 }
26129 out.print(dataBlock.toJsonString());
26130 if (scriptTag) {
26131     out.write(");");
26132 }
26133 </pre></code>
26134  *
26135  * @constructor
26136  * @param {Object} config A configuration object.
26137  */
26138 Roo.data.ScriptTagProxy = function(config){
26139     Roo.data.ScriptTagProxy.superclass.constructor.call(this);
26140     Roo.apply(this, config);
26141     this.head = document.getElementsByTagName("head")[0];
26142 };
26143
26144 Roo.data.ScriptTagProxy.TRANS_ID = 1000;
26145
26146 Roo.extend(Roo.data.ScriptTagProxy, Roo.data.DataProxy, {
26147     /**
26148      * @cfg {String} url The URL from which to request the data object.
26149      */
26150     /**
26151      * @cfg {Number} timeout (Optional) The number of milliseconds to wait for a response. Defaults to 30 seconds.
26152      */
26153     timeout : 30000,
26154     /**
26155      * @cfg {String} callbackParam (Optional) The name of the parameter to pass to the server which tells
26156      * the server the name of the callback function set up by the load call to process the returned data object.
26157      * Defaults to "callback".<p>The server-side processing must read this parameter value, and generate
26158      * javascript output which calls this named function passing the data object as its only parameter.
26159      */
26160     callbackParam : "callback",
26161     /**
26162      *  @cfg {Boolean} nocache (Optional) Defaults to true. Disable cacheing by adding a unique parameter
26163      * name to the request.
26164      */
26165     nocache : true,
26166
26167     /**
26168      * Load data from the configured URL, read the data object into
26169      * a block of Roo.data.Records using the passed Roo.data.DataReader implementation, and
26170      * process that block using the passed callback.
26171      * @param {Object} params An object containing properties which are to be used as HTTP parameters
26172      * for the request to the remote server.
26173      * @param {Roo.data.DataReader} reader The Reader object which converts the data
26174      * object into a block of Roo.data.Records.
26175      * @param {Function} callback The function into which to pass the block of Roo.data.Records.
26176      * The function must be passed <ul>
26177      * <li>The Record block object</li>
26178      * <li>The "arg" argument from the load function</li>
26179      * <li>A boolean success indicator</li>
26180      * </ul>
26181      * @param {Object} scope The scope in which to call the callback
26182      * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
26183      */
26184     load : function(params, reader, callback, scope, arg){
26185         if(this.fireEvent("beforeload", this, params) !== false){
26186
26187             var p = Roo.urlEncode(Roo.apply(params, this.extraParams));
26188
26189             var url = this.url;
26190             url += (url.indexOf("?") != -1 ? "&" : "?") + p;
26191             if(this.nocache){
26192                 url += "&_dc=" + (new Date().getTime());
26193             }
26194             var transId = ++Roo.data.ScriptTagProxy.TRANS_ID;
26195             var trans = {
26196                 id : transId,
26197                 cb : "stcCallback"+transId,
26198                 scriptId : "stcScript"+transId,
26199                 params : params,
26200                 arg : arg,
26201                 url : url,
26202                 callback : callback,
26203                 scope : scope,
26204                 reader : reader
26205             };
26206             var conn = this;
26207
26208             window[trans.cb] = function(o){
26209                 conn.handleResponse(o, trans);
26210             };
26211
26212             url += String.format("&{0}={1}", this.callbackParam, trans.cb);
26213
26214             if(this.autoAbort !== false){
26215                 this.abort();
26216             }
26217
26218             trans.timeoutId = this.handleFailure.defer(this.timeout, this, [trans]);
26219
26220             var script = document.createElement("script");
26221             script.setAttribute("src", url);
26222             script.setAttribute("type", "text/javascript");
26223             script.setAttribute("id", trans.scriptId);
26224             this.head.appendChild(script);
26225
26226             this.trans = trans;
26227         }else{
26228             callback.call(scope||this, null, arg, false);
26229         }
26230     },
26231
26232     // private
26233     isLoading : function(){
26234         return this.trans ? true : false;
26235     },
26236
26237     /**
26238      * Abort the current server request.
26239      */
26240     abort : function(){
26241         if(this.isLoading()){
26242             this.destroyTrans(this.trans);
26243         }
26244     },
26245
26246     // private
26247     destroyTrans : function(trans, isLoaded){
26248         this.head.removeChild(document.getElementById(trans.scriptId));
26249         clearTimeout(trans.timeoutId);
26250         if(isLoaded){
26251             window[trans.cb] = undefined;
26252             try{
26253                 delete window[trans.cb];
26254             }catch(e){}
26255         }else{
26256             // if hasn't been loaded, wait for load to remove it to prevent script error
26257             window[trans.cb] = function(){
26258                 window[trans.cb] = undefined;
26259                 try{
26260                     delete window[trans.cb];
26261                 }catch(e){}
26262             };
26263         }
26264     },
26265
26266     // private
26267     handleResponse : function(o, trans){
26268         this.trans = false;
26269         this.destroyTrans(trans, true);
26270         var result;
26271         try {
26272             result = trans.reader.readRecords(o);
26273         }catch(e){
26274             this.fireEvent("loadexception", this, o, trans.arg, e);
26275             trans.callback.call(trans.scope||window, null, trans.arg, false);
26276             return;
26277         }
26278         this.fireEvent("load", this, o, trans.arg);
26279         trans.callback.call(trans.scope||window, result, trans.arg, true);
26280     },
26281
26282     // private
26283     handleFailure : function(trans){
26284         this.trans = false;
26285         this.destroyTrans(trans, false);
26286         this.fireEvent("loadexception", this, null, trans.arg);
26287         trans.callback.call(trans.scope||window, null, trans.arg, false);
26288     }
26289 });/*
26290  * Based on:
26291  * Ext JS Library 1.1.1
26292  * Copyright(c) 2006-2007, Ext JS, LLC.
26293  *
26294  * Originally Released Under LGPL - original licence link has changed is not relivant.
26295  *
26296  * Fork - LGPL
26297  * <script type="text/javascript">
26298  */
26299
26300 /**
26301  * @class Roo.data.JsonReader
26302  * @extends Roo.data.DataReader
26303  * Data reader class to create an Array of Roo.data.Record objects from a JSON response
26304  * based on mappings in a provided Roo.data.Record constructor.
26305  * 
26306  * The default behaviour of a store is to send ?_requestMeta=1, unless the class has recieved 'metaData' property
26307  * in the reply previously. 
26308  * 
26309  * <p>
26310  * Example code:
26311  * <pre><code>
26312 var RecordDef = Roo.data.Record.create([
26313     {name: 'name', mapping: 'name'},     // "mapping" property not needed if it's the same as "name"
26314     {name: 'occupation'}                 // This field will use "occupation" as the mapping.
26315 ]);
26316 var myReader = new Roo.data.JsonReader({
26317     totalProperty: "results",    // The property which contains the total dataset size (optional)
26318     root: "rows",                // The property which contains an Array of row objects
26319     id: "id"                     // The property within each row object that provides an ID for the record (optional)
26320 }, RecordDef);
26321 </code></pre>
26322  * <p>
26323  * This would consume a JSON file like this:
26324  * <pre><code>
26325 { 'results': 2, 'rows': [
26326     { 'id': 1, 'name': 'Bill', occupation: 'Gardener' },
26327     { 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' } ]
26328 }
26329 </code></pre>
26330  * @cfg {String} totalProperty Name of the property from which to retrieve the total number of records
26331  * in the dataset. This is only needed if the whole dataset is not passed in one go, but is being
26332  * paged from the remote server.
26333  * @cfg {String} successProperty Name of the property from which to retrieve the success attribute used by forms.
26334  * @cfg {String} root name of the property which contains the Array of row objects.
26335  * @cfg {String} id Name of the property within a row object that contains a record identifier value.
26336  * @cfg {Array} fields Array of field definition objects
26337  * @constructor
26338  * Create a new JsonReader
26339  * @param {Object} meta Metadata configuration options
26340  * @param {Object} recordType Either an Array of field definition objects,
26341  * or an {@link Roo.data.Record} object created using {@link Roo.data.Record#create}.
26342  */
26343 Roo.data.JsonReader = function(meta, recordType){
26344     
26345     meta = meta || {};
26346     // set some defaults:
26347     Roo.applyIf(meta, {
26348         totalProperty: 'total',
26349         successProperty : 'success',
26350         root : 'data',
26351         id : 'id'
26352     });
26353     
26354     Roo.data.JsonReader.superclass.constructor.call(this, meta, recordType||meta.fields);
26355 };
26356 Roo.extend(Roo.data.JsonReader, Roo.data.DataReader, {
26357     
26358     readerType : 'Json',
26359     
26360     /**
26361      * @prop {Boolean} metaFromRemote  - if the meta data was loaded from the remote source.
26362      * Used by Store query builder to append _requestMeta to params.
26363      * 
26364      */
26365     metaFromRemote : false,
26366     /**
26367      * This method is only used by a DataProxy which has retrieved data from a remote server.
26368      * @param {Object} response The XHR object which contains the JSON data in its responseText.
26369      * @return {Object} data A data block which is used by an Roo.data.Store object as
26370      * a cache of Roo.data.Records.
26371      */
26372     read : function(response){
26373         var json = response.responseText;
26374        
26375         var o = /* eval:var:o */ eval("("+json+")");
26376         if(!o) {
26377             throw {message: "JsonReader.read: Json object not found"};
26378         }
26379         
26380         if(o.metaData){
26381             
26382             delete this.ef;
26383             this.metaFromRemote = true;
26384             this.meta = o.metaData;
26385             this.recordType = Roo.data.Record.create(o.metaData.fields);
26386             this.onMetaChange(this.meta, this.recordType, o);
26387         }
26388         return this.readRecords(o);
26389     },
26390
26391     // private function a store will implement
26392     onMetaChange : function(meta, recordType, o){
26393
26394     },
26395
26396     /**
26397          * @ignore
26398          */
26399     simpleAccess: function(obj, subsc) {
26400         return obj[subsc];
26401     },
26402
26403         /**
26404          * @ignore
26405          */
26406     getJsonAccessor: function(){
26407         var re = /[\[\.]/;
26408         return function(expr) {
26409             try {
26410                 return(re.test(expr))
26411                     ? new Function("obj", "return obj." + expr)
26412                     : function(obj){
26413                         return obj[expr];
26414                     };
26415             } catch(e){}
26416             return Roo.emptyFn;
26417         };
26418     }(),
26419
26420     /**
26421      * Create a data block containing Roo.data.Records from an XML document.
26422      * @param {Object} o An object which contains an Array of row objects in the property specified
26423      * in the config as 'root, and optionally a property, specified in the config as 'totalProperty'
26424      * which contains the total size of the dataset.
26425      * @return {Object} data A data block which is used by an Roo.data.Store object as
26426      * a cache of Roo.data.Records.
26427      */
26428     readRecords : function(o){
26429         /**
26430          * After any data loads, the raw JSON data is available for further custom processing.
26431          * @type Object
26432          */
26433         this.o = o;
26434         var s = this.meta, Record = this.recordType,
26435             f = Record ? Record.prototype.fields : null, fi = f ? f.items : [], fl = f ? f.length : 0;
26436
26437 //      Generate extraction functions for the totalProperty, the root, the id, and for each field
26438         if (!this.ef) {
26439             if(s.totalProperty) {
26440                     this.getTotal = this.getJsonAccessor(s.totalProperty);
26441                 }
26442                 if(s.successProperty) {
26443                     this.getSuccess = this.getJsonAccessor(s.successProperty);
26444                 }
26445                 this.getRoot = s.root ? this.getJsonAccessor(s.root) : function(p){return p;};
26446                 if (s.id) {
26447                         var g = this.getJsonAccessor(s.id);
26448                         this.getId = function(rec) {
26449                                 var r = g(rec);  
26450                                 return (r === undefined || r === "") ? null : r;
26451                         };
26452                 } else {
26453                         this.getId = function(){return null;};
26454                 }
26455             this.ef = [];
26456             for(var jj = 0; jj < fl; jj++){
26457                 f = fi[jj];
26458                 var map = (f.mapping !== undefined && f.mapping !== null) ? f.mapping : f.name;
26459                 this.ef[jj] = this.getJsonAccessor(map);
26460             }
26461         }
26462
26463         var root = this.getRoot(o), c = root.length, totalRecords = c, success = true;
26464         if(s.totalProperty){
26465             var vt = parseInt(this.getTotal(o), 10);
26466             if(!isNaN(vt)){
26467                 totalRecords = vt;
26468             }
26469         }
26470         if(s.successProperty){
26471             var vs = this.getSuccess(o);
26472             if(vs === false || vs === 'false'){
26473                 success = false;
26474             }
26475         }
26476         var records = [];
26477         for(var i = 0; i < c; i++){
26478             var n = root[i];
26479             var values = {};
26480             var id = this.getId(n);
26481             for(var j = 0; j < fl; j++){
26482                 f = fi[j];
26483                                 var v = this.ef[j](n);
26484                                 if (!f.convert) {
26485                                         Roo.log('missing convert for ' + f.name);
26486                                         Roo.log(f);
26487                                         continue;
26488                                 }
26489                                 values[f.name] = f.convert((v !== undefined) ? v : f.defaultValue);
26490             }
26491                         if (!Record) {
26492                                 return {
26493                                         raw : { errorMsg : "JSON Reader Error: fields or metadata not available to create Record" },
26494                                         success : false,
26495                                         records : [],
26496                                         totalRecords : 0
26497                                 };
26498                         }
26499             var record = new Record(values, id);
26500             record.json = n;
26501             records[i] = record;
26502         }
26503         return {
26504             raw : o,
26505             success : success,
26506             records : records,
26507             totalRecords : totalRecords
26508         };
26509     },
26510     // used when loading children.. @see loadDataFromChildren
26511     toLoadData: function(rec)
26512     {
26513         // expect rec just to be an array.. eg [a,b,c, [...] << cn ]
26514         var data = typeof(rec.data.cn) == 'undefined' ? [] : rec.data.cn;
26515         return { data : data, total : data.length };
26516         
26517     }
26518 });/*
26519  * Based on:
26520  * Ext JS Library 1.1.1
26521  * Copyright(c) 2006-2007, Ext JS, LLC.
26522  *
26523  * Originally Released Under LGPL - original licence link has changed is not relivant.
26524  *
26525  * Fork - LGPL
26526  * <script type="text/javascript">
26527  */
26528
26529 /**
26530  * @class Roo.data.XmlReader
26531  * @extends Roo.data.DataReader
26532  * Data reader class to create an Array of {@link Roo.data.Record} objects from an XML document
26533  * based on mappings in a provided Roo.data.Record constructor.<br><br>
26534  * <p>
26535  * <em>Note that in order for the browser to parse a returned XML document, the Content-Type
26536  * header in the HTTP response must be set to "text/xml".</em>
26537  * <p>
26538  * Example code:
26539  * <pre><code>
26540 var RecordDef = Roo.data.Record.create([
26541    {name: 'name', mapping: 'name'},     // "mapping" property not needed if it's the same as "name"
26542    {name: 'occupation'}                 // This field will use "occupation" as the mapping.
26543 ]);
26544 var myReader = new Roo.data.XmlReader({
26545    totalRecords: "results", // The element which contains the total dataset size (optional)
26546    record: "row",           // The repeated element which contains row information
26547    id: "id"                 // The element within the row that provides an ID for the record (optional)
26548 }, RecordDef);
26549 </code></pre>
26550  * <p>
26551  * This would consume an XML file like this:
26552  * <pre><code>
26553 &lt;?xml?>
26554 &lt;dataset>
26555  &lt;results>2&lt;/results>
26556  &lt;row>
26557    &lt;id>1&lt;/id>
26558    &lt;name>Bill&lt;/name>
26559    &lt;occupation>Gardener&lt;/occupation>
26560  &lt;/row>
26561  &lt;row>
26562    &lt;id>2&lt;/id>
26563    &lt;name>Ben&lt;/name>
26564    &lt;occupation>Horticulturalist&lt;/occupation>
26565  &lt;/row>
26566 &lt;/dataset>
26567 </code></pre>
26568  * @cfg {String} totalRecords The DomQuery path from which to retrieve the total number of records
26569  * in the dataset. This is only needed if the whole dataset is not passed in one go, but is being
26570  * paged from the remote server.
26571  * @cfg {String} record The DomQuery path to the repeated element which contains record information.
26572  * @cfg {String} success The DomQuery path to the success attribute used by forms.
26573  * @cfg {String} id The DomQuery path relative from the record element to the element that contains
26574  * a record identifier value.
26575  * @constructor
26576  * Create a new XmlReader
26577  * @param {Object} meta Metadata configuration options
26578  * @param {Mixed} recordType The definition of the data record type to produce.  This can be either a valid
26579  * Record subclass created with {@link Roo.data.Record#create}, or an array of objects with which to call
26580  * Roo.data.Record.create.  See the {@link Roo.data.Record} class for more details.
26581  */
26582 Roo.data.XmlReader = function(meta, recordType){
26583     meta = meta || {};
26584     Roo.data.XmlReader.superclass.constructor.call(this, meta, recordType||meta.fields);
26585 };
26586 Roo.extend(Roo.data.XmlReader, Roo.data.DataReader, {
26587     
26588     readerType : 'Xml',
26589     
26590     /**
26591      * This method is only used by a DataProxy which has retrieved data from a remote server.
26592          * @param {Object} response The XHR object which contains the parsed XML document.  The response is expected
26593          * to contain a method called 'responseXML' that returns an XML document object.
26594      * @return {Object} records A data block which is used by an {@link Roo.data.Store} as
26595      * a cache of Roo.data.Records.
26596      */
26597     read : function(response){
26598         var doc = response.responseXML;
26599         if(!doc) {
26600             throw {message: "XmlReader.read: XML Document not available"};
26601         }
26602         return this.readRecords(doc);
26603     },
26604
26605     /**
26606      * Create a data block containing Roo.data.Records from an XML document.
26607          * @param {Object} doc A parsed XML document.
26608      * @return {Object} records A data block which is used by an {@link Roo.data.Store} as
26609      * a cache of Roo.data.Records.
26610      */
26611     readRecords : function(doc){
26612         /**
26613          * After any data loads/reads, the raw XML Document is available for further custom processing.
26614          * @type XMLDocument
26615          */
26616         this.xmlData = doc;
26617         var root = doc.documentElement || doc;
26618         var q = Roo.DomQuery;
26619         var recordType = this.recordType, fields = recordType.prototype.fields;
26620         var sid = this.meta.id;
26621         var totalRecords = 0, success = true;
26622         if(this.meta.totalRecords){
26623             totalRecords = q.selectNumber(this.meta.totalRecords, root, 0);
26624         }
26625         
26626         if(this.meta.success){
26627             var sv = q.selectValue(this.meta.success, root, true);
26628             success = sv !== false && sv !== 'false';
26629         }
26630         var records = [];
26631         var ns = q.select(this.meta.record, root);
26632         for(var i = 0, len = ns.length; i < len; i++) {
26633                 var n = ns[i];
26634                 var values = {};
26635                 var id = sid ? q.selectValue(sid, n) : undefined;
26636                 for(var j = 0, jlen = fields.length; j < jlen; j++){
26637                     var f = fields.items[j];
26638                 var v = q.selectValue(f.mapping || f.name, n, f.defaultValue);
26639                     v = f.convert(v);
26640                     values[f.name] = v;
26641                 }
26642                 var record = new recordType(values, id);
26643                 record.node = n;
26644                 records[records.length] = record;
26645             }
26646
26647             return {
26648                 success : success,
26649                 records : records,
26650                 totalRecords : totalRecords || records.length
26651             };
26652     }
26653 });/*
26654  * Based on:
26655  * Ext JS Library 1.1.1
26656  * Copyright(c) 2006-2007, Ext JS, LLC.
26657  *
26658  * Originally Released Under LGPL - original licence link has changed is not relivant.
26659  *
26660  * Fork - LGPL
26661  * <script type="text/javascript">
26662  */
26663
26664 /**
26665  * @class Roo.data.ArrayReader
26666  * @extends Roo.data.DataReader
26667  * Data reader class to create an Array of Roo.data.Record objects from an Array.
26668  * Each element of that Array represents a row of data fields. The
26669  * fields are pulled into a Record object using as a subscript, the <em>mapping</em> property
26670  * of the field definition if it exists, or the field's ordinal position in the definition.<br>
26671  * <p>
26672  * Example code:.
26673  * <pre><code>
26674 var RecordDef = Roo.data.Record.create([
26675     {name: 'name', mapping: 1},         // "mapping" only needed if an "id" field is present which
26676     {name: 'occupation', mapping: 2}    // precludes using the ordinal position as the index.
26677 ]);
26678 var myReader = new Roo.data.ArrayReader({
26679     id: 0                     // The subscript within row Array that provides an ID for the Record (optional)
26680 }, RecordDef);
26681 </code></pre>
26682  * <p>
26683  * This would consume an Array like this:
26684  * <pre><code>
26685 [ [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist'] ]
26686   </code></pre>
26687  
26688  * @constructor
26689  * Create a new JsonReader
26690  * @param {Object} meta Metadata configuration options.
26691  * @param {Object|Array} recordType Either an Array of field definition objects
26692  * 
26693  * @cfg {Array} fields Array of field definition objects
26694  * @cfg {String} id Name of the property within a row object that contains a record identifier value.
26695  * as specified to {@link Roo.data.Record#create},
26696  * or an {@link Roo.data.Record} object
26697  *
26698  * 
26699  * created using {@link Roo.data.Record#create}.
26700  */
26701 Roo.data.ArrayReader = function(meta, recordType)
26702 {    
26703     Roo.data.ArrayReader.superclass.constructor.call(this, meta, recordType||meta.fields);
26704 };
26705
26706 Roo.extend(Roo.data.ArrayReader, Roo.data.JsonReader, {
26707     
26708       /**
26709      * Create a data block containing Roo.data.Records from an XML document.
26710      * @param {Object} o An Array of row objects which represents the dataset.
26711      * @return {Object} A data block which is used by an {@link Roo.data.Store} object as
26712      * a cache of Roo.data.Records.
26713      */
26714     readRecords : function(o)
26715     {
26716         var sid = this.meta ? this.meta.id : null;
26717         var recordType = this.recordType, fields = recordType.prototype.fields;
26718         var records = [];
26719         var root = o;
26720         for(var i = 0; i < root.length; i++){
26721             var n = root[i];
26722             var values = {};
26723             var id = ((sid || sid === 0) && n[sid] !== undefined && n[sid] !== "" ? n[sid] : null);
26724             for(var j = 0, jlen = fields.length; j < jlen; j++){
26725                 var f = fields.items[j];
26726                 var k = f.mapping !== undefined && f.mapping !== null ? f.mapping : j;
26727                 var v = n[k] !== undefined ? n[k] : f.defaultValue;
26728                 v = f.convert(v);
26729                 values[f.name] = v;
26730             }
26731             var record = new recordType(values, id);
26732             record.json = n;
26733             records[records.length] = record;
26734         }
26735         return {
26736             records : records,
26737             totalRecords : records.length
26738         };
26739     },
26740     // used when loading children.. @see loadDataFromChildren
26741     toLoadData: function(rec)
26742     {
26743         // expect rec just to be an array.. eg [a,b,c, [...] << cn ]
26744         return typeof(rec.data.cn) == 'undefined' ? [] : rec.data.cn;
26745         
26746     }
26747     
26748     
26749 });/*
26750  * Based on:
26751  * Ext JS Library 1.1.1
26752  * Copyright(c) 2006-2007, Ext JS, LLC.
26753  *
26754  * Originally Released Under LGPL - original licence link has changed is not relivant.
26755  *
26756  * Fork - LGPL
26757  * <script type="text/javascript">
26758  */
26759
26760
26761 /**
26762  * @class Roo.data.Tree
26763  * @extends Roo.util.Observable
26764  * Represents a tree data structure and bubbles all the events for its nodes. The nodes
26765  * in the tree have most standard DOM functionality.
26766  * @constructor
26767  * @param {Node} root (optional) The root node
26768  */
26769 Roo.data.Tree = function(root){
26770    this.nodeHash = {};
26771    /**
26772     * The root node for this tree
26773     * @type Node
26774     */
26775    this.root = null;
26776    if(root){
26777        this.setRootNode(root);
26778    }
26779    this.addEvents({
26780        /**
26781         * @event append
26782         * Fires when a new child node is appended to a node in this tree.
26783         * @param {Tree} tree The owner tree
26784         * @param {Node} parent The parent node
26785         * @param {Node} node The newly appended node
26786         * @param {Number} index The index of the newly appended node
26787         */
26788        "append" : true,
26789        /**
26790         * @event remove
26791         * Fires when a child node is removed from a node in this tree.
26792         * @param {Tree} tree The owner tree
26793         * @param {Node} parent The parent node
26794         * @param {Node} node The child node removed
26795         */
26796        "remove" : true,
26797        /**
26798         * @event move
26799         * Fires when a node is moved to a new location in the tree
26800         * @param {Tree} tree The owner tree
26801         * @param {Node} node The node moved
26802         * @param {Node} oldParent The old parent of this node
26803         * @param {Node} newParent The new parent of this node
26804         * @param {Number} index The index it was moved to
26805         */
26806        "move" : true,
26807        /**
26808         * @event insert
26809         * Fires when a new child node is inserted in a node in this tree.
26810         * @param {Tree} tree The owner tree
26811         * @param {Node} parent The parent node
26812         * @param {Node} node The child node inserted
26813         * @param {Node} refNode The child node the node was inserted before
26814         */
26815        "insert" : true,
26816        /**
26817         * @event beforeappend
26818         * Fires before a new child is appended to a node in this tree, return false to cancel the append.
26819         * @param {Tree} tree The owner tree
26820         * @param {Node} parent The parent node
26821         * @param {Node} node The child node to be appended
26822         */
26823        "beforeappend" : true,
26824        /**
26825         * @event beforeremove
26826         * Fires before a child is removed from a node in this tree, return false to cancel the remove.
26827         * @param {Tree} tree The owner tree
26828         * @param {Node} parent The parent node
26829         * @param {Node} node The child node to be removed
26830         */
26831        "beforeremove" : true,
26832        /**
26833         * @event beforemove
26834         * Fires before a node is moved to a new location in the tree. Return false to cancel the move.
26835         * @param {Tree} tree The owner tree
26836         * @param {Node} node The node being moved
26837         * @param {Node} oldParent The parent of the node
26838         * @param {Node} newParent The new parent the node is moving to
26839         * @param {Number} index The index it is being moved to
26840         */
26841        "beforemove" : true,
26842        /**
26843         * @event beforeinsert
26844         * Fires before a new child is inserted in a node in this tree, return false to cancel the insert.
26845         * @param {Tree} tree The owner tree
26846         * @param {Node} parent The parent node
26847         * @param {Node} node The child node to be inserted
26848         * @param {Node} refNode The child node the node is being inserted before
26849         */
26850        "beforeinsert" : true
26851    });
26852
26853     Roo.data.Tree.superclass.constructor.call(this);
26854 };
26855
26856 Roo.extend(Roo.data.Tree, Roo.util.Observable, {
26857     pathSeparator: "/",
26858
26859     proxyNodeEvent : function(){
26860         return this.fireEvent.apply(this, arguments);
26861     },
26862
26863     /**
26864      * Returns the root node for this tree.
26865      * @return {Node}
26866      */
26867     getRootNode : function(){
26868         return this.root;
26869     },
26870
26871     /**
26872      * Sets the root node for this tree.
26873      * @param {Node} node
26874      * @return {Node}
26875      */
26876     setRootNode : function(node){
26877         this.root = node;
26878         node.ownerTree = this;
26879         node.isRoot = true;
26880         this.registerNode(node);
26881         return node;
26882     },
26883
26884     /**
26885      * Gets a node in this tree by its id.
26886      * @param {String} id
26887      * @return {Node}
26888      */
26889     getNodeById : function(id){
26890         return this.nodeHash[id];
26891     },
26892
26893     registerNode : function(node){
26894         this.nodeHash[node.id] = node;
26895     },
26896
26897     unregisterNode : function(node){
26898         delete this.nodeHash[node.id];
26899     },
26900
26901     toString : function(){
26902         return "[Tree"+(this.id?" "+this.id:"")+"]";
26903     }
26904 });
26905
26906 /**
26907  * @class Roo.data.Node
26908  * @extends Roo.util.Observable
26909  * @cfg {Boolean} leaf true if this node is a leaf and does not have children
26910  * @cfg {String} id The id for this node. If one is not specified, one is generated.
26911  * @constructor
26912  * @param {Object} attributes The attributes/config for the node
26913  */
26914 Roo.data.Node = function(attributes){
26915     /**
26916      * The attributes supplied for the node. You can use this property to access any custom attributes you supplied.
26917      * @type {Object}
26918      */
26919     this.attributes = attributes || {};
26920     this.leaf = this.attributes.leaf;
26921     /**
26922      * The node id. @type String
26923      */
26924     this.id = this.attributes.id;
26925     if(!this.id){
26926         this.id = Roo.id(null, "ynode-");
26927         this.attributes.id = this.id;
26928     }
26929      
26930     
26931     /**
26932      * All child nodes of this node. @type Array
26933      */
26934     this.childNodes = [];
26935     if(!this.childNodes.indexOf){ // indexOf is a must
26936         this.childNodes.indexOf = function(o){
26937             for(var i = 0, len = this.length; i < len; i++){
26938                 if(this[i] == o) {
26939                     return i;
26940                 }
26941             }
26942             return -1;
26943         };
26944     }
26945     /**
26946      * The parent node for this node. @type Node
26947      */
26948     this.parentNode = null;
26949     /**
26950      * The first direct child node of this node, or null if this node has no child nodes. @type Node
26951      */
26952     this.firstChild = null;
26953     /**
26954      * The last direct child node of this node, or null if this node has no child nodes. @type Node
26955      */
26956     this.lastChild = null;
26957     /**
26958      * The node immediately preceding this node in the tree, or null if there is no sibling node. @type Node
26959      */
26960     this.previousSibling = null;
26961     /**
26962      * The node immediately following this node in the tree, or null if there is no sibling node. @type Node
26963      */
26964     this.nextSibling = null;
26965
26966     this.addEvents({
26967        /**
26968         * @event append
26969         * Fires when a new child node is appended
26970         * @param {Tree} tree The owner tree
26971         * @param {Node} this This node
26972         * @param {Node} node The newly appended node
26973         * @param {Number} index The index of the newly appended node
26974         */
26975        "append" : true,
26976        /**
26977         * @event remove
26978         * Fires when a child node is removed
26979         * @param {Tree} tree The owner tree
26980         * @param {Node} this This node
26981         * @param {Node} node The removed node
26982         */
26983        "remove" : true,
26984        /**
26985         * @event move
26986         * Fires when this node is moved to a new location in the tree
26987         * @param {Tree} tree The owner tree
26988         * @param {Node} this This node
26989         * @param {Node} oldParent The old parent of this node
26990         * @param {Node} newParent The new parent of this node
26991         * @param {Number} index The index it was moved to
26992         */
26993        "move" : true,
26994        /**
26995         * @event insert
26996         * Fires when a new child node is inserted.
26997         * @param {Tree} tree The owner tree
26998         * @param {Node} this This node
26999         * @param {Node} node The child node inserted
27000         * @param {Node} refNode The child node the node was inserted before
27001         */
27002        "insert" : true,
27003        /**
27004         * @event beforeappend
27005         * Fires before a new child is appended, return false to cancel the append.
27006         * @param {Tree} tree The owner tree
27007         * @param {Node} this This node
27008         * @param {Node} node The child node to be appended
27009         */
27010        "beforeappend" : true,
27011        /**
27012         * @event beforeremove
27013         * Fires before a child is removed, return false to cancel the remove.
27014         * @param {Tree} tree The owner tree
27015         * @param {Node} this This node
27016         * @param {Node} node The child node to be removed
27017         */
27018        "beforeremove" : true,
27019        /**
27020         * @event beforemove
27021         * Fires before this node is moved to a new location in the tree. Return false to cancel the move.
27022         * @param {Tree} tree The owner tree
27023         * @param {Node} this This node
27024         * @param {Node} oldParent The parent of this node
27025         * @param {Node} newParent The new parent this node is moving to
27026         * @param {Number} index The index it is being moved to
27027         */
27028        "beforemove" : true,
27029        /**
27030         * @event beforeinsert
27031         * Fires before a new child is inserted, return false to cancel the insert.
27032         * @param {Tree} tree The owner tree
27033         * @param {Node} this This node
27034         * @param {Node} node The child node to be inserted
27035         * @param {Node} refNode The child node the node is being inserted before
27036         */
27037        "beforeinsert" : true
27038    });
27039     this.listeners = this.attributes.listeners;
27040     Roo.data.Node.superclass.constructor.call(this);
27041 };
27042
27043 Roo.extend(Roo.data.Node, Roo.util.Observable, {
27044     fireEvent : function(evtName){
27045         // first do standard event for this node
27046         if(Roo.data.Node.superclass.fireEvent.apply(this, arguments) === false){
27047             return false;
27048         }
27049         // then bubble it up to the tree if the event wasn't cancelled
27050         var ot = this.getOwnerTree();
27051         if(ot){
27052             if(ot.proxyNodeEvent.apply(ot, arguments) === false){
27053                 return false;
27054             }
27055         }
27056         return true;
27057     },
27058
27059     /**
27060      * Returns true if this node is a leaf
27061      * @return {Boolean}
27062      */
27063     isLeaf : function(){
27064         return this.leaf === true;
27065     },
27066
27067     // private
27068     setFirstChild : function(node){
27069         this.firstChild = node;
27070     },
27071
27072     //private
27073     setLastChild : function(node){
27074         this.lastChild = node;
27075     },
27076
27077
27078     /**
27079      * Returns true if this node is the last child of its parent
27080      * @return {Boolean}
27081      */
27082     isLast : function(){
27083        return (!this.parentNode ? true : this.parentNode.lastChild == this);
27084     },
27085
27086     /**
27087      * Returns true if this node is the first child of its parent
27088      * @return {Boolean}
27089      */
27090     isFirst : function(){
27091        return (!this.parentNode ? true : this.parentNode.firstChild == this);
27092     },
27093
27094     hasChildNodes : function(){
27095         return !this.isLeaf() && this.childNodes.length > 0;
27096     },
27097
27098     /**
27099      * Insert node(s) as the last child node of this node.
27100      * @param {Node/Array} node The node or Array of nodes to append
27101      * @return {Node} The appended node if single append, or null if an array was passed
27102      */
27103     appendChild : function(node){
27104         var multi = false;
27105         if(node instanceof Array){
27106             multi = node;
27107         }else if(arguments.length > 1){
27108             multi = arguments;
27109         }
27110         
27111         // if passed an array or multiple args do them one by one
27112         if(multi){
27113             for(var i = 0, len = multi.length; i < len; i++) {
27114                 this.appendChild(multi[i]);
27115             }
27116         }else{
27117             if(this.fireEvent("beforeappend", this.ownerTree, this, node) === false){
27118                 return false;
27119             }
27120             var index = this.childNodes.length;
27121             var oldParent = node.parentNode;
27122             // it's a move, make sure we move it cleanly
27123             if(oldParent){
27124                 if(node.fireEvent("beforemove", node.getOwnerTree(), node, oldParent, this, index) === false){
27125                     return false;
27126                 }
27127                 oldParent.removeChild(node);
27128             }
27129             
27130             index = this.childNodes.length;
27131             if(index == 0){
27132                 this.setFirstChild(node);
27133             }
27134             this.childNodes.push(node);
27135             node.parentNode = this;
27136             var ps = this.childNodes[index-1];
27137             if(ps){
27138                 node.previousSibling = ps;
27139                 ps.nextSibling = node;
27140             }else{
27141                 node.previousSibling = null;
27142             }
27143             node.nextSibling = null;
27144             this.setLastChild(node);
27145             node.setOwnerTree(this.getOwnerTree());
27146             this.fireEvent("append", this.ownerTree, this, node, index);
27147             if(this.ownerTree) {
27148                 this.ownerTree.fireEvent("appendnode", this, node, index);
27149             }
27150             if(oldParent){
27151                 node.fireEvent("move", this.ownerTree, node, oldParent, this, index);
27152             }
27153             return node;
27154         }
27155     },
27156
27157     /**
27158      * Removes a child node from this node.
27159      * @param {Node} node The node to remove
27160      * @return {Node} The removed node
27161      */
27162     removeChild : function(node){
27163         var index = this.childNodes.indexOf(node);
27164         if(index == -1){
27165             return false;
27166         }
27167         if(this.fireEvent("beforeremove", this.ownerTree, this, node) === false){
27168             return false;
27169         }
27170
27171         // remove it from childNodes collection
27172         this.childNodes.splice(index, 1);
27173
27174         // update siblings
27175         if(node.previousSibling){
27176             node.previousSibling.nextSibling = node.nextSibling;
27177         }
27178         if(node.nextSibling){
27179             node.nextSibling.previousSibling = node.previousSibling;
27180         }
27181
27182         // update child refs
27183         if(this.firstChild == node){
27184             this.setFirstChild(node.nextSibling);
27185         }
27186         if(this.lastChild == node){
27187             this.setLastChild(node.previousSibling);
27188         }
27189
27190         node.setOwnerTree(null);
27191         // clear any references from the node
27192         node.parentNode = null;
27193         node.previousSibling = null;
27194         node.nextSibling = null;
27195         this.fireEvent("remove", this.ownerTree, this, node);
27196         return node;
27197     },
27198
27199     /**
27200      * Inserts the first node before the second node in this nodes childNodes collection.
27201      * @param {Node} node The node to insert
27202      * @param {Node} refNode The node to insert before (if null the node is appended)
27203      * @return {Node} The inserted node
27204      */
27205     insertBefore : function(node, refNode){
27206         if(!refNode){ // like standard Dom, refNode can be null for append
27207             return this.appendChild(node);
27208         }
27209         // nothing to do
27210         if(node == refNode){
27211             return false;
27212         }
27213
27214         if(this.fireEvent("beforeinsert", this.ownerTree, this, node, refNode) === false){
27215             return false;
27216         }
27217         var index = this.childNodes.indexOf(refNode);
27218         var oldParent = node.parentNode;
27219         var refIndex = index;
27220
27221         // when moving internally, indexes will change after remove
27222         if(oldParent == this && this.childNodes.indexOf(node) < index){
27223             refIndex--;
27224         }
27225
27226         // it's a move, make sure we move it cleanly
27227         if(oldParent){
27228             if(node.fireEvent("beforemove", node.getOwnerTree(), node, oldParent, this, index, refNode) === false){
27229                 return false;
27230             }
27231             oldParent.removeChild(node);
27232         }
27233         if(refIndex == 0){
27234             this.setFirstChild(node);
27235         }
27236         this.childNodes.splice(refIndex, 0, node);
27237         node.parentNode = this;
27238         var ps = this.childNodes[refIndex-1];
27239         if(ps){
27240             node.previousSibling = ps;
27241             ps.nextSibling = node;
27242         }else{
27243             node.previousSibling = null;
27244         }
27245         node.nextSibling = refNode;
27246         refNode.previousSibling = node;
27247         node.setOwnerTree(this.getOwnerTree());
27248         this.fireEvent("insert", this.ownerTree, this, node, refNode);
27249         if(oldParent){
27250             node.fireEvent("move", this.ownerTree, node, oldParent, this, refIndex, refNode);
27251         }
27252         return node;
27253     },
27254
27255     /**
27256      * Returns the child node at the specified index.
27257      * @param {Number} index
27258      * @return {Node}
27259      */
27260     item : function(index){
27261         return this.childNodes[index];
27262     },
27263
27264     /**
27265      * Replaces one child node in this node with another.
27266      * @param {Node} newChild The replacement node
27267      * @param {Node} oldChild The node to replace
27268      * @return {Node} The replaced node
27269      */
27270     replaceChild : function(newChild, oldChild){
27271         this.insertBefore(newChild, oldChild);
27272         this.removeChild(oldChild);
27273         return oldChild;
27274     },
27275
27276     /**
27277      * Returns the index of a child node
27278      * @param {Node} node
27279      * @return {Number} The index of the node or -1 if it was not found
27280      */
27281     indexOf : function(child){
27282         return this.childNodes.indexOf(child);
27283     },
27284
27285     /**
27286      * Returns the tree this node is in.
27287      * @return {Tree}
27288      */
27289     getOwnerTree : function(){
27290         // if it doesn't have one, look for one
27291         if(!this.ownerTree){
27292             var p = this;
27293             while(p){
27294                 if(p.ownerTree){
27295                     this.ownerTree = p.ownerTree;
27296                     break;
27297                 }
27298                 p = p.parentNode;
27299             }
27300         }
27301         return this.ownerTree;
27302     },
27303
27304     /**
27305      * Returns depth of this node (the root node has a depth of 0)
27306      * @return {Number}
27307      */
27308     getDepth : function(){
27309         var depth = 0;
27310         var p = this;
27311         while(p.parentNode){
27312             ++depth;
27313             p = p.parentNode;
27314         }
27315         return depth;
27316     },
27317
27318     // private
27319     setOwnerTree : function(tree){
27320         // if it's move, we need to update everyone
27321         if(tree != this.ownerTree){
27322             if(this.ownerTree){
27323                 this.ownerTree.unregisterNode(this);
27324             }
27325             this.ownerTree = tree;
27326             var cs = this.childNodes;
27327             for(var i = 0, len = cs.length; i < len; i++) {
27328                 cs[i].setOwnerTree(tree);
27329             }
27330             if(tree){
27331                 tree.registerNode(this);
27332             }
27333         }
27334     },
27335
27336     /**
27337      * Returns the path for this node. The path can be used to expand or select this node programmatically.
27338      * @param {String} attr (optional) The attr to use for the path (defaults to the node's id)
27339      * @return {String} The path
27340      */
27341     getPath : function(attr){
27342         attr = attr || "id";
27343         var p = this.parentNode;
27344         var b = [this.attributes[attr]];
27345         while(p){
27346             b.unshift(p.attributes[attr]);
27347             p = p.parentNode;
27348         }
27349         var sep = this.getOwnerTree().pathSeparator;
27350         return sep + b.join(sep);
27351     },
27352
27353     /**
27354      * Bubbles up the tree from this node, calling the specified function with each node. The scope (<i>this</i>) of
27355      * function call will be the scope provided or the current node. The arguments to the function
27356      * will be the args provided or the current node. If the function returns false at any point,
27357      * the bubble is stopped.
27358      * @param {Function} fn The function to call
27359      * @param {Object} scope (optional) The scope of the function (defaults to current node)
27360      * @param {Array} args (optional) The args to call the function with (default to passing the current node)
27361      */
27362     bubble : function(fn, scope, args){
27363         var p = this;
27364         while(p){
27365             if(fn.call(scope || p, args || p) === false){
27366                 break;
27367             }
27368             p = p.parentNode;
27369         }
27370     },
27371
27372     /**
27373      * Cascades down the tree from this node, calling the specified function with each node. The scope (<i>this</i>) of
27374      * function call will be the scope provided or the current node. The arguments to the function
27375      * will be the args provided or the current node. If the function returns false at any point,
27376      * the cascade is stopped on that branch.
27377      * @param {Function} fn The function to call
27378      * @param {Object} scope (optional) The scope of the function (defaults to current node)
27379      * @param {Array} args (optional) The args to call the function with (default to passing the current node)
27380      */
27381     cascade : function(fn, scope, args){
27382         if(fn.call(scope || this, args || this) !== false){
27383             var cs = this.childNodes;
27384             for(var i = 0, len = cs.length; i < len; i++) {
27385                 cs[i].cascade(fn, scope, args);
27386             }
27387         }
27388     },
27389
27390     /**
27391      * Interates the child nodes of this node, calling the specified function with each node. The scope (<i>this</i>) of
27392      * function call will be the scope provided or the current node. The arguments to the function
27393      * will be the args provided or the current node. If the function returns false at any point,
27394      * the iteration stops.
27395      * @param {Function} fn The function to call
27396      * @param {Object} scope (optional) The scope of the function (defaults to current node)
27397      * @param {Array} args (optional) The args to call the function with (default to passing the current node)
27398      */
27399     eachChild : function(fn, scope, args){
27400         var cs = this.childNodes;
27401         for(var i = 0, len = cs.length; i < len; i++) {
27402                 if(fn.call(scope || this, args || cs[i]) === false){
27403                     break;
27404                 }
27405         }
27406     },
27407
27408     /**
27409      * Finds the first child that has the attribute with the specified value.
27410      * @param {String} attribute The attribute name
27411      * @param {Mixed} value The value to search for
27412      * @return {Node} The found child or null if none was found
27413      */
27414     findChild : function(attribute, value){
27415         var cs = this.childNodes;
27416         for(var i = 0, len = cs.length; i < len; i++) {
27417                 if(cs[i].attributes[attribute] == value){
27418                     return cs[i];
27419                 }
27420         }
27421         return null;
27422     },
27423
27424     /**
27425      * Finds the first child by a custom function. The child matches if the function passed
27426      * returns true.
27427      * @param {Function} fn
27428      * @param {Object} scope (optional)
27429      * @return {Node} The found child or null if none was found
27430      */
27431     findChildBy : function(fn, scope){
27432         var cs = this.childNodes;
27433         for(var i = 0, len = cs.length; i < len; i++) {
27434                 if(fn.call(scope||cs[i], cs[i]) === true){
27435                     return cs[i];
27436                 }
27437         }
27438         return null;
27439     },
27440
27441     /**
27442      * Sorts this nodes children using the supplied sort function
27443      * @param {Function} fn
27444      * @param {Object} scope (optional)
27445      */
27446     sort : function(fn, scope){
27447         var cs = this.childNodes;
27448         var len = cs.length;
27449         if(len > 0){
27450             var sortFn = scope ? function(){fn.apply(scope, arguments);} : fn;
27451             cs.sort(sortFn);
27452             for(var i = 0; i < len; i++){
27453                 var n = cs[i];
27454                 n.previousSibling = cs[i-1];
27455                 n.nextSibling = cs[i+1];
27456                 if(i == 0){
27457                     this.setFirstChild(n);
27458                 }
27459                 if(i == len-1){
27460                     this.setLastChild(n);
27461                 }
27462             }
27463         }
27464     },
27465
27466     /**
27467      * Returns true if this node is an ancestor (at any point) of the passed node.
27468      * @param {Node} node
27469      * @return {Boolean}
27470      */
27471     contains : function(node){
27472         return node.isAncestor(this);
27473     },
27474
27475     /**
27476      * Returns true if the passed node is an ancestor (at any point) of this node.
27477      * @param {Node} node
27478      * @return {Boolean}
27479      */
27480     isAncestor : function(node){
27481         var p = this.parentNode;
27482         while(p){
27483             if(p == node){
27484                 return true;
27485             }
27486             p = p.parentNode;
27487         }
27488         return false;
27489     },
27490
27491     toString : function(){
27492         return "[Node"+(this.id?" "+this.id:"")+"]";
27493     }
27494 });/*
27495  * Based on:
27496  * Ext JS Library 1.1.1
27497  * Copyright(c) 2006-2007, Ext JS, LLC.
27498  *
27499  * Originally Released Under LGPL - original licence link has changed is not relivant.
27500  *
27501  * Fork - LGPL
27502  * <script type="text/javascript">
27503  */
27504
27505
27506 /**
27507  * @class Roo.Shadow
27508  * Simple class that can provide a shadow effect for any element.  Note that the element MUST be absolutely positioned,
27509  * and the shadow does not provide any shimming.  This should be used only in simple cases -- for more advanced
27510  * functionality that can also provide the same shadow effect, see the {@link Roo.Layer} class.
27511  * @constructor
27512  * Create a new Shadow
27513  * @param {Object} config The config object
27514  */
27515 Roo.Shadow = function(config){
27516     Roo.apply(this, config);
27517     if(typeof this.mode != "string"){
27518         this.mode = this.defaultMode;
27519     }
27520     var o = this.offset, a = {h: 0};
27521     var rad = Math.floor(this.offset/2);
27522     switch(this.mode.toLowerCase()){ // all this hideous nonsense calculates the various offsets for shadows
27523         case "drop":
27524             a.w = 0;
27525             a.l = a.t = o;
27526             a.t -= 1;
27527             if(Roo.isIE){
27528                 a.l -= this.offset + rad;
27529                 a.t -= this.offset + rad;
27530                 a.w -= rad;
27531                 a.h -= rad;
27532                 a.t += 1;
27533             }
27534         break;
27535         case "sides":
27536             a.w = (o*2);
27537             a.l = -o;
27538             a.t = o-1;
27539             if(Roo.isIE){
27540                 a.l -= (this.offset - rad);
27541                 a.t -= this.offset + rad;
27542                 a.l += 1;
27543                 a.w -= (this.offset - rad)*2;
27544                 a.w -= rad + 1;
27545                 a.h -= 1;
27546             }
27547         break;
27548         case "frame":
27549             a.w = a.h = (o*2);
27550             a.l = a.t = -o;
27551             a.t += 1;
27552             a.h -= 2;
27553             if(Roo.isIE){
27554                 a.l -= (this.offset - rad);
27555                 a.t -= (this.offset - rad);
27556                 a.l += 1;
27557                 a.w -= (this.offset + rad + 1);
27558                 a.h -= (this.offset + rad);
27559                 a.h += 1;
27560             }
27561         break;
27562     };
27563
27564     this.adjusts = a;
27565 };
27566
27567 Roo.Shadow.prototype = {
27568     /**
27569      * @cfg {String} mode
27570      * The shadow display mode.  Supports the following options:<br />
27571      * sides: Shadow displays on both sides and bottom only<br />
27572      * frame: Shadow displays equally on all four sides<br />
27573      * drop: Traditional bottom-right drop shadow (default)
27574      */
27575     mode: false,
27576     /**
27577      * @cfg {String} offset
27578      * The number of pixels to offset the shadow from the element (defaults to 4)
27579      */
27580     offset: 4,
27581
27582     // private
27583     defaultMode: "drop",
27584
27585     /**
27586      * Displays the shadow under the target element
27587      * @param {String/HTMLElement/Element} targetEl The id or element under which the shadow should display
27588      */
27589     show : function(target){
27590         target = Roo.get(target);
27591         if(!this.el){
27592             this.el = Roo.Shadow.Pool.pull();
27593             if(this.el.dom.nextSibling != target.dom){
27594                 this.el.insertBefore(target);
27595             }
27596         }
27597         this.el.setStyle("z-index", this.zIndex || parseInt(target.getStyle("z-index"), 10)-1);
27598         if(Roo.isIE){
27599             this.el.dom.style.filter="progid:DXImageTransform.Microsoft.alpha(opacity=50) progid:DXImageTransform.Microsoft.Blur(pixelradius="+(this.offset)+")";
27600         }
27601         this.realign(
27602             target.getLeft(true),
27603             target.getTop(true),
27604             target.getWidth(),
27605             target.getHeight()
27606         );
27607         this.el.dom.style.display = "block";
27608     },
27609
27610     /**
27611      * Returns true if the shadow is visible, else false
27612      */
27613     isVisible : function(){
27614         return this.el ? true : false;  
27615     },
27616
27617     /**
27618      * Direct alignment when values are already available. Show must be called at least once before
27619      * calling this method to ensure it is initialized.
27620      * @param {Number} left The target element left position
27621      * @param {Number} top The target element top position
27622      * @param {Number} width The target element width
27623      * @param {Number} height The target element height
27624      */
27625     realign : function(l, t, w, h){
27626         if(!this.el){
27627             return;
27628         }
27629         var a = this.adjusts, d = this.el.dom, s = d.style;
27630         var iea = 0;
27631         s.left = (l+a.l)+"px";
27632         s.top = (t+a.t)+"px";
27633         var sw = (w+a.w), sh = (h+a.h), sws = sw +"px", shs = sh + "px";
27634  
27635         if(s.width != sws || s.height != shs){
27636             s.width = sws;
27637             s.height = shs;
27638             if(!Roo.isIE){
27639                 var cn = d.childNodes;
27640                 var sww = Math.max(0, (sw-12))+"px";
27641                 cn[0].childNodes[1].style.width = sww;
27642                 cn[1].childNodes[1].style.width = sww;
27643                 cn[2].childNodes[1].style.width = sww;
27644                 cn[1].style.height = Math.max(0, (sh-12))+"px";
27645             }
27646         }
27647     },
27648
27649     /**
27650      * Hides this shadow
27651      */
27652     hide : function(){
27653         if(this.el){
27654             this.el.dom.style.display = "none";
27655             Roo.Shadow.Pool.push(this.el);
27656             delete this.el;
27657         }
27658     },
27659
27660     /**
27661      * Adjust the z-index of this shadow
27662      * @param {Number} zindex The new z-index
27663      */
27664     setZIndex : function(z){
27665         this.zIndex = z;
27666         if(this.el){
27667             this.el.setStyle("z-index", z);
27668         }
27669     }
27670 };
27671
27672 // Private utility class that manages the internal Shadow cache
27673 Roo.Shadow.Pool = function(){
27674     var p = [];
27675     var markup = Roo.isIE ?
27676                  '<div class="x-ie-shadow"></div>' :
27677                  '<div class="x-shadow"><div class="xst"><div class="xstl"></div><div class="xstc"></div><div class="xstr"></div></div><div class="xsc"><div class="xsml"></div><div class="xsmc"></div><div class="xsmr"></div></div><div class="xsb"><div class="xsbl"></div><div class="xsbc"></div><div class="xsbr"></div></div></div>';
27678     return {
27679         pull : function(){
27680             var sh = p.shift();
27681             if(!sh){
27682                 sh = Roo.get(Roo.DomHelper.insertHtml("beforeBegin", document.body.firstChild, markup));
27683                 sh.autoBoxAdjust = false;
27684             }
27685             return sh;
27686         },
27687
27688         push : function(sh){
27689             p.push(sh);
27690         }
27691     };
27692 }();/*
27693  * Based on:
27694  * Ext JS Library 1.1.1
27695  * Copyright(c) 2006-2007, Ext JS, LLC.
27696  *
27697  * Originally Released Under LGPL - original licence link has changed is not relivant.
27698  *
27699  * Fork - LGPL
27700  * <script type="text/javascript">
27701  */
27702
27703
27704 /**
27705  * @class Roo.SplitBar
27706  * @extends Roo.util.Observable
27707  * Creates draggable splitter bar functionality from two elements (element to be dragged and element to be resized).
27708  * <br><br>
27709  * Usage:
27710  * <pre><code>
27711 var split = new Roo.SplitBar("elementToDrag", "elementToSize",
27712                    Roo.SplitBar.HORIZONTAL, Roo.SplitBar.LEFT);
27713 split.setAdapter(new Roo.SplitBar.AbsoluteLayoutAdapter("container"));
27714 split.minSize = 100;
27715 split.maxSize = 600;
27716 split.animate = true;
27717 split.on('moved', splitterMoved);
27718 </code></pre>
27719  * @constructor
27720  * Create a new SplitBar
27721  * @param {String/HTMLElement/Roo.Element} dragElement The element to be dragged and act as the SplitBar. 
27722  * @param {String/HTMLElement/Roo.Element} resizingElement The element to be resized based on where the SplitBar element is dragged 
27723  * @param {Number} orientation (optional) Either Roo.SplitBar.HORIZONTAL or Roo.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
27724  * @param {Number} placement (optional) Either Roo.SplitBar.LEFT or Roo.SplitBar.RIGHT for horizontal or  
27725                         Roo.SplitBar.TOP or Roo.SplitBar.BOTTOM for vertical. (By default, this is determined automatically by the initial
27726                         position of the SplitBar).
27727  */
27728 Roo.SplitBar = function(dragElement, resizingElement, orientation, placement, existingProxy){
27729     
27730     /** @private */
27731     this.el = Roo.get(dragElement, true);
27732     this.el.dom.unselectable = "on";
27733     /** @private */
27734     this.resizingEl = Roo.get(resizingElement, true);
27735
27736     /**
27737      * @private
27738      * The orientation of the split. Either Roo.SplitBar.HORIZONTAL or Roo.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
27739      * Note: If this is changed after creating the SplitBar, the placement property must be manually updated
27740      * @type Number
27741      */
27742     this.orientation = orientation || Roo.SplitBar.HORIZONTAL;
27743     
27744     /**
27745      * The minimum size of the resizing element. (Defaults to 0)
27746      * @type Number
27747      */
27748     this.minSize = 0;
27749     
27750     /**
27751      * The maximum size of the resizing element. (Defaults to 2000)
27752      * @type Number
27753      */
27754     this.maxSize = 2000;
27755     
27756     /**
27757      * Whether to animate the transition to the new size
27758      * @type Boolean
27759      */
27760     this.animate = false;
27761     
27762     /**
27763      * Whether to create a transparent shim that overlays the page when dragging, enables dragging across iframes.
27764      * @type Boolean
27765      */
27766     this.useShim = false;
27767     
27768     /** @private */
27769     this.shim = null;
27770     
27771     if(!existingProxy){
27772         /** @private */
27773         this.proxy = Roo.SplitBar.createProxy(this.orientation);
27774     }else{
27775         this.proxy = Roo.get(existingProxy).dom;
27776     }
27777     /** @private */
27778     this.dd = new Roo.dd.DDProxy(this.el.dom.id, "XSplitBars", {dragElId : this.proxy.id});
27779     
27780     /** @private */
27781     this.dd.b4StartDrag = this.onStartProxyDrag.createDelegate(this);
27782     
27783     /** @private */
27784     this.dd.endDrag = this.onEndProxyDrag.createDelegate(this);
27785     
27786     /** @private */
27787     this.dragSpecs = {};
27788     
27789     /**
27790      * @private The adapter to use to positon and resize elements
27791      */
27792     this.adapter = new Roo.SplitBar.BasicLayoutAdapter();
27793     this.adapter.init(this);
27794     
27795     if(this.orientation == Roo.SplitBar.HORIZONTAL){
27796         /** @private */
27797         this.placement = placement || (this.el.getX() > this.resizingEl.getX() ? Roo.SplitBar.LEFT : Roo.SplitBar.RIGHT);
27798         this.el.addClass("x-splitbar-h");
27799     }else{
27800         /** @private */
27801         this.placement = placement || (this.el.getY() > this.resizingEl.getY() ? Roo.SplitBar.TOP : Roo.SplitBar.BOTTOM);
27802         this.el.addClass("x-splitbar-v");
27803     }
27804     
27805     this.addEvents({
27806         /**
27807          * @event resize
27808          * Fires when the splitter is moved (alias for {@link #event-moved})
27809          * @param {Roo.SplitBar} this
27810          * @param {Number} newSize the new width or height
27811          */
27812         "resize" : true,
27813         /**
27814          * @event moved
27815          * Fires when the splitter is moved
27816          * @param {Roo.SplitBar} this
27817          * @param {Number} newSize the new width or height
27818          */
27819         "moved" : true,
27820         /**
27821          * @event beforeresize
27822          * Fires before the splitter is dragged
27823          * @param {Roo.SplitBar} this
27824          */
27825         "beforeresize" : true,
27826
27827         "beforeapply" : true
27828     });
27829
27830     Roo.util.Observable.call(this);
27831 };
27832
27833 Roo.extend(Roo.SplitBar, Roo.util.Observable, {
27834     onStartProxyDrag : function(x, y){
27835         this.fireEvent("beforeresize", this);
27836         if(!this.overlay){
27837             var o = Roo.DomHelper.insertFirst(document.body,  {cls: "x-drag-overlay", html: "&#160;"}, true);
27838             o.unselectable();
27839             o.enableDisplayMode("block");
27840             // all splitbars share the same overlay
27841             Roo.SplitBar.prototype.overlay = o;
27842         }
27843         this.overlay.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
27844         this.overlay.show();
27845         Roo.get(this.proxy).setDisplayed("block");
27846         var size = this.adapter.getElementSize(this);
27847         this.activeMinSize = this.getMinimumSize();;
27848         this.activeMaxSize = this.getMaximumSize();;
27849         var c1 = size - this.activeMinSize;
27850         var c2 = Math.max(this.activeMaxSize - size, 0);
27851         if(this.orientation == Roo.SplitBar.HORIZONTAL){
27852             this.dd.resetConstraints();
27853             this.dd.setXConstraint(
27854                 this.placement == Roo.SplitBar.LEFT ? c1 : c2, 
27855                 this.placement == Roo.SplitBar.LEFT ? c2 : c1
27856             );
27857             this.dd.setYConstraint(0, 0);
27858         }else{
27859             this.dd.resetConstraints();
27860             this.dd.setXConstraint(0, 0);
27861             this.dd.setYConstraint(
27862                 this.placement == Roo.SplitBar.TOP ? c1 : c2, 
27863                 this.placement == Roo.SplitBar.TOP ? c2 : c1
27864             );
27865          }
27866         this.dragSpecs.startSize = size;
27867         this.dragSpecs.startPoint = [x, y];
27868         Roo.dd.DDProxy.prototype.b4StartDrag.call(this.dd, x, y);
27869     },
27870     
27871     /** 
27872      * @private Called after the drag operation by the DDProxy
27873      */
27874     onEndProxyDrag : function(e){
27875         Roo.get(this.proxy).setDisplayed(false);
27876         var endPoint = Roo.lib.Event.getXY(e);
27877         if(this.overlay){
27878             this.overlay.hide();
27879         }
27880         var newSize;
27881         if(this.orientation == Roo.SplitBar.HORIZONTAL){
27882             newSize = this.dragSpecs.startSize + 
27883                 (this.placement == Roo.SplitBar.LEFT ?
27884                     endPoint[0] - this.dragSpecs.startPoint[0] :
27885                     this.dragSpecs.startPoint[0] - endPoint[0]
27886                 );
27887         }else{
27888             newSize = this.dragSpecs.startSize + 
27889                 (this.placement == Roo.SplitBar.TOP ?
27890                     endPoint[1] - this.dragSpecs.startPoint[1] :
27891                     this.dragSpecs.startPoint[1] - endPoint[1]
27892                 );
27893         }
27894         newSize = Math.min(Math.max(newSize, this.activeMinSize), this.activeMaxSize);
27895         if(newSize != this.dragSpecs.startSize){
27896             if(this.fireEvent('beforeapply', this, newSize) !== false){
27897                 this.adapter.setElementSize(this, newSize);
27898                 this.fireEvent("moved", this, newSize);
27899                 this.fireEvent("resize", this, newSize);
27900             }
27901         }
27902     },
27903     
27904     /**
27905      * Get the adapter this SplitBar uses
27906      * @return The adapter object
27907      */
27908     getAdapter : function(){
27909         return this.adapter;
27910     },
27911     
27912     /**
27913      * Set the adapter this SplitBar uses
27914      * @param {Object} adapter A SplitBar adapter object
27915      */
27916     setAdapter : function(adapter){
27917         this.adapter = adapter;
27918         this.adapter.init(this);
27919     },
27920     
27921     /**
27922      * Gets the minimum size for the resizing element
27923      * @return {Number} The minimum size
27924      */
27925     getMinimumSize : function(){
27926         return this.minSize;
27927     },
27928     
27929     /**
27930      * Sets the minimum size for the resizing element
27931      * @param {Number} minSize The minimum size
27932      */
27933     setMinimumSize : function(minSize){
27934         this.minSize = minSize;
27935     },
27936     
27937     /**
27938      * Gets the maximum size for the resizing element
27939      * @return {Number} The maximum size
27940      */
27941     getMaximumSize : function(){
27942         return this.maxSize;
27943     },
27944     
27945     /**
27946      * Sets the maximum size for the resizing element
27947      * @param {Number} maxSize The maximum size
27948      */
27949     setMaximumSize : function(maxSize){
27950         this.maxSize = maxSize;
27951     },
27952     
27953     /**
27954      * Sets the initialize size for the resizing element
27955      * @param {Number} size The initial size
27956      */
27957     setCurrentSize : function(size){
27958         var oldAnimate = this.animate;
27959         this.animate = false;
27960         this.adapter.setElementSize(this, size);
27961         this.animate = oldAnimate;
27962     },
27963     
27964     /**
27965      * Destroy this splitbar. 
27966      * @param {Boolean} removeEl True to remove the element
27967      */
27968     destroy : function(removeEl){
27969         if(this.shim){
27970             this.shim.remove();
27971         }
27972         this.dd.unreg();
27973         this.proxy.parentNode.removeChild(this.proxy);
27974         if(removeEl){
27975             this.el.remove();
27976         }
27977     }
27978 });
27979
27980 /**
27981  * @private static Create our own proxy element element. So it will be the same same size on all browsers, we won't use borders. Instead we use a background color.
27982  */
27983 Roo.SplitBar.createProxy = function(dir){
27984     var proxy = new Roo.Element(document.createElement("div"));
27985     proxy.unselectable();
27986     var cls = 'x-splitbar-proxy';
27987     proxy.addClass(cls + ' ' + (dir == Roo.SplitBar.HORIZONTAL ? cls +'-h' : cls + '-v'));
27988     document.body.appendChild(proxy.dom);
27989     return proxy.dom;
27990 };
27991
27992 /** 
27993  * @class Roo.SplitBar.BasicLayoutAdapter
27994  * Default Adapter. It assumes the splitter and resizing element are not positioned
27995  * elements and only gets/sets the width of the element. Generally used for table based layouts.
27996  */
27997 Roo.SplitBar.BasicLayoutAdapter = function(){
27998 };
27999
28000 Roo.SplitBar.BasicLayoutAdapter.prototype = {
28001     // do nothing for now
28002     init : function(s){
28003     
28004     },
28005     /**
28006      * Called before drag operations to get the current size of the resizing element. 
28007      * @param {Roo.SplitBar} s The SplitBar using this adapter
28008      */
28009      getElementSize : function(s){
28010         if(s.orientation == Roo.SplitBar.HORIZONTAL){
28011             return s.resizingEl.getWidth();
28012         }else{
28013             return s.resizingEl.getHeight();
28014         }
28015     },
28016     
28017     /**
28018      * Called after drag operations to set the size of the resizing element.
28019      * @param {Roo.SplitBar} s The SplitBar using this adapter
28020      * @param {Number} newSize The new size to set
28021      * @param {Function} onComplete A function to be invoked when resizing is complete
28022      */
28023     setElementSize : function(s, newSize, onComplete){
28024         if(s.orientation == Roo.SplitBar.HORIZONTAL){
28025             if(!s.animate){
28026                 s.resizingEl.setWidth(newSize);
28027                 if(onComplete){
28028                     onComplete(s, newSize);
28029                 }
28030             }else{
28031                 s.resizingEl.setWidth(newSize, true, .1, onComplete, 'easeOut');
28032             }
28033         }else{
28034             
28035             if(!s.animate){
28036                 s.resizingEl.setHeight(newSize);
28037                 if(onComplete){
28038                     onComplete(s, newSize);
28039                 }
28040             }else{
28041                 s.resizingEl.setHeight(newSize, true, .1, onComplete, 'easeOut');
28042             }
28043         }
28044     }
28045 };
28046
28047 /** 
28048  *@class Roo.SplitBar.AbsoluteLayoutAdapter
28049  * @extends Roo.SplitBar.BasicLayoutAdapter
28050  * Adapter that  moves the splitter element to align with the resized sizing element. 
28051  * Used with an absolute positioned SplitBar.
28052  * @param {String/HTMLElement/Roo.Element} container The container that wraps around the absolute positioned content. If it's
28053  * document.body, make sure you assign an id to the body element.
28054  */
28055 Roo.SplitBar.AbsoluteLayoutAdapter = function(container){
28056     this.basic = new Roo.SplitBar.BasicLayoutAdapter();
28057     this.container = Roo.get(container);
28058 };
28059
28060 Roo.SplitBar.AbsoluteLayoutAdapter.prototype = {
28061     init : function(s){
28062         this.basic.init(s);
28063     },
28064     
28065     getElementSize : function(s){
28066         return this.basic.getElementSize(s);
28067     },
28068     
28069     setElementSize : function(s, newSize, onComplete){
28070         this.basic.setElementSize(s, newSize, this.moveSplitter.createDelegate(this, [s]));
28071     },
28072     
28073     moveSplitter : function(s){
28074         var yes = Roo.SplitBar;
28075         switch(s.placement){
28076             case yes.LEFT:
28077                 s.el.setX(s.resizingEl.getRight());
28078                 break;
28079             case yes.RIGHT:
28080                 s.el.setStyle("right", (this.container.getWidth() - s.resizingEl.getLeft()) + "px");
28081                 break;
28082             case yes.TOP:
28083                 s.el.setY(s.resizingEl.getBottom());
28084                 break;
28085             case yes.BOTTOM:
28086                 s.el.setY(s.resizingEl.getTop() - s.el.getHeight());
28087                 break;
28088         }
28089     }
28090 };
28091
28092 /**
28093  * Orientation constant - Create a vertical SplitBar
28094  * @static
28095  * @type Number
28096  */
28097 Roo.SplitBar.VERTICAL = 1;
28098
28099 /**
28100  * Orientation constant - Create a horizontal SplitBar
28101  * @static
28102  * @type Number
28103  */
28104 Roo.SplitBar.HORIZONTAL = 2;
28105
28106 /**
28107  * Placement constant - The resizing element is to the left of the splitter element
28108  * @static
28109  * @type Number
28110  */
28111 Roo.SplitBar.LEFT = 1;
28112
28113 /**
28114  * Placement constant - The resizing element is to the right of the splitter element
28115  * @static
28116  * @type Number
28117  */
28118 Roo.SplitBar.RIGHT = 2;
28119
28120 /**
28121  * Placement constant - The resizing element is positioned above the splitter element
28122  * @static
28123  * @type Number
28124  */
28125 Roo.SplitBar.TOP = 3;
28126
28127 /**
28128  * Placement constant - The resizing element is positioned under splitter element
28129  * @static
28130  * @type Number
28131  */
28132 Roo.SplitBar.BOTTOM = 4;
28133 /*
28134  * Based on:
28135  * Ext JS Library 1.1.1
28136  * Copyright(c) 2006-2007, Ext JS, LLC.
28137  *
28138  * Originally Released Under LGPL - original licence link has changed is not relivant.
28139  *
28140  * Fork - LGPL
28141  * <script type="text/javascript">
28142  */
28143
28144 /**
28145  * @class Roo.View
28146  * @extends Roo.util.Observable
28147  * Create a "View" for an element based on a data model or UpdateManager and the supplied DomHelper template. 
28148  * This class also supports single and multi selection modes. <br>
28149  * Create a data model bound view:
28150  <pre><code>
28151  var store = new Roo.data.Store(...);
28152
28153  var view = new Roo.View({
28154     el : "my-element",
28155     tpl : '&lt;div id="{0}"&gt;{2} - {1}&lt;/div&gt;', // auto create template
28156  
28157     singleSelect: true,
28158     selectedClass: "ydataview-selected",
28159     store: store
28160  });
28161
28162  // listen for node click?
28163  view.on("click", function(vw, index, node, e){
28164  alert('Node "' + node.id + '" at index: ' + index + " was clicked.");
28165  });
28166
28167  // load XML data
28168  dataModel.load("foobar.xml");
28169  </code></pre>
28170  For an example of creating a JSON/UpdateManager view, see {@link Roo.JsonView}.
28171  * <br><br>
28172  * <b>Note: The root of your template must be a single node. Table/row implementations may work but are not supported due to
28173  * IE"s limited insertion support with tables and Opera"s faulty event bubbling.</b>
28174  * 
28175  * Note: old style constructor is still suported (container, template, config)
28176  * 
28177  * @constructor
28178  * Create a new View
28179  * @param {Object} config The config object
28180  * 
28181  */
28182 Roo.View = function(config, depreciated_tpl, depreciated_config){
28183     
28184     this.parent = false;
28185     
28186     if (typeof(depreciated_tpl) == 'undefined') {
28187         // new way.. - universal constructor.
28188         Roo.apply(this, config);
28189         this.el  = Roo.get(this.el);
28190     } else {
28191         // old format..
28192         this.el  = Roo.get(config);
28193         this.tpl = depreciated_tpl;
28194         Roo.apply(this, depreciated_config);
28195     }
28196     this.wrapEl  = this.el.wrap().wrap();
28197     ///this.el = this.wrapEla.appendChild(document.createElement("div"));
28198     
28199     
28200     if(typeof(this.tpl) == "string"){
28201         this.tpl = new Roo.Template(this.tpl);
28202     } else {
28203         // support xtype ctors..
28204         this.tpl = new Roo.factory(this.tpl, Roo);
28205     }
28206     
28207     
28208     this.tpl.compile();
28209     
28210     /** @private */
28211     this.addEvents({
28212         /**
28213          * @event beforeclick
28214          * Fires before a click is processed. Returns false to cancel the default action.
28215          * @param {Roo.View} this
28216          * @param {Number} index The index of the target node
28217          * @param {HTMLElement} node The target node
28218          * @param {Roo.EventObject} e The raw event object
28219          */
28220             "beforeclick" : true,
28221         /**
28222          * @event click
28223          * Fires when a template node is clicked.
28224          * @param {Roo.View} this
28225          * @param {Number} index The index of the target node
28226          * @param {HTMLElement} node The target node
28227          * @param {Roo.EventObject} e The raw event object
28228          */
28229             "click" : true,
28230         /**
28231          * @event dblclick
28232          * Fires when a template node is double clicked.
28233          * @param {Roo.View} this
28234          * @param {Number} index The index of the target node
28235          * @param {HTMLElement} node The target node
28236          * @param {Roo.EventObject} e The raw event object
28237          */
28238             "dblclick" : true,
28239         /**
28240          * @event contextmenu
28241          * Fires when a template node is right clicked.
28242          * @param {Roo.View} this
28243          * @param {Number} index The index of the target node
28244          * @param {HTMLElement} node The target node
28245          * @param {Roo.EventObject} e The raw event object
28246          */
28247             "contextmenu" : true,
28248         /**
28249          * @event selectionchange
28250          * Fires when the selected nodes change.
28251          * @param {Roo.View} this
28252          * @param {Array} selections Array of the selected nodes
28253          */
28254             "selectionchange" : true,
28255     
28256         /**
28257          * @event beforeselect
28258          * Fires before a selection is made. If any handlers return false, the selection is cancelled.
28259          * @param {Roo.View} this
28260          * @param {HTMLElement} node The node to be selected
28261          * @param {Array} selections Array of currently selected nodes
28262          */
28263             "beforeselect" : true,
28264         /**
28265          * @event preparedata
28266          * Fires on every row to render, to allow you to change the data.
28267          * @param {Roo.View} this
28268          * @param {Object} data to be rendered (change this)
28269          */
28270           "preparedata" : true
28271           
28272           
28273         });
28274
28275
28276
28277     this.el.on({
28278         "click": this.onClick,
28279         "dblclick": this.onDblClick,
28280         "contextmenu": this.onContextMenu,
28281         scope:this
28282     });
28283
28284     this.selections = [];
28285     this.nodes = [];
28286     this.cmp = new Roo.CompositeElementLite([]);
28287     if(this.store){
28288         this.store = Roo.factory(this.store, Roo.data);
28289         this.setStore(this.store, true);
28290     }
28291     
28292     if ( this.footer && this.footer.xtype) {
28293            
28294          var fctr = this.wrapEl.appendChild(document.createElement("div"));
28295         
28296         this.footer.dataSource = this.store;
28297         this.footer.container = fctr;
28298         this.footer = Roo.factory(this.footer, Roo);
28299         fctr.insertFirst(this.el);
28300         
28301         // this is a bit insane - as the paging toolbar seems to detach the el..
28302 //        dom.parentNode.parentNode.parentNode
28303          // they get detached?
28304     }
28305     
28306     
28307     Roo.View.superclass.constructor.call(this);
28308     
28309     
28310 };
28311
28312 Roo.extend(Roo.View, Roo.util.Observable, {
28313     
28314      /**
28315      * @cfg {Roo.data.Store} store Data store to load data from.
28316      */
28317     store : false,
28318     
28319     /**
28320      * @cfg {String|Roo.Element} el The container element.
28321      */
28322     el : '',
28323     
28324     /**
28325      * @cfg {String|Roo.Template} tpl The template used by this View 
28326      */
28327     tpl : false,
28328     /**
28329      * @cfg {String} dataName the named area of the template to use as the data area
28330      *                          Works with domtemplates roo-name="name"
28331      */
28332     dataName: false,
28333     /**
28334      * @cfg {String} selectedClass The css class to add to selected nodes
28335      */
28336     selectedClass : "x-view-selected",
28337      /**
28338      * @cfg {String} emptyText The empty text to show when nothing is loaded.
28339      */
28340     emptyText : "",
28341     
28342     /**
28343      * @cfg {String} text to display on mask (default Loading)
28344      */
28345     mask : false,
28346     /**
28347      * @cfg {Boolean} multiSelect Allow multiple selection
28348      */
28349     multiSelect : false,
28350     /**
28351      * @cfg {Boolean} singleSelect Allow single selection
28352      */
28353     singleSelect:  false,
28354     
28355     /**
28356      * @cfg {Boolean} toggleSelect - selecting 
28357      */
28358     toggleSelect : false,
28359     
28360     /**
28361      * @cfg {Boolean} tickable - selecting 
28362      */
28363     tickable : false,
28364     
28365     /**
28366      * Returns the element this view is bound to.
28367      * @return {Roo.Element}
28368      */
28369     getEl : function(){
28370         return this.wrapEl;
28371     },
28372     
28373     
28374
28375     /**
28376      * Refreshes the view. - called by datachanged on the store. - do not call directly.
28377      */
28378     refresh : function(){
28379         //Roo.log('refresh');
28380         var t = this.tpl;
28381         
28382         // if we are using something like 'domtemplate', then
28383         // the what gets used is:
28384         // t.applySubtemplate(NAME, data, wrapping data..)
28385         // the outer template then get' applied with
28386         //     the store 'extra data'
28387         // and the body get's added to the
28388         //      roo-name="data" node?
28389         //      <span class='roo-tpl-{name}'></span> ?????
28390         
28391         
28392         
28393         this.clearSelections();
28394         this.el.update("");
28395         var html = [];
28396         var records = this.store.getRange();
28397         if(records.length < 1) {
28398             
28399             // is this valid??  = should it render a template??
28400             
28401             this.el.update(this.emptyText);
28402             return;
28403         }
28404         var el = this.el;
28405         if (this.dataName) {
28406             this.el.update(t.apply(this.store.meta)); //????
28407             el = this.el.child('.roo-tpl-' + this.dataName);
28408         }
28409         
28410         for(var i = 0, len = records.length; i < len; i++){
28411             var data = this.prepareData(records[i].data, i, records[i]);
28412             this.fireEvent("preparedata", this, data, i, records[i]);
28413             
28414             var d = Roo.apply({}, data);
28415             
28416             if(this.tickable){
28417                 Roo.apply(d, {'roo-id' : Roo.id()});
28418                 
28419                 var _this = this;
28420             
28421                 Roo.each(this.parent.item, function(item){
28422                     if(item[_this.parent.valueField] != data[_this.parent.valueField]){
28423                         return;
28424                     }
28425                     Roo.apply(d, {'roo-data-checked' : 'checked'});
28426                 });
28427             }
28428             
28429             html[html.length] = Roo.util.Format.trim(
28430                 this.dataName ?
28431                     t.applySubtemplate(this.dataName, d, this.store.meta) :
28432                     t.apply(d)
28433             );
28434         }
28435         
28436         
28437         
28438         el.update(html.join(""));
28439         this.nodes = el.dom.childNodes;
28440         this.updateIndexes(0);
28441     },
28442     
28443
28444     /**
28445      * Function to override to reformat the data that is sent to
28446      * the template for each node.
28447      * DEPRICATED - use the preparedata event handler.
28448      * @param {Array/Object} data The raw data (array of colData for a data model bound view or
28449      * a JSON object for an UpdateManager bound view).
28450      */
28451     prepareData : function(data, index, record)
28452     {
28453         this.fireEvent("preparedata", this, data, index, record);
28454         return data;
28455     },
28456
28457     onUpdate : function(ds, record){
28458         // Roo.log('on update');   
28459         this.clearSelections();
28460         var index = this.store.indexOf(record);
28461         var n = this.nodes[index];
28462         this.tpl.insertBefore(n, this.prepareData(record.data, index, record));
28463         n.parentNode.removeChild(n);
28464         this.updateIndexes(index, index);
28465     },
28466
28467     
28468     
28469 // --------- FIXME     
28470     onAdd : function(ds, records, index)
28471     {
28472         //Roo.log(['on Add', ds, records, index] );        
28473         this.clearSelections();
28474         if(this.nodes.length == 0){
28475             this.refresh();
28476             return;
28477         }
28478         var n = this.nodes[index];
28479         for(var i = 0, len = records.length; i < len; i++){
28480             var d = this.prepareData(records[i].data, i, records[i]);
28481             if(n){
28482                 this.tpl.insertBefore(n, d);
28483             }else{
28484                 
28485                 this.tpl.append(this.el, d);
28486             }
28487         }
28488         this.updateIndexes(index);
28489     },
28490
28491     onRemove : function(ds, record, index){
28492        // Roo.log('onRemove');
28493         this.clearSelections();
28494         var el = this.dataName  ?
28495             this.el.child('.roo-tpl-' + this.dataName) :
28496             this.el; 
28497         
28498         el.dom.removeChild(this.nodes[index]);
28499         this.updateIndexes(index);
28500     },
28501
28502     /**
28503      * Refresh an individual node.
28504      * @param {Number} index
28505      */
28506     refreshNode : function(index){
28507         this.onUpdate(this.store, this.store.getAt(index));
28508     },
28509
28510     updateIndexes : function(startIndex, endIndex){
28511         var ns = this.nodes;
28512         startIndex = startIndex || 0;
28513         endIndex = endIndex || ns.length - 1;
28514         for(var i = startIndex; i <= endIndex; i++){
28515             ns[i].nodeIndex = i;
28516         }
28517     },
28518
28519     /**
28520      * Changes the data store this view uses and refresh the view.
28521      * @param {Store} store
28522      */
28523     setStore : function(store, initial){
28524         if(!initial && this.store){
28525             this.store.un("datachanged", this.refresh);
28526             this.store.un("add", this.onAdd);
28527             this.store.un("remove", this.onRemove);
28528             this.store.un("update", this.onUpdate);
28529             this.store.un("clear", this.refresh);
28530             this.store.un("beforeload", this.onBeforeLoad);
28531             this.store.un("load", this.onLoad);
28532             this.store.un("loadexception", this.onLoad);
28533         }
28534         if(store){
28535           
28536             store.on("datachanged", this.refresh, this);
28537             store.on("add", this.onAdd, this);
28538             store.on("remove", this.onRemove, this);
28539             store.on("update", this.onUpdate, this);
28540             store.on("clear", this.refresh, this);
28541             store.on("beforeload", this.onBeforeLoad, this);
28542             store.on("load", this.onLoad, this);
28543             store.on("loadexception", this.onLoad, this);
28544         }
28545         
28546         if(store){
28547             this.refresh();
28548         }
28549     },
28550     /**
28551      * onbeforeLoad - masks the loading area.
28552      *
28553      */
28554     onBeforeLoad : function(store,opts)
28555     {
28556          //Roo.log('onBeforeLoad');   
28557         if (!opts.add) {
28558             this.el.update("");
28559         }
28560         this.el.mask(this.mask ? this.mask : "Loading" ); 
28561     },
28562     onLoad : function ()
28563     {
28564         this.el.unmask();
28565     },
28566     
28567
28568     /**
28569      * Returns the template node the passed child belongs to or null if it doesn't belong to one.
28570      * @param {HTMLElement} node
28571      * @return {HTMLElement} The template node
28572      */
28573     findItemFromChild : function(node){
28574         var el = this.dataName  ?
28575             this.el.child('.roo-tpl-' + this.dataName,true) :
28576             this.el.dom; 
28577         
28578         if(!node || node.parentNode == el){
28579                     return node;
28580             }
28581             var p = node.parentNode;
28582             while(p && p != el){
28583             if(p.parentNode == el){
28584                 return p;
28585             }
28586             p = p.parentNode;
28587         }
28588             return null;
28589     },
28590
28591     /** @ignore */
28592     onClick : function(e){
28593         var item = this.findItemFromChild(e.getTarget());
28594         if(item){
28595             var index = this.indexOf(item);
28596             if(this.onItemClick(item, index, e) !== false){
28597                 this.fireEvent("click", this, index, item, e);
28598             }
28599         }else{
28600             this.clearSelections();
28601         }
28602     },
28603
28604     /** @ignore */
28605     onContextMenu : function(e){
28606         var item = this.findItemFromChild(e.getTarget());
28607         if(item){
28608             this.fireEvent("contextmenu", this, this.indexOf(item), item, e);
28609         }
28610     },
28611
28612     /** @ignore */
28613     onDblClick : function(e){
28614         var item = this.findItemFromChild(e.getTarget());
28615         if(item){
28616             this.fireEvent("dblclick", this, this.indexOf(item), item, e);
28617         }
28618     },
28619
28620     onItemClick : function(item, index, e)
28621     {
28622         if(this.fireEvent("beforeclick", this, index, item, e) === false){
28623             return false;
28624         }
28625         if (this.toggleSelect) {
28626             var m = this.isSelected(item) ? 'unselect' : 'select';
28627             //Roo.log(m);
28628             var _t = this;
28629             _t[m](item, true, false);
28630             return true;
28631         }
28632         if(this.multiSelect || this.singleSelect){
28633             if(this.multiSelect && e.shiftKey && this.lastSelection){
28634                 this.select(this.getNodes(this.indexOf(this.lastSelection), index), false);
28635             }else{
28636                 this.select(item, this.multiSelect && e.ctrlKey);
28637                 this.lastSelection = item;
28638             }
28639             
28640             if(!this.tickable){
28641                 e.preventDefault();
28642             }
28643             
28644         }
28645         return true;
28646     },
28647
28648     /**
28649      * Get the number of selected nodes.
28650      * @return {Number}
28651      */
28652     getSelectionCount : function(){
28653         return this.selections.length;
28654     },
28655
28656     /**
28657      * Get the currently selected nodes.
28658      * @return {Array} An array of HTMLElements
28659      */
28660     getSelectedNodes : function(){
28661         return this.selections;
28662     },
28663
28664     /**
28665      * Get the indexes of the selected nodes.
28666      * @return {Array}
28667      */
28668     getSelectedIndexes : function(){
28669         var indexes = [], s = this.selections;
28670         for(var i = 0, len = s.length; i < len; i++){
28671             indexes.push(s[i].nodeIndex);
28672         }
28673         return indexes;
28674     },
28675
28676     /**
28677      * Clear all selections
28678      * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange event
28679      */
28680     clearSelections : function(suppressEvent){
28681         if(this.nodes && (this.multiSelect || this.singleSelect) && this.selections.length > 0){
28682             this.cmp.elements = this.selections;
28683             this.cmp.removeClass(this.selectedClass);
28684             this.selections = [];
28685             if(!suppressEvent){
28686                 this.fireEvent("selectionchange", this, this.selections);
28687             }
28688         }
28689     },
28690
28691     /**
28692      * Returns true if the passed node is selected
28693      * @param {HTMLElement/Number} node The node or node index
28694      * @return {Boolean}
28695      */
28696     isSelected : function(node){
28697         var s = this.selections;
28698         if(s.length < 1){
28699             return false;
28700         }
28701         node = this.getNode(node);
28702         return s.indexOf(node) !== -1;
28703     },
28704
28705     /**
28706      * Selects nodes.
28707      * @param {Array/HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node, id of a template node or an array of any of those to select
28708      * @param {Boolean} keepExisting (optional) true to keep existing selections
28709      * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange vent
28710      */
28711     select : function(nodeInfo, keepExisting, suppressEvent){
28712         if(nodeInfo instanceof Array){
28713             if(!keepExisting){
28714                 this.clearSelections(true);
28715             }
28716             for(var i = 0, len = nodeInfo.length; i < len; i++){
28717                 this.select(nodeInfo[i], true, true);
28718             }
28719             return;
28720         } 
28721         var node = this.getNode(nodeInfo);
28722         if(!node || this.isSelected(node)){
28723             return; // already selected.
28724         }
28725         if(!keepExisting){
28726             this.clearSelections(true);
28727         }
28728         
28729         if(this.fireEvent("beforeselect", this, node, this.selections) !== false){
28730             Roo.fly(node).addClass(this.selectedClass);
28731             this.selections.push(node);
28732             if(!suppressEvent){
28733                 this.fireEvent("selectionchange", this, this.selections);
28734             }
28735         }
28736         
28737         
28738     },
28739       /**
28740      * Unselects nodes.
28741      * @param {Array/HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node, id of a template node or an array of any of those to select
28742      * @param {Boolean} keepExisting (optional) true IGNORED (for campatibility with select)
28743      * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange vent
28744      */
28745     unselect : function(nodeInfo, keepExisting, suppressEvent)
28746     {
28747         if(nodeInfo instanceof Array){
28748             Roo.each(this.selections, function(s) {
28749                 this.unselect(s, nodeInfo);
28750             }, this);
28751             return;
28752         }
28753         var node = this.getNode(nodeInfo);
28754         if(!node || !this.isSelected(node)){
28755             //Roo.log("not selected");
28756             return; // not selected.
28757         }
28758         // fireevent???
28759         var ns = [];
28760         Roo.each(this.selections, function(s) {
28761             if (s == node ) {
28762                 Roo.fly(node).removeClass(this.selectedClass);
28763
28764                 return;
28765             }
28766             ns.push(s);
28767         },this);
28768         
28769         this.selections= ns;
28770         this.fireEvent("selectionchange", this, this.selections);
28771     },
28772
28773     /**
28774      * Gets a template node.
28775      * @param {HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node or the id of a template node
28776      * @return {HTMLElement} The node or null if it wasn't found
28777      */
28778     getNode : function(nodeInfo){
28779         if(typeof nodeInfo == "string"){
28780             return document.getElementById(nodeInfo);
28781         }else if(typeof nodeInfo == "number"){
28782             return this.nodes[nodeInfo];
28783         }
28784         return nodeInfo;
28785     },
28786
28787     /**
28788      * Gets a range template nodes.
28789      * @param {Number} startIndex
28790      * @param {Number} endIndex
28791      * @return {Array} An array of nodes
28792      */
28793     getNodes : function(start, end){
28794         var ns = this.nodes;
28795         start = start || 0;
28796         end = typeof end == "undefined" ? ns.length - 1 : end;
28797         var nodes = [];
28798         if(start <= end){
28799             for(var i = start; i <= end; i++){
28800                 nodes.push(ns[i]);
28801             }
28802         } else{
28803             for(var i = start; i >= end; i--){
28804                 nodes.push(ns[i]);
28805             }
28806         }
28807         return nodes;
28808     },
28809
28810     /**
28811      * Finds the index of the passed node
28812      * @param {HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node or the id of a template node
28813      * @return {Number} The index of the node or -1
28814      */
28815     indexOf : function(node){
28816         node = this.getNode(node);
28817         if(typeof node.nodeIndex == "number"){
28818             return node.nodeIndex;
28819         }
28820         var ns = this.nodes;
28821         for(var i = 0, len = ns.length; i < len; i++){
28822             if(ns[i] == node){
28823                 return i;
28824             }
28825         }
28826         return -1;
28827     }
28828 });
28829 /*
28830  * Based on:
28831  * Ext JS Library 1.1.1
28832  * Copyright(c) 2006-2007, Ext JS, LLC.
28833  *
28834  * Originally Released Under LGPL - original licence link has changed is not relivant.
28835  *
28836  * Fork - LGPL
28837  * <script type="text/javascript">
28838  */
28839
28840 /**
28841  * @class Roo.JsonView
28842  * @extends Roo.View
28843  * Shortcut class to create a JSON + {@link Roo.UpdateManager} template view. Usage:
28844 <pre><code>
28845 var view = new Roo.JsonView({
28846     container: "my-element",
28847     tpl: '&lt;div id="{id}"&gt;{foo} - {bar}&lt;/div&gt;', // auto create template
28848     multiSelect: true, 
28849     jsonRoot: "data" 
28850 });
28851
28852 // listen for node click?
28853 view.on("click", function(vw, index, node, e){
28854     alert('Node "' + node.id + '" at index: ' + index + " was clicked.");
28855 });
28856
28857 // direct load of JSON data
28858 view.load("foobar.php");
28859
28860 // Example from my blog list
28861 var tpl = new Roo.Template(
28862     '&lt;div class="entry"&gt;' +
28863     '&lt;a class="entry-title" href="{link}"&gt;{title}&lt;/a&gt;' +
28864     "&lt;h4&gt;{date} by {author} | {comments} Comments&lt;/h4&gt;{description}" +
28865     "&lt;/div&gt;&lt;hr /&gt;"
28866 );
28867
28868 var moreView = new Roo.JsonView({
28869     container :  "entry-list", 
28870     template : tpl,
28871     jsonRoot: "posts"
28872 });
28873 moreView.on("beforerender", this.sortEntries, this);
28874 moreView.load({
28875     url: "/blog/get-posts.php",
28876     params: "allposts=true",
28877     text: "Loading Blog Entries..."
28878 });
28879 </code></pre>
28880
28881 * Note: old code is supported with arguments : (container, template, config)
28882
28883
28884  * @constructor
28885  * Create a new JsonView
28886  * 
28887  * @param {Object} config The config object
28888  * 
28889  */
28890 Roo.JsonView = function(config, depreciated_tpl, depreciated_config){
28891     
28892     
28893     Roo.JsonView.superclass.constructor.call(this, config, depreciated_tpl, depreciated_config);
28894
28895     var um = this.el.getUpdateManager();
28896     um.setRenderer(this);
28897     um.on("update", this.onLoad, this);
28898     um.on("failure", this.onLoadException, this);
28899
28900     /**
28901      * @event beforerender
28902      * Fires before rendering of the downloaded JSON data.
28903      * @param {Roo.JsonView} this
28904      * @param {Object} data The JSON data loaded
28905      */
28906     /**
28907      * @event load
28908      * Fires when data is loaded.
28909      * @param {Roo.JsonView} this
28910      * @param {Object} data The JSON data loaded
28911      * @param {Object} response The raw Connect response object
28912      */
28913     /**
28914      * @event loadexception
28915      * Fires when loading fails.
28916      * @param {Roo.JsonView} this
28917      * @param {Object} response The raw Connect response object
28918      */
28919     this.addEvents({
28920         'beforerender' : true,
28921         'load' : true,
28922         'loadexception' : true
28923     });
28924 };
28925 Roo.extend(Roo.JsonView, Roo.View, {
28926     /**
28927      * @type {String} The root property in the loaded JSON object that contains the data
28928      */
28929     jsonRoot : "",
28930
28931     /**
28932      * Refreshes the view.
28933      */
28934     refresh : function(){
28935         this.clearSelections();
28936         this.el.update("");
28937         var html = [];
28938         var o = this.jsonData;
28939         if(o && o.length > 0){
28940             for(var i = 0, len = o.length; i < len; i++){
28941                 var data = this.prepareData(o[i], i, o);
28942                 html[html.length] = this.tpl.apply(data);
28943             }
28944         }else{
28945             html.push(this.emptyText);
28946         }
28947         this.el.update(html.join(""));
28948         this.nodes = this.el.dom.childNodes;
28949         this.updateIndexes(0);
28950     },
28951
28952     /**
28953      * Performs an async HTTP request, and loads the JSON from the response. If <i>params</i> are specified it uses POST, otherwise it uses GET.
28954      * @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:
28955      <pre><code>
28956      view.load({
28957          url: "your-url.php",
28958          params: {param1: "foo", param2: "bar"}, // or a URL encoded string
28959          callback: yourFunction,
28960          scope: yourObject, //(optional scope)
28961          discardUrl: false,
28962          nocache: false,
28963          text: "Loading...",
28964          timeout: 30,
28965          scripts: false
28966      });
28967      </code></pre>
28968      * The only required property is <i>url</i>. The optional properties <i>nocache</i>, <i>text</i> and <i>scripts</i>
28969      * are respectively shorthand for <i>disableCaching</i>, <i>indicatorText</i>, and <i>loadScripts</i> and are used to set their associated property on this UpdateManager instance.
28970      * @param {String/Object} params (optional) The parameters to pass, as either a URL encoded string "param1=1&amp;param2=2" or an object {param1: 1, param2: 2}
28971      * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
28972      * @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.
28973      */
28974     load : function(){
28975         var um = this.el.getUpdateManager();
28976         um.update.apply(um, arguments);
28977     },
28978
28979     // note - render is a standard framework call...
28980     // using it for the response is really flaky... - it's called by UpdateManager normally, except when called by the XComponent/addXtype.
28981     render : function(el, response){
28982         
28983         this.clearSelections();
28984         this.el.update("");
28985         var o;
28986         try{
28987             if (response != '') {
28988                 o = Roo.util.JSON.decode(response.responseText);
28989                 if(this.jsonRoot){
28990                     
28991                     o = o[this.jsonRoot];
28992                 }
28993             }
28994         } catch(e){
28995         }
28996         /**
28997          * The current JSON data or null
28998          */
28999         this.jsonData = o;
29000         this.beforeRender();
29001         this.refresh();
29002     },
29003
29004 /**
29005  * Get the number of records in the current JSON dataset
29006  * @return {Number}
29007  */
29008     getCount : function(){
29009         return this.jsonData ? this.jsonData.length : 0;
29010     },
29011
29012 /**
29013  * Returns the JSON object for the specified node(s)
29014  * @param {HTMLElement/Array} node The node or an array of nodes
29015  * @return {Object/Array} If you pass in an array, you get an array back, otherwise
29016  * you get the JSON object for the node
29017  */
29018     getNodeData : function(node){
29019         if(node instanceof Array){
29020             var data = [];
29021             for(var i = 0, len = node.length; i < len; i++){
29022                 data.push(this.getNodeData(node[i]));
29023             }
29024             return data;
29025         }
29026         return this.jsonData[this.indexOf(node)] || null;
29027     },
29028
29029     beforeRender : function(){
29030         this.snapshot = this.jsonData;
29031         if(this.sortInfo){
29032             this.sort.apply(this, this.sortInfo);
29033         }
29034         this.fireEvent("beforerender", this, this.jsonData);
29035     },
29036
29037     onLoad : function(el, o){
29038         this.fireEvent("load", this, this.jsonData, o);
29039     },
29040
29041     onLoadException : function(el, o){
29042         this.fireEvent("loadexception", this, o);
29043     },
29044
29045 /**
29046  * Filter the data by a specific property.
29047  * @param {String} property A property on your JSON objects
29048  * @param {String/RegExp} value Either string that the property values
29049  * should start with, or a RegExp to test against the property
29050  */
29051     filter : function(property, value){
29052         if(this.jsonData){
29053             var data = [];
29054             var ss = this.snapshot;
29055             if(typeof value == "string"){
29056                 var vlen = value.length;
29057                 if(vlen == 0){
29058                     this.clearFilter();
29059                     return;
29060                 }
29061                 value = value.toLowerCase();
29062                 for(var i = 0, len = ss.length; i < len; i++){
29063                     var o = ss[i];
29064                     if(o[property].substr(0, vlen).toLowerCase() == value){
29065                         data.push(o);
29066                     }
29067                 }
29068             } else if(value.exec){ // regex?
29069                 for(var i = 0, len = ss.length; i < len; i++){
29070                     var o = ss[i];
29071                     if(value.test(o[property])){
29072                         data.push(o);
29073                     }
29074                 }
29075             } else{
29076                 return;
29077             }
29078             this.jsonData = data;
29079             this.refresh();
29080         }
29081     },
29082
29083 /**
29084  * Filter by a function. The passed function will be called with each
29085  * object in the current dataset. If the function returns true the value is kept,
29086  * otherwise it is filtered.
29087  * @param {Function} fn
29088  * @param {Object} scope (optional) The scope of the function (defaults to this JsonView)
29089  */
29090     filterBy : function(fn, scope){
29091         if(this.jsonData){
29092             var data = [];
29093             var ss = this.snapshot;
29094             for(var i = 0, len = ss.length; i < len; i++){
29095                 var o = ss[i];
29096                 if(fn.call(scope || this, o)){
29097                     data.push(o);
29098                 }
29099             }
29100             this.jsonData = data;
29101             this.refresh();
29102         }
29103     },
29104
29105 /**
29106  * Clears the current filter.
29107  */
29108     clearFilter : function(){
29109         if(this.snapshot && this.jsonData != this.snapshot){
29110             this.jsonData = this.snapshot;
29111             this.refresh();
29112         }
29113     },
29114
29115
29116 /**
29117  * Sorts the data for this view and refreshes it.
29118  * @param {String} property A property on your JSON objects to sort on
29119  * @param {String} direction (optional) "desc" or "asc" (defaults to "asc")
29120  * @param {Function} sortType (optional) A function to call to convert the data to a sortable value.
29121  */
29122     sort : function(property, dir, sortType){
29123         this.sortInfo = Array.prototype.slice.call(arguments, 0);
29124         if(this.jsonData){
29125             var p = property;
29126             var dsc = dir && dir.toLowerCase() == "desc";
29127             var f = function(o1, o2){
29128                 var v1 = sortType ? sortType(o1[p]) : o1[p];
29129                 var v2 = sortType ? sortType(o2[p]) : o2[p];
29130                 ;
29131                 if(v1 < v2){
29132                     return dsc ? +1 : -1;
29133                 } else if(v1 > v2){
29134                     return dsc ? -1 : +1;
29135                 } else{
29136                     return 0;
29137                 }
29138             };
29139             this.jsonData.sort(f);
29140             this.refresh();
29141             if(this.jsonData != this.snapshot){
29142                 this.snapshot.sort(f);
29143             }
29144         }
29145     }
29146 });/*
29147  * Based on:
29148  * Ext JS Library 1.1.1
29149  * Copyright(c) 2006-2007, Ext JS, LLC.
29150  *
29151  * Originally Released Under LGPL - original licence link has changed is not relivant.
29152  *
29153  * Fork - LGPL
29154  * <script type="text/javascript">
29155  */
29156  
29157
29158 /**
29159  * @class Roo.ColorPalette
29160  * @extends Roo.Component
29161  * Simple color palette class for choosing colors.  The palette can be rendered to any container.<br />
29162  * Here's an example of typical usage:
29163  * <pre><code>
29164 var cp = new Roo.ColorPalette({value:'993300'});  // initial selected color
29165 cp.render('my-div');
29166
29167 cp.on('select', function(palette, selColor){
29168     // do something with selColor
29169 });
29170 </code></pre>
29171  * @constructor
29172  * Create a new ColorPalette
29173  * @param {Object} config The config object
29174  */
29175 Roo.ColorPalette = function(config){
29176     Roo.ColorPalette.superclass.constructor.call(this, config);
29177     this.addEvents({
29178         /**
29179              * @event select
29180              * Fires when a color is selected
29181              * @param {ColorPalette} this
29182              * @param {String} color The 6-digit color hex code (without the # symbol)
29183              */
29184         select: true
29185     });
29186
29187     if(this.handler){
29188         this.on("select", this.handler, this.scope, true);
29189     }
29190 };
29191 Roo.extend(Roo.ColorPalette, Roo.Component, {
29192     /**
29193      * @cfg {String} itemCls
29194      * The CSS class to apply to the containing element (defaults to "x-color-palette")
29195      */
29196     itemCls : "x-color-palette",
29197     /**
29198      * @cfg {String} value
29199      * The initial color to highlight (should be a valid 6-digit color hex code without the # symbol).  Note that
29200      * the hex codes are case-sensitive.
29201      */
29202     value : null,
29203     clickEvent:'click',
29204     // private
29205     ctype: "Roo.ColorPalette",
29206
29207     /**
29208      * @cfg {Boolean} allowReselect If set to true then reselecting a color that is already selected fires the selection event
29209      */
29210     allowReselect : false,
29211
29212     /**
29213      * <p>An array of 6-digit color hex code strings (without the # symbol).  This array can contain any number
29214      * of colors, and each hex code should be unique.  The width of the palette is controlled via CSS by adjusting
29215      * the width property of the 'x-color-palette' class (or assigning a custom class), so you can balance the number
29216      * of colors with the width setting until the box is symmetrical.</p>
29217      * <p>You can override individual colors if needed:</p>
29218      * <pre><code>
29219 var cp = new Roo.ColorPalette();
29220 cp.colors[0] = "FF0000";  // change the first box to red
29221 </code></pre>
29222
29223 Or you can provide a custom array of your own for complete control:
29224 <pre><code>
29225 var cp = new Roo.ColorPalette();
29226 cp.colors = ["000000", "993300", "333300"];
29227 </code></pre>
29228      * @type Array
29229      */
29230     colors : [
29231         "000000", "993300", "333300", "003300", "003366", "000080", "333399", "333333",
29232         "800000", "FF6600", "808000", "008000", "008080", "0000FF", "666699", "808080",
29233         "FF0000", "FF9900", "99CC00", "339966", "33CCCC", "3366FF", "800080", "969696",
29234         "FF00FF", "FFCC00", "FFFF00", "00FF00", "00FFFF", "00CCFF", "993366", "C0C0C0",
29235         "FF99CC", "FFCC99", "FFFF99", "CCFFCC", "CCFFFF", "99CCFF", "CC99FF", "FFFFFF"
29236     ],
29237
29238     // private
29239     onRender : function(container, position){
29240         var t = new Roo.MasterTemplate(
29241             '<tpl><a href="#" class="color-{0}" hidefocus="on"><em><span style="background:#{0}" unselectable="on">&#160;</span></em></a></tpl>'
29242         );
29243         var c = this.colors;
29244         for(var i = 0, len = c.length; i < len; i++){
29245             t.add([c[i]]);
29246         }
29247         var el = document.createElement("div");
29248         el.className = this.itemCls;
29249         t.overwrite(el);
29250         container.dom.insertBefore(el, position);
29251         this.el = Roo.get(el);
29252         this.el.on(this.clickEvent, this.handleClick,  this, {delegate: "a"});
29253         if(this.clickEvent != 'click'){
29254             this.el.on('click', Roo.emptyFn,  this, {delegate: "a", preventDefault:true});
29255         }
29256     },
29257
29258     // private
29259     afterRender : function(){
29260         Roo.ColorPalette.superclass.afterRender.call(this);
29261         if(this.value){
29262             var s = this.value;
29263             this.value = null;
29264             this.select(s);
29265         }
29266     },
29267
29268     // private
29269     handleClick : function(e, t){
29270         e.preventDefault();
29271         if(!this.disabled){
29272             var c = t.className.match(/(?:^|\s)color-(.{6})(?:\s|$)/)[1];
29273             this.select(c.toUpperCase());
29274         }
29275     },
29276
29277     /**
29278      * Selects the specified color in the palette (fires the select event)
29279      * @param {String} color A valid 6-digit color hex code (# will be stripped if included)
29280      */
29281     select : function(color){
29282         color = color.replace("#", "");
29283         if(color != this.value || this.allowReselect){
29284             var el = this.el;
29285             if(this.value){
29286                 el.child("a.color-"+this.value).removeClass("x-color-palette-sel");
29287             }
29288             el.child("a.color-"+color).addClass("x-color-palette-sel");
29289             this.value = color;
29290             this.fireEvent("select", this, color);
29291         }
29292     }
29293 });/*
29294  * Based on:
29295  * Ext JS Library 1.1.1
29296  * Copyright(c) 2006-2007, Ext JS, LLC.
29297  *
29298  * Originally Released Under LGPL - original licence link has changed is not relivant.
29299  *
29300  * Fork - LGPL
29301  * <script type="text/javascript">
29302  */
29303  
29304 /**
29305  * @class Roo.DatePicker
29306  * @extends Roo.Component
29307  * Simple date picker class.
29308  * @constructor
29309  * Create a new DatePicker
29310  * @param {Object} config The config object
29311  */
29312 Roo.DatePicker = function(config){
29313     Roo.DatePicker.superclass.constructor.call(this, config);
29314
29315     this.value = config && config.value ?
29316                  config.value.clearTime() : new Date().clearTime();
29317
29318     this.addEvents({
29319         /**
29320              * @event select
29321              * Fires when a date is selected
29322              * @param {DatePicker} this
29323              * @param {Date} date The selected date
29324              */
29325         'select': true,
29326         /**
29327              * @event monthchange
29328              * Fires when the displayed month changes 
29329              * @param {DatePicker} this
29330              * @param {Date} date The selected month
29331              */
29332         'monthchange': true
29333     });
29334
29335     if(this.handler){
29336         this.on("select", this.handler,  this.scope || this);
29337     }
29338     // build the disabledDatesRE
29339     if(!this.disabledDatesRE && this.disabledDates){
29340         var dd = this.disabledDates;
29341         var re = "(?:";
29342         for(var i = 0; i < dd.length; i++){
29343             re += dd[i];
29344             if(i != dd.length-1) {
29345                 re += "|";
29346             }
29347         }
29348         this.disabledDatesRE = new RegExp(re + ")");
29349     }
29350 };
29351
29352 Roo.extend(Roo.DatePicker, Roo.Component, {
29353     /**
29354      * @cfg {String} todayText
29355      * The text to display on the button that selects the current date (defaults to "Today")
29356      */
29357     todayText : "Today",
29358     /**
29359      * @cfg {String} okText
29360      * The text to display on the ok button
29361      */
29362     okText : "&#160;OK&#160;", // &#160; to give the user extra clicking room
29363     /**
29364      * @cfg {String} cancelText
29365      * The text to display on the cancel button
29366      */
29367     cancelText : "Cancel",
29368     /**
29369      * @cfg {String} todayTip
29370      * The tooltip to display for the button that selects the current date (defaults to "{current date} (Spacebar)")
29371      */
29372     todayTip : "{0} (Spacebar)",
29373     /**
29374      * @cfg {Date} minDate
29375      * Minimum allowable date (JavaScript date object, defaults to null)
29376      */
29377     minDate : null,
29378     /**
29379      * @cfg {Date} maxDate
29380      * Maximum allowable date (JavaScript date object, defaults to null)
29381      */
29382     maxDate : null,
29383     /**
29384      * @cfg {String} minText
29385      * The error text to display if the minDate validation fails (defaults to "This date is before the minimum date")
29386      */
29387     minText : "This date is before the minimum date",
29388     /**
29389      * @cfg {String} maxText
29390      * The error text to display if the maxDate validation fails (defaults to "This date is after the maximum date")
29391      */
29392     maxText : "This date is after the maximum date",
29393     /**
29394      * @cfg {String} format
29395      * The default date format string which can be overriden for localization support.  The format must be
29396      * valid according to {@link Date#parseDate} (defaults to 'm/d/y').
29397      */
29398     format : "m/d/y",
29399     /**
29400      * @cfg {Array} disabledDays
29401      * An array of days to disable, 0-based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
29402      */
29403     disabledDays : null,
29404     /**
29405      * @cfg {String} disabledDaysText
29406      * The tooltip to display when the date falls on a disabled day (defaults to "")
29407      */
29408     disabledDaysText : "",
29409     /**
29410      * @cfg {RegExp} disabledDatesRE
29411      * JavaScript regular expression used to disable a pattern of dates (defaults to null)
29412      */
29413     disabledDatesRE : null,
29414     /**
29415      * @cfg {String} disabledDatesText
29416      * The tooltip text to display when the date falls on a disabled date (defaults to "")
29417      */
29418     disabledDatesText : "",
29419     /**
29420      * @cfg {Boolean} constrainToViewport
29421      * True to constrain the date picker to the viewport (defaults to true)
29422      */
29423     constrainToViewport : true,
29424     /**
29425      * @cfg {Array} monthNames
29426      * An array of textual month names which can be overriden for localization support (defaults to Date.monthNames)
29427      */
29428     monthNames : Date.monthNames,
29429     /**
29430      * @cfg {Array} dayNames
29431      * An array of textual day names which can be overriden for localization support (defaults to Date.dayNames)
29432      */
29433     dayNames : Date.dayNames,
29434     /**
29435      * @cfg {String} nextText
29436      * The next month navigation button tooltip (defaults to 'Next Month (Control+Right)')
29437      */
29438     nextText: 'Next Month (Control+Right)',
29439     /**
29440      * @cfg {String} prevText
29441      * The previous month navigation button tooltip (defaults to 'Previous Month (Control+Left)')
29442      */
29443     prevText: 'Previous Month (Control+Left)',
29444     /**
29445      * @cfg {String} monthYearText
29446      * The header month selector tooltip (defaults to 'Choose a month (Control+Up/Down to move years)')
29447      */
29448     monthYearText: 'Choose a month (Control+Up/Down to move years)',
29449     /**
29450      * @cfg {Number} startDay
29451      * Day index at which the week should begin, 0-based (defaults to 0, which is Sunday)
29452      */
29453     startDay : 0,
29454     /**
29455      * @cfg {Bool} showClear
29456      * Show a clear button (usefull for date form elements that can be blank.)
29457      */
29458     
29459     showClear: false,
29460     
29461     /**
29462      * Sets the value of the date field
29463      * @param {Date} value The date to set
29464      */
29465     setValue : function(value){
29466         var old = this.value;
29467         
29468         if (typeof(value) == 'string') {
29469          
29470             value = Date.parseDate(value, this.format);
29471         }
29472         if (!value) {
29473             value = new Date();
29474         }
29475         
29476         this.value = value.clearTime(true);
29477         if(this.el){
29478             this.update(this.value);
29479         }
29480     },
29481
29482     /**
29483      * Gets the current selected value of the date field
29484      * @return {Date} The selected date
29485      */
29486     getValue : function(){
29487         return this.value;
29488     },
29489
29490     // private
29491     focus : function(){
29492         if(this.el){
29493             this.update(this.activeDate);
29494         }
29495     },
29496
29497     // privateval
29498     onRender : function(container, position){
29499         
29500         var m = [
29501              '<table cellspacing="0">',
29502                 '<tr><td class="x-date-left"><a href="#" title="', this.prevText ,'">&#160;</a></td><td class="x-date-middle" align="center"></td><td class="x-date-right"><a href="#" title="', this.nextText ,'">&#160;</a></td></tr>',
29503                 '<tr><td colspan="3"><table class="x-date-inner" cellspacing="0"><thead><tr>'];
29504         var dn = this.dayNames;
29505         for(var i = 0; i < 7; i++){
29506             var d = this.startDay+i;
29507             if(d > 6){
29508                 d = d-7;
29509             }
29510             m.push("<th><span>", dn[d].substr(0,1), "</span></th>");
29511         }
29512         m[m.length] = "</tr></thead><tbody><tr>";
29513         for(var i = 0; i < 42; i++) {
29514             if(i % 7 == 0 && i != 0){
29515                 m[m.length] = "</tr><tr>";
29516             }
29517             m[m.length] = '<td><a href="#" hidefocus="on" class="x-date-date" tabIndex="1"><em><span></span></em></a></td>';
29518         }
29519         m[m.length] = '</tr></tbody></table></td></tr><tr>'+
29520             '<td colspan="3" class="x-date-bottom" align="center"></td></tr></table><div class="x-date-mp"></div>';
29521
29522         var el = document.createElement("div");
29523         el.className = "x-date-picker";
29524         el.innerHTML = m.join("");
29525
29526         container.dom.insertBefore(el, position);
29527
29528         this.el = Roo.get(el);
29529         this.eventEl = Roo.get(el.firstChild);
29530
29531         new Roo.util.ClickRepeater(this.el.child("td.x-date-left a"), {
29532             handler: this.showPrevMonth,
29533             scope: this,
29534             preventDefault:true,
29535             stopDefault:true
29536         });
29537
29538         new Roo.util.ClickRepeater(this.el.child("td.x-date-right a"), {
29539             handler: this.showNextMonth,
29540             scope: this,
29541             preventDefault:true,
29542             stopDefault:true
29543         });
29544
29545         this.eventEl.on("mousewheel", this.handleMouseWheel,  this);
29546
29547         this.monthPicker = this.el.down('div.x-date-mp');
29548         this.monthPicker.enableDisplayMode('block');
29549         
29550         var kn = new Roo.KeyNav(this.eventEl, {
29551             "left" : function(e){
29552                 e.ctrlKey ?
29553                     this.showPrevMonth() :
29554                     this.update(this.activeDate.add("d", -1));
29555             },
29556
29557             "right" : function(e){
29558                 e.ctrlKey ?
29559                     this.showNextMonth() :
29560                     this.update(this.activeDate.add("d", 1));
29561             },
29562
29563             "up" : function(e){
29564                 e.ctrlKey ?
29565                     this.showNextYear() :
29566                     this.update(this.activeDate.add("d", -7));
29567             },
29568
29569             "down" : function(e){
29570                 e.ctrlKey ?
29571                     this.showPrevYear() :
29572                     this.update(this.activeDate.add("d", 7));
29573             },
29574
29575             "pageUp" : function(e){
29576                 this.showNextMonth();
29577             },
29578
29579             "pageDown" : function(e){
29580                 this.showPrevMonth();
29581             },
29582
29583             "enter" : function(e){
29584                 e.stopPropagation();
29585                 return true;
29586             },
29587
29588             scope : this
29589         });
29590
29591         this.eventEl.on("click", this.handleDateClick,  this, {delegate: "a.x-date-date"});
29592
29593         this.eventEl.addKeyListener(Roo.EventObject.SPACE, this.selectToday,  this);
29594
29595         this.el.unselectable();
29596         
29597         this.cells = this.el.select("table.x-date-inner tbody td");
29598         this.textNodes = this.el.query("table.x-date-inner tbody span");
29599
29600         this.mbtn = new Roo.Button(this.el.child("td.x-date-middle", true), {
29601             text: "&#160;",
29602             tooltip: this.monthYearText
29603         });
29604
29605         this.mbtn.on('click', this.showMonthPicker, this);
29606         this.mbtn.el.child(this.mbtn.menuClassTarget).addClass("x-btn-with-menu");
29607
29608
29609         var today = (new Date()).dateFormat(this.format);
29610         
29611         var baseTb = new Roo.Toolbar(this.el.child("td.x-date-bottom", true));
29612         if (this.showClear) {
29613             baseTb.add( new Roo.Toolbar.Fill());
29614         }
29615         baseTb.add({
29616             text: String.format(this.todayText, today),
29617             tooltip: String.format(this.todayTip, today),
29618             handler: this.selectToday,
29619             scope: this
29620         });
29621         
29622         //var todayBtn = new Roo.Button(this.el.child("td.x-date-bottom", true), {
29623             
29624         //});
29625         if (this.showClear) {
29626             
29627             baseTb.add( new Roo.Toolbar.Fill());
29628             baseTb.add({
29629                 text: '&#160;',
29630                 cls: 'x-btn-icon x-btn-clear',
29631                 handler: function() {
29632                     //this.value = '';
29633                     this.fireEvent("select", this, '');
29634                 },
29635                 scope: this
29636             });
29637         }
29638         
29639         
29640         if(Roo.isIE){
29641             this.el.repaint();
29642         }
29643         this.update(this.value);
29644     },
29645
29646     createMonthPicker : function(){
29647         if(!this.monthPicker.dom.firstChild){
29648             var buf = ['<table border="0" cellspacing="0">'];
29649             for(var i = 0; i < 6; i++){
29650                 buf.push(
29651                     '<tr><td class="x-date-mp-month"><a href="#">', this.monthNames[i].substr(0, 3), '</a></td>',
29652                     '<td class="x-date-mp-month x-date-mp-sep"><a href="#">', this.monthNames[i+6].substr(0, 3), '</a></td>',
29653                     i == 0 ?
29654                     '<td class="x-date-mp-ybtn" align="center"><a class="x-date-mp-prev"></a></td><td class="x-date-mp-ybtn" align="center"><a class="x-date-mp-next"></a></td></tr>' :
29655                     '<td class="x-date-mp-year"><a href="#"></a></td><td class="x-date-mp-year"><a href="#"></a></td></tr>'
29656                 );
29657             }
29658             buf.push(
29659                 '<tr class="x-date-mp-btns"><td colspan="4"><button type="button" class="x-date-mp-ok">',
29660                     this.okText,
29661                     '</button><button type="button" class="x-date-mp-cancel">',
29662                     this.cancelText,
29663                     '</button></td></tr>',
29664                 '</table>'
29665             );
29666             this.monthPicker.update(buf.join(''));
29667             this.monthPicker.on('click', this.onMonthClick, this);
29668             this.monthPicker.on('dblclick', this.onMonthDblClick, this);
29669
29670             this.mpMonths = this.monthPicker.select('td.x-date-mp-month');
29671             this.mpYears = this.monthPicker.select('td.x-date-mp-year');
29672
29673             this.mpMonths.each(function(m, a, i){
29674                 i += 1;
29675                 if((i%2) == 0){
29676                     m.dom.xmonth = 5 + Math.round(i * .5);
29677                 }else{
29678                     m.dom.xmonth = Math.round((i-1) * .5);
29679                 }
29680             });
29681         }
29682     },
29683
29684     showMonthPicker : function(){
29685         this.createMonthPicker();
29686         var size = this.el.getSize();
29687         this.monthPicker.setSize(size);
29688         this.monthPicker.child('table').setSize(size);
29689
29690         this.mpSelMonth = (this.activeDate || this.value).getMonth();
29691         this.updateMPMonth(this.mpSelMonth);
29692         this.mpSelYear = (this.activeDate || this.value).getFullYear();
29693         this.updateMPYear(this.mpSelYear);
29694
29695         this.monthPicker.slideIn('t', {duration:.2});
29696     },
29697
29698     updateMPYear : function(y){
29699         this.mpyear = y;
29700         var ys = this.mpYears.elements;
29701         for(var i = 1; i <= 10; i++){
29702             var td = ys[i-1], y2;
29703             if((i%2) == 0){
29704                 y2 = y + Math.round(i * .5);
29705                 td.firstChild.innerHTML = y2;
29706                 td.xyear = y2;
29707             }else{
29708                 y2 = y - (5-Math.round(i * .5));
29709                 td.firstChild.innerHTML = y2;
29710                 td.xyear = y2;
29711             }
29712             this.mpYears.item(i-1)[y2 == this.mpSelYear ? 'addClass' : 'removeClass']('x-date-mp-sel');
29713         }
29714     },
29715
29716     updateMPMonth : function(sm){
29717         this.mpMonths.each(function(m, a, i){
29718             m[m.dom.xmonth == sm ? 'addClass' : 'removeClass']('x-date-mp-sel');
29719         });
29720     },
29721
29722     selectMPMonth: function(m){
29723         
29724     },
29725
29726     onMonthClick : function(e, t){
29727         e.stopEvent();
29728         var el = new Roo.Element(t), pn;
29729         if(el.is('button.x-date-mp-cancel')){
29730             this.hideMonthPicker();
29731         }
29732         else if(el.is('button.x-date-mp-ok')){
29733             this.update(new Date(this.mpSelYear, this.mpSelMonth, (this.activeDate || this.value).getDate()));
29734             this.hideMonthPicker();
29735         }
29736         else if(pn = el.up('td.x-date-mp-month', 2)){
29737             this.mpMonths.removeClass('x-date-mp-sel');
29738             pn.addClass('x-date-mp-sel');
29739             this.mpSelMonth = pn.dom.xmonth;
29740         }
29741         else if(pn = el.up('td.x-date-mp-year', 2)){
29742             this.mpYears.removeClass('x-date-mp-sel');
29743             pn.addClass('x-date-mp-sel');
29744             this.mpSelYear = pn.dom.xyear;
29745         }
29746         else if(el.is('a.x-date-mp-prev')){
29747             this.updateMPYear(this.mpyear-10);
29748         }
29749         else if(el.is('a.x-date-mp-next')){
29750             this.updateMPYear(this.mpyear+10);
29751         }
29752     },
29753
29754     onMonthDblClick : function(e, t){
29755         e.stopEvent();
29756         var el = new Roo.Element(t), pn;
29757         if(pn = el.up('td.x-date-mp-month', 2)){
29758             this.update(new Date(this.mpSelYear, pn.dom.xmonth, (this.activeDate || this.value).getDate()));
29759             this.hideMonthPicker();
29760         }
29761         else if(pn = el.up('td.x-date-mp-year', 2)){
29762             this.update(new Date(pn.dom.xyear, this.mpSelMonth, (this.activeDate || this.value).getDate()));
29763             this.hideMonthPicker();
29764         }
29765     },
29766
29767     hideMonthPicker : function(disableAnim){
29768         if(this.monthPicker){
29769             if(disableAnim === true){
29770                 this.monthPicker.hide();
29771             }else{
29772                 this.monthPicker.slideOut('t', {duration:.2});
29773             }
29774         }
29775     },
29776
29777     // private
29778     showPrevMonth : function(e){
29779         this.update(this.activeDate.add("mo", -1));
29780     },
29781
29782     // private
29783     showNextMonth : function(e){
29784         this.update(this.activeDate.add("mo", 1));
29785     },
29786
29787     // private
29788     showPrevYear : function(){
29789         this.update(this.activeDate.add("y", -1));
29790     },
29791
29792     // private
29793     showNextYear : function(){
29794         this.update(this.activeDate.add("y", 1));
29795     },
29796
29797     // private
29798     handleMouseWheel : function(e){
29799         var delta = e.getWheelDelta();
29800         if(delta > 0){
29801             this.showPrevMonth();
29802             e.stopEvent();
29803         } else if(delta < 0){
29804             this.showNextMonth();
29805             e.stopEvent();
29806         }
29807     },
29808
29809     // private
29810     handleDateClick : function(e, t){
29811         e.stopEvent();
29812         if(t.dateValue && !Roo.fly(t.parentNode).hasClass("x-date-disabled")){
29813             this.setValue(new Date(t.dateValue));
29814             this.fireEvent("select", this, this.value);
29815         }
29816     },
29817
29818     // private
29819     selectToday : function(){
29820         this.setValue(new Date().clearTime());
29821         this.fireEvent("select", this, this.value);
29822     },
29823
29824     // private
29825     update : function(date)
29826     {
29827         var vd = this.activeDate;
29828         this.activeDate = date;
29829         if(vd && this.el){
29830             var t = date.getTime();
29831             if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
29832                 this.cells.removeClass("x-date-selected");
29833                 this.cells.each(function(c){
29834                    if(c.dom.firstChild.dateValue == t){
29835                        c.addClass("x-date-selected");
29836                        setTimeout(function(){
29837                             try{c.dom.firstChild.focus();}catch(e){}
29838                        }, 50);
29839                        return false;
29840                    }
29841                 });
29842                 return;
29843             }
29844         }
29845         
29846         var days = date.getDaysInMonth();
29847         var firstOfMonth = date.getFirstDateOfMonth();
29848         var startingPos = firstOfMonth.getDay()-this.startDay;
29849
29850         if(startingPos <= this.startDay){
29851             startingPos += 7;
29852         }
29853
29854         var pm = date.add("mo", -1);
29855         var prevStart = pm.getDaysInMonth()-startingPos;
29856
29857         var cells = this.cells.elements;
29858         var textEls = this.textNodes;
29859         days += startingPos;
29860
29861         // convert everything to numbers so it's fast
29862         var day = 86400000;
29863         var d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime();
29864         var today = new Date().clearTime().getTime();
29865         var sel = date.clearTime().getTime();
29866         var min = this.minDate ? this.minDate.clearTime() : Number.NEGATIVE_INFINITY;
29867         var max = this.maxDate ? this.maxDate.clearTime() : Number.POSITIVE_INFINITY;
29868         var ddMatch = this.disabledDatesRE;
29869         var ddText = this.disabledDatesText;
29870         var ddays = this.disabledDays ? this.disabledDays.join("") : false;
29871         var ddaysText = this.disabledDaysText;
29872         var format = this.format;
29873
29874         var setCellClass = function(cal, cell){
29875             cell.title = "";
29876             var t = d.getTime();
29877             cell.firstChild.dateValue = t;
29878             if(t == today){
29879                 cell.className += " x-date-today";
29880                 cell.title = cal.todayText;
29881             }
29882             if(t == sel){
29883                 cell.className += " x-date-selected";
29884                 setTimeout(function(){
29885                     try{cell.firstChild.focus();}catch(e){}
29886                 }, 50);
29887             }
29888             // disabling
29889             if(t < min) {
29890                 cell.className = " x-date-disabled";
29891                 cell.title = cal.minText;
29892                 return;
29893             }
29894             if(t > max) {
29895                 cell.className = " x-date-disabled";
29896                 cell.title = cal.maxText;
29897                 return;
29898             }
29899             if(ddays){
29900                 if(ddays.indexOf(d.getDay()) != -1){
29901                     cell.title = ddaysText;
29902                     cell.className = " x-date-disabled";
29903                 }
29904             }
29905             if(ddMatch && format){
29906                 var fvalue = d.dateFormat(format);
29907                 if(ddMatch.test(fvalue)){
29908                     cell.title = ddText.replace("%0", fvalue);
29909                     cell.className = " x-date-disabled";
29910                 }
29911             }
29912         };
29913
29914         var i = 0;
29915         for(; i < startingPos; i++) {
29916             textEls[i].innerHTML = (++prevStart);
29917             d.setDate(d.getDate()+1);
29918             cells[i].className = "x-date-prevday";
29919             setCellClass(this, cells[i]);
29920         }
29921         for(; i < days; i++){
29922             intDay = i - startingPos + 1;
29923             textEls[i].innerHTML = (intDay);
29924             d.setDate(d.getDate()+1);
29925             cells[i].className = "x-date-active";
29926             setCellClass(this, cells[i]);
29927         }
29928         var extraDays = 0;
29929         for(; i < 42; i++) {
29930              textEls[i].innerHTML = (++extraDays);
29931              d.setDate(d.getDate()+1);
29932              cells[i].className = "x-date-nextday";
29933              setCellClass(this, cells[i]);
29934         }
29935
29936         this.mbtn.setText(this.monthNames[date.getMonth()] + " " + date.getFullYear());
29937         this.fireEvent('monthchange', this, date);
29938         
29939         if(!this.internalRender){
29940             var main = this.el.dom.firstChild;
29941             var w = main.offsetWidth;
29942             this.el.setWidth(w + this.el.getBorderWidth("lr"));
29943             Roo.fly(main).setWidth(w);
29944             this.internalRender = true;
29945             // opera does not respect the auto grow header center column
29946             // then, after it gets a width opera refuses to recalculate
29947             // without a second pass
29948             if(Roo.isOpera && !this.secondPass){
29949                 main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + "px";
29950                 this.secondPass = true;
29951                 this.update.defer(10, this, [date]);
29952             }
29953         }
29954         
29955         
29956     }
29957 });        /*
29958  * Based on:
29959  * Ext JS Library 1.1.1
29960  * Copyright(c) 2006-2007, Ext JS, LLC.
29961  *
29962  * Originally Released Under LGPL - original licence link has changed is not relivant.
29963  *
29964  * Fork - LGPL
29965  * <script type="text/javascript">
29966  */
29967 /**
29968  * @class Roo.TabPanel
29969  * @extends Roo.util.Observable
29970  * A lightweight tab container.
29971  * <br><br>
29972  * Usage:
29973  * <pre><code>
29974 // basic tabs 1, built from existing content
29975 var tabs = new Roo.TabPanel("tabs1");
29976 tabs.addTab("script", "View Script");
29977 tabs.addTab("markup", "View Markup");
29978 tabs.activate("script");
29979
29980 // more advanced tabs, built from javascript
29981 var jtabs = new Roo.TabPanel("jtabs");
29982 jtabs.addTab("jtabs-1", "Normal Tab", "My content was added during construction.");
29983
29984 // set up the UpdateManager
29985 var tab2 = jtabs.addTab("jtabs-2", "Ajax Tab 1");
29986 var updater = tab2.getUpdateManager();
29987 updater.setDefaultUrl("ajax1.htm");
29988 tab2.on('activate', updater.refresh, updater, true);
29989
29990 // Use setUrl for Ajax loading
29991 var tab3 = jtabs.addTab("jtabs-3", "Ajax Tab 2");
29992 tab3.setUrl("ajax2.htm", null, true);
29993
29994 // Disabled tab
29995 var tab4 = jtabs.addTab("tabs1-5", "Disabled Tab", "Can't see me cause I'm disabled");
29996 tab4.disable();
29997
29998 jtabs.activate("jtabs-1");
29999  * </code></pre>
30000  * @constructor
30001  * Create a new TabPanel.
30002  * @param {String/HTMLElement/Roo.Element} container The id, DOM element or Roo.Element container where this TabPanel is to be rendered.
30003  * @param {Object/Boolean} config Config object to set any properties for this TabPanel, or true to render the tabs on the bottom.
30004  */
30005 Roo.TabPanel = function(container, config){
30006     /**
30007     * The container element for this TabPanel.
30008     * @type Roo.Element
30009     */
30010     this.el = Roo.get(container, true);
30011     if(config){
30012         if(typeof config == "boolean"){
30013             this.tabPosition = config ? "bottom" : "top";
30014         }else{
30015             Roo.apply(this, config);
30016         }
30017     }
30018     if(this.tabPosition == "bottom"){
30019         this.bodyEl = Roo.get(this.createBody(this.el.dom));
30020         this.el.addClass("x-tabs-bottom");
30021     }
30022     this.stripWrap = Roo.get(this.createStrip(this.el.dom), true);
30023     this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true);
30024     this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true);
30025     if(Roo.isIE){
30026         Roo.fly(this.stripWrap.dom.firstChild).setStyle("overflow-x", "hidden");
30027     }
30028     if(this.tabPosition != "bottom"){
30029         /** The body element that contains {@link Roo.TabPanelItem} bodies. +
30030          * @type Roo.Element
30031          */
30032         this.bodyEl = Roo.get(this.createBody(this.el.dom));
30033         this.el.addClass("x-tabs-top");
30034     }
30035     this.items = [];
30036
30037     this.bodyEl.setStyle("position", "relative");
30038
30039     this.active = null;
30040     this.activateDelegate = this.activate.createDelegate(this);
30041
30042     this.addEvents({
30043         /**
30044          * @event tabchange
30045          * Fires when the active tab changes
30046          * @param {Roo.TabPanel} this
30047          * @param {Roo.TabPanelItem} activePanel The new active tab
30048          */
30049         "tabchange": true,
30050         /**
30051          * @event beforetabchange
30052          * Fires before the active tab changes, set cancel to true on the "e" parameter to cancel the change
30053          * @param {Roo.TabPanel} this
30054          * @param {Object} e Set cancel to true on this object to cancel the tab change
30055          * @param {Roo.TabPanelItem} tab The tab being changed to
30056          */
30057         "beforetabchange" : true
30058     });
30059
30060     Roo.EventManager.onWindowResize(this.onResize, this);
30061     this.cpad = this.el.getPadding("lr");
30062     this.hiddenCount = 0;
30063
30064
30065     // toolbar on the tabbar support...
30066     if (this.toolbar) {
30067         var tcfg = this.toolbar;
30068         tcfg.container = this.stripEl.child('td.x-tab-strip-toolbar');  
30069         this.toolbar = new Roo.Toolbar(tcfg);
30070         if (Roo.isSafari) {
30071             var tbl = tcfg.container.child('table', true);
30072             tbl.setAttribute('width', '100%');
30073         }
30074         
30075     }
30076    
30077
30078
30079     Roo.TabPanel.superclass.constructor.call(this);
30080 };
30081
30082 Roo.extend(Roo.TabPanel, Roo.util.Observable, {
30083     /*
30084      *@cfg {String} tabPosition "top" or "bottom" (defaults to "top")
30085      */
30086     tabPosition : "top",
30087     /*
30088      *@cfg {Number} currentTabWidth The width of the current tab (defaults to 0)
30089      */
30090     currentTabWidth : 0,
30091     /*
30092      *@cfg {Number} minTabWidth The minimum width of a tab (defaults to 40) (ignored if {@link #resizeTabs} is not true)
30093      */
30094     minTabWidth : 40,
30095     /*
30096      *@cfg {Number} maxTabWidth The maximum width of a tab (defaults to 250) (ignored if {@link #resizeTabs} is not true)
30097      */
30098     maxTabWidth : 250,
30099     /*
30100      *@cfg {Number} preferredTabWidth The preferred (default) width of a tab (defaults to 175) (ignored if {@link #resizeTabs} is not true)
30101      */
30102     preferredTabWidth : 175,
30103     /*
30104      *@cfg {Boolean} resizeTabs True to enable dynamic tab resizing (defaults to false)
30105      */
30106     resizeTabs : false,
30107     /*
30108      *@cfg {Boolean} monitorResize Set this to true to turn on window resize monitoring (ignored if {@link #resizeTabs} is not true) (defaults to true)
30109      */
30110     monitorResize : true,
30111     /*
30112      *@cfg {Object} toolbar xtype description of toolbar to show at the right of the tab bar. 
30113      */
30114     toolbar : false,
30115
30116     /**
30117      * Creates a new {@link Roo.TabPanelItem} by looking for an existing element with the provided id -- if it's not found it creates one.
30118      * @param {String} id The id of the div to use <b>or create</b>
30119      * @param {String} text The text for the tab
30120      * @param {String} content (optional) Content to put in the TabPanelItem body
30121      * @param {Boolean} closable (optional) True to create a close icon on the tab
30122      * @return {Roo.TabPanelItem} The created TabPanelItem
30123      */
30124     addTab : function(id, text, content, closable){
30125         var item = new Roo.TabPanelItem(this, id, text, closable);
30126         this.addTabItem(item);
30127         if(content){
30128             item.setContent(content);
30129         }
30130         return item;
30131     },
30132
30133     /**
30134      * Returns the {@link Roo.TabPanelItem} with the specified id/index
30135      * @param {String/Number} id The id or index of the TabPanelItem to fetch.
30136      * @return {Roo.TabPanelItem}
30137      */
30138     getTab : function(id){
30139         return this.items[id];
30140     },
30141
30142     /**
30143      * Hides the {@link Roo.TabPanelItem} with the specified id/index
30144      * @param {String/Number} id The id or index of the TabPanelItem to hide.
30145      */
30146     hideTab : function(id){
30147         var t = this.items[id];
30148         if(!t.isHidden()){
30149            t.setHidden(true);
30150            this.hiddenCount++;
30151            this.autoSizeTabs();
30152         }
30153     },
30154
30155     /**
30156      * "Unhides" the {@link Roo.TabPanelItem} with the specified id/index.
30157      * @param {String/Number} id The id or index of the TabPanelItem to unhide.
30158      */
30159     unhideTab : function(id){
30160         var t = this.items[id];
30161         if(t.isHidden()){
30162            t.setHidden(false);
30163            this.hiddenCount--;
30164            this.autoSizeTabs();
30165         }
30166     },
30167
30168     /**
30169      * Adds an existing {@link Roo.TabPanelItem}.
30170      * @param {Roo.TabPanelItem} item The TabPanelItem to add
30171      */
30172     addTabItem : function(item){
30173         this.items[item.id] = item;
30174         this.items.push(item);
30175         if(this.resizeTabs){
30176            item.setWidth(this.currentTabWidth || this.preferredTabWidth);
30177            this.autoSizeTabs();
30178         }else{
30179             item.autoSize();
30180         }
30181     },
30182
30183     /**
30184      * Removes a {@link Roo.TabPanelItem}.
30185      * @param {String/Number} id The id or index of the TabPanelItem to remove.
30186      */
30187     removeTab : function(id){
30188         var items = this.items;
30189         var tab = items[id];
30190         if(!tab) { return; }
30191         var index = items.indexOf(tab);
30192         if(this.active == tab && items.length > 1){
30193             var newTab = this.getNextAvailable(index);
30194             if(newTab) {
30195                 newTab.activate();
30196             }
30197         }
30198         this.stripEl.dom.removeChild(tab.pnode.dom);
30199         if(tab.bodyEl.dom.parentNode == this.bodyEl.dom){ // if it was moved already prevent error
30200             this.bodyEl.dom.removeChild(tab.bodyEl.dom);
30201         }
30202         items.splice(index, 1);
30203         delete this.items[tab.id];
30204         tab.fireEvent("close", tab);
30205         tab.purgeListeners();
30206         this.autoSizeTabs();
30207     },
30208
30209     getNextAvailable : function(start){
30210         var items = this.items;
30211         var index = start;
30212         // look for a next tab that will slide over to
30213         // replace the one being removed
30214         while(index < items.length){
30215             var item = items[++index];
30216             if(item && !item.isHidden()){
30217                 return item;
30218             }
30219         }
30220         // if one isn't found select the previous tab (on the left)
30221         index = start;
30222         while(index >= 0){
30223             var item = items[--index];
30224             if(item && !item.isHidden()){
30225                 return item;
30226             }
30227         }
30228         return null;
30229     },
30230
30231     /**
30232      * Disables a {@link Roo.TabPanelItem}. It cannot be the active tab, if it is this call is ignored.
30233      * @param {String/Number} id The id or index of the TabPanelItem to disable.
30234      */
30235     disableTab : function(id){
30236         var tab = this.items[id];
30237         if(tab && this.active != tab){
30238             tab.disable();
30239         }
30240     },
30241
30242     /**
30243      * Enables a {@link Roo.TabPanelItem} that is disabled.
30244      * @param {String/Number} id The id or index of the TabPanelItem to enable.
30245      */
30246     enableTab : function(id){
30247         var tab = this.items[id];
30248         tab.enable();
30249     },
30250
30251     /**
30252      * Activates a {@link Roo.TabPanelItem}. The currently active one will be deactivated.
30253      * @param {String/Number} id The id or index of the TabPanelItem to activate.
30254      * @return {Roo.TabPanelItem} The TabPanelItem.
30255      */
30256     activate : function(id){
30257         var tab = this.items[id];
30258         if(!tab){
30259             return null;
30260         }
30261         if(tab == this.active || tab.disabled){
30262             return tab;
30263         }
30264         var e = {};
30265         this.fireEvent("beforetabchange", this, e, tab);
30266         if(e.cancel !== true && !tab.disabled){
30267             if(this.active){
30268                 this.active.hide();
30269             }
30270             this.active = this.items[id];
30271             this.active.show();
30272             this.fireEvent("tabchange", this, this.active);
30273         }
30274         return tab;
30275     },
30276
30277     /**
30278      * Gets the active {@link Roo.TabPanelItem}.
30279      * @return {Roo.TabPanelItem} The active TabPanelItem or null if none are active.
30280      */
30281     getActiveTab : function(){
30282         return this.active;
30283     },
30284
30285     /**
30286      * Updates the tab body element to fit the height of the container element
30287      * for overflow scrolling
30288      * @param {Number} targetHeight (optional) Override the starting height from the elements height
30289      */
30290     syncHeight : function(targetHeight){
30291         var height = (targetHeight || this.el.getHeight())-this.el.getBorderWidth("tb")-this.el.getPadding("tb");
30292         var bm = this.bodyEl.getMargins();
30293         var newHeight = height-(this.stripWrap.getHeight()||0)-(bm.top+bm.bottom);
30294         this.bodyEl.setHeight(newHeight);
30295         return newHeight;
30296     },
30297
30298     onResize : function(){
30299         if(this.monitorResize){
30300             this.autoSizeTabs();
30301         }
30302     },
30303
30304     /**
30305      * Disables tab resizing while tabs are being added (if {@link #resizeTabs} is false this does nothing)
30306      */
30307     beginUpdate : function(){
30308         this.updating = true;
30309     },
30310
30311     /**
30312      * Stops an update and resizes the tabs (if {@link #resizeTabs} is false this does nothing)
30313      */
30314     endUpdate : function(){
30315         this.updating = false;
30316         this.autoSizeTabs();
30317     },
30318
30319     /**
30320      * Manual call to resize the tabs (if {@link #resizeTabs} is false this does nothing)
30321      */
30322     autoSizeTabs : function(){
30323         var count = this.items.length;
30324         var vcount = count - this.hiddenCount;
30325         if(!this.resizeTabs || count < 1 || vcount < 1 || this.updating) {
30326             return;
30327         }
30328         var w = Math.max(this.el.getWidth() - this.cpad, 10);
30329         var availWidth = Math.floor(w / vcount);
30330         var b = this.stripBody;
30331         if(b.getWidth() > w){
30332             var tabs = this.items;
30333             this.setTabWidth(Math.max(availWidth, this.minTabWidth)-2);
30334             if(availWidth < this.minTabWidth){
30335                 /*if(!this.sleft){    // incomplete scrolling code
30336                     this.createScrollButtons();
30337                 }
30338                 this.showScroll();
30339                 this.stripClip.setWidth(w - (this.sleft.getWidth()+this.sright.getWidth()));*/
30340             }
30341         }else{
30342             if(this.currentTabWidth < this.preferredTabWidth){
30343                 this.setTabWidth(Math.min(availWidth, this.preferredTabWidth)-2);
30344             }
30345         }
30346     },
30347
30348     /**
30349      * Returns the number of tabs in this TabPanel.
30350      * @return {Number}
30351      */
30352      getCount : function(){
30353          return this.items.length;
30354      },
30355
30356     /**
30357      * Resizes all the tabs to the passed width
30358      * @param {Number} The new width
30359      */
30360     setTabWidth : function(width){
30361         this.currentTabWidth = width;
30362         for(var i = 0, len = this.items.length; i < len; i++) {
30363                 if(!this.items[i].isHidden()) {
30364                 this.items[i].setWidth(width);
30365             }
30366         }
30367     },
30368
30369     /**
30370      * Destroys this TabPanel
30371      * @param {Boolean} removeEl (optional) True to remove the element from the DOM as well (defaults to undefined)
30372      */
30373     destroy : function(removeEl){
30374         Roo.EventManager.removeResizeListener(this.onResize, this);
30375         for(var i = 0, len = this.items.length; i < len; i++){
30376             this.items[i].purgeListeners();
30377         }
30378         if(removeEl === true){
30379             this.el.update("");
30380             this.el.remove();
30381         }
30382     }
30383 });
30384
30385 /**
30386  * @class Roo.TabPanelItem
30387  * @extends Roo.util.Observable
30388  * Represents an individual item (tab plus body) in a TabPanel.
30389  * @param {Roo.TabPanel} tabPanel The {@link Roo.TabPanel} this TabPanelItem belongs to
30390  * @param {String} id The id of this TabPanelItem
30391  * @param {String} text The text for the tab of this TabPanelItem
30392  * @param {Boolean} closable True to allow this TabPanelItem to be closable (defaults to false)
30393  */
30394 Roo.TabPanelItem = function(tabPanel, id, text, closable){
30395     /**
30396      * The {@link Roo.TabPanel} this TabPanelItem belongs to
30397      * @type Roo.TabPanel
30398      */
30399     this.tabPanel = tabPanel;
30400     /**
30401      * The id for this TabPanelItem
30402      * @type String
30403      */
30404     this.id = id;
30405     /** @private */
30406     this.disabled = false;
30407     /** @private */
30408     this.text = text;
30409     /** @private */
30410     this.loaded = false;
30411     this.closable = closable;
30412
30413     /**
30414      * The body element for this TabPanelItem.
30415      * @type Roo.Element
30416      */
30417     this.bodyEl = Roo.get(tabPanel.createItemBody(tabPanel.bodyEl.dom, id));
30418     this.bodyEl.setVisibilityMode(Roo.Element.VISIBILITY);
30419     this.bodyEl.setStyle("display", "block");
30420     this.bodyEl.setStyle("zoom", "1");
30421     this.hideAction();
30422
30423     var els = tabPanel.createStripElements(tabPanel.stripEl.dom, text, closable);
30424     /** @private */
30425     this.el = Roo.get(els.el, true);
30426     this.inner = Roo.get(els.inner, true);
30427     this.textEl = Roo.get(this.el.dom.firstChild.firstChild.firstChild, true);
30428     this.pnode = Roo.get(els.el.parentNode, true);
30429     this.el.on("mousedown", this.onTabMouseDown, this);
30430     this.el.on("click", this.onTabClick, this);
30431     /** @private */
30432     if(closable){
30433         var c = Roo.get(els.close, true);
30434         c.dom.title = this.closeText;
30435         c.addClassOnOver("close-over");
30436         c.on("click", this.closeClick, this);
30437      }
30438
30439     this.addEvents({
30440          /**
30441          * @event activate
30442          * Fires when this tab becomes the active tab.
30443          * @param {Roo.TabPanel} tabPanel The parent TabPanel
30444          * @param {Roo.TabPanelItem} this
30445          */
30446         "activate": true,
30447         /**
30448          * @event beforeclose
30449          * Fires before this tab is closed. To cancel the close, set cancel to true on e (e.cancel = true).
30450          * @param {Roo.TabPanelItem} this
30451          * @param {Object} e Set cancel to true on this object to cancel the close.
30452          */
30453         "beforeclose": true,
30454         /**
30455          * @event close
30456          * Fires when this tab is closed.
30457          * @param {Roo.TabPanelItem} this
30458          */
30459          "close": true,
30460         /**
30461          * @event deactivate
30462          * Fires when this tab is no longer the active tab.
30463          * @param {Roo.TabPanel} tabPanel The parent TabPanel
30464          * @param {Roo.TabPanelItem} this
30465          */
30466          "deactivate" : true
30467     });
30468     this.hidden = false;
30469
30470     Roo.TabPanelItem.superclass.constructor.call(this);
30471 };
30472
30473 Roo.extend(Roo.TabPanelItem, Roo.util.Observable, {
30474     purgeListeners : function(){
30475        Roo.util.Observable.prototype.purgeListeners.call(this);
30476        this.el.removeAllListeners();
30477     },
30478     /**
30479      * Shows this TabPanelItem -- this <b>does not</b> deactivate the currently active TabPanelItem.
30480      */
30481     show : function(){
30482         this.pnode.addClass("on");
30483         this.showAction();
30484         if(Roo.isOpera){
30485             this.tabPanel.stripWrap.repaint();
30486         }
30487         this.fireEvent("activate", this.tabPanel, this);
30488     },
30489
30490     /**
30491      * Returns true if this tab is the active tab.
30492      * @return {Boolean}
30493      */
30494     isActive : function(){
30495         return this.tabPanel.getActiveTab() == this;
30496     },
30497
30498     /**
30499      * Hides this TabPanelItem -- if you don't activate another TabPanelItem this could look odd.
30500      */
30501     hide : function(){
30502         this.pnode.removeClass("on");
30503         this.hideAction();
30504         this.fireEvent("deactivate", this.tabPanel, this);
30505     },
30506
30507     hideAction : function(){
30508         this.bodyEl.hide();
30509         this.bodyEl.setStyle("position", "absolute");
30510         this.bodyEl.setLeft("-20000px");
30511         this.bodyEl.setTop("-20000px");
30512     },
30513
30514     showAction : function(){
30515         this.bodyEl.setStyle("position", "relative");
30516         this.bodyEl.setTop("");
30517         this.bodyEl.setLeft("");
30518         this.bodyEl.show();
30519     },
30520
30521     /**
30522      * Set the tooltip for the tab.
30523      * @param {String} tooltip The tab's tooltip
30524      */
30525     setTooltip : function(text){
30526         if(Roo.QuickTips && Roo.QuickTips.isEnabled()){
30527             this.textEl.dom.qtip = text;
30528             this.textEl.dom.removeAttribute('title');
30529         }else{
30530             this.textEl.dom.title = text;
30531         }
30532     },
30533
30534     onTabClick : function(e){
30535         e.preventDefault();
30536         this.tabPanel.activate(this.id);
30537     },
30538
30539     onTabMouseDown : function(e){
30540         e.preventDefault();
30541         this.tabPanel.activate(this.id);
30542     },
30543
30544     getWidth : function(){
30545         return this.inner.getWidth();
30546     },
30547
30548     setWidth : function(width){
30549         var iwidth = width - this.pnode.getPadding("lr");
30550         this.inner.setWidth(iwidth);
30551         this.textEl.setWidth(iwidth-this.inner.getPadding("lr"));
30552         this.pnode.setWidth(width);
30553     },
30554
30555     /**
30556      * Show or hide the tab
30557      * @param {Boolean} hidden True to hide or false to show.
30558      */
30559     setHidden : function(hidden){
30560         this.hidden = hidden;
30561         this.pnode.setStyle("display", hidden ? "none" : "");
30562     },
30563
30564     /**
30565      * Returns true if this tab is "hidden"
30566      * @return {Boolean}
30567      */
30568     isHidden : function(){
30569         return this.hidden;
30570     },
30571
30572     /**
30573      * Returns the text for this tab
30574      * @return {String}
30575      */
30576     getText : function(){
30577         return this.text;
30578     },
30579
30580     autoSize : function(){
30581         //this.el.beginMeasure();
30582         this.textEl.setWidth(1);
30583         /*
30584          *  #2804 [new] Tabs in Roojs
30585          *  increase the width by 2-4 pixels to prevent the ellipssis showing in chrome
30586          */
30587         this.setWidth(this.textEl.dom.scrollWidth+this.pnode.getPadding("lr")+this.inner.getPadding("lr") + 2);
30588         //this.el.endMeasure();
30589     },
30590
30591     /**
30592      * Sets the text for the tab (Note: this also sets the tooltip text)
30593      * @param {String} text The tab's text and tooltip
30594      */
30595     setText : function(text){
30596         this.text = text;
30597         this.textEl.update(text);
30598         this.setTooltip(text);
30599         if(!this.tabPanel.resizeTabs){
30600             this.autoSize();
30601         }
30602     },
30603     /**
30604      * Activates this TabPanelItem -- this <b>does</b> deactivate the currently active TabPanelItem.
30605      */
30606     activate : function(){
30607         this.tabPanel.activate(this.id);
30608     },
30609
30610     /**
30611      * Disables this TabPanelItem -- this does nothing if this is the active TabPanelItem.
30612      */
30613     disable : function(){
30614         if(this.tabPanel.active != this){
30615             this.disabled = true;
30616             this.pnode.addClass("disabled");
30617         }
30618     },
30619
30620     /**
30621      * Enables this TabPanelItem if it was previously disabled.
30622      */
30623     enable : function(){
30624         this.disabled = false;
30625         this.pnode.removeClass("disabled");
30626     },
30627
30628     /**
30629      * Sets the content for this TabPanelItem.
30630      * @param {String} content The content
30631      * @param {Boolean} loadScripts true to look for and load scripts
30632      */
30633     setContent : function(content, loadScripts){
30634         this.bodyEl.update(content, loadScripts);
30635     },
30636
30637     /**
30638      * Gets the {@link Roo.UpdateManager} for the body of this TabPanelItem. Enables you to perform Ajax updates.
30639      * @return {Roo.UpdateManager} The UpdateManager
30640      */
30641     getUpdateManager : function(){
30642         return this.bodyEl.getUpdateManager();
30643     },
30644
30645     /**
30646      * Set a URL to be used to load the content for this TabPanelItem.
30647      * @param {String/Function} url The URL to load the content from, or a function to call to get the URL
30648      * @param {String/Object} params (optional) The string params for the update call or an object of the params. See {@link Roo.UpdateManager#update} for more details. (Defaults to null)
30649      * @param {Boolean} loadOnce (optional) Whether to only load the content once. If this is false it makes the Ajax call every time this TabPanelItem is activated. (Defaults to false)
30650      * @return {Roo.UpdateManager} The UpdateManager
30651      */
30652     setUrl : function(url, params, loadOnce){
30653         if(this.refreshDelegate){
30654             this.un('activate', this.refreshDelegate);
30655         }
30656         this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
30657         this.on("activate", this.refreshDelegate);
30658         return this.bodyEl.getUpdateManager();
30659     },
30660
30661     /** @private */
30662     _handleRefresh : function(url, params, loadOnce){
30663         if(!loadOnce || !this.loaded){
30664             var updater = this.bodyEl.getUpdateManager();
30665             updater.update(url, params, this._setLoaded.createDelegate(this));
30666         }
30667     },
30668
30669     /**
30670      *   Forces a content refresh from the URL specified in the {@link #setUrl} method.
30671      *   Will fail silently if the setUrl method has not been called.
30672      *   This does not activate the panel, just updates its content.
30673      */
30674     refresh : function(){
30675         if(this.refreshDelegate){
30676            this.loaded = false;
30677            this.refreshDelegate();
30678         }
30679     },
30680
30681     /** @private */
30682     _setLoaded : function(){
30683         this.loaded = true;
30684     },
30685
30686     /** @private */
30687     closeClick : function(e){
30688         var o = {};
30689         e.stopEvent();
30690         this.fireEvent("beforeclose", this, o);
30691         if(o.cancel !== true){
30692             this.tabPanel.removeTab(this.id);
30693         }
30694     },
30695     /**
30696      * The text displayed in the tooltip for the close icon.
30697      * @type String
30698      */
30699     closeText : "Close this tab"
30700 });
30701
30702 /** @private */
30703 Roo.TabPanel.prototype.createStrip = function(container){
30704     var strip = document.createElement("div");
30705     strip.className = "x-tabs-wrap";
30706     container.appendChild(strip);
30707     return strip;
30708 };
30709 /** @private */
30710 Roo.TabPanel.prototype.createStripList = function(strip){
30711     // div wrapper for retard IE
30712     // returns the "tr" element.
30713     strip.innerHTML = '<div class="x-tabs-strip-wrap">'+
30714         '<table class="x-tabs-strip" cellspacing="0" cellpadding="0" border="0"><tbody><tr>'+
30715         '<td class="x-tab-strip-toolbar"></td></tr></tbody></table></div>';
30716     return strip.firstChild.firstChild.firstChild.firstChild;
30717 };
30718 /** @private */
30719 Roo.TabPanel.prototype.createBody = function(container){
30720     var body = document.createElement("div");
30721     Roo.id(body, "tab-body");
30722     Roo.fly(body).addClass("x-tabs-body");
30723     container.appendChild(body);
30724     return body;
30725 };
30726 /** @private */
30727 Roo.TabPanel.prototype.createItemBody = function(bodyEl, id){
30728     var body = Roo.getDom(id);
30729     if(!body){
30730         body = document.createElement("div");
30731         body.id = id;
30732     }
30733     Roo.fly(body).addClass("x-tabs-item-body");
30734     bodyEl.insertBefore(body, bodyEl.firstChild);
30735     return body;
30736 };
30737 /** @private */
30738 Roo.TabPanel.prototype.createStripElements = function(stripEl, text, closable){
30739     var td = document.createElement("td");
30740     stripEl.insertBefore(td, stripEl.childNodes[stripEl.childNodes.length-1]);
30741     //stripEl.appendChild(td);
30742     if(closable){
30743         td.className = "x-tabs-closable";
30744         if(!this.closeTpl){
30745             this.closeTpl = new Roo.Template(
30746                '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
30747                '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span>' +
30748                '<div unselectable="on" class="close-icon">&#160;</div></em></span></a>'
30749             );
30750         }
30751         var el = this.closeTpl.overwrite(td, {"text": text});
30752         var close = el.getElementsByTagName("div")[0];
30753         var inner = el.getElementsByTagName("em")[0];
30754         return {"el": el, "close": close, "inner": inner};
30755     } else {
30756         if(!this.tabTpl){
30757             this.tabTpl = new Roo.Template(
30758                '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
30759                '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span></em></span></a>'
30760             );
30761         }
30762         var el = this.tabTpl.overwrite(td, {"text": text});
30763         var inner = el.getElementsByTagName("em")[0];
30764         return {"el": el, "inner": inner};
30765     }
30766 };/*
30767  * Based on:
30768  * Ext JS Library 1.1.1
30769  * Copyright(c) 2006-2007, Ext JS, LLC.
30770  *
30771  * Originally Released Under LGPL - original licence link has changed is not relivant.
30772  *
30773  * Fork - LGPL
30774  * <script type="text/javascript">
30775  */
30776
30777 /**
30778  * @class Roo.Button
30779  * @extends Roo.util.Observable
30780  * Simple Button class
30781  * @cfg {String} text The button text
30782  * @cfg {String} icon The path to an image to display in the button (the image will be set as the background-image
30783  * CSS property of the button by default, so if you want a mixed icon/text button, set cls:"x-btn-text-icon")
30784  * @cfg {Function} handler A function called when the button is clicked (can be used instead of click event)
30785  * @cfg {Object} scope The scope of the handler
30786  * @cfg {Number} minWidth The minimum width for this button (used to give a set of buttons a common width)
30787  * @cfg {String/Object} tooltip The tooltip for the button - can be a string or QuickTips config object
30788  * @cfg {Boolean} hidden True to start hidden (defaults to false)
30789  * @cfg {Boolean} disabled True to start disabled (defaults to false)
30790  * @cfg {Boolean} pressed True to start pressed (only if enableToggle = true)
30791  * @cfg {String} toggleGroup The group this toggle button is a member of (only 1 per group can be pressed, only
30792    applies if enableToggle = true)
30793  * @cfg {String/HTMLElement/Element} renderTo The element to append the button to
30794  * @cfg {Boolean/Object} repeat True to repeat fire the click event while the mouse is down. This can also be
30795   an {@link Roo.util.ClickRepeater} config object (defaults to false).
30796  * @constructor
30797  * Create a new button
30798  * @param {Object} config The config object
30799  */
30800 Roo.Button = function(renderTo, config)
30801 {
30802     if (!config) {
30803         config = renderTo;
30804         renderTo = config.renderTo || false;
30805     }
30806     
30807     Roo.apply(this, config);
30808     this.addEvents({
30809         /**
30810              * @event click
30811              * Fires when this button is clicked
30812              * @param {Button} this
30813              * @param {EventObject} e The click event
30814              */
30815             "click" : true,
30816         /**
30817              * @event toggle
30818              * Fires when the "pressed" state of this button changes (only if enableToggle = true)
30819              * @param {Button} this
30820              * @param {Boolean} pressed
30821              */
30822             "toggle" : true,
30823         /**
30824              * @event mouseover
30825              * Fires when the mouse hovers over the button
30826              * @param {Button} this
30827              * @param {Event} e The event object
30828              */
30829         'mouseover' : true,
30830         /**
30831              * @event mouseout
30832              * Fires when the mouse exits the button
30833              * @param {Button} this
30834              * @param {Event} e The event object
30835              */
30836         'mouseout': true,
30837          /**
30838              * @event render
30839              * Fires when the button is rendered
30840              * @param {Button} this
30841              */
30842         'render': true
30843     });
30844     if(this.menu){
30845         this.menu = Roo.menu.MenuMgr.get(this.menu);
30846     }
30847     // register listeners first!!  - so render can be captured..
30848     Roo.util.Observable.call(this);
30849     if(renderTo){
30850         this.render(renderTo);
30851     }
30852     
30853   
30854 };
30855
30856 Roo.extend(Roo.Button, Roo.util.Observable, {
30857     /**
30858      * 
30859      */
30860     
30861     /**
30862      * Read-only. True if this button is hidden
30863      * @type Boolean
30864      */
30865     hidden : false,
30866     /**
30867      * Read-only. True if this button is disabled
30868      * @type Boolean
30869      */
30870     disabled : false,
30871     /**
30872      * Read-only. True if this button is pressed (only if enableToggle = true)
30873      * @type Boolean
30874      */
30875     pressed : false,
30876
30877     /**
30878      * @cfg {Number} tabIndex 
30879      * The DOM tabIndex for this button (defaults to undefined)
30880      */
30881     tabIndex : undefined,
30882
30883     /**
30884      * @cfg {Boolean} enableToggle
30885      * True to enable pressed/not pressed toggling (defaults to false)
30886      */
30887     enableToggle: false,
30888     /**
30889      * @cfg {Roo.menu.Menu} menu
30890      * Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob (defaults to undefined).
30891      */
30892     menu : undefined,
30893     /**
30894      * @cfg {String} menuAlign
30895      * The position to align the menu to (see {@link Roo.Element#alignTo} for more details, defaults to 'tl-bl?').
30896      */
30897     menuAlign : "tl-bl?",
30898
30899     /**
30900      * @cfg {String} iconCls
30901      * A css class which sets a background image to be used as the icon for this button (defaults to undefined).
30902      */
30903     iconCls : undefined,
30904     /**
30905      * @cfg {String} type
30906      * The button's type, corresponding to the DOM input element type attribute.  Either "submit," "reset" or "button" (default).
30907      */
30908     type : 'button',
30909
30910     // private
30911     menuClassTarget: 'tr',
30912
30913     /**
30914      * @cfg {String} clickEvent
30915      * The type of event to map to the button's event handler (defaults to 'click')
30916      */
30917     clickEvent : 'click',
30918
30919     /**
30920      * @cfg {Boolean} handleMouseEvents
30921      * False to disable visual cues on mouseover, mouseout and mousedown (defaults to true)
30922      */
30923     handleMouseEvents : true,
30924
30925     /**
30926      * @cfg {String} tooltipType
30927      * The type of tooltip to use. Either "qtip" (default) for QuickTips or "title" for title attribute.
30928      */
30929     tooltipType : 'qtip',
30930
30931     /**
30932      * @cfg {String} cls
30933      * A CSS class to apply to the button's main element.
30934      */
30935     
30936     /**
30937      * @cfg {Roo.Template} template (Optional)
30938      * An {@link Roo.Template} with which to create the Button's main element. This Template must
30939      * contain numeric substitution parameter 0 if it is to display the tRoo property. Changing the template could
30940      * require code modifications if required elements (e.g. a button) aren't present.
30941      */
30942
30943     // private
30944     render : function(renderTo){
30945         var btn;
30946         if(this.hideParent){
30947             this.parentEl = Roo.get(renderTo);
30948         }
30949         if(!this.dhconfig){
30950             if(!this.template){
30951                 if(!Roo.Button.buttonTemplate){
30952                     // hideous table template
30953                     Roo.Button.buttonTemplate = new Roo.Template(
30954                         '<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap"><tbody><tr>',
30955                         '<td class="x-btn-left"><i>&#160;</i></td><td class="x-btn-center"><em unselectable="on"><button class="x-btn-text" type="{1}">{0}</button></em></td><td class="x-btn-right"><i>&#160;</i></td>',
30956                         "</tr></tbody></table>");
30957                 }
30958                 this.template = Roo.Button.buttonTemplate;
30959             }
30960             btn = this.template.append(renderTo, [this.text || '&#160;', this.type], true);
30961             var btnEl = btn.child("button:first");
30962             btnEl.on('focus', this.onFocus, this);
30963             btnEl.on('blur', this.onBlur, this);
30964             if(this.cls){
30965                 btn.addClass(this.cls);
30966             }
30967             if(this.icon){
30968                 btnEl.setStyle('background-image', 'url(' +this.icon +')');
30969             }
30970             if(this.iconCls){
30971                 btnEl.addClass(this.iconCls);
30972                 if(!this.cls){
30973                     btn.addClass(this.text ? 'x-btn-text-icon' : 'x-btn-icon');
30974                 }
30975             }
30976             if(this.tabIndex !== undefined){
30977                 btnEl.dom.tabIndex = this.tabIndex;
30978             }
30979             if(this.tooltip){
30980                 if(typeof this.tooltip == 'object'){
30981                     Roo.QuickTips.tips(Roo.apply({
30982                           target: btnEl.id
30983                     }, this.tooltip));
30984                 } else {
30985                     btnEl.dom[this.tooltipType] = this.tooltip;
30986                 }
30987             }
30988         }else{
30989             btn = Roo.DomHelper.append(Roo.get(renderTo).dom, this.dhconfig, true);
30990         }
30991         this.el = btn;
30992         if(this.id){
30993             this.el.dom.id = this.el.id = this.id;
30994         }
30995         if(this.menu){
30996             this.el.child(this.menuClassTarget).addClass("x-btn-with-menu");
30997             this.menu.on("show", this.onMenuShow, this);
30998             this.menu.on("hide", this.onMenuHide, this);
30999         }
31000         btn.addClass("x-btn");
31001         if(Roo.isIE && !Roo.isIE7){
31002             this.autoWidth.defer(1, this);
31003         }else{
31004             this.autoWidth();
31005         }
31006         if(this.handleMouseEvents){
31007             btn.on("mouseover", this.onMouseOver, this);
31008             btn.on("mouseout", this.onMouseOut, this);
31009             btn.on("mousedown", this.onMouseDown, this);
31010         }
31011         btn.on(this.clickEvent, this.onClick, this);
31012         //btn.on("mouseup", this.onMouseUp, this);
31013         if(this.hidden){
31014             this.hide();
31015         }
31016         if(this.disabled){
31017             this.disable();
31018         }
31019         Roo.ButtonToggleMgr.register(this);
31020         if(this.pressed){
31021             this.el.addClass("x-btn-pressed");
31022         }
31023         if(this.repeat){
31024             var repeater = new Roo.util.ClickRepeater(btn,
31025                 typeof this.repeat == "object" ? this.repeat : {}
31026             );
31027             repeater.on("click", this.onClick,  this);
31028         }
31029         
31030         this.fireEvent('render', this);
31031         
31032     },
31033     /**
31034      * Returns the button's underlying element
31035      * @return {Roo.Element} The element
31036      */
31037     getEl : function(){
31038         return this.el;  
31039     },
31040     
31041     /**
31042      * Destroys this Button and removes any listeners.
31043      */
31044     destroy : function(){
31045         Roo.ButtonToggleMgr.unregister(this);
31046         this.el.removeAllListeners();
31047         this.purgeListeners();
31048         this.el.remove();
31049     },
31050
31051     // private
31052     autoWidth : function(){
31053         if(this.el){
31054             this.el.setWidth("auto");
31055             if(Roo.isIE7 && Roo.isStrict){
31056                 var ib = this.el.child('button');
31057                 if(ib && ib.getWidth() > 20){
31058                     ib.clip();
31059                     ib.setWidth(Roo.util.TextMetrics.measure(ib, this.text).width+ib.getFrameWidth('lr'));
31060                 }
31061             }
31062             if(this.minWidth){
31063                 if(this.hidden){
31064                     this.el.beginMeasure();
31065                 }
31066                 if(this.el.getWidth() < this.minWidth){
31067                     this.el.setWidth(this.minWidth);
31068                 }
31069                 if(this.hidden){
31070                     this.el.endMeasure();
31071                 }
31072             }
31073         }
31074     },
31075
31076     /**
31077      * Assigns this button's click handler
31078      * @param {Function} handler The function to call when the button is clicked
31079      * @param {Object} scope (optional) Scope for the function passed in
31080      */
31081     setHandler : function(handler, scope){
31082         this.handler = handler;
31083         this.scope = scope;  
31084     },
31085     
31086     /**
31087      * Sets this button's text
31088      * @param {String} text The button text
31089      */
31090     setText : function(text){
31091         this.text = text;
31092         if(this.el){
31093             this.el.child("td.x-btn-center button.x-btn-text").update(text);
31094         }
31095         this.autoWidth();
31096     },
31097     
31098     /**
31099      * Gets the text for this button
31100      * @return {String} The button text
31101      */
31102     getText : function(){
31103         return this.text;  
31104     },
31105     
31106     /**
31107      * Show this button
31108      */
31109     show: function(){
31110         this.hidden = false;
31111         if(this.el){
31112             this[this.hideParent? 'parentEl' : 'el'].setStyle("display", "");
31113         }
31114     },
31115     
31116     /**
31117      * Hide this button
31118      */
31119     hide: function(){
31120         this.hidden = true;
31121         if(this.el){
31122             this[this.hideParent? 'parentEl' : 'el'].setStyle("display", "none");
31123         }
31124     },
31125     
31126     /**
31127      * Convenience function for boolean show/hide
31128      * @param {Boolean} visible True to show, false to hide
31129      */
31130     setVisible: function(visible){
31131         if(visible) {
31132             this.show();
31133         }else{
31134             this.hide();
31135         }
31136     },
31137     
31138     /**
31139      * If a state it passed, it becomes the pressed state otherwise the current state is toggled.
31140      * @param {Boolean} state (optional) Force a particular state
31141      */
31142     toggle : function(state){
31143         state = state === undefined ? !this.pressed : state;
31144         if(state != this.pressed){
31145             if(state){
31146                 this.el.addClass("x-btn-pressed");
31147                 this.pressed = true;
31148                 this.fireEvent("toggle", this, true);
31149             }else{
31150                 this.el.removeClass("x-btn-pressed");
31151                 this.pressed = false;
31152                 this.fireEvent("toggle", this, false);
31153             }
31154             if(this.toggleHandler){
31155                 this.toggleHandler.call(this.scope || this, this, state);
31156             }
31157         }
31158     },
31159     
31160     /**
31161      * Focus the button
31162      */
31163     focus : function(){
31164         this.el.child('button:first').focus();
31165     },
31166     
31167     /**
31168      * Disable this button
31169      */
31170     disable : function(){
31171         if(this.el){
31172             this.el.addClass("x-btn-disabled");
31173         }
31174         this.disabled = true;
31175     },
31176     
31177     /**
31178      * Enable this button
31179      */
31180     enable : function(){
31181         if(this.el){
31182             this.el.removeClass("x-btn-disabled");
31183         }
31184         this.disabled = false;
31185     },
31186
31187     /**
31188      * Convenience function for boolean enable/disable
31189      * @param {Boolean} enabled True to enable, false to disable
31190      */
31191     setDisabled : function(v){
31192         this[v !== true ? "enable" : "disable"]();
31193     },
31194
31195     // private
31196     onClick : function(e)
31197     {
31198         if(e){
31199             e.preventDefault();
31200         }
31201         if(e.button != 0){
31202             return;
31203         }
31204         if(!this.disabled){
31205             if(this.enableToggle){
31206                 this.toggle();
31207             }
31208             if(this.menu && !this.menu.isVisible()){
31209                 this.menu.show(this.el, this.menuAlign);
31210             }
31211             this.fireEvent("click", this, e);
31212             if(this.handler){
31213                 this.el.removeClass("x-btn-over");
31214                 this.handler.call(this.scope || this, this, e);
31215             }
31216         }
31217     },
31218     // private
31219     onMouseOver : function(e){
31220         if(!this.disabled){
31221             this.el.addClass("x-btn-over");
31222             this.fireEvent('mouseover', this, e);
31223         }
31224     },
31225     // private
31226     onMouseOut : function(e){
31227         if(!e.within(this.el,  true)){
31228             this.el.removeClass("x-btn-over");
31229             this.fireEvent('mouseout', this, e);
31230         }
31231     },
31232     // private
31233     onFocus : function(e){
31234         if(!this.disabled){
31235             this.el.addClass("x-btn-focus");
31236         }
31237     },
31238     // private
31239     onBlur : function(e){
31240         this.el.removeClass("x-btn-focus");
31241     },
31242     // private
31243     onMouseDown : function(e){
31244         if(!this.disabled && e.button == 0){
31245             this.el.addClass("x-btn-click");
31246             Roo.get(document).on('mouseup', this.onMouseUp, this);
31247         }
31248     },
31249     // private
31250     onMouseUp : function(e){
31251         if(e.button == 0){
31252             this.el.removeClass("x-btn-click");
31253             Roo.get(document).un('mouseup', this.onMouseUp, this);
31254         }
31255     },
31256     // private
31257     onMenuShow : function(e){
31258         this.el.addClass("x-btn-menu-active");
31259     },
31260     // private
31261     onMenuHide : function(e){
31262         this.el.removeClass("x-btn-menu-active");
31263     }   
31264 });
31265
31266 // Private utility class used by Button
31267 Roo.ButtonToggleMgr = function(){
31268    var groups = {};
31269    
31270    function toggleGroup(btn, state){
31271        if(state){
31272            var g = groups[btn.toggleGroup];
31273            for(var i = 0, l = g.length; i < l; i++){
31274                if(g[i] != btn){
31275                    g[i].toggle(false);
31276                }
31277            }
31278        }
31279    }
31280    
31281    return {
31282        register : function(btn){
31283            if(!btn.toggleGroup){
31284                return;
31285            }
31286            var g = groups[btn.toggleGroup];
31287            if(!g){
31288                g = groups[btn.toggleGroup] = [];
31289            }
31290            g.push(btn);
31291            btn.on("toggle", toggleGroup);
31292        },
31293        
31294        unregister : function(btn){
31295            if(!btn.toggleGroup){
31296                return;
31297            }
31298            var g = groups[btn.toggleGroup];
31299            if(g){
31300                g.remove(btn);
31301                btn.un("toggle", toggleGroup);
31302            }
31303        }
31304    };
31305 }();/*
31306  * Based on:
31307  * Ext JS Library 1.1.1
31308  * Copyright(c) 2006-2007, Ext JS, LLC.
31309  *
31310  * Originally Released Under LGPL - original licence link has changed is not relivant.
31311  *
31312  * Fork - LGPL
31313  * <script type="text/javascript">
31314  */
31315  
31316 /**
31317  * @class Roo.SplitButton
31318  * @extends Roo.Button
31319  * A split button that provides a built-in dropdown arrow that can fire an event separately from the default
31320  * click event of the button.  Typically this would be used to display a dropdown menu that provides additional
31321  * options to the primary button action, but any custom handler can provide the arrowclick implementation.
31322  * @cfg {Function} arrowHandler A function called when the arrow button is clicked (can be used instead of click event)
31323  * @cfg {String} arrowTooltip The title attribute of the arrow
31324  * @constructor
31325  * Create a new menu button
31326  * @param {String/HTMLElement/Element} renderTo The element to append the button to
31327  * @param {Object} config The config object
31328  */
31329 Roo.SplitButton = function(renderTo, config){
31330     Roo.SplitButton.superclass.constructor.call(this, renderTo, config);
31331     /**
31332      * @event arrowclick
31333      * Fires when this button's arrow is clicked
31334      * @param {SplitButton} this
31335      * @param {EventObject} e The click event
31336      */
31337     this.addEvents({"arrowclick":true});
31338 };
31339
31340 Roo.extend(Roo.SplitButton, Roo.Button, {
31341     render : function(renderTo){
31342         // this is one sweet looking template!
31343         var tpl = new Roo.Template(
31344             '<table cellspacing="0" class="x-btn-menu-wrap x-btn"><tr><td>',
31345             '<table cellspacing="0" class="x-btn-wrap x-btn-menu-text-wrap"><tbody>',
31346             '<tr><td class="x-btn-left"><i>&#160;</i></td><td class="x-btn-center"><button class="x-btn-text" type="{1}">{0}</button></td></tr>',
31347             "</tbody></table></td><td>",
31348             '<table cellspacing="0" class="x-btn-wrap x-btn-menu-arrow-wrap"><tbody>',
31349             '<tr><td class="x-btn-center"><button class="x-btn-menu-arrow-el" type="button">&#160;</button></td><td class="x-btn-right"><i>&#160;</i></td></tr>',
31350             "</tbody></table></td></tr></table>"
31351         );
31352         var btn = tpl.append(renderTo, [this.text, this.type], true);
31353         var btnEl = btn.child("button");
31354         if(this.cls){
31355             btn.addClass(this.cls);
31356         }
31357         if(this.icon){
31358             btnEl.setStyle('background-image', 'url(' +this.icon +')');
31359         }
31360         if(this.iconCls){
31361             btnEl.addClass(this.iconCls);
31362             if(!this.cls){
31363                 btn.addClass(this.text ? 'x-btn-text-icon' : 'x-btn-icon');
31364             }
31365         }
31366         this.el = btn;
31367         if(this.handleMouseEvents){
31368             btn.on("mouseover", this.onMouseOver, this);
31369             btn.on("mouseout", this.onMouseOut, this);
31370             btn.on("mousedown", this.onMouseDown, this);
31371             btn.on("mouseup", this.onMouseUp, this);
31372         }
31373         btn.on(this.clickEvent, this.onClick, this);
31374         if(this.tooltip){
31375             if(typeof this.tooltip == 'object'){
31376                 Roo.QuickTips.tips(Roo.apply({
31377                       target: btnEl.id
31378                 }, this.tooltip));
31379             } else {
31380                 btnEl.dom[this.tooltipType] = this.tooltip;
31381             }
31382         }
31383         if(this.arrowTooltip){
31384             btn.child("button:nth(2)").dom[this.tooltipType] = this.arrowTooltip;
31385         }
31386         if(this.hidden){
31387             this.hide();
31388         }
31389         if(this.disabled){
31390             this.disable();
31391         }
31392         if(this.pressed){
31393             this.el.addClass("x-btn-pressed");
31394         }
31395         if(Roo.isIE && !Roo.isIE7){
31396             this.autoWidth.defer(1, this);
31397         }else{
31398             this.autoWidth();
31399         }
31400         if(this.menu){
31401             this.menu.on("show", this.onMenuShow, this);
31402             this.menu.on("hide", this.onMenuHide, this);
31403         }
31404         this.fireEvent('render', this);
31405     },
31406
31407     // private
31408     autoWidth : function(){
31409         if(this.el){
31410             var tbl = this.el.child("table:first");
31411             var tbl2 = this.el.child("table:last");
31412             this.el.setWidth("auto");
31413             tbl.setWidth("auto");
31414             if(Roo.isIE7 && Roo.isStrict){
31415                 var ib = this.el.child('button:first');
31416                 if(ib && ib.getWidth() > 20){
31417                     ib.clip();
31418                     ib.setWidth(Roo.util.TextMetrics.measure(ib, this.text).width+ib.getFrameWidth('lr'));
31419                 }
31420             }
31421             if(this.minWidth){
31422                 if(this.hidden){
31423                     this.el.beginMeasure();
31424                 }
31425                 if((tbl.getWidth()+tbl2.getWidth()) < this.minWidth){
31426                     tbl.setWidth(this.minWidth-tbl2.getWidth());
31427                 }
31428                 if(this.hidden){
31429                     this.el.endMeasure();
31430                 }
31431             }
31432             this.el.setWidth(tbl.getWidth()+tbl2.getWidth());
31433         } 
31434     },
31435     /**
31436      * Sets this button's click handler
31437      * @param {Function} handler The function to call when the button is clicked
31438      * @param {Object} scope (optional) Scope for the function passed above
31439      */
31440     setHandler : function(handler, scope){
31441         this.handler = handler;
31442         this.scope = scope;  
31443     },
31444     
31445     /**
31446      * Sets this button's arrow click handler
31447      * @param {Function} handler The function to call when the arrow is clicked
31448      * @param {Object} scope (optional) Scope for the function passed above
31449      */
31450     setArrowHandler : function(handler, scope){
31451         this.arrowHandler = handler;
31452         this.scope = scope;  
31453     },
31454     
31455     /**
31456      * Focus the button
31457      */
31458     focus : function(){
31459         if(this.el){
31460             this.el.child("button:first").focus();
31461         }
31462     },
31463
31464     // private
31465     onClick : function(e){
31466         e.preventDefault();
31467         if(!this.disabled){
31468             if(e.getTarget(".x-btn-menu-arrow-wrap")){
31469                 if(this.menu && !this.menu.isVisible()){
31470                     this.menu.show(this.el, this.menuAlign);
31471                 }
31472                 this.fireEvent("arrowclick", this, e);
31473                 if(this.arrowHandler){
31474                     this.arrowHandler.call(this.scope || this, this, e);
31475                 }
31476             }else{
31477                 this.fireEvent("click", this, e);
31478                 if(this.handler){
31479                     this.handler.call(this.scope || this, this, e);
31480                 }
31481             }
31482         }
31483     },
31484     // private
31485     onMouseDown : function(e){
31486         if(!this.disabled){
31487             Roo.fly(e.getTarget("table")).addClass("x-btn-click");
31488         }
31489     },
31490     // private
31491     onMouseUp : function(e){
31492         Roo.fly(e.getTarget("table")).removeClass("x-btn-click");
31493     }   
31494 });
31495
31496
31497 // backwards compat
31498 Roo.MenuButton = Roo.SplitButton;/*
31499  * Based on:
31500  * Ext JS Library 1.1.1
31501  * Copyright(c) 2006-2007, Ext JS, LLC.
31502  *
31503  * Originally Released Under LGPL - original licence link has changed is not relivant.
31504  *
31505  * Fork - LGPL
31506  * <script type="text/javascript">
31507  */
31508
31509 /**
31510  * @class Roo.Toolbar
31511  * @children   Roo.Toolbar.Item Roo.Toolbar.Button Roo.Toolbar.SplitButton Roo.form.Field 
31512  * Basic Toolbar class.
31513  * @constructor
31514  * Creates a new Toolbar
31515  * @param {Object} container The config object
31516  */ 
31517 Roo.Toolbar = function(container, buttons, config)
31518 {
31519     /// old consturctor format still supported..
31520     if(container instanceof Array){ // omit the container for later rendering
31521         buttons = container;
31522         config = buttons;
31523         container = null;
31524     }
31525     if (typeof(container) == 'object' && container.xtype) {
31526         config = container;
31527         container = config.container;
31528         buttons = config.buttons || []; // not really - use items!!
31529     }
31530     var xitems = [];
31531     if (config && config.items) {
31532         xitems = config.items;
31533         delete config.items;
31534     }
31535     Roo.apply(this, config);
31536     this.buttons = buttons;
31537     
31538     if(container){
31539         this.render(container);
31540     }
31541     this.xitems = xitems;
31542     Roo.each(xitems, function(b) {
31543         this.add(b);
31544     }, this);
31545     
31546 };
31547
31548 Roo.Toolbar.prototype = {
31549     /**
31550      * @cfg {Array} items
31551      * array of button configs or elements to add (will be converted to a MixedCollection)
31552      */
31553     items: false,
31554     /**
31555      * @cfg {String/HTMLElement/Element} container
31556      * The id or element that will contain the toolbar
31557      */
31558     // private
31559     render : function(ct){
31560         this.el = Roo.get(ct);
31561         if(this.cls){
31562             this.el.addClass(this.cls);
31563         }
31564         // using a table allows for vertical alignment
31565         // 100% width is needed by Safari...
31566         this.el.update('<div class="x-toolbar x-small-editor"><table cellspacing="0"><tr></tr></table></div>');
31567         this.tr = this.el.child("tr", true);
31568         var autoId = 0;
31569         this.items = new Roo.util.MixedCollection(false, function(o){
31570             return o.id || ("item" + (++autoId));
31571         });
31572         if(this.buttons){
31573             this.add.apply(this, this.buttons);
31574             delete this.buttons;
31575         }
31576     },
31577
31578     /**
31579      * Adds element(s) to the toolbar -- this function takes a variable number of 
31580      * arguments of mixed type and adds them to the toolbar.
31581      * @param {Mixed} arg1 The following types of arguments are all valid:<br />
31582      * <ul>
31583      * <li>{@link Roo.Toolbar.Button} config: A valid button config object (equivalent to {@link #addButton})</li>
31584      * <li>HtmlElement: Any standard HTML element (equivalent to {@link #addElement})</li>
31585      * <li>Field: Any form field (equivalent to {@link #addField})</li>
31586      * <li>Item: Any subclass of {@link Roo.Toolbar.Item} (equivalent to {@link #addItem})</li>
31587      * <li>String: Any generic string (gets wrapped in a {@link Roo.Toolbar.TextItem}, equivalent to {@link #addText}).
31588      * Note that there are a few special strings that are treated differently as explained nRoo.</li>
31589      * <li>'separator' or '-': Creates a separator element (equivalent to {@link #addSeparator})</li>
31590      * <li>' ': Creates a spacer element (equivalent to {@link #addSpacer})</li>
31591      * <li>'->': Creates a fill element (equivalent to {@link #addFill})</li>
31592      * </ul>
31593      * @param {Mixed} arg2
31594      * @param {Mixed} etc.
31595      */
31596     add : function(){
31597         var a = arguments, l = a.length;
31598         for(var i = 0; i < l; i++){
31599             this._add(a[i]);
31600         }
31601     },
31602     // private..
31603     _add : function(el) {
31604         
31605         if (el.xtype) {
31606             el = Roo.factory(el, typeof(Roo.Toolbar[el.xtype]) == 'undefined' ? Roo.form : Roo.Toolbar);
31607         }
31608         
31609         if (el.applyTo){ // some kind of form field
31610             return this.addField(el);
31611         } 
31612         if (el.render){ // some kind of Toolbar.Item
31613             return this.addItem(el);
31614         }
31615         if (typeof el == "string"){ // string
31616             if(el == "separator" || el == "-"){
31617                 return this.addSeparator();
31618             }
31619             if (el == " "){
31620                 return this.addSpacer();
31621             }
31622             if(el == "->"){
31623                 return this.addFill();
31624             }
31625             return this.addText(el);
31626             
31627         }
31628         if(el.tagName){ // element
31629             return this.addElement(el);
31630         }
31631         if(typeof el == "object"){ // must be button config?
31632             return this.addButton(el);
31633         }
31634         // and now what?!?!
31635         return false;
31636         
31637     },
31638     
31639     /**
31640      * Add an Xtype element
31641      * @param {Object} xtype Xtype Object
31642      * @return {Object} created Object
31643      */
31644     addxtype : function(e){
31645         return this.add(e);  
31646     },
31647     
31648     /**
31649      * Returns the Element for this toolbar.
31650      * @return {Roo.Element}
31651      */
31652     getEl : function(){
31653         return this.el;  
31654     },
31655     
31656     /**
31657      * Adds a separator
31658      * @return {Roo.Toolbar.Item} The separator item
31659      */
31660     addSeparator : function(){
31661         return this.addItem(new Roo.Toolbar.Separator());
31662     },
31663
31664     /**
31665      * Adds a spacer element
31666      * @return {Roo.Toolbar.Spacer} The spacer item
31667      */
31668     addSpacer : function(){
31669         return this.addItem(new Roo.Toolbar.Spacer());
31670     },
31671
31672     /**
31673      * Adds a fill element that forces subsequent additions to the right side of the toolbar
31674      * @return {Roo.Toolbar.Fill} The fill item
31675      */
31676     addFill : function(){
31677         return this.addItem(new Roo.Toolbar.Fill());
31678     },
31679
31680     /**
31681      * Adds any standard HTML element to the toolbar
31682      * @param {String/HTMLElement/Element} el The element or id of the element to add
31683      * @return {Roo.Toolbar.Item} The element's item
31684      */
31685     addElement : function(el){
31686         return this.addItem(new Roo.Toolbar.Item(el));
31687     },
31688     /**
31689      * Collection of items on the toolbar.. (only Toolbar Items, so use fields to retrieve fields)
31690      * @type Roo.util.MixedCollection  
31691      */
31692     items : false,
31693      
31694     /**
31695      * Adds any Toolbar.Item or subclass
31696      * @param {Roo.Toolbar.Item} item
31697      * @return {Roo.Toolbar.Item} The item
31698      */
31699     addItem : function(item){
31700         var td = this.nextBlock();
31701         item.render(td);
31702         this.items.add(item);
31703         return item;
31704     },
31705     
31706     /**
31707      * Adds a button (or buttons). See {@link Roo.Toolbar.Button} for more info on the config.
31708      * @param {Object/Array} config A button config or array of configs
31709      * @return {Roo.Toolbar.Button/Array}
31710      */
31711     addButton : function(config){
31712         if(config instanceof Array){
31713             var buttons = [];
31714             for(var i = 0, len = config.length; i < len; i++) {
31715                 buttons.push(this.addButton(config[i]));
31716             }
31717             return buttons;
31718         }
31719         var b = config;
31720         if(!(config instanceof Roo.Toolbar.Button)){
31721             b = config.split ?
31722                 new Roo.Toolbar.SplitButton(config) :
31723                 new Roo.Toolbar.Button(config);
31724         }
31725         var td = this.nextBlock();
31726         b.render(td);
31727         this.items.add(b);
31728         return b;
31729     },
31730     
31731     /**
31732      * Adds text to the toolbar
31733      * @param {String} text The text to add
31734      * @return {Roo.Toolbar.Item} The element's item
31735      */
31736     addText : function(text){
31737         return this.addItem(new Roo.Toolbar.TextItem(text));
31738     },
31739     
31740     /**
31741      * Inserts any {@link Roo.Toolbar.Item}/{@link Roo.Toolbar.Button} at the specified index.
31742      * @param {Number} index The index where the item is to be inserted
31743      * @param {Object/Roo.Toolbar.Item/Roo.Toolbar.Button (may be Array)} item The button, or button config object to be inserted.
31744      * @return {Roo.Toolbar.Button/Item}
31745      */
31746     insertButton : function(index, item){
31747         if(item instanceof Array){
31748             var buttons = [];
31749             for(var i = 0, len = item.length; i < len; i++) {
31750                buttons.push(this.insertButton(index + i, item[i]));
31751             }
31752             return buttons;
31753         }
31754         if (!(item instanceof Roo.Toolbar.Button)){
31755            item = new Roo.Toolbar.Button(item);
31756         }
31757         var td = document.createElement("td");
31758         this.tr.insertBefore(td, this.tr.childNodes[index]);
31759         item.render(td);
31760         this.items.insert(index, item);
31761         return item;
31762     },
31763     
31764     /**
31765      * Adds a new element to the toolbar from the passed {@link Roo.DomHelper} config.
31766      * @param {Object} config
31767      * @return {Roo.Toolbar.Item} The element's item
31768      */
31769     addDom : function(config, returnEl){
31770         var td = this.nextBlock();
31771         Roo.DomHelper.overwrite(td, config);
31772         var ti = new Roo.Toolbar.Item(td.firstChild);
31773         ti.render(td);
31774         this.items.add(ti);
31775         return ti;
31776     },
31777
31778     /**
31779      * Collection of fields on the toolbar.. usefull for quering (value is false if there are no fields)
31780      * @type Roo.util.MixedCollection  
31781      */
31782     fields : false,
31783     
31784     /**
31785      * Adds a dynamically rendered Roo.form field (TextField, ComboBox, etc).
31786      * Note: the field should not have been rendered yet. For a field that has already been
31787      * rendered, use {@link #addElement}.
31788      * @param {Roo.form.Field} field
31789      * @return {Roo.ToolbarItem}
31790      */
31791      
31792       
31793     addField : function(field) {
31794         if (!this.fields) {
31795             var autoId = 0;
31796             this.fields = new Roo.util.MixedCollection(false, function(o){
31797                 return o.id || ("item" + (++autoId));
31798             });
31799
31800         }
31801         
31802         var td = this.nextBlock();
31803         field.render(td);
31804         var ti = new Roo.Toolbar.Item(td.firstChild);
31805         ti.render(td);
31806         this.items.add(ti);
31807         this.fields.add(field);
31808         return ti;
31809     },
31810     /**
31811      * Hide the toolbar
31812      * @method hide
31813      */
31814      
31815       
31816     hide : function()
31817     {
31818         this.el.child('div').setVisibilityMode(Roo.Element.DISPLAY);
31819         this.el.child('div').hide();
31820     },
31821     /**
31822      * Show the toolbar
31823      * @method show
31824      */
31825     show : function()
31826     {
31827         this.el.child('div').show();
31828     },
31829       
31830     // private
31831     nextBlock : function(){
31832         var td = document.createElement("td");
31833         this.tr.appendChild(td);
31834         return td;
31835     },
31836
31837     // private
31838     destroy : function(){
31839         if(this.items){ // rendered?
31840             Roo.destroy.apply(Roo, this.items.items);
31841         }
31842         if(this.fields){ // rendered?
31843             Roo.destroy.apply(Roo, this.fields.items);
31844         }
31845         Roo.Element.uncache(this.el, this.tr);
31846     }
31847 };
31848
31849 /**
31850  * @class Roo.Toolbar.Item
31851  * The base class that other classes should extend in order to get some basic common toolbar item functionality.
31852  * @constructor
31853  * Creates a new Item
31854  * @param {HTMLElement} el 
31855  */
31856 Roo.Toolbar.Item = function(el){
31857     var cfg = {};
31858     if (typeof (el.xtype) != 'undefined') {
31859         cfg = el;
31860         el = cfg.el;
31861     }
31862     
31863     this.el = Roo.getDom(el);
31864     this.id = Roo.id(this.el);
31865     this.hidden = false;
31866     
31867     this.addEvents({
31868          /**
31869              * @event render
31870              * Fires when the button is rendered
31871              * @param {Button} this
31872              */
31873         'render': true
31874     });
31875     Roo.Toolbar.Item.superclass.constructor.call(this,cfg);
31876 };
31877 Roo.extend(Roo.Toolbar.Item, Roo.util.Observable, {
31878 //Roo.Toolbar.Item.prototype = {
31879     
31880     /**
31881      * Get this item's HTML Element
31882      * @return {HTMLElement}
31883      */
31884     getEl : function(){
31885        return this.el;  
31886     },
31887
31888     // private
31889     render : function(td){
31890         
31891          this.td = td;
31892         td.appendChild(this.el);
31893         
31894         this.fireEvent('render', this);
31895     },
31896     
31897     /**
31898      * Removes and destroys this item.
31899      */
31900     destroy : function(){
31901         this.td.parentNode.removeChild(this.td);
31902     },
31903     
31904     /**
31905      * Shows this item.
31906      */
31907     show: function(){
31908         this.hidden = false;
31909         this.td.style.display = "";
31910     },
31911     
31912     /**
31913      * Hides this item.
31914      */
31915     hide: function(){
31916         this.hidden = true;
31917         this.td.style.display = "none";
31918     },
31919     
31920     /**
31921      * Convenience function for boolean show/hide.
31922      * @param {Boolean} visible true to show/false to hide
31923      */
31924     setVisible: function(visible){
31925         if(visible) {
31926             this.show();
31927         }else{
31928             this.hide();
31929         }
31930     },
31931     
31932     /**
31933      * Try to focus this item.
31934      */
31935     focus : function(){
31936         Roo.fly(this.el).focus();
31937     },
31938     
31939     /**
31940      * Disables this item.
31941      */
31942     disable : function(){
31943         Roo.fly(this.td).addClass("x-item-disabled");
31944         this.disabled = true;
31945         this.el.disabled = true;
31946     },
31947     
31948     /**
31949      * Enables this item.
31950      */
31951     enable : function(){
31952         Roo.fly(this.td).removeClass("x-item-disabled");
31953         this.disabled = false;
31954         this.el.disabled = false;
31955     }
31956 });
31957
31958
31959 /**
31960  * @class Roo.Toolbar.Separator
31961  * @extends Roo.Toolbar.Item
31962  * A simple toolbar separator class
31963  * @constructor
31964  * Creates a new Separator
31965  */
31966 Roo.Toolbar.Separator = function(cfg){
31967     
31968     var s = document.createElement("span");
31969     s.className = "ytb-sep";
31970     if (cfg) {
31971         cfg.el = s;
31972     }
31973     
31974     Roo.Toolbar.Separator.superclass.constructor.call(this, cfg || s);
31975 };
31976 Roo.extend(Roo.Toolbar.Separator, Roo.Toolbar.Item, {
31977     enable:Roo.emptyFn,
31978     disable:Roo.emptyFn,
31979     focus:Roo.emptyFn
31980 });
31981
31982 /**
31983  * @class Roo.Toolbar.Spacer
31984  * @extends Roo.Toolbar.Item
31985  * A simple element that adds extra horizontal space to a toolbar.
31986  * @constructor
31987  * Creates a new Spacer
31988  */
31989 Roo.Toolbar.Spacer = function(cfg){
31990     var s = document.createElement("div");
31991     s.className = "ytb-spacer";
31992     if (cfg) {
31993         cfg.el = s;
31994     }
31995     Roo.Toolbar.Spacer.superclass.constructor.call(this, cfg || s);
31996 };
31997 Roo.extend(Roo.Toolbar.Spacer, Roo.Toolbar.Item, {
31998     enable:Roo.emptyFn,
31999     disable:Roo.emptyFn,
32000     focus:Roo.emptyFn
32001 });
32002
32003 /**
32004  * @class Roo.Toolbar.Fill
32005  * @extends Roo.Toolbar.Spacer
32006  * A simple element that adds a greedy (100% width) horizontal space to a toolbar.
32007  * @constructor
32008  * Creates a new Spacer
32009  */
32010 Roo.Toolbar.Fill = Roo.extend(Roo.Toolbar.Spacer, {
32011     // private
32012     render : function(td){
32013         td.style.width = '100%';
32014         Roo.Toolbar.Fill.superclass.render.call(this, td);
32015     }
32016 });
32017
32018 /**
32019  * @class Roo.Toolbar.TextItem
32020  * @extends Roo.Toolbar.Item
32021  * A simple class that renders text directly into a toolbar.
32022  * @constructor
32023  * Creates a new TextItem
32024  * @cfg {string} text 
32025  */
32026 Roo.Toolbar.TextItem = function(cfg){
32027     var  text = cfg || "";
32028     if (typeof(cfg) == 'object') {
32029         text = cfg.text || "";
32030     }  else {
32031         cfg = null;
32032     }
32033     var s = document.createElement("span");
32034     s.className = "ytb-text";
32035     s.innerHTML = text;
32036     if (cfg) {
32037         cfg.el  = s;
32038     }
32039     
32040     Roo.Toolbar.TextItem.superclass.constructor.call(this, cfg ||  s);
32041 };
32042 Roo.extend(Roo.Toolbar.TextItem, Roo.Toolbar.Item, {
32043     
32044      
32045     enable:Roo.emptyFn,
32046     disable:Roo.emptyFn,
32047     focus:Roo.emptyFn,
32048      /**
32049      * Shows this button
32050      */
32051     show: function(){
32052         this.hidden = false;
32053         this.el.style.display = "";
32054     },
32055     
32056     /**
32057      * Hides this button
32058      */
32059     hide: function(){
32060         this.hidden = true;
32061         this.el.style.display = "none";
32062     }
32063     
32064 });
32065
32066 /**
32067  * @class Roo.Toolbar.Button
32068  * @extends Roo.Button
32069  * A button that renders into a toolbar.
32070  * @constructor
32071  * Creates a new Button
32072  * @param {Object} config A standard {@link Roo.Button} config object
32073  */
32074 Roo.Toolbar.Button = function(config){
32075     Roo.Toolbar.Button.superclass.constructor.call(this, null, config);
32076 };
32077 Roo.extend(Roo.Toolbar.Button, Roo.Button,
32078 {
32079     
32080     
32081     render : function(td){
32082         this.td = td;
32083         Roo.Toolbar.Button.superclass.render.call(this, td);
32084     },
32085     
32086     /**
32087      * Removes and destroys this button
32088      */
32089     destroy : function(){
32090         Roo.Toolbar.Button.superclass.destroy.call(this);
32091         this.td.parentNode.removeChild(this.td);
32092     },
32093     
32094     /**
32095      * Shows this button
32096      */
32097     show: function(){
32098         this.hidden = false;
32099         this.td.style.display = "";
32100     },
32101     
32102     /**
32103      * Hides this button
32104      */
32105     hide: function(){
32106         this.hidden = true;
32107         this.td.style.display = "none";
32108     },
32109
32110     /**
32111      * Disables this item
32112      */
32113     disable : function(){
32114         Roo.fly(this.td).addClass("x-item-disabled");
32115         this.disabled = true;
32116     },
32117
32118     /**
32119      * Enables this item
32120      */
32121     enable : function(){
32122         Roo.fly(this.td).removeClass("x-item-disabled");
32123         this.disabled = false;
32124     }
32125 });
32126 // backwards compat
32127 Roo.ToolbarButton = Roo.Toolbar.Button;
32128
32129 /**
32130  * @class Roo.Toolbar.SplitButton
32131  * @extends Roo.SplitButton
32132  * A menu button that renders into a toolbar.
32133  * @constructor
32134  * Creates a new SplitButton
32135  * @param {Object} config A standard {@link Roo.SplitButton} config object
32136  */
32137 Roo.Toolbar.SplitButton = function(config){
32138     Roo.Toolbar.SplitButton.superclass.constructor.call(this, null, config);
32139 };
32140 Roo.extend(Roo.Toolbar.SplitButton, Roo.SplitButton, {
32141     render : function(td){
32142         this.td = td;
32143         Roo.Toolbar.SplitButton.superclass.render.call(this, td);
32144     },
32145     
32146     /**
32147      * Removes and destroys this button
32148      */
32149     destroy : function(){
32150         Roo.Toolbar.SplitButton.superclass.destroy.call(this);
32151         this.td.parentNode.removeChild(this.td);
32152     },
32153     
32154     /**
32155      * Shows this button
32156      */
32157     show: function(){
32158         this.hidden = false;
32159         this.td.style.display = "";
32160     },
32161     
32162     /**
32163      * Hides this button
32164      */
32165     hide: function(){
32166         this.hidden = true;
32167         this.td.style.display = "none";
32168     }
32169 });
32170
32171 // backwards compat
32172 Roo.Toolbar.MenuButton = Roo.Toolbar.SplitButton;/*
32173  * Based on:
32174  * Ext JS Library 1.1.1
32175  * Copyright(c) 2006-2007, Ext JS, LLC.
32176  *
32177  * Originally Released Under LGPL - original licence link has changed is not relivant.
32178  *
32179  * Fork - LGPL
32180  * <script type="text/javascript">
32181  */
32182  
32183 /**
32184  * @class Roo.PagingToolbar
32185  * @extends Roo.Toolbar
32186  * @children   Roo.Toolbar.Item Roo.Toolbar.Button Roo.Toolbar.SplitButton Roo.form.Field
32187  * A specialized toolbar that is bound to a {@link Roo.data.Store} and provides automatic paging controls.
32188  * @constructor
32189  * Create a new PagingToolbar
32190  * @param {Object} config The config object
32191  */
32192 Roo.PagingToolbar = function(el, ds, config)
32193 {
32194     // old args format still supported... - xtype is prefered..
32195     if (typeof(el) == 'object' && el.xtype) {
32196         // created from xtype...
32197         config = el;
32198         ds = el.dataSource;
32199         el = config.container;
32200     }
32201     var items = [];
32202     if (config.items) {
32203         items = config.items;
32204         config.items = [];
32205     }
32206     
32207     Roo.PagingToolbar.superclass.constructor.call(this, el, null, config);
32208     this.ds = ds;
32209     this.cursor = 0;
32210     this.renderButtons(this.el);
32211     this.bind(ds);
32212     
32213     // supprot items array.
32214    
32215     Roo.each(items, function(e) {
32216         this.add(Roo.factory(e));
32217     },this);
32218     
32219 };
32220
32221 Roo.extend(Roo.PagingToolbar, Roo.Toolbar, {
32222    
32223     /**
32224      * @cfg {String/HTMLElement/Element} container
32225      * container The id or element that will contain the toolbar
32226      */
32227     /**
32228      * @cfg {Boolean} displayInfo
32229      * True to display the displayMsg (defaults to false)
32230      */
32231     
32232     
32233     /**
32234      * @cfg {Number} pageSize
32235      * The number of records to display per page (defaults to 20)
32236      */
32237     pageSize: 20,
32238     /**
32239      * @cfg {String} displayMsg
32240      * The paging status message to display (defaults to "Displaying {start} - {end} of {total}")
32241      */
32242     displayMsg : 'Displaying {0} - {1} of {2}',
32243     /**
32244      * @cfg {String} emptyMsg
32245      * The message to display when no records are found (defaults to "No data to display")
32246      */
32247     emptyMsg : 'No data to display',
32248     /**
32249      * Customizable piece of the default paging text (defaults to "Page")
32250      * @type String
32251      */
32252     beforePageText : "Page",
32253     /**
32254      * Customizable piece of the default paging text (defaults to "of %0")
32255      * @type String
32256      */
32257     afterPageText : "of {0}",
32258     /**
32259      * Customizable piece of the default paging text (defaults to "First Page")
32260      * @type String
32261      */
32262     firstText : "First Page",
32263     /**
32264      * Customizable piece of the default paging text (defaults to "Previous Page")
32265      * @type String
32266      */
32267     prevText : "Previous Page",
32268     /**
32269      * Customizable piece of the default paging text (defaults to "Next Page")
32270      * @type String
32271      */
32272     nextText : "Next Page",
32273     /**
32274      * Customizable piece of the default paging text (defaults to "Last Page")
32275      * @type String
32276      */
32277     lastText : "Last Page",
32278     /**
32279      * Customizable piece of the default paging text (defaults to "Refresh")
32280      * @type String
32281      */
32282     refreshText : "Refresh",
32283
32284     // private
32285     renderButtons : function(el){
32286         Roo.PagingToolbar.superclass.render.call(this, el);
32287         this.first = this.addButton({
32288             tooltip: this.firstText,
32289             cls: "x-btn-icon x-grid-page-first",
32290             disabled: true,
32291             handler: this.onClick.createDelegate(this, ["first"])
32292         });
32293         this.prev = this.addButton({
32294             tooltip: this.prevText,
32295             cls: "x-btn-icon x-grid-page-prev",
32296             disabled: true,
32297             handler: this.onClick.createDelegate(this, ["prev"])
32298         });
32299         //this.addSeparator();
32300         this.add(this.beforePageText);
32301         this.field = Roo.get(this.addDom({
32302            tag: "input",
32303            type: "text",
32304            size: "3",
32305            value: "1",
32306            cls: "x-grid-page-number"
32307         }).el);
32308         this.field.on("keydown", this.onPagingKeydown, this);
32309         this.field.on("focus", function(){this.dom.select();});
32310         this.afterTextEl = this.addText(String.format(this.afterPageText, 1));
32311         this.field.setHeight(18);
32312         //this.addSeparator();
32313         this.next = this.addButton({
32314             tooltip: this.nextText,
32315             cls: "x-btn-icon x-grid-page-next",
32316             disabled: true,
32317             handler: this.onClick.createDelegate(this, ["next"])
32318         });
32319         this.last = this.addButton({
32320             tooltip: this.lastText,
32321             cls: "x-btn-icon x-grid-page-last",
32322             disabled: true,
32323             handler: this.onClick.createDelegate(this, ["last"])
32324         });
32325         //this.addSeparator();
32326         this.loading = this.addButton({
32327             tooltip: this.refreshText,
32328             cls: "x-btn-icon x-grid-loading",
32329             handler: this.onClick.createDelegate(this, ["refresh"])
32330         });
32331
32332         if(this.displayInfo){
32333             this.displayEl = Roo.fly(this.el.dom.firstChild).createChild({cls:'x-paging-info'});
32334         }
32335     },
32336
32337     // private
32338     updateInfo : function(){
32339         if(this.displayEl){
32340             var count = this.ds.getCount();
32341             var msg = count == 0 ?
32342                 this.emptyMsg :
32343                 String.format(
32344                     this.displayMsg,
32345                     this.cursor+1, this.cursor+count, this.ds.getTotalCount()    
32346                 );
32347             this.displayEl.update(msg);
32348         }
32349     },
32350
32351     // private
32352     onLoad : function(ds, r, o){
32353        this.cursor = o.params ? o.params.start : 0;
32354        var d = this.getPageData(), ap = d.activePage, ps = d.pages;
32355
32356        this.afterTextEl.el.innerHTML = String.format(this.afterPageText, d.pages);
32357        this.field.dom.value = ap;
32358        this.first.setDisabled(ap == 1);
32359        this.prev.setDisabled(ap == 1);
32360        this.next.setDisabled(ap == ps);
32361        this.last.setDisabled(ap == ps);
32362        this.loading.enable();
32363        this.updateInfo();
32364     },
32365
32366     // private
32367     getPageData : function(){
32368         var total = this.ds.getTotalCount();
32369         return {
32370             total : total,
32371             activePage : Math.ceil((this.cursor+this.pageSize)/this.pageSize),
32372             pages :  total < this.pageSize ? 1 : Math.ceil(total/this.pageSize)
32373         };
32374     },
32375
32376     // private
32377     onLoadError : function(){
32378         this.loading.enable();
32379     },
32380
32381     // private
32382     onPagingKeydown : function(e){
32383         var k = e.getKey();
32384         var d = this.getPageData();
32385         if(k == e.RETURN){
32386             var v = this.field.dom.value, pageNum;
32387             if(!v || isNaN(pageNum = parseInt(v, 10))){
32388                 this.field.dom.value = d.activePage;
32389                 return;
32390             }
32391             pageNum = Math.min(Math.max(1, pageNum), d.pages) - 1;
32392             this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
32393             e.stopEvent();
32394         }
32395         else if(k == e.HOME || (k == e.UP && e.ctrlKey) || (k == e.PAGEUP && e.ctrlKey) || (k == e.RIGHT && e.ctrlKey) || k == e.END || (k == e.DOWN && e.ctrlKey) || (k == e.LEFT && e.ctrlKey) || (k == e.PAGEDOWN && e.ctrlKey))
32396         {
32397           var pageNum = (k == e.HOME || (k == e.DOWN && e.ctrlKey) || (k == e.LEFT && e.ctrlKey) || (k == e.PAGEDOWN && e.ctrlKey)) ? 1 : d.pages;
32398           this.field.dom.value = pageNum;
32399           this.ds.load({params:{start: (pageNum - 1) * this.pageSize, limit: this.pageSize}});
32400           e.stopEvent();
32401         }
32402         else if(k == e.UP || k == e.RIGHT || k == e.PAGEUP || k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN)
32403         {
32404           var v = this.field.dom.value, pageNum; 
32405           var increment = (e.shiftKey) ? 10 : 1;
32406           if(k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN) {
32407             increment *= -1;
32408           }
32409           if(!v || isNaN(pageNum = parseInt(v, 10))) {
32410             this.field.dom.value = d.activePage;
32411             return;
32412           }
32413           else if(parseInt(v, 10) + increment >= 1 & parseInt(v, 10) + increment <= d.pages)
32414           {
32415             this.field.dom.value = parseInt(v, 10) + increment;
32416             pageNum = Math.min(Math.max(1, pageNum + increment), d.pages) - 1;
32417             this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
32418           }
32419           e.stopEvent();
32420         }
32421     },
32422
32423     // private
32424     beforeLoad : function(){
32425         if(this.loading){
32426             this.loading.disable();
32427         }
32428     },
32429     /**
32430      * event that occurs when you click on the navigation buttons - can be used to trigger load of a grid.
32431      * @param {String} which (first|prev|next|last|refresh)  which button to press.
32432      *
32433      */
32434     // private
32435     onClick : function(which){
32436         var ds = this.ds;
32437         switch(which){
32438             case "first":
32439                 ds.load({params:{start: 0, limit: this.pageSize}});
32440             break;
32441             case "prev":
32442                 ds.load({params:{start: Math.max(0, this.cursor-this.pageSize), limit: this.pageSize}});
32443             break;
32444             case "next":
32445                 ds.load({params:{start: this.cursor+this.pageSize, limit: this.pageSize}});
32446             break;
32447             case "last":
32448                 var total = ds.getTotalCount();
32449                 var extra = total % this.pageSize;
32450                 var lastStart = extra ? (total - extra) : total-this.pageSize;
32451                 ds.load({params:{start: lastStart, limit: this.pageSize}});
32452             break;
32453             case "refresh":
32454                 ds.load({params:{start: this.cursor, limit: this.pageSize}});
32455             break;
32456         }
32457     },
32458
32459     /**
32460      * Unbinds the paging toolbar from the specified {@link Roo.data.Store}
32461      * @param {Roo.data.Store} store The data store to unbind
32462      */
32463     unbind : function(ds){
32464         ds.un("beforeload", this.beforeLoad, this);
32465         ds.un("load", this.onLoad, this);
32466         ds.un("loadexception", this.onLoadError, this);
32467         ds.un("remove", this.updateInfo, this);
32468         ds.un("add", this.updateInfo, this);
32469         this.ds = undefined;
32470     },
32471
32472     /**
32473      * Binds the paging toolbar to the specified {@link Roo.data.Store}
32474      * @param {Roo.data.Store} store The data store to bind
32475      */
32476     bind : function(ds){
32477         ds.on("beforeload", this.beforeLoad, this);
32478         ds.on("load", this.onLoad, this);
32479         ds.on("loadexception", this.onLoadError, this);
32480         ds.on("remove", this.updateInfo, this);
32481         ds.on("add", this.updateInfo, this);
32482         this.ds = ds;
32483     }
32484 });/*
32485  * Based on:
32486  * Ext JS Library 1.1.1
32487  * Copyright(c) 2006-2007, Ext JS, LLC.
32488  *
32489  * Originally Released Under LGPL - original licence link has changed is not relivant.
32490  *
32491  * Fork - LGPL
32492  * <script type="text/javascript">
32493  */
32494
32495 /**
32496  * @class Roo.Resizable
32497  * @extends Roo.util.Observable
32498  * <p>Applies drag handles to an element to make it resizable. The drag handles are inserted into the element
32499  * and positioned absolute. Some elements, such as a textarea or image, don't support this. To overcome that, you can wrap
32500  * the textarea in a div and set "resizeChild" to true (or to the id of the element), <b>or</b> set wrap:true in your config and
32501  * the element will be wrapped for you automatically.</p>
32502  * <p>Here is the list of valid resize handles:</p>
32503  * <pre>
32504 Value   Description
32505 ------  -------------------
32506  'n'     north
32507  's'     south
32508  'e'     east
32509  'w'     west
32510  'nw'    northwest
32511  'sw'    southwest
32512  'se'    southeast
32513  'ne'    northeast
32514  'hd'    horizontal drag
32515  'all'   all
32516 </pre>
32517  * <p>Here's an example showing the creation of a typical Resizable:</p>
32518  * <pre><code>
32519 var resizer = new Roo.Resizable("element-id", {
32520     handles: 'all',
32521     minWidth: 200,
32522     minHeight: 100,
32523     maxWidth: 500,
32524     maxHeight: 400,
32525     pinned: true
32526 });
32527 resizer.on("resize", myHandler);
32528 </code></pre>
32529  * <p>To hide a particular handle, set its display to none in CSS, or through script:<br>
32530  * resizer.east.setDisplayed(false);</p>
32531  * @cfg {Boolean/String/Element} resizeChild True to resize the first child, or id/element to resize (defaults to false)
32532  * @cfg {Array/String} adjustments String "auto" or an array [width, height] with values to be <b>added</b> to the
32533  * resize operation's new size (defaults to [0, 0])
32534  * @cfg {Number} minWidth The minimum width for the element (defaults to 5)
32535  * @cfg {Number} minHeight The minimum height for the element (defaults to 5)
32536  * @cfg {Number} maxWidth The maximum width for the element (defaults to 10000)
32537  * @cfg {Number} maxHeight The maximum height for the element (defaults to 10000)
32538  * @cfg {Boolean} enabled False to disable resizing (defaults to true)
32539  * @cfg {Boolean} wrap True to wrap an element with a div if needed (required for textareas and images, defaults to false)
32540  * @cfg {Number} width The width of the element in pixels (defaults to null)
32541  * @cfg {Number} height The height of the element in pixels (defaults to null)
32542  * @cfg {Boolean} animate True to animate the resize (not compatible with dynamic sizing, defaults to false)
32543  * @cfg {Number} duration Animation duration if animate = true (defaults to .35)
32544  * @cfg {Boolean} dynamic True to resize the element while dragging instead of using a proxy (defaults to false)
32545  * @cfg {String} handles String consisting of the resize handles to display (defaults to undefined)
32546  * @cfg {Boolean} multiDirectional <b>Deprecated</b>.  The old style of adding multi-direction resize handles, deprecated
32547  * in favor of the handles config option (defaults to false)
32548  * @cfg {Boolean} disableTrackOver True to disable mouse tracking. This is only applied at config time. (defaults to false)
32549  * @cfg {String} easing Animation easing if animate = true (defaults to 'easingOutStrong')
32550  * @cfg {Number} widthIncrement The increment to snap the width resize in pixels (dynamic must be true, defaults to 0)
32551  * @cfg {Number} heightIncrement The increment to snap the height resize in pixels (dynamic must be true, defaults to 0)
32552  * @cfg {Boolean} pinned True to ensure that the resize handles are always visible, false to display them only when the
32553  * user mouses over the resizable borders. This is only applied at config time. (defaults to false)
32554  * @cfg {Boolean} preserveRatio True to preserve the original ratio between height and width during resize (defaults to false)
32555  * @cfg {Boolean} transparent True for transparent handles. This is only applied at config time. (defaults to false)
32556  * @cfg {Number} minX The minimum allowed page X for the element (only used for west resizing, defaults to 0)
32557  * @cfg {Number} minY The minimum allowed page Y for the element (only used for north resizing, defaults to 0)
32558  * @cfg {Boolean} draggable Convenience to initialize drag drop (defaults to false)
32559  * @constructor
32560  * Create a new resizable component
32561  * @param {String/HTMLElement/Roo.Element} el The id or element to resize
32562  * @param {Object} config configuration options
32563   */
32564 Roo.Resizable = function(el, config)
32565 {
32566     this.el = Roo.get(el);
32567
32568     if(config && config.wrap){
32569         config.resizeChild = this.el;
32570         this.el = this.el.wrap(typeof config.wrap == "object" ? config.wrap : {cls:"xresizable-wrap"});
32571         this.el.id = this.el.dom.id = config.resizeChild.id + "-rzwrap";
32572         this.el.setStyle("overflow", "hidden");
32573         this.el.setPositioning(config.resizeChild.getPositioning());
32574         config.resizeChild.clearPositioning();
32575         if(!config.width || !config.height){
32576             var csize = config.resizeChild.getSize();
32577             this.el.setSize(csize.width, csize.height);
32578         }
32579         if(config.pinned && !config.adjustments){
32580             config.adjustments = "auto";
32581         }
32582     }
32583
32584     this.proxy = this.el.createProxy({tag: "div", cls: "x-resizable-proxy", id: this.el.id + "-rzproxy"});
32585     this.proxy.unselectable();
32586     this.proxy.enableDisplayMode('block');
32587
32588     Roo.apply(this, config);
32589
32590     if(this.pinned){
32591         this.disableTrackOver = true;
32592         this.el.addClass("x-resizable-pinned");
32593     }
32594     // if the element isn't positioned, make it relative
32595     var position = this.el.getStyle("position");
32596     if(position != "absolute" && position != "fixed"){
32597         this.el.setStyle("position", "relative");
32598     }
32599     if(!this.handles){ // no handles passed, must be legacy style
32600         this.handles = 's,e,se';
32601         if(this.multiDirectional){
32602             this.handles += ',n,w';
32603         }
32604     }
32605     if(this.handles == "all"){
32606         this.handles = "n s e w ne nw se sw";
32607     }
32608     var hs = this.handles.split(/\s*?[,;]\s*?| /);
32609     var ps = Roo.Resizable.positions;
32610     for(var i = 0, len = hs.length; i < len; i++){
32611         if(hs[i] && ps[hs[i]]){
32612             var pos = ps[hs[i]];
32613             this[pos] = new Roo.Resizable.Handle(this, pos, this.disableTrackOver, this.transparent);
32614         }
32615     }
32616     // legacy
32617     this.corner = this.southeast;
32618     
32619     // updateBox = the box can move..
32620     if(this.handles.indexOf("n") != -1 || this.handles.indexOf("w") != -1 || this.handles.indexOf("hd") != -1) {
32621         this.updateBox = true;
32622     }
32623
32624     this.activeHandle = null;
32625
32626     if(this.resizeChild){
32627         if(typeof this.resizeChild == "boolean"){
32628             this.resizeChild = Roo.get(this.el.dom.firstChild, true);
32629         }else{
32630             this.resizeChild = Roo.get(this.resizeChild, true);
32631         }
32632     }
32633     
32634     if(this.adjustments == "auto"){
32635         var rc = this.resizeChild;
32636         var hw = this.west, he = this.east, hn = this.north, hs = this.south;
32637         if(rc && (hw || hn)){
32638             rc.position("relative");
32639             rc.setLeft(hw ? hw.el.getWidth() : 0);
32640             rc.setTop(hn ? hn.el.getHeight() : 0);
32641         }
32642         this.adjustments = [
32643             (he ? -he.el.getWidth() : 0) + (hw ? -hw.el.getWidth() : 0),
32644             (hn ? -hn.el.getHeight() : 0) + (hs ? -hs.el.getHeight() : 0) -1
32645         ];
32646     }
32647
32648     if(this.draggable){
32649         this.dd = this.dynamic ?
32650             this.el.initDD(null) : this.el.initDDProxy(null, {dragElId: this.proxy.id});
32651         this.dd.setHandleElId(this.resizeChild ? this.resizeChild.id : this.el.id);
32652     }
32653
32654     // public events
32655     this.addEvents({
32656         /**
32657          * @event beforeresize
32658          * Fired before resize is allowed. Set enabled to false to cancel resize.
32659          * @param {Roo.Resizable} this
32660          * @param {Roo.EventObject} e The mousedown event
32661          */
32662         "beforeresize" : true,
32663         /**
32664          * @event resizing
32665          * Fired a resizing.
32666          * @param {Roo.Resizable} this
32667          * @param {Number} x The new x position
32668          * @param {Number} y The new y position
32669          * @param {Number} w The new w width
32670          * @param {Number} h The new h hight
32671          * @param {Roo.EventObject} e The mouseup event
32672          */
32673         "resizing" : true,
32674         /**
32675          * @event resize
32676          * Fired after a resize.
32677          * @param {Roo.Resizable} this
32678          * @param {Number} width The new width
32679          * @param {Number} height The new height
32680          * @param {Roo.EventObject} e The mouseup event
32681          */
32682         "resize" : true
32683     });
32684
32685     if(this.width !== null && this.height !== null){
32686         this.resizeTo(this.width, this.height);
32687     }else{
32688         this.updateChildSize();
32689     }
32690     if(Roo.isIE){
32691         this.el.dom.style.zoom = 1;
32692     }
32693     Roo.Resizable.superclass.constructor.call(this);
32694 };
32695
32696 Roo.extend(Roo.Resizable, Roo.util.Observable, {
32697         resizeChild : false,
32698         adjustments : [0, 0],
32699         minWidth : 5,
32700         minHeight : 5,
32701         maxWidth : 10000,
32702         maxHeight : 10000,
32703         enabled : true,
32704         animate : false,
32705         duration : .35,
32706         dynamic : false,
32707         handles : false,
32708         multiDirectional : false,
32709         disableTrackOver : false,
32710         easing : 'easeOutStrong',
32711         widthIncrement : 0,
32712         heightIncrement : 0,
32713         pinned : false,
32714         width : null,
32715         height : null,
32716         preserveRatio : false,
32717         transparent: false,
32718         minX: 0,
32719         minY: 0,
32720         draggable: false,
32721
32722         /**
32723          * @cfg {String/HTMLElement/Element} constrainTo Constrain the resize to a particular element
32724          */
32725         constrainTo: undefined,
32726         /**
32727          * @cfg {Roo.lib.Region} resizeRegion Constrain the resize to a particular region
32728          */
32729         resizeRegion: undefined,
32730
32731
32732     /**
32733      * Perform a manual resize
32734      * @param {Number} width
32735      * @param {Number} height
32736      */
32737     resizeTo : function(width, height){
32738         this.el.setSize(width, height);
32739         this.updateChildSize();
32740         this.fireEvent("resize", this, width, height, null);
32741     },
32742
32743     // private
32744     startSizing : function(e, handle){
32745         this.fireEvent("beforeresize", this, e);
32746         if(this.enabled){ // 2nd enabled check in case disabled before beforeresize handler
32747
32748             if(!this.overlay){
32749                 this.overlay = this.el.createProxy({tag: "div", cls: "x-resizable-overlay", html: "&#160;"});
32750                 this.overlay.unselectable();
32751                 this.overlay.enableDisplayMode("block");
32752                 this.overlay.on("mousemove", this.onMouseMove, this);
32753                 this.overlay.on("mouseup", this.onMouseUp, this);
32754             }
32755             this.overlay.setStyle("cursor", handle.el.getStyle("cursor"));
32756
32757             this.resizing = true;
32758             this.startBox = this.el.getBox();
32759             this.startPoint = e.getXY();
32760             this.offsets = [(this.startBox.x + this.startBox.width) - this.startPoint[0],
32761                             (this.startBox.y + this.startBox.height) - this.startPoint[1]];
32762
32763             this.overlay.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
32764             this.overlay.show();
32765
32766             if(this.constrainTo) {
32767                 var ct = Roo.get(this.constrainTo);
32768                 this.resizeRegion = ct.getRegion().adjust(
32769                     ct.getFrameWidth('t'),
32770                     ct.getFrameWidth('l'),
32771                     -ct.getFrameWidth('b'),
32772                     -ct.getFrameWidth('r')
32773                 );
32774             }
32775
32776             this.proxy.setStyle('visibility', 'hidden'); // workaround display none
32777             this.proxy.show();
32778             this.proxy.setBox(this.startBox);
32779             if(!this.dynamic){
32780                 this.proxy.setStyle('visibility', 'visible');
32781             }
32782         }
32783     },
32784
32785     // private
32786     onMouseDown : function(handle, e){
32787         if(this.enabled){
32788             e.stopEvent();
32789             this.activeHandle = handle;
32790             this.startSizing(e, handle);
32791         }
32792     },
32793
32794     // private
32795     onMouseUp : function(e){
32796         var size = this.resizeElement();
32797         this.resizing = false;
32798         this.handleOut();
32799         this.overlay.hide();
32800         this.proxy.hide();
32801         this.fireEvent("resize", this, size.width, size.height, e);
32802     },
32803
32804     // private
32805     updateChildSize : function(){
32806         
32807         if(this.resizeChild){
32808             var el = this.el;
32809             var child = this.resizeChild;
32810             var adj = this.adjustments;
32811             if(el.dom.offsetWidth){
32812                 var b = el.getSize(true);
32813                 child.setSize(b.width+adj[0], b.height+adj[1]);
32814             }
32815             // Second call here for IE
32816             // The first call enables instant resizing and
32817             // the second call corrects scroll bars if they
32818             // exist
32819             if(Roo.isIE){
32820                 setTimeout(function(){
32821                     if(el.dom.offsetWidth){
32822                         var b = el.getSize(true);
32823                         child.setSize(b.width+adj[0], b.height+adj[1]);
32824                     }
32825                 }, 10);
32826             }
32827         }
32828     },
32829
32830     // private
32831     snap : function(value, inc, min){
32832         if(!inc || !value) {
32833             return value;
32834         }
32835         var newValue = value;
32836         var m = value % inc;
32837         if(m > 0){
32838             if(m > (inc/2)){
32839                 newValue = value + (inc-m);
32840             }else{
32841                 newValue = value - m;
32842             }
32843         }
32844         return Math.max(min, newValue);
32845     },
32846
32847     // private
32848     resizeElement : function(){
32849         var box = this.proxy.getBox();
32850         if(this.updateBox){
32851             this.el.setBox(box, false, this.animate, this.duration, null, this.easing);
32852         }else{
32853             this.el.setSize(box.width, box.height, this.animate, this.duration, null, this.easing);
32854         }
32855         this.updateChildSize();
32856         if(!this.dynamic){
32857             this.proxy.hide();
32858         }
32859         return box;
32860     },
32861
32862     // private
32863     constrain : function(v, diff, m, mx){
32864         if(v - diff < m){
32865             diff = v - m;
32866         }else if(v - diff > mx){
32867             diff = mx - v;
32868         }
32869         return diff;
32870     },
32871
32872     // private
32873     onMouseMove : function(e){
32874         
32875         if(this.enabled){
32876             try{// try catch so if something goes wrong the user doesn't get hung
32877
32878             if(this.resizeRegion && !this.resizeRegion.contains(e.getPoint())) {
32879                 return;
32880             }
32881
32882             //var curXY = this.startPoint;
32883             var curSize = this.curSize || this.startBox;
32884             var x = this.startBox.x, y = this.startBox.y;
32885             var ox = x, oy = y;
32886             var w = curSize.width, h = curSize.height;
32887             var ow = w, oh = h;
32888             var mw = this.minWidth, mh = this.minHeight;
32889             var mxw = this.maxWidth, mxh = this.maxHeight;
32890             var wi = this.widthIncrement;
32891             var hi = this.heightIncrement;
32892
32893             var eventXY = e.getXY();
32894             var diffX = -(this.startPoint[0] - Math.max(this.minX, eventXY[0]));
32895             var diffY = -(this.startPoint[1] - Math.max(this.minY, eventXY[1]));
32896
32897             var pos = this.activeHandle.position;
32898
32899             switch(pos){
32900                 case "east":
32901                     w += diffX;
32902                     w = Math.min(Math.max(mw, w), mxw);
32903                     break;
32904              
32905                 case "south":
32906                     h += diffY;
32907                     h = Math.min(Math.max(mh, h), mxh);
32908                     break;
32909                 case "southeast":
32910                     w += diffX;
32911                     h += diffY;
32912                     w = Math.min(Math.max(mw, w), mxw);
32913                     h = Math.min(Math.max(mh, h), mxh);
32914                     break;
32915                 case "north":
32916                     diffY = this.constrain(h, diffY, mh, mxh);
32917                     y += diffY;
32918                     h -= diffY;
32919                     break;
32920                 case "hdrag":
32921                     
32922                     if (wi) {
32923                         var adiffX = Math.abs(diffX);
32924                         var sub = (adiffX % wi); // how much 
32925                         if (sub > (wi/2)) { // far enough to snap
32926                             diffX = (diffX > 0) ? diffX-sub + wi : diffX+sub - wi;
32927                         } else {
32928                             // remove difference.. 
32929                             diffX = (diffX > 0) ? diffX-sub : diffX+sub;
32930                         }
32931                     }
32932                     x += diffX;
32933                     x = Math.max(this.minX, x);
32934                     break;
32935                 case "west":
32936                     diffX = this.constrain(w, diffX, mw, mxw);
32937                     x += diffX;
32938                     w -= diffX;
32939                     break;
32940                 case "northeast":
32941                     w += diffX;
32942                     w = Math.min(Math.max(mw, w), mxw);
32943                     diffY = this.constrain(h, diffY, mh, mxh);
32944                     y += diffY;
32945                     h -= diffY;
32946                     break;
32947                 case "northwest":
32948                     diffX = this.constrain(w, diffX, mw, mxw);
32949                     diffY = this.constrain(h, diffY, mh, mxh);
32950                     y += diffY;
32951                     h -= diffY;
32952                     x += diffX;
32953                     w -= diffX;
32954                     break;
32955                case "southwest":
32956                     diffX = this.constrain(w, diffX, mw, mxw);
32957                     h += diffY;
32958                     h = Math.min(Math.max(mh, h), mxh);
32959                     x += diffX;
32960                     w -= diffX;
32961                     break;
32962             }
32963
32964             var sw = this.snap(w, wi, mw);
32965             var sh = this.snap(h, hi, mh);
32966             if(sw != w || sh != h){
32967                 switch(pos){
32968                     case "northeast":
32969                         y -= sh - h;
32970                     break;
32971                     case "north":
32972                         y -= sh - h;
32973                         break;
32974                     case "southwest":
32975                         x -= sw - w;
32976                     break;
32977                     case "west":
32978                         x -= sw - w;
32979                         break;
32980                     case "northwest":
32981                         x -= sw - w;
32982                         y -= sh - h;
32983                     break;
32984                 }
32985                 w = sw;
32986                 h = sh;
32987             }
32988
32989             if(this.preserveRatio){
32990                 switch(pos){
32991                     case "southeast":
32992                     case "east":
32993                         h = oh * (w/ow);
32994                         h = Math.min(Math.max(mh, h), mxh);
32995                         w = ow * (h/oh);
32996                        break;
32997                     case "south":
32998                         w = ow * (h/oh);
32999                         w = Math.min(Math.max(mw, w), mxw);
33000                         h = oh * (w/ow);
33001                         break;
33002                     case "northeast":
33003                         w = ow * (h/oh);
33004                         w = Math.min(Math.max(mw, w), mxw);
33005                         h = oh * (w/ow);
33006                     break;
33007                     case "north":
33008                         var tw = w;
33009                         w = ow * (h/oh);
33010                         w = Math.min(Math.max(mw, w), mxw);
33011                         h = oh * (w/ow);
33012                         x += (tw - w) / 2;
33013                         break;
33014                     case "southwest":
33015                         h = oh * (w/ow);
33016                         h = Math.min(Math.max(mh, h), mxh);
33017                         var tw = w;
33018                         w = ow * (h/oh);
33019                         x += tw - w;
33020                         break;
33021                     case "west":
33022                         var th = h;
33023                         h = oh * (w/ow);
33024                         h = Math.min(Math.max(mh, h), mxh);
33025                         y += (th - h) / 2;
33026                         var tw = w;
33027                         w = ow * (h/oh);
33028                         x += tw - w;
33029                        break;
33030                     case "northwest":
33031                         var tw = w;
33032                         var th = h;
33033                         h = oh * (w/ow);
33034                         h = Math.min(Math.max(mh, h), mxh);
33035                         w = ow * (h/oh);
33036                         y += th - h;
33037                         x += tw - w;
33038                        break;
33039
33040                 }
33041             }
33042             if (pos == 'hdrag') {
33043                 w = ow;
33044             }
33045             this.proxy.setBounds(x, y, w, h);
33046             if(this.dynamic){
33047                 this.resizeElement();
33048             }
33049             }catch(e){}
33050         }
33051         this.fireEvent("resizing", this, x, y, w, h, e);
33052     },
33053
33054     // private
33055     handleOver : function(){
33056         if(this.enabled){
33057             this.el.addClass("x-resizable-over");
33058         }
33059     },
33060
33061     // private
33062     handleOut : function(){
33063         if(!this.resizing){
33064             this.el.removeClass("x-resizable-over");
33065         }
33066     },
33067
33068     /**
33069      * Returns the element this component is bound to.
33070      * @return {Roo.Element}
33071      */
33072     getEl : function(){
33073         return this.el;
33074     },
33075
33076     /**
33077      * Returns the resizeChild element (or null).
33078      * @return {Roo.Element}
33079      */
33080     getResizeChild : function(){
33081         return this.resizeChild;
33082     },
33083     groupHandler : function()
33084     {
33085         
33086     },
33087     /**
33088      * Destroys this resizable. If the element was wrapped and
33089      * removeEl is not true then the element remains.
33090      * @param {Boolean} removeEl (optional) true to remove the element from the DOM
33091      */
33092     destroy : function(removeEl){
33093         this.proxy.remove();
33094         if(this.overlay){
33095             this.overlay.removeAllListeners();
33096             this.overlay.remove();
33097         }
33098         var ps = Roo.Resizable.positions;
33099         for(var k in ps){
33100             if(typeof ps[k] != "function" && this[ps[k]]){
33101                 var h = this[ps[k]];
33102                 h.el.removeAllListeners();
33103                 h.el.remove();
33104             }
33105         }
33106         if(removeEl){
33107             this.el.update("");
33108             this.el.remove();
33109         }
33110     }
33111 });
33112
33113 // private
33114 // hash to map config positions to true positions
33115 Roo.Resizable.positions = {
33116     n: "north", s: "south", e: "east", w: "west", se: "southeast", sw: "southwest", nw: "northwest", ne: "northeast", 
33117     hd: "hdrag"
33118 };
33119
33120 // private
33121 Roo.Resizable.Handle = function(rz, pos, disableTrackOver, transparent){
33122     if(!this.tpl){
33123         // only initialize the template if resizable is used
33124         var tpl = Roo.DomHelper.createTemplate(
33125             {tag: "div", cls: "x-resizable-handle x-resizable-handle-{0}"}
33126         );
33127         tpl.compile();
33128         Roo.Resizable.Handle.prototype.tpl = tpl;
33129     }
33130     this.position = pos;
33131     this.rz = rz;
33132     // show north drag fro topdra
33133     var handlepos = pos == 'hdrag' ? 'north' : pos;
33134     
33135     this.el = this.tpl.append(rz.el.dom, [handlepos], true);
33136     if (pos == 'hdrag') {
33137         this.el.setStyle('cursor', 'pointer');
33138     }
33139     this.el.unselectable();
33140     if(transparent){
33141         this.el.setOpacity(0);
33142     }
33143     this.el.on("mousedown", this.onMouseDown, this);
33144     if(!disableTrackOver){
33145         this.el.on("mouseover", this.onMouseOver, this);
33146         this.el.on("mouseout", this.onMouseOut, this);
33147     }
33148 };
33149
33150 // private
33151 Roo.Resizable.Handle.prototype = {
33152     afterResize : function(rz){
33153         Roo.log('after?');
33154         // do nothing
33155     },
33156     // private
33157     onMouseDown : function(e){
33158         this.rz.onMouseDown(this, e);
33159     },
33160     // private
33161     onMouseOver : function(e){
33162         this.rz.handleOver(this, e);
33163     },
33164     // private
33165     onMouseOut : function(e){
33166         this.rz.handleOut(this, e);
33167     }
33168 };/*
33169  * Based on:
33170  * Ext JS Library 1.1.1
33171  * Copyright(c) 2006-2007, Ext JS, LLC.
33172  *
33173  * Originally Released Under LGPL - original licence link has changed is not relivant.
33174  *
33175  * Fork - LGPL
33176  * <script type="text/javascript">
33177  */
33178
33179 /**
33180  * @class Roo.Editor
33181  * @extends Roo.Component
33182  * A base editor field that handles displaying/hiding on demand and has some built-in sizing and event handling logic.
33183  * @constructor
33184  * Create a new Editor
33185  * @param {Roo.form.Field} field The Field object (or descendant)
33186  * @param {Object} config The config object
33187  */
33188 Roo.Editor = function(field, config){
33189     Roo.Editor.superclass.constructor.call(this, config);
33190     this.field = field;
33191     this.addEvents({
33192         /**
33193              * @event beforestartedit
33194              * Fires when editing is initiated, but before the value changes.  Editing can be canceled by returning
33195              * false from the handler of this event.
33196              * @param {Editor} this
33197              * @param {Roo.Element} boundEl The underlying element bound to this editor
33198              * @param {Mixed} value The field value being set
33199              */
33200         "beforestartedit" : true,
33201         /**
33202              * @event startedit
33203              * Fires when this editor is displayed
33204              * @param {Roo.Element} boundEl The underlying element bound to this editor
33205              * @param {Mixed} value The starting field value
33206              */
33207         "startedit" : true,
33208         /**
33209              * @event beforecomplete
33210              * Fires after a change has been made to the field, but before the change is reflected in the underlying
33211              * field.  Saving the change to the field can be canceled by returning false from the handler of this event.
33212              * Note that if the value has not changed and ignoreNoChange = true, the editing will still end but this
33213              * event will not fire since no edit actually occurred.
33214              * @param {Editor} this
33215              * @param {Mixed} value The current field value
33216              * @param {Mixed} startValue The original field value
33217              */
33218         "beforecomplete" : true,
33219         /**
33220              * @event complete
33221              * Fires after editing is complete and any changed value has been written to the underlying field.
33222              * @param {Editor} this
33223              * @param {Mixed} value The current field value
33224              * @param {Mixed} startValue The original field value
33225              */
33226         "complete" : true,
33227         /**
33228          * @event specialkey
33229          * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed.  You can check
33230          * {@link Roo.EventObject#getKey} to determine which key was pressed.
33231          * @param {Roo.form.Field} this
33232          * @param {Roo.EventObject} e The event object
33233          */
33234         "specialkey" : true
33235     });
33236 };
33237
33238 Roo.extend(Roo.Editor, Roo.Component, {
33239     /**
33240      * @cfg {Boolean/String} autosize
33241      * True for the editor to automatically adopt the size of the underlying field, "width" to adopt the width only,
33242      * or "height" to adopt the height only (defaults to false)
33243      */
33244     /**
33245      * @cfg {Boolean} revertInvalid
33246      * True to automatically revert the field value and cancel the edit when the user completes an edit and the field
33247      * validation fails (defaults to true)
33248      */
33249     /**
33250      * @cfg {Boolean} ignoreNoChange
33251      * True to skip the the edit completion process (no save, no events fired) if the user completes an edit and
33252      * the value has not changed (defaults to false).  Applies only to string values - edits for other data types
33253      * will never be ignored.
33254      */
33255     /**
33256      * @cfg {Boolean} hideEl
33257      * False to keep the bound element visible while the editor is displayed (defaults to true)
33258      */
33259     /**
33260      * @cfg {Mixed} value
33261      * The data value of the underlying field (defaults to "")
33262      */
33263     value : "",
33264     /**
33265      * @cfg {String} alignment
33266      * The position to align to (see {@link Roo.Element#alignTo} for more details, defaults to "c-c?").
33267      */
33268     alignment: "c-c?",
33269     /**
33270      * @cfg {Boolean/String} shadow "sides" for sides/bottom only, "frame" for 4-way shadow, and "drop"
33271      * for bottom-right shadow (defaults to "frame")
33272      */
33273     shadow : "frame",
33274     /**
33275      * @cfg {Boolean} constrain True to constrain the editor to the viewport
33276      */
33277     constrain : false,
33278     /**
33279      * @cfg {Boolean} completeOnEnter True to complete the edit when the enter key is pressed (defaults to false)
33280      */
33281     completeOnEnter : false,
33282     /**
33283      * @cfg {Boolean} cancelOnEsc True to cancel the edit when the escape key is pressed (defaults to false)
33284      */
33285     cancelOnEsc : false,
33286     /**
33287      * @cfg {Boolean} updateEl True to update the innerHTML of the bound element when the update completes (defaults to false)
33288      */
33289     updateEl : false,
33290
33291     // private
33292     onRender : function(ct, position){
33293         this.el = new Roo.Layer({
33294             shadow: this.shadow,
33295             cls: "x-editor",
33296             parentEl : ct,
33297             shim : this.shim,
33298             shadowOffset:4,
33299             id: this.id,
33300             constrain: this.constrain
33301         });
33302         this.el.setStyle("overflow", Roo.isGecko ? "auto" : "hidden");
33303         if(this.field.msgTarget != 'title'){
33304             this.field.msgTarget = 'qtip';
33305         }
33306         this.field.render(this.el);
33307         if(Roo.isGecko){
33308             this.field.el.dom.setAttribute('autocomplete', 'off');
33309         }
33310         this.field.on("specialkey", this.onSpecialKey, this);
33311         if(this.swallowKeys){
33312             this.field.el.swallowEvent(['keydown','keypress']);
33313         }
33314         this.field.show();
33315         this.field.on("blur", this.onBlur, this);
33316         if(this.field.grow){
33317             this.field.on("autosize", this.el.sync,  this.el, {delay:1});
33318         }
33319     },
33320
33321     onSpecialKey : function(field, e)
33322     {
33323         //Roo.log('editor onSpecialKey');
33324         if(this.completeOnEnter && e.getKey() == e.ENTER){
33325             e.stopEvent();
33326             this.completeEdit();
33327             return;
33328         }
33329         // do not fire special key otherwise it might hide close the editor...
33330         if(e.getKey() == e.ENTER){    
33331             return;
33332         }
33333         if(this.cancelOnEsc && e.getKey() == e.ESC){
33334             this.cancelEdit();
33335             return;
33336         } 
33337         this.fireEvent('specialkey', field, e);
33338     
33339     },
33340
33341     /**
33342      * Starts the editing process and shows the editor.
33343      * @param {String/HTMLElement/Element} el The element to edit
33344      * @param {String} value (optional) A value to initialize the editor with. If a value is not provided, it defaults
33345       * to the innerHTML of el.
33346      */
33347     startEdit : function(el, value){
33348         if(this.editing){
33349             this.completeEdit();
33350         }
33351         this.boundEl = Roo.get(el);
33352         var v = value !== undefined ? value : this.boundEl.dom.innerHTML;
33353         if(!this.rendered){
33354             this.render(this.parentEl || document.body);
33355         }
33356         if(this.fireEvent("beforestartedit", this, this.boundEl, v) === false){
33357             return;
33358         }
33359         this.startValue = v;
33360         this.field.setValue(v);
33361         if(this.autoSize){
33362             var sz = this.boundEl.getSize();
33363             switch(this.autoSize){
33364                 case "width":
33365                 this.setSize(sz.width,  "");
33366                 break;
33367                 case "height":
33368                 this.setSize("",  sz.height);
33369                 break;
33370                 default:
33371                 this.setSize(sz.width,  sz.height);
33372             }
33373         }
33374         this.el.alignTo(this.boundEl, this.alignment);
33375         this.editing = true;
33376         if(Roo.QuickTips){
33377             Roo.QuickTips.disable();
33378         }
33379         this.show();
33380     },
33381
33382     /**
33383      * Sets the height and width of this editor.
33384      * @param {Number} width The new width
33385      * @param {Number} height The new height
33386      */
33387     setSize : function(w, h){
33388         this.field.setSize(w, h);
33389         if(this.el){
33390             this.el.sync();
33391         }
33392     },
33393
33394     /**
33395      * Realigns the editor to the bound field based on the current alignment config value.
33396      */
33397     realign : function(){
33398         this.el.alignTo(this.boundEl, this.alignment);
33399     },
33400
33401     /**
33402      * Ends the editing process, persists the changed value to the underlying field, and hides the editor.
33403      * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after edit (defaults to false)
33404      */
33405     completeEdit : function(remainVisible){
33406         if(!this.editing){
33407             return;
33408         }
33409         var v = this.getValue();
33410         if(this.revertInvalid !== false && !this.field.isValid()){
33411             v = this.startValue;
33412             this.cancelEdit(true);
33413         }
33414         if(String(v) === String(this.startValue) && this.ignoreNoChange){
33415             this.editing = false;
33416             this.hide();
33417             return;
33418         }
33419         if(this.fireEvent("beforecomplete", this, v, this.startValue) !== false){
33420             this.editing = false;
33421             if(this.updateEl && this.boundEl){
33422                 this.boundEl.update(v);
33423             }
33424             if(remainVisible !== true){
33425                 this.hide();
33426             }
33427             this.fireEvent("complete", this, v, this.startValue);
33428         }
33429     },
33430
33431     // private
33432     onShow : function(){
33433         this.el.show();
33434         if(this.hideEl !== false){
33435             this.boundEl.hide();
33436         }
33437         this.field.show();
33438         if(Roo.isIE && !this.fixIEFocus){ // IE has problems with focusing the first time
33439             this.fixIEFocus = true;
33440             this.deferredFocus.defer(50, this);
33441         }else{
33442             this.field.focus();
33443         }
33444         this.fireEvent("startedit", this.boundEl, this.startValue);
33445     },
33446
33447     deferredFocus : function(){
33448         if(this.editing){
33449             this.field.focus();
33450         }
33451     },
33452
33453     /**
33454      * Cancels the editing process and hides the editor without persisting any changes.  The field value will be
33455      * reverted to the original starting value.
33456      * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after
33457      * cancel (defaults to false)
33458      */
33459     cancelEdit : function(remainVisible){
33460         if(this.editing){
33461             this.setValue(this.startValue);
33462             if(remainVisible !== true){
33463                 this.hide();
33464             }
33465         }
33466     },
33467
33468     // private
33469     onBlur : function(){
33470         if(this.allowBlur !== true && this.editing){
33471             this.completeEdit();
33472         }
33473     },
33474
33475     // private
33476     onHide : function(){
33477         if(this.editing){
33478             this.completeEdit();
33479             return;
33480         }
33481         this.field.blur();
33482         if(this.field.collapse){
33483             this.field.collapse();
33484         }
33485         this.el.hide();
33486         if(this.hideEl !== false){
33487             this.boundEl.show();
33488         }
33489         if(Roo.QuickTips){
33490             Roo.QuickTips.enable();
33491         }
33492     },
33493
33494     /**
33495      * Sets the data value of the editor
33496      * @param {Mixed} value Any valid value supported by the underlying field
33497      */
33498     setValue : function(v){
33499         this.field.setValue(v);
33500     },
33501
33502     /**
33503      * Gets the data value of the editor
33504      * @return {Mixed} The data value
33505      */
33506     getValue : function(){
33507         return this.field.getValue();
33508     }
33509 });/*
33510  * Based on:
33511  * Ext JS Library 1.1.1
33512  * Copyright(c) 2006-2007, Ext JS, LLC.
33513  *
33514  * Originally Released Under LGPL - original licence link has changed is not relivant.
33515  *
33516  * Fork - LGPL
33517  * <script type="text/javascript">
33518  */
33519  
33520 /**
33521  * @class Roo.BasicDialog
33522  * @extends Roo.util.Observable
33523  * @parent none builder
33524  * Lightweight Dialog Class.  The code below shows the creation of a typical dialog using existing HTML markup:
33525  * <pre><code>
33526 var dlg = new Roo.BasicDialog("my-dlg", {
33527     height: 200,
33528     width: 300,
33529     minHeight: 100,
33530     minWidth: 150,
33531     modal: true,
33532     proxyDrag: true,
33533     shadow: true
33534 });
33535 dlg.addKeyListener(27, dlg.hide, dlg); // ESC can also close the dialog
33536 dlg.addButton('OK', dlg.hide, dlg);    // Could call a save function instead of hiding
33537 dlg.addButton('Cancel', dlg.hide, dlg);
33538 dlg.show();
33539 </code></pre>
33540   <b>A Dialog should always be a direct child of the body element.</b>
33541  * @cfg {Boolean/DomHelper} autoCreate True to auto create from scratch, or using a DomHelper Object (defaults to false)
33542  * @cfg {String} title Default text to display in the title bar (defaults to null)
33543  * @cfg {Number} width Width of the dialog in pixels (can also be set via CSS).  Determined by browser if unspecified.
33544  * @cfg {Number} height Height of the dialog in pixels (can also be set via CSS).  Determined by browser if unspecified.
33545  * @cfg {Number} x The default left page coordinate of the dialog (defaults to center screen)
33546  * @cfg {Number} y The default top page coordinate of the dialog (defaults to center screen)
33547  * @cfg {String/Element} animateTarget Id or element from which the dialog should animate while opening
33548  * (defaults to null with no animation)
33549  * @cfg {Boolean} resizable False to disable manual dialog resizing (defaults to true)
33550  * @cfg {String} resizeHandles Which resize handles to display - see the {@link Roo.Resizable} handles config
33551  * property for valid values (defaults to 'all')
33552  * @cfg {Number} minHeight The minimum allowable height for a resizable dialog (defaults to 80)
33553  * @cfg {Number} minWidth The minimum allowable width for a resizable dialog (defaults to 200)
33554  * @cfg {Boolean} modal True to show the dialog modally, preventing user interaction with the rest of the page (defaults to false)
33555  * @cfg {Boolean} autoScroll True to allow the dialog body contents to overflow and display scrollbars (defaults to false)
33556  * @cfg {Boolean} closable False to remove the built-in top-right corner close button (defaults to true)
33557  * @cfg {Boolean} collapsible False to remove the built-in top-right corner collapse button (defaults to true)
33558  * @cfg {Boolean} constraintoviewport True to keep the dialog constrained within the visible viewport boundaries (defaults to true)
33559  * @cfg {Boolean} syncHeightBeforeShow True to cause the dimensions to be recalculated before the dialog is shown (defaults to false)
33560  * @cfg {Boolean} draggable False to disable dragging of the dialog within the viewport (defaults to true)
33561  * @cfg {Boolean} autoTabs If true, all elements with class 'x-dlg-tab' will get automatically converted to tabs (defaults to false)
33562  * @cfg {String} tabTag The tag name of tab elements, used when autoTabs = true (defaults to 'div')
33563  * @cfg {Boolean} proxyDrag True to drag a lightweight proxy element rather than the dialog itself, used when
33564  * draggable = true (defaults to false)
33565  * @cfg {Boolean} fixedcenter True to ensure that anytime the dialog is shown or resized it gets centered (defaults to false)
33566  * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
33567  * shadow (defaults to false)
33568  * @cfg {Number} shadowOffset The number of pixels to offset the shadow if displayed (defaults to 5)
33569  * @cfg {String} buttonAlign Valid values are "left," "center" and "right" (defaults to "right")
33570  * @cfg {Number} minButtonWidth Minimum width of all dialog buttons (defaults to 75)
33571  * @cfg {Array} buttons Array of buttons
33572  * @cfg {Boolean} shim True to create an iframe shim that prevents selects from showing through (defaults to false)
33573  * @constructor
33574  * Create a new BasicDialog.
33575  * @param {String/HTMLElement/Roo.Element} el The container element or DOM node, or its id
33576  * @param {Object} config Configuration options
33577  */
33578 Roo.BasicDialog = function(el, config){
33579     this.el = Roo.get(el);
33580     var dh = Roo.DomHelper;
33581     if(!this.el && config && config.autoCreate){
33582         if(typeof config.autoCreate == "object"){
33583             if(!config.autoCreate.id){
33584                 config.autoCreate.id = el;
33585             }
33586             this.el = dh.append(document.body,
33587                         config.autoCreate, true);
33588         }else{
33589             this.el = dh.append(document.body,
33590                         {tag: "div", id: el, style:'visibility:hidden;'}, true);
33591         }
33592     }
33593     el = this.el;
33594     el.setDisplayed(true);
33595     el.hide = this.hideAction;
33596     this.id = el.id;
33597     el.addClass("x-dlg");
33598
33599     Roo.apply(this, config);
33600
33601     this.proxy = el.createProxy("x-dlg-proxy");
33602     this.proxy.hide = this.hideAction;
33603     this.proxy.setOpacity(.5);
33604     this.proxy.hide();
33605
33606     if(config.width){
33607         el.setWidth(config.width);
33608     }
33609     if(config.height){
33610         el.setHeight(config.height);
33611     }
33612     this.size = el.getSize();
33613     if(typeof config.x != "undefined" && typeof config.y != "undefined"){
33614         this.xy = [config.x,config.y];
33615     }else{
33616         this.xy = el.getCenterXY(true);
33617     }
33618     /** The header element @type Roo.Element */
33619     this.header = el.child("> .x-dlg-hd");
33620     /** The body element @type Roo.Element */
33621     this.body = el.child("> .x-dlg-bd");
33622     /** The footer element @type Roo.Element */
33623     this.footer = el.child("> .x-dlg-ft");
33624
33625     if(!this.header){
33626         this.header = el.createChild({tag: "div", cls:"x-dlg-hd", html: "&#160;"}, this.body ? this.body.dom : null);
33627     }
33628     if(!this.body){
33629         this.body = el.createChild({tag: "div", cls:"x-dlg-bd"});
33630     }
33631
33632     this.header.unselectable();
33633     if(this.title){
33634         this.header.update(this.title);
33635     }
33636     // this element allows the dialog to be focused for keyboard event
33637     this.focusEl = el.createChild({tag: "a", href:"#", cls:"x-dlg-focus", tabIndex:"-1"});
33638     this.focusEl.swallowEvent("click", true);
33639
33640     this.header.wrap({cls:"x-dlg-hd-right"}).wrap({cls:"x-dlg-hd-left"}, true);
33641
33642     // wrap the body and footer for special rendering
33643     this.bwrap = this.body.wrap({tag: "div", cls:"x-dlg-dlg-body"});
33644     if(this.footer){
33645         this.bwrap.dom.appendChild(this.footer.dom);
33646     }
33647
33648     this.bg = this.el.createChild({
33649         tag: "div", cls:"x-dlg-bg",
33650         html: '<div class="x-dlg-bg-left"><div class="x-dlg-bg-right"><div class="x-dlg-bg-center">&#160;</div></div></div>'
33651     });
33652     this.centerBg = this.bg.child("div.x-dlg-bg-center");
33653
33654
33655     if(this.autoScroll !== false && !this.autoTabs){
33656         this.body.setStyle("overflow", "auto");
33657     }
33658
33659     this.toolbox = this.el.createChild({cls: "x-dlg-toolbox"});
33660
33661     if(this.closable !== false){
33662         this.el.addClass("x-dlg-closable");
33663         this.close = this.toolbox.createChild({cls:"x-dlg-close"});
33664         this.close.on("click", this.closeClick, this);
33665         this.close.addClassOnOver("x-dlg-close-over");
33666     }
33667     if(this.collapsible !== false){
33668         this.collapseBtn = this.toolbox.createChild({cls:"x-dlg-collapse"});
33669         this.collapseBtn.on("click", this.collapseClick, this);
33670         this.collapseBtn.addClassOnOver("x-dlg-collapse-over");
33671         this.header.on("dblclick", this.collapseClick, this);
33672     }
33673     if(this.resizable !== false){
33674         this.el.addClass("x-dlg-resizable");
33675         this.resizer = new Roo.Resizable(el, {
33676             minWidth: this.minWidth || 80,
33677             minHeight:this.minHeight || 80,
33678             handles: this.resizeHandles || "all",
33679             pinned: true
33680         });
33681         this.resizer.on("beforeresize", this.beforeResize, this);
33682         this.resizer.on("resize", this.onResize, this);
33683     }
33684     if(this.draggable !== false){
33685         el.addClass("x-dlg-draggable");
33686         if (!this.proxyDrag) {
33687             var dd = new Roo.dd.DD(el.dom.id, "WindowDrag");
33688         }
33689         else {
33690             var dd = new Roo.dd.DDProxy(el.dom.id, "WindowDrag", {dragElId: this.proxy.id});
33691         }
33692         dd.setHandleElId(this.header.id);
33693         dd.endDrag = this.endMove.createDelegate(this);
33694         dd.startDrag = this.startMove.createDelegate(this);
33695         dd.onDrag = this.onDrag.createDelegate(this);
33696         dd.scroll = false;
33697         this.dd = dd;
33698     }
33699     if(this.modal){
33700         this.mask = dh.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true);
33701         this.mask.enableDisplayMode("block");
33702         this.mask.hide();
33703         this.el.addClass("x-dlg-modal");
33704     }
33705     if(this.shadow){
33706         this.shadow = new Roo.Shadow({
33707             mode : typeof this.shadow == "string" ? this.shadow : "sides",
33708             offset : this.shadowOffset
33709         });
33710     }else{
33711         this.shadowOffset = 0;
33712     }
33713     if(Roo.useShims && this.shim !== false){
33714         this.shim = this.el.createShim();
33715         this.shim.hide = this.hideAction;
33716         this.shim.hide();
33717     }else{
33718         this.shim = false;
33719     }
33720     if(this.autoTabs){
33721         this.initTabs();
33722     }
33723     if (this.buttons) { 
33724         var bts= this.buttons;
33725         this.buttons = [];
33726         Roo.each(bts, function(b) {
33727             this.addButton(b);
33728         }, this);
33729     }
33730     
33731     
33732     this.addEvents({
33733         /**
33734          * @event keydown
33735          * Fires when a key is pressed
33736          * @param {Roo.BasicDialog} this
33737          * @param {Roo.EventObject} e
33738          */
33739         "keydown" : true,
33740         /**
33741          * @event move
33742          * Fires when this dialog is moved by the user.
33743          * @param {Roo.BasicDialog} this
33744          * @param {Number} x The new page X
33745          * @param {Number} y The new page Y
33746          */
33747         "move" : true,
33748         /**
33749          * @event resize
33750          * Fires when this dialog is resized by the user.
33751          * @param {Roo.BasicDialog} this
33752          * @param {Number} width The new width
33753          * @param {Number} height The new height
33754          */
33755         "resize" : true,
33756         /**
33757          * @event beforehide
33758          * Fires before this dialog is hidden.
33759          * @param {Roo.BasicDialog} this
33760          */
33761         "beforehide" : true,
33762         /**
33763          * @event hide
33764          * Fires when this dialog is hidden.
33765          * @param {Roo.BasicDialog} this
33766          */
33767         "hide" : true,
33768         /**
33769          * @event beforeshow
33770          * Fires before this dialog is shown.
33771          * @param {Roo.BasicDialog} this
33772          */
33773         "beforeshow" : true,
33774         /**
33775          * @event show
33776          * Fires when this dialog is shown.
33777          * @param {Roo.BasicDialog} this
33778          */
33779         "show" : true
33780     });
33781     el.on("keydown", this.onKeyDown, this);
33782     el.on("mousedown", this.toFront, this);
33783     Roo.EventManager.onWindowResize(this.adjustViewport, this, true);
33784     this.el.hide();
33785     Roo.DialogManager.register(this);
33786     Roo.BasicDialog.superclass.constructor.call(this);
33787 };
33788
33789 Roo.extend(Roo.BasicDialog, Roo.util.Observable, {
33790     shadowOffset: Roo.isIE ? 6 : 5,
33791     minHeight: 80,
33792     minWidth: 200,
33793     minButtonWidth: 75,
33794     defaultButton: null,
33795     buttonAlign: "right",
33796     tabTag: 'div',
33797     firstShow: true,
33798
33799     /**
33800      * Sets the dialog title text
33801      * @param {String} text The title text to display
33802      * @return {Roo.BasicDialog} this
33803      */
33804     setTitle : function(text){
33805         this.header.update(text);
33806         return this;
33807     },
33808
33809     // private
33810     closeClick : function(){
33811         this.hide();
33812     },
33813
33814     // private
33815     collapseClick : function(){
33816         this[this.collapsed ? "expand" : "collapse"]();
33817     },
33818
33819     /**
33820      * Collapses the dialog to its minimized state (only the title bar is visible).
33821      * Equivalent to the user clicking the collapse dialog button.
33822      */
33823     collapse : function(){
33824         if(!this.collapsed){
33825             this.collapsed = true;
33826             this.el.addClass("x-dlg-collapsed");
33827             this.restoreHeight = this.el.getHeight();
33828             this.resizeTo(this.el.getWidth(), this.header.getHeight());
33829         }
33830     },
33831
33832     /**
33833      * Expands a collapsed dialog back to its normal state.  Equivalent to the user
33834      * clicking the expand dialog button.
33835      */
33836     expand : function(){
33837         if(this.collapsed){
33838             this.collapsed = false;
33839             this.el.removeClass("x-dlg-collapsed");
33840             this.resizeTo(this.el.getWidth(), this.restoreHeight);
33841         }
33842     },
33843
33844     /**
33845      * Reinitializes the tabs component, clearing out old tabs and finding new ones.
33846      * @return {Roo.TabPanel} The tabs component
33847      */
33848     initTabs : function(){
33849         var tabs = this.getTabs();
33850         while(tabs.getTab(0)){
33851             tabs.removeTab(0);
33852         }
33853         this.el.select(this.tabTag+'.x-dlg-tab').each(function(el){
33854             var dom = el.dom;
33855             tabs.addTab(Roo.id(dom), dom.title);
33856             dom.title = "";
33857         });
33858         tabs.activate(0);
33859         return tabs;
33860     },
33861
33862     // private
33863     beforeResize : function(){
33864         this.resizer.minHeight = Math.max(this.minHeight, this.getHeaderFooterHeight(true)+40);
33865     },
33866
33867     // private
33868     onResize : function(){
33869         this.refreshSize();
33870         this.syncBodyHeight();
33871         this.adjustAssets();
33872         this.focus();
33873         this.fireEvent("resize", this, this.size.width, this.size.height);
33874     },
33875
33876     // private
33877     onKeyDown : function(e){
33878         if(this.isVisible()){
33879             this.fireEvent("keydown", this, e);
33880         }
33881     },
33882
33883     /**
33884      * Resizes the dialog.
33885      * @param {Number} width
33886      * @param {Number} height
33887      * @return {Roo.BasicDialog} this
33888      */
33889     resizeTo : function(width, height){
33890         this.el.setSize(width, height);
33891         this.size = {width: width, height: height};
33892         this.syncBodyHeight();
33893         if(this.fixedcenter){
33894             this.center();
33895         }
33896         if(this.isVisible()){
33897             this.constrainXY();
33898             this.adjustAssets();
33899         }
33900         this.fireEvent("resize", this, width, height);
33901         return this;
33902     },
33903
33904
33905     /**
33906      * Resizes the dialog to fit the specified content size.
33907      * @param {Number} width
33908      * @param {Number} height
33909      * @return {Roo.BasicDialog} this
33910      */
33911     setContentSize : function(w, h){
33912         h += this.getHeaderFooterHeight() + this.body.getMargins("tb");
33913         w += this.body.getMargins("lr") + this.bwrap.getMargins("lr") + this.centerBg.getPadding("lr");
33914         //if(!this.el.isBorderBox()){
33915             h +=  this.body.getPadding("tb") + this.bwrap.getBorderWidth("tb") + this.body.getBorderWidth("tb") + this.el.getBorderWidth("tb");
33916             w += this.body.getPadding("lr") + this.bwrap.getBorderWidth("lr") + this.body.getBorderWidth("lr") + this.bwrap.getPadding("lr") + this.el.getBorderWidth("lr");
33917         //}
33918         if(this.tabs){
33919             h += this.tabs.stripWrap.getHeight() + this.tabs.bodyEl.getMargins("tb") + this.tabs.bodyEl.getPadding("tb");
33920             w += this.tabs.bodyEl.getMargins("lr") + this.tabs.bodyEl.getPadding("lr");
33921         }
33922         this.resizeTo(w, h);
33923         return this;
33924     },
33925
33926     /**
33927      * Adds a key listener for when this dialog is displayed.  This allows you to hook in a function that will be
33928      * executed in response to a particular key being pressed while the dialog is active.
33929      * @param {Number/Array/Object} key Either the numeric key code, array of key codes or an object with the following options:
33930      *                                  {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
33931      * @param {Function} fn The function to call
33932      * @param {Object} scope (optional) The scope of the function
33933      * @return {Roo.BasicDialog} this
33934      */
33935     addKeyListener : function(key, fn, scope){
33936         var keyCode, shift, ctrl, alt;
33937         if(typeof key == "object" && !(key instanceof Array)){
33938             keyCode = key["key"];
33939             shift = key["shift"];
33940             ctrl = key["ctrl"];
33941             alt = key["alt"];
33942         }else{
33943             keyCode = key;
33944         }
33945         var handler = function(dlg, e){
33946             if((!shift || e.shiftKey) && (!ctrl || e.ctrlKey) &&  (!alt || e.altKey)){
33947                 var k = e.getKey();
33948                 if(keyCode instanceof Array){
33949                     for(var i = 0, len = keyCode.length; i < len; i++){
33950                         if(keyCode[i] == k){
33951                           fn.call(scope || window, dlg, k, e);
33952                           return;
33953                         }
33954                     }
33955                 }else{
33956                     if(k == keyCode){
33957                         fn.call(scope || window, dlg, k, e);
33958                     }
33959                 }
33960             }
33961         };
33962         this.on("keydown", handler);
33963         return this;
33964     },
33965
33966     /**
33967      * Returns the TabPanel component (creates it if it doesn't exist).
33968      * Note: If you wish to simply check for the existence of tabs without creating them,
33969      * check for a null 'tabs' property.
33970      * @return {Roo.TabPanel} The tabs component
33971      */
33972     getTabs : function(){
33973         if(!this.tabs){
33974             this.el.addClass("x-dlg-auto-tabs");
33975             this.body.addClass(this.tabPosition == "bottom" ? "x-tabs-bottom" : "x-tabs-top");
33976             this.tabs = new Roo.TabPanel(this.body.dom, this.tabPosition == "bottom");
33977         }
33978         return this.tabs;
33979     },
33980
33981     /**
33982      * Adds a button to the footer section of the dialog.
33983      * @param {String/Object} config A string becomes the button text, an object can either be a Button config
33984      * object or a valid Roo.DomHelper element config
33985      * @param {Function} handler The function called when the button is clicked
33986      * @param {Object} scope (optional) The scope of the handler function (accepts position as a property)
33987      * @return {Roo.Button} The new button
33988      */
33989     addButton : function(config, handler, scope){
33990         var dh = Roo.DomHelper;
33991         if(!this.footer){
33992             this.footer = dh.append(this.bwrap, {tag: "div", cls:"x-dlg-ft"}, true);
33993         }
33994         if(!this.btnContainer){
33995             var tb = this.footer.createChild({
33996
33997                 cls:"x-dlg-btns x-dlg-btns-"+this.buttonAlign,
33998                 html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'
33999             }, null, true);
34000             this.btnContainer = tb.firstChild.firstChild.firstChild;
34001         }
34002         var bconfig = {
34003             handler: handler,
34004             scope: scope,
34005             minWidth: this.minButtonWidth,
34006             hideParent:true
34007         };
34008         if(typeof config == "string"){
34009             bconfig.text = config;
34010         }else{
34011             if(config.tag){
34012                 bconfig.dhconfig = config;
34013             }else{
34014                 Roo.apply(bconfig, config);
34015             }
34016         }
34017         var fc = false;
34018         if ((typeof(bconfig.position) != 'undefined') && bconfig.position < this.btnContainer.childNodes.length-1) {
34019             bconfig.position = Math.max(0, bconfig.position);
34020             fc = this.btnContainer.childNodes[bconfig.position];
34021         }
34022          
34023         var btn = new Roo.Button(
34024             fc ? 
34025                 this.btnContainer.insertBefore(document.createElement("td"),fc)
34026                 : this.btnContainer.appendChild(document.createElement("td")),
34027             //Roo.get(this.btnContainer).createChild( { tag: 'td'},  fc ),
34028             bconfig
34029         );
34030         this.syncBodyHeight();
34031         if(!this.buttons){
34032             /**
34033              * Array of all the buttons that have been added to this dialog via addButton
34034              * @type Array
34035              */
34036             this.buttons = [];
34037         }
34038         this.buttons.push(btn);
34039         return btn;
34040     },
34041
34042     /**
34043      * Sets the default button to be focused when the dialog is displayed.
34044      * @param {Roo.BasicDialog.Button} btn The button object returned by {@link #addButton}
34045      * @return {Roo.BasicDialog} this
34046      */
34047     setDefaultButton : function(btn){
34048         this.defaultButton = btn;
34049         return this;
34050     },
34051
34052     // private
34053     getHeaderFooterHeight : function(safe){
34054         var height = 0;
34055         if(this.header){
34056            height += this.header.getHeight();
34057         }
34058         if(this.footer){
34059            var fm = this.footer.getMargins();
34060             height += (this.footer.getHeight()+fm.top+fm.bottom);
34061         }
34062         height += this.bwrap.getPadding("tb")+this.bwrap.getBorderWidth("tb");
34063         height += this.centerBg.getPadding("tb");
34064         return height;
34065     },
34066
34067     // private
34068     syncBodyHeight : function()
34069     {
34070         var bd = this.body, // the text
34071             cb = this.centerBg, // wrapper around bottom.. but does not seem to be used..
34072             bw = this.bwrap;
34073         var height = this.size.height - this.getHeaderFooterHeight(false);
34074         bd.setHeight(height-bd.getMargins("tb"));
34075         var hh = this.header.getHeight();
34076         var h = this.size.height-hh;
34077         cb.setHeight(h);
34078         
34079         bw.setLeftTop(cb.getPadding("l"), hh+cb.getPadding("t"));
34080         bw.setHeight(h-cb.getPadding("tb"));
34081         
34082         bw.setWidth(this.el.getWidth(true)-cb.getPadding("lr"));
34083         bd.setWidth(bw.getWidth(true));
34084         if(this.tabs){
34085             this.tabs.syncHeight();
34086             if(Roo.isIE){
34087                 this.tabs.el.repaint();
34088             }
34089         }
34090     },
34091
34092     /**
34093      * Restores the previous state of the dialog if Roo.state is configured.
34094      * @return {Roo.BasicDialog} this
34095      */
34096     restoreState : function(){
34097         var box = Roo.state.Manager.get(this.stateId || (this.el.id + "-state"));
34098         if(box && box.width){
34099             this.xy = [box.x, box.y];
34100             this.resizeTo(box.width, box.height);
34101         }
34102         return this;
34103     },
34104
34105     // private
34106     beforeShow : function(){
34107         this.expand();
34108         if(this.fixedcenter){
34109             this.xy = this.el.getCenterXY(true);
34110         }
34111         if(this.modal){
34112             Roo.get(document.body).addClass("x-body-masked");
34113             this.mask.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
34114             this.mask.show();
34115         }
34116         this.constrainXY();
34117     },
34118
34119     // private
34120     animShow : function(){
34121         var b = Roo.get(this.animateTarget).getBox();
34122         this.proxy.setSize(b.width, b.height);
34123         this.proxy.setLocation(b.x, b.y);
34124         this.proxy.show();
34125         this.proxy.setBounds(this.xy[0], this.xy[1], this.size.width, this.size.height,
34126                     true, .35, this.showEl.createDelegate(this));
34127     },
34128
34129     /**
34130      * Shows the dialog.
34131      * @param {String/HTMLElement/Roo.Element} animateTarget (optional) Reset the animation target
34132      * @return {Roo.BasicDialog} this
34133      */
34134     show : function(animateTarget){
34135         if (this.fireEvent("beforeshow", this) === false){
34136             return;
34137         }
34138         if(this.syncHeightBeforeShow){
34139             this.syncBodyHeight();
34140         }else if(this.firstShow){
34141             this.firstShow = false;
34142             this.syncBodyHeight(); // sync the height on the first show instead of in the constructor
34143         }
34144         this.animateTarget = animateTarget || this.animateTarget;
34145         if(!this.el.isVisible()){
34146             this.beforeShow();
34147             if(this.animateTarget && Roo.get(this.animateTarget)){
34148                 this.animShow();
34149             }else{
34150                 this.showEl();
34151             }
34152         }
34153         return this;
34154     },
34155
34156     // private
34157     showEl : function(){
34158         this.proxy.hide();
34159         this.el.setXY(this.xy);
34160         this.el.show();
34161         this.adjustAssets(true);
34162         this.toFront();
34163         this.focus();
34164         // IE peekaboo bug - fix found by Dave Fenwick
34165         if(Roo.isIE){
34166             this.el.repaint();
34167         }
34168         this.fireEvent("show", this);
34169     },
34170
34171     /**
34172      * Focuses the dialog.  If a defaultButton is set, it will receive focus, otherwise the
34173      * dialog itself will receive focus.
34174      */
34175     focus : function(){
34176         if(this.defaultButton){
34177             this.defaultButton.focus();
34178         }else{
34179             this.focusEl.focus();
34180         }
34181     },
34182
34183     // private
34184     constrainXY : function(){
34185         if(this.constraintoviewport !== false){
34186             if(!this.viewSize){
34187                 if(this.container){
34188                     var s = this.container.getSize();
34189                     this.viewSize = [s.width, s.height];
34190                 }else{
34191                     this.viewSize = [Roo.lib.Dom.getViewWidth(),Roo.lib.Dom.getViewHeight()];
34192                 }
34193             }
34194             var s = Roo.get(this.container||document).getScroll();
34195
34196             var x = this.xy[0], y = this.xy[1];
34197             var w = this.size.width, h = this.size.height;
34198             var vw = this.viewSize[0], vh = this.viewSize[1];
34199             // only move it if it needs it
34200             var moved = false;
34201             // first validate right/bottom
34202             if(x + w > vw+s.left){
34203                 x = vw - w;
34204                 moved = true;
34205             }
34206             if(y + h > vh+s.top){
34207                 y = vh - h;
34208                 moved = true;
34209             }
34210             // then make sure top/left isn't negative
34211             if(x < s.left){
34212                 x = s.left;
34213                 moved = true;
34214             }
34215             if(y < s.top){
34216                 y = s.top;
34217                 moved = true;
34218             }
34219             if(moved){
34220                 // cache xy
34221                 this.xy = [x, y];
34222                 if(this.isVisible()){
34223                     this.el.setLocation(x, y);
34224                     this.adjustAssets();
34225                 }
34226             }
34227         }
34228     },
34229
34230     // private
34231     onDrag : function(){
34232         if(!this.proxyDrag){
34233             this.xy = this.el.getXY();
34234             this.adjustAssets();
34235         }
34236     },
34237
34238     // private
34239     adjustAssets : function(doShow){
34240         var x = this.xy[0], y = this.xy[1];
34241         var w = this.size.width, h = this.size.height;
34242         if(doShow === true){
34243             if(this.shadow){
34244                 this.shadow.show(this.el);
34245             }
34246             if(this.shim){
34247                 this.shim.show();
34248             }
34249         }
34250         if(this.shadow && this.shadow.isVisible()){
34251             this.shadow.show(this.el);
34252         }
34253         if(this.shim && this.shim.isVisible()){
34254             this.shim.setBounds(x, y, w, h);
34255         }
34256     },
34257
34258     // private
34259     adjustViewport : function(w, h){
34260         if(!w || !h){
34261             w = Roo.lib.Dom.getViewWidth();
34262             h = Roo.lib.Dom.getViewHeight();
34263         }
34264         // cache the size
34265         this.viewSize = [w, h];
34266         if(this.modal && this.mask.isVisible()){
34267             this.mask.setSize(w, h); // first make sure the mask isn't causing overflow
34268             this.mask.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
34269         }
34270         if(this.isVisible()){
34271             this.constrainXY();
34272         }
34273     },
34274
34275     /**
34276      * Destroys this dialog and all its supporting elements (including any tabs, shim,
34277      * shadow, proxy, mask, etc.)  Also removes all event listeners.
34278      * @param {Boolean} removeEl (optional) true to remove the element from the DOM
34279      */
34280     destroy : function(removeEl){
34281         if(this.isVisible()){
34282             this.animateTarget = null;
34283             this.hide();
34284         }
34285         Roo.EventManager.removeResizeListener(this.adjustViewport, this);
34286         if(this.tabs){
34287             this.tabs.destroy(removeEl);
34288         }
34289         Roo.destroy(
34290              this.shim,
34291              this.proxy,
34292              this.resizer,
34293              this.close,
34294              this.mask
34295         );
34296         if(this.dd){
34297             this.dd.unreg();
34298         }
34299         if(this.buttons){
34300            for(var i = 0, len = this.buttons.length; i < len; i++){
34301                this.buttons[i].destroy();
34302            }
34303         }
34304         this.el.removeAllListeners();
34305         if(removeEl === true){
34306             this.el.update("");
34307             this.el.remove();
34308         }
34309         Roo.DialogManager.unregister(this);
34310     },
34311
34312     // private
34313     startMove : function(){
34314         if(this.proxyDrag){
34315             this.proxy.show();
34316         }
34317         if(this.constraintoviewport !== false){
34318             this.dd.constrainTo(document.body, {right: this.shadowOffset, bottom: this.shadowOffset});
34319         }
34320     },
34321
34322     // private
34323     endMove : function(){
34324         if(!this.proxyDrag){
34325             Roo.dd.DD.prototype.endDrag.apply(this.dd, arguments);
34326         }else{
34327             Roo.dd.DDProxy.prototype.endDrag.apply(this.dd, arguments);
34328             this.proxy.hide();
34329         }
34330         this.refreshSize();
34331         this.adjustAssets();
34332         this.focus();
34333         this.fireEvent("move", this, this.xy[0], this.xy[1]);
34334     },
34335
34336     /**
34337      * Brings this dialog to the front of any other visible dialogs
34338      * @return {Roo.BasicDialog} this
34339      */
34340     toFront : function(){
34341         Roo.DialogManager.bringToFront(this);
34342         return this;
34343     },
34344
34345     /**
34346      * Sends this dialog to the back (under) of any other visible dialogs
34347      * @return {Roo.BasicDialog} this
34348      */
34349     toBack : function(){
34350         Roo.DialogManager.sendToBack(this);
34351         return this;
34352     },
34353
34354     /**
34355      * Centers this dialog in the viewport
34356      * @return {Roo.BasicDialog} this
34357      */
34358     center : function(){
34359         var xy = this.el.getCenterXY(true);
34360         this.moveTo(xy[0], xy[1]);
34361         return this;
34362     },
34363
34364     /**
34365      * Moves the dialog's top-left corner to the specified point
34366      * @param {Number} x
34367      * @param {Number} y
34368      * @return {Roo.BasicDialog} this
34369      */
34370     moveTo : function(x, y){
34371         this.xy = [x,y];
34372         if(this.isVisible()){
34373             this.el.setXY(this.xy);
34374             this.adjustAssets();
34375         }
34376         return this;
34377     },
34378
34379     /**
34380      * Aligns the dialog to the specified element
34381      * @param {String/HTMLElement/Roo.Element} element The element to align to.
34382      * @param {String} position The position to align to (see {@link Roo.Element#alignTo} for more details).
34383      * @param {Array} offsets (optional) Offset the positioning by [x, y]
34384      * @return {Roo.BasicDialog} this
34385      */
34386     alignTo : function(element, position, offsets){
34387         this.xy = this.el.getAlignToXY(element, position, offsets);
34388         if(this.isVisible()){
34389             this.el.setXY(this.xy);
34390             this.adjustAssets();
34391         }
34392         return this;
34393     },
34394
34395     /**
34396      * Anchors an element to another element and realigns it when the window is resized.
34397      * @param {String/HTMLElement/Roo.Element} element The element to align to.
34398      * @param {String} position The position to align to (see {@link Roo.Element#alignTo} for more details)
34399      * @param {Array} offsets (optional) Offset the positioning by [x, y]
34400      * @param {Boolean/Number} monitorScroll (optional) true to monitor body scroll and reposition. If this parameter
34401      * is a number, it is used as the buffer delay (defaults to 50ms).
34402      * @return {Roo.BasicDialog} this
34403      */
34404     anchorTo : function(el, alignment, offsets, monitorScroll){
34405         var action = function(){
34406             this.alignTo(el, alignment, offsets);
34407         };
34408         Roo.EventManager.onWindowResize(action, this);
34409         var tm = typeof monitorScroll;
34410         if(tm != 'undefined'){
34411             Roo.EventManager.on(window, 'scroll', action, this,
34412                 {buffer: tm == 'number' ? monitorScroll : 50});
34413         }
34414         action.call(this);
34415         return this;
34416     },
34417
34418     /**
34419      * Returns true if the dialog is visible
34420      * @return {Boolean}
34421      */
34422     isVisible : function(){
34423         return this.el.isVisible();
34424     },
34425
34426     // private
34427     animHide : function(callback){
34428         var b = Roo.get(this.animateTarget).getBox();
34429         this.proxy.show();
34430         this.proxy.setBounds(this.xy[0], this.xy[1], this.size.width, this.size.height);
34431         this.el.hide();
34432         this.proxy.setBounds(b.x, b.y, b.width, b.height, true, .35,
34433                     this.hideEl.createDelegate(this, [callback]));
34434     },
34435
34436     /**
34437      * Hides the dialog.
34438      * @param {Function} callback (optional) Function to call when the dialog is hidden
34439      * @return {Roo.BasicDialog} this
34440      */
34441     hide : function(callback){
34442         if (this.fireEvent("beforehide", this) === false){
34443             return;
34444         }
34445         if(this.shadow){
34446             this.shadow.hide();
34447         }
34448         if(this.shim) {
34449           this.shim.hide();
34450         }
34451         // sometimes animateTarget seems to get set.. causing problems...
34452         // this just double checks..
34453         if(this.animateTarget && Roo.get(this.animateTarget)) {
34454            this.animHide(callback);
34455         }else{
34456             this.el.hide();
34457             this.hideEl(callback);
34458         }
34459         return this;
34460     },
34461
34462     // private
34463     hideEl : function(callback){
34464         this.proxy.hide();
34465         if(this.modal){
34466             this.mask.hide();
34467             Roo.get(document.body).removeClass("x-body-masked");
34468         }
34469         this.fireEvent("hide", this);
34470         if(typeof callback == "function"){
34471             callback();
34472         }
34473     },
34474
34475     // private
34476     hideAction : function(){
34477         this.setLeft("-10000px");
34478         this.setTop("-10000px");
34479         this.setStyle("visibility", "hidden");
34480     },
34481
34482     // private
34483     refreshSize : function(){
34484         this.size = this.el.getSize();
34485         this.xy = this.el.getXY();
34486         Roo.state.Manager.set(this.stateId || this.el.id + "-state", this.el.getBox());
34487     },
34488
34489     // private
34490     // z-index is managed by the DialogManager and may be overwritten at any time
34491     setZIndex : function(index){
34492         if(this.modal){
34493             this.mask.setStyle("z-index", index);
34494         }
34495         if(this.shim){
34496             this.shim.setStyle("z-index", ++index);
34497         }
34498         if(this.shadow){
34499             this.shadow.setZIndex(++index);
34500         }
34501         this.el.setStyle("z-index", ++index);
34502         if(this.proxy){
34503             this.proxy.setStyle("z-index", ++index);
34504         }
34505         if(this.resizer){
34506             this.resizer.proxy.setStyle("z-index", ++index);
34507         }
34508
34509         this.lastZIndex = index;
34510     },
34511
34512     /**
34513      * Returns the element for this dialog
34514      * @return {Roo.Element} The underlying dialog Element
34515      */
34516     getEl : function(){
34517         return this.el;
34518     }
34519 });
34520
34521 /**
34522  * @class Roo.DialogManager
34523  * Provides global access to BasicDialogs that have been created and
34524  * support for z-indexing (layering) multiple open dialogs.
34525  */
34526 Roo.DialogManager = function(){
34527     var list = {};
34528     var accessList = [];
34529     var front = null;
34530
34531     // private
34532     var sortDialogs = function(d1, d2){
34533         return (!d1._lastAccess || d1._lastAccess < d2._lastAccess) ? -1 : 1;
34534     };
34535
34536     // private
34537     var orderDialogs = function(){
34538         accessList.sort(sortDialogs);
34539         var seed = Roo.DialogManager.zseed;
34540         for(var i = 0, len = accessList.length; i < len; i++){
34541             var dlg = accessList[i];
34542             if(dlg){
34543                 dlg.setZIndex(seed + (i*10));
34544             }
34545         }
34546     };
34547
34548     return {
34549         /**
34550          * The starting z-index for BasicDialogs (defaults to 9000)
34551          * @type Number The z-index value
34552          */
34553         zseed : 9000,
34554
34555         // private
34556         register : function(dlg){
34557             list[dlg.id] = dlg;
34558             accessList.push(dlg);
34559         },
34560
34561         // private
34562         unregister : function(dlg){
34563             delete list[dlg.id];
34564             var i=0;
34565             var len=0;
34566             if(!accessList.indexOf){
34567                 for(  i = 0, len = accessList.length; i < len; i++){
34568                     if(accessList[i] == dlg){
34569                         accessList.splice(i, 1);
34570                         return;
34571                     }
34572                 }
34573             }else{
34574                  i = accessList.indexOf(dlg);
34575                 if(i != -1){
34576                     accessList.splice(i, 1);
34577                 }
34578             }
34579         },
34580
34581         /**
34582          * Gets a registered dialog by id
34583          * @param {String/Object} id The id of the dialog or a dialog
34584          * @return {Roo.BasicDialog} this
34585          */
34586         get : function(id){
34587             return typeof id == "object" ? id : list[id];
34588         },
34589
34590         /**
34591          * Brings the specified dialog to the front
34592          * @param {String/Object} dlg The id of the dialog or a dialog
34593          * @return {Roo.BasicDialog} this
34594          */
34595         bringToFront : function(dlg){
34596             dlg = this.get(dlg);
34597             if(dlg != front){
34598                 front = dlg;
34599                 dlg._lastAccess = new Date().getTime();
34600                 orderDialogs();
34601             }
34602             return dlg;
34603         },
34604
34605         /**
34606          * Sends the specified dialog to the back
34607          * @param {String/Object} dlg The id of the dialog or a dialog
34608          * @return {Roo.BasicDialog} this
34609          */
34610         sendToBack : function(dlg){
34611             dlg = this.get(dlg);
34612             dlg._lastAccess = -(new Date().getTime());
34613             orderDialogs();
34614             return dlg;
34615         },
34616
34617         /**
34618          * Hides all dialogs
34619          */
34620         hideAll : function(){
34621             for(var id in list){
34622                 if(list[id] && typeof list[id] != "function" && list[id].isVisible()){
34623                     list[id].hide();
34624                 }
34625             }
34626         }
34627     };
34628 }();
34629
34630 /**
34631  * @class Roo.LayoutDialog
34632  * @extends Roo.BasicDialog
34633  * @children Roo.ContentPanel
34634  * @parent builder none
34635  * Dialog which provides adjustments for working with a layout in a Dialog.
34636  * Add your necessary layout config options to the dialog's config.<br>
34637  * Example usage (including a nested layout):
34638  * <pre><code>
34639 if(!dialog){
34640     dialog = new Roo.LayoutDialog("download-dlg", {
34641         modal: true,
34642         width:600,
34643         height:450,
34644         shadow:true,
34645         minWidth:500,
34646         minHeight:350,
34647         autoTabs:true,
34648         proxyDrag:true,
34649         // layout config merges with the dialog config
34650         center:{
34651             tabPosition: "top",
34652             alwaysShowTabs: true
34653         }
34654     });
34655     dialog.addKeyListener(27, dialog.hide, dialog);
34656     dialog.setDefaultButton(dialog.addButton("Close", dialog.hide, dialog));
34657     dialog.addButton("Build It!", this.getDownload, this);
34658
34659     // we can even add nested layouts
34660     var innerLayout = new Roo.BorderLayout("dl-inner", {
34661         east: {
34662             initialSize: 200,
34663             autoScroll:true,
34664             split:true
34665         },
34666         center: {
34667             autoScroll:true
34668         }
34669     });
34670     innerLayout.beginUpdate();
34671     innerLayout.add("east", new Roo.ContentPanel("dl-details"));
34672     innerLayout.add("center", new Roo.ContentPanel("selection-panel"));
34673     innerLayout.endUpdate(true);
34674
34675     var layout = dialog.getLayout();
34676     layout.beginUpdate();
34677     layout.add("center", new Roo.ContentPanel("standard-panel",
34678                         {title: "Download the Source", fitToFrame:true}));
34679     layout.add("center", new Roo.NestedLayoutPanel(innerLayout,
34680                {title: "Build your own roo.js"}));
34681     layout.getRegion("center").showPanel(sp);
34682     layout.endUpdate();
34683 }
34684 </code></pre>
34685     * @constructor
34686     * @param {String/HTMLElement/Roo.Element} el The id of or container element, or config
34687     * @param {Object} config configuration options
34688   */
34689 Roo.LayoutDialog = function(el, cfg){
34690     
34691     var config=  cfg;
34692     if (typeof(cfg) == 'undefined') {
34693         config = Roo.apply({}, el);
34694         // not sure why we use documentElement here.. - it should always be body.
34695         // IE7 borks horribly if we use documentElement.
34696         // webkit also does not like documentElement - it creates a body element...
34697         el = Roo.get( document.body || document.documentElement ).createChild();
34698         //config.autoCreate = true;
34699     }
34700     
34701     
34702     config.autoTabs = false;
34703     Roo.LayoutDialog.superclass.constructor.call(this, el, config);
34704     this.body.setStyle({overflow:"hidden", position:"relative"});
34705     this.layout = new Roo.BorderLayout(this.body.dom, config);
34706     this.layout.monitorWindowResize = false;
34707     this.el.addClass("x-dlg-auto-layout");
34708     // fix case when center region overwrites center function
34709     this.center = Roo.BasicDialog.prototype.center;
34710     this.on("show", this.layout.layout, this.layout, true);
34711     if (config.items) {
34712         var xitems = config.items;
34713         delete config.items;
34714         Roo.each(xitems, this.addxtype, this);
34715     }
34716     
34717     
34718 };
34719 Roo.extend(Roo.LayoutDialog, Roo.BasicDialog, {
34720     
34721     
34722     /**
34723      * @cfg {Roo.LayoutRegion} east  
34724      */
34725     /**
34726      * @cfg {Roo.LayoutRegion} west
34727      */
34728     /**
34729      * @cfg {Roo.LayoutRegion} south
34730      */
34731     /**
34732      * @cfg {Roo.LayoutRegion} north
34733      */
34734     /**
34735      * @cfg {Roo.LayoutRegion} center
34736      */
34737     /**
34738      * @cfg {Roo.Button} buttons[]  Bottom buttons..
34739      */
34740     
34741     
34742     /**
34743      * Ends update of the layout <strike>and resets display to none</strike>. Use standard beginUpdate/endUpdate on the layout.
34744      * @deprecated
34745      */
34746     endUpdate : function(){
34747         this.layout.endUpdate();
34748     },
34749
34750     /**
34751      * Begins an update of the layout <strike>and sets display to block and visibility to hidden</strike>. Use standard beginUpdate/endUpdate on the layout.
34752      *  @deprecated
34753      */
34754     beginUpdate : function(){
34755         this.layout.beginUpdate();
34756     },
34757
34758     /**
34759      * Get the BorderLayout for this dialog
34760      * @return {Roo.BorderLayout}
34761      */
34762     getLayout : function(){
34763         return this.layout;
34764     },
34765
34766     showEl : function(){
34767         Roo.LayoutDialog.superclass.showEl.apply(this, arguments);
34768         if(Roo.isIE7){
34769             this.layout.layout();
34770         }
34771     },
34772
34773     // private
34774     // Use the syncHeightBeforeShow config option to control this automatically
34775     syncBodyHeight : function(){
34776         Roo.LayoutDialog.superclass.syncBodyHeight.call(this);
34777         if(this.layout){this.layout.layout();}
34778     },
34779     
34780       /**
34781      * Add an xtype element (actually adds to the layout.)
34782      * @return {Object} xdata xtype object data.
34783      */
34784     
34785     addxtype : function(c) {
34786         return this.layout.addxtype(c);
34787     }
34788 });/*
34789  * Based on:
34790  * Ext JS Library 1.1.1
34791  * Copyright(c) 2006-2007, Ext JS, LLC.
34792  *
34793  * Originally Released Under LGPL - original licence link has changed is not relivant.
34794  *
34795  * Fork - LGPL
34796  * <script type="text/javascript">
34797  */
34798  
34799 /**
34800  * @class Roo.MessageBox
34801  * @static
34802  * Utility class for generating different styles of message boxes.  The alias Roo.Msg can also be used.
34803  * Example usage:
34804  *<pre><code>
34805 // Basic alert:
34806 Roo.Msg.alert('Status', 'Changes saved successfully.');
34807
34808 // Prompt for user data:
34809 Roo.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
34810     if (btn == 'ok'){
34811         // process text value...
34812     }
34813 });
34814
34815 // Show a dialog using config options:
34816 Roo.Msg.show({
34817    title:'Save Changes?',
34818    msg: 'Your are closing a tab that has unsaved changes. Would you like to save your changes?',
34819    buttons: Roo.Msg.YESNOCANCEL,
34820    fn: processResult,
34821    animEl: 'elId'
34822 });
34823 </code></pre>
34824  * @static
34825  */
34826 Roo.MessageBox = function(){
34827     var dlg, opt, mask, waitTimer;
34828     var bodyEl, msgEl, textboxEl, textareaEl, progressEl, pp;
34829     var buttons, activeTextEl, bwidth;
34830
34831     // private
34832     var handleButton = function(button){
34833         dlg.hide();
34834         Roo.callback(opt.fn, opt.scope||window, [button, activeTextEl.dom.value], 1);
34835     };
34836
34837     // private
34838     var handleHide = function(){
34839         if(opt && opt.cls){
34840             dlg.el.removeClass(opt.cls);
34841         }
34842         if(waitTimer){
34843             Roo.TaskMgr.stop(waitTimer);
34844             waitTimer = null;
34845         }
34846     };
34847
34848     // private
34849     var updateButtons = function(b){
34850         var width = 0;
34851         if(!b){
34852             buttons["ok"].hide();
34853             buttons["cancel"].hide();
34854             buttons["yes"].hide();
34855             buttons["no"].hide();
34856             dlg.footer.dom.style.display = 'none';
34857             return width;
34858         }
34859         dlg.footer.dom.style.display = '';
34860         for(var k in buttons){
34861             if(typeof buttons[k] != "function"){
34862                 if(b[k]){
34863                     buttons[k].show();
34864                     buttons[k].setText(typeof b[k] == "string" ? b[k] : Roo.MessageBox.buttonText[k]);
34865                     width += buttons[k].el.getWidth()+15;
34866                 }else{
34867                     buttons[k].hide();
34868                 }
34869             }
34870         }
34871         return width;
34872     };
34873
34874     // private
34875     var handleEsc = function(d, k, e){
34876         if(opt && opt.closable !== false){
34877             dlg.hide();
34878         }
34879         if(e){
34880             e.stopEvent();
34881         }
34882     };
34883
34884     return {
34885         /**
34886          * Returns a reference to the underlying {@link Roo.BasicDialog} element
34887          * @return {Roo.BasicDialog} The BasicDialog element
34888          */
34889         getDialog : function(){
34890            if(!dlg){
34891                 dlg = new Roo.BasicDialog("x-msg-box", {
34892                     autoCreate : true,
34893                     shadow: true,
34894                     draggable: true,
34895                     resizable:false,
34896                     constraintoviewport:false,
34897                     fixedcenter:true,
34898                     collapsible : false,
34899                     shim:true,
34900                     modal: true,
34901                     width:400, height:100,
34902                     buttonAlign:"center",
34903                     closeClick : function(){
34904                         if(opt && opt.buttons && opt.buttons.no && !opt.buttons.cancel){
34905                             handleButton("no");
34906                         }else{
34907                             handleButton("cancel");
34908                         }
34909                     }
34910                 });
34911               
34912                 dlg.on("hide", handleHide);
34913                 mask = dlg.mask;
34914                 dlg.addKeyListener(27, handleEsc);
34915                 buttons = {};
34916                 var bt = this.buttonText;
34917                 buttons["ok"] = dlg.addButton(bt["ok"], handleButton.createCallback("ok"));
34918                 buttons["yes"] = dlg.addButton(bt["yes"], handleButton.createCallback("yes"));
34919                 buttons["no"] = dlg.addButton(bt["no"], handleButton.createCallback("no"));
34920                 buttons["cancel"] = dlg.addButton(bt["cancel"], handleButton.createCallback("cancel"));
34921                 bodyEl = dlg.body.createChild({
34922
34923                     html:'<span class="roo-mb-text"></span><br /><input type="text" class="roo-mb-input" /><textarea class="roo-mb-textarea"></textarea><div class="roo-mb-progress-wrap"><div class="roo-mb-progress"><div class="roo-mb-progress-bar">&#160;</div></div></div>'
34924                 });
34925                 msgEl = bodyEl.dom.firstChild;
34926                 textboxEl = Roo.get(bodyEl.dom.childNodes[2]);
34927                 textboxEl.enableDisplayMode();
34928                 textboxEl.addKeyListener([10,13], function(){
34929                     if(dlg.isVisible() && opt && opt.buttons){
34930                         if(opt.buttons.ok){
34931                             handleButton("ok");
34932                         }else if(opt.buttons.yes){
34933                             handleButton("yes");
34934                         }
34935                     }
34936                 });
34937                 textareaEl = Roo.get(bodyEl.dom.childNodes[3]);
34938                 textareaEl.enableDisplayMode();
34939                 progressEl = Roo.get(bodyEl.dom.childNodes[4]);
34940                 progressEl.enableDisplayMode();
34941                 var pf = progressEl.dom.firstChild;
34942                 if (pf) {
34943                     pp = Roo.get(pf.firstChild);
34944                     pp.setHeight(pf.offsetHeight);
34945                 }
34946                 
34947             }
34948             return dlg;
34949         },
34950
34951         /**
34952          * Updates the message box body text
34953          * @param {String} text (optional) Replaces the message box element's innerHTML with the specified string (defaults to
34954          * the XHTML-compliant non-breaking space character '&amp;#160;')
34955          * @return {Roo.MessageBox} This message box
34956          */
34957         updateText : function(text){
34958             if(!dlg.isVisible() && !opt.width){
34959                 dlg.resizeTo(this.maxWidth, 100); // resize first so content is never clipped from previous shows
34960             }
34961             msgEl.innerHTML = text || '&#160;';
34962       
34963             var cw =  Math.max(msgEl.offsetWidth, msgEl.parentNode.scrollWidth);
34964             //Roo.log("guesed size: " + JSON.stringify([cw,msgEl.offsetWidth, msgEl.parentNode.scrollWidth]));
34965             var w = Math.max(
34966                     Math.min(opt.width || cw , this.maxWidth), 
34967                     Math.max(opt.minWidth || this.minWidth, bwidth)
34968             );
34969             if(opt.prompt){
34970                 activeTextEl.setWidth(w);
34971             }
34972             if(dlg.isVisible()){
34973                 dlg.fixedcenter = false;
34974             }
34975             // to big, make it scroll. = But as usual stupid IE does not support
34976             // !important..
34977             
34978             if ( bodyEl.getHeight() > (Roo.lib.Dom.getViewHeight() - 100)) {
34979                 bodyEl.setHeight ( Roo.lib.Dom.getViewHeight() - 100 );
34980                 bodyEl.dom.style.overflowY = 'auto' + ( Roo.isIE ? '' : ' !important');
34981             } else {
34982                 bodyEl.dom.style.height = '';
34983                 bodyEl.dom.style.overflowY = '';
34984             }
34985             if (cw > w) {
34986                 bodyEl.dom.style.get = 'auto' + ( Roo.isIE ? '' : ' !important');
34987             } else {
34988                 bodyEl.dom.style.overflowX = '';
34989             }
34990             
34991             dlg.setContentSize(w, bodyEl.getHeight());
34992             if(dlg.isVisible()){
34993                 dlg.fixedcenter = true;
34994             }
34995             return this;
34996         },
34997
34998         /**
34999          * Updates a progress-style message box's text and progress bar.  Only relevant on message boxes
35000          * initiated via {@link Roo.MessageBox#progress} or by calling {@link Roo.MessageBox#show} with progress: true.
35001          * @param {Number} value Any number between 0 and 1 (e.g., .5)
35002          * @param {String} text (optional) If defined, the message box's body text is replaced with the specified string (defaults to undefined)
35003          * @return {Roo.MessageBox} This message box
35004          */
35005         updateProgress : function(value, text){
35006             if(text){
35007                 this.updateText(text);
35008             }
35009             if (pp) { // weird bug on my firefox - for some reason this is not defined
35010                 pp.setWidth(Math.floor(value*progressEl.dom.firstChild.offsetWidth));
35011             }
35012             return this;
35013         },        
35014
35015         /**
35016          * Returns true if the message box is currently displayed
35017          * @return {Boolean} True if the message box is visible, else false
35018          */
35019         isVisible : function(){
35020             return dlg && dlg.isVisible();  
35021         },
35022
35023         /**
35024          * Hides the message box if it is displayed
35025          */
35026         hide : function(){
35027             if(this.isVisible()){
35028                 dlg.hide();
35029             }  
35030         },
35031
35032         /**
35033          * Displays a new message box, or reinitializes an existing message box, based on the config options
35034          * passed in. All functions (e.g. prompt, alert, etc) on MessageBox call this function internally.
35035          * The following config object properties are supported:
35036          * <pre>
35037 Property    Type             Description
35038 ----------  ---------------  ------------------------------------------------------------------------------------
35039 animEl            String/Element   An id or Element from which the message box should animate as it opens and
35040                                    closes (defaults to undefined)
35041 buttons           Object/Boolean   A button config object (e.g., Roo.MessageBox.OKCANCEL or {ok:'Foo',
35042                                    cancel:'Bar'}), or false to not show any buttons (defaults to false)
35043 closable          Boolean          False to hide the top-right close button (defaults to true).  Note that
35044                                    progress and wait dialogs will ignore this property and always hide the
35045                                    close button as they can only be closed programmatically.
35046 cls               String           A custom CSS class to apply to the message box element
35047 defaultTextHeight Number           The default height in pixels of the message box's multiline textarea if
35048                                    displayed (defaults to 75)
35049 fn                Function         A callback function to execute after closing the dialog.  The arguments to the
35050                                    function will be btn (the name of the button that was clicked, if applicable,
35051                                    e.g. "ok"), and text (the value of the active text field, if applicable).
35052                                    Progress and wait dialogs will ignore this option since they do not respond to
35053                                    user actions and can only be closed programmatically, so any required function
35054                                    should be called by the same code after it closes the dialog.
35055 icon              String           A CSS class that provides a background image to be used as an icon for
35056                                    the dialog (e.g., Roo.MessageBox.WARNING or 'custom-class', defaults to '')
35057 maxWidth          Number           The maximum width in pixels of the message box (defaults to 600)
35058 minWidth          Number           The minimum width in pixels of the message box (defaults to 100)
35059 modal             Boolean          False to allow user interaction with the page while the message box is
35060                                    displayed (defaults to true)
35061 msg               String           A string that will replace the existing message box body text (defaults
35062                                    to the XHTML-compliant non-breaking space character '&#160;')
35063 multiline         Boolean          True to prompt the user to enter multi-line text (defaults to false)
35064 progress          Boolean          True to display a progress bar (defaults to false)
35065 progressText      String           The text to display inside the progress bar if progress = true (defaults to '')
35066 prompt            Boolean          True to prompt the user to enter single-line text (defaults to false)
35067 proxyDrag         Boolean          True to display a lightweight proxy while dragging (defaults to false)
35068 title             String           The title text
35069 value             String           The string value to set into the active textbox element if displayed
35070 wait              Boolean          True to display a progress bar (defaults to false)
35071 width             Number           The width of the dialog in pixels
35072 </pre>
35073          *
35074          * Example usage:
35075          * <pre><code>
35076 Roo.Msg.show({
35077    title: 'Address',
35078    msg: 'Please enter your address:',
35079    width: 300,
35080    buttons: Roo.MessageBox.OKCANCEL,
35081    multiline: true,
35082    fn: saveAddress,
35083    animEl: 'addAddressBtn'
35084 });
35085 </code></pre>
35086          * @param {Object} config Configuration options
35087          * @return {Roo.MessageBox} This message box
35088          */
35089         show : function(options)
35090         {
35091             
35092             // this causes nightmares if you show one dialog after another
35093             // especially on callbacks..
35094              
35095             if(this.isVisible()){
35096                 
35097                 this.hide();
35098                 Roo.log("[Roo.Messagebox] Show called while message displayed:" );
35099                 Roo.log("Old Dialog Message:" +  msgEl.innerHTML );
35100                 Roo.log("New Dialog Message:" +  options.msg )
35101                 //this.alert("ERROR", "Multiple dialogs where displayed at the same time");
35102                 //throw "Roo.MessageBox ERROR : Multiple dialogs where displayed at the same time";
35103                 
35104             }
35105             var d = this.getDialog();
35106             opt = options;
35107             d.setTitle(opt.title || "&#160;");
35108             d.close.setDisplayed(opt.closable !== false);
35109             activeTextEl = textboxEl;
35110             opt.prompt = opt.prompt || (opt.multiline ? true : false);
35111             if(opt.prompt){
35112                 if(opt.multiline){
35113                     textboxEl.hide();
35114                     textareaEl.show();
35115                     textareaEl.setHeight(typeof opt.multiline == "number" ?
35116                         opt.multiline : this.defaultTextHeight);
35117                     activeTextEl = textareaEl;
35118                 }else{
35119                     textboxEl.show();
35120                     textareaEl.hide();
35121                 }
35122             }else{
35123                 textboxEl.hide();
35124                 textareaEl.hide();
35125             }
35126             progressEl.setDisplayed(opt.progress === true);
35127             this.updateProgress(0);
35128             activeTextEl.dom.value = opt.value || "";
35129             if(opt.prompt){
35130                 dlg.setDefaultButton(activeTextEl);
35131             }else{
35132                 var bs = opt.buttons;
35133                 var db = null;
35134                 if(bs && bs.ok){
35135                     db = buttons["ok"];
35136                 }else if(bs && bs.yes){
35137                     db = buttons["yes"];
35138                 }
35139                 dlg.setDefaultButton(db);
35140             }
35141             bwidth = updateButtons(opt.buttons);
35142             this.updateText(opt.msg);
35143             if(opt.cls){
35144                 d.el.addClass(opt.cls);
35145             }
35146             d.proxyDrag = opt.proxyDrag === true;
35147             d.modal = opt.modal !== false;
35148             d.mask = opt.modal !== false ? mask : false;
35149             if(!d.isVisible()){
35150                 // force it to the end of the z-index stack so it gets a cursor in FF
35151                 document.body.appendChild(dlg.el.dom);
35152                 d.animateTarget = null;
35153                 d.show(options.animEl);
35154             }
35155             dlg.toFront();
35156             return this;
35157         },
35158
35159         /**
35160          * Displays a message box with a progress bar.  This message box has no buttons and is not closeable by
35161          * the user.  You are responsible for updating the progress bar as needed via {@link Roo.MessageBox#updateProgress}
35162          * and closing the message box when the process is complete.
35163          * @param {String} title The title bar text
35164          * @param {String} msg The message box body text
35165          * @return {Roo.MessageBox} This message box
35166          */
35167         progress : function(title, msg){
35168             this.show({
35169                 title : title,
35170                 msg : msg,
35171                 buttons: false,
35172                 progress:true,
35173                 closable:false,
35174                 minWidth: this.minProgressWidth,
35175                 modal : true
35176             });
35177             return this;
35178         },
35179
35180         /**
35181          * Displays a standard read-only message box with an OK button (comparable to the basic JavaScript Window.alert).
35182          * If a callback function is passed it will be called after the user clicks the button, and the
35183          * id of the button that was clicked will be passed as the only parameter to the callback
35184          * (could also be the top-right close button).
35185          * @param {String} title The title bar text
35186          * @param {String} msg The message box body text
35187          * @param {Function} fn (optional) The callback function invoked after the message box is closed
35188          * @param {Object} scope (optional) The scope of the callback function
35189          * @return {Roo.MessageBox} This message box
35190          */
35191         alert : function(title, msg, fn, scope){
35192             this.show({
35193                 title : title,
35194                 msg : msg,
35195                 buttons: this.OK,
35196                 fn: fn,
35197                 scope : scope,
35198                 modal : true
35199             });
35200             return this;
35201         },
35202
35203         /**
35204          * Displays a message box with an infinitely auto-updating progress bar.  This can be used to block user
35205          * interaction while waiting for a long-running process to complete that does not have defined intervals.
35206          * You are responsible for closing the message box when the process is complete.
35207          * @param {String} msg The message box body text
35208          * @param {String} title (optional) The title bar text
35209          * @return {Roo.MessageBox} This message box
35210          */
35211         wait : function(msg, title){
35212             this.show({
35213                 title : title,
35214                 msg : msg,
35215                 buttons: false,
35216                 closable:false,
35217                 progress:true,
35218                 modal:true,
35219                 width:300,
35220                 wait:true
35221             });
35222             waitTimer = Roo.TaskMgr.start({
35223                 run: function(i){
35224                     Roo.MessageBox.updateProgress(((((i+20)%20)+1)*5)*.01);
35225                 },
35226                 interval: 1000
35227             });
35228             return this;
35229         },
35230
35231         /**
35232          * Displays a confirmation message box with Yes and No buttons (comparable to JavaScript's Window.confirm).
35233          * If a callback function is passed it will be called after the user clicks either button, and the id of the
35234          * button that was clicked will be passed as the only parameter to the callback (could also be the top-right close button).
35235          * @param {String} title The title bar text
35236          * @param {String} msg The message box body text
35237          * @param {Function} fn (optional) The callback function invoked after the message box is closed
35238          * @param {Object} scope (optional) The scope of the callback function
35239          * @return {Roo.MessageBox} This message box
35240          */
35241         confirm : function(title, msg, fn, scope){
35242             this.show({
35243                 title : title,
35244                 msg : msg,
35245                 buttons: this.YESNO,
35246                 fn: fn,
35247                 scope : scope,
35248                 modal : true
35249             });
35250             return this;
35251         },
35252
35253         /**
35254          * Displays a message box with OK and Cancel buttons prompting the user to enter some text (comparable to
35255          * JavaScript's Window.prompt).  The prompt can be a single-line or multi-line textbox.  If a callback function
35256          * is passed it will be called after the user clicks either button, and the id of the button that was clicked
35257          * (could also be the top-right close button) and the text that was entered will be passed as the two
35258          * parameters to the callback.
35259          * @param {String} title The title bar text
35260          * @param {String} msg The message box body text
35261          * @param {Function} fn (optional) The callback function invoked after the message box is closed
35262          * @param {Object} scope (optional) The scope of the callback function
35263          * @param {Boolean/Number} multiline (optional) True to create a multiline textbox using the defaultTextHeight
35264          * property, or the height in pixels to create the textbox (defaults to false / single-line)
35265          * @return {Roo.MessageBox} This message box
35266          */
35267         prompt : function(title, msg, fn, scope, multiline){
35268             this.show({
35269                 title : title,
35270                 msg : msg,
35271                 buttons: this.OKCANCEL,
35272                 fn: fn,
35273                 minWidth:250,
35274                 scope : scope,
35275                 prompt:true,
35276                 multiline: multiline,
35277                 modal : true
35278             });
35279             return this;
35280         },
35281
35282         /**
35283          * Button config that displays a single OK button
35284          * @type Object
35285          */
35286         OK : {ok:true},
35287         /**
35288          * Button config that displays Yes and No buttons
35289          * @type Object
35290          */
35291         YESNO : {yes:true, no:true},
35292         /**
35293          * Button config that displays OK and Cancel buttons
35294          * @type Object
35295          */
35296         OKCANCEL : {ok:true, cancel:true},
35297         /**
35298          * Button config that displays Yes, No and Cancel buttons
35299          * @type Object
35300          */
35301         YESNOCANCEL : {yes:true, no:true, cancel:true},
35302
35303         /**
35304          * The default height in pixels of the message box's multiline textarea if displayed (defaults to 75)
35305          * @type Number
35306          */
35307         defaultTextHeight : 75,
35308         /**
35309          * The maximum width in pixels of the message box (defaults to 600)
35310          * @type Number
35311          */
35312         maxWidth : 600,
35313         /**
35314          * The minimum width in pixels of the message box (defaults to 100)
35315          * @type Number
35316          */
35317         minWidth : 100,
35318         /**
35319          * The minimum width in pixels of the message box if it is a progress-style dialog.  This is useful
35320          * for setting a different minimum width than text-only dialogs may need (defaults to 250)
35321          * @type Number
35322          */
35323         minProgressWidth : 250,
35324         /**
35325          * An object containing the default button text strings that can be overriden for localized language support.
35326          * Supported properties are: ok, cancel, yes and no.
35327          * Customize the default text like so: Roo.MessageBox.buttonText.yes = "S?";
35328          * @type Object
35329          */
35330         buttonText : {
35331             ok : "OK",
35332             cancel : "Cancel",
35333             yes : "Yes",
35334             no : "No"
35335         }
35336     };
35337 }();
35338
35339 /**
35340  * Shorthand for {@link Roo.MessageBox}
35341  */
35342 Roo.Msg = Roo.MessageBox;/*
35343  * Based on:
35344  * Ext JS Library 1.1.1
35345  * Copyright(c) 2006-2007, Ext JS, LLC.
35346  *
35347  * Originally Released Under LGPL - original licence link has changed is not relivant.
35348  *
35349  * Fork - LGPL
35350  * <script type="text/javascript">
35351  */
35352 /**
35353  * @class Roo.QuickTips
35354  * Provides attractive and customizable tooltips for any element.
35355  * @static
35356  */
35357 Roo.QuickTips = function(){
35358     var el, tipBody, tipBodyText, tipTitle, tm, cfg, close, tagEls = {}, esc, removeCls = null, bdLeft, bdRight;
35359     var ce, bd, xy, dd;
35360     var visible = false, disabled = true, inited = false;
35361     var showProc = 1, hideProc = 1, dismissProc = 1, locks = [];
35362     
35363     var onOver = function(e){
35364         if(disabled){
35365             return;
35366         }
35367         var t = e.getTarget();
35368         if(!t || t.nodeType !== 1 || t == document || t == document.body){
35369             return;
35370         }
35371         if(ce && t == ce.el){
35372             clearTimeout(hideProc);
35373             return;
35374         }
35375         if(t && tagEls[t.id]){
35376             tagEls[t.id].el = t;
35377             showProc = show.defer(tm.showDelay, tm, [tagEls[t.id]]);
35378             return;
35379         }
35380         var ttp, et = Roo.fly(t);
35381         var ns = cfg.namespace;
35382         if(tm.interceptTitles && t.title){
35383             ttp = t.title;
35384             t.qtip = ttp;
35385             t.removeAttribute("title");
35386             e.preventDefault();
35387         }else{
35388             ttp = t.qtip || et.getAttributeNS(ns, cfg.attribute) || et.getAttributeNS(cfg.alt_namespace, cfg.attribute) ;
35389         }
35390         if(ttp){
35391             showProc = show.defer(tm.showDelay, tm, [{
35392                 el: t, 
35393                 text: ttp.replace(/\\n/g,'<br/>'),
35394                 width: et.getAttributeNS(ns, cfg.width),
35395                 autoHide: et.getAttributeNS(ns, cfg.hide) != "user",
35396                 title: et.getAttributeNS(ns, cfg.title),
35397                     cls: et.getAttributeNS(ns, cfg.cls)
35398             }]);
35399         }
35400     };
35401     
35402     var onOut = function(e){
35403         clearTimeout(showProc);
35404         var t = e.getTarget();
35405         if(t && ce && ce.el == t && (tm.autoHide && ce.autoHide !== false)){
35406             hideProc = setTimeout(hide, tm.hideDelay);
35407         }
35408     };
35409     
35410     var onMove = function(e){
35411         if(disabled){
35412             return;
35413         }
35414         xy = e.getXY();
35415         xy[1] += 18;
35416         if(tm.trackMouse && ce){
35417             el.setXY(xy);
35418         }
35419     };
35420     
35421     var onDown = function(e){
35422         clearTimeout(showProc);
35423         clearTimeout(hideProc);
35424         if(!e.within(el)){
35425             if(tm.hideOnClick){
35426                 hide();
35427                 tm.disable();
35428                 tm.enable.defer(100, tm);
35429             }
35430         }
35431     };
35432     
35433     var getPad = function(){
35434         return 2;//bdLeft.getPadding('l')+bdRight.getPadding('r');
35435     };
35436
35437     var show = function(o){
35438         if(disabled){
35439             return;
35440         }
35441         clearTimeout(dismissProc);
35442         ce = o;
35443         if(removeCls){ // in case manually hidden
35444             el.removeClass(removeCls);
35445             removeCls = null;
35446         }
35447         if(ce.cls){
35448             el.addClass(ce.cls);
35449             removeCls = ce.cls;
35450         }
35451         if(ce.title){
35452             tipTitle.update(ce.title);
35453             tipTitle.show();
35454         }else{
35455             tipTitle.update('');
35456             tipTitle.hide();
35457         }
35458         el.dom.style.width  = tm.maxWidth+'px';
35459         //tipBody.dom.style.width = '';
35460         tipBodyText.update(o.text);
35461         var p = getPad(), w = ce.width;
35462         if(!w){
35463             var td = tipBodyText.dom;
35464             var aw = Math.max(td.offsetWidth, td.clientWidth, td.scrollWidth);
35465             if(aw > tm.maxWidth){
35466                 w = tm.maxWidth;
35467             }else if(aw < tm.minWidth){
35468                 w = tm.minWidth;
35469             }else{
35470                 w = aw;
35471             }
35472         }
35473         //tipBody.setWidth(w);
35474         el.setWidth(parseInt(w, 10) + p);
35475         if(ce.autoHide === false){
35476             close.setDisplayed(true);
35477             if(dd){
35478                 dd.unlock();
35479             }
35480         }else{
35481             close.setDisplayed(false);
35482             if(dd){
35483                 dd.lock();
35484             }
35485         }
35486         if(xy){
35487             el.avoidY = xy[1]-18;
35488             el.setXY(xy);
35489         }
35490         if(tm.animate){
35491             el.setOpacity(.1);
35492             el.setStyle("visibility", "visible");
35493             el.fadeIn({callback: afterShow});
35494         }else{
35495             afterShow();
35496         }
35497     };
35498     
35499     var afterShow = function(){
35500         if(ce){
35501             el.show();
35502             esc.enable();
35503             if(tm.autoDismiss && ce.autoHide !== false){
35504                 dismissProc = setTimeout(hide, tm.autoDismissDelay);
35505             }
35506         }
35507     };
35508     
35509     var hide = function(noanim){
35510         clearTimeout(dismissProc);
35511         clearTimeout(hideProc);
35512         ce = null;
35513         if(el.isVisible()){
35514             esc.disable();
35515             if(noanim !== true && tm.animate){
35516                 el.fadeOut({callback: afterHide});
35517             }else{
35518                 afterHide();
35519             } 
35520         }
35521     };
35522     
35523     var afterHide = function(){
35524         el.hide();
35525         if(removeCls){
35526             el.removeClass(removeCls);
35527             removeCls = null;
35528         }
35529     };
35530     
35531     return {
35532         /**
35533         * @cfg {Number} minWidth
35534         * The minimum width of the quick tip (defaults to 40)
35535         */
35536        minWidth : 40,
35537         /**
35538         * @cfg {Number} maxWidth
35539         * The maximum width of the quick tip (defaults to 300)
35540         */
35541        maxWidth : 300,
35542         /**
35543         * @cfg {Boolean} interceptTitles
35544         * True to automatically use the element's DOM title value if available (defaults to false)
35545         */
35546        interceptTitles : false,
35547         /**
35548         * @cfg {Boolean} trackMouse
35549         * True to have the quick tip follow the mouse as it moves over the target element (defaults to false)
35550         */
35551        trackMouse : false,
35552         /**
35553         * @cfg {Boolean} hideOnClick
35554         * True to hide the quick tip if the user clicks anywhere in the document (defaults to true)
35555         */
35556        hideOnClick : true,
35557         /**
35558         * @cfg {Number} showDelay
35559         * Delay in milliseconds before the quick tip displays after the mouse enters the target element (defaults to 500)
35560         */
35561        showDelay : 500,
35562         /**
35563         * @cfg {Number} hideDelay
35564         * Delay in milliseconds before the quick tip hides when autoHide = true (defaults to 200)
35565         */
35566        hideDelay : 200,
35567         /**
35568         * @cfg {Boolean} autoHide
35569         * True to automatically hide the quick tip after the mouse exits the target element (defaults to true).
35570         * Used in conjunction with hideDelay.
35571         */
35572        autoHide : true,
35573         /**
35574         * @cfg {Boolean}
35575         * True to automatically hide the quick tip after a set period of time, regardless of the user's actions
35576         * (defaults to true).  Used in conjunction with autoDismissDelay.
35577         */
35578        autoDismiss : true,
35579         /**
35580         * @cfg {Number}
35581         * Delay in milliseconds before the quick tip hides when autoDismiss = true (defaults to 5000)
35582         */
35583        autoDismissDelay : 5000,
35584        /**
35585         * @cfg {Boolean} animate
35586         * True to turn on fade animation. Defaults to false (ClearType/scrollbar flicker issues in IE7).
35587         */
35588        animate : false,
35589
35590        /**
35591         * @cfg {String} title
35592         * Title text to display (defaults to '').  This can be any valid HTML markup.
35593         */
35594         title: '',
35595        /**
35596         * @cfg {String} text
35597         * Body text to display (defaults to '').  This can be any valid HTML markup.
35598         */
35599         text : '',
35600        /**
35601         * @cfg {String} cls
35602         * A CSS class to apply to the base quick tip element (defaults to '').
35603         */
35604         cls : '',
35605        /**
35606         * @cfg {Number} width
35607         * Width in pixels of the quick tip (defaults to auto).  Width will be ignored if it exceeds the bounds of
35608         * minWidth or maxWidth.
35609         */
35610         width : null,
35611
35612     /**
35613      * Initialize and enable QuickTips for first use.  This should be called once before the first attempt to access
35614      * or display QuickTips in a page.
35615      */
35616        init : function(){
35617           tm = Roo.QuickTips;
35618           cfg = tm.tagConfig;
35619           if(!inited){
35620               if(!Roo.isReady){ // allow calling of init() before onReady
35621                   Roo.onReady(Roo.QuickTips.init, Roo.QuickTips);
35622                   return;
35623               }
35624               el = new Roo.Layer({cls:"x-tip", shadow:"drop", shim: true, constrain:true, shadowOffset:4});
35625               el.fxDefaults = {stopFx: true};
35626               // maximum custom styling
35627               //el.update('<div class="x-tip-top-left"><div class="x-tip-top-right"><div class="x-tip-top"></div></div></div><div class="x-tip-bd-left"><div class="x-tip-bd-right"><div class="x-tip-bd"><div class="x-tip-close"></div><h3></h3><div class="x-tip-bd-inner"></div><div class="x-clear"></div></div></div></div><div class="x-tip-ft-left"><div class="x-tip-ft-right"><div class="x-tip-ft"></div></div></div>');
35628               el.update('<div class="x-tip-bd"><div class="x-tip-close"></div><h3></h3><div class="x-tip-bd-inner"></div><div class="x-clear"></div></div>');              
35629               tipTitle = el.child('h3');
35630               tipTitle.enableDisplayMode("block");
35631               tipBody = el.child('div.x-tip-bd');
35632               tipBodyText = el.child('div.x-tip-bd-inner');
35633               //bdLeft = el.child('div.x-tip-bd-left');
35634               //bdRight = el.child('div.x-tip-bd-right');
35635               close = el.child('div.x-tip-close');
35636               close.enableDisplayMode("block");
35637               close.on("click", hide);
35638               var d = Roo.get(document);
35639               d.on("mousedown", onDown);
35640               d.on("mouseover", onOver);
35641               d.on("mouseout", onOut);
35642               d.on("mousemove", onMove);
35643               esc = d.addKeyListener(27, hide);
35644               esc.disable();
35645               if(Roo.dd.DD){
35646                   dd = el.initDD("default", null, {
35647                       onDrag : function(){
35648                           el.sync();  
35649                       }
35650                   });
35651                   dd.setHandleElId(tipTitle.id);
35652                   dd.lock();
35653               }
35654               inited = true;
35655           }
35656           this.enable(); 
35657        },
35658
35659     /**
35660      * Configures a new quick tip instance and assigns it to a target element.  The following config options
35661      * are supported:
35662      * <pre>
35663 Property    Type                   Description
35664 ----------  ---------------------  ------------------------------------------------------------------------
35665 target      Element/String/Array   An Element, id or array of ids that this quick tip should be tied to
35666      * </ul>
35667      * @param {Object} config The config object
35668      */
35669        register : function(config){
35670            var cs = config instanceof Array ? config : arguments;
35671            for(var i = 0, len = cs.length; i < len; i++) {
35672                var c = cs[i];
35673                var target = c.target;
35674                if(target){
35675                    if(target instanceof Array){
35676                        for(var j = 0, jlen = target.length; j < jlen; j++){
35677                            tagEls[target[j]] = c;
35678                        }
35679                    }else{
35680                        tagEls[typeof target == 'string' ? target : Roo.id(target)] = c;
35681                    }
35682                }
35683            }
35684        },
35685
35686     /**
35687      * Removes this quick tip from its element and destroys it.
35688      * @param {String/HTMLElement/Element} el The element from which the quick tip is to be removed.
35689      */
35690        unregister : function(el){
35691            delete tagEls[Roo.id(el)];
35692        },
35693
35694     /**
35695      * Enable this quick tip.
35696      */
35697        enable : function(){
35698            if(inited && disabled){
35699                locks.pop();
35700                if(locks.length < 1){
35701                    disabled = false;
35702                }
35703            }
35704        },
35705
35706     /**
35707      * Disable this quick tip.
35708      */
35709        disable : function(){
35710           disabled = true;
35711           clearTimeout(showProc);
35712           clearTimeout(hideProc);
35713           clearTimeout(dismissProc);
35714           if(ce){
35715               hide(true);
35716           }
35717           locks.push(1);
35718        },
35719
35720     /**
35721      * Returns true if the quick tip is enabled, else false.
35722      */
35723        isEnabled : function(){
35724             return !disabled;
35725        },
35726
35727         // private
35728        tagConfig : {
35729            namespace : "roo", // was ext?? this may break..
35730            alt_namespace : "ext",
35731            attribute : "qtip",
35732            width : "width",
35733            target : "target",
35734            title : "qtitle",
35735            hide : "hide",
35736            cls : "qclass"
35737        }
35738    };
35739 }();
35740
35741 // backwards compat
35742 Roo.QuickTips.tips = Roo.QuickTips.register;/*
35743  * Based on:
35744  * Ext JS Library 1.1.1
35745  * Copyright(c) 2006-2007, Ext JS, LLC.
35746  *
35747  * Originally Released Under LGPL - original licence link has changed is not relivant.
35748  *
35749  * Fork - LGPL
35750  * <script type="text/javascript">
35751  */
35752  
35753
35754 /**
35755  * @class Roo.tree.TreePanel
35756  * @extends Roo.data.Tree
35757  * @cfg {Roo.tree.TreeNode} root The root node
35758  * @cfg {Boolean} rootVisible false to hide the root node (defaults to true)
35759  * @cfg {Boolean} lines false to disable tree lines (defaults to true)
35760  * @cfg {Boolean} enableDD true to enable drag and drop
35761  * @cfg {Boolean} enableDrag true to enable just drag
35762  * @cfg {Boolean} enableDrop true to enable just drop
35763  * @cfg {Object} dragConfig Custom config to pass to the {@link Roo.tree.TreeDragZone} instance
35764  * @cfg {Object} dropConfig Custom config to pass to the {@link Roo.tree.TreeDropZone} instance
35765  * @cfg {String} ddGroup The DD group this TreePanel belongs to
35766  * @cfg {String} ddAppendOnly True if the tree should only allow append drops (use for trees which are sorted)
35767  * @cfg {Boolean} ddScroll true to enable YUI body scrolling
35768  * @cfg {Boolean} containerScroll true to register this container with ScrollManager
35769  * @cfg {Boolean} hlDrop false to disable node highlight on drop (defaults to the value of Roo.enableFx)
35770  * @cfg {String} hlColor The color of the node highlight (defaults to C3DAF9)
35771  * @cfg {Boolean} animate true to enable animated expand/collapse (defaults to the value of Roo.enableFx)
35772  * @cfg {Boolean} singleExpand true if only 1 node per branch may be expanded
35773  * @cfg {Boolean} selModel A tree selection model to use with this TreePanel (defaults to a {@link Roo.tree.DefaultSelectionModel})
35774  * @cfg {Roo.tree.TreeLoader} loader A TreeLoader for use with this TreePanel
35775  * @cfg {Roo.tree.TreeEditor} editor The TreeEditor to display when clicked.
35776  * @cfg {String} pathSeparator The token used to separate sub-paths in path strings (defaults to '/')
35777  * @cfg {Function} renderer DEPRECATED - use TreeLoader:create event / Sets the rendering (formatting) function for the nodes. to return HTML markup for the tree view. The render function is called with  the following parameters:<ul><li>The {Object} The data for the node.</li></ul>
35778  * @cfg {Function} rendererTip DEPRECATED - use TreeLoader:create event / Sets the rendering (formatting) function for the nodes hovertip to return HTML markup for the tree view. The render function is called with  the following parameters:<ul><li>The {Object} The data for the node.</li></ul>
35779  * 
35780  * @constructor
35781  * @param {String/HTMLElement/Element} el The container element
35782  * @param {Object} config
35783  */
35784 Roo.tree.TreePanel = function(el, config){
35785     var root = false;
35786     var loader = false;
35787     if (config.root) {
35788         root = config.root;
35789         delete config.root;
35790     }
35791     if (config.loader) {
35792         loader = config.loader;
35793         delete config.loader;
35794     }
35795     
35796     Roo.apply(this, config);
35797     Roo.tree.TreePanel.superclass.constructor.call(this);
35798     this.el = Roo.get(el);
35799     this.el.addClass('x-tree');
35800     //console.log(root);
35801     if (root) {
35802         this.setRootNode( Roo.factory(root, Roo.tree));
35803     }
35804     if (loader) {
35805         this.loader = Roo.factory(loader, Roo.tree);
35806     }
35807    /**
35808     * Read-only. The id of the container element becomes this TreePanel's id.
35809     */
35810     this.id = this.el.id;
35811     this.addEvents({
35812         /**
35813         * @event beforeload
35814         * Fires before a node is loaded, return false to cancel
35815         * @param {Node} node The node being loaded
35816         */
35817         "beforeload" : true,
35818         /**
35819         * @event load
35820         * Fires when a node is loaded
35821         * @param {Node} node The node that was loaded
35822         */
35823         "load" : true,
35824         /**
35825         * @event textchange
35826         * Fires when the text for a node is changed
35827         * @param {Node} node The node
35828         * @param {String} text The new text
35829         * @param {String} oldText The old text
35830         */
35831         "textchange" : true,
35832         /**
35833         * @event beforeexpand
35834         * Fires before a node is expanded, return false to cancel.
35835         * @param {Node} node The node
35836         * @param {Boolean} deep
35837         * @param {Boolean} anim
35838         */
35839         "beforeexpand" : true,
35840         /**
35841         * @event beforecollapse
35842         * Fires before a node is collapsed, return false to cancel.
35843         * @param {Node} node The node
35844         * @param {Boolean} deep
35845         * @param {Boolean} anim
35846         */
35847         "beforecollapse" : true,
35848         /**
35849         * @event expand
35850         * Fires when a node is expanded
35851         * @param {Node} node The node
35852         */
35853         "expand" : true,
35854         /**
35855         * @event disabledchange
35856         * Fires when the disabled status of a node changes
35857         * @param {Node} node The node
35858         * @param {Boolean} disabled
35859         */
35860         "disabledchange" : true,
35861         /**
35862         * @event collapse
35863         * Fires when a node is collapsed
35864         * @param {Node} node The node
35865         */
35866         "collapse" : true,
35867         /**
35868         * @event beforeclick
35869         * Fires before click processing on a node. Return false to cancel the default action.
35870         * @param {Node} node The node
35871         * @param {Roo.EventObject} e The event object
35872         */
35873         "beforeclick":true,
35874         /**
35875         * @event checkchange
35876         * Fires when a node with a checkbox's checked property changes
35877         * @param {Node} this This node
35878         * @param {Boolean} checked
35879         */
35880         "checkchange":true,
35881         /**
35882         * @event click
35883         * Fires when a node is clicked
35884         * @param {Node} node The node
35885         * @param {Roo.EventObject} e The event object
35886         */
35887         "click":true,
35888         /**
35889         * @event dblclick
35890         * Fires when a node is double clicked
35891         * @param {Node} node The node
35892         * @param {Roo.EventObject} e The event object
35893         */
35894         "dblclick":true,
35895         /**
35896         * @event contextmenu
35897         * Fires when a node is right clicked
35898         * @param {Node} node The node
35899         * @param {Roo.EventObject} e The event object
35900         */
35901         "contextmenu":true,
35902         /**
35903         * @event beforechildrenrendered
35904         * Fires right before the child nodes for a node are rendered
35905         * @param {Node} node The node
35906         */
35907         "beforechildrenrendered":true,
35908         /**
35909         * @event startdrag
35910         * Fires when a node starts being dragged
35911         * @param {Roo.tree.TreePanel} this
35912         * @param {Roo.tree.TreeNode} node
35913         * @param {event} e The raw browser event
35914         */ 
35915        "startdrag" : true,
35916        /**
35917         * @event enddrag
35918         * Fires when a drag operation is complete
35919         * @param {Roo.tree.TreePanel} this
35920         * @param {Roo.tree.TreeNode} node
35921         * @param {event} e The raw browser event
35922         */
35923        "enddrag" : true,
35924        /**
35925         * @event dragdrop
35926         * Fires when a dragged node is dropped on a valid DD target
35927         * @param {Roo.tree.TreePanel} this
35928         * @param {Roo.tree.TreeNode} node
35929         * @param {DD} dd The dd it was dropped on
35930         * @param {event} e The raw browser event
35931         */
35932        "dragdrop" : true,
35933        /**
35934         * @event beforenodedrop
35935         * Fires when a DD object is dropped on a node in this tree for preprocessing. Return false to cancel the drop. The dropEvent
35936         * passed to handlers has the following properties:<br />
35937         * <ul style="padding:5px;padding-left:16px;">
35938         * <li>tree - The TreePanel</li>
35939         * <li>target - The node being targeted for the drop</li>
35940         * <li>data - The drag data from the drag source</li>
35941         * <li>point - The point of the drop - append, above or below</li>
35942         * <li>source - The drag source</li>
35943         * <li>rawEvent - Raw mouse event</li>
35944         * <li>dropNode - Drop node(s) provided by the source <b>OR</b> you can supply node(s)
35945         * to be inserted by setting them on this object.</li>
35946         * <li>cancel - Set this to true to cancel the drop.</li>
35947         * </ul>
35948         * @param {Object} dropEvent
35949         */
35950        "beforenodedrop" : true,
35951        /**
35952         * @event nodedrop
35953         * Fires after a DD object is dropped on a node in this tree. The dropEvent
35954         * passed to handlers has the following properties:<br />
35955         * <ul style="padding:5px;padding-left:16px;">
35956         * <li>tree - The TreePanel</li>
35957         * <li>target - The node being targeted for the drop</li>
35958         * <li>data - The drag data from the drag source</li>
35959         * <li>point - The point of the drop - append, above or below</li>
35960         * <li>source - The drag source</li>
35961         * <li>rawEvent - Raw mouse event</li>
35962         * <li>dropNode - Dropped node(s).</li>
35963         * </ul>
35964         * @param {Object} dropEvent
35965         */
35966        "nodedrop" : true,
35967         /**
35968         * @event nodedragover
35969         * Fires when a tree node is being targeted for a drag drop, return false to signal drop not allowed. The dragOverEvent
35970         * passed to handlers has the following properties:<br />
35971         * <ul style="padding:5px;padding-left:16px;">
35972         * <li>tree - The TreePanel</li>
35973         * <li>target - The node being targeted for the drop</li>
35974         * <li>data - The drag data from the drag source</li>
35975         * <li>point - The point of the drop - append, above or below</li>
35976         * <li>source - The drag source</li>
35977         * <li>rawEvent - Raw mouse event</li>
35978         * <li>dropNode - Drop node(s) provided by the source.</li>
35979         * <li>cancel - Set this to true to signal drop not allowed.</li>
35980         * </ul>
35981         * @param {Object} dragOverEvent
35982         */
35983        "nodedragover" : true,
35984        /**
35985         * @event appendnode
35986         * Fires when append node to the tree
35987         * @param {Roo.tree.TreePanel} this
35988         * @param {Roo.tree.TreeNode} node
35989         * @param {Number} index The index of the newly appended node
35990         */
35991        "appendnode" : true
35992         
35993     });
35994     if(this.singleExpand){
35995        this.on("beforeexpand", this.restrictExpand, this);
35996     }
35997     if (this.editor) {
35998         this.editor.tree = this;
35999         this.editor = Roo.factory(this.editor, Roo.tree);
36000     }
36001     
36002     if (this.selModel) {
36003         this.selModel = Roo.factory(this.selModel, Roo.tree);
36004     }
36005    
36006 };
36007 Roo.extend(Roo.tree.TreePanel, Roo.data.Tree, {
36008     rootVisible : true,
36009     animate: Roo.enableFx,
36010     lines : true,
36011     enableDD : false,
36012     hlDrop : Roo.enableFx,
36013   
36014     renderer: false,
36015     
36016     rendererTip: false,
36017     // private
36018     restrictExpand : function(node){
36019         var p = node.parentNode;
36020         if(p){
36021             if(p.expandedChild && p.expandedChild.parentNode == p){
36022                 p.expandedChild.collapse();
36023             }
36024             p.expandedChild = node;
36025         }
36026     },
36027
36028     // private override
36029     setRootNode : function(node){
36030         Roo.tree.TreePanel.superclass.setRootNode.call(this, node);
36031         if(!this.rootVisible){
36032             node.ui = new Roo.tree.RootTreeNodeUI(node);
36033         }
36034         return node;
36035     },
36036
36037     /**
36038      * Returns the container element for this TreePanel
36039      */
36040     getEl : function(){
36041         return this.el;
36042     },
36043
36044     /**
36045      * Returns the default TreeLoader for this TreePanel
36046      */
36047     getLoader : function(){
36048         return this.loader;
36049     },
36050
36051     /**
36052      * Expand all nodes
36053      */
36054     expandAll : function(){
36055         this.root.expand(true);
36056     },
36057
36058     /**
36059      * Collapse all nodes
36060      */
36061     collapseAll : function(){
36062         this.root.collapse(true);
36063     },
36064
36065     /**
36066      * Returns the selection model used by this TreePanel
36067      */
36068     getSelectionModel : function(){
36069         if(!this.selModel){
36070             this.selModel = new Roo.tree.DefaultSelectionModel();
36071         }
36072         return this.selModel;
36073     },
36074
36075     /**
36076      * Retrieve an array of checked nodes, or an array of a specific attribute of checked nodes (e.g. "id")
36077      * @param {String} attribute (optional) Defaults to null (return the actual nodes)
36078      * @param {TreeNode} startNode (optional) The node to start from, defaults to the root
36079      * @return {Array}
36080      */
36081     getChecked : function(a, startNode){
36082         startNode = startNode || this.root;
36083         var r = [];
36084         var f = function(){
36085             if(this.attributes.checked){
36086                 r.push(!a ? this : (a == 'id' ? this.id : this.attributes[a]));
36087             }
36088         }
36089         startNode.cascade(f);
36090         return r;
36091     },
36092
36093     /**
36094      * Expands a specified path in this TreePanel. A path can be retrieved from a node with {@link Roo.data.Node#getPath}
36095      * @param {String} path
36096      * @param {String} attr (optional) The attribute used in the path (see {@link Roo.data.Node#getPath} for more info)
36097      * @param {Function} callback (optional) The callback to call when the expand is complete. The callback will be called with
36098      * (bSuccess, oLastNode) where bSuccess is if the expand was successful and oLastNode is the last node that was expanded.
36099      */
36100     expandPath : function(path, attr, callback){
36101         attr = attr || "id";
36102         var keys = path.split(this.pathSeparator);
36103         var curNode = this.root;
36104         if(curNode.attributes[attr] != keys[1]){ // invalid root
36105             if(callback){
36106                 callback(false, null);
36107             }
36108             return;
36109         }
36110         var index = 1;
36111         var f = function(){
36112             if(++index == keys.length){
36113                 if(callback){
36114                     callback(true, curNode);
36115                 }
36116                 return;
36117             }
36118             var c = curNode.findChild(attr, keys[index]);
36119             if(!c){
36120                 if(callback){
36121                     callback(false, curNode);
36122                 }
36123                 return;
36124             }
36125             curNode = c;
36126             c.expand(false, false, f);
36127         };
36128         curNode.expand(false, false, f);
36129     },
36130
36131     /**
36132      * Selects the node in this tree at the specified path. A path can be retrieved from a node with {@link Roo.data.Node#getPath}
36133      * @param {String} path
36134      * @param {String} attr (optional) The attribute used in the path (see {@link Roo.data.Node#getPath} for more info)
36135      * @param {Function} callback (optional) The callback to call when the selection is complete. The callback will be called with
36136      * (bSuccess, oSelNode) where bSuccess is if the selection was successful and oSelNode is the selected node.
36137      */
36138     selectPath : function(path, attr, callback){
36139         attr = attr || "id";
36140         var keys = path.split(this.pathSeparator);
36141         var v = keys.pop();
36142         if(keys.length > 0){
36143             var f = function(success, node){
36144                 if(success && node){
36145                     var n = node.findChild(attr, v);
36146                     if(n){
36147                         n.select();
36148                         if(callback){
36149                             callback(true, n);
36150                         }
36151                     }else if(callback){
36152                         callback(false, n);
36153                     }
36154                 }else{
36155                     if(callback){
36156                         callback(false, n);
36157                     }
36158                 }
36159             };
36160             this.expandPath(keys.join(this.pathSeparator), attr, f);
36161         }else{
36162             this.root.select();
36163             if(callback){
36164                 callback(true, this.root);
36165             }
36166         }
36167     },
36168
36169     getTreeEl : function(){
36170         return this.el;
36171     },
36172
36173     /**
36174      * Trigger rendering of this TreePanel
36175      */
36176     render : function(){
36177         if (this.innerCt) {
36178             return this; // stop it rendering more than once!!
36179         }
36180         
36181         this.innerCt = this.el.createChild({tag:"ul",
36182                cls:"x-tree-root-ct " +
36183                (this.lines ? "x-tree-lines" : "x-tree-no-lines")});
36184
36185         if(this.containerScroll){
36186             Roo.dd.ScrollManager.register(this.el);
36187         }
36188         if((this.enableDD || this.enableDrop) && !this.dropZone){
36189            /**
36190             * The dropZone used by this tree if drop is enabled
36191             * @type Roo.tree.TreeDropZone
36192             */
36193              this.dropZone = new Roo.tree.TreeDropZone(this, this.dropConfig || {
36194                ddGroup: this.ddGroup || "TreeDD", appendOnly: this.ddAppendOnly === true
36195            });
36196         }
36197         if((this.enableDD || this.enableDrag) && !this.dragZone){
36198            /**
36199             * The dragZone used by this tree if drag is enabled
36200             * @type Roo.tree.TreeDragZone
36201             */
36202             this.dragZone = new Roo.tree.TreeDragZone(this, this.dragConfig || {
36203                ddGroup: this.ddGroup || "TreeDD",
36204                scroll: this.ddScroll
36205            });
36206         }
36207         this.getSelectionModel().init(this);
36208         if (!this.root) {
36209             Roo.log("ROOT not set in tree");
36210             return this;
36211         }
36212         this.root.render();
36213         if(!this.rootVisible){
36214             this.root.renderChildren();
36215         }
36216         return this;
36217     }
36218 });/*
36219  * Based on:
36220  * Ext JS Library 1.1.1
36221  * Copyright(c) 2006-2007, Ext JS, LLC.
36222  *
36223  * Originally Released Under LGPL - original licence link has changed is not relivant.
36224  *
36225  * Fork - LGPL
36226  * <script type="text/javascript">
36227  */
36228  
36229
36230 /**
36231  * @class Roo.tree.DefaultSelectionModel
36232  * @extends Roo.util.Observable
36233  * The default single selection for a TreePanel.
36234  * @param {Object} cfg Configuration
36235  */
36236 Roo.tree.DefaultSelectionModel = function(cfg){
36237    this.selNode = null;
36238    
36239    
36240    
36241    this.addEvents({
36242        /**
36243         * @event selectionchange
36244         * Fires when the selected node changes
36245         * @param {DefaultSelectionModel} this
36246         * @param {TreeNode} node the new selection
36247         */
36248        "selectionchange" : true,
36249
36250        /**
36251         * @event beforeselect
36252         * Fires before the selected node changes, return false to cancel the change
36253         * @param {DefaultSelectionModel} this
36254         * @param {TreeNode} node the new selection
36255         * @param {TreeNode} node the old selection
36256         */
36257        "beforeselect" : true
36258    });
36259    
36260     Roo.tree.DefaultSelectionModel.superclass.constructor.call(this,cfg);
36261 };
36262
36263 Roo.extend(Roo.tree.DefaultSelectionModel, Roo.util.Observable, {
36264     init : function(tree){
36265         this.tree = tree;
36266         tree.getTreeEl().on("keydown", this.onKeyDown, this);
36267         tree.on("click", this.onNodeClick, this);
36268     },
36269     
36270     onNodeClick : function(node, e){
36271         if (e.ctrlKey && this.selNode == node)  {
36272             this.unselect(node);
36273             return;
36274         }
36275         this.select(node);
36276     },
36277     
36278     /**
36279      * Select a node.
36280      * @param {TreeNode} node The node to select
36281      * @return {TreeNode} The selected node
36282      */
36283     select : function(node){
36284         var last = this.selNode;
36285         if(last != node && this.fireEvent('beforeselect', this, node, last) !== false){
36286             if(last){
36287                 last.ui.onSelectedChange(false);
36288             }
36289             this.selNode = node;
36290             node.ui.onSelectedChange(true);
36291             this.fireEvent("selectionchange", this, node, last);
36292         }
36293         return node;
36294     },
36295     
36296     /**
36297      * Deselect a node.
36298      * @param {TreeNode} node The node to unselect
36299      */
36300     unselect : function(node){
36301         if(this.selNode == node){
36302             this.clearSelections();
36303         }    
36304     },
36305     
36306     /**
36307      * Clear all selections
36308      */
36309     clearSelections : function(){
36310         var n = this.selNode;
36311         if(n){
36312             n.ui.onSelectedChange(false);
36313             this.selNode = null;
36314             this.fireEvent("selectionchange", this, null);
36315         }
36316         return n;
36317     },
36318     
36319     /**
36320      * Get the selected node
36321      * @return {TreeNode} The selected node
36322      */
36323     getSelectedNode : function(){
36324         return this.selNode;    
36325     },
36326     
36327     /**
36328      * Returns true if the node is selected
36329      * @param {TreeNode} node The node to check
36330      * @return {Boolean}
36331      */
36332     isSelected : function(node){
36333         return this.selNode == node;  
36334     },
36335
36336     /**
36337      * Selects the node above the selected node in the tree, intelligently walking the nodes
36338      * @return TreeNode The new selection
36339      */
36340     selectPrevious : function(){
36341         var s = this.selNode || this.lastSelNode;
36342         if(!s){
36343             return null;
36344         }
36345         var ps = s.previousSibling;
36346         if(ps){
36347             if(!ps.isExpanded() || ps.childNodes.length < 1){
36348                 return this.select(ps);
36349             } else{
36350                 var lc = ps.lastChild;
36351                 while(lc && lc.isExpanded() && lc.childNodes.length > 0){
36352                     lc = lc.lastChild;
36353                 }
36354                 return this.select(lc);
36355             }
36356         } else if(s.parentNode && (this.tree.rootVisible || !s.parentNode.isRoot)){
36357             return this.select(s.parentNode);
36358         }
36359         return null;
36360     },
36361
36362     /**
36363      * Selects the node above the selected node in the tree, intelligently walking the nodes
36364      * @return TreeNode The new selection
36365      */
36366     selectNext : function(){
36367         var s = this.selNode || this.lastSelNode;
36368         if(!s){
36369             return null;
36370         }
36371         if(s.firstChild && s.isExpanded()){
36372              return this.select(s.firstChild);
36373          }else if(s.nextSibling){
36374              return this.select(s.nextSibling);
36375          }else if(s.parentNode){
36376             var newS = null;
36377             s.parentNode.bubble(function(){
36378                 if(this.nextSibling){
36379                     newS = this.getOwnerTree().selModel.select(this.nextSibling);
36380                     return false;
36381                 }
36382             });
36383             return newS;
36384          }
36385         return null;
36386     },
36387
36388     onKeyDown : function(e){
36389         var s = this.selNode || this.lastSelNode;
36390         // undesirable, but required
36391         var sm = this;
36392         if(!s){
36393             return;
36394         }
36395         var k = e.getKey();
36396         switch(k){
36397              case e.DOWN:
36398                  e.stopEvent();
36399                  this.selectNext();
36400              break;
36401              case e.UP:
36402                  e.stopEvent();
36403                  this.selectPrevious();
36404              break;
36405              case e.RIGHT:
36406                  e.preventDefault();
36407                  if(s.hasChildNodes()){
36408                      if(!s.isExpanded()){
36409                          s.expand();
36410                      }else if(s.firstChild){
36411                          this.select(s.firstChild, e);
36412                      }
36413                  }
36414              break;
36415              case e.LEFT:
36416                  e.preventDefault();
36417                  if(s.hasChildNodes() && s.isExpanded()){
36418                      s.collapse();
36419                  }else if(s.parentNode && (this.tree.rootVisible || s.parentNode != this.tree.getRootNode())){
36420                      this.select(s.parentNode, e);
36421                  }
36422              break;
36423         };
36424     }
36425 });
36426
36427 /**
36428  * @class Roo.tree.MultiSelectionModel
36429  * @extends Roo.util.Observable
36430  * Multi selection for a TreePanel.
36431  * @param {Object} cfg Configuration
36432  */
36433 Roo.tree.MultiSelectionModel = function(){
36434    this.selNodes = [];
36435    this.selMap = {};
36436    this.addEvents({
36437        /**
36438         * @event selectionchange
36439         * Fires when the selected nodes change
36440         * @param {MultiSelectionModel} this
36441         * @param {Array} nodes Array of the selected nodes
36442         */
36443        "selectionchange" : true
36444    });
36445    Roo.tree.MultiSelectionModel.superclass.constructor.call(this,cfg);
36446    
36447 };
36448
36449 Roo.extend(Roo.tree.MultiSelectionModel, Roo.util.Observable, {
36450     init : function(tree){
36451         this.tree = tree;
36452         tree.getTreeEl().on("keydown", this.onKeyDown, this);
36453         tree.on("click", this.onNodeClick, this);
36454     },
36455     
36456     onNodeClick : function(node, e){
36457         this.select(node, e, e.ctrlKey);
36458     },
36459     
36460     /**
36461      * Select a node.
36462      * @param {TreeNode} node The node to select
36463      * @param {EventObject} e (optional) An event associated with the selection
36464      * @param {Boolean} keepExisting True to retain existing selections
36465      * @return {TreeNode} The selected node
36466      */
36467     select : function(node, e, keepExisting){
36468         if(keepExisting !== true){
36469             this.clearSelections(true);
36470         }
36471         if(this.isSelected(node)){
36472             this.lastSelNode = node;
36473             return node;
36474         }
36475         this.selNodes.push(node);
36476         this.selMap[node.id] = node;
36477         this.lastSelNode = node;
36478         node.ui.onSelectedChange(true);
36479         this.fireEvent("selectionchange", this, this.selNodes);
36480         return node;
36481     },
36482     
36483     /**
36484      * Deselect a node.
36485      * @param {TreeNode} node The node to unselect
36486      */
36487     unselect : function(node){
36488         if(this.selMap[node.id]){
36489             node.ui.onSelectedChange(false);
36490             var sn = this.selNodes;
36491             var index = -1;
36492             if(sn.indexOf){
36493                 index = sn.indexOf(node);
36494             }else{
36495                 for(var i = 0, len = sn.length; i < len; i++){
36496                     if(sn[i] == node){
36497                         index = i;
36498                         break;
36499                     }
36500                 }
36501             }
36502             if(index != -1){
36503                 this.selNodes.splice(index, 1);
36504             }
36505             delete this.selMap[node.id];
36506             this.fireEvent("selectionchange", this, this.selNodes);
36507         }
36508     },
36509     
36510     /**
36511      * Clear all selections
36512      */
36513     clearSelections : function(suppressEvent){
36514         var sn = this.selNodes;
36515         if(sn.length > 0){
36516             for(var i = 0, len = sn.length; i < len; i++){
36517                 sn[i].ui.onSelectedChange(false);
36518             }
36519             this.selNodes = [];
36520             this.selMap = {};
36521             if(suppressEvent !== true){
36522                 this.fireEvent("selectionchange", this, this.selNodes);
36523             }
36524         }
36525     },
36526     
36527     /**
36528      * Returns true if the node is selected
36529      * @param {TreeNode} node The node to check
36530      * @return {Boolean}
36531      */
36532     isSelected : function(node){
36533         return this.selMap[node.id] ? true : false;  
36534     },
36535     
36536     /**
36537      * Returns an array of the selected nodes
36538      * @return {Array}
36539      */
36540     getSelectedNodes : function(){
36541         return this.selNodes;    
36542     },
36543
36544     onKeyDown : Roo.tree.DefaultSelectionModel.prototype.onKeyDown,
36545
36546     selectNext : Roo.tree.DefaultSelectionModel.prototype.selectNext,
36547
36548     selectPrevious : Roo.tree.DefaultSelectionModel.prototype.selectPrevious
36549 });/*
36550  * Based on:
36551  * Ext JS Library 1.1.1
36552  * Copyright(c) 2006-2007, Ext JS, LLC.
36553  *
36554  * Originally Released Under LGPL - original licence link has changed is not relivant.
36555  *
36556  * Fork - LGPL
36557  * <script type="text/javascript">
36558  */
36559  
36560 /**
36561  * @class Roo.tree.TreeNode
36562  * @extends Roo.data.Node
36563  * @cfg {String} text The text for this node
36564  * @cfg {Boolean} expanded true to start the node expanded
36565  * @cfg {Boolean} allowDrag false to make this node undraggable if DD is on (defaults to true)
36566  * @cfg {Boolean} allowDrop false if this node cannot be drop on
36567  * @cfg {Boolean} disabled true to start the node disabled
36568  * @cfg {String} icon The path to an icon for the node. The preferred way to do this
36569  *    is to use the cls or iconCls attributes and add the icon via a CSS background image.
36570  * @cfg {String} cls A css class to be added to the node
36571  * @cfg {String} iconCls A css class to be added to the nodes icon element for applying css background images
36572  * @cfg {String} href URL of the link used for the node (defaults to #)
36573  * @cfg {String} hrefTarget target frame for the link
36574  * @cfg {String} qtip An Ext QuickTip for the node
36575  * @cfg {String} qtipCfg An Ext QuickTip config for the node (used instead of qtip)
36576  * @cfg {Boolean} singleClickExpand True for single click expand on this node
36577  * @cfg {Function} uiProvider A UI <b>class</b> to use for this node (defaults to Roo.tree.TreeNodeUI)
36578  * @cfg {Boolean} checked True to render a checked checkbox for this node, false to render an unchecked checkbox
36579  * (defaults to undefined with no checkbox rendered)
36580  * @constructor
36581  * @param {Object/String} attributes The attributes/config for the node or just a string with the text for the node
36582  */
36583 Roo.tree.TreeNode = function(attributes){
36584     attributes = attributes || {};
36585     if(typeof attributes == "string"){
36586         attributes = {text: attributes};
36587     }
36588     this.childrenRendered = false;
36589     this.rendered = false;
36590     Roo.tree.TreeNode.superclass.constructor.call(this, attributes);
36591     this.expanded = attributes.expanded === true;
36592     this.isTarget = attributes.isTarget !== false;
36593     this.draggable = attributes.draggable !== false && attributes.allowDrag !== false;
36594     this.allowChildren = attributes.allowChildren !== false && attributes.allowDrop !== false;
36595
36596     /**
36597      * Read-only. The text for this node. To change it use setText().
36598      * @type String
36599      */
36600     this.text = attributes.text;
36601     /**
36602      * True if this node is disabled.
36603      * @type Boolean
36604      */
36605     this.disabled = attributes.disabled === true;
36606
36607     this.addEvents({
36608         /**
36609         * @event textchange
36610         * Fires when the text for this node is changed
36611         * @param {Node} this This node
36612         * @param {String} text The new text
36613         * @param {String} oldText The old text
36614         */
36615         "textchange" : true,
36616         /**
36617         * @event beforeexpand
36618         * Fires before this node is expanded, return false to cancel.
36619         * @param {Node} this This node
36620         * @param {Boolean} deep
36621         * @param {Boolean} anim
36622         */
36623         "beforeexpand" : true,
36624         /**
36625         * @event beforecollapse
36626         * Fires before this node is collapsed, return false to cancel.
36627         * @param {Node} this This node
36628         * @param {Boolean} deep
36629         * @param {Boolean} anim
36630         */
36631         "beforecollapse" : true,
36632         /**
36633         * @event expand
36634         * Fires when this node is expanded
36635         * @param {Node} this This node
36636         */
36637         "expand" : true,
36638         /**
36639         * @event disabledchange
36640         * Fires when the disabled status of this node changes
36641         * @param {Node} this This node
36642         * @param {Boolean} disabled
36643         */
36644         "disabledchange" : true,
36645         /**
36646         * @event collapse
36647         * Fires when this node is collapsed
36648         * @param {Node} this This node
36649         */
36650         "collapse" : true,
36651         /**
36652         * @event beforeclick
36653         * Fires before click processing. Return false to cancel the default action.
36654         * @param {Node} this This node
36655         * @param {Roo.EventObject} e The event object
36656         */
36657         "beforeclick":true,
36658         /**
36659         * @event checkchange
36660         * Fires when a node with a checkbox's checked property changes
36661         * @param {Node} this This node
36662         * @param {Boolean} checked
36663         */
36664         "checkchange":true,
36665         /**
36666         * @event click
36667         * Fires when this node is clicked
36668         * @param {Node} this This node
36669         * @param {Roo.EventObject} e The event object
36670         */
36671         "click":true,
36672         /**
36673         * @event dblclick
36674         * Fires when this node is double clicked
36675         * @param {Node} this This node
36676         * @param {Roo.EventObject} e The event object
36677         */
36678         "dblclick":true,
36679         /**
36680         * @event contextmenu
36681         * Fires when this node is right clicked
36682         * @param {Node} this This node
36683         * @param {Roo.EventObject} e The event object
36684         */
36685         "contextmenu":true,
36686         /**
36687         * @event beforechildrenrendered
36688         * Fires right before the child nodes for this node are rendered
36689         * @param {Node} this This node
36690         */
36691         "beforechildrenrendered":true
36692     });
36693
36694     var uiClass = this.attributes.uiProvider || Roo.tree.TreeNodeUI;
36695
36696     /**
36697      * Read-only. The UI for this node
36698      * @type TreeNodeUI
36699      */
36700     this.ui = new uiClass(this);
36701     
36702     // finally support items[]
36703     if (typeof(this.attributes.items) == 'undefined' || !this.attributes.items) {
36704         return;
36705     }
36706     
36707     
36708     Roo.each(this.attributes.items, function(c) {
36709         this.appendChild(Roo.factory(c,Roo.Tree));
36710     }, this);
36711     delete this.attributes.items;
36712     
36713     
36714     
36715 };
36716 Roo.extend(Roo.tree.TreeNode, Roo.data.Node, {
36717     preventHScroll: true,
36718     /**
36719      * Returns true if this node is expanded
36720      * @return {Boolean}
36721      */
36722     isExpanded : function(){
36723         return this.expanded;
36724     },
36725
36726     /**
36727      * Returns the UI object for this node
36728      * @return {TreeNodeUI}
36729      */
36730     getUI : function(){
36731         return this.ui;
36732     },
36733
36734     // private override
36735     setFirstChild : function(node){
36736         var of = this.firstChild;
36737         Roo.tree.TreeNode.superclass.setFirstChild.call(this, node);
36738         if(this.childrenRendered && of && node != of){
36739             of.renderIndent(true, true);
36740         }
36741         if(this.rendered){
36742             this.renderIndent(true, true);
36743         }
36744     },
36745
36746     // private override
36747     setLastChild : function(node){
36748         var ol = this.lastChild;
36749         Roo.tree.TreeNode.superclass.setLastChild.call(this, node);
36750         if(this.childrenRendered && ol && node != ol){
36751             ol.renderIndent(true, true);
36752         }
36753         if(this.rendered){
36754             this.renderIndent(true, true);
36755         }
36756     },
36757
36758     // these methods are overridden to provide lazy rendering support
36759     // private override
36760     appendChild : function()
36761     {
36762         var node = Roo.tree.TreeNode.superclass.appendChild.apply(this, arguments);
36763         if(node && this.childrenRendered){
36764             node.render();
36765         }
36766         this.ui.updateExpandIcon();
36767         return node;
36768     },
36769
36770     // private override
36771     removeChild : function(node){
36772         this.ownerTree.getSelectionModel().unselect(node);
36773         Roo.tree.TreeNode.superclass.removeChild.apply(this, arguments);
36774         // if it's been rendered remove dom node
36775         if(this.childrenRendered){
36776             node.ui.remove();
36777         }
36778         if(this.childNodes.length < 1){
36779             this.collapse(false, false);
36780         }else{
36781             this.ui.updateExpandIcon();
36782         }
36783         if(!this.firstChild) {
36784             this.childrenRendered = false;
36785         }
36786         return node;
36787     },
36788
36789     // private override
36790     insertBefore : function(node, refNode){
36791         var newNode = Roo.tree.TreeNode.superclass.insertBefore.apply(this, arguments);
36792         if(newNode && refNode && this.childrenRendered){
36793             node.render();
36794         }
36795         this.ui.updateExpandIcon();
36796         return newNode;
36797     },
36798
36799     /**
36800      * Sets the text for this node
36801      * @param {String} text
36802      */
36803     setText : function(text){
36804         var oldText = this.text;
36805         this.text = text;
36806         this.attributes.text = text;
36807         if(this.rendered){ // event without subscribing
36808             this.ui.onTextChange(this, text, oldText);
36809         }
36810         this.fireEvent("textchange", this, text, oldText);
36811     },
36812
36813     /**
36814      * Triggers selection of this node
36815      */
36816     select : function(){
36817         this.getOwnerTree().getSelectionModel().select(this);
36818     },
36819
36820     /**
36821      * Triggers deselection of this node
36822      */
36823     unselect : function(){
36824         this.getOwnerTree().getSelectionModel().unselect(this);
36825     },
36826
36827     /**
36828      * Returns true if this node is selected
36829      * @return {Boolean}
36830      */
36831     isSelected : function(){
36832         return this.getOwnerTree().getSelectionModel().isSelected(this);
36833     },
36834
36835     /**
36836      * Expand this node.
36837      * @param {Boolean} deep (optional) True to expand all children as well
36838      * @param {Boolean} anim (optional) false to cancel the default animation
36839      * @param {Function} callback (optional) A callback to be called when
36840      * expanding this node completes (does not wait for deep expand to complete).
36841      * Called with 1 parameter, this node.
36842      */
36843     expand : function(deep, anim, callback){
36844         if(!this.expanded){
36845             if(this.fireEvent("beforeexpand", this, deep, anim) === false){
36846                 return;
36847             }
36848             if(!this.childrenRendered){
36849                 this.renderChildren();
36850             }
36851             this.expanded = true;
36852             
36853             if(!this.isHiddenRoot() && (this.getOwnerTree() && this.getOwnerTree().animate && anim !== false) || anim){
36854                 this.ui.animExpand(function(){
36855                     this.fireEvent("expand", this);
36856                     if(typeof callback == "function"){
36857                         callback(this);
36858                     }
36859                     if(deep === true){
36860                         this.expandChildNodes(true);
36861                     }
36862                 }.createDelegate(this));
36863                 return;
36864             }else{
36865                 this.ui.expand();
36866                 this.fireEvent("expand", this);
36867                 if(typeof callback == "function"){
36868                     callback(this);
36869                 }
36870             }
36871         }else{
36872            if(typeof callback == "function"){
36873                callback(this);
36874            }
36875         }
36876         if(deep === true){
36877             this.expandChildNodes(true);
36878         }
36879     },
36880
36881     isHiddenRoot : function(){
36882         return this.isRoot && !this.getOwnerTree().rootVisible;
36883     },
36884
36885     /**
36886      * Collapse this node.
36887      * @param {Boolean} deep (optional) True to collapse all children as well
36888      * @param {Boolean} anim (optional) false to cancel the default animation
36889      */
36890     collapse : function(deep, anim){
36891         if(this.expanded && !this.isHiddenRoot()){
36892             if(this.fireEvent("beforecollapse", this, deep, anim) === false){
36893                 return;
36894             }
36895             this.expanded = false;
36896             if((this.getOwnerTree().animate && anim !== false) || anim){
36897                 this.ui.animCollapse(function(){
36898                     this.fireEvent("collapse", this);
36899                     if(deep === true){
36900                         this.collapseChildNodes(true);
36901                     }
36902                 }.createDelegate(this));
36903                 return;
36904             }else{
36905                 this.ui.collapse();
36906                 this.fireEvent("collapse", this);
36907             }
36908         }
36909         if(deep === true){
36910             var cs = this.childNodes;
36911             for(var i = 0, len = cs.length; i < len; i++) {
36912                 cs[i].collapse(true, false);
36913             }
36914         }
36915     },
36916
36917     // private
36918     delayedExpand : function(delay){
36919         if(!this.expandProcId){
36920             this.expandProcId = this.expand.defer(delay, this);
36921         }
36922     },
36923
36924     // private
36925     cancelExpand : function(){
36926         if(this.expandProcId){
36927             clearTimeout(this.expandProcId);
36928         }
36929         this.expandProcId = false;
36930     },
36931
36932     /**
36933      * Toggles expanded/collapsed state of the node
36934      */
36935     toggle : function(){
36936         if(this.expanded){
36937             this.collapse();
36938         }else{
36939             this.expand();
36940         }
36941     },
36942
36943     /**
36944      * Ensures all parent nodes are expanded
36945      */
36946     ensureVisible : function(callback){
36947         var tree = this.getOwnerTree();
36948         tree.expandPath(this.parentNode.getPath(), false, function(){
36949             tree.getTreeEl().scrollChildIntoView(this.ui.anchor);
36950             Roo.callback(callback);
36951         }.createDelegate(this));
36952     },
36953
36954     /**
36955      * Expand all child nodes
36956      * @param {Boolean} deep (optional) true if the child nodes should also expand their child nodes
36957      */
36958     expandChildNodes : function(deep){
36959         var cs = this.childNodes;
36960         for(var i = 0, len = cs.length; i < len; i++) {
36961                 cs[i].expand(deep);
36962         }
36963     },
36964
36965     /**
36966      * Collapse all child nodes
36967      * @param {Boolean} deep (optional) true if the child nodes should also collapse their child nodes
36968      */
36969     collapseChildNodes : function(deep){
36970         var cs = this.childNodes;
36971         for(var i = 0, len = cs.length; i < len; i++) {
36972                 cs[i].collapse(deep);
36973         }
36974     },
36975
36976     /**
36977      * Disables this node
36978      */
36979     disable : function(){
36980         this.disabled = true;
36981         this.unselect();
36982         if(this.rendered && this.ui.onDisableChange){ // event without subscribing
36983             this.ui.onDisableChange(this, true);
36984         }
36985         this.fireEvent("disabledchange", this, true);
36986     },
36987
36988     /**
36989      * Enables this node
36990      */
36991     enable : function(){
36992         this.disabled = false;
36993         if(this.rendered && this.ui.onDisableChange){ // event without subscribing
36994             this.ui.onDisableChange(this, false);
36995         }
36996         this.fireEvent("disabledchange", this, false);
36997     },
36998
36999     // private
37000     renderChildren : function(suppressEvent){
37001         if(suppressEvent !== false){
37002             this.fireEvent("beforechildrenrendered", this);
37003         }
37004         var cs = this.childNodes;
37005         for(var i = 0, len = cs.length; i < len; i++){
37006             cs[i].render(true);
37007         }
37008         this.childrenRendered = true;
37009     },
37010
37011     // private
37012     sort : function(fn, scope){
37013         Roo.tree.TreeNode.superclass.sort.apply(this, arguments);
37014         if(this.childrenRendered){
37015             var cs = this.childNodes;
37016             for(var i = 0, len = cs.length; i < len; i++){
37017                 cs[i].render(true);
37018             }
37019         }
37020     },
37021
37022     // private
37023     render : function(bulkRender){
37024         this.ui.render(bulkRender);
37025         if(!this.rendered){
37026             this.rendered = true;
37027             if(this.expanded){
37028                 this.expanded = false;
37029                 this.expand(false, false);
37030             }
37031         }
37032     },
37033
37034     // private
37035     renderIndent : function(deep, refresh){
37036         if(refresh){
37037             this.ui.childIndent = null;
37038         }
37039         this.ui.renderIndent();
37040         if(deep === true && this.childrenRendered){
37041             var cs = this.childNodes;
37042             for(var i = 0, len = cs.length; i < len; i++){
37043                 cs[i].renderIndent(true, refresh);
37044             }
37045         }
37046     }
37047 });/*
37048  * Based on:
37049  * Ext JS Library 1.1.1
37050  * Copyright(c) 2006-2007, Ext JS, LLC.
37051  *
37052  * Originally Released Under LGPL - original licence link has changed is not relivant.
37053  *
37054  * Fork - LGPL
37055  * <script type="text/javascript">
37056  */
37057  
37058 /**
37059  * @class Roo.tree.AsyncTreeNode
37060  * @extends Roo.tree.TreeNode
37061  * @cfg {TreeLoader} loader A TreeLoader to be used by this node (defaults to the loader defined on the tree)
37062  * @constructor
37063  * @param {Object/String} attributes The attributes/config for the node or just a string with the text for the node 
37064  */
37065  Roo.tree.AsyncTreeNode = function(config){
37066     this.loaded = false;
37067     this.loading = false;
37068     Roo.tree.AsyncTreeNode.superclass.constructor.apply(this, arguments);
37069     /**
37070     * @event beforeload
37071     * Fires before this node is loaded, return false to cancel
37072     * @param {Node} this This node
37073     */
37074     this.addEvents({'beforeload':true, 'load': true});
37075     /**
37076     * @event load
37077     * Fires when this node is loaded
37078     * @param {Node} this This node
37079     */
37080     /**
37081      * The loader used by this node (defaults to using the tree's defined loader)
37082      * @type TreeLoader
37083      * @property loader
37084      */
37085 };
37086 Roo.extend(Roo.tree.AsyncTreeNode, Roo.tree.TreeNode, {
37087     expand : function(deep, anim, callback){
37088         if(this.loading){ // if an async load is already running, waiting til it's done
37089             var timer;
37090             var f = function(){
37091                 if(!this.loading){ // done loading
37092                     clearInterval(timer);
37093                     this.expand(deep, anim, callback);
37094                 }
37095             }.createDelegate(this);
37096             timer = setInterval(f, 200);
37097             return;
37098         }
37099         if(!this.loaded){
37100             if(this.fireEvent("beforeload", this) === false){
37101                 return;
37102             }
37103             this.loading = true;
37104             this.ui.beforeLoad(this);
37105             var loader = this.loader || this.attributes.loader || this.getOwnerTree().getLoader();
37106             if(loader){
37107                 loader.load(this, this.loadComplete.createDelegate(this, [deep, anim, callback]));
37108                 return;
37109             }
37110         }
37111         Roo.tree.AsyncTreeNode.superclass.expand.call(this, deep, anim, callback);
37112     },
37113     
37114     /**
37115      * Returns true if this node is currently loading
37116      * @return {Boolean}
37117      */
37118     isLoading : function(){
37119         return this.loading;  
37120     },
37121     
37122     loadComplete : function(deep, anim, callback){
37123         this.loading = false;
37124         this.loaded = true;
37125         this.ui.afterLoad(this);
37126         this.fireEvent("load", this);
37127         this.expand(deep, anim, callback);
37128     },
37129     
37130     /**
37131      * Returns true if this node has been loaded
37132      * @return {Boolean}
37133      */
37134     isLoaded : function(){
37135         return this.loaded;
37136     },
37137     
37138     hasChildNodes : function(){
37139         if(!this.isLeaf() && !this.loaded){
37140             return true;
37141         }else{
37142             return Roo.tree.AsyncTreeNode.superclass.hasChildNodes.call(this);
37143         }
37144     },
37145
37146     /**
37147      * Trigger a reload for this node
37148      * @param {Function} callback
37149      */
37150     reload : function(callback){
37151         this.collapse(false, false);
37152         while(this.firstChild){
37153             this.removeChild(this.firstChild);
37154         }
37155         this.childrenRendered = false;
37156         this.loaded = false;
37157         if(this.isHiddenRoot()){
37158             this.expanded = false;
37159         }
37160         this.expand(false, false, callback);
37161     }
37162 });/*
37163  * Based on:
37164  * Ext JS Library 1.1.1
37165  * Copyright(c) 2006-2007, Ext JS, LLC.
37166  *
37167  * Originally Released Under LGPL - original licence link has changed is not relivant.
37168  *
37169  * Fork - LGPL
37170  * <script type="text/javascript">
37171  */
37172  
37173 /**
37174  * @class Roo.tree.TreeNodeUI
37175  * @constructor
37176  * @param {Object} node The node to render
37177  * The TreeNode UI implementation is separate from the
37178  * tree implementation. Unless you are customizing the tree UI,
37179  * you should never have to use this directly.
37180  */
37181 Roo.tree.TreeNodeUI = function(node){
37182     this.node = node;
37183     this.rendered = false;
37184     this.animating = false;
37185     this.emptyIcon = Roo.BLANK_IMAGE_URL;
37186 };
37187
37188 Roo.tree.TreeNodeUI.prototype = {
37189     removeChild : function(node){
37190         if(this.rendered){
37191             this.ctNode.removeChild(node.ui.getEl());
37192         }
37193     },
37194
37195     beforeLoad : function(){
37196          this.addClass("x-tree-node-loading");
37197     },
37198
37199     afterLoad : function(){
37200          this.removeClass("x-tree-node-loading");
37201     },
37202
37203     onTextChange : function(node, text, oldText){
37204         if(this.rendered){
37205             this.textNode.innerHTML = text;
37206         }
37207     },
37208
37209     onDisableChange : function(node, state){
37210         this.disabled = state;
37211         if(state){
37212             this.addClass("x-tree-node-disabled");
37213         }else{
37214             this.removeClass("x-tree-node-disabled");
37215         }
37216     },
37217
37218     onSelectedChange : function(state){
37219         if(state){
37220             this.focus();
37221             this.addClass("x-tree-selected");
37222         }else{
37223             //this.blur();
37224             this.removeClass("x-tree-selected");
37225         }
37226     },
37227
37228     onMove : function(tree, node, oldParent, newParent, index, refNode){
37229         this.childIndent = null;
37230         if(this.rendered){
37231             var targetNode = newParent.ui.getContainer();
37232             if(!targetNode){//target not rendered
37233                 this.holder = document.createElement("div");
37234                 this.holder.appendChild(this.wrap);
37235                 return;
37236             }
37237             var insertBefore = refNode ? refNode.ui.getEl() : null;
37238             if(insertBefore){
37239                 targetNode.insertBefore(this.wrap, insertBefore);
37240             }else{
37241                 targetNode.appendChild(this.wrap);
37242             }
37243             this.node.renderIndent(true);
37244         }
37245     },
37246
37247     addClass : function(cls){
37248         if(this.elNode){
37249             Roo.fly(this.elNode).addClass(cls);
37250         }
37251     },
37252
37253     removeClass : function(cls){
37254         if(this.elNode){
37255             Roo.fly(this.elNode).removeClass(cls);
37256         }
37257     },
37258
37259     remove : function(){
37260         if(this.rendered){
37261             this.holder = document.createElement("div");
37262             this.holder.appendChild(this.wrap);
37263         }
37264     },
37265
37266     fireEvent : function(){
37267         return this.node.fireEvent.apply(this.node, arguments);
37268     },
37269
37270     initEvents : function(){
37271         this.node.on("move", this.onMove, this);
37272         var E = Roo.EventManager;
37273         var a = this.anchor;
37274
37275         var el = Roo.fly(a, '_treeui');
37276
37277         if(Roo.isOpera){ // opera render bug ignores the CSS
37278             el.setStyle("text-decoration", "none");
37279         }
37280
37281         el.on("click", this.onClick, this);
37282         el.on("dblclick", this.onDblClick, this);
37283
37284         if(this.checkbox){
37285             Roo.EventManager.on(this.checkbox,
37286                     Roo.isIE ? 'click' : 'change', this.onCheckChange, this);
37287         }
37288
37289         el.on("contextmenu", this.onContextMenu, this);
37290
37291         var icon = Roo.fly(this.iconNode);
37292         icon.on("click", this.onClick, this);
37293         icon.on("dblclick", this.onDblClick, this);
37294         icon.on("contextmenu", this.onContextMenu, this);
37295         E.on(this.ecNode, "click", this.ecClick, this, true);
37296
37297         if(this.node.disabled){
37298             this.addClass("x-tree-node-disabled");
37299         }
37300         if(this.node.hidden){
37301             this.addClass("x-tree-node-disabled");
37302         }
37303         var ot = this.node.getOwnerTree();
37304         var dd = ot ? (ot.enableDD || ot.enableDrag || ot.enableDrop) : false;
37305         if(dd && (!this.node.isRoot || ot.rootVisible)){
37306             Roo.dd.Registry.register(this.elNode, {
37307                 node: this.node,
37308                 handles: this.getDDHandles(),
37309                 isHandle: false
37310             });
37311         }
37312     },
37313
37314     getDDHandles : function(){
37315         return [this.iconNode, this.textNode];
37316     },
37317
37318     hide : function(){
37319         if(this.rendered){
37320             this.wrap.style.display = "none";
37321         }
37322     },
37323
37324     show : function(){
37325         if(this.rendered){
37326             this.wrap.style.display = "";
37327         }
37328     },
37329
37330     onContextMenu : function(e){
37331         if (this.node.hasListener("contextmenu") || this.node.getOwnerTree().hasListener("contextmenu")) {
37332             e.preventDefault();
37333             this.focus();
37334             this.fireEvent("contextmenu", this.node, e);
37335         }
37336     },
37337
37338     onClick : function(e){
37339         if(this.dropping){
37340             e.stopEvent();
37341             return;
37342         }
37343         if(this.fireEvent("beforeclick", this.node, e) !== false){
37344             if(!this.disabled && this.node.attributes.href){
37345                 this.fireEvent("click", this.node, e);
37346                 return;
37347             }
37348             e.preventDefault();
37349             if(this.disabled){
37350                 return;
37351             }
37352
37353             if(this.node.attributes.singleClickExpand && !this.animating && this.node.hasChildNodes()){
37354                 this.node.toggle();
37355             }
37356
37357             this.fireEvent("click", this.node, e);
37358         }else{
37359             e.stopEvent();
37360         }
37361     },
37362
37363     onDblClick : function(e){
37364         e.preventDefault();
37365         if(this.disabled){
37366             return;
37367         }
37368         if(this.checkbox){
37369             this.toggleCheck();
37370         }
37371         if(!this.animating && this.node.hasChildNodes()){
37372             this.node.toggle();
37373         }
37374         this.fireEvent("dblclick", this.node, e);
37375     },
37376
37377     onCheckChange : function(){
37378         var checked = this.checkbox.checked;
37379         this.node.attributes.checked = checked;
37380         this.fireEvent('checkchange', this.node, checked);
37381     },
37382
37383     ecClick : function(e){
37384         if(!this.animating && this.node.hasChildNodes()){
37385             this.node.toggle();
37386         }
37387     },
37388
37389     startDrop : function(){
37390         this.dropping = true;
37391     },
37392
37393     // delayed drop so the click event doesn't get fired on a drop
37394     endDrop : function(){
37395        setTimeout(function(){
37396            this.dropping = false;
37397        }.createDelegate(this), 50);
37398     },
37399
37400     expand : function(){
37401         this.updateExpandIcon();
37402         this.ctNode.style.display = "";
37403     },
37404
37405     focus : function(){
37406         if(!this.node.preventHScroll){
37407             try{this.anchor.focus();
37408             }catch(e){}
37409         }else if(!Roo.isIE){
37410             try{
37411                 var noscroll = this.node.getOwnerTree().getTreeEl().dom;
37412                 var l = noscroll.scrollLeft;
37413                 this.anchor.focus();
37414                 noscroll.scrollLeft = l;
37415             }catch(e){}
37416         }
37417     },
37418
37419     toggleCheck : function(value){
37420         var cb = this.checkbox;
37421         if(cb){
37422             cb.checked = (value === undefined ? !cb.checked : value);
37423         }
37424     },
37425
37426     blur : function(){
37427         try{
37428             this.anchor.blur();
37429         }catch(e){}
37430     },
37431
37432     animExpand : function(callback){
37433         var ct = Roo.get(this.ctNode);
37434         ct.stopFx();
37435         if(!this.node.hasChildNodes()){
37436             this.updateExpandIcon();
37437             this.ctNode.style.display = "";
37438             Roo.callback(callback);
37439             return;
37440         }
37441         this.animating = true;
37442         this.updateExpandIcon();
37443
37444         ct.slideIn('t', {
37445            callback : function(){
37446                this.animating = false;
37447                Roo.callback(callback);
37448             },
37449             scope: this,
37450             duration: this.node.ownerTree.duration || .25
37451         });
37452     },
37453
37454     highlight : function(){
37455         var tree = this.node.getOwnerTree();
37456         Roo.fly(this.wrap).highlight(
37457             tree.hlColor || "C3DAF9",
37458             {endColor: tree.hlBaseColor}
37459         );
37460     },
37461
37462     collapse : function(){
37463         this.updateExpandIcon();
37464         this.ctNode.style.display = "none";
37465     },
37466
37467     animCollapse : function(callback){
37468         var ct = Roo.get(this.ctNode);
37469         ct.enableDisplayMode('block');
37470         ct.stopFx();
37471
37472         this.animating = true;
37473         this.updateExpandIcon();
37474
37475         ct.slideOut('t', {
37476             callback : function(){
37477                this.animating = false;
37478                Roo.callback(callback);
37479             },
37480             scope: this,
37481             duration: this.node.ownerTree.duration || .25
37482         });
37483     },
37484
37485     getContainer : function(){
37486         return this.ctNode;
37487     },
37488
37489     getEl : function(){
37490         return this.wrap;
37491     },
37492
37493     appendDDGhost : function(ghostNode){
37494         ghostNode.appendChild(this.elNode.cloneNode(true));
37495     },
37496
37497     getDDRepairXY : function(){
37498         return Roo.lib.Dom.getXY(this.iconNode);
37499     },
37500
37501     onRender : function(){
37502         this.render();
37503     },
37504
37505     render : function(bulkRender){
37506         var n = this.node, a = n.attributes;
37507         var targetNode = n.parentNode ?
37508               n.parentNode.ui.getContainer() : n.ownerTree.innerCt.dom;
37509
37510         if(!this.rendered){
37511             this.rendered = true;
37512
37513             this.renderElements(n, a, targetNode, bulkRender);
37514
37515             if(a.qtip){
37516                if(this.textNode.setAttributeNS){
37517                    this.textNode.setAttributeNS("ext", "qtip", a.qtip);
37518                    if(a.qtipTitle){
37519                        this.textNode.setAttributeNS("ext", "qtitle", a.qtipTitle);
37520                    }
37521                }else{
37522                    this.textNode.setAttribute("ext:qtip", a.qtip);
37523                    if(a.qtipTitle){
37524                        this.textNode.setAttribute("ext:qtitle", a.qtipTitle);
37525                    }
37526                }
37527             }else if(a.qtipCfg){
37528                 a.qtipCfg.target = Roo.id(this.textNode);
37529                 Roo.QuickTips.register(a.qtipCfg);
37530             }
37531             this.initEvents();
37532             if(!this.node.expanded){
37533                 this.updateExpandIcon();
37534             }
37535         }else{
37536             if(bulkRender === true) {
37537                 targetNode.appendChild(this.wrap);
37538             }
37539         }
37540     },
37541
37542     renderElements : function(n, a, targetNode, bulkRender)
37543     {
37544         // add some indent caching, this helps performance when rendering a large tree
37545         this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
37546         var t = n.getOwnerTree();
37547         var txt = t && t.renderer ? t.renderer(n.attributes) : Roo.util.Format.htmlEncode(n.text);
37548         if (typeof(n.attributes.html) != 'undefined') {
37549             txt = n.attributes.html;
37550         }
37551         var tip = t && t.rendererTip ? t.rendererTip(n.attributes) : txt;
37552         var cb = typeof a.checked == 'boolean';
37553         var href = a.href ? a.href : Roo.isGecko ? "" : "#";
37554         var buf = ['<li class="x-tree-node"><div class="x-tree-node-el ', a.cls,'">',
37555             '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
37556             '<img src="', this.emptyIcon, '" class="x-tree-ec-icon" />',
37557             '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on" />',
37558             cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : ' />')) : '',
37559             '<a hidefocus="on" href="',href,'" tabIndex="1" ',
37560              a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", 
37561                 '><span unselectable="on" qtip="' , tip ,'">',txt,"</span></a></div>",
37562             '<ul class="x-tree-node-ct" style="display:none;"></ul>',
37563             "</li>"];
37564
37565         if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
37566             this.wrap = Roo.DomHelper.insertHtml("beforeBegin",
37567                                 n.nextSibling.ui.getEl(), buf.join(""));
37568         }else{
37569             this.wrap = Roo.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
37570         }
37571
37572         this.elNode = this.wrap.childNodes[0];
37573         this.ctNode = this.wrap.childNodes[1];
37574         var cs = this.elNode.childNodes;
37575         this.indentNode = cs[0];
37576         this.ecNode = cs[1];
37577         this.iconNode = cs[2];
37578         var index = 3;
37579         if(cb){
37580             this.checkbox = cs[3];
37581             index++;
37582         }
37583         this.anchor = cs[index];
37584         this.textNode = cs[index].firstChild;
37585     },
37586
37587     getAnchor : function(){
37588         return this.anchor;
37589     },
37590
37591     getTextEl : function(){
37592         return this.textNode;
37593     },
37594
37595     getIconEl : function(){
37596         return this.iconNode;
37597     },
37598
37599     isChecked : function(){
37600         return this.checkbox ? this.checkbox.checked : false;
37601     },
37602
37603     updateExpandIcon : function(){
37604         if(this.rendered){
37605             var n = this.node, c1, c2;
37606             var cls = n.isLast() ? "x-tree-elbow-end" : "x-tree-elbow";
37607             var hasChild = n.hasChildNodes();
37608             if(hasChild){
37609                 if(n.expanded){
37610                     cls += "-minus";
37611                     c1 = "x-tree-node-collapsed";
37612                     c2 = "x-tree-node-expanded";
37613                 }else{
37614                     cls += "-plus";
37615                     c1 = "x-tree-node-expanded";
37616                     c2 = "x-tree-node-collapsed";
37617                 }
37618                 if(this.wasLeaf){
37619                     this.removeClass("x-tree-node-leaf");
37620                     this.wasLeaf = false;
37621                 }
37622                 if(this.c1 != c1 || this.c2 != c2){
37623                     Roo.fly(this.elNode).replaceClass(c1, c2);
37624                     this.c1 = c1; this.c2 = c2;
37625                 }
37626             }else{
37627                 // this changes non-leafs into leafs if they have no children.
37628                 // it's not very rational behaviour..
37629                 
37630                 if(!this.wasLeaf && this.node.leaf){
37631                     Roo.fly(this.elNode).replaceClass("x-tree-node-expanded", "x-tree-node-leaf");
37632                     delete this.c1;
37633                     delete this.c2;
37634                     this.wasLeaf = true;
37635                 }
37636             }
37637             var ecc = "x-tree-ec-icon "+cls;
37638             if(this.ecc != ecc){
37639                 this.ecNode.className = ecc;
37640                 this.ecc = ecc;
37641             }
37642         }
37643     },
37644
37645     getChildIndent : function(){
37646         if(!this.childIndent){
37647             var buf = [];
37648             var p = this.node;
37649             while(p){
37650                 if(!p.isRoot || (p.isRoot && p.ownerTree.rootVisible)){
37651                     if(!p.isLast()) {
37652                         buf.unshift('<img src="'+this.emptyIcon+'" class="x-tree-elbow-line" />');
37653                     } else {
37654                         buf.unshift('<img src="'+this.emptyIcon+'" class="x-tree-icon" />');
37655                     }
37656                 }
37657                 p = p.parentNode;
37658             }
37659             this.childIndent = buf.join("");
37660         }
37661         return this.childIndent;
37662     },
37663
37664     renderIndent : function(){
37665         if(this.rendered){
37666             var indent = "";
37667             var p = this.node.parentNode;
37668             if(p){
37669                 indent = p.ui.getChildIndent();
37670             }
37671             if(this.indentMarkup != indent){ // don't rerender if not required
37672                 this.indentNode.innerHTML = indent;
37673                 this.indentMarkup = indent;
37674             }
37675             this.updateExpandIcon();
37676         }
37677     }
37678 };
37679
37680 Roo.tree.RootTreeNodeUI = function(){
37681     Roo.tree.RootTreeNodeUI.superclass.constructor.apply(this, arguments);
37682 };
37683 Roo.extend(Roo.tree.RootTreeNodeUI, Roo.tree.TreeNodeUI, {
37684     render : function(){
37685         if(!this.rendered){
37686             var targetNode = this.node.ownerTree.innerCt.dom;
37687             this.node.expanded = true;
37688             targetNode.innerHTML = '<div class="x-tree-root-node"></div>';
37689             this.wrap = this.ctNode = targetNode.firstChild;
37690         }
37691     },
37692     collapse : function(){
37693     },
37694     expand : function(){
37695     }
37696 });/*
37697  * Based on:
37698  * Ext JS Library 1.1.1
37699  * Copyright(c) 2006-2007, Ext JS, LLC.
37700  *
37701  * Originally Released Under LGPL - original licence link has changed is not relivant.
37702  *
37703  * Fork - LGPL
37704  * <script type="text/javascript">
37705  */
37706 /**
37707  * @class Roo.tree.TreeLoader
37708  * @extends Roo.util.Observable
37709  * A TreeLoader provides for lazy loading of an {@link Roo.tree.TreeNode}'s child
37710  * nodes from a specified URL. The response must be a javascript Array definition
37711  * who's elements are node definition objects. eg:
37712  * <pre><code>
37713 {  success : true,
37714    data :      [
37715    
37716     { 'id': 1, 'text': 'A folder Node', 'leaf': false },
37717     { 'id': 2, 'text': 'A leaf Node', 'leaf': true }
37718     ]
37719 }
37720
37721
37722 </code></pre>
37723  * <br><br>
37724  * The old style respose with just an array is still supported, but not recommended.
37725  * <br><br>
37726  *
37727  * A server request is sent, and child nodes are loaded only when a node is expanded.
37728  * The loading node's id is passed to the server under the parameter name "node" to
37729  * enable the server to produce the correct child nodes.
37730  * <br><br>
37731  * To pass extra parameters, an event handler may be attached to the "beforeload"
37732  * event, and the parameters specified in the TreeLoader's baseParams property:
37733  * <pre><code>
37734     myTreeLoader.on("beforeload", function(treeLoader, node) {
37735         this.baseParams.category = node.attributes.category;
37736     }, this);
37737     
37738 </code></pre>
37739  *
37740  * This would pass an HTTP parameter called "category" to the server containing
37741  * the value of the Node's "category" attribute.
37742  * @constructor
37743  * Creates a new Treeloader.
37744  * @param {Object} config A config object containing config properties.
37745  */
37746 Roo.tree.TreeLoader = function(config){
37747     this.baseParams = {};
37748     this.requestMethod = "POST";
37749     Roo.apply(this, config);
37750
37751     this.addEvents({
37752     
37753         /**
37754          * @event beforeload
37755          * Fires before a network request is made to retrieve the Json text which specifies a node's children.
37756          * @param {Object} This TreeLoader object.
37757          * @param {Object} node The {@link Roo.tree.TreeNode} object being loaded.
37758          * @param {Object} callback The callback function specified in the {@link #load} call.
37759          */
37760         beforeload : true,
37761         /**
37762          * @event load
37763          * Fires when the node has been successfuly loaded.
37764          * @param {Object} This TreeLoader object.
37765          * @param {Object} node The {@link Roo.tree.TreeNode} object being loaded.
37766          * @param {Object} response The response object containing the data from the server.
37767          */
37768         load : true,
37769         /**
37770          * @event loadexception
37771          * Fires if the network request failed.
37772          * @param {Object} This TreeLoader object.
37773          * @param {Object} node The {@link Roo.tree.TreeNode} object being loaded.
37774          * @param {Object} response The response object containing the data from the server.
37775          */
37776         loadexception : true,
37777         /**
37778          * @event create
37779          * Fires before a node is created, enabling you to return custom Node types 
37780          * @param {Object} This TreeLoader object.
37781          * @param {Object} attr - the data returned from the AJAX call (modify it to suit)
37782          */
37783         create : true
37784     });
37785
37786     Roo.tree.TreeLoader.superclass.constructor.call(this);
37787 };
37788
37789 Roo.extend(Roo.tree.TreeLoader, Roo.util.Observable, {
37790     /**
37791     * @cfg {String} dataUrl The URL from which to request a Json string which
37792     * specifies an array of node definition object representing the child nodes
37793     * to be loaded.
37794     */
37795     /**
37796     * @cfg {String} requestMethod either GET or POST
37797     * defaults to POST (due to BC)
37798     * to be loaded.
37799     */
37800     /**
37801     * @cfg {Object} baseParams (optional) An object containing properties which
37802     * specify HTTP parameters to be passed to each request for child nodes.
37803     */
37804     /**
37805     * @cfg {Object} baseAttrs (optional) An object containing attributes to be added to all nodes
37806     * created by this loader. If the attributes sent by the server have an attribute in this object,
37807     * they take priority.
37808     */
37809     /**
37810     * @cfg {Object} uiProviders (optional) An object containing properties which
37811     * 
37812     * DEPRECATED - use 'create' event handler to modify attributes - which affect creation.
37813     * specify custom {@link Roo.tree.TreeNodeUI} implementations. If the optional
37814     * <i>uiProvider</i> attribute of a returned child node is a string rather
37815     * than a reference to a TreeNodeUI implementation, this that string value
37816     * is used as a property name in the uiProviders object. You can define the provider named
37817     * 'default' , and this will be used for all nodes (if no uiProvider is delivered by the node data)
37818     */
37819     uiProviders : {},
37820
37821     /**
37822     * @cfg {Boolean} clearOnLoad (optional) Default to true. Remove previously existing
37823     * child nodes before loading.
37824     */
37825     clearOnLoad : true,
37826
37827     /**
37828     * @cfg {String} root (optional) Default to false. Use this to read data from an object 
37829     * property on loading, rather than expecting an array. (eg. more compatible to a standard
37830     * Grid query { data : [ .....] }
37831     */
37832     
37833     root : false,
37834      /**
37835     * @cfg {String} queryParam (optional) 
37836     * Name of the query as it will be passed on the querystring (defaults to 'node')
37837     * eg. the request will be ?node=[id]
37838     */
37839     
37840     
37841     queryParam: false,
37842     
37843     /**
37844      * Load an {@link Roo.tree.TreeNode} from the URL specified in the constructor.
37845      * This is called automatically when a node is expanded, but may be used to reload
37846      * a node (or append new children if the {@link #clearOnLoad} option is false.)
37847      * @param {Roo.tree.TreeNode} node
37848      * @param {Function} callback
37849      */
37850     load : function(node, callback){
37851         if(this.clearOnLoad){
37852             while(node.firstChild){
37853                 node.removeChild(node.firstChild);
37854             }
37855         }
37856         if(node.attributes.children){ // preloaded json children
37857             var cs = node.attributes.children;
37858             for(var i = 0, len = cs.length; i < len; i++){
37859                 node.appendChild(this.createNode(cs[i]));
37860             }
37861             if(typeof callback == "function"){
37862                 callback();
37863             }
37864         }else if(this.dataUrl){
37865             this.requestData(node, callback);
37866         }
37867     },
37868
37869     getParams: function(node){
37870         var buf = [], bp = this.baseParams;
37871         for(var key in bp){
37872             if(typeof bp[key] != "function"){
37873                 buf.push(encodeURIComponent(key), "=", encodeURIComponent(bp[key]), "&");
37874             }
37875         }
37876         var n = this.queryParam === false ? 'node' : this.queryParam;
37877         buf.push(n + "=", encodeURIComponent(node.id));
37878         return buf.join("");
37879     },
37880
37881     requestData : function(node, callback){
37882         if(this.fireEvent("beforeload", this, node, callback) !== false){
37883             this.transId = Roo.Ajax.request({
37884                 method:this.requestMethod,
37885                 url: this.dataUrl||this.url,
37886                 success: this.handleResponse,
37887                 failure: this.handleFailure,
37888                 scope: this,
37889                 argument: {callback: callback, node: node},
37890                 params: this.getParams(node)
37891             });
37892         }else{
37893             // if the load is cancelled, make sure we notify
37894             // the node that we are done
37895             if(typeof callback == "function"){
37896                 callback();
37897             }
37898         }
37899     },
37900
37901     isLoading : function(){
37902         return this.transId ? true : false;
37903     },
37904
37905     abort : function(){
37906         if(this.isLoading()){
37907             Roo.Ajax.abort(this.transId);
37908         }
37909     },
37910
37911     // private
37912     createNode : function(attr)
37913     {
37914         // apply baseAttrs, nice idea Corey!
37915         if(this.baseAttrs){
37916             Roo.applyIf(attr, this.baseAttrs);
37917         }
37918         if(this.applyLoader !== false){
37919             attr.loader = this;
37920         }
37921         // uiProvider = depreciated..
37922         
37923         if(typeof(attr.uiProvider) == 'string'){
37924            attr.uiProvider = this.uiProviders[attr.uiProvider] || 
37925                 /**  eval:var:attr */ eval(attr.uiProvider);
37926         }
37927         if(typeof(this.uiProviders['default']) != 'undefined') {
37928             attr.uiProvider = this.uiProviders['default'];
37929         }
37930         
37931         this.fireEvent('create', this, attr);
37932         
37933         attr.leaf  = typeof(attr.leaf) == 'string' ? attr.leaf * 1 : attr.leaf;
37934         return(attr.leaf ?
37935                         new Roo.tree.TreeNode(attr) :
37936                         new Roo.tree.AsyncTreeNode(attr));
37937     },
37938
37939     processResponse : function(response, node, callback)
37940     {
37941         var json = response.responseText;
37942         try {
37943             
37944             var o = Roo.decode(json);
37945             
37946             if (this.root === false && typeof(o.success) != undefined) {
37947                 this.root = 'data'; // the default behaviour for list like data..
37948                 }
37949                 
37950             if (this.root !== false &&  !o.success) {
37951                 // it's a failure condition.
37952                 var a = response.argument;
37953                 this.fireEvent("loadexception", this, a.node, response);
37954                 Roo.log("Load failed - should have a handler really");
37955                 return;
37956             }
37957             
37958             
37959             
37960             if (this.root !== false) {
37961                  o = o[this.root];
37962             }
37963             
37964             for(var i = 0, len = o.length; i < len; i++){
37965                 var n = this.createNode(o[i]);
37966                 if(n){
37967                     node.appendChild(n);
37968                 }
37969             }
37970             if(typeof callback == "function"){
37971                 callback(this, node);
37972             }
37973         }catch(e){
37974             this.handleFailure(response);
37975         }
37976     },
37977
37978     handleResponse : function(response){
37979         this.transId = false;
37980         var a = response.argument;
37981         this.processResponse(response, a.node, a.callback);
37982         this.fireEvent("load", this, a.node, response);
37983     },
37984
37985     handleFailure : function(response)
37986     {
37987         // should handle failure better..
37988         this.transId = false;
37989         var a = response.argument;
37990         this.fireEvent("loadexception", this, a.node, response);
37991         if(typeof a.callback == "function"){
37992             a.callback(this, a.node);
37993         }
37994     }
37995 });/*
37996  * Based on:
37997  * Ext JS Library 1.1.1
37998  * Copyright(c) 2006-2007, Ext JS, LLC.
37999  *
38000  * Originally Released Under LGPL - original licence link has changed is not relivant.
38001  *
38002  * Fork - LGPL
38003  * <script type="text/javascript">
38004  */
38005
38006 /**
38007 * @class Roo.tree.TreeFilter
38008 * Note this class is experimental and doesn't update the indent (lines) or expand collapse icons of the nodes
38009 * @param {TreePanel} tree
38010 * @param {Object} config (optional)
38011  */
38012 Roo.tree.TreeFilter = function(tree, config){
38013     this.tree = tree;
38014     this.filtered = {};
38015     Roo.apply(this, config);
38016 };
38017
38018 Roo.tree.TreeFilter.prototype = {
38019     clearBlank:false,
38020     reverse:false,
38021     autoClear:false,
38022     remove:false,
38023
38024      /**
38025      * Filter the data by a specific attribute.
38026      * @param {String/RegExp} value Either string that the attribute value
38027      * should start with or a RegExp to test against the attribute
38028      * @param {String} attr (optional) The attribute passed in your node's attributes collection. Defaults to "text".
38029      * @param {TreeNode} startNode (optional) The node to start the filter at.
38030      */
38031     filter : function(value, attr, startNode){
38032         attr = attr || "text";
38033         var f;
38034         if(typeof value == "string"){
38035             var vlen = value.length;
38036             // auto clear empty filter
38037             if(vlen == 0 && this.clearBlank){
38038                 this.clear();
38039                 return;
38040             }
38041             value = value.toLowerCase();
38042             f = function(n){
38043                 return n.attributes[attr].substr(0, vlen).toLowerCase() == value;
38044             };
38045         }else if(value.exec){ // regex?
38046             f = function(n){
38047                 return value.test(n.attributes[attr]);
38048             };
38049         }else{
38050             throw 'Illegal filter type, must be string or regex';
38051         }
38052         this.filterBy(f, null, startNode);
38053         },
38054
38055     /**
38056      * Filter by a function. The passed function will be called with each
38057      * node in the tree (or from the startNode). If the function returns true, the node is kept
38058      * otherwise it is filtered. If a node is filtered, its children are also filtered.
38059      * @param {Function} fn The filter function
38060      * @param {Object} scope (optional) The scope of the function (defaults to the current node)
38061      */
38062     filterBy : function(fn, scope, startNode){
38063         startNode = startNode || this.tree.root;
38064         if(this.autoClear){
38065             this.clear();
38066         }
38067         var af = this.filtered, rv = this.reverse;
38068         var f = function(n){
38069             if(n == startNode){
38070                 return true;
38071             }
38072             if(af[n.id]){
38073                 return false;
38074             }
38075             var m = fn.call(scope || n, n);
38076             if(!m || rv){
38077                 af[n.id] = n;
38078                 n.ui.hide();
38079                 return false;
38080             }
38081             return true;
38082         };
38083         startNode.cascade(f);
38084         if(this.remove){
38085            for(var id in af){
38086                if(typeof id != "function"){
38087                    var n = af[id];
38088                    if(n && n.parentNode){
38089                        n.parentNode.removeChild(n);
38090                    }
38091                }
38092            }
38093         }
38094     },
38095
38096     /**
38097      * Clears the current filter. Note: with the "remove" option
38098      * set a filter cannot be cleared.
38099      */
38100     clear : function(){
38101         var t = this.tree;
38102         var af = this.filtered;
38103         for(var id in af){
38104             if(typeof id != "function"){
38105                 var n = af[id];
38106                 if(n){
38107                     n.ui.show();
38108                 }
38109             }
38110         }
38111         this.filtered = {};
38112     }
38113 };
38114 /*
38115  * Based on:
38116  * Ext JS Library 1.1.1
38117  * Copyright(c) 2006-2007, Ext JS, LLC.
38118  *
38119  * Originally Released Under LGPL - original licence link has changed is not relivant.
38120  *
38121  * Fork - LGPL
38122  * <script type="text/javascript">
38123  */
38124  
38125
38126 /**
38127  * @class Roo.tree.TreeSorter
38128  * Provides sorting of nodes in a TreePanel
38129  * 
38130  * @cfg {Boolean} folderSort True to sort leaf nodes under non leaf nodes
38131  * @cfg {String} property The named attribute on the node to sort by (defaults to text)
38132  * @cfg {String} dir The direction to sort (asc or desc) (defaults to asc)
38133  * @cfg {String} leafAttr The attribute used to determine leaf nodes in folder sort (defaults to "leaf")
38134  * @cfg {Boolean} caseSensitive true for case sensitive sort (defaults to false)
38135  * @cfg {Function} sortType A custom "casting" function used to convert node values before sorting
38136  * @constructor
38137  * @param {TreePanel} tree
38138  * @param {Object} config
38139  */
38140 Roo.tree.TreeSorter = function(tree, config){
38141     Roo.apply(this, config);
38142     tree.on("beforechildrenrendered", this.doSort, this);
38143     tree.on("append", this.updateSort, this);
38144     tree.on("insert", this.updateSort, this);
38145     
38146     var dsc = this.dir && this.dir.toLowerCase() == "desc";
38147     var p = this.property || "text";
38148     var sortType = this.sortType;
38149     var fs = this.folderSort;
38150     var cs = this.caseSensitive === true;
38151     var leafAttr = this.leafAttr || 'leaf';
38152
38153     this.sortFn = function(n1, n2){
38154         if(fs){
38155             if(n1.attributes[leafAttr] && !n2.attributes[leafAttr]){
38156                 return 1;
38157             }
38158             if(!n1.attributes[leafAttr] && n2.attributes[leafAttr]){
38159                 return -1;
38160             }
38161         }
38162         var v1 = sortType ? sortType(n1) : (cs ? n1.attributes[p] : n1.attributes[p].toUpperCase());
38163         var v2 = sortType ? sortType(n2) : (cs ? n2.attributes[p] : n2.attributes[p].toUpperCase());
38164         if(v1 < v2){
38165                         return dsc ? +1 : -1;
38166                 }else if(v1 > v2){
38167                         return dsc ? -1 : +1;
38168         }else{
38169                 return 0;
38170         }
38171     };
38172 };
38173
38174 Roo.tree.TreeSorter.prototype = {
38175     doSort : function(node){
38176         node.sort(this.sortFn);
38177     },
38178     
38179     compareNodes : function(n1, n2){
38180         return (n1.text.toUpperCase() > n2.text.toUpperCase() ? 1 : -1);
38181     },
38182     
38183     updateSort : function(tree, node){
38184         if(node.childrenRendered){
38185             this.doSort.defer(1, this, [node]);
38186         }
38187     }
38188 };/*
38189  * Based on:
38190  * Ext JS Library 1.1.1
38191  * Copyright(c) 2006-2007, Ext JS, LLC.
38192  *
38193  * Originally Released Under LGPL - original licence link has changed is not relivant.
38194  *
38195  * Fork - LGPL
38196  * <script type="text/javascript">
38197  */
38198
38199 if(Roo.dd.DropZone){
38200     
38201 Roo.tree.TreeDropZone = function(tree, config){
38202     this.allowParentInsert = false;
38203     this.allowContainerDrop = false;
38204     this.appendOnly = false;
38205     Roo.tree.TreeDropZone.superclass.constructor.call(this, tree.innerCt, config);
38206     this.tree = tree;
38207     this.lastInsertClass = "x-tree-no-status";
38208     this.dragOverData = {};
38209 };
38210
38211 Roo.extend(Roo.tree.TreeDropZone, Roo.dd.DropZone, {
38212     ddGroup : "TreeDD",
38213     scroll:  true,
38214     
38215     expandDelay : 1000,
38216     
38217     expandNode : function(node){
38218         if(node.hasChildNodes() && !node.isExpanded()){
38219             node.expand(false, null, this.triggerCacheRefresh.createDelegate(this));
38220         }
38221     },
38222     
38223     queueExpand : function(node){
38224         this.expandProcId = this.expandNode.defer(this.expandDelay, this, [node]);
38225     },
38226     
38227     cancelExpand : function(){
38228         if(this.expandProcId){
38229             clearTimeout(this.expandProcId);
38230             this.expandProcId = false;
38231         }
38232     },
38233     
38234     isValidDropPoint : function(n, pt, dd, e, data){
38235         if(!n || !data){ return false; }
38236         var targetNode = n.node;
38237         var dropNode = data.node;
38238         // default drop rules
38239         if(!(targetNode && targetNode.isTarget && pt)){
38240             return false;
38241         }
38242         if(pt == "append" && targetNode.allowChildren === false){
38243             return false;
38244         }
38245         if((pt == "above" || pt == "below") && (targetNode.parentNode && targetNode.parentNode.allowChildren === false)){
38246             return false;
38247         }
38248         if(dropNode && (targetNode == dropNode || dropNode.contains(targetNode))){
38249             return false;
38250         }
38251         // reuse the object
38252         var overEvent = this.dragOverData;
38253         overEvent.tree = this.tree;
38254         overEvent.target = targetNode;
38255         overEvent.data = data;
38256         overEvent.point = pt;
38257         overEvent.source = dd;
38258         overEvent.rawEvent = e;
38259         overEvent.dropNode = dropNode;
38260         overEvent.cancel = false;  
38261         var result = this.tree.fireEvent("nodedragover", overEvent);
38262         return overEvent.cancel === false && result !== false;
38263     },
38264     
38265     getDropPoint : function(e, n, dd)
38266     {
38267         var tn = n.node;
38268         if(tn.isRoot){
38269             return tn.allowChildren !== false ? "append" : false; // always append for root
38270         }
38271         var dragEl = n.ddel;
38272         var t = Roo.lib.Dom.getY(dragEl), b = t + dragEl.offsetHeight;
38273         var y = Roo.lib.Event.getPageY(e);
38274         //var noAppend = tn.allowChildren === false || tn.isLeaf();
38275         
38276         // we may drop nodes anywhere, as long as allowChildren has not been set to false..
38277         var noAppend = tn.allowChildren === false;
38278         if(this.appendOnly || tn.parentNode.allowChildren === false){
38279             return noAppend ? false : "append";
38280         }
38281         var noBelow = false;
38282         if(!this.allowParentInsert){
38283             noBelow = tn.hasChildNodes() && tn.isExpanded();
38284         }
38285         var q = (b - t) / (noAppend ? 2 : 3);
38286         if(y >= t && y < (t + q)){
38287             return "above";
38288         }else if(!noBelow && (noAppend || y >= b-q && y <= b)){
38289             return "below";
38290         }else{
38291             return "append";
38292         }
38293     },
38294     
38295     onNodeEnter : function(n, dd, e, data)
38296     {
38297         this.cancelExpand();
38298     },
38299     
38300     onNodeOver : function(n, dd, e, data)
38301     {
38302        
38303         var pt = this.getDropPoint(e, n, dd);
38304         var node = n.node;
38305         
38306         // auto node expand check
38307         if(!this.expandProcId && pt == "append" && node.hasChildNodes() && !n.node.isExpanded()){
38308             this.queueExpand(node);
38309         }else if(pt != "append"){
38310             this.cancelExpand();
38311         }
38312         
38313         // set the insert point style on the target node
38314         var returnCls = this.dropNotAllowed;
38315         if(this.isValidDropPoint(n, pt, dd, e, data)){
38316            if(pt){
38317                var el = n.ddel;
38318                var cls;
38319                if(pt == "above"){
38320                    returnCls = n.node.isFirst() ? "x-tree-drop-ok-above" : "x-tree-drop-ok-between";
38321                    cls = "x-tree-drag-insert-above";
38322                }else if(pt == "below"){
38323                    returnCls = n.node.isLast() ? "x-tree-drop-ok-below" : "x-tree-drop-ok-between";
38324                    cls = "x-tree-drag-insert-below";
38325                }else{
38326                    returnCls = "x-tree-drop-ok-append";
38327                    cls = "x-tree-drag-append";
38328                }
38329                if(this.lastInsertClass != cls){
38330                    Roo.fly(el).replaceClass(this.lastInsertClass, cls);
38331                    this.lastInsertClass = cls;
38332                }
38333            }
38334        }
38335        return returnCls;
38336     },
38337     
38338     onNodeOut : function(n, dd, e, data){
38339         
38340         this.cancelExpand();
38341         this.removeDropIndicators(n);
38342     },
38343     
38344     onNodeDrop : function(n, dd, e, data){
38345         var point = this.getDropPoint(e, n, dd);
38346         var targetNode = n.node;
38347         targetNode.ui.startDrop();
38348         if(!this.isValidDropPoint(n, point, dd, e, data)){
38349             targetNode.ui.endDrop();
38350             return false;
38351         }
38352         // first try to find the drop node
38353         var dropNode = data.node || (dd.getTreeNode ? dd.getTreeNode(data, targetNode, point, e) : null);
38354         var dropEvent = {
38355             tree : this.tree,
38356             target: targetNode,
38357             data: data,
38358             point: point,
38359             source: dd,
38360             rawEvent: e,
38361             dropNode: dropNode,
38362             cancel: !dropNode   
38363         };
38364         var retval = this.tree.fireEvent("beforenodedrop", dropEvent);
38365         if(retval === false || dropEvent.cancel === true || !dropEvent.dropNode){
38366             targetNode.ui.endDrop();
38367             return false;
38368         }
38369         // allow target changing
38370         targetNode = dropEvent.target;
38371         if(point == "append" && !targetNode.isExpanded()){
38372             targetNode.expand(false, null, function(){
38373                 this.completeDrop(dropEvent);
38374             }.createDelegate(this));
38375         }else{
38376             this.completeDrop(dropEvent);
38377         }
38378         return true;
38379     },
38380     
38381     completeDrop : function(de){
38382         var ns = de.dropNode, p = de.point, t = de.target;
38383         if(!(ns instanceof Array)){
38384             ns = [ns];
38385         }
38386         var n;
38387         for(var i = 0, len = ns.length; i < len; i++){
38388             n = ns[i];
38389             if(p == "above"){
38390                 t.parentNode.insertBefore(n, t);
38391             }else if(p == "below"){
38392                 t.parentNode.insertBefore(n, t.nextSibling);
38393             }else{
38394                 t.appendChild(n);
38395             }
38396         }
38397         n.ui.focus();
38398         if(this.tree.hlDrop){
38399             n.ui.highlight();
38400         }
38401         t.ui.endDrop();
38402         this.tree.fireEvent("nodedrop", de);
38403     },
38404     
38405     afterNodeMoved : function(dd, data, e, targetNode, dropNode){
38406         if(this.tree.hlDrop){
38407             dropNode.ui.focus();
38408             dropNode.ui.highlight();
38409         }
38410         this.tree.fireEvent("nodedrop", this.tree, targetNode, data, dd, e);
38411     },
38412     
38413     getTree : function(){
38414         return this.tree;
38415     },
38416     
38417     removeDropIndicators : function(n){
38418         if(n && n.ddel){
38419             var el = n.ddel;
38420             Roo.fly(el).removeClass([
38421                     "x-tree-drag-insert-above",
38422                     "x-tree-drag-insert-below",
38423                     "x-tree-drag-append"]);
38424             this.lastInsertClass = "_noclass";
38425         }
38426     },
38427     
38428     beforeDragDrop : function(target, e, id){
38429         this.cancelExpand();
38430         return true;
38431     },
38432     
38433     afterRepair : function(data){
38434         if(data && Roo.enableFx){
38435             data.node.ui.highlight();
38436         }
38437         this.hideProxy();
38438     } 
38439     
38440 });
38441
38442 }
38443 /*
38444  * Based on:
38445  * Ext JS Library 1.1.1
38446  * Copyright(c) 2006-2007, Ext JS, LLC.
38447  *
38448  * Originally Released Under LGPL - original licence link has changed is not relivant.
38449  *
38450  * Fork - LGPL
38451  * <script type="text/javascript">
38452  */
38453  
38454
38455 if(Roo.dd.DragZone){
38456 Roo.tree.TreeDragZone = function(tree, config){
38457     Roo.tree.TreeDragZone.superclass.constructor.call(this, tree.getTreeEl(), config);
38458     this.tree = tree;
38459 };
38460
38461 Roo.extend(Roo.tree.TreeDragZone, Roo.dd.DragZone, {
38462     ddGroup : "TreeDD",
38463    
38464     onBeforeDrag : function(data, e){
38465         var n = data.node;
38466         return n && n.draggable && !n.disabled;
38467     },
38468      
38469     
38470     onInitDrag : function(e){
38471         var data = this.dragData;
38472         this.tree.getSelectionModel().select(data.node);
38473         this.proxy.update("");
38474         data.node.ui.appendDDGhost(this.proxy.ghost.dom);
38475         this.tree.fireEvent("startdrag", this.tree, data.node, e);
38476     },
38477     
38478     getRepairXY : function(e, data){
38479         return data.node.ui.getDDRepairXY();
38480     },
38481     
38482     onEndDrag : function(data, e){
38483         this.tree.fireEvent("enddrag", this.tree, data.node, e);
38484         
38485         
38486     },
38487     
38488     onValidDrop : function(dd, e, id){
38489         this.tree.fireEvent("dragdrop", this.tree, this.dragData.node, dd, e);
38490         this.hideProxy();
38491     },
38492     
38493     beforeInvalidDrop : function(e, id){
38494         // this scrolls the original position back into view
38495         var sm = this.tree.getSelectionModel();
38496         sm.clearSelections();
38497         sm.select(this.dragData.node);
38498     }
38499 });
38500 }/*
38501  * Based on:
38502  * Ext JS Library 1.1.1
38503  * Copyright(c) 2006-2007, Ext JS, LLC.
38504  *
38505  * Originally Released Under LGPL - original licence link has changed is not relivant.
38506  *
38507  * Fork - LGPL
38508  * <script type="text/javascript">
38509  */
38510 /**
38511  * @class Roo.tree.TreeEditor
38512  * @extends Roo.Editor
38513  * Provides editor functionality for inline tree node editing.  Any valid {@link Roo.form.Field} can be used
38514  * as the editor field.
38515  * @constructor
38516  * @param {Object} config (used to be the tree panel.)
38517  * @param {Object} oldconfig DEPRECIATED Either a prebuilt {@link Roo.form.Field} instance or a Field config object
38518  * 
38519  * @cfg {Roo.tree.TreePanel} tree The tree to bind to.
38520  * @cfg {Roo.form.TextField} field [required] The field configuration
38521  *
38522  * 
38523  */
38524 Roo.tree.TreeEditor = function(config, oldconfig) { // was -- (tree, config){
38525     var tree = config;
38526     var field;
38527     if (oldconfig) { // old style..
38528         field = oldconfig.events ? oldconfig : new Roo.form.TextField(oldconfig);
38529     } else {
38530         // new style..
38531         tree = config.tree;
38532         config.field = config.field  || {};
38533         config.field.xtype = 'TextField';
38534         field = Roo.factory(config.field, Roo.form);
38535     }
38536     config = config || {};
38537     
38538     
38539     this.addEvents({
38540         /**
38541          * @event beforenodeedit
38542          * Fires when editing is initiated, but before the value changes.  Editing can be canceled by returning
38543          * false from the handler of this event.
38544          * @param {Editor} this
38545          * @param {Roo.tree.Node} node 
38546          */
38547         "beforenodeedit" : true
38548     });
38549     
38550     //Roo.log(config);
38551     Roo.tree.TreeEditor.superclass.constructor.call(this, field, config);
38552
38553     this.tree = tree;
38554
38555     tree.on('beforeclick', this.beforeNodeClick, this);
38556     tree.getTreeEl().on('mousedown', this.hide, this);
38557     this.on('complete', this.updateNode, this);
38558     this.on('beforestartedit', this.fitToTree, this);
38559     this.on('startedit', this.bindScroll, this, {delay:10});
38560     this.on('specialkey', this.onSpecialKey, this);
38561 };
38562
38563 Roo.extend(Roo.tree.TreeEditor, Roo.Editor, {
38564     /**
38565      * @cfg {String} alignment
38566      * The position to align to (see {@link Roo.Element#alignTo} for more details, defaults to "l-l").
38567      */
38568     alignment: "l-l",
38569     // inherit
38570     autoSize: false,
38571     /**
38572      * @cfg {Boolean} hideEl
38573      * True to hide the bound element while the editor is displayed (defaults to false)
38574      */
38575     hideEl : false,
38576     /**
38577      * @cfg {String} cls
38578      * CSS class to apply to the editor (defaults to "x-small-editor x-tree-editor")
38579      */
38580     cls: "x-small-editor x-tree-editor",
38581     /**
38582      * @cfg {Boolean} shim
38583      * True to shim the editor if selects/iframes could be displayed beneath it (defaults to false)
38584      */
38585     shim:false,
38586     // inherit
38587     shadow:"frame",
38588     /**
38589      * @cfg {Number} maxWidth
38590      * The maximum width in pixels of the editor field (defaults to 250).  Note that if the maxWidth would exceed
38591      * the containing tree element's size, it will be automatically limited for you to the container width, taking
38592      * scroll and client offsets into account prior to each edit.
38593      */
38594     maxWidth: 250,
38595
38596     editDelay : 350,
38597
38598     // private
38599     fitToTree : function(ed, el){
38600         var td = this.tree.getTreeEl().dom, nd = el.dom;
38601         if(td.scrollLeft >  nd.offsetLeft){ // ensure the node left point is visible
38602             td.scrollLeft = nd.offsetLeft;
38603         }
38604         var w = Math.min(
38605                 this.maxWidth,
38606                 (td.clientWidth > 20 ? td.clientWidth : td.offsetWidth) - Math.max(0, nd.offsetLeft-td.scrollLeft) - /*cushion*/5);
38607         this.setSize(w, '');
38608         
38609         return this.fireEvent('beforenodeedit', this, this.editNode);
38610         
38611     },
38612
38613     // private
38614     triggerEdit : function(node){
38615         this.completeEdit();
38616         this.editNode = node;
38617         this.startEdit(node.ui.textNode, node.text);
38618     },
38619
38620     // private
38621     bindScroll : function(){
38622         this.tree.getTreeEl().on('scroll', this.cancelEdit, this);
38623     },
38624
38625     // private
38626     beforeNodeClick : function(node, e){
38627         var sinceLast = (this.lastClick ? this.lastClick.getElapsed() : 0);
38628         this.lastClick = new Date();
38629         if(sinceLast > this.editDelay && this.tree.getSelectionModel().isSelected(node)){
38630             e.stopEvent();
38631             this.triggerEdit(node);
38632             return false;
38633         }
38634         return true;
38635     },
38636
38637     // private
38638     updateNode : function(ed, value){
38639         this.tree.getTreeEl().un('scroll', this.cancelEdit, this);
38640         this.editNode.setText(value);
38641     },
38642
38643     // private
38644     onHide : function(){
38645         Roo.tree.TreeEditor.superclass.onHide.call(this);
38646         if(this.editNode){
38647             this.editNode.ui.focus();
38648         }
38649     },
38650
38651     // private
38652     onSpecialKey : function(field, e){
38653         var k = e.getKey();
38654         if(k == e.ESC){
38655             e.stopEvent();
38656             this.cancelEdit();
38657         }else if(k == e.ENTER && !e.hasModifier()){
38658             e.stopEvent();
38659             this.completeEdit();
38660         }
38661     }
38662 });//<Script type="text/javascript">
38663 /*
38664  * Based on:
38665  * Ext JS Library 1.1.1
38666  * Copyright(c) 2006-2007, Ext JS, LLC.
38667  *
38668  * Originally Released Under LGPL - original licence link has changed is not relivant.
38669  *
38670  * Fork - LGPL
38671  * <script type="text/javascript">
38672  */
38673  
38674 /**
38675  * Not documented??? - probably should be...
38676  */
38677
38678 Roo.tree.ColumnNodeUI = Roo.extend(Roo.tree.TreeNodeUI, {
38679     //focus: Roo.emptyFn, // prevent odd scrolling behavior
38680     
38681     renderElements : function(n, a, targetNode, bulkRender){
38682         //consel.log("renderElements?");
38683         this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
38684
38685         var t = n.getOwnerTree();
38686         var tid = Pman.Tab.Document_TypesTree.tree.el.id;
38687         
38688         var cols = t.columns;
38689         var bw = t.borderWidth;
38690         var c = cols[0];
38691         var href = a.href ? a.href : Roo.isGecko ? "" : "#";
38692          var cb = typeof a.checked == "boolean";
38693         var tx = String.format('{0}',n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]));
38694         var colcls = 'x-t-' + tid + '-c0';
38695         var buf = [
38696             '<li class="x-tree-node">',
38697             
38698                 
38699                 '<div class="x-tree-node-el ', a.cls,'">',
38700                     // extran...
38701                     '<div class="x-tree-col ', colcls, '" style="width:', c.width-bw, 'px;">',
38702                 
38703                 
38704                         '<span class="x-tree-node-indent">',this.indentMarkup,'</span>',
38705                         '<img src="', this.emptyIcon, '" class="x-tree-ec-icon  " />',
38706                         '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',
38707                            (a.icon ? ' x-tree-node-inline-icon' : ''),
38708                            (a.iconCls ? ' '+a.iconCls : ''),
38709                            '" unselectable="on" />',
38710                         (cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + 
38711                              (a.checked ? 'checked="checked" />' : ' />')) : ''),
38712                              
38713                         '<a class="x-tree-node-anchor" hidefocus="on" href="',href,'" tabIndex="1" ',
38714                             (a.hrefTarget ? ' target="' +a.hrefTarget + '"' : ''), '>',
38715                             '<span unselectable="on" qtip="' + tx + '">',
38716                              tx,
38717                              '</span></a>' ,
38718                     '</div>',
38719                      '<a class="x-tree-node-anchor" hidefocus="on" href="',href,'" tabIndex="1" ',
38720                             (a.hrefTarget ? ' target="' +a.hrefTarget + '"' : ''), '>'
38721                  ];
38722         for(var i = 1, len = cols.length; i < len; i++){
38723             c = cols[i];
38724             colcls = 'x-t-' + tid + '-c' +i;
38725             tx = String.format('{0}', (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]));
38726             buf.push('<div class="x-tree-col ', colcls, ' ' ,(c.cls?c.cls:''),'" style="width:',c.width-bw,'px;">',
38727                         '<div class="x-tree-col-text" qtip="' + tx +'">',tx,"</div>",
38728                       "</div>");
38729          }
38730          
38731          buf.push(
38732             '</a>',
38733             '<div class="x-clear"></div></div>',
38734             '<ul class="x-tree-node-ct" style="display:none;"></ul>',
38735             "</li>");
38736         
38737         if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
38738             this.wrap = Roo.DomHelper.insertHtml("beforeBegin",
38739                                 n.nextSibling.ui.getEl(), buf.join(""));
38740         }else{
38741             this.wrap = Roo.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
38742         }
38743         var el = this.wrap.firstChild;
38744         this.elRow = el;
38745         this.elNode = el.firstChild;
38746         this.ranchor = el.childNodes[1];
38747         this.ctNode = this.wrap.childNodes[1];
38748         var cs = el.firstChild.childNodes;
38749         this.indentNode = cs[0];
38750         this.ecNode = cs[1];
38751         this.iconNode = cs[2];
38752         var index = 3;
38753         if(cb){
38754             this.checkbox = cs[3];
38755             index++;
38756         }
38757         this.anchor = cs[index];
38758         
38759         this.textNode = cs[index].firstChild;
38760         
38761         //el.on("click", this.onClick, this);
38762         //el.on("dblclick", this.onDblClick, this);
38763         
38764         
38765        // console.log(this);
38766     },
38767     initEvents : function(){
38768         Roo.tree.ColumnNodeUI.superclass.initEvents.call(this);
38769         
38770             
38771         var a = this.ranchor;
38772
38773         var el = Roo.get(a);
38774
38775         if(Roo.isOpera){ // opera render bug ignores the CSS
38776             el.setStyle("text-decoration", "none");
38777         }
38778
38779         el.on("click", this.onClick, this);
38780         el.on("dblclick", this.onDblClick, this);
38781         el.on("contextmenu", this.onContextMenu, this);
38782         
38783     },
38784     
38785     /*onSelectedChange : function(state){
38786         if(state){
38787             this.focus();
38788             this.addClass("x-tree-selected");
38789         }else{
38790             //this.blur();
38791             this.removeClass("x-tree-selected");
38792         }
38793     },*/
38794     addClass : function(cls){
38795         if(this.elRow){
38796             Roo.fly(this.elRow).addClass(cls);
38797         }
38798         
38799     },
38800     
38801     
38802     removeClass : function(cls){
38803         if(this.elRow){
38804             Roo.fly(this.elRow).removeClass(cls);
38805         }
38806     }
38807
38808     
38809     
38810 });//<Script type="text/javascript">
38811
38812 /*
38813  * Based on:
38814  * Ext JS Library 1.1.1
38815  * Copyright(c) 2006-2007, Ext JS, LLC.
38816  *
38817  * Originally Released Under LGPL - original licence link has changed is not relivant.
38818  *
38819  * Fork - LGPL
38820  * <script type="text/javascript">
38821  */
38822  
38823
38824 /**
38825  * @class Roo.tree.ColumnTree
38826  * @extends Roo.tree.TreePanel
38827  * @cfg {Object} columns  Including width, header, renderer, cls, dataIndex 
38828  * @cfg {int} borderWidth  compined right/left border allowance
38829  * @constructor
38830  * @param {String/HTMLElement/Element} el The container element
38831  * @param {Object} config
38832  */
38833 Roo.tree.ColumnTree =  function(el, config)
38834 {
38835    Roo.tree.ColumnTree.superclass.constructor.call(this, el , config);
38836    this.addEvents({
38837         /**
38838         * @event resize
38839         * Fire this event on a container when it resizes
38840         * @param {int} w Width
38841         * @param {int} h Height
38842         */
38843        "resize" : true
38844     });
38845     this.on('resize', this.onResize, this);
38846 };
38847
38848 Roo.extend(Roo.tree.ColumnTree, Roo.tree.TreePanel, {
38849     //lines:false,
38850     
38851     
38852     borderWidth: Roo.isBorderBox ? 0 : 2, 
38853     headEls : false,
38854     
38855     render : function(){
38856         // add the header.....
38857        
38858         Roo.tree.ColumnTree.superclass.render.apply(this);
38859         
38860         this.el.addClass('x-column-tree');
38861         
38862         this.headers = this.el.createChild(
38863             {cls:'x-tree-headers'},this.innerCt.dom);
38864    
38865         var cols = this.columns, c;
38866         var totalWidth = 0;
38867         this.headEls = [];
38868         var  len = cols.length;
38869         for(var i = 0; i < len; i++){
38870              c = cols[i];
38871              totalWidth += c.width;
38872             this.headEls.push(this.headers.createChild({
38873                  cls:'x-tree-hd ' + (c.cls?c.cls+'-hd':''),
38874                  cn: {
38875                      cls:'x-tree-hd-text',
38876                      html: c.header
38877                  },
38878                  style:'width:'+(c.width-this.borderWidth)+'px;'
38879              }));
38880         }
38881         this.headers.createChild({cls:'x-clear'});
38882         // prevent floats from wrapping when clipped
38883         this.headers.setWidth(totalWidth);
38884         //this.innerCt.setWidth(totalWidth);
38885         this.innerCt.setStyle({ overflow: 'auto' });
38886         this.onResize(this.width, this.height);
38887              
38888         
38889     },
38890     onResize : function(w,h)
38891     {
38892         this.height = h;
38893         this.width = w;
38894         // resize cols..
38895         this.innerCt.setWidth(this.width);
38896         this.innerCt.setHeight(this.height-20);
38897         
38898         // headers...
38899         var cols = this.columns, c;
38900         var totalWidth = 0;
38901         var expEl = false;
38902         var len = cols.length;
38903         for(var i = 0; i < len; i++){
38904             c = cols[i];
38905             if (this.autoExpandColumn !== false && c.dataIndex == this.autoExpandColumn) {
38906                 // it's the expander..
38907                 expEl  = this.headEls[i];
38908                 continue;
38909             }
38910             totalWidth += c.width;
38911             
38912         }
38913         if (expEl) {
38914             expEl.setWidth(  ((w - totalWidth)-this.borderWidth - 20));
38915         }
38916         this.headers.setWidth(w-20);
38917
38918         
38919         
38920         
38921     }
38922 });
38923 /*
38924  * Based on:
38925  * Ext JS Library 1.1.1
38926  * Copyright(c) 2006-2007, Ext JS, LLC.
38927  *
38928  * Originally Released Under LGPL - original licence link has changed is not relivant.
38929  *
38930  * Fork - LGPL
38931  * <script type="text/javascript">
38932  */
38933  
38934 /**
38935  * @class Roo.menu.Menu
38936  * @extends Roo.util.Observable
38937  * @children Roo.menu.Item Roo.menu.Separator Roo.menu.TextItem
38938  * A menu object.  This is the container to which you add all other menu items.  Menu can also serve a as a base class
38939  * when you want a specialzed menu based off of another component (like {@link Roo.menu.DateMenu} for example).
38940  * @constructor
38941  * Creates a new Menu
38942  * @param {Object} config Configuration options
38943  */
38944 Roo.menu.Menu = function(config){
38945     
38946     Roo.menu.Menu.superclass.constructor.call(this, config);
38947     
38948     this.id = this.id || Roo.id();
38949     this.addEvents({
38950         /**
38951          * @event beforeshow
38952          * Fires before this menu is displayed
38953          * @param {Roo.menu.Menu} this
38954          */
38955         beforeshow : true,
38956         /**
38957          * @event beforehide
38958          * Fires before this menu is hidden
38959          * @param {Roo.menu.Menu} this
38960          */
38961         beforehide : true,
38962         /**
38963          * @event show
38964          * Fires after this menu is displayed
38965          * @param {Roo.menu.Menu} this
38966          */
38967         show : true,
38968         /**
38969          * @event hide
38970          * Fires after this menu is hidden
38971          * @param {Roo.menu.Menu} this
38972          */
38973         hide : true,
38974         /**
38975          * @event click
38976          * Fires when this menu is clicked (or when the enter key is pressed while it is active)
38977          * @param {Roo.menu.Menu} this
38978          * @param {Roo.menu.Item} menuItem The menu item that was clicked
38979          * @param {Roo.EventObject} e
38980          */
38981         click : true,
38982         /**
38983          * @event mouseover
38984          * Fires when the mouse is hovering over this menu
38985          * @param {Roo.menu.Menu} this
38986          * @param {Roo.EventObject} e
38987          * @param {Roo.menu.Item} menuItem The menu item that was clicked
38988          */
38989         mouseover : true,
38990         /**
38991          * @event mouseout
38992          * Fires when the mouse exits this menu
38993          * @param {Roo.menu.Menu} this
38994          * @param {Roo.EventObject} e
38995          * @param {Roo.menu.Item} menuItem The menu item that was clicked
38996          */
38997         mouseout : true,
38998         /**
38999          * @event itemclick
39000          * Fires when a menu item contained in this menu is clicked
39001          * @param {Roo.menu.BaseItem} baseItem The BaseItem that was clicked
39002          * @param {Roo.EventObject} e
39003          */
39004         itemclick: true
39005     });
39006     if (this.registerMenu) {
39007         Roo.menu.MenuMgr.register(this);
39008     }
39009     
39010     var mis = this.items;
39011     this.items = new Roo.util.MixedCollection();
39012     if(mis){
39013         this.add.apply(this, mis);
39014     }
39015 };
39016
39017 Roo.extend(Roo.menu.Menu, Roo.util.Observable, {
39018     /**
39019      * @cfg {Number} minWidth The minimum width of the menu in pixels (defaults to 120)
39020      */
39021     minWidth : 120,
39022     /**
39023      * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop"
39024      * for bottom-right shadow (defaults to "sides")
39025      */
39026     shadow : "sides",
39027     /**
39028      * @cfg {String} subMenuAlign The {@link Roo.Element#alignTo} anchor position value to use for submenus of
39029      * this menu (defaults to "tl-tr?")
39030      */
39031     subMenuAlign : "tl-tr?",
39032     /**
39033      * @cfg {String} defaultAlign The default {@link Roo.Element#alignTo) anchor position value for this menu
39034      * relative to its element of origin (defaults to "tl-bl?")
39035      */
39036     defaultAlign : "tl-bl?",
39037     /**
39038      * @cfg {Boolean} allowOtherMenus True to allow multiple menus to be displayed at the same time (defaults to false)
39039      */
39040     allowOtherMenus : false,
39041     /**
39042      * @cfg {Boolean} registerMenu True (default) - means that clicking on screen etc. hides it.
39043      */
39044     registerMenu : true,
39045
39046     hidden:true,
39047
39048     // private
39049     render : function(){
39050         if(this.el){
39051             return;
39052         }
39053         var el = this.el = new Roo.Layer({
39054             cls: "x-menu",
39055             shadow:this.shadow,
39056             constrain: false,
39057             parentEl: this.parentEl || document.body,
39058             zindex:15000
39059         });
39060
39061         this.keyNav = new Roo.menu.MenuNav(this);
39062
39063         if(this.plain){
39064             el.addClass("x-menu-plain");
39065         }
39066         if(this.cls){
39067             el.addClass(this.cls);
39068         }
39069         // generic focus element
39070         this.focusEl = el.createChild({
39071             tag: "a", cls: "x-menu-focus", href: "#", onclick: "return false;", tabIndex:"-1"
39072         });
39073         var ul = el.createChild({tag: "ul", cls: "x-menu-list"});
39074         //disabling touch- as it's causing issues ..
39075         //ul.on(Roo.isTouch ? 'touchstart' : 'click'   , this.onClick, this);
39076         ul.on('click'   , this.onClick, this);
39077         
39078         
39079         ul.on("mouseover", this.onMouseOver, this);
39080         ul.on("mouseout", this.onMouseOut, this);
39081         this.items.each(function(item){
39082             if (item.hidden) {
39083                 return;
39084             }
39085             
39086             var li = document.createElement("li");
39087             li.className = "x-menu-list-item";
39088             ul.dom.appendChild(li);
39089             item.render(li, this);
39090         }, this);
39091         this.ul = ul;
39092         this.autoWidth();
39093     },
39094
39095     // private
39096     autoWidth : function(){
39097         var el = this.el, ul = this.ul;
39098         if(!el){
39099             return;
39100         }
39101         var w = this.width;
39102         if(w){
39103             el.setWidth(w);
39104         }else if(Roo.isIE){
39105             el.setWidth(this.minWidth);
39106             var t = el.dom.offsetWidth; // force recalc
39107             el.setWidth(ul.getWidth()+el.getFrameWidth("lr"));
39108         }
39109     },
39110
39111     // private
39112     delayAutoWidth : function(){
39113         if(this.rendered){
39114             if(!this.awTask){
39115                 this.awTask = new Roo.util.DelayedTask(this.autoWidth, this);
39116             }
39117             this.awTask.delay(20);
39118         }
39119     },
39120
39121     // private
39122     findTargetItem : function(e){
39123         var t = e.getTarget(".x-menu-list-item", this.ul,  true);
39124         if(t && t.menuItemId){
39125             return this.items.get(t.menuItemId);
39126         }
39127     },
39128
39129     // private
39130     onClick : function(e){
39131         Roo.log("menu.onClick");
39132         var t = this.findTargetItem(e);
39133         if(!t){
39134             return;
39135         }
39136         Roo.log(e);
39137         if (Roo.isTouch && e.type == 'touchstart' && t.menu  && !t.disabled) {
39138             if(t == this.activeItem && t.shouldDeactivate(e)){
39139                 this.activeItem.deactivate();
39140                 delete this.activeItem;
39141                 return;
39142             }
39143             if(t.canActivate){
39144                 this.setActiveItem(t, true);
39145             }
39146             return;
39147             
39148             
39149         }
39150         
39151         t.onClick(e);
39152         this.fireEvent("click", this, t, e);
39153     },
39154
39155     // private
39156     setActiveItem : function(item, autoExpand){
39157         if(item != this.activeItem){
39158             if(this.activeItem){
39159                 this.activeItem.deactivate();
39160             }
39161             this.activeItem = item;
39162             item.activate(autoExpand);
39163         }else if(autoExpand){
39164             item.expandMenu();
39165         }
39166     },
39167
39168     // private
39169     tryActivate : function(start, step){
39170         var items = this.items;
39171         for(var i = start, len = items.length; i >= 0 && i < len; i+= step){
39172             var item = items.get(i);
39173             if(!item.disabled && item.canActivate){
39174                 this.setActiveItem(item, false);
39175                 return item;
39176             }
39177         }
39178         return false;
39179     },
39180
39181     // private
39182     onMouseOver : function(e){
39183         var t;
39184         if(t = this.findTargetItem(e)){
39185             if(t.canActivate && !t.disabled){
39186                 this.setActiveItem(t, true);
39187             }
39188         }
39189         this.fireEvent("mouseover", this, e, t);
39190     },
39191
39192     // private
39193     onMouseOut : function(e){
39194         var t;
39195         if(t = this.findTargetItem(e)){
39196             if(t == this.activeItem && t.shouldDeactivate(e)){
39197                 this.activeItem.deactivate();
39198                 delete this.activeItem;
39199             }
39200         }
39201         this.fireEvent("mouseout", this, e, t);
39202     },
39203
39204     /**
39205      * Read-only.  Returns true if the menu is currently displayed, else false.
39206      * @type Boolean
39207      */
39208     isVisible : function(){
39209         return this.el && !this.hidden;
39210     },
39211
39212     /**
39213      * Displays this menu relative to another element
39214      * @param {String/HTMLElement/Roo.Element} element The element to align to
39215      * @param {String} position (optional) The {@link Roo.Element#alignTo} anchor position to use in aligning to
39216      * the element (defaults to this.defaultAlign)
39217      * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
39218      */
39219     show : function(el, pos, parentMenu){
39220         this.parentMenu = parentMenu;
39221         if(!this.el){
39222             this.render();
39223         }
39224         this.fireEvent("beforeshow", this);
39225         this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign), parentMenu, false);
39226     },
39227
39228     /**
39229      * Displays this menu at a specific xy position
39230      * @param {Array} xyPosition Contains X & Y [x, y] values for the position at which to show the menu (coordinates are page-based)
39231      * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
39232      */
39233     showAt : function(xy, parentMenu, /* private: */_e){
39234         this.parentMenu = parentMenu;
39235         if(!this.el){
39236             this.render();
39237         }
39238         if(_e !== false){
39239             this.fireEvent("beforeshow", this);
39240             xy = this.el.adjustForConstraints(xy);
39241         }
39242         this.el.setXY(xy);
39243         this.el.show();
39244         this.hidden = false;
39245         this.focus();
39246         this.fireEvent("show", this);
39247     },
39248
39249     focus : function(){
39250         if(!this.hidden){
39251             this.doFocus.defer(50, this);
39252         }
39253     },
39254
39255     doFocus : function(){
39256         if(!this.hidden){
39257             this.focusEl.focus();
39258         }
39259     },
39260
39261     /**
39262      * Hides this menu and optionally all parent menus
39263      * @param {Boolean} deep (optional) True to hide all parent menus recursively, if any (defaults to false)
39264      */
39265     hide : function(deep){
39266         if(this.el && this.isVisible()){
39267             this.fireEvent("beforehide", this);
39268             if(this.activeItem){
39269                 this.activeItem.deactivate();
39270                 this.activeItem = null;
39271             }
39272             this.el.hide();
39273             this.hidden = true;
39274             this.fireEvent("hide", this);
39275         }
39276         if(deep === true && this.parentMenu){
39277             this.parentMenu.hide(true);
39278         }
39279     },
39280
39281     /**
39282      * Addds one or more items of any type supported by the Menu class, or that can be converted into menu items.
39283      * Any of the following are valid:
39284      * <ul>
39285      * <li>Any menu item object based on {@link Roo.menu.Item}</li>
39286      * <li>An HTMLElement object which will be converted to a menu item</li>
39287      * <li>A menu item config object that will be created as a new menu item</li>
39288      * <li>A string, which can either be '-' or 'separator' to add a menu separator, otherwise
39289      * it will be converted into a {@link Roo.menu.TextItem} and added</li>
39290      * </ul>
39291      * Usage:
39292      * <pre><code>
39293 // Create the menu
39294 var menu = new Roo.menu.Menu();
39295
39296 // Create a menu item to add by reference
39297 var menuItem = new Roo.menu.Item({ text: 'New Item!' });
39298
39299 // Add a bunch of items at once using different methods.
39300 // Only the last item added will be returned.
39301 var item = menu.add(
39302     menuItem,                // add existing item by ref
39303     'Dynamic Item',          // new TextItem
39304     '-',                     // new separator
39305     { text: 'Config Item' }  // new item by config
39306 );
39307 </code></pre>
39308      * @param {Mixed} args One or more menu items, menu item configs or other objects that can be converted to menu items
39309      * @return {Roo.menu.Item} The menu item that was added, or the last one if multiple items were added
39310      */
39311     add : function(){
39312         var a = arguments, l = a.length, item;
39313         for(var i = 0; i < l; i++){
39314             var el = a[i];
39315             if ((typeof(el) == "object") && el.xtype && el.xns) {
39316                 el = Roo.factory(el, Roo.menu);
39317             }
39318             
39319             if(el.render){ // some kind of Item
39320                 item = this.addItem(el);
39321             }else if(typeof el == "string"){ // string
39322                 if(el == "separator" || el == "-"){
39323                     item = this.addSeparator();
39324                 }else{
39325                     item = this.addText(el);
39326                 }
39327             }else if(el.tagName || el.el){ // element
39328                 item = this.addElement(el);
39329             }else if(typeof el == "object"){ // must be menu item config?
39330                 item = this.addMenuItem(el);
39331             }
39332         }
39333         return item;
39334     },
39335
39336     /**
39337      * Returns this menu's underlying {@link Roo.Element} object
39338      * @return {Roo.Element} The element
39339      */
39340     getEl : function(){
39341         if(!this.el){
39342             this.render();
39343         }
39344         return this.el;
39345     },
39346
39347     /**
39348      * Adds a separator bar to the menu
39349      * @return {Roo.menu.Item} The menu item that was added
39350      */
39351     addSeparator : function(){
39352         return this.addItem(new Roo.menu.Separator());
39353     },
39354
39355     /**
39356      * Adds an {@link Roo.Element} object to the menu
39357      * @param {String/HTMLElement/Roo.Element} el The element or DOM node to add, or its id
39358      * @return {Roo.menu.Item} The menu item that was added
39359      */
39360     addElement : function(el){
39361         return this.addItem(new Roo.menu.BaseItem(el));
39362     },
39363
39364     /**
39365      * Adds an existing object based on {@link Roo.menu.Item} to the menu
39366      * @param {Roo.menu.Item} item The menu item to add
39367      * @return {Roo.menu.Item} The menu item that was added
39368      */
39369     addItem : function(item){
39370         this.items.add(item);
39371         if(this.ul){
39372             var li = document.createElement("li");
39373             li.className = "x-menu-list-item";
39374             this.ul.dom.appendChild(li);
39375             item.render(li, this);
39376             this.delayAutoWidth();
39377         }
39378         return item;
39379     },
39380
39381     /**
39382      * Creates a new {@link Roo.menu.Item} based an the supplied config object and adds it to the menu
39383      * @param {Object} config A MenuItem config object
39384      * @return {Roo.menu.Item} The menu item that was added
39385      */
39386     addMenuItem : function(config){
39387         if(!(config instanceof Roo.menu.Item)){
39388             if(typeof config.checked == "boolean"){ // must be check menu item config?
39389                 config = new Roo.menu.CheckItem(config);
39390             }else{
39391                 config = new Roo.menu.Item(config);
39392             }
39393         }
39394         return this.addItem(config);
39395     },
39396
39397     /**
39398      * Creates a new {@link Roo.menu.TextItem} with the supplied text and adds it to the menu
39399      * @param {String} text The text to display in the menu item
39400      * @return {Roo.menu.Item} The menu item that was added
39401      */
39402     addText : function(text){
39403         return this.addItem(new Roo.menu.TextItem({ text : text }));
39404     },
39405
39406     /**
39407      * Inserts an existing object based on {@link Roo.menu.Item} to the menu at a specified index
39408      * @param {Number} index The index in the menu's list of current items where the new item should be inserted
39409      * @param {Roo.menu.Item} item The menu item to add
39410      * @return {Roo.menu.Item} The menu item that was added
39411      */
39412     insert : function(index, item){
39413         this.items.insert(index, item);
39414         if(this.ul){
39415             var li = document.createElement("li");
39416             li.className = "x-menu-list-item";
39417             this.ul.dom.insertBefore(li, this.ul.dom.childNodes[index]);
39418             item.render(li, this);
39419             this.delayAutoWidth();
39420         }
39421         return item;
39422     },
39423
39424     /**
39425      * Removes an {@link Roo.menu.Item} from the menu and destroys the object
39426      * @param {Roo.menu.Item} item The menu item to remove
39427      */
39428     remove : function(item){
39429         this.items.removeKey(item.id);
39430         item.destroy();
39431     },
39432
39433     /**
39434      * Removes and destroys all items in the menu
39435      */
39436     removeAll : function(){
39437         var f;
39438         while(f = this.items.first()){
39439             this.remove(f);
39440         }
39441     }
39442 });
39443
39444 // MenuNav is a private utility class used internally by the Menu
39445 Roo.menu.MenuNav = function(menu){
39446     Roo.menu.MenuNav.superclass.constructor.call(this, menu.el);
39447     this.scope = this.menu = menu;
39448 };
39449
39450 Roo.extend(Roo.menu.MenuNav, Roo.KeyNav, {
39451     doRelay : function(e, h){
39452         var k = e.getKey();
39453         if(!this.menu.activeItem && e.isNavKeyPress() && k != e.SPACE && k != e.RETURN){
39454             this.menu.tryActivate(0, 1);
39455             return false;
39456         }
39457         return h.call(this.scope || this, e, this.menu);
39458     },
39459
39460     up : function(e, m){
39461         if(!m.tryActivate(m.items.indexOf(m.activeItem)-1, -1)){
39462             m.tryActivate(m.items.length-1, -1);
39463         }
39464     },
39465
39466     down : function(e, m){
39467         if(!m.tryActivate(m.items.indexOf(m.activeItem)+1, 1)){
39468             m.tryActivate(0, 1);
39469         }
39470     },
39471
39472     right : function(e, m){
39473         if(m.activeItem){
39474             m.activeItem.expandMenu(true);
39475         }
39476     },
39477
39478     left : function(e, m){
39479         m.hide();
39480         if(m.parentMenu && m.parentMenu.activeItem){
39481             m.parentMenu.activeItem.activate();
39482         }
39483     },
39484
39485     enter : function(e, m){
39486         if(m.activeItem){
39487             e.stopPropagation();
39488             m.activeItem.onClick(e);
39489             m.fireEvent("click", this, m.activeItem);
39490             return true;
39491         }
39492     }
39493 });/*
39494  * Based on:
39495  * Ext JS Library 1.1.1
39496  * Copyright(c) 2006-2007, Ext JS, LLC.
39497  *
39498  * Originally Released Under LGPL - original licence link has changed is not relivant.
39499  *
39500  * Fork - LGPL
39501  * <script type="text/javascript">
39502  */
39503  
39504 /**
39505  * @class Roo.menu.MenuMgr
39506  * Provides a common registry of all menu items on a page so that they can be easily accessed by id.
39507  * @static
39508  */
39509 Roo.menu.MenuMgr = function(){
39510    var menus, active, groups = {}, attached = false, lastShow = new Date();
39511
39512    // private - called when first menu is created
39513    function init(){
39514        menus = {};
39515        active = new Roo.util.MixedCollection();
39516        Roo.get(document).addKeyListener(27, function(){
39517            if(active.length > 0){
39518                hideAll();
39519            }
39520        });
39521    }
39522
39523    // private
39524    function hideAll(){
39525        if(active && active.length > 0){
39526            var c = active.clone();
39527            c.each(function(m){
39528                m.hide();
39529            });
39530        }
39531    }
39532
39533    // private
39534    function onHide(m){
39535        active.remove(m);
39536        if(active.length < 1){
39537            Roo.get(document).un("mousedown", onMouseDown);
39538            attached = false;
39539        }
39540    }
39541
39542    // private
39543    function onShow(m){
39544        var last = active.last();
39545        lastShow = new Date();
39546        active.add(m);
39547        if(!attached){
39548            Roo.get(document).on("mousedown", onMouseDown);
39549            attached = true;
39550        }
39551        if(m.parentMenu){
39552           m.getEl().setZIndex(parseInt(m.parentMenu.getEl().getStyle("z-index"), 10) + 3);
39553           m.parentMenu.activeChild = m;
39554        }else if(last && last.isVisible()){
39555           m.getEl().setZIndex(parseInt(last.getEl().getStyle("z-index"), 10) + 3);
39556        }
39557    }
39558
39559    // private
39560    function onBeforeHide(m){
39561        if(m.activeChild){
39562            m.activeChild.hide();
39563        }
39564        if(m.autoHideTimer){
39565            clearTimeout(m.autoHideTimer);
39566            delete m.autoHideTimer;
39567        }
39568    }
39569
39570    // private
39571    function onBeforeShow(m){
39572        var pm = m.parentMenu;
39573        if(!pm && !m.allowOtherMenus){
39574            hideAll();
39575        }else if(pm && pm.activeChild && active != m){
39576            pm.activeChild.hide();
39577        }
39578    }
39579
39580    // private
39581    function onMouseDown(e){
39582        if(lastShow.getElapsed() > 50 && active.length > 0 && !e.getTarget(".x-menu")){
39583            hideAll();
39584        }
39585    }
39586
39587    // private
39588    function onBeforeCheck(mi, state){
39589        if(state){
39590            var g = groups[mi.group];
39591            for(var i = 0, l = g.length; i < l; i++){
39592                if(g[i] != mi){
39593                    g[i].setChecked(false);
39594                }
39595            }
39596        }
39597    }
39598
39599    return {
39600
39601        /**
39602         * Hides all menus that are currently visible
39603         */
39604        hideAll : function(){
39605             hideAll();  
39606        },
39607
39608        // private
39609        register : function(menu){
39610            if(!menus){
39611                init();
39612            }
39613            menus[menu.id] = menu;
39614            menu.on("beforehide", onBeforeHide);
39615            menu.on("hide", onHide);
39616            menu.on("beforeshow", onBeforeShow);
39617            menu.on("show", onShow);
39618            var g = menu.group;
39619            if(g && menu.events["checkchange"]){
39620                if(!groups[g]){
39621                    groups[g] = [];
39622                }
39623                groups[g].push(menu);
39624                menu.on("checkchange", onCheck);
39625            }
39626        },
39627
39628         /**
39629          * Returns a {@link Roo.menu.Menu} object
39630          * @param {String/Object} menu The string menu id, an existing menu object reference, or a Menu config that will
39631          * be used to generate and return a new Menu instance.
39632          */
39633        get : function(menu){
39634            if(typeof menu == "string"){ // menu id
39635                return menus[menu];
39636            }else if(menu.events){  // menu instance
39637                return menu;
39638            }else if(typeof menu.length == 'number'){ // array of menu items?
39639                return new Roo.menu.Menu({items:menu});
39640            }else{ // otherwise, must be a config
39641                return new Roo.menu.Menu(menu);
39642            }
39643        },
39644
39645        // private
39646        unregister : function(menu){
39647            delete menus[menu.id];
39648            menu.un("beforehide", onBeforeHide);
39649            menu.un("hide", onHide);
39650            menu.un("beforeshow", onBeforeShow);
39651            menu.un("show", onShow);
39652            var g = menu.group;
39653            if(g && menu.events["checkchange"]){
39654                groups[g].remove(menu);
39655                menu.un("checkchange", onCheck);
39656            }
39657        },
39658
39659        // private
39660        registerCheckable : function(menuItem){
39661            var g = menuItem.group;
39662            if(g){
39663                if(!groups[g]){
39664                    groups[g] = [];
39665                }
39666                groups[g].push(menuItem);
39667                menuItem.on("beforecheckchange", onBeforeCheck);
39668            }
39669        },
39670
39671        // private
39672        unregisterCheckable : function(menuItem){
39673            var g = menuItem.group;
39674            if(g){
39675                groups[g].remove(menuItem);
39676                menuItem.un("beforecheckchange", onBeforeCheck);
39677            }
39678        }
39679    };
39680 }();/*
39681  * Based on:
39682  * Ext JS Library 1.1.1
39683  * Copyright(c) 2006-2007, Ext JS, LLC.
39684  *
39685  * Originally Released Under LGPL - original licence link has changed is not relivant.
39686  *
39687  * Fork - LGPL
39688  * <script type="text/javascript">
39689  */
39690  
39691
39692 /**
39693  * @class Roo.menu.BaseItem
39694  * @extends Roo.Component
39695  * @abstract
39696  * The base class for all items that render into menus.  BaseItem provides default rendering, activated state
39697  * management and base configuration options shared by all menu components.
39698  * @constructor
39699  * Creates a new BaseItem
39700  * @param {Object} config Configuration options
39701  */
39702 Roo.menu.BaseItem = function(config){
39703     Roo.menu.BaseItem.superclass.constructor.call(this, config);
39704
39705     this.addEvents({
39706         /**
39707          * @event click
39708          * Fires when this item is clicked
39709          * @param {Roo.menu.BaseItem} this
39710          * @param {Roo.EventObject} e
39711          */
39712         click: true,
39713         /**
39714          * @event activate
39715          * Fires when this item is activated
39716          * @param {Roo.menu.BaseItem} this
39717          */
39718         activate : true,
39719         /**
39720          * @event deactivate
39721          * Fires when this item is deactivated
39722          * @param {Roo.menu.BaseItem} this
39723          */
39724         deactivate : true
39725     });
39726
39727     if(this.handler){
39728         this.on("click", this.handler, this.scope, true);
39729     }
39730 };
39731
39732 Roo.extend(Roo.menu.BaseItem, Roo.Component, {
39733     /**
39734      * @cfg {Function} handler
39735      * A function that will handle the click event of this menu item (defaults to undefined)
39736      */
39737     /**
39738      * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to false)
39739      */
39740     canActivate : false,
39741     
39742      /**
39743      * @cfg {Boolean} hidden True to prevent creation of this menu item (defaults to false)
39744      */
39745     hidden: false,
39746     
39747     /**
39748      * @cfg {String} activeClass The CSS class to use when the item becomes activated (defaults to "x-menu-item-active")
39749      */
39750     activeClass : "x-menu-item-active",
39751     /**
39752      * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to true)
39753      */
39754     hideOnClick : true,
39755     /**
39756      * @cfg {Number} hideDelay Length of time in milliseconds to wait before hiding after a click (defaults to 100)
39757      */
39758     hideDelay : 100,
39759
39760     // private
39761     ctype: "Roo.menu.BaseItem",
39762
39763     // private
39764     actionMode : "container",
39765
39766     // private
39767     render : function(container, parentMenu){
39768         this.parentMenu = parentMenu;
39769         Roo.menu.BaseItem.superclass.render.call(this, container);
39770         this.container.menuItemId = this.id;
39771     },
39772
39773     // private
39774     onRender : function(container, position){
39775         this.el = Roo.get(this.el);
39776         container.dom.appendChild(this.el.dom);
39777     },
39778
39779     // private
39780     onClick : function(e){
39781         if(!this.disabled && this.fireEvent("click", this, e) !== false
39782                 && this.parentMenu.fireEvent("itemclick", this, e) !== false){
39783             this.handleClick(e);
39784         }else{
39785             e.stopEvent();
39786         }
39787     },
39788
39789     // private
39790     activate : function(){
39791         if(this.disabled){
39792             return false;
39793         }
39794         var li = this.container;
39795         li.addClass(this.activeClass);
39796         this.region = li.getRegion().adjust(2, 2, -2, -2);
39797         this.fireEvent("activate", this);
39798         return true;
39799     },
39800
39801     // private
39802     deactivate : function(){
39803         this.container.removeClass(this.activeClass);
39804         this.fireEvent("deactivate", this);
39805     },
39806
39807     // private
39808     shouldDeactivate : function(e){
39809         return !this.region || !this.region.contains(e.getPoint());
39810     },
39811
39812     // private
39813     handleClick : function(e){
39814         if(this.hideOnClick){
39815             this.parentMenu.hide.defer(this.hideDelay, this.parentMenu, [true]);
39816         }
39817     },
39818
39819     // private
39820     expandMenu : function(autoActivate){
39821         // do nothing
39822     },
39823
39824     // private
39825     hideMenu : function(){
39826         // do nothing
39827     }
39828 });/*
39829  * Based on:
39830  * Ext JS Library 1.1.1
39831  * Copyright(c) 2006-2007, Ext JS, LLC.
39832  *
39833  * Originally Released Under LGPL - original licence link has changed is not relivant.
39834  *
39835  * Fork - LGPL
39836  * <script type="text/javascript">
39837  */
39838  
39839 /**
39840  * @class Roo.menu.Adapter
39841  * @extends Roo.menu.BaseItem
39842  * @abstract
39843  * A base utility class that adapts a non-menu component so that it can be wrapped by a menu item and added to a menu.
39844  * It provides basic rendering, activation management and enable/disable logic required to work in menus.
39845  * @constructor
39846  * Creates a new Adapter
39847  * @param {Object} config Configuration options
39848  */
39849 Roo.menu.Adapter = function(component, config){
39850     Roo.menu.Adapter.superclass.constructor.call(this, config);
39851     this.component = component;
39852 };
39853 Roo.extend(Roo.menu.Adapter, Roo.menu.BaseItem, {
39854     // private
39855     canActivate : true,
39856
39857     // private
39858     onRender : function(container, position){
39859         this.component.render(container);
39860         this.el = this.component.getEl();
39861     },
39862
39863     // private
39864     activate : function(){
39865         if(this.disabled){
39866             return false;
39867         }
39868         this.component.focus();
39869         this.fireEvent("activate", this);
39870         return true;
39871     },
39872
39873     // private
39874     deactivate : function(){
39875         this.fireEvent("deactivate", this);
39876     },
39877
39878     // private
39879     disable : function(){
39880         this.component.disable();
39881         Roo.menu.Adapter.superclass.disable.call(this);
39882     },
39883
39884     // private
39885     enable : function(){
39886         this.component.enable();
39887         Roo.menu.Adapter.superclass.enable.call(this);
39888     }
39889 });/*
39890  * Based on:
39891  * Ext JS Library 1.1.1
39892  * Copyright(c) 2006-2007, Ext JS, LLC.
39893  *
39894  * Originally Released Under LGPL - original licence link has changed is not relivant.
39895  *
39896  * Fork - LGPL
39897  * <script type="text/javascript">
39898  */
39899
39900 /**
39901  * @class Roo.menu.TextItem
39902  * @extends Roo.menu.BaseItem
39903  * Adds a static text string to a menu, usually used as either a heading or group separator.
39904  * Note: old style constructor with text is still supported.
39905  * 
39906  * @constructor
39907  * Creates a new TextItem
39908  * @param {Object} cfg Configuration
39909  */
39910 Roo.menu.TextItem = function(cfg){
39911     if (typeof(cfg) == 'string') {
39912         this.text = cfg;
39913     } else {
39914         Roo.apply(this,cfg);
39915     }
39916     
39917     Roo.menu.TextItem.superclass.constructor.call(this);
39918 };
39919
39920 Roo.extend(Roo.menu.TextItem, Roo.menu.BaseItem, {
39921     /**
39922      * @cfg {String} text Text to show on item.
39923      */
39924     text : '',
39925     
39926     /**
39927      * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to false)
39928      */
39929     hideOnClick : false,
39930     /**
39931      * @cfg {String} itemCls The default CSS class to use for text items (defaults to "x-menu-text")
39932      */
39933     itemCls : "x-menu-text",
39934
39935     // private
39936     onRender : function(){
39937         var s = document.createElement("span");
39938         s.className = this.itemCls;
39939         s.innerHTML = this.text;
39940         this.el = s;
39941         Roo.menu.TextItem.superclass.onRender.apply(this, arguments);
39942     }
39943 });/*
39944  * Based on:
39945  * Ext JS Library 1.1.1
39946  * Copyright(c) 2006-2007, Ext JS, LLC.
39947  *
39948  * Originally Released Under LGPL - original licence link has changed is not relivant.
39949  *
39950  * Fork - LGPL
39951  * <script type="text/javascript">
39952  */
39953
39954 /**
39955  * @class Roo.menu.Separator
39956  * @extends Roo.menu.BaseItem
39957  * Adds a separator bar to a menu, used to divide logical groups of menu items. Generally you will
39958  * add one of these by using "-" in you call to add() or in your items config rather than creating one directly.
39959  * @constructor
39960  * @param {Object} config Configuration options
39961  */
39962 Roo.menu.Separator = function(config){
39963     Roo.menu.Separator.superclass.constructor.call(this, config);
39964 };
39965
39966 Roo.extend(Roo.menu.Separator, Roo.menu.BaseItem, {
39967     /**
39968      * @cfg {String} itemCls The default CSS class to use for separators (defaults to "x-menu-sep")
39969      */
39970     itemCls : "x-menu-sep",
39971     /**
39972      * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to false)
39973      */
39974     hideOnClick : false,
39975
39976     // private
39977     onRender : function(li){
39978         var s = document.createElement("span");
39979         s.className = this.itemCls;
39980         s.innerHTML = "&#160;";
39981         this.el = s;
39982         li.addClass("x-menu-sep-li");
39983         Roo.menu.Separator.superclass.onRender.apply(this, arguments);
39984     }
39985 });/*
39986  * Based on:
39987  * Ext JS Library 1.1.1
39988  * Copyright(c) 2006-2007, Ext JS, LLC.
39989  *
39990  * Originally Released Under LGPL - original licence link has changed is not relivant.
39991  *
39992  * Fork - LGPL
39993  * <script type="text/javascript">
39994  */
39995 /**
39996  * @class Roo.menu.Item
39997  * @extends Roo.menu.BaseItem
39998  * A base class for all menu items that require menu-related functionality (like sub-menus) and are not static
39999  * display items.  Item extends the base functionality of {@link Roo.menu.BaseItem} by adding menu-specific
40000  * activation and click handling.
40001  * @constructor
40002  * Creates a new Item
40003  * @param {Object} config Configuration options
40004  */
40005 Roo.menu.Item = function(config){
40006     Roo.menu.Item.superclass.constructor.call(this, config);
40007     if(this.menu){
40008         this.menu = Roo.menu.MenuMgr.get(this.menu);
40009     }
40010 };
40011 Roo.extend(Roo.menu.Item, Roo.menu.BaseItem, {
40012     /**
40013      * @cfg {Roo.menu.Menu} menu
40014      * A Sub menu
40015      */
40016     /**
40017      * @cfg {String} text
40018      * The text to show on the menu item.
40019      */
40020     text: '',
40021      /**
40022      * @cfg {String} html to render in menu
40023      * The text to show on the menu item (HTML version).
40024      */
40025     html: '',
40026     /**
40027      * @cfg {String} icon
40028      * The path to an icon to display in this menu item (defaults to Roo.BLANK_IMAGE_URL)
40029      */
40030     icon: undefined,
40031     /**
40032      * @cfg {String} itemCls The default CSS class to use for menu items (defaults to "x-menu-item")
40033      */
40034     itemCls : "x-menu-item",
40035     /**
40036      * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to true)
40037      */
40038     canActivate : true,
40039     /**
40040      * @cfg {Number} showDelay Length of time in milliseconds to wait before showing this item (defaults to 200)
40041      */
40042     showDelay: 200,
40043     // doc'd in BaseItem
40044     hideDelay: 200,
40045
40046     // private
40047     ctype: "Roo.menu.Item",
40048     
40049     // private
40050     onRender : function(container, position){
40051         var el = document.createElement("a");
40052         el.hideFocus = true;
40053         el.unselectable = "on";
40054         el.href = this.href || "#";
40055         if(this.hrefTarget){
40056             el.target = this.hrefTarget;
40057         }
40058         el.className = this.itemCls + (this.menu ?  " x-menu-item-arrow" : "") + (this.cls ?  " " + this.cls : "");
40059         
40060         var html = this.html.length ? this.html  : String.format('{0}',this.text);
40061         
40062         el.innerHTML = String.format(
40063                 '<img src="{0}" class="x-menu-item-icon {1}" />' + html,
40064                 this.icon || Roo.BLANK_IMAGE_URL, this.iconCls || '');
40065         this.el = el;
40066         Roo.menu.Item.superclass.onRender.call(this, container, position);
40067     },
40068
40069     /**
40070      * Sets the text to display in this menu item
40071      * @param {String} text The text to display
40072      * @param {Boolean} isHTML true to indicate text is pure html.
40073      */
40074     setText : function(text, isHTML){
40075         if (isHTML) {
40076             this.html = text;
40077         } else {
40078             this.text = text;
40079             this.html = '';
40080         }
40081         if(this.rendered){
40082             var html = this.html.length ? this.html  : String.format('{0}',this.text);
40083      
40084             this.el.update(String.format(
40085                 '<img src="{0}" class="x-menu-item-icon {2}">' + html,
40086                 this.icon || Roo.BLANK_IMAGE_URL, this.text, this.iconCls || ''));
40087             this.parentMenu.autoWidth();
40088         }
40089     },
40090
40091     // private
40092     handleClick : function(e){
40093         if(!this.href){ // if no link defined, stop the event automatically
40094             e.stopEvent();
40095         }
40096         Roo.menu.Item.superclass.handleClick.apply(this, arguments);
40097     },
40098
40099     // private
40100     activate : function(autoExpand){
40101         if(Roo.menu.Item.superclass.activate.apply(this, arguments)){
40102             this.focus();
40103             if(autoExpand){
40104                 this.expandMenu();
40105             }
40106         }
40107         return true;
40108     },
40109
40110     // private
40111     shouldDeactivate : function(e){
40112         if(Roo.menu.Item.superclass.shouldDeactivate.call(this, e)){
40113             if(this.menu && this.menu.isVisible()){
40114                 return !this.menu.getEl().getRegion().contains(e.getPoint());
40115             }
40116             return true;
40117         }
40118         return false;
40119     },
40120
40121     // private
40122     deactivate : function(){
40123         Roo.menu.Item.superclass.deactivate.apply(this, arguments);
40124         this.hideMenu();
40125     },
40126
40127     // private
40128     expandMenu : function(autoActivate){
40129         if(!this.disabled && this.menu){
40130             clearTimeout(this.hideTimer);
40131             delete this.hideTimer;
40132             if(!this.menu.isVisible() && !this.showTimer){
40133                 this.showTimer = this.deferExpand.defer(this.showDelay, this, [autoActivate]);
40134             }else if (this.menu.isVisible() && autoActivate){
40135                 this.menu.tryActivate(0, 1);
40136             }
40137         }
40138     },
40139
40140     // private
40141     deferExpand : function(autoActivate){
40142         delete this.showTimer;
40143         this.menu.show(this.container, this.parentMenu.subMenuAlign || "tl-tr?", this.parentMenu);
40144         if(autoActivate){
40145             this.menu.tryActivate(0, 1);
40146         }
40147     },
40148
40149     // private
40150     hideMenu : function(){
40151         clearTimeout(this.showTimer);
40152         delete this.showTimer;
40153         if(!this.hideTimer && this.menu && this.menu.isVisible()){
40154             this.hideTimer = this.deferHide.defer(this.hideDelay, this);
40155         }
40156     },
40157
40158     // private
40159     deferHide : function(){
40160         delete this.hideTimer;
40161         this.menu.hide();
40162     }
40163 });/*
40164  * Based on:
40165  * Ext JS Library 1.1.1
40166  * Copyright(c) 2006-2007, Ext JS, LLC.
40167  *
40168  * Originally Released Under LGPL - original licence link has changed is not relivant.
40169  *
40170  * Fork - LGPL
40171  * <script type="text/javascript">
40172  */
40173  
40174 /**
40175  * @class Roo.menu.CheckItem
40176  * @extends Roo.menu.Item
40177  * Adds a menu item that contains a checkbox by default, but can also be part of a radio group.
40178  * @constructor
40179  * Creates a new CheckItem
40180  * @param {Object} config Configuration options
40181  */
40182 Roo.menu.CheckItem = function(config){
40183     Roo.menu.CheckItem.superclass.constructor.call(this, config);
40184     this.addEvents({
40185         /**
40186          * @event beforecheckchange
40187          * Fires before the checked value is set, providing an opportunity to cancel if needed
40188          * @param {Roo.menu.CheckItem} this
40189          * @param {Boolean} checked The new checked value that will be set
40190          */
40191         "beforecheckchange" : true,
40192         /**
40193          * @event checkchange
40194          * Fires after the checked value has been set
40195          * @param {Roo.menu.CheckItem} this
40196          * @param {Boolean} checked The checked value that was set
40197          */
40198         "checkchange" : true
40199     });
40200     if(this.checkHandler){
40201         this.on('checkchange', this.checkHandler, this.scope);
40202     }
40203 };
40204 Roo.extend(Roo.menu.CheckItem, Roo.menu.Item, {
40205     /**
40206      * @cfg {String} group
40207      * All check items with the same group name will automatically be grouped into a single-select
40208      * radio button group (defaults to '')
40209      */
40210     /**
40211      * @cfg {String} itemCls The default CSS class to use for check items (defaults to "x-menu-item x-menu-check-item")
40212      */
40213     itemCls : "x-menu-item x-menu-check-item",
40214     /**
40215      * @cfg {String} groupClass The default CSS class to use for radio group check items (defaults to "x-menu-group-item")
40216      */
40217     groupClass : "x-menu-group-item",
40218
40219     /**
40220      * @cfg {Boolean} checked True to initialize this checkbox as checked (defaults to false).  Note that
40221      * if this checkbox is part of a radio group (group = true) only the last item in the group that is
40222      * initialized with checked = true will be rendered as checked.
40223      */
40224     checked: false,
40225
40226     // private
40227     ctype: "Roo.menu.CheckItem",
40228
40229     // private
40230     onRender : function(c){
40231         Roo.menu.CheckItem.superclass.onRender.apply(this, arguments);
40232         if(this.group){
40233             this.el.addClass(this.groupClass);
40234         }
40235         Roo.menu.MenuMgr.registerCheckable(this);
40236         if(this.checked){
40237             this.checked = false;
40238             this.setChecked(true, true);
40239         }
40240     },
40241
40242     // private
40243     destroy : function(){
40244         if(this.rendered){
40245             Roo.menu.MenuMgr.unregisterCheckable(this);
40246         }
40247         Roo.menu.CheckItem.superclass.destroy.apply(this, arguments);
40248     },
40249
40250     /**
40251      * Set the checked state of this item
40252      * @param {Boolean} checked The new checked value
40253      * @param {Boolean} suppressEvent (optional) True to prevent the checkchange event from firing (defaults to false)
40254      */
40255     setChecked : function(state, suppressEvent){
40256         if(this.checked != state && this.fireEvent("beforecheckchange", this, state) !== false){
40257             if(this.container){
40258                 this.container[state ? "addClass" : "removeClass"]("x-menu-item-checked");
40259             }
40260             this.checked = state;
40261             if(suppressEvent !== true){
40262                 this.fireEvent("checkchange", this, state);
40263             }
40264         }
40265     },
40266
40267     // private
40268     handleClick : function(e){
40269        if(!this.disabled && !(this.checked && this.group)){// disable unselect on radio item
40270            this.setChecked(!this.checked);
40271        }
40272        Roo.menu.CheckItem.superclass.handleClick.apply(this, arguments);
40273     }
40274 });/*
40275  * Based on:
40276  * Ext JS Library 1.1.1
40277  * Copyright(c) 2006-2007, Ext JS, LLC.
40278  *
40279  * Originally Released Under LGPL - original licence link has changed is not relivant.
40280  *
40281  * Fork - LGPL
40282  * <script type="text/javascript">
40283  */
40284  
40285 /**
40286  * @class Roo.menu.DateItem
40287  * @extends Roo.menu.Adapter
40288  * A menu item that wraps the {@link Roo.DatPicker} component.
40289  * @constructor
40290  * Creates a new DateItem
40291  * @param {Object} config Configuration options
40292  */
40293 Roo.menu.DateItem = function(config){
40294     Roo.menu.DateItem.superclass.constructor.call(this, new Roo.DatePicker(config), config);
40295     /** The Roo.DatePicker object @type Roo.DatePicker */
40296     this.picker = this.component;
40297     this.addEvents({select: true});
40298     
40299     this.picker.on("render", function(picker){
40300         picker.getEl().swallowEvent("click");
40301         picker.container.addClass("x-menu-date-item");
40302     });
40303
40304     this.picker.on("select", this.onSelect, this);
40305 };
40306
40307 Roo.extend(Roo.menu.DateItem, Roo.menu.Adapter, {
40308     // private
40309     onSelect : function(picker, date){
40310         this.fireEvent("select", this, date, picker);
40311         Roo.menu.DateItem.superclass.handleClick.call(this);
40312     }
40313 });/*
40314  * Based on:
40315  * Ext JS Library 1.1.1
40316  * Copyright(c) 2006-2007, Ext JS, LLC.
40317  *
40318  * Originally Released Under LGPL - original licence link has changed is not relivant.
40319  *
40320  * Fork - LGPL
40321  * <script type="text/javascript">
40322  */
40323  
40324 /**
40325  * @class Roo.menu.ColorItem
40326  * @extends Roo.menu.Adapter
40327  * A menu item that wraps the {@link Roo.ColorPalette} component.
40328  * @constructor
40329  * Creates a new ColorItem
40330  * @param {Object} config Configuration options
40331  */
40332 Roo.menu.ColorItem = function(config){
40333     Roo.menu.ColorItem.superclass.constructor.call(this, new Roo.ColorPalette(config), config);
40334     /** The Roo.ColorPalette object @type Roo.ColorPalette */
40335     this.palette = this.component;
40336     this.relayEvents(this.palette, ["select"]);
40337     if(this.selectHandler){
40338         this.on('select', this.selectHandler, this.scope);
40339     }
40340 };
40341 Roo.extend(Roo.menu.ColorItem, Roo.menu.Adapter);/*
40342  * Based on:
40343  * Ext JS Library 1.1.1
40344  * Copyright(c) 2006-2007, Ext JS, LLC.
40345  *
40346  * Originally Released Under LGPL - original licence link has changed is not relivant.
40347  *
40348  * Fork - LGPL
40349  * <script type="text/javascript">
40350  */
40351  
40352
40353 /**
40354  * @class Roo.menu.DateMenu
40355  * @extends Roo.menu.Menu
40356  * A menu containing a {@link Roo.menu.DateItem} component (which provides a date picker).
40357  * @constructor
40358  * Creates a new DateMenu
40359  * @param {Object} config Configuration options
40360  */
40361 Roo.menu.DateMenu = function(config){
40362     Roo.menu.DateMenu.superclass.constructor.call(this, config);
40363     this.plain = true;
40364     var di = new Roo.menu.DateItem(config);
40365     this.add(di);
40366     /**
40367      * The {@link Roo.DatePicker} instance for this DateMenu
40368      * @type DatePicker
40369      */
40370     this.picker = di.picker;
40371     /**
40372      * @event select
40373      * @param {DatePicker} picker
40374      * @param {Date} date
40375      */
40376     this.relayEvents(di, ["select"]);
40377     this.on('beforeshow', function(){
40378         if(this.picker){
40379             this.picker.hideMonthPicker(false);
40380         }
40381     }, this);
40382 };
40383 Roo.extend(Roo.menu.DateMenu, Roo.menu.Menu, {
40384     cls:'x-date-menu'
40385 });/*
40386  * Based on:
40387  * Ext JS Library 1.1.1
40388  * Copyright(c) 2006-2007, Ext JS, LLC.
40389  *
40390  * Originally Released Under LGPL - original licence link has changed is not relivant.
40391  *
40392  * Fork - LGPL
40393  * <script type="text/javascript">
40394  */
40395  
40396
40397 /**
40398  * @class Roo.menu.ColorMenu
40399  * @extends Roo.menu.Menu
40400  * A menu containing a {@link Roo.menu.ColorItem} component (which provides a basic color picker).
40401  * @constructor
40402  * Creates a new ColorMenu
40403  * @param {Object} config Configuration options
40404  */
40405 Roo.menu.ColorMenu = function(config){
40406     Roo.menu.ColorMenu.superclass.constructor.call(this, config);
40407     this.plain = true;
40408     var ci = new Roo.menu.ColorItem(config);
40409     this.add(ci);
40410     /**
40411      * The {@link Roo.ColorPalette} instance for this ColorMenu
40412      * @type ColorPalette
40413      */
40414     this.palette = ci.palette;
40415     /**
40416      * @event select
40417      * @param {ColorPalette} palette
40418      * @param {String} color
40419      */
40420     this.relayEvents(ci, ["select"]);
40421 };
40422 Roo.extend(Roo.menu.ColorMenu, Roo.menu.Menu);/*
40423  * Based on:
40424  * Ext JS Library 1.1.1
40425  * Copyright(c) 2006-2007, Ext JS, LLC.
40426  *
40427  * Originally Released Under LGPL - original licence link has changed is not relivant.
40428  *
40429  * Fork - LGPL
40430  * <script type="text/javascript">
40431  */
40432  
40433 /**
40434  * @class Roo.form.TextItem
40435  * @extends Roo.BoxComponent
40436  * Base class for form fields that provides default event handling, sizing, value handling and other functionality.
40437  * @constructor
40438  * Creates a new TextItem
40439  * @param {Object} config Configuration options
40440  */
40441 Roo.form.TextItem = function(config){
40442     Roo.form.TextItem.superclass.constructor.call(this, config);
40443 };
40444
40445 Roo.extend(Roo.form.TextItem, Roo.BoxComponent,  {
40446     
40447     /**
40448      * @cfg {String} tag the tag for this item (default div)
40449      */
40450     tag : 'div',
40451     /**
40452      * @cfg {String} html the content for this item
40453      */
40454     html : '',
40455     
40456     getAutoCreate : function()
40457     {
40458         var cfg = {
40459             id: this.id,
40460             tag: this.tag,
40461             html: this.html,
40462             cls: 'x-form-item'
40463         };
40464         
40465         return cfg;
40466         
40467     },
40468     
40469     onRender : function(ct, position)
40470     {
40471         Roo.form.TextItem.superclass.onRender.call(this, ct, position);
40472         
40473         if(!this.el){
40474             var cfg = this.getAutoCreate();
40475             if(!cfg.name){
40476                 cfg.name = typeof(this.name) == 'undefined' ? this.id : this.name;
40477             }
40478             if (!cfg.name.length) {
40479                 delete cfg.name;
40480             }
40481             this.el = ct.createChild(cfg, position);
40482         }
40483     },
40484     /*
40485      * setHTML
40486      * @param {String} html update the Contents of the element.
40487      */
40488     setHTML : function(html)
40489     {
40490         this.fieldEl.dom.innerHTML = html;
40491     }
40492     
40493 });/*
40494  * Based on:
40495  * Ext JS Library 1.1.1
40496  * Copyright(c) 2006-2007, Ext JS, LLC.
40497  *
40498  * Originally Released Under LGPL - original licence link has changed is not relivant.
40499  *
40500  * Fork - LGPL
40501  * <script type="text/javascript">
40502  */
40503  
40504 /**
40505  * @class Roo.form.Field
40506  * @extends Roo.BoxComponent
40507  * Base class for form fields that provides default event handling, sizing, value handling and other functionality.
40508  * @constructor
40509  * Creates a new Field
40510  * @param {Object} config Configuration options
40511  */
40512 Roo.form.Field = function(config){
40513     Roo.form.Field.superclass.constructor.call(this, config);
40514 };
40515
40516 Roo.extend(Roo.form.Field, Roo.BoxComponent,  {
40517     /**
40518      * @cfg {String} fieldLabel Label to use when rendering a form.
40519      */
40520        /**
40521      * @cfg {String} qtip Mouse over tip
40522      */
40523      
40524     /**
40525      * @cfg {String} invalidClass The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
40526      */
40527     invalidClass : "x-form-invalid",
40528     /**
40529      * @cfg {String} invalidText The error text to use when marking a field invalid and no message is provided (defaults to "The value in this field is invalid")
40530      */
40531     invalidText : "The value in this field is invalid",
40532     /**
40533      * @cfg {String} focusClass The CSS class to use when the field receives focus (defaults to "x-form-focus")
40534      */
40535     focusClass : "x-form-focus",
40536     /**
40537      * @cfg {String/Boolean} validationEvent The event that should initiate field validation. Set to false to disable
40538       automatic validation (defaults to "keyup").
40539      */
40540     validationEvent : "keyup",
40541     /**
40542      * @cfg {Boolean} validateOnBlur Whether the field should validate when it loses focus (defaults to true).
40543      */
40544     validateOnBlur : true,
40545     /**
40546      * @cfg {Number} validationDelay The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
40547      */
40548     validationDelay : 250,
40549     /**
40550      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
40551      * {tag: "input", type: "text", size: "20", autocomplete: "off"})
40552      */
40553     defaultAutoCreate : {tag: "input", type: "text", size: "20", autocomplete: "new-password"},
40554     /**
40555      * @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-field")
40556      */
40557     fieldClass : "x-form-field",
40558     /**
40559      * @cfg {String} msgTarget The location where error text should display.  Should be one of the following values (defaults to 'qtip'):
40560      *<pre>
40561 Value         Description
40562 -----------   ----------------------------------------------------------------------
40563 qtip          Display a quick tip when the user hovers over the field
40564 title         Display a default browser title attribute popup
40565 under         Add a block div beneath the field containing the error text
40566 side          Add an error icon to the right of the field with a popup on hover
40567 [element id]  Add the error text directly to the innerHTML of the specified element
40568 </pre>
40569      */
40570     msgTarget : 'qtip',
40571     /**
40572      * @cfg {String} msgFx <b>Experimental</b> The effect used when displaying a validation message under the field (defaults to 'normal').
40573      */
40574     msgFx : 'normal',
40575
40576     /**
40577      * @cfg {Boolean} readOnly True to mark the field as readOnly in HTML (defaults to false) -- Note: this only sets the element's readOnly DOM attribute.
40578      */
40579     readOnly : false,
40580
40581     /**
40582      * @cfg {Boolean} disabled True to disable the field (defaults to false).
40583      */
40584     disabled : false,
40585
40586     /**
40587      * @cfg {String} inputType The type attribute for input fields -- e.g. radio, text, password (defaults to "text").
40588      */
40589     inputType : undefined,
40590     
40591     /**
40592      * @cfg {Number} tabIndex The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyTo (defaults to undefined).
40593          */
40594         tabIndex : undefined,
40595         
40596     // private
40597     isFormField : true,
40598
40599     // private
40600     hasFocus : false,
40601     /**
40602      * @property {Roo.Element} fieldEl
40603      * Element Containing the rendered Field (with label etc.)
40604      */
40605     /**
40606      * @cfg {Mixed} value A value to initialize this field with.
40607      */
40608     value : undefined,
40609
40610     /**
40611      * @cfg {String} name The field's HTML name attribute.
40612      */
40613     /**
40614      * @cfg {String} cls A CSS class to apply to the field's underlying element.
40615      */
40616     // private
40617     loadedValue : false,
40618      
40619      
40620         // private ??
40621         initComponent : function(){
40622         Roo.form.Field.superclass.initComponent.call(this);
40623         this.addEvents({
40624             /**
40625              * @event focus
40626              * Fires when this field receives input focus.
40627              * @param {Roo.form.Field} this
40628              */
40629             focus : true,
40630             /**
40631              * @event blur
40632              * Fires when this field loses input focus.
40633              * @param {Roo.form.Field} this
40634              */
40635             blur : true,
40636             /**
40637              * @event specialkey
40638              * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed.  You can check
40639              * {@link Roo.EventObject#getKey} to determine which key was pressed.
40640              * @param {Roo.form.Field} this
40641              * @param {Roo.EventObject} e The event object
40642              */
40643             specialkey : true,
40644             /**
40645              * @event change
40646              * Fires just before the field blurs if the field value has changed.
40647              * @param {Roo.form.Field} this
40648              * @param {Mixed} newValue The new value
40649              * @param {Mixed} oldValue The original value
40650              */
40651             change : true,
40652             /**
40653              * @event invalid
40654              * Fires after the field has been marked as invalid.
40655              * @param {Roo.form.Field} this
40656              * @param {String} msg The validation message
40657              */
40658             invalid : true,
40659             /**
40660              * @event valid
40661              * Fires after the field has been validated with no errors.
40662              * @param {Roo.form.Field} this
40663              */
40664             valid : true,
40665              /**
40666              * @event keyup
40667              * Fires after the key up
40668              * @param {Roo.form.Field} this
40669              * @param {Roo.EventObject}  e The event Object
40670              */
40671             keyup : true
40672         });
40673     },
40674
40675     /**
40676      * Returns the name attribute of the field if available
40677      * @return {String} name The field name
40678      */
40679     getName: function(){
40680          return this.rendered && this.el.dom.name ? this.el.dom.name : (this.hiddenName || '');
40681     },
40682
40683     // private
40684     onRender : function(ct, position){
40685         Roo.form.Field.superclass.onRender.call(this, ct, position);
40686         if(!this.el){
40687             var cfg = this.getAutoCreate();
40688             if(!cfg.name){
40689                 cfg.name = typeof(this.name) == 'undefined' ? this.id : this.name;
40690             }
40691             if (!cfg.name.length) {
40692                 delete cfg.name;
40693             }
40694             if(this.inputType){
40695                 cfg.type = this.inputType;
40696             }
40697             this.el = ct.createChild(cfg, position);
40698         }
40699         var type = this.el.dom.type;
40700         if(type){
40701             if(type == 'password'){
40702                 type = 'text';
40703             }
40704             this.el.addClass('x-form-'+type);
40705         }
40706         if(this.readOnly){
40707             this.el.dom.readOnly = true;
40708         }
40709         if(this.tabIndex !== undefined){
40710             this.el.dom.setAttribute('tabIndex', this.tabIndex);
40711         }
40712
40713         this.el.addClass([this.fieldClass, this.cls]);
40714         this.initValue();
40715     },
40716
40717     /**
40718      * Apply the behaviors of this component to an existing element. <b>This is used instead of render().</b>
40719      * @param {String/HTMLElement/Element} el The id of the node, a DOM node or an existing Element
40720      * @return {Roo.form.Field} this
40721      */
40722     applyTo : function(target){
40723         this.allowDomMove = false;
40724         this.el = Roo.get(target);
40725         this.render(this.el.dom.parentNode);
40726         return this;
40727     },
40728
40729     // private
40730     initValue : function(){
40731         if(this.value !== undefined){
40732             this.setValue(this.value);
40733         }else if(this.el.dom.value.length > 0){
40734             this.setValue(this.el.dom.value);
40735         }
40736     },
40737
40738     /**
40739      * Returns true if this field has been changed since it was originally loaded and is not disabled.
40740      * DEPRICATED  - it never worked well - use hasChanged/resetHasChanged.
40741      */
40742     isDirty : function() {
40743         if(this.disabled) {
40744             return false;
40745         }
40746         return String(this.getValue()) !== String(this.originalValue);
40747     },
40748
40749     /**
40750      * stores the current value in loadedValue
40751      */
40752     resetHasChanged : function()
40753     {
40754         this.loadedValue = String(this.getValue());
40755     },
40756     /**
40757      * checks the current value against the 'loaded' value.
40758      * Note - will return false if 'resetHasChanged' has not been called first.
40759      */
40760     hasChanged : function()
40761     {
40762         if(this.disabled || this.readOnly) {
40763             return false;
40764         }
40765         return this.loadedValue !== false && String(this.getValue()) !== this.loadedValue;
40766     },
40767     
40768     
40769     
40770     // private
40771     afterRender : function(){
40772         Roo.form.Field.superclass.afterRender.call(this);
40773         this.initEvents();
40774     },
40775
40776     // private
40777     fireKey : function(e){
40778         //Roo.log('field ' + e.getKey());
40779         if(e.isNavKeyPress()){
40780             this.fireEvent("specialkey", this, e);
40781         }
40782     },
40783
40784     /**
40785      * Resets the current field value to the originally loaded value and clears any validation messages
40786      */
40787     reset : function(){
40788         this.setValue(this.resetValue);
40789         this.originalValue = this.getValue();
40790         this.clearInvalid();
40791     },
40792
40793     // private
40794     initEvents : function(){
40795         // safari killled keypress - so keydown is now used..
40796         this.el.on("keydown" , this.fireKey,  this);
40797         this.el.on("focus", this.onFocus,  this);
40798         this.el.on("blur", this.onBlur,  this);
40799         this.el.relayEvent('keyup', this);
40800
40801         // reference to original value for reset
40802         this.originalValue = this.getValue();
40803         this.resetValue =  this.getValue();
40804     },
40805
40806     // private
40807     onFocus : function(){
40808         if(!Roo.isOpera && this.focusClass){ // don't touch in Opera
40809             this.el.addClass(this.focusClass);
40810         }
40811         if(!this.hasFocus){
40812             this.hasFocus = true;
40813             this.startValue = this.getValue();
40814             this.fireEvent("focus", this);
40815         }
40816     },
40817
40818     beforeBlur : Roo.emptyFn,
40819
40820     // private
40821     onBlur : function(){
40822         this.beforeBlur();
40823         if(!Roo.isOpera && this.focusClass){ // don't touch in Opera
40824             this.el.removeClass(this.focusClass);
40825         }
40826         this.hasFocus = false;
40827         if(this.validationEvent !== false && this.validateOnBlur && this.validationEvent != "blur"){
40828             this.validate();
40829         }
40830         var v = this.getValue();
40831         if(String(v) !== String(this.startValue)){
40832             this.fireEvent('change', this, v, this.startValue);
40833         }
40834         this.fireEvent("blur", this);
40835     },
40836
40837     /**
40838      * Returns whether or not the field value is currently valid
40839      * @param {Boolean} preventMark True to disable marking the field invalid
40840      * @return {Boolean} True if the value is valid, else false
40841      */
40842     isValid : function(preventMark){
40843         if(this.disabled){
40844             return true;
40845         }
40846         var restore = this.preventMark;
40847         this.preventMark = preventMark === true;
40848         var v = this.validateValue(this.processValue(this.getRawValue()));
40849         this.preventMark = restore;
40850         return v;
40851     },
40852
40853     /**
40854      * Validates the field value
40855      * @return {Boolean} True if the value is valid, else false
40856      */
40857     validate : function(){
40858         if(this.disabled || this.validateValue(this.processValue(this.getRawValue()))){
40859             this.clearInvalid();
40860             return true;
40861         }
40862         return false;
40863     },
40864
40865     processValue : function(value){
40866         return value;
40867     },
40868
40869     // private
40870     // Subclasses should provide the validation implementation by overriding this
40871     validateValue : function(value){
40872         return true;
40873     },
40874
40875     /**
40876      * Mark this field as invalid
40877      * @param {String} msg The validation message
40878      */
40879     markInvalid : function(msg){
40880         if(!this.rendered || this.preventMark){ // not rendered
40881             return;
40882         }
40883         
40884         var obj = (typeof(this.combo) != 'undefined') ? this.combo : this; // fix the combox array!!
40885         
40886         obj.el.addClass(this.invalidClass);
40887         msg = msg || this.invalidText;
40888         switch(this.msgTarget){
40889             case 'qtip':
40890                 obj.el.dom.qtip = msg;
40891                 obj.el.dom.qclass = 'x-form-invalid-tip';
40892                 if(Roo.QuickTips){ // fix for floating editors interacting with DND
40893                     Roo.QuickTips.enable();
40894                 }
40895                 break;
40896             case 'title':
40897                 this.el.dom.title = msg;
40898                 break;
40899             case 'under':
40900                 if(!this.errorEl){
40901                     var elp = this.el.findParent('.x-form-element', 5, true);
40902                     this.errorEl = elp.createChild({cls:'x-form-invalid-msg'});
40903                     this.errorEl.setWidth(elp.getWidth(true)-20);
40904                 }
40905                 this.errorEl.update(msg);
40906                 Roo.form.Field.msgFx[this.msgFx].show(this.errorEl, this);
40907                 break;
40908             case 'side':
40909                 if(!this.errorIcon){
40910                     var elp = this.el.findParent('.x-form-element', 5, true);
40911                     this.errorIcon = elp.createChild({cls:'x-form-invalid-icon'});
40912                 }
40913                 this.alignErrorIcon();
40914                 this.errorIcon.dom.qtip = msg;
40915                 this.errorIcon.dom.qclass = 'x-form-invalid-tip';
40916                 this.errorIcon.show();
40917                 this.on('resize', this.alignErrorIcon, this);
40918                 break;
40919             default:
40920                 var t = Roo.getDom(this.msgTarget);
40921                 t.innerHTML = msg;
40922                 t.style.display = this.msgDisplay;
40923                 break;
40924         }
40925         this.fireEvent('invalid', this, msg);
40926     },
40927
40928     // private
40929     alignErrorIcon : function(){
40930         this.errorIcon.alignTo(this.el, 'tl-tr', [2, 0]);
40931     },
40932
40933     /**
40934      * Clear any invalid styles/messages for this field
40935      */
40936     clearInvalid : function(){
40937         if(!this.rendered || this.preventMark){ // not rendered
40938             return;
40939         }
40940         var obj = (typeof(this.combo) != 'undefined') ? this.combo : this; // fix the combox array!!
40941         
40942         obj.el.removeClass(this.invalidClass);
40943         switch(this.msgTarget){
40944             case 'qtip':
40945                 obj.el.dom.qtip = '';
40946                 break;
40947             case 'title':
40948                 this.el.dom.title = '';
40949                 break;
40950             case 'under':
40951                 if(this.errorEl){
40952                     Roo.form.Field.msgFx[this.msgFx].hide(this.errorEl, this);
40953                 }
40954                 break;
40955             case 'side':
40956                 if(this.errorIcon){
40957                     this.errorIcon.dom.qtip = '';
40958                     this.errorIcon.hide();
40959                     this.un('resize', this.alignErrorIcon, this);
40960                 }
40961                 break;
40962             default:
40963                 var t = Roo.getDom(this.msgTarget);
40964                 t.innerHTML = '';
40965                 t.style.display = 'none';
40966                 break;
40967         }
40968         this.fireEvent('valid', this);
40969     },
40970
40971     /**
40972      * Returns the raw data value which may or may not be a valid, defined value.  To return a normalized value see {@link #getValue}.
40973      * @return {Mixed} value The field value
40974      */
40975     getRawValue : function(){
40976         var v = this.el.getValue();
40977         
40978         return v;
40979     },
40980
40981     /**
40982      * Returns the normalized data value (undefined or emptyText will be returned as '').  To return the raw value see {@link #getRawValue}.
40983      * @return {Mixed} value The field value
40984      */
40985     getValue : function(){
40986         var v = this.el.getValue();
40987          
40988         return v;
40989     },
40990
40991     /**
40992      * Sets the underlying DOM field's value directly, bypassing validation.  To set the value with validation see {@link #setValue}.
40993      * @param {Mixed} value The value to set
40994      */
40995     setRawValue : function(v){
40996         return this.el.dom.value = (v === null || v === undefined ? '' : v);
40997     },
40998
40999     /**
41000      * Sets a data value into the field and validates it.  To set the value directly without validation see {@link #setRawValue}.
41001      * @param {Mixed} value The value to set
41002      */
41003     setValue : function(v){
41004         this.value = v;
41005         if(this.rendered){
41006             this.el.dom.value = (v === null || v === undefined ? '' : v);
41007              this.validate();
41008         }
41009     },
41010
41011     adjustSize : function(w, h){
41012         var s = Roo.form.Field.superclass.adjustSize.call(this, w, h);
41013         s.width = this.adjustWidth(this.el.dom.tagName, s.width);
41014         return s;
41015     },
41016
41017     adjustWidth : function(tag, w){
41018         tag = tag.toLowerCase();
41019         if(typeof w == 'number' && Roo.isStrict && !Roo.isSafari){
41020             if(Roo.isIE && (tag == 'input' || tag == 'textarea')){
41021                 if(tag == 'input'){
41022                     return w + 2;
41023                 }
41024                 if(tag == 'textarea'){
41025                     return w-2;
41026                 }
41027             }else if(Roo.isOpera){
41028                 if(tag == 'input'){
41029                     return w + 2;
41030                 }
41031                 if(tag == 'textarea'){
41032                     return w-2;
41033                 }
41034             }
41035         }
41036         return w;
41037     }
41038 });
41039
41040
41041 // anything other than normal should be considered experimental
41042 Roo.form.Field.msgFx = {
41043     normal : {
41044         show: function(msgEl, f){
41045             msgEl.setDisplayed('block');
41046         },
41047
41048         hide : function(msgEl, f){
41049             msgEl.setDisplayed(false).update('');
41050         }
41051     },
41052
41053     slide : {
41054         show: function(msgEl, f){
41055             msgEl.slideIn('t', {stopFx:true});
41056         },
41057
41058         hide : function(msgEl, f){
41059             msgEl.slideOut('t', {stopFx:true,useDisplay:true});
41060         }
41061     },
41062
41063     slideRight : {
41064         show: function(msgEl, f){
41065             msgEl.fixDisplay();
41066             msgEl.alignTo(f.el, 'tl-tr');
41067             msgEl.slideIn('l', {stopFx:true});
41068         },
41069
41070         hide : function(msgEl, f){
41071             msgEl.slideOut('l', {stopFx:true,useDisplay:true});
41072         }
41073     }
41074 };/*
41075  * Based on:
41076  * Ext JS Library 1.1.1
41077  * Copyright(c) 2006-2007, Ext JS, LLC.
41078  *
41079  * Originally Released Under LGPL - original licence link has changed is not relivant.
41080  *
41081  * Fork - LGPL
41082  * <script type="text/javascript">
41083  */
41084  
41085
41086 /**
41087  * @class Roo.form.TextField
41088  * @extends Roo.form.Field
41089  * Basic text field.  Can be used as a direct replacement for traditional text inputs, or as the base
41090  * class for more sophisticated input controls (like {@link Roo.form.TextArea} and {@link Roo.form.ComboBox}).
41091  * @constructor
41092  * Creates a new TextField
41093  * @param {Object} config Configuration options
41094  */
41095 Roo.form.TextField = function(config){
41096     Roo.form.TextField.superclass.constructor.call(this, config);
41097     this.addEvents({
41098         /**
41099          * @event autosize
41100          * Fires when the autosize function is triggered.  The field may or may not have actually changed size
41101          * according to the default logic, but this event provides a hook for the developer to apply additional
41102          * logic at runtime to resize the field if needed.
41103              * @param {Roo.form.Field} this This text field
41104              * @param {Number} width The new field width
41105              */
41106         autosize : true
41107     });
41108 };
41109
41110 Roo.extend(Roo.form.TextField, Roo.form.Field,  {
41111     /**
41112      * @cfg {Boolean} grow True if this field should automatically grow and shrink to its content
41113      */
41114     grow : false,
41115     /**
41116      * @cfg {Number} growMin The minimum width to allow when grow = true (defaults to 30)
41117      */
41118     growMin : 30,
41119     /**
41120      * @cfg {Number} growMax The maximum width to allow when grow = true (defaults to 800)
41121      */
41122     growMax : 800,
41123     /**
41124      * @cfg {String} vtype A validation type name as defined in {@link Roo.form.VTypes} (defaults to null)
41125      */
41126     vtype : null,
41127     /**
41128      * @cfg {String} maskRe An input mask regular expression that will be used to filter keystrokes that don't match (defaults to null)
41129      */
41130     maskRe : null,
41131     /**
41132      * @cfg {Boolean} disableKeyFilter True to disable input keystroke filtering (defaults to false)
41133      */
41134     disableKeyFilter : false,
41135     /**
41136      * @cfg {Boolean} allowBlank False to validate that the value length > 0 (defaults to true)
41137      */
41138     allowBlank : true,
41139     /**
41140      * @cfg {Number} minLength Minimum input field length required (defaults to 0)
41141      */
41142     minLength : 0,
41143     /**
41144      * @cfg {Number} maxLength Maximum input field length allowed (defaults to Number.MAX_VALUE)
41145      */
41146     maxLength : Number.MAX_VALUE,
41147     /**
41148      * @cfg {String} minLengthText Error text to display if the minimum length validation fails (defaults to "The minimum length for this field is {minLength}")
41149      */
41150     minLengthText : "The minimum length for this field is {0}",
41151     /**
41152      * @cfg {String} maxLengthText Error text to display if the maximum length validation fails (defaults to "The maximum length for this field is {maxLength}")
41153      */
41154     maxLengthText : "The maximum length for this field is {0}",
41155     /**
41156      * @cfg {Boolean} selectOnFocus True to automatically select any existing field text when the field receives input focus (defaults to false)
41157      */
41158     selectOnFocus : false,
41159     /**
41160      * @cfg {Boolean} allowLeadingSpace True to prevent the stripping of leading white space 
41161      */    
41162     allowLeadingSpace : false,
41163     /**
41164      * @cfg {String} blankText Error text to display if the allow blank validation fails (defaults to "This field is required")
41165      */
41166     blankText : "This field is required",
41167     /**
41168      * @cfg {Function} validator A custom validation function to be called during field validation (defaults to null).
41169      * If available, this function will be called only after the basic validators all return true, and will be passed the
41170      * current field value and expected to return boolean true if the value is valid or a string error message if invalid.
41171      */
41172     validator : null,
41173     /**
41174      * @cfg {RegExp} regex A JavaScript RegExp object to be tested against the field value during validation (defaults to null).
41175      * If available, this regex will be evaluated only after the basic validators all return true, and will be passed the
41176      * current field value.  If the test fails, the field will be marked invalid using {@link #regexText}.
41177      */
41178     regex : null,
41179     /**
41180      * @cfg {String} regexText The error text to display if {@link #regex} is used and the test fails during validation (defaults to "")
41181      */
41182     regexText : "",
41183     /**
41184      * @cfg {String} emptyText The default text to display in an empty field - placeholder... (defaults to null).
41185      */
41186     emptyText : null,
41187    
41188
41189     // private
41190     initEvents : function()
41191     {
41192         if (this.emptyText) {
41193             this.el.attr('placeholder', this.emptyText);
41194         }
41195         
41196         Roo.form.TextField.superclass.initEvents.call(this);
41197         if(this.validationEvent == 'keyup'){
41198             this.validationTask = new Roo.util.DelayedTask(this.validate, this);
41199             this.el.on('keyup', this.filterValidation, this);
41200         }
41201         else if(this.validationEvent !== false){
41202             this.el.on(this.validationEvent, this.validate, this, {buffer: this.validationDelay});
41203         }
41204         
41205         if(this.selectOnFocus){
41206             this.on("focus", this.preFocus, this);
41207         }
41208         if (!this.allowLeadingSpace) {
41209             this.on('blur', this.cleanLeadingSpace, this);
41210         }
41211         
41212         if(this.maskRe || (this.vtype && this.disableKeyFilter !== true && (this.maskRe = Roo.form.VTypes[this.vtype+'Mask']))){
41213             this.el.on("keypress", this.filterKeys, this);
41214         }
41215         if(this.grow){
41216             this.el.on("keyup", this.onKeyUp,  this, {buffer:50});
41217             this.el.on("click", this.autoSize,  this);
41218         }
41219         if(this.el.is('input[type=password]') && Roo.isSafari){
41220             this.el.on('keydown', this.SafariOnKeyDown, this);
41221         }
41222     },
41223
41224     processValue : function(value){
41225         if(this.stripCharsRe){
41226             var newValue = value.replace(this.stripCharsRe, '');
41227             if(newValue !== value){
41228                 this.setRawValue(newValue);
41229                 return newValue;
41230             }
41231         }
41232         return value;
41233     },
41234
41235     filterValidation : function(e){
41236         if(!e.isNavKeyPress()){
41237             this.validationTask.delay(this.validationDelay);
41238         }
41239     },
41240
41241     // private
41242     onKeyUp : function(e){
41243         if(!e.isNavKeyPress()){
41244             this.autoSize();
41245         }
41246     },
41247     // private - clean the leading white space
41248     cleanLeadingSpace : function(e)
41249     {
41250         if ( this.inputType == 'file') {
41251             return;
41252         }
41253         
41254         this.setValue((this.getValue() + '').replace(/^\s+/,''));
41255     },
41256     /**
41257      * Resets the current field value to the originally-loaded value and clears any validation messages.
41258      *  
41259      */
41260     reset : function(){
41261         Roo.form.TextField.superclass.reset.call(this);
41262        
41263     }, 
41264     // private
41265     preFocus : function(){
41266         
41267         if(this.selectOnFocus){
41268             this.el.dom.select();
41269         }
41270     },
41271
41272     
41273     // private
41274     filterKeys : function(e){
41275         var k = e.getKey();
41276         if(!Roo.isIE && (e.isNavKeyPress() || k == e.BACKSPACE || (k == e.DELETE && e.button == -1))){
41277             return;
41278         }
41279         var c = e.getCharCode(), cc = String.fromCharCode(c);
41280         if(Roo.isIE && (e.isSpecialKey() || !cc)){
41281             return;
41282         }
41283         if(!this.maskRe.test(cc)){
41284             e.stopEvent();
41285         }
41286     },
41287
41288     setValue : function(v){
41289         
41290         Roo.form.TextField.superclass.setValue.apply(this, arguments);
41291         
41292         this.autoSize();
41293     },
41294
41295     /**
41296      * Validates a value according to the field's validation rules and marks the field as invalid
41297      * if the validation fails
41298      * @param {Mixed} value The value to validate
41299      * @return {Boolean} True if the value is valid, else false
41300      */
41301     validateValue : function(value){
41302         if(value.length < 1)  { // if it's blank
41303              if(this.allowBlank){
41304                 this.clearInvalid();
41305                 return true;
41306              }else{
41307                 this.markInvalid(this.blankText);
41308                 return false;
41309              }
41310         }
41311         if(value.length < this.minLength){
41312             this.markInvalid(String.format(this.minLengthText, this.minLength));
41313             return false;
41314         }
41315         if(value.length > this.maxLength){
41316             this.markInvalid(String.format(this.maxLengthText, this.maxLength));
41317             return false;
41318         }
41319         if(this.vtype){
41320             var vt = Roo.form.VTypes;
41321             if(!vt[this.vtype](value, this)){
41322                 this.markInvalid(this.vtypeText || vt[this.vtype +'Text']);
41323                 return false;
41324             }
41325         }
41326         if(typeof this.validator == "function"){
41327             var msg = this.validator(value);
41328             if(msg !== true){
41329                 this.markInvalid(msg);
41330                 return false;
41331             }
41332         }
41333         if(this.regex && !this.regex.test(value)){
41334             this.markInvalid(this.regexText);
41335             return false;
41336         }
41337         return true;
41338     },
41339
41340     /**
41341      * Selects text in this field
41342      * @param {Number} start (optional) The index where the selection should start (defaults to 0)
41343      * @param {Number} end (optional) The index where the selection should end (defaults to the text length)
41344      */
41345     selectText : function(start, end){
41346         var v = this.getRawValue();
41347         if(v.length > 0){
41348             start = start === undefined ? 0 : start;
41349             end = end === undefined ? v.length : end;
41350             var d = this.el.dom;
41351             if(d.setSelectionRange){
41352                 d.setSelectionRange(start, end);
41353             }else if(d.createTextRange){
41354                 var range = d.createTextRange();
41355                 range.moveStart("character", start);
41356                 range.moveEnd("character", v.length-end);
41357                 range.select();
41358             }
41359         }
41360     },
41361
41362     /**
41363      * Automatically grows the field to accomodate the width of the text up to the maximum field width allowed.
41364      * This only takes effect if grow = true, and fires the autosize event.
41365      */
41366     autoSize : function(){
41367         if(!this.grow || !this.rendered){
41368             return;
41369         }
41370         if(!this.metrics){
41371             this.metrics = Roo.util.TextMetrics.createInstance(this.el);
41372         }
41373         var el = this.el;
41374         var v = el.dom.value;
41375         var d = document.createElement('div');
41376         d.appendChild(document.createTextNode(v));
41377         v = d.innerHTML;
41378         d = null;
41379         v += "&#160;";
41380         var w = Math.min(this.growMax, Math.max(this.metrics.getWidth(v) + /* add extra padding */ 10, this.growMin));
41381         this.el.setWidth(w);
41382         this.fireEvent("autosize", this, w);
41383     },
41384     
41385     // private
41386     SafariOnKeyDown : function(event)
41387     {
41388         // this is a workaround for a password hang bug on chrome/ webkit.
41389         
41390         var isSelectAll = false;
41391         
41392         if(this.el.dom.selectionEnd > 0){
41393             isSelectAll = (this.el.dom.selectionEnd - this.el.dom.selectionStart - this.getValue().length == 0) ? true : false;
41394         }
41395         if(((event.getKey() == 8 || event.getKey() == 46) && this.getValue().length ==1)){ // backspace and delete key
41396             event.preventDefault();
41397             this.setValue('');
41398             return;
41399         }
41400         
41401         if(isSelectAll && event.getCharCode() > 31){ // backspace and delete key
41402             
41403             event.preventDefault();
41404             // this is very hacky as keydown always get's upper case.
41405             
41406             var cc = String.fromCharCode(event.getCharCode());
41407             
41408             
41409             this.setValue( event.shiftKey ?  cc : cc.toLowerCase());
41410             
41411         }
41412         
41413         
41414     }
41415 });/*
41416  * Based on:
41417  * Ext JS Library 1.1.1
41418  * Copyright(c) 2006-2007, Ext JS, LLC.
41419  *
41420  * Originally Released Under LGPL - original licence link has changed is not relivant.
41421  *
41422  * Fork - LGPL
41423  * <script type="text/javascript">
41424  */
41425  
41426 /**
41427  * @class Roo.form.Hidden
41428  * @extends Roo.form.TextField
41429  * Simple Hidden element used on forms 
41430  * 
41431  * usage: form.add(new Roo.form.HiddenField({ 'name' : 'test1' }));
41432  * 
41433  * @constructor
41434  * Creates a new Hidden form element.
41435  * @param {Object} config Configuration options
41436  */
41437
41438
41439
41440 // easy hidden field...
41441 Roo.form.Hidden = function(config){
41442     Roo.form.Hidden.superclass.constructor.call(this, config);
41443 };
41444   
41445 Roo.extend(Roo.form.Hidden, Roo.form.TextField, {
41446     fieldLabel:      '',
41447     inputType:      'hidden',
41448     width:          50,
41449     allowBlank:     true,
41450     labelSeparator: '',
41451     hidden:         true,
41452     itemCls :       'x-form-item-display-none'
41453
41454
41455 });
41456
41457
41458 /*
41459  * Based on:
41460  * Ext JS Library 1.1.1
41461  * Copyright(c) 2006-2007, Ext JS, LLC.
41462  *
41463  * Originally Released Under LGPL - original licence link has changed is not relivant.
41464  *
41465  * Fork - LGPL
41466  * <script type="text/javascript">
41467  */
41468  
41469 /**
41470  * @class Roo.form.TriggerField
41471  * @extends Roo.form.TextField
41472  * Provides a convenient wrapper for TextFields that adds a clickable trigger button (looks like a combobox by default).
41473  * The trigger has no default action, so you must assign a function to implement the trigger click handler by
41474  * overriding {@link #onTriggerClick}. You can create a TriggerField directly, as it renders exactly like a combobox
41475  * for which you can provide a custom implementation.  For example:
41476  * <pre><code>
41477 var trigger = new Roo.form.TriggerField();
41478 trigger.onTriggerClick = myTriggerFn;
41479 trigger.applyTo('my-field');
41480 </code></pre>
41481  *
41482  * However, in general you will most likely want to use TriggerField as the base class for a reusable component.
41483  * {@link Roo.form.DateField} and {@link Roo.form.ComboBox} are perfect examples of this.
41484  * @cfg {String} triggerClass An additional CSS class used to style the trigger button.  The trigger will always get the
41485  * class 'x-form-trigger' by default and triggerClass will be <b>appended</b> if specified.
41486  * @constructor
41487  * Create a new TriggerField.
41488  * @param {Object} config Configuration options (valid {@Roo.form.TextField} config options will also be applied
41489  * to the base TextField)
41490  */
41491 Roo.form.TriggerField = function(config){
41492     this.mimicing = false;
41493     Roo.form.TriggerField.superclass.constructor.call(this, config);
41494 };
41495
41496 Roo.extend(Roo.form.TriggerField, Roo.form.TextField,  {
41497     /**
41498      * @cfg {String} triggerClass A CSS class to apply to the trigger
41499      */
41500     /**
41501      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
41502      * {tag: "input", type: "text", size: "16", autocomplete: "off"})
41503      */
41504     defaultAutoCreate : {tag: "input", type: "text", size: "16", autocomplete: "new-password"},
41505     /**
41506      * @cfg {Boolean} hideTrigger True to hide the trigger element and display only the base text field (defaults to false)
41507      */
41508     hideTrigger:false,
41509
41510     /** @cfg {Boolean} grow @hide */
41511     /** @cfg {Number} growMin @hide */
41512     /** @cfg {Number} growMax @hide */
41513
41514     /**
41515      * @hide 
41516      * @method
41517      */
41518     autoSize: Roo.emptyFn,
41519     // private
41520     monitorTab : true,
41521     // private
41522     deferHeight : true,
41523
41524     
41525     actionMode : 'wrap',
41526     // private
41527     onResize : function(w, h){
41528         Roo.form.TriggerField.superclass.onResize.apply(this, arguments);
41529         if(typeof w == 'number'){
41530             var x = w - this.trigger.getWidth();
41531             this.el.setWidth(this.adjustWidth('input', x));
41532             this.trigger.setStyle('left', x+'px');
41533         }
41534     },
41535
41536     // private
41537     adjustSize : Roo.BoxComponent.prototype.adjustSize,
41538
41539     // private
41540     getResizeEl : function(){
41541         return this.wrap;
41542     },
41543
41544     // private
41545     getPositionEl : function(){
41546         return this.wrap;
41547     },
41548
41549     // private
41550     alignErrorIcon : function(){
41551         this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
41552     },
41553
41554     // private
41555     onRender : function(ct, position){
41556         Roo.form.TriggerField.superclass.onRender.call(this, ct, position);
41557         this.wrap = this.el.wrap({cls: "x-form-field-wrap"});
41558         this.trigger = this.wrap.createChild(this.triggerConfig ||
41559                 {tag: "img", src: Roo.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.triggerClass});
41560         if(this.hideTrigger){
41561             this.trigger.setDisplayed(false);
41562         }
41563         this.initTrigger();
41564         if(!this.width){
41565             this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
41566         }
41567     },
41568
41569     // private
41570     initTrigger : function(){
41571         this.trigger.on("click", this.onTriggerClick, this, {preventDefault:true});
41572         this.trigger.addClassOnOver('x-form-trigger-over');
41573         this.trigger.addClassOnClick('x-form-trigger-click');
41574     },
41575
41576     // private
41577     onDestroy : function(){
41578         if(this.trigger){
41579             this.trigger.removeAllListeners();
41580             this.trigger.remove();
41581         }
41582         if(this.wrap){
41583             this.wrap.remove();
41584         }
41585         Roo.form.TriggerField.superclass.onDestroy.call(this);
41586     },
41587
41588     // private
41589     onFocus : function(){
41590         Roo.form.TriggerField.superclass.onFocus.call(this);
41591         if(!this.mimicing){
41592             this.wrap.addClass('x-trigger-wrap-focus');
41593             this.mimicing = true;
41594             Roo.get(Roo.isIE ? document.body : document).on("mousedown", this.mimicBlur, this);
41595             if(this.monitorTab){
41596                 this.el.on("keydown", this.checkTab, this);
41597             }
41598         }
41599     },
41600
41601     // private
41602     checkTab : function(e){
41603         if(e.getKey() == e.TAB){
41604             this.triggerBlur();
41605         }
41606     },
41607
41608     // private
41609     onBlur : function(){
41610         // do nothing
41611     },
41612
41613     // private
41614     mimicBlur : function(e, t){
41615         if(!this.wrap.contains(t) && this.validateBlur()){
41616             this.triggerBlur();
41617         }
41618     },
41619
41620     // private
41621     triggerBlur : function(){
41622         this.mimicing = false;
41623         Roo.get(Roo.isIE ? document.body : document).un("mousedown", this.mimicBlur);
41624         if(this.monitorTab){
41625             this.el.un("keydown", this.checkTab, this);
41626         }
41627         this.wrap.removeClass('x-trigger-wrap-focus');
41628         Roo.form.TriggerField.superclass.onBlur.call(this);
41629     },
41630
41631     // private
41632     // This should be overriden by any subclass that needs to check whether or not the field can be blurred.
41633     validateBlur : function(e, t){
41634         return true;
41635     },
41636
41637     // private
41638     onDisable : function(){
41639         Roo.form.TriggerField.superclass.onDisable.call(this);
41640         if(this.wrap){
41641             this.wrap.addClass('x-item-disabled');
41642         }
41643     },
41644
41645     // private
41646     onEnable : function(){
41647         Roo.form.TriggerField.superclass.onEnable.call(this);
41648         if(this.wrap){
41649             this.wrap.removeClass('x-item-disabled');
41650         }
41651     },
41652
41653     // private
41654     onShow : function(){
41655         var ae = this.getActionEl();
41656         
41657         if(ae){
41658             ae.dom.style.display = '';
41659             ae.dom.style.visibility = 'visible';
41660         }
41661     },
41662
41663     // private
41664     
41665     onHide : function(){
41666         var ae = this.getActionEl();
41667         ae.dom.style.display = 'none';
41668     },
41669
41670     /**
41671      * The function that should handle the trigger's click event.  This method does nothing by default until overridden
41672      * by an implementing function.
41673      * @method
41674      * @param {EventObject} e
41675      */
41676     onTriggerClick : Roo.emptyFn
41677 });
41678
41679 // TwinTriggerField is not a public class to be used directly.  It is meant as an abstract base class
41680 // to be extended by an implementing class.  For an example of implementing this class, see the custom
41681 // SearchField implementation here: http://extjs.com/deploy/ext/examples/form/custom.html
41682 Roo.form.TwinTriggerField = Roo.extend(Roo.form.TriggerField, {
41683     initComponent : function(){
41684         Roo.form.TwinTriggerField.superclass.initComponent.call(this);
41685
41686         this.triggerConfig = {
41687             tag:'span', cls:'x-form-twin-triggers', cn:[
41688             {tag: "img", src: Roo.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger1Class},
41689             {tag: "img", src: Roo.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger2Class}
41690         ]};
41691     },
41692
41693     getTrigger : function(index){
41694         return this.triggers[index];
41695     },
41696
41697     initTrigger : function(){
41698         var ts = this.trigger.select('.x-form-trigger', true);
41699         this.wrap.setStyle('overflow', 'hidden');
41700         var triggerField = this;
41701         ts.each(function(t, all, index){
41702             t.hide = function(){
41703                 var w = triggerField.wrap.getWidth();
41704                 this.dom.style.display = 'none';
41705                 triggerField.el.setWidth(w-triggerField.trigger.getWidth());
41706             };
41707             t.show = function(){
41708                 var w = triggerField.wrap.getWidth();
41709                 this.dom.style.display = '';
41710                 triggerField.el.setWidth(w-triggerField.trigger.getWidth());
41711             };
41712             var triggerIndex = 'Trigger'+(index+1);
41713
41714             if(this['hide'+triggerIndex]){
41715                 t.dom.style.display = 'none';
41716             }
41717             t.on("click", this['on'+triggerIndex+'Click'], this, {preventDefault:true});
41718             t.addClassOnOver('x-form-trigger-over');
41719             t.addClassOnClick('x-form-trigger-click');
41720         }, this);
41721         this.triggers = ts.elements;
41722     },
41723
41724     onTrigger1Click : Roo.emptyFn,
41725     onTrigger2Click : Roo.emptyFn
41726 });/*
41727  * Based on:
41728  * Ext JS Library 1.1.1
41729  * Copyright(c) 2006-2007, Ext JS, LLC.
41730  *
41731  * Originally Released Under LGPL - original licence link has changed is not relivant.
41732  *
41733  * Fork - LGPL
41734  * <script type="text/javascript">
41735  */
41736  
41737 /**
41738  * @class Roo.form.TextArea
41739  * @extends Roo.form.TextField
41740  * Multiline text field.  Can be used as a direct replacement for traditional textarea fields, plus adds
41741  * support for auto-sizing.
41742  * @constructor
41743  * Creates a new TextArea
41744  * @param {Object} config Configuration options
41745  */
41746 Roo.form.TextArea = function(config){
41747     Roo.form.TextArea.superclass.constructor.call(this, config);
41748     // these are provided exchanges for backwards compat
41749     // minHeight/maxHeight were replaced by growMin/growMax to be
41750     // compatible with TextField growing config values
41751     if(this.minHeight !== undefined){
41752         this.growMin = this.minHeight;
41753     }
41754     if(this.maxHeight !== undefined){
41755         this.growMax = this.maxHeight;
41756     }
41757 };
41758
41759 Roo.extend(Roo.form.TextArea, Roo.form.TextField,  {
41760     /**
41761      * @cfg {Number} growMin The minimum height to allow when grow = true (defaults to 60)
41762      */
41763     growMin : 60,
41764     /**
41765      * @cfg {Number} growMax The maximum height to allow when grow = true (defaults to 1000)
41766      */
41767     growMax: 1000,
41768     /**
41769      * @cfg {Boolean} preventScrollbars True to prevent scrollbars from appearing regardless of how much text is
41770      * in the field (equivalent to setting overflow: hidden, defaults to false)
41771      */
41772     preventScrollbars: false,
41773     /**
41774      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
41775      * {tag: "textarea", style: "width:300px;height:60px;", autocomplete: "off"})
41776      */
41777
41778     // private
41779     onRender : function(ct, position){
41780         if(!this.el){
41781             this.defaultAutoCreate = {
41782                 tag: "textarea",
41783                 style:"width:300px;height:60px;",
41784                 autocomplete: "new-password"
41785             };
41786         }
41787         Roo.form.TextArea.superclass.onRender.call(this, ct, position);
41788         if(this.grow){
41789             this.textSizeEl = Roo.DomHelper.append(document.body, {
41790                 tag: "pre", cls: "x-form-grow-sizer"
41791             });
41792             if(this.preventScrollbars){
41793                 this.el.setStyle("overflow", "hidden");
41794             }
41795             this.el.setHeight(this.growMin);
41796         }
41797     },
41798
41799     onDestroy : function(){
41800         if(this.textSizeEl){
41801             this.textSizeEl.parentNode.removeChild(this.textSizeEl);
41802         }
41803         Roo.form.TextArea.superclass.onDestroy.call(this);
41804     },
41805
41806     // private
41807     onKeyUp : function(e){
41808         if(!e.isNavKeyPress() || e.getKey() == e.ENTER){
41809             this.autoSize();
41810         }
41811     },
41812
41813     /**
41814      * Automatically grows the field to accomodate the height of the text up to the maximum field height allowed.
41815      * This only takes effect if grow = true, and fires the autosize event if the height changes.
41816      */
41817     autoSize : function(){
41818         if(!this.grow || !this.textSizeEl){
41819             return;
41820         }
41821         var el = this.el;
41822         var v = el.dom.value;
41823         var ts = this.textSizeEl;
41824
41825         ts.innerHTML = '';
41826         ts.appendChild(document.createTextNode(v));
41827         v = ts.innerHTML;
41828
41829         Roo.fly(ts).setWidth(this.el.getWidth());
41830         if(v.length < 1){
41831             v = "&#160;&#160;";
41832         }else{
41833             if(Roo.isIE){
41834                 v = v.replace(/\n/g, '<p>&#160;</p>');
41835             }
41836             v += "&#160;\n&#160;";
41837         }
41838         ts.innerHTML = v;
41839         var h = Math.min(this.growMax, Math.max(ts.offsetHeight, this.growMin));
41840         if(h != this.lastHeight){
41841             this.lastHeight = h;
41842             this.el.setHeight(h);
41843             this.fireEvent("autosize", this, h);
41844         }
41845     }
41846 });/*
41847  * Based on:
41848  * Ext JS Library 1.1.1
41849  * Copyright(c) 2006-2007, Ext JS, LLC.
41850  *
41851  * Originally Released Under LGPL - original licence link has changed is not relivant.
41852  *
41853  * Fork - LGPL
41854  * <script type="text/javascript">
41855  */
41856  
41857
41858 /**
41859  * @class Roo.form.NumberField
41860  * @extends Roo.form.TextField
41861  * Numeric text field that provides automatic keystroke filtering and numeric validation.
41862  * @constructor
41863  * Creates a new NumberField
41864  * @param {Object} config Configuration options
41865  */
41866 Roo.form.NumberField = function(config){
41867     Roo.form.NumberField.superclass.constructor.call(this, config);
41868 };
41869
41870 Roo.extend(Roo.form.NumberField, Roo.form.TextField,  {
41871     /**
41872      * @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-field x-form-num-field")
41873      */
41874     fieldClass: "x-form-field x-form-num-field",
41875     /**
41876      * @cfg {Boolean} allowDecimals False to disallow decimal values (defaults to true)
41877      */
41878     allowDecimals : true,
41879     /**
41880      * @cfg {String} decimalSeparator Character(s) to allow as the decimal separator (defaults to '.')
41881      */
41882     decimalSeparator : ".",
41883     /**
41884      * @cfg {Number} decimalPrecision The maximum precision to display after the decimal separator (defaults to 2)
41885      */
41886     decimalPrecision : 2,
41887     /**
41888      * @cfg {Boolean} allowNegative False to prevent entering a negative sign (defaults to true)
41889      */
41890     allowNegative : true,
41891     /**
41892      * @cfg {Number} minValue The minimum allowed value (defaults to Number.NEGATIVE_INFINITY)
41893      */
41894     minValue : Number.NEGATIVE_INFINITY,
41895     /**
41896      * @cfg {Number} maxValue The maximum allowed value (defaults to Number.MAX_VALUE)
41897      */
41898     maxValue : Number.MAX_VALUE,
41899     /**
41900      * @cfg {String} minText Error text to display if the minimum value validation fails (defaults to "The minimum value for this field is {minValue}")
41901      */
41902     minText : "The minimum value for this field is {0}",
41903     /**
41904      * @cfg {String} maxText Error text to display if the maximum value validation fails (defaults to "The maximum value for this field is {maxValue}")
41905      */
41906     maxText : "The maximum value for this field is {0}",
41907     /**
41908      * @cfg {String} nanText Error text to display if the value is not a valid number.  For example, this can happen
41909      * if a valid character like '.' or '-' is left in the field with no number (defaults to "{value} is not a valid number")
41910      */
41911     nanText : "{0} is not a valid number",
41912
41913     // private
41914     initEvents : function(){
41915         Roo.form.NumberField.superclass.initEvents.call(this);
41916         var allowed = "0123456789";
41917         if(this.allowDecimals){
41918             allowed += this.decimalSeparator;
41919         }
41920         if(this.allowNegative){
41921             allowed += "-";
41922         }
41923         this.stripCharsRe = new RegExp('[^'+allowed+']', 'gi');
41924         var keyPress = function(e){
41925             var k = e.getKey();
41926             if(!Roo.isIE && (e.isSpecialKey() || k == e.BACKSPACE || k == e.DELETE)){
41927                 return;
41928             }
41929             var c = e.getCharCode();
41930             if(allowed.indexOf(String.fromCharCode(c)) === -1){
41931                 e.stopEvent();
41932             }
41933         };
41934         this.el.on("keypress", keyPress, this);
41935     },
41936
41937     // private
41938     validateValue : function(value){
41939         if(!Roo.form.NumberField.superclass.validateValue.call(this, value)){
41940             return false;
41941         }
41942         if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
41943              return true;
41944         }
41945         var num = this.parseValue(value);
41946         if(isNaN(num)){
41947             this.markInvalid(String.format(this.nanText, value));
41948             return false;
41949         }
41950         if(num < this.minValue){
41951             this.markInvalid(String.format(this.minText, this.minValue));
41952             return false;
41953         }
41954         if(num > this.maxValue){
41955             this.markInvalid(String.format(this.maxText, this.maxValue));
41956             return false;
41957         }
41958         return true;
41959     },
41960
41961     getValue : function(){
41962         return this.fixPrecision(this.parseValue(Roo.form.NumberField.superclass.getValue.call(this)));
41963     },
41964
41965     // private
41966     parseValue : function(value){
41967         value = parseFloat(String(value).replace(this.decimalSeparator, "."));
41968         return isNaN(value) ? '' : value;
41969     },
41970
41971     // private
41972     fixPrecision : function(value){
41973         var nan = isNaN(value);
41974         if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){
41975             return nan ? '' : value;
41976         }
41977         return parseFloat(value).toFixed(this.decimalPrecision);
41978     },
41979
41980     setValue : function(v){
41981         v = this.fixPrecision(v);
41982         Roo.form.NumberField.superclass.setValue.call(this, String(v).replace(".", this.decimalSeparator));
41983     },
41984
41985     // private
41986     decimalPrecisionFcn : function(v){
41987         return Math.floor(v);
41988     },
41989
41990     beforeBlur : function(){
41991         var v = this.parseValue(this.getRawValue());
41992         if(v){
41993             this.setValue(v);
41994         }
41995     }
41996 });/*
41997  * Based on:
41998  * Ext JS Library 1.1.1
41999  * Copyright(c) 2006-2007, Ext JS, LLC.
42000  *
42001  * Originally Released Under LGPL - original licence link has changed is not relivant.
42002  *
42003  * Fork - LGPL
42004  * <script type="text/javascript">
42005  */
42006  
42007 /**
42008  * @class Roo.form.DateField
42009  * @extends Roo.form.TriggerField
42010  * Provides a date input field with a {@link Roo.DatePicker} dropdown and automatic date validation.
42011 * @constructor
42012 * Create a new DateField
42013 * @param {Object} config
42014  */
42015 Roo.form.DateField = function(config)
42016 {
42017     Roo.form.DateField.superclass.constructor.call(this, config);
42018     
42019       this.addEvents({
42020          
42021         /**
42022          * @event select
42023          * Fires when a date is selected
42024              * @param {Roo.form.DateField} combo This combo box
42025              * @param {Date} date The date selected
42026              */
42027         'select' : true
42028          
42029     });
42030     
42031     
42032     if(typeof this.minValue == "string") {
42033         this.minValue = this.parseDate(this.minValue);
42034     }
42035     if(typeof this.maxValue == "string") {
42036         this.maxValue = this.parseDate(this.maxValue);
42037     }
42038     this.ddMatch = null;
42039     if(this.disabledDates){
42040         var dd = this.disabledDates;
42041         var re = "(?:";
42042         for(var i = 0; i < dd.length; i++){
42043             re += dd[i];
42044             if(i != dd.length-1) {
42045                 re += "|";
42046             }
42047         }
42048         this.ddMatch = new RegExp(re + ")");
42049     }
42050 };
42051
42052 Roo.extend(Roo.form.DateField, Roo.form.TriggerField,  {
42053     /**
42054      * @cfg {String} format
42055      * The default date format string which can be overriden for localization support.  The format must be
42056      * valid according to {@link Date#parseDate} (defaults to 'm/d/y').
42057      */
42058     format : "m/d/y",
42059     /**
42060      * @cfg {String} altFormats
42061      * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined
42062      * format (defaults to 'm/d/Y|m-d-y|m-d-Y|m/d|m-d|d').
42063      */
42064     altFormats : "m/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d",
42065     /**
42066      * @cfg {Array} disabledDays
42067      * An array of days to disable, 0 based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
42068      */
42069     disabledDays : null,
42070     /**
42071      * @cfg {String} disabledDaysText
42072      * The tooltip to display when the date falls on a disabled day (defaults to 'Disabled')
42073      */
42074     disabledDaysText : "Disabled",
42075     /**
42076      * @cfg {Array} disabledDates
42077      * An array of "dates" to disable, as strings. These strings will be used to build a dynamic regular
42078      * expression so they are very powerful. Some examples:
42079      * <ul>
42080      * <li>["03/08/2003", "09/16/2003"] would disable those exact dates</li>
42081      * <li>["03/08", "09/16"] would disable those days for every year</li>
42082      * <li>["^03/08"] would only match the beginning (useful if you are using short years)</li>
42083      * <li>["03/../2006"] would disable every day in March 2006</li>
42084      * <li>["^03"] would disable every day in every March</li>
42085      * </ul>
42086      * In order to support regular expressions, if you are using a date format that has "." in it, you will have to
42087      * escape the dot when restricting dates. For example: ["03\\.08\\.03"].
42088      */
42089     disabledDates : null,
42090     /**
42091      * @cfg {String} disabledDatesText
42092      * The tooltip text to display when the date falls on a disabled date (defaults to 'Disabled')
42093      */
42094     disabledDatesText : "Disabled",
42095         
42096         
42097         /**
42098      * @cfg {Date/String} zeroValue
42099      * if the date is less that this number, then the field is rendered as empty
42100      * default is 1800
42101      */
42102         zeroValue : '1800-01-01',
42103         
42104         
42105     /**
42106      * @cfg {Date/String} minValue
42107      * The minimum allowed date. Can be either a Javascript date object or a string date in a
42108      * valid format (defaults to null).
42109      */
42110     minValue : null,
42111     /**
42112      * @cfg {Date/String} maxValue
42113      * The maximum allowed date. Can be either a Javascript date object or a string date in a
42114      * valid format (defaults to null).
42115      */
42116     maxValue : null,
42117     /**
42118      * @cfg {String} minText
42119      * The error text to display when the date in the cell is before minValue (defaults to
42120      * 'The date in this field must be after {minValue}').
42121      */
42122     minText : "The date in this field must be equal to or after {0}",
42123     /**
42124      * @cfg {String} maxText
42125      * The error text to display when the date in the cell is after maxValue (defaults to
42126      * 'The date in this field must be before {maxValue}').
42127      */
42128     maxText : "The date in this field must be equal to or before {0}",
42129     /**
42130      * @cfg {String} invalidText
42131      * The error text to display when the date in the field is invalid (defaults to
42132      * '{value} is not a valid date - it must be in the format {format}').
42133      */
42134     invalidText : "{0} is not a valid date - it must be in the format {1}",
42135     /**
42136      * @cfg {String} triggerClass
42137      * An additional CSS class used to style the trigger button.  The trigger will always get the
42138      * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-date-trigger'
42139      * which displays a calendar icon).
42140      */
42141     triggerClass : 'x-form-date-trigger',
42142     
42143
42144     /**
42145      * @cfg {Boolean} useIso
42146      * if enabled, then the date field will use a hidden field to store the 
42147      * real value as iso formated date. default (false)
42148      */ 
42149     useIso : false,
42150     /**
42151      * @cfg {String/Object} autoCreate
42152      * A DomHelper element spec, or true for a default element spec (defaults to
42153      * {tag: "input", type: "text", size: "10", autocomplete: "off"})
42154      */ 
42155     // private
42156     defaultAutoCreate : {tag: "input", type: "text", size: "10", autocomplete: "off"},
42157     
42158     // private
42159     hiddenField: false,
42160     
42161     onRender : function(ct, position)
42162     {
42163         Roo.form.DateField.superclass.onRender.call(this, ct, position);
42164         if (this.useIso) {
42165             //this.el.dom.removeAttribute('name'); 
42166             Roo.log("Changing name?");
42167             this.el.dom.setAttribute('name', this.name + '____hidden___' ); 
42168             this.hiddenField = this.el.insertSibling({ tag:'input', type:'hidden', name: this.name },
42169                     'before', true);
42170             this.hiddenField.value = this.value ? this.formatDate(this.value, 'Y-m-d') : '';
42171             // prevent input submission
42172             this.hiddenName = this.name;
42173         }
42174             
42175             
42176     },
42177     
42178     // private
42179     validateValue : function(value)
42180     {
42181         value = this.formatDate(value);
42182         if(!Roo.form.DateField.superclass.validateValue.call(this, value)){
42183             Roo.log('super failed');
42184             return false;
42185         }
42186         if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
42187              return true;
42188         }
42189         var svalue = value;
42190         value = this.parseDate(value);
42191         if(!value){
42192             Roo.log('parse date failed' + svalue);
42193             this.markInvalid(String.format(this.invalidText, svalue, this.format));
42194             return false;
42195         }
42196         var time = value.getTime();
42197         if(this.minValue && time < this.minValue.getTime()){
42198             this.markInvalid(String.format(this.minText, this.formatDate(this.minValue)));
42199             return false;
42200         }
42201         if(this.maxValue && time > this.maxValue.getTime()){
42202             this.markInvalid(String.format(this.maxText, this.formatDate(this.maxValue)));
42203             return false;
42204         }
42205         if(this.disabledDays){
42206             var day = value.getDay();
42207             for(var i = 0; i < this.disabledDays.length; i++) {
42208                 if(day === this.disabledDays[i]){
42209                     this.markInvalid(this.disabledDaysText);
42210                     return false;
42211                 }
42212             }
42213         }
42214         var fvalue = this.formatDate(value);
42215         if(this.ddMatch && this.ddMatch.test(fvalue)){
42216             this.markInvalid(String.format(this.disabledDatesText, fvalue));
42217             return false;
42218         }
42219         return true;
42220     },
42221
42222     // private
42223     // Provides logic to override the default TriggerField.validateBlur which just returns true
42224     validateBlur : function(){
42225         return !this.menu || !this.menu.isVisible();
42226     },
42227     
42228     getName: function()
42229     {
42230         // returns hidden if it's set..
42231         if (!this.rendered) {return ''};
42232         return !this.hiddenName && this.el.dom.name  ? this.el.dom.name : (this.hiddenName || '');
42233         
42234     },
42235
42236     /**
42237      * Returns the current date value of the date field.
42238      * @return {Date} The date value
42239      */
42240     getValue : function(){
42241         
42242         return  this.hiddenField ?
42243                 this.hiddenField.value :
42244                 this.parseDate(Roo.form.DateField.superclass.getValue.call(this)) || "";
42245     },
42246
42247     /**
42248      * Sets the value of the date field.  You can pass a date object or any string that can be parsed into a valid
42249      * date, using DateField.format as the date format, according to the same rules as {@link Date#parseDate}
42250      * (the default format used is "m/d/y").
42251      * <br />Usage:
42252      * <pre><code>
42253 //All of these calls set the same date value (May 4, 2006)
42254
42255 //Pass a date object:
42256 var dt = new Date('5/4/06');
42257 dateField.setValue(dt);
42258
42259 //Pass a date string (default format):
42260 dateField.setValue('5/4/06');
42261
42262 //Pass a date string (custom format):
42263 dateField.format = 'Y-m-d';
42264 dateField.setValue('2006-5-4');
42265 </code></pre>
42266      * @param {String/Date} date The date or valid date string
42267      */
42268     setValue : function(date){
42269         if (this.hiddenField) {
42270             this.hiddenField.value = this.formatDate(this.parseDate(date), 'Y-m-d');
42271         }
42272         Roo.form.DateField.superclass.setValue.call(this, this.formatDate(this.parseDate(date)));
42273         // make sure the value field is always stored as a date..
42274         this.value = this.parseDate(date);
42275         
42276         
42277     },
42278
42279     // private
42280     parseDate : function(value){
42281                 
42282                 if (value instanceof Date) {
42283                         if (value < Date.parseDate(this.zeroValue, 'Y-m-d') ) {
42284                                 return  '';
42285                         }
42286                         return value;
42287                 }
42288                 
42289                 
42290         if(!value || value instanceof Date){
42291             return value;
42292         }
42293         var v = Date.parseDate(value, this.format);
42294          if (!v && this.useIso) {
42295             v = Date.parseDate(value, 'Y-m-d');
42296         }
42297         if(!v && this.altFormats){
42298             if(!this.altFormatsArray){
42299                 this.altFormatsArray = this.altFormats.split("|");
42300             }
42301             for(var i = 0, len = this.altFormatsArray.length; i < len && !v; i++){
42302                 v = Date.parseDate(value, this.altFormatsArray[i]);
42303             }
42304         }
42305                 if (v < Date.parseDate(this.zeroValue, 'Y-m-d') ) {
42306                         v = '';
42307                 }
42308         return v;
42309     },
42310
42311     // private
42312     formatDate : function(date, fmt){
42313         return (!date || !(date instanceof Date)) ?
42314                date : date.dateFormat(fmt || this.format);
42315     },
42316
42317     // private
42318     menuListeners : {
42319         select: function(m, d){
42320             
42321             this.setValue(d);
42322             this.fireEvent('select', this, d);
42323         },
42324         show : function(){ // retain focus styling
42325             this.onFocus();
42326         },
42327         hide : function(){
42328             this.focus.defer(10, this);
42329             var ml = this.menuListeners;
42330             this.menu.un("select", ml.select,  this);
42331             this.menu.un("show", ml.show,  this);
42332             this.menu.un("hide", ml.hide,  this);
42333         }
42334     },
42335
42336     // private
42337     // Implements the default empty TriggerField.onTriggerClick function to display the DatePicker
42338     onTriggerClick : function(){
42339         if(this.disabled){
42340             return;
42341         }
42342         if(this.menu == null){
42343             this.menu = new Roo.menu.DateMenu();
42344         }
42345         Roo.apply(this.menu.picker,  {
42346             showClear: this.allowBlank,
42347             minDate : this.minValue,
42348             maxDate : this.maxValue,
42349             disabledDatesRE : this.ddMatch,
42350             disabledDatesText : this.disabledDatesText,
42351             disabledDays : this.disabledDays,
42352             disabledDaysText : this.disabledDaysText,
42353             format : this.useIso ? 'Y-m-d' : this.format,
42354             minText : String.format(this.minText, this.formatDate(this.minValue)),
42355             maxText : String.format(this.maxText, this.formatDate(this.maxValue))
42356         });
42357         this.menu.on(Roo.apply({}, this.menuListeners, {
42358             scope:this
42359         }));
42360         this.menu.picker.setValue(this.getValue() || new Date());
42361         this.menu.show(this.el, "tl-bl?");
42362     },
42363
42364     beforeBlur : function(){
42365         var v = this.parseDate(this.getRawValue());
42366         if(v){
42367             this.setValue(v);
42368         }
42369     },
42370
42371     /*@
42372      * overide
42373      * 
42374      */
42375     isDirty : function() {
42376         if(this.disabled) {
42377             return false;
42378         }
42379         
42380         if(typeof(this.startValue) === 'undefined'){
42381             return false;
42382         }
42383         
42384         return String(this.getValue()) !== String(this.startValue);
42385         
42386     },
42387     // @overide
42388     cleanLeadingSpace : function(e)
42389     {
42390        return;
42391     }
42392     
42393 });/*
42394  * Based on:
42395  * Ext JS Library 1.1.1
42396  * Copyright(c) 2006-2007, Ext JS, LLC.
42397  *
42398  * Originally Released Under LGPL - original licence link has changed is not relivant.
42399  *
42400  * Fork - LGPL
42401  * <script type="text/javascript">
42402  */
42403  
42404 /**
42405  * @class Roo.form.MonthField
42406  * @extends Roo.form.TriggerField
42407  * Provides a date input field with a {@link Roo.DatePicker} dropdown and automatic date validation.
42408 * @constructor
42409 * Create a new MonthField
42410 * @param {Object} config
42411  */
42412 Roo.form.MonthField = function(config){
42413     
42414     Roo.form.MonthField.superclass.constructor.call(this, config);
42415     
42416       this.addEvents({
42417          
42418         /**
42419          * @event select
42420          * Fires when a date is selected
42421              * @param {Roo.form.MonthFieeld} combo This combo box
42422              * @param {Date} date The date selected
42423              */
42424         'select' : true
42425          
42426     });
42427     
42428     
42429     if(typeof this.minValue == "string") {
42430         this.minValue = this.parseDate(this.minValue);
42431     }
42432     if(typeof this.maxValue == "string") {
42433         this.maxValue = this.parseDate(this.maxValue);
42434     }
42435     this.ddMatch = null;
42436     if(this.disabledDates){
42437         var dd = this.disabledDates;
42438         var re = "(?:";
42439         for(var i = 0; i < dd.length; i++){
42440             re += dd[i];
42441             if(i != dd.length-1) {
42442                 re += "|";
42443             }
42444         }
42445         this.ddMatch = new RegExp(re + ")");
42446     }
42447 };
42448
42449 Roo.extend(Roo.form.MonthField, Roo.form.TriggerField,  {
42450     /**
42451      * @cfg {String} format
42452      * The default date format string which can be overriden for localization support.  The format must be
42453      * valid according to {@link Date#parseDate} (defaults to 'm/d/y').
42454      */
42455     format : "M Y",
42456     /**
42457      * @cfg {String} altFormats
42458      * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined
42459      * format (defaults to 'm/d/Y|m-d-y|m-d-Y|m/d|m-d|d').
42460      */
42461     altFormats : "M Y|m/Y|m-y|m-Y|my|mY",
42462     /**
42463      * @cfg {Array} disabledDays
42464      * An array of days to disable, 0 based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
42465      */
42466     disabledDays : [0,1,2,3,4,5,6],
42467     /**
42468      * @cfg {String} disabledDaysText
42469      * The tooltip to display when the date falls on a disabled day (defaults to 'Disabled')
42470      */
42471     disabledDaysText : "Disabled",
42472     /**
42473      * @cfg {Array} disabledDates
42474      * An array of "dates" to disable, as strings. These strings will be used to build a dynamic regular
42475      * expression so they are very powerful. Some examples:
42476      * <ul>
42477      * <li>["03/08/2003", "09/16/2003"] would disable those exact dates</li>
42478      * <li>["03/08", "09/16"] would disable those days for every year</li>
42479      * <li>["^03/08"] would only match the beginning (useful if you are using short years)</li>
42480      * <li>["03/../2006"] would disable every day in March 2006</li>
42481      * <li>["^03"] would disable every day in every March</li>
42482      * </ul>
42483      * In order to support regular expressions, if you are using a date format that has "." in it, you will have to
42484      * escape the dot when restricting dates. For example: ["03\\.08\\.03"].
42485      */
42486     disabledDates : null,
42487     /**
42488      * @cfg {String} disabledDatesText
42489      * The tooltip text to display when the date falls on a disabled date (defaults to 'Disabled')
42490      */
42491     disabledDatesText : "Disabled",
42492     /**
42493      * @cfg {Date/String} minValue
42494      * The minimum allowed date. Can be either a Javascript date object or a string date in a
42495      * valid format (defaults to null).
42496      */
42497     minValue : null,
42498     /**
42499      * @cfg {Date/String} maxValue
42500      * The maximum allowed date. Can be either a Javascript date object or a string date in a
42501      * valid format (defaults to null).
42502      */
42503     maxValue : null,
42504     /**
42505      * @cfg {String} minText
42506      * The error text to display when the date in the cell is before minValue (defaults to
42507      * 'The date in this field must be after {minValue}').
42508      */
42509     minText : "The date in this field must be equal to or after {0}",
42510     /**
42511      * @cfg {String} maxTextf
42512      * The error text to display when the date in the cell is after maxValue (defaults to
42513      * 'The date in this field must be before {maxValue}').
42514      */
42515     maxText : "The date in this field must be equal to or before {0}",
42516     /**
42517      * @cfg {String} invalidText
42518      * The error text to display when the date in the field is invalid (defaults to
42519      * '{value} is not a valid date - it must be in the format {format}').
42520      */
42521     invalidText : "{0} is not a valid date - it must be in the format {1}",
42522     /**
42523      * @cfg {String} triggerClass
42524      * An additional CSS class used to style the trigger button.  The trigger will always get the
42525      * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-date-trigger'
42526      * which displays a calendar icon).
42527      */
42528     triggerClass : 'x-form-date-trigger',
42529     
42530
42531     /**
42532      * @cfg {Boolean} useIso
42533      * if enabled, then the date field will use a hidden field to store the 
42534      * real value as iso formated date. default (true)
42535      */ 
42536     useIso : true,
42537     /**
42538      * @cfg {String/Object} autoCreate
42539      * A DomHelper element spec, or true for a default element spec (defaults to
42540      * {tag: "input", type: "text", size: "10", autocomplete: "off"})
42541      */ 
42542     // private
42543     defaultAutoCreate : {tag: "input", type: "text", size: "10", autocomplete: "new-password"},
42544     
42545     // private
42546     hiddenField: false,
42547     
42548     hideMonthPicker : false,
42549     
42550     onRender : function(ct, position)
42551     {
42552         Roo.form.MonthField.superclass.onRender.call(this, ct, position);
42553         if (this.useIso) {
42554             this.el.dom.removeAttribute('name'); 
42555             this.hiddenField = this.el.insertSibling({ tag:'input', type:'hidden', name: this.name },
42556                     'before', true);
42557             this.hiddenField.value = this.value ? this.formatDate(this.value, 'Y-m-d') : '';
42558             // prevent input submission
42559             this.hiddenName = this.name;
42560         }
42561             
42562             
42563     },
42564     
42565     // private
42566     validateValue : function(value)
42567     {
42568         value = this.formatDate(value);
42569         if(!Roo.form.MonthField.superclass.validateValue.call(this, value)){
42570             return false;
42571         }
42572         if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
42573              return true;
42574         }
42575         var svalue = value;
42576         value = this.parseDate(value);
42577         if(!value){
42578             this.markInvalid(String.format(this.invalidText, svalue, this.format));
42579             return false;
42580         }
42581         var time = value.getTime();
42582         if(this.minValue && time < this.minValue.getTime()){
42583             this.markInvalid(String.format(this.minText, this.formatDate(this.minValue)));
42584             return false;
42585         }
42586         if(this.maxValue && time > this.maxValue.getTime()){
42587             this.markInvalid(String.format(this.maxText, this.formatDate(this.maxValue)));
42588             return false;
42589         }
42590         /*if(this.disabledDays){
42591             var day = value.getDay();
42592             for(var i = 0; i < this.disabledDays.length; i++) {
42593                 if(day === this.disabledDays[i]){
42594                     this.markInvalid(this.disabledDaysText);
42595                     return false;
42596                 }
42597             }
42598         }
42599         */
42600         var fvalue = this.formatDate(value);
42601         /*if(this.ddMatch && this.ddMatch.test(fvalue)){
42602             this.markInvalid(String.format(this.disabledDatesText, fvalue));
42603             return false;
42604         }
42605         */
42606         return true;
42607     },
42608
42609     // private
42610     // Provides logic to override the default TriggerField.validateBlur which just returns true
42611     validateBlur : function(){
42612         return !this.menu || !this.menu.isVisible();
42613     },
42614
42615     /**
42616      * Returns the current date value of the date field.
42617      * @return {Date} The date value
42618      */
42619     getValue : function(){
42620         
42621         
42622         
42623         return  this.hiddenField ?
42624                 this.hiddenField.value :
42625                 this.parseDate(Roo.form.MonthField.superclass.getValue.call(this)) || "";
42626     },
42627
42628     /**
42629      * Sets the value of the date field.  You can pass a date object or any string that can be parsed into a valid
42630      * date, using MonthField.format as the date format, according to the same rules as {@link Date#parseDate}
42631      * (the default format used is "m/d/y").
42632      * <br />Usage:
42633      * <pre><code>
42634 //All of these calls set the same date value (May 4, 2006)
42635
42636 //Pass a date object:
42637 var dt = new Date('5/4/06');
42638 monthField.setValue(dt);
42639
42640 //Pass a date string (default format):
42641 monthField.setValue('5/4/06');
42642
42643 //Pass a date string (custom format):
42644 monthField.format = 'Y-m-d';
42645 monthField.setValue('2006-5-4');
42646 </code></pre>
42647      * @param {String/Date} date The date or valid date string
42648      */
42649     setValue : function(date){
42650         Roo.log('month setValue' + date);
42651         // can only be first of month..
42652         
42653         var val = this.parseDate(date);
42654         
42655         if (this.hiddenField) {
42656             this.hiddenField.value = this.formatDate(this.parseDate(date), 'Y-m-d');
42657         }
42658         Roo.form.MonthField.superclass.setValue.call(this, this.formatDate(this.parseDate(date)));
42659         this.value = this.parseDate(date);
42660     },
42661
42662     // private
42663     parseDate : function(value){
42664         if(!value || value instanceof Date){
42665             value = value ? Date.parseDate(value.format('Y-m') + '-01', 'Y-m-d') : null;
42666             return value;
42667         }
42668         var v = Date.parseDate(value, this.format);
42669         if (!v && this.useIso) {
42670             v = Date.parseDate(value, 'Y-m-d');
42671         }
42672         if (v) {
42673             // 
42674             v = Date.parseDate(v.format('Y-m') +'-01', 'Y-m-d');
42675         }
42676         
42677         
42678         if(!v && this.altFormats){
42679             if(!this.altFormatsArray){
42680                 this.altFormatsArray = this.altFormats.split("|");
42681             }
42682             for(var i = 0, len = this.altFormatsArray.length; i < len && !v; i++){
42683                 v = Date.parseDate(value, this.altFormatsArray[i]);
42684             }
42685         }
42686         return v;
42687     },
42688
42689     // private
42690     formatDate : function(date, fmt){
42691         return (!date || !(date instanceof Date)) ?
42692                date : date.dateFormat(fmt || this.format);
42693     },
42694
42695     // private
42696     menuListeners : {
42697         select: function(m, d){
42698             this.setValue(d);
42699             this.fireEvent('select', this, d);
42700         },
42701         show : function(){ // retain focus styling
42702             this.onFocus();
42703         },
42704         hide : function(){
42705             this.focus.defer(10, this);
42706             var ml = this.menuListeners;
42707             this.menu.un("select", ml.select,  this);
42708             this.menu.un("show", ml.show,  this);
42709             this.menu.un("hide", ml.hide,  this);
42710         }
42711     },
42712     // private
42713     // Implements the default empty TriggerField.onTriggerClick function to display the DatePicker
42714     onTriggerClick : function(){
42715         if(this.disabled){
42716             return;
42717         }
42718         if(this.menu == null){
42719             this.menu = new Roo.menu.DateMenu();
42720            
42721         }
42722         
42723         Roo.apply(this.menu.picker,  {
42724             
42725             showClear: this.allowBlank,
42726             minDate : this.minValue,
42727             maxDate : this.maxValue,
42728             disabledDatesRE : this.ddMatch,
42729             disabledDatesText : this.disabledDatesText,
42730             
42731             format : this.useIso ? 'Y-m-d' : this.format,
42732             minText : String.format(this.minText, this.formatDate(this.minValue)),
42733             maxText : String.format(this.maxText, this.formatDate(this.maxValue))
42734             
42735         });
42736          this.menu.on(Roo.apply({}, this.menuListeners, {
42737             scope:this
42738         }));
42739        
42740         
42741         var m = this.menu;
42742         var p = m.picker;
42743         
42744         // hide month picker get's called when we called by 'before hide';
42745         
42746         var ignorehide = true;
42747         p.hideMonthPicker  = function(disableAnim){
42748             if (ignorehide) {
42749                 return;
42750             }
42751              if(this.monthPicker){
42752                 Roo.log("hideMonthPicker called");
42753                 if(disableAnim === true){
42754                     this.monthPicker.hide();
42755                 }else{
42756                     this.monthPicker.slideOut('t', {duration:.2});
42757                     p.setValue(new Date(m.picker.mpSelYear, m.picker.mpSelMonth, 1));
42758                     p.fireEvent("select", this, this.value);
42759                     m.hide();
42760                 }
42761             }
42762         }
42763         
42764         Roo.log('picker set value');
42765         Roo.log(this.getValue());
42766         p.setValue(this.getValue() ? this.parseDate(this.getValue()) : new Date());
42767         m.show(this.el, 'tl-bl?');
42768         ignorehide  = false;
42769         // this will trigger hideMonthPicker..
42770         
42771         
42772         // hidden the day picker
42773         Roo.select('.x-date-picker table', true).first().dom.style.visibility = "hidden";
42774         
42775         
42776         
42777       
42778         
42779         p.showMonthPicker.defer(100, p);
42780     
42781         
42782        
42783     },
42784
42785     beforeBlur : function(){
42786         var v = this.parseDate(this.getRawValue());
42787         if(v){
42788             this.setValue(v);
42789         }
42790     }
42791
42792     /** @cfg {Boolean} grow @hide */
42793     /** @cfg {Number} growMin @hide */
42794     /** @cfg {Number} growMax @hide */
42795     /**
42796      * @hide
42797      * @method autoSize
42798      */
42799 });/*
42800  * Based on:
42801  * Ext JS Library 1.1.1
42802  * Copyright(c) 2006-2007, Ext JS, LLC.
42803  *
42804  * Originally Released Under LGPL - original licence link has changed is not relivant.
42805  *
42806  * Fork - LGPL
42807  * <script type="text/javascript">
42808  */
42809  
42810
42811 /**
42812  * @class Roo.form.ComboBox
42813  * @extends Roo.form.TriggerField
42814  * A combobox control with support for autocomplete, remote-loading, paging and many other features.
42815  * @constructor
42816  * Create a new ComboBox.
42817  * @param {Object} config Configuration options
42818  */
42819 Roo.form.ComboBox = function(config){
42820     Roo.form.ComboBox.superclass.constructor.call(this, config);
42821     this.addEvents({
42822         /**
42823          * @event expand
42824          * Fires when the dropdown list is expanded
42825              * @param {Roo.form.ComboBox} combo This combo box
42826              */
42827         'expand' : true,
42828         /**
42829          * @event collapse
42830          * Fires when the dropdown list is collapsed
42831              * @param {Roo.form.ComboBox} combo This combo box
42832              */
42833         'collapse' : true,
42834         /**
42835          * @event beforeselect
42836          * Fires before a list item is selected. Return false to cancel the selection.
42837              * @param {Roo.form.ComboBox} combo This combo box
42838              * @param {Roo.data.Record} record The data record returned from the underlying store
42839              * @param {Number} index The index of the selected item in the dropdown list
42840              */
42841         'beforeselect' : true,
42842         /**
42843          * @event select
42844          * Fires when a list item is selected
42845              * @param {Roo.form.ComboBox} combo This combo box
42846              * @param {Roo.data.Record} record The data record returned from the underlying store (or false on clear)
42847              * @param {Number} index The index of the selected item in the dropdown list
42848              */
42849         'select' : true,
42850         /**
42851          * @event beforequery
42852          * Fires before all queries are processed. Return false to cancel the query or set cancel to true.
42853          * The event object passed has these properties:
42854              * @param {Roo.form.ComboBox} combo This combo box
42855              * @param {String} query The query
42856              * @param {Boolean} forceAll true to force "all" query
42857              * @param {Boolean} cancel true to cancel the query
42858              * @param {Object} e The query event object
42859              */
42860         'beforequery': true,
42861          /**
42862          * @event add
42863          * Fires when the 'add' icon is pressed (add a listener to enable add button)
42864              * @param {Roo.form.ComboBox} combo This combo box
42865              */
42866         'add' : true,
42867         /**
42868          * @event edit
42869          * Fires when the 'edit' icon is pressed (add a listener to enable add button)
42870              * @param {Roo.form.ComboBox} combo This combo box
42871              * @param {Roo.data.Record|false} record The data record returned from the underlying store (or false on nothing selected)
42872              */
42873         'edit' : true
42874         
42875         
42876     });
42877     if(this.transform){
42878         this.allowDomMove = false;
42879         var s = Roo.getDom(this.transform);
42880         if(!this.hiddenName){
42881             this.hiddenName = s.name;
42882         }
42883         if(!this.store){
42884             this.mode = 'local';
42885             var d = [], opts = s.options;
42886             for(var i = 0, len = opts.length;i < len; i++){
42887                 var o = opts[i];
42888                 var value = (Roo.isIE ? o.getAttributeNode('value').specified : o.hasAttribute('value')) ? o.value : o.text;
42889                 if(o.selected) {
42890                     this.value = value;
42891                 }
42892                 d.push([value, o.text]);
42893             }
42894             this.store = new Roo.data.SimpleStore({
42895                 'id': 0,
42896                 fields: ['value', 'text'],
42897                 data : d
42898             });
42899             this.valueField = 'value';
42900             this.displayField = 'text';
42901         }
42902         s.name = Roo.id(); // wipe out the name in case somewhere else they have a reference
42903         if(!this.lazyRender){
42904             this.target = true;
42905             this.el = Roo.DomHelper.insertBefore(s, this.autoCreate || this.defaultAutoCreate);
42906             s.parentNode.removeChild(s); // remove it
42907             this.render(this.el.parentNode);
42908         }else{
42909             s.parentNode.removeChild(s); // remove it
42910         }
42911
42912     }
42913     if (this.store) {
42914         this.store = Roo.factory(this.store, Roo.data);
42915     }
42916     
42917     this.selectedIndex = -1;
42918     if(this.mode == 'local'){
42919         if(config.queryDelay === undefined){
42920             this.queryDelay = 10;
42921         }
42922         if(config.minChars === undefined){
42923             this.minChars = 0;
42924         }
42925     }
42926 };
42927
42928 Roo.extend(Roo.form.ComboBox, Roo.form.TriggerField, {
42929     /**
42930      * @cfg {String/HTMLElement/Element} transform The id, DOM node or element of an existing select to convert to a ComboBox
42931      */
42932     /**
42933      * @cfg {Boolean} lazyRender True to prevent the ComboBox from rendering until requested (should always be used when
42934      * rendering into an Roo.Editor, defaults to false)
42935      */
42936     /**
42937      * @cfg {Boolean/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to:
42938      * {tag: "input", type: "text", size: "24", autocomplete: "off"})
42939      */
42940     /**
42941      * @cfg {Roo.data.Store} store The data store to which this combo is bound (defaults to undefined)
42942      */
42943     /**
42944      * @cfg {String} title If supplied, a header element is created containing this text and added into the top of
42945      * the dropdown list (defaults to undefined, with no header element)
42946      */
42947
42948      /**
42949      * @cfg {String/Roo.Template} tpl The template to use to render the output
42950      */
42951      
42952     // private
42953     defaultAutoCreate : {tag: "input", type: "text", size: "24", autocomplete: "off"},
42954     /**
42955      * @cfg {Number} listWidth The width in pixels of the dropdown list (defaults to the width of the ComboBox field)
42956      */
42957     listWidth: undefined,
42958     /**
42959      * @cfg {String} displayField The underlying data field name to bind to this CombBox (defaults to undefined if
42960      * mode = 'remote' or 'text' if mode = 'local')
42961      */
42962     displayField: undefined,
42963     /**
42964      * @cfg {String} valueField The underlying data value name to bind to this CombBox (defaults to undefined if
42965      * mode = 'remote' or 'value' if mode = 'local'). 
42966      * Note: use of a valueField requires the user make a selection
42967      * in order for a value to be mapped.
42968      */
42969     valueField: undefined,
42970     
42971     
42972     /**
42973      * @cfg {String} hiddenName If specified, a hidden form field with this name is dynamically generated to store the
42974      * field's data value (defaults to the underlying DOM element's name)
42975      */
42976     hiddenName: undefined,
42977     /**
42978      * @cfg {String} listClass CSS class to apply to the dropdown list element (defaults to '')
42979      */
42980     listClass: '',
42981     /**
42982      * @cfg {String} selectedClass CSS class to apply to the selected item in the dropdown list (defaults to 'x-combo-selected')
42983      */
42984     selectedClass: 'x-combo-selected',
42985     /**
42986      * @cfg {String} triggerClass An additional CSS class used to style the trigger button.  The trigger will always get the
42987      * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-arrow-trigger'
42988      * which displays a downward arrow icon).
42989      */
42990     triggerClass : 'x-form-arrow-trigger',
42991     /**
42992      * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
42993      */
42994     shadow:'sides',
42995     /**
42996      * @cfg {String} listAlign A valid anchor position value. See {@link Roo.Element#alignTo} for details on supported
42997      * anchor positions (defaults to 'tl-bl')
42998      */
42999     listAlign: 'tl-bl?',
43000     /**
43001      * @cfg {Number} maxHeight The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300)
43002      */
43003     maxHeight: 300,
43004     /**
43005      * @cfg {String} triggerAction The action to execute when the trigger field is activated.  Use 'all' to run the
43006      * query specified by the allQuery config option (defaults to 'query')
43007      */
43008     triggerAction: 'query',
43009     /**
43010      * @cfg {Number} minChars The minimum number of characters the user must type before autocomplete and typeahead activate
43011      * (defaults to 4, does not apply if editable = false)
43012      */
43013     minChars : 4,
43014     /**
43015      * @cfg {Boolean} typeAhead True to populate and autoselect the remainder of the text being typed after a configurable
43016      * delay (typeAheadDelay) if it matches a known value (defaults to false)
43017      */
43018     typeAhead: false,
43019     /**
43020      * @cfg {Number} queryDelay The length of time in milliseconds to delay between the start of typing and sending the
43021      * query to filter the dropdown list (defaults to 500 if mode = 'remote' or 10 if mode = 'local')
43022      */
43023     queryDelay: 500,
43024     /**
43025      * @cfg {Number} pageSize If greater than 0, a paging toolbar is displayed in the footer of the dropdown list and the
43026      * filter queries will execute with page start and limit parameters.  Only applies when mode = 'remote' (defaults to 0)
43027      */
43028     pageSize: 0,
43029     /**
43030      * @cfg {Boolean} selectOnFocus True to select any existing text in the field immediately on focus.  Only applies
43031      * when editable = true (defaults to false)
43032      */
43033     selectOnFocus:false,
43034     /**
43035      * @cfg {String} queryParam Name of the query as it will be passed on the querystring (defaults to 'query')
43036      */
43037     queryParam: 'query',
43038     /**
43039      * @cfg {String} loadingText The text to display in the dropdown list while data is loading.  Only applies
43040      * when mode = 'remote' (defaults to 'Loading...')
43041      */
43042     loadingText: 'Loading...',
43043     /**
43044      * @cfg {Boolean} resizable True to add a resize handle to the bottom of the dropdown list (defaults to false)
43045      */
43046     resizable: false,
43047     /**
43048      * @cfg {Number} handleHeight The height in pixels of the dropdown list resize handle if resizable = true (defaults to 8)
43049      */
43050     handleHeight : 8,
43051     /**
43052      * @cfg {Boolean} editable False to prevent the user from typing text directly into the field, just like a
43053      * traditional select (defaults to true)
43054      */
43055     editable: true,
43056     /**
43057      * @cfg {String} allQuery The text query to send to the server to return all records for the list with no filtering (defaults to '')
43058      */
43059     allQuery: '',
43060     /**
43061      * @cfg {String} mode Set to 'local' if the ComboBox loads local data (defaults to 'remote' which loads from the server)
43062      */
43063     mode: 'remote',
43064     /**
43065      * @cfg {Number} minListWidth The minimum width of the dropdown list in pixels (defaults to 70, will be ignored if
43066      * listWidth has a higher value)
43067      */
43068     minListWidth : 70,
43069     /**
43070      * @cfg {Boolean} forceSelection True to restrict the selected value to one of the values in the list, false to
43071      * allow the user to set arbitrary text into the field (defaults to false)
43072      */
43073     forceSelection:false,
43074     /**
43075      * @cfg {Number} typeAheadDelay The length of time in milliseconds to wait until the typeahead text is displayed
43076      * if typeAhead = true (defaults to 250)
43077      */
43078     typeAheadDelay : 250,
43079     /**
43080      * @cfg {String} valueNotFoundText When using a name/value combo, if the value passed to setValue is not found in
43081      * the store, valueNotFoundText will be displayed as the field text if defined (defaults to undefined)
43082      */
43083     valueNotFoundText : undefined,
43084     /**
43085      * @cfg {Boolean} blockFocus Prevents all focus calls, so it can work with things like HTML edtor bar
43086      */
43087     blockFocus : false,
43088     
43089     /**
43090      * @cfg {Boolean} disableClear Disable showing of clear button.
43091      */
43092     disableClear : false,
43093     /**
43094      * @cfg {Boolean} alwaysQuery  Disable caching of results, and always send query
43095      */
43096     alwaysQuery : false,
43097     
43098     //private
43099     addicon : false,
43100     editicon: false,
43101     
43102     // element that contains real text value.. (when hidden is used..)
43103      
43104     // private
43105     onRender : function(ct, position)
43106     {
43107         Roo.form.ComboBox.superclass.onRender.call(this, ct, position);
43108         
43109         if(this.hiddenName){
43110             this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name: this.hiddenName, id:  (this.hiddenId||this.hiddenName)},
43111                     'before', true);
43112             this.hiddenField.value =
43113                 this.hiddenValue !== undefined ? this.hiddenValue :
43114                 this.value !== undefined ? this.value : '';
43115
43116             // prevent input submission
43117             this.el.dom.removeAttribute('name');
43118              
43119              
43120         }
43121         
43122         if(Roo.isGecko){
43123             this.el.dom.setAttribute('autocomplete', 'off');
43124         }
43125
43126         var cls = 'x-combo-list';
43127
43128         this.list = new Roo.Layer({
43129             shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
43130         });
43131
43132         var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
43133         this.list.setWidth(lw);
43134         this.list.swallowEvent('mousewheel');
43135         this.assetHeight = 0;
43136
43137         if(this.title){
43138             this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
43139             this.assetHeight += this.header.getHeight();
43140         }
43141
43142         this.innerList = this.list.createChild({cls:cls+'-inner'});
43143         this.innerList.on('mouseover', this.onViewOver, this);
43144         this.innerList.on('mousemove', this.onViewMove, this);
43145         this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
43146         
43147         if(this.allowBlank && !this.pageSize && !this.disableClear){
43148             this.footer = this.list.createChild({cls:cls+'-ft'});
43149             this.pageTb = new Roo.Toolbar(this.footer);
43150            
43151         }
43152         if(this.pageSize){
43153             this.footer = this.list.createChild({cls:cls+'-ft'});
43154             this.pageTb = new Roo.PagingToolbar(this.footer, this.store,
43155                     {pageSize: this.pageSize});
43156             
43157         }
43158         
43159         if (this.pageTb && this.allowBlank && !this.disableClear) {
43160             var _this = this;
43161             this.pageTb.add(new Roo.Toolbar.Fill(), {
43162                 cls: 'x-btn-icon x-btn-clear',
43163                 text: '&#160;',
43164                 handler: function()
43165                 {
43166                     _this.collapse();
43167                     _this.clearValue();
43168                     _this.onSelect(false, -1);
43169                 }
43170             });
43171         }
43172         if (this.footer) {
43173             this.assetHeight += this.footer.getHeight();
43174         }
43175         
43176
43177         if(!this.tpl){
43178             this.tpl = '<div class="'+cls+'-item">{' + this.displayField + '}</div>';
43179         }
43180
43181         this.view = new Roo.View(this.innerList, this.tpl, {
43182             singleSelect:true,
43183             store: this.store,
43184             selectedClass: this.selectedClass
43185         });
43186
43187         this.view.on('click', this.onViewClick, this);
43188
43189         this.store.on('beforeload', this.onBeforeLoad, this);
43190         this.store.on('load', this.onLoad, this);
43191         this.store.on('loadexception', this.onLoadException, this);
43192
43193         if(this.resizable){
43194             this.resizer = new Roo.Resizable(this.list,  {
43195                pinned:true, handles:'se'
43196             });
43197             this.resizer.on('resize', function(r, w, h){
43198                 this.maxHeight = h-this.handleHeight-this.list.getFrameWidth('tb')-this.assetHeight;
43199                 this.listWidth = w;
43200                 this.innerList.setWidth(w - this.list.getFrameWidth('lr'));
43201                 this.restrictHeight();
43202             }, this);
43203             this[this.pageSize?'footer':'innerList'].setStyle('margin-bottom', this.handleHeight+'px');
43204         }
43205         if(!this.editable){
43206             this.editable = true;
43207             this.setEditable(false);
43208         }  
43209         
43210         
43211         if (typeof(this.events.add.listeners) != 'undefined') {
43212             
43213             this.addicon = this.wrap.createChild(
43214                 {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-combo-add' });  
43215        
43216             this.addicon.on('click', function(e) {
43217                 this.fireEvent('add', this);
43218             }, this);
43219         }
43220         if (typeof(this.events.edit.listeners) != 'undefined') {
43221             
43222             this.editicon = this.wrap.createChild(
43223                 {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-combo-edit' });  
43224             if (this.addicon) {
43225                 this.editicon.setStyle('margin-left', '40px');
43226             }
43227             this.editicon.on('click', function(e) {
43228                 
43229                 // we fire even  if inothing is selected..
43230                 this.fireEvent('edit', this, this.lastData );
43231                 
43232             }, this);
43233         }
43234         
43235         
43236         
43237     },
43238
43239     // private
43240     initEvents : function(){
43241         Roo.form.ComboBox.superclass.initEvents.call(this);
43242
43243         this.keyNav = new Roo.KeyNav(this.el, {
43244             "up" : function(e){
43245                 this.inKeyMode = true;
43246                 this.selectPrev();
43247             },
43248
43249             "down" : function(e){
43250                 if(!this.isExpanded()){
43251                     this.onTriggerClick();
43252                 }else{
43253                     this.inKeyMode = true;
43254                     this.selectNext();
43255                 }
43256             },
43257
43258             "enter" : function(e){
43259                 this.onViewClick();
43260                 //return true;
43261             },
43262
43263             "esc" : function(e){
43264                 this.collapse();
43265             },
43266
43267             "tab" : function(e){
43268                 this.onViewClick(false);
43269                 this.fireEvent("specialkey", this, e);
43270                 return true;
43271             },
43272
43273             scope : this,
43274
43275             doRelay : function(foo, bar, hname){
43276                 if(hname == 'down' || this.scope.isExpanded()){
43277                    return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
43278                 }
43279                 return true;
43280             },
43281
43282             forceKeyDown: true
43283         });
43284         this.queryDelay = Math.max(this.queryDelay || 10,
43285                 this.mode == 'local' ? 10 : 250);
43286         this.dqTask = new Roo.util.DelayedTask(this.initQuery, this);
43287         if(this.typeAhead){
43288             this.taTask = new Roo.util.DelayedTask(this.onTypeAhead, this);
43289         }
43290         if(this.editable !== false){
43291             this.el.on("keyup", this.onKeyUp, this);
43292         }
43293         if(this.forceSelection){
43294             this.on('blur', this.doForce, this);
43295         }
43296     },
43297
43298     onDestroy : function(){
43299         if(this.view){
43300             this.view.setStore(null);
43301             this.view.el.removeAllListeners();
43302             this.view.el.remove();
43303             this.view.purgeListeners();
43304         }
43305         if(this.list){
43306             this.list.destroy();
43307         }
43308         if(this.store){
43309             this.store.un('beforeload', this.onBeforeLoad, this);
43310             this.store.un('load', this.onLoad, this);
43311             this.store.un('loadexception', this.onLoadException, this);
43312         }
43313         Roo.form.ComboBox.superclass.onDestroy.call(this);
43314     },
43315
43316     // private
43317     fireKey : function(e){
43318         if(e.isNavKeyPress() && !this.list.isVisible()){
43319             this.fireEvent("specialkey", this, e);
43320         }
43321     },
43322
43323     // private
43324     onResize: function(w, h){
43325         Roo.form.ComboBox.superclass.onResize.apply(this, arguments);
43326         
43327         if(typeof w != 'number'){
43328             // we do not handle it!?!?
43329             return;
43330         }
43331         var tw = this.trigger.getWidth();
43332         tw += this.addicon ? this.addicon.getWidth() : 0;
43333         tw += this.editicon ? this.editicon.getWidth() : 0;
43334         var x = w - tw;
43335         this.el.setWidth( this.adjustWidth('input', x));
43336             
43337         this.trigger.setStyle('left', x+'px');
43338         
43339         if(this.list && this.listWidth === undefined){
43340             var lw = Math.max(x + this.trigger.getWidth(), this.minListWidth);
43341             this.list.setWidth(lw);
43342             this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
43343         }
43344         
43345     
43346         
43347     },
43348
43349     /**
43350      * Allow or prevent the user from directly editing the field text.  If false is passed,
43351      * the user will only be able to select from the items defined in the dropdown list.  This method
43352      * is the runtime equivalent of setting the 'editable' config option at config time.
43353      * @param {Boolean} value True to allow the user to directly edit the field text
43354      */
43355     setEditable : function(value){
43356         if(value == this.editable){
43357             return;
43358         }
43359         this.editable = value;
43360         if(!value){
43361             this.el.dom.setAttribute('readOnly', true);
43362             this.el.on('mousedown', this.onTriggerClick,  this);
43363             this.el.addClass('x-combo-noedit');
43364         }else{
43365             this.el.dom.setAttribute('readOnly', false);
43366             this.el.un('mousedown', this.onTriggerClick,  this);
43367             this.el.removeClass('x-combo-noedit');
43368         }
43369     },
43370
43371     // private
43372     onBeforeLoad : function(){
43373         if(!this.hasFocus){
43374             return;
43375         }
43376         this.innerList.update(this.loadingText ?
43377                '<div class="loading-indicator">'+this.loadingText+'</div>' : '');
43378         this.restrictHeight();
43379         this.selectedIndex = -1;
43380     },
43381
43382     // private
43383     onLoad : function(){
43384         if(!this.hasFocus){
43385             return;
43386         }
43387         if(this.store.getCount() > 0){
43388             this.expand();
43389             this.restrictHeight();
43390             if(this.lastQuery == this.allQuery){
43391                 if(this.editable){
43392                     this.el.dom.select();
43393                 }
43394                 if(!this.selectByValue(this.value, true)){
43395                     this.select(0, true);
43396                 }
43397             }else{
43398                 this.selectNext();
43399                 if(this.typeAhead && this.lastKey != Roo.EventObject.BACKSPACE && this.lastKey != Roo.EventObject.DELETE){
43400                     this.taTask.delay(this.typeAheadDelay);
43401                 }
43402             }
43403         }else{
43404             this.onEmptyResults();
43405         }
43406         //this.el.focus();
43407     },
43408     // private
43409     onLoadException : function()
43410     {
43411         this.collapse();
43412         Roo.log(this.store.reader.jsonData);
43413         if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
43414             Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
43415         }
43416         
43417         
43418     },
43419     // private
43420     onTypeAhead : function(){
43421         if(this.store.getCount() > 0){
43422             var r = this.store.getAt(0);
43423             var newValue = r.data[this.displayField];
43424             var len = newValue.length;
43425             var selStart = this.getRawValue().length;
43426             if(selStart != len){
43427                 this.setRawValue(newValue);
43428                 this.selectText(selStart, newValue.length);
43429             }
43430         }
43431     },
43432
43433     // private
43434     onSelect : function(record, index){
43435         if(this.fireEvent('beforeselect', this, record, index) !== false){
43436             this.setFromData(index > -1 ? record.data : false);
43437             this.collapse();
43438             this.fireEvent('select', this, record, index);
43439         }
43440     },
43441
43442     /**
43443      * Returns the currently selected field value or empty string if no value is set.
43444      * @return {String} value The selected value
43445      */
43446     getValue : function(){
43447         if(this.valueField){
43448             return typeof this.value != 'undefined' ? this.value : '';
43449         }
43450         return Roo.form.ComboBox.superclass.getValue.call(this);
43451     },
43452
43453     /**
43454      * Clears any text/value currently set in the field
43455      */
43456     clearValue : function(){
43457         if(this.hiddenField){
43458             this.hiddenField.value = '';
43459         }
43460         this.value = '';
43461         this.setRawValue('');
43462         this.lastSelectionText = '';
43463         
43464     },
43465
43466     /**
43467      * Sets the specified value into the field.  If the value finds a match, the corresponding record text
43468      * will be displayed in the field.  If the value does not match the data value of an existing item,
43469      * and the valueNotFoundText config option is defined, it will be displayed as the default field text.
43470      * Otherwise the field will be blank (although the value will still be set).
43471      * @param {String} value The value to match
43472      */
43473     setValue : function(v){
43474         var text = v;
43475         if(this.valueField){
43476             var r = this.findRecord(this.valueField, v);
43477             if(r){
43478                 text = r.data[this.displayField];
43479             }else if(this.valueNotFoundText !== undefined){
43480                 text = this.valueNotFoundText;
43481             }
43482         }
43483         this.lastSelectionText = text;
43484         if(this.hiddenField){
43485             this.hiddenField.value = v;
43486         }
43487         Roo.form.ComboBox.superclass.setValue.call(this, text);
43488         this.value = v;
43489     },
43490     /**
43491      * @property {Object} the last set data for the element
43492      */
43493     
43494     lastData : false,
43495     /**
43496      * Sets the value of the field based on a object which is related to the record format for the store.
43497      * @param {Object} value the value to set as. or false on reset?
43498      */
43499     setFromData : function(o){
43500         var dv = ''; // display value
43501         var vv = ''; // value value..
43502         this.lastData = o;
43503         if (this.displayField) {
43504             dv = !o || typeof(o[this.displayField]) == 'undefined' ? '' : o[this.displayField];
43505         } else {
43506             // this is an error condition!!!
43507             Roo.log('no  displayField value set for '+ (this.name ? this.name : this.id));
43508         }
43509         
43510         if(this.valueField){
43511             vv = !o || typeof(o[this.valueField]) == 'undefined' ? dv : o[this.valueField];
43512         }
43513         if(this.hiddenField){
43514             this.hiddenField.value = vv;
43515             
43516             this.lastSelectionText = dv;
43517             Roo.form.ComboBox.superclass.setValue.call(this, dv);
43518             this.value = vv;
43519             return;
43520         }
43521         // no hidden field.. - we store the value in 'value', but still display
43522         // display field!!!!
43523         this.lastSelectionText = dv;
43524         Roo.form.ComboBox.superclass.setValue.call(this, dv);
43525         this.value = vv;
43526         
43527         
43528     },
43529     // private
43530     reset : function(){
43531         // overridden so that last data is reset..
43532         this.setValue(this.resetValue);
43533         this.originalValue = this.getValue();
43534         this.clearInvalid();
43535         this.lastData = false;
43536         if (this.view) {
43537             this.view.clearSelections();
43538         }
43539     },
43540     // private
43541     findRecord : function(prop, value){
43542         var record;
43543         if(this.store.getCount() > 0){
43544             this.store.each(function(r){
43545                 if(r.data[prop] == value){
43546                     record = r;
43547                     return false;
43548                 }
43549                 return true;
43550             });
43551         }
43552         return record;
43553     },
43554     
43555     getName: function()
43556     {
43557         // returns hidden if it's set..
43558         if (!this.rendered) {return ''};
43559         return !this.hiddenName && this.el.dom.name  ? this.el.dom.name : (this.hiddenName || '');
43560         
43561     },
43562     // private
43563     onViewMove : function(e, t){
43564         this.inKeyMode = false;
43565     },
43566
43567     // private
43568     onViewOver : function(e, t){
43569         if(this.inKeyMode){ // prevent key nav and mouse over conflicts
43570             return;
43571         }
43572         var item = this.view.findItemFromChild(t);
43573         if(item){
43574             var index = this.view.indexOf(item);
43575             this.select(index, false);
43576         }
43577     },
43578
43579     // private
43580     onViewClick : function(doFocus)
43581     {
43582         var index = this.view.getSelectedIndexes()[0];
43583         var r = this.store.getAt(index);
43584         if(r){
43585             this.onSelect(r, index);
43586         }
43587         if(doFocus !== false && !this.blockFocus){
43588             this.el.focus();
43589         }
43590     },
43591
43592     // private
43593     restrictHeight : function(){
43594         this.innerList.dom.style.height = '';
43595         var inner = this.innerList.dom;
43596         var h = Math.max(inner.clientHeight, inner.offsetHeight, inner.scrollHeight);
43597         this.innerList.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
43598         this.list.beginUpdate();
43599         this.list.setHeight(this.innerList.getHeight()+this.list.getFrameWidth('tb')+(this.resizable?this.handleHeight:0)+this.assetHeight);
43600         this.list.alignTo(this.el, this.listAlign);
43601         this.list.endUpdate();
43602     },
43603
43604     // private
43605     onEmptyResults : function(){
43606         this.collapse();
43607     },
43608
43609     /**
43610      * Returns true if the dropdown list is expanded, else false.
43611      */
43612     isExpanded : function(){
43613         return this.list.isVisible();
43614     },
43615
43616     /**
43617      * Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire.
43618      * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
43619      * @param {String} value The data value of the item to select
43620      * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
43621      * selected item if it is not currently in view (defaults to true)
43622      * @return {Boolean} True if the value matched an item in the list, else false
43623      */
43624     selectByValue : function(v, scrollIntoView){
43625         if(v !== undefined && v !== null){
43626             var r = this.findRecord(this.valueField || this.displayField, v);
43627             if(r){
43628                 this.select(this.store.indexOf(r), scrollIntoView);
43629                 return true;
43630             }
43631         }
43632         return false;
43633     },
43634
43635     /**
43636      * Select an item in the dropdown list by its numeric index in the list. This function does NOT cause the select event to fire.
43637      * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
43638      * @param {Number} index The zero-based index of the list item to select
43639      * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
43640      * selected item if it is not currently in view (defaults to true)
43641      */
43642     select : function(index, scrollIntoView){
43643         this.selectedIndex = index;
43644         this.view.select(index);
43645         if(scrollIntoView !== false){
43646             var el = this.view.getNode(index);
43647             if(el){
43648                 this.innerList.scrollChildIntoView(el, false);
43649             }
43650         }
43651     },
43652
43653     // private
43654     selectNext : function(){
43655         var ct = this.store.getCount();
43656         if(ct > 0){
43657             if(this.selectedIndex == -1){
43658                 this.select(0);
43659             }else if(this.selectedIndex < ct-1){
43660                 this.select(this.selectedIndex+1);
43661             }
43662         }
43663     },
43664
43665     // private
43666     selectPrev : function(){
43667         var ct = this.store.getCount();
43668         if(ct > 0){
43669             if(this.selectedIndex == -1){
43670                 this.select(0);
43671             }else if(this.selectedIndex != 0){
43672                 this.select(this.selectedIndex-1);
43673             }
43674         }
43675     },
43676
43677     // private
43678     onKeyUp : function(e){
43679         if(this.editable !== false && !e.isSpecialKey()){
43680             this.lastKey = e.getKey();
43681             this.dqTask.delay(this.queryDelay);
43682         }
43683     },
43684
43685     // private
43686     validateBlur : function(){
43687         return !this.list || !this.list.isVisible();   
43688     },
43689
43690     // private
43691     initQuery : function(){
43692         this.doQuery(this.getRawValue());
43693     },
43694
43695     // private
43696     doForce : function(){
43697         if(this.el.dom.value.length > 0){
43698             this.el.dom.value =
43699                 this.lastSelectionText === undefined ? '' : this.lastSelectionText;
43700              
43701         }
43702     },
43703
43704     /**
43705      * Execute a query to filter the dropdown list.  Fires the beforequery event prior to performing the
43706      * query allowing the query action to be canceled if needed.
43707      * @param {String} query The SQL query to execute
43708      * @param {Boolean} forceAll True to force the query to execute even if there are currently fewer characters
43709      * in the field than the minimum specified by the minChars config option.  It also clears any filter previously
43710      * saved in the current store (defaults to false)
43711      */
43712     doQuery : function(q, forceAll){
43713         if(q === undefined || q === null){
43714             q = '';
43715         }
43716         var qe = {
43717             query: q,
43718             forceAll: forceAll,
43719             combo: this,
43720             cancel:false
43721         };
43722         if(this.fireEvent('beforequery', qe)===false || qe.cancel){
43723             return false;
43724         }
43725         q = qe.query;
43726         forceAll = qe.forceAll;
43727         if(forceAll === true || (q.length >= this.minChars)){
43728             if(this.lastQuery != q || this.alwaysQuery){
43729                 this.lastQuery = q;
43730                 if(this.mode == 'local'){
43731                     this.selectedIndex = -1;
43732                     if(forceAll){
43733                         this.store.clearFilter();
43734                     }else{
43735                         this.store.filter(this.displayField, q);
43736                     }
43737                     this.onLoad();
43738                 }else{
43739                     this.store.baseParams[this.queryParam] = q;
43740                     this.store.load({
43741                         params: this.getParams(q)
43742                     });
43743                     this.expand();
43744                 }
43745             }else{
43746                 this.selectedIndex = -1;
43747                 this.onLoad();   
43748             }
43749         }
43750     },
43751
43752     // private
43753     getParams : function(q){
43754         var p = {};
43755         //p[this.queryParam] = q;
43756         if(this.pageSize){
43757             p.start = 0;
43758             p.limit = this.pageSize;
43759         }
43760         return p;
43761     },
43762
43763     /**
43764      * Hides the dropdown list if it is currently expanded. Fires the 'collapse' event on completion.
43765      */
43766     collapse : function(){
43767         if(!this.isExpanded()){
43768             return;
43769         }
43770         this.list.hide();
43771         Roo.get(document).un('mousedown', this.collapseIf, this);
43772         Roo.get(document).un('mousewheel', this.collapseIf, this);
43773         if (!this.editable) {
43774             Roo.get(document).un('keydown', this.listKeyPress, this);
43775         }
43776         this.fireEvent('collapse', this);
43777     },
43778
43779     // private
43780     collapseIf : function(e){
43781         if(!e.within(this.wrap) && !e.within(this.list)){
43782             this.collapse();
43783         }
43784     },
43785
43786     /**
43787      * Expands the dropdown list if it is currently hidden. Fires the 'expand' event on completion.
43788      */
43789     expand : function(){
43790         if(this.isExpanded() || !this.hasFocus){
43791             return;
43792         }
43793         this.list.alignTo(this.el, this.listAlign);
43794         this.list.show();
43795         Roo.get(document).on('mousedown', this.collapseIf, this);
43796         Roo.get(document).on('mousewheel', this.collapseIf, this);
43797         if (!this.editable) {
43798             Roo.get(document).on('keydown', this.listKeyPress, this);
43799         }
43800         
43801         this.fireEvent('expand', this);
43802     },
43803
43804     // private
43805     // Implements the default empty TriggerField.onTriggerClick function
43806     onTriggerClick : function(){
43807         if(this.disabled){
43808             return;
43809         }
43810         if(this.isExpanded()){
43811             this.collapse();
43812             if (!this.blockFocus) {
43813                 this.el.focus();
43814             }
43815             
43816         }else {
43817             this.hasFocus = true;
43818             if(this.triggerAction == 'all') {
43819                 this.doQuery(this.allQuery, true);
43820             } else {
43821                 this.doQuery(this.getRawValue());
43822             }
43823             if (!this.blockFocus) {
43824                 this.el.focus();
43825             }
43826         }
43827     },
43828     listKeyPress : function(e)
43829     {
43830         //Roo.log('listkeypress');
43831         // scroll to first matching element based on key pres..
43832         if (e.isSpecialKey()) {
43833             return false;
43834         }
43835         var k = String.fromCharCode(e.getKey()).toUpperCase();
43836         //Roo.log(k);
43837         var match  = false;
43838         var csel = this.view.getSelectedNodes();
43839         var cselitem = false;
43840         if (csel.length) {
43841             var ix = this.view.indexOf(csel[0]);
43842             cselitem  = this.store.getAt(ix);
43843             if (!cselitem.get(this.displayField) || cselitem.get(this.displayField).substring(0,1).toUpperCase() != k) {
43844                 cselitem = false;
43845             }
43846             
43847         }
43848         
43849         this.store.each(function(v) { 
43850             if (cselitem) {
43851                 // start at existing selection.
43852                 if (cselitem.id == v.id) {
43853                     cselitem = false;
43854                 }
43855                 return;
43856             }
43857                 
43858             if (v.get(this.displayField) && v.get(this.displayField).substring(0,1).toUpperCase() == k) {
43859                 match = this.store.indexOf(v);
43860                 return false;
43861             }
43862         }, this);
43863         
43864         if (match === false) {
43865             return true; // no more action?
43866         }
43867         // scroll to?
43868         this.view.select(match);
43869         var sn = Roo.get(this.view.getSelectedNodes()[0]);
43870         sn.scrollIntoView(sn.dom.parentNode, false);
43871     } 
43872
43873     /** 
43874     * @cfg {Boolean} grow 
43875     * @hide 
43876     */
43877     /** 
43878     * @cfg {Number} growMin 
43879     * @hide 
43880     */
43881     /** 
43882     * @cfg {Number} growMax 
43883     * @hide 
43884     */
43885     /**
43886      * @hide
43887      * @method autoSize
43888      */
43889 });/*
43890  * Copyright(c) 2010-2012, Roo J Solutions Limited
43891  *
43892  * Licence LGPL
43893  *
43894  */
43895
43896 /**
43897  * @class Roo.form.ComboBoxArray
43898  * @extends Roo.form.TextField
43899  * A facebook style adder... for lists of email / people / countries  etc...
43900  * pick multiple items from a combo box, and shows each one.
43901  *
43902  *  Fred [x]  Brian [x]  [Pick another |v]
43903  *
43904  *
43905  *  For this to work: it needs various extra information
43906  *    - normal combo problay has
43907  *      name, hiddenName
43908  *    + displayField, valueField
43909  *
43910  *    For our purpose...
43911  *
43912  *
43913  *   If we change from 'extends' to wrapping...
43914  *   
43915  *  
43916  *
43917  
43918  
43919  * @constructor
43920  * Create a new ComboBoxArray.
43921  * @param {Object} config Configuration options
43922  */
43923  
43924
43925 Roo.form.ComboBoxArray = function(config)
43926 {
43927     this.addEvents({
43928         /**
43929          * @event beforeremove
43930          * Fires before remove the value from the list
43931              * @param {Roo.form.ComboBoxArray} _self This combo box array
43932              * @param {Roo.form.ComboBoxArray.Item} item removed item
43933              */
43934         'beforeremove' : true,
43935         /**
43936          * @event remove
43937          * Fires when remove the value from the list
43938              * @param {Roo.form.ComboBoxArray} _self This combo box array
43939              * @param {Roo.form.ComboBoxArray.Item} item removed item
43940              */
43941         'remove' : true
43942         
43943         
43944     });
43945     
43946     Roo.form.ComboBoxArray.superclass.constructor.call(this, config);
43947     
43948     this.items = new Roo.util.MixedCollection(false);
43949     
43950     // construct the child combo...
43951     
43952     
43953     
43954     
43955    
43956     
43957 }
43958
43959  
43960 Roo.extend(Roo.form.ComboBoxArray, Roo.form.TextField,
43961
43962     /**
43963      * @cfg {Roo.form.ComboBox} combo [required] The combo box that is wrapped
43964      */
43965     
43966     lastData : false,
43967     
43968     // behavies liek a hiddne field
43969     inputType:      'hidden',
43970     /**
43971      * @cfg {Number} width The width of the box that displays the selected element
43972      */ 
43973     width:          300,
43974
43975     
43976     
43977     /**
43978      * @cfg {String} name    The name of the visable items on this form (eg. titles not ids)
43979      */
43980     name : false,
43981     /**
43982      * @cfg {String} hiddenName    The hidden name of the field, often contains an comma seperated list of names
43983      */
43984     hiddenName : false,
43985       /**
43986      * @cfg {String} seperator    The value seperator normally ',' 
43987      */
43988     seperator : ',',
43989     
43990     // private the array of items that are displayed..
43991     items  : false,
43992     // private - the hidden field el.
43993     hiddenEl : false,
43994     // private - the filed el..
43995     el : false,
43996     
43997     //validateValue : function() { return true; }, // all values are ok!
43998     //onAddClick: function() { },
43999     
44000     onRender : function(ct, position) 
44001     {
44002         
44003         // create the standard hidden element
44004         //Roo.form.ComboBoxArray.superclass.onRender.call(this, ct, position);
44005         
44006         
44007         // give fake names to child combo;
44008         this.combo.hiddenName = this.hiddenName ? (this.hiddenName+'-subcombo') : this.hiddenName;
44009         this.combo.name = this.name ? (this.name+'-subcombo') : this.name;
44010         
44011         this.combo = Roo.factory(this.combo, Roo.form);
44012         this.combo.onRender(ct, position);
44013         if (typeof(this.combo.width) != 'undefined') {
44014             this.combo.onResize(this.combo.width,0);
44015         }
44016         
44017         this.combo.initEvents();
44018         
44019         // assigned so form know we need to do this..
44020         this.store          = this.combo.store;
44021         this.valueField     = this.combo.valueField;
44022         this.displayField   = this.combo.displayField ;
44023         
44024         
44025         this.combo.wrap.addClass('x-cbarray-grp');
44026         
44027         var cbwrap = this.combo.wrap.createChild(
44028             {tag: 'div', cls: 'x-cbarray-cb'},
44029             this.combo.el.dom
44030         );
44031         
44032              
44033         this.hiddenEl = this.combo.wrap.createChild({
44034             tag: 'input',  type:'hidden' , name: this.hiddenName, value : ''
44035         });
44036         this.el = this.combo.wrap.createChild({
44037             tag: 'input',  type:'hidden' , name: this.name, value : ''
44038         });
44039          //   this.el.dom.removeAttribute("name");
44040         
44041         
44042         this.outerWrap = this.combo.wrap;
44043         this.wrap = cbwrap;
44044         
44045         this.outerWrap.setWidth(this.width);
44046         this.outerWrap.dom.removeChild(this.el.dom);
44047         
44048         this.wrap.dom.appendChild(this.el.dom);
44049         this.outerWrap.dom.removeChild(this.combo.trigger.dom);
44050         this.combo.wrap.dom.appendChild(this.combo.trigger.dom);
44051         
44052         this.combo.trigger.setStyle('position','relative');
44053         this.combo.trigger.setStyle('left', '0px');
44054         this.combo.trigger.setStyle('top', '2px');
44055         
44056         this.combo.el.setStyle('vertical-align', 'text-bottom');
44057         
44058         //this.trigger.setStyle('vertical-align', 'top');
44059         
44060         // this should use the code from combo really... on('add' ....)
44061         if (this.adder) {
44062             
44063         
44064             this.adder = this.outerWrap.createChild(
44065                 {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-adder', style: 'margin-left:2px'});  
44066             var _t = this;
44067             this.adder.on('click', function(e) {
44068                 _t.fireEvent('adderclick', this, e);
44069             }, _t);
44070         }
44071         //var _t = this;
44072         //this.adder.on('click', this.onAddClick, _t);
44073         
44074         
44075         this.combo.on('select', function(cb, rec, ix) {
44076             this.addItem(rec.data);
44077             
44078             cb.setValue('');
44079             cb.el.dom.value = '';
44080             //cb.lastData = rec.data;
44081             // add to list
44082             
44083         }, this);
44084         
44085         
44086     },
44087     
44088     
44089     getName: function()
44090     {
44091         // returns hidden if it's set..
44092         if (!this.rendered) {return ''};
44093         return  this.hiddenName ? this.hiddenName : this.name;
44094         
44095     },
44096     
44097     
44098     onResize: function(w, h){
44099         
44100         return;
44101         // not sure if this is needed..
44102         //this.combo.onResize(w,h);
44103         
44104         if(typeof w != 'number'){
44105             // we do not handle it!?!?
44106             return;
44107         }
44108         var tw = this.combo.trigger.getWidth();
44109         tw += this.addicon ? this.addicon.getWidth() : 0;
44110         tw += this.editicon ? this.editicon.getWidth() : 0;
44111         var x = w - tw;
44112         this.combo.el.setWidth( this.combo.adjustWidth('input', x));
44113             
44114         this.combo.trigger.setStyle('left', '0px');
44115         
44116         if(this.list && this.listWidth === undefined){
44117             var lw = Math.max(x + this.combo.trigger.getWidth(), this.combo.minListWidth);
44118             this.list.setWidth(lw);
44119             this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
44120         }
44121         
44122     
44123         
44124     },
44125     
44126     addItem: function(rec)
44127     {
44128         var valueField = this.combo.valueField;
44129         var displayField = this.combo.displayField;
44130         
44131         if (this.items.indexOfKey(rec[valueField]) > -1) {
44132             //console.log("GOT " + rec.data.id);
44133             return;
44134         }
44135         
44136         var x = new Roo.form.ComboBoxArray.Item({
44137             //id : rec[this.idField],
44138             data : rec,
44139             displayField : displayField ,
44140             tipField : displayField ,
44141             cb : this
44142         });
44143         // use the 
44144         this.items.add(rec[valueField],x);
44145         // add it before the element..
44146         this.updateHiddenEl();
44147         x.render(this.outerWrap, this.wrap.dom);
44148         // add the image handler..
44149     },
44150     
44151     updateHiddenEl : function()
44152     {
44153         this.validate();
44154         if (!this.hiddenEl) {
44155             return;
44156         }
44157         var ar = [];
44158         var idField = this.combo.valueField;
44159         
44160         this.items.each(function(f) {
44161             ar.push(f.data[idField]);
44162         });
44163         this.hiddenEl.dom.value = ar.join(this.seperator);
44164         this.validate();
44165     },
44166     
44167     reset : function()
44168     {
44169         this.items.clear();
44170         
44171         Roo.each(this.outerWrap.select('.x-cbarray-item', true).elements, function(el){
44172            el.remove();
44173         });
44174         
44175         this.el.dom.value = '';
44176         if (this.hiddenEl) {
44177             this.hiddenEl.dom.value = '';
44178         }
44179         
44180     },
44181     getValue: function()
44182     {
44183         return this.hiddenEl ? this.hiddenEl.dom.value : '';
44184     },
44185     setValue: function(v) // not a valid action - must use addItems..
44186     {
44187         
44188         this.reset();
44189          
44190         if (this.store.isLocal && (typeof(v) == 'string')) {
44191             // then we can use the store to find the values..
44192             // comma seperated at present.. this needs to allow JSON based encoding..
44193             this.hiddenEl.value  = v;
44194             var v_ar = [];
44195             Roo.each(v.split(this.seperator), function(k) {
44196                 Roo.log("CHECK " + this.valueField + ',' + k);
44197                 var li = this.store.query(this.valueField, k);
44198                 if (!li.length) {
44199                     return;
44200                 }
44201                 var add = {};
44202                 add[this.valueField] = k;
44203                 add[this.displayField] = li.item(0).data[this.displayField];
44204                 
44205                 this.addItem(add);
44206             }, this) 
44207              
44208         }
44209         if (typeof(v) == 'object' ) {
44210             // then let's assume it's an array of objects..
44211             Roo.each(v, function(l) {
44212                 var add = l;
44213                 if (typeof(l) == 'string') {
44214                     add = {};
44215                     add[this.valueField] = l;
44216                     add[this.displayField] = l
44217                 }
44218                 this.addItem(add);
44219             }, this);
44220              
44221         }
44222         
44223         
44224     },
44225     setFromData: function(v)
44226     {
44227         // this recieves an object, if setValues is called.
44228         this.reset();
44229         this.el.dom.value = v[this.displayField];
44230         this.hiddenEl.dom.value = v[this.valueField];
44231         if (typeof(v[this.valueField]) != 'string' || !v[this.valueField].length) {
44232             return;
44233         }
44234         var kv = v[this.valueField];
44235         var dv = v[this.displayField];
44236         kv = typeof(kv) != 'string' ? '' : kv;
44237         dv = typeof(dv) != 'string' ? '' : dv;
44238         
44239         
44240         var keys = kv.split(this.seperator);
44241         var display = dv.split(this.seperator);
44242         for (var i = 0 ; i < keys.length; i++) {
44243             add = {};
44244             add[this.valueField] = keys[i];
44245             add[this.displayField] = display[i];
44246             this.addItem(add);
44247         }
44248       
44249         
44250     },
44251     
44252     /**
44253      * Validates the combox array value
44254      * @return {Boolean} True if the value is valid, else false
44255      */
44256     validate : function(){
44257         if(this.disabled || this.validateValue(this.processValue(this.getValue()))){
44258             this.clearInvalid();
44259             return true;
44260         }
44261         return false;
44262     },
44263     
44264     validateValue : function(value){
44265         return Roo.form.ComboBoxArray.superclass.validateValue.call(this, this.getValue());
44266         
44267     },
44268     
44269     /*@
44270      * overide
44271      * 
44272      */
44273     isDirty : function() {
44274         if(this.disabled) {
44275             return false;
44276         }
44277         
44278         try {
44279             var d = Roo.decode(String(this.originalValue));
44280         } catch (e) {
44281             return String(this.getValue()) !== String(this.originalValue);
44282         }
44283         
44284         var originalValue = [];
44285         
44286         for (var i = 0; i < d.length; i++){
44287             originalValue.push(d[i][this.valueField]);
44288         }
44289         
44290         return String(this.getValue()) !== String(originalValue.join(this.seperator));
44291         
44292     }
44293     
44294 });
44295
44296
44297
44298 /**
44299  * @class Roo.form.ComboBoxArray.Item
44300  * @extends Roo.BoxComponent
44301  * A selected item in the list
44302  *  Fred [x]  Brian [x]  [Pick another |v]
44303  * 
44304  * @constructor
44305  * Create a new item.
44306  * @param {Object} config Configuration options
44307  */
44308  
44309 Roo.form.ComboBoxArray.Item = function(config) {
44310     config.id = Roo.id();
44311     Roo.form.ComboBoxArray.Item.superclass.constructor.call(this, config);
44312 }
44313
44314 Roo.extend(Roo.form.ComboBoxArray.Item, Roo.BoxComponent, {
44315     data : {},
44316     cb: false,
44317     displayField : false,
44318     tipField : false,
44319     
44320     
44321     defaultAutoCreate : {
44322         tag: 'div',
44323         cls: 'x-cbarray-item',
44324         cn : [ 
44325             { tag: 'div' },
44326             {
44327                 tag: 'img',
44328                 width:16,
44329                 height : 16,
44330                 src : Roo.BLANK_IMAGE_URL ,
44331                 align: 'center'
44332             }
44333         ]
44334         
44335     },
44336     
44337  
44338     onRender : function(ct, position)
44339     {
44340         Roo.form.Field.superclass.onRender.call(this, ct, position);
44341         
44342         if(!this.el){
44343             var cfg = this.getAutoCreate();
44344             this.el = ct.createChild(cfg, position);
44345         }
44346         
44347         this.el.child('img').dom.setAttribute('src', Roo.BLANK_IMAGE_URL);
44348         
44349         this.el.child('div').dom.innerHTML = this.cb.renderer ? 
44350             this.cb.renderer(this.data) :
44351             String.format('{0}',this.data[this.displayField]);
44352         
44353             
44354         this.el.child('div').dom.setAttribute('qtip',
44355                         String.format('{0}',this.data[this.tipField])
44356         );
44357         
44358         this.el.child('img').on('click', this.remove, this);
44359         
44360     },
44361    
44362     remove : function()
44363     {
44364         if(this.cb.disabled){
44365             return;
44366         }
44367         
44368         if(false !== this.cb.fireEvent('beforeremove', this.cb, this)){
44369             this.cb.items.remove(this);
44370             this.el.child('img').un('click', this.remove, this);
44371             this.el.remove();
44372             this.cb.updateHiddenEl();
44373
44374             this.cb.fireEvent('remove', this.cb, this);
44375         }
44376         
44377     }
44378 });/*
44379  * RooJS Library 1.1.1
44380  * Copyright(c) 2008-2011  Alan Knowles
44381  *
44382  * License - LGPL
44383  */
44384  
44385
44386 /**
44387  * @class Roo.form.ComboNested
44388  * @extends Roo.form.ComboBox
44389  * A combobox for that allows selection of nested items in a list,
44390  * eg.
44391  *
44392  *  Book
44393  *    -> red
44394  *    -> green
44395  *  Table
44396  *    -> square
44397  *      ->red
44398  *      ->green
44399  *    -> rectangle
44400  *      ->green
44401  *      
44402  * 
44403  * @constructor
44404  * Create a new ComboNested
44405  * @param {Object} config Configuration options
44406  */
44407 Roo.form.ComboNested = function(config){
44408     Roo.form.ComboCheck.superclass.constructor.call(this, config);
44409     // should verify some data...
44410     // like
44411     // hiddenName = required..
44412     // displayField = required
44413     // valudField == required
44414     var req= [ 'hiddenName', 'displayField', 'valueField' ];
44415     var _t = this;
44416     Roo.each(req, function(e) {
44417         if ((typeof(_t[e]) == 'undefined' ) || !_t[e].length) {
44418             throw "Roo.form.ComboNested : missing value for: " + e;
44419         }
44420     });
44421      
44422     
44423 };
44424
44425 Roo.extend(Roo.form.ComboNested, Roo.form.ComboBox, {
44426    
44427     /*
44428      * @config {Number} max Number of columns to show
44429      */
44430     
44431     maxColumns : 3,
44432    
44433     list : null, // the outermost div..
44434     innerLists : null, // the
44435     views : null,
44436     stores : null,
44437     // private
44438     loadingChildren : false,
44439     
44440     onRender : function(ct, position)
44441     {
44442         Roo.form.ComboBox.superclass.onRender.call(this, ct, position); // skip parent call - got to above..
44443         
44444         if(this.hiddenName){
44445             this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name: this.hiddenName, id:  (this.hiddenId||this.hiddenName)},
44446                     'before', true);
44447             this.hiddenField.value =
44448                 this.hiddenValue !== undefined ? this.hiddenValue :
44449                 this.value !== undefined ? this.value : '';
44450
44451             // prevent input submission
44452             this.el.dom.removeAttribute('name');
44453              
44454              
44455         }
44456         
44457         if(Roo.isGecko){
44458             this.el.dom.setAttribute('autocomplete', 'off');
44459         }
44460
44461         var cls = 'x-combo-list';
44462
44463         this.list = new Roo.Layer({
44464             shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
44465         });
44466
44467         var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
44468         this.list.setWidth(lw);
44469         this.list.swallowEvent('mousewheel');
44470         this.assetHeight = 0;
44471
44472         if(this.title){
44473             this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
44474             this.assetHeight += this.header.getHeight();
44475         }
44476         this.innerLists = [];
44477         this.views = [];
44478         this.stores = [];
44479         for (var i =0 ; i < this.maxColumns; i++) {
44480             this.onRenderList( cls, i);
44481         }
44482         
44483         // always needs footer, as we are going to have an 'OK' button.
44484         this.footer = this.list.createChild({cls:cls+'-ft'});
44485         this.pageTb = new Roo.Toolbar(this.footer);  
44486         var _this = this;
44487         this.pageTb.add(  {
44488             
44489             text: 'Done',
44490             handler: function()
44491             {
44492                 _this.collapse();
44493             }
44494         });
44495         
44496         if ( this.allowBlank && !this.disableClear) {
44497             
44498             this.pageTb.add(new Roo.Toolbar.Fill(), {
44499                 cls: 'x-btn-icon x-btn-clear',
44500                 text: '&#160;',
44501                 handler: function()
44502                 {
44503                     _this.collapse();
44504                     _this.clearValue();
44505                     _this.onSelect(false, -1);
44506                 }
44507             });
44508         }
44509         if (this.footer) {
44510             this.assetHeight += this.footer.getHeight();
44511         }
44512         
44513     },
44514     onRenderList : function (  cls, i)
44515     {
44516         
44517         var lw = Math.floor(
44518                 ((this.listWidth * this.maxColumns || Math.max(this.wrap.getWidth(), this.minListWidth)) - this.list.getFrameWidth('lr')) / this.maxColumns
44519         );
44520         
44521         this.list.setWidth(lw); // default to '1'
44522
44523         var il = this.innerLists[i] = this.list.createChild({cls:cls+'-inner'});
44524         //il.on('mouseover', this.onViewOver, this, { list:  i });
44525         //il.on('mousemove', this.onViewMove, this, { list:  i });
44526         il.setWidth(lw);
44527         il.setStyle({ 'overflow-x' : 'hidden'});
44528
44529         if(!this.tpl){
44530             this.tpl = new Roo.Template({
44531                 html :  '<div class="'+cls+'-item '+cls+'-item-{cn:this.isEmpty}">{' + this.displayField + '}</div>',
44532                 isEmpty: function (value, allValues) {
44533                     //Roo.log(value);
44534                     var dl = typeof(value.data) != 'undefined' ? value.data.length : value.length; ///json is a nested response..
44535                     return dl ? 'has-children' : 'no-children'
44536                 }
44537             });
44538         }
44539         
44540         var store  = this.store;
44541         if (i > 0) {
44542             store  = new Roo.data.SimpleStore({
44543                 //fields : this.store.reader.meta.fields,
44544                 reader : this.store.reader,
44545                 data : [ ]
44546             });
44547         }
44548         this.stores[i]  = store;
44549                   
44550         var view = this.views[i] = new Roo.View(
44551             il,
44552             this.tpl,
44553             {
44554                 singleSelect:true,
44555                 store: store,
44556                 selectedClass: this.selectedClass
44557             }
44558         );
44559         view.getEl().setWidth(lw);
44560         view.getEl().setStyle({
44561             position: i < 1 ? 'relative' : 'absolute',
44562             top: 0,
44563             left: (i * lw ) + 'px',
44564             display : i > 0 ? 'none' : 'block'
44565         });
44566         view.on('selectionchange', this.onSelectChange.createDelegate(this, {list : i }, true));
44567         view.on('dblclick', this.onDoubleClick.createDelegate(this, {list : i }, true));
44568         //view.on('click', this.onViewClick, this, { list : i });
44569
44570         store.on('beforeload', this.onBeforeLoad, this);
44571         store.on('load',  this.onLoad, this, { list  : i});
44572         store.on('loadexception', this.onLoadException, this);
44573
44574         // hide the other vies..
44575         
44576         
44577         
44578     },
44579       
44580     restrictHeight : function()
44581     {
44582         var mh = 0;
44583         Roo.each(this.innerLists, function(il,i) {
44584             var el = this.views[i].getEl();
44585             el.dom.style.height = '';
44586             var inner = el.dom;
44587             var h = Math.max(il.clientHeight, il.offsetHeight, il.scrollHeight);
44588             // only adjust heights on other ones..
44589             mh = Math.max(h, mh);
44590             if (i < 1) {
44591                 
44592                 el.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
44593                 il.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
44594                
44595             }
44596             
44597             
44598         }, this);
44599         
44600         this.list.beginUpdate();
44601         this.list.setHeight(mh+this.list.getFrameWidth('tb')+this.assetHeight);
44602         this.list.alignTo(this.el, this.listAlign);
44603         this.list.endUpdate();
44604         
44605     },
44606      
44607     
44608     // -- store handlers..
44609     // private
44610     onBeforeLoad : function()
44611     {
44612         if(!this.hasFocus){
44613             return;
44614         }
44615         this.innerLists[0].update(this.loadingText ?
44616                '<div class="loading-indicator">'+this.loadingText+'</div>' : '');
44617         this.restrictHeight();
44618         this.selectedIndex = -1;
44619     },
44620     // private
44621     onLoad : function(a,b,c,d)
44622     {
44623         if (!this.loadingChildren) {
44624             // then we are loading the top level. - hide the children
44625             for (var i = 1;i < this.views.length; i++) {
44626                 this.views[i].getEl().setStyle({ display : 'none' });
44627             }
44628             var lw = Math.floor(
44629                 ((this.listWidth * this.maxColumns || Math.max(this.wrap.getWidth(), this.minListWidth)) - this.list.getFrameWidth('lr')) / this.maxColumns
44630             );
44631         
44632              this.list.setWidth(lw); // default to '1'
44633
44634             
44635         }
44636         if(!this.hasFocus){
44637             return;
44638         }
44639         
44640         if(this.store.getCount() > 0) {
44641             this.expand();
44642             this.restrictHeight();   
44643         } else {
44644             this.onEmptyResults();
44645         }
44646         
44647         if (!this.loadingChildren) {
44648             this.selectActive();
44649         }
44650         /*
44651         this.stores[1].loadData([]);
44652         this.stores[2].loadData([]);
44653         this.views
44654         */    
44655     
44656         //this.el.focus();
44657     },
44658     
44659     
44660     // private
44661     onLoadException : function()
44662     {
44663         this.collapse();
44664         Roo.log(this.store.reader.jsonData);
44665         if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
44666             Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
44667         }
44668         
44669         
44670     },
44671     // no cleaning of leading spaces on blur here.
44672     cleanLeadingSpace : function(e) { },
44673     
44674
44675     onSelectChange : function (view, sels, opts )
44676     {
44677         var ix = view.getSelectedIndexes();
44678          
44679         if (opts.list > this.maxColumns - 2) {
44680             if (view.store.getCount()<  1) {
44681                 this.views[opts.list ].getEl().setStyle({ display :   'none' });
44682
44683             } else  {
44684                 if (ix.length) {
44685                     // used to clear ?? but if we are loading unselected 
44686                     this.setFromData(view.store.getAt(ix[0]).data);
44687                 }
44688                 
44689             }
44690             
44691             return;
44692         }
44693         
44694         if (!ix.length) {
44695             // this get's fired when trigger opens..
44696            // this.setFromData({});
44697             var str = this.stores[opts.list+1];
44698             str.data.clear(); // removeall wihtout the fire events..
44699             return;
44700         }
44701         
44702         var rec = view.store.getAt(ix[0]);
44703          
44704         this.setFromData(rec.data);
44705         this.fireEvent('select', this, rec, ix[0]);
44706         
44707         var lw = Math.floor(
44708              (
44709                 (this.listWidth * this.maxColumns || Math.max(this.wrap.getWidth(), this.minListWidth)) - this.list.getFrameWidth('lr')
44710              ) / this.maxColumns
44711         );
44712         this.loadingChildren = true;
44713         this.stores[opts.list+1].loadDataFromChildren( rec );
44714         this.loadingChildren = false;
44715         var dl = this.stores[opts.list+1]. getTotalCount();
44716         
44717         this.views[opts.list+1].getEl().setHeight( this.innerLists[0].getHeight());
44718         
44719         this.views[opts.list+1].getEl().setStyle({ display : dl ? 'block' : 'none' });
44720         for (var i = opts.list+2; i < this.views.length;i++) {
44721             this.views[i].getEl().setStyle({ display : 'none' });
44722         }
44723         
44724         this.innerLists[opts.list+1].setHeight( this.innerLists[0].getHeight());
44725         this.list.setWidth(lw * (opts.list + (dl ? 2 : 1)));
44726         
44727         if (this.isLoading) {
44728            // this.selectActive(opts.list);
44729         }
44730          
44731     },
44732     
44733     
44734     
44735     
44736     onDoubleClick : function()
44737     {
44738         this.collapse(); //??
44739     },
44740     
44741      
44742     
44743     
44744     
44745     // private
44746     recordToStack : function(store, prop, value, stack)
44747     {
44748         var cstore = new Roo.data.SimpleStore({
44749             //fields : this.store.reader.meta.fields, // we need array reader.. for
44750             reader : this.store.reader,
44751             data : [ ]
44752         });
44753         var _this = this;
44754         var record  = false;
44755         var srec = false;
44756         if(store.getCount() < 1){
44757             return false;
44758         }
44759         store.each(function(r){
44760             if(r.data[prop] == value){
44761                 record = r;
44762             srec = r;
44763                 return false;
44764             }
44765             if (r.data.cn && r.data.cn.length) {
44766                 cstore.loadDataFromChildren( r);
44767                 var cret = _this.recordToStack(cstore, prop, value, stack);
44768                 if (cret !== false) {
44769                     record = cret;
44770                     srec = r;
44771                     return false;
44772                 }
44773             }
44774              
44775             return true;
44776         });
44777         if (record == false) {
44778             return false
44779         }
44780         stack.unshift(srec);
44781         return record;
44782     },
44783     
44784     /*
44785      * find the stack of stores that match our value.
44786      *
44787      * 
44788      */
44789     
44790     selectActive : function ()
44791     {
44792         // if store is not loaded, then we will need to wait for that to happen first.
44793         var stack = [];
44794         this.recordToStack(this.store, this.valueField, this.getValue(), stack);
44795         for (var i = 0; i < stack.length; i++ ) {
44796             this.views[i].select(stack[i].store.indexOf(stack[i]), false, false );
44797         }
44798         
44799     }
44800         
44801          
44802     
44803     
44804     
44805     
44806 });/*
44807  * Based on:
44808  * Ext JS Library 1.1.1
44809  * Copyright(c) 2006-2007, Ext JS, LLC.
44810  *
44811  * Originally Released Under LGPL - original licence link has changed is not relivant.
44812  *
44813  * Fork - LGPL
44814  * <script type="text/javascript">
44815  */
44816 /**
44817  * @class Roo.form.Checkbox
44818  * @extends Roo.form.Field
44819  * Single checkbox field.  Can be used as a direct replacement for traditional checkbox fields.
44820  * @constructor
44821  * Creates a new Checkbox
44822  * @param {Object} config Configuration options
44823  */
44824 Roo.form.Checkbox = function(config){
44825     Roo.form.Checkbox.superclass.constructor.call(this, config);
44826     this.addEvents({
44827         /**
44828          * @event check
44829          * Fires when the checkbox is checked or unchecked.
44830              * @param {Roo.form.Checkbox} this This checkbox
44831              * @param {Boolean} checked The new checked value
44832              */
44833         check : true
44834     });
44835 };
44836
44837 Roo.extend(Roo.form.Checkbox, Roo.form.Field,  {
44838     /**
44839      * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
44840      */
44841     focusClass : undefined,
44842     /**
44843      * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to "x-form-field")
44844      */
44845     fieldClass: "x-form-field",
44846     /**
44847      * @cfg {Boolean} checked True if the the checkbox should render already checked (defaults to false)
44848      */
44849     checked: false,
44850     /**
44851      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
44852      * {tag: "input", type: "checkbox", autocomplete: "off"})
44853      */
44854     defaultAutoCreate : { tag: "input", type: 'hidden', autocomplete: "off"},
44855     /**
44856      * @cfg {String} boxLabel The text that appears beside the checkbox
44857      */
44858     boxLabel : "",
44859     /**
44860      * @cfg {String} inputValue The value that should go into the generated input element's value attribute
44861      */  
44862     inputValue : '1',
44863     /**
44864      * @cfg {String} valueOff The value that should go into the generated input element's value when unchecked.
44865      */
44866      valueOff: '0', // value when not checked..
44867
44868     actionMode : 'viewEl', 
44869     //
44870     // private
44871     itemCls : 'x-menu-check-item x-form-item',
44872     groupClass : 'x-menu-group-item',
44873     inputType : 'hidden',
44874     
44875     
44876     inSetChecked: false, // check that we are not calling self...
44877     
44878     inputElement: false, // real input element?
44879     basedOn: false, // ????
44880     
44881     isFormField: true, // not sure where this is needed!!!!
44882
44883     onResize : function(){
44884         Roo.form.Checkbox.superclass.onResize.apply(this, arguments);
44885         if(!this.boxLabel){
44886             this.el.alignTo(this.wrap, 'c-c');
44887         }
44888     },
44889
44890     initEvents : function(){
44891         Roo.form.Checkbox.superclass.initEvents.call(this);
44892         this.el.on("click", this.onClick,  this);
44893         this.el.on("change", this.onClick,  this);
44894     },
44895
44896
44897     getResizeEl : function(){
44898         return this.wrap;
44899     },
44900
44901     getPositionEl : function(){
44902         return this.wrap;
44903     },
44904
44905     // private
44906     onRender : function(ct, position){
44907         Roo.form.Checkbox.superclass.onRender.call(this, ct, position);
44908         /*
44909         if(this.inputValue !== undefined){
44910             this.el.dom.value = this.inputValue;
44911         }
44912         */
44913         //this.wrap = this.el.wrap({cls: "x-form-check-wrap"});
44914         this.wrap = this.el.wrap({cls: 'x-menu-check-item '});
44915         var viewEl = this.wrap.createChild({ 
44916             tag: 'img', cls: 'x-menu-item-icon', style: 'margin: 0px;' ,src : Roo.BLANK_IMAGE_URL });
44917         this.viewEl = viewEl;   
44918         this.wrap.on('click', this.onClick,  this); 
44919         
44920         this.el.on('DOMAttrModified', this.setFromHidden,  this); //ff
44921         this.el.on('propertychange', this.setFromHidden,  this);  //ie
44922         
44923         
44924         
44925         if(this.boxLabel){
44926             this.wrap.createChild({tag: 'label', htmlFor: this.el.id, cls: 'x-form-cb-label', html: this.boxLabel});
44927         //    viewEl.on('click', this.onClick,  this); 
44928         }
44929         //if(this.checked){
44930             this.setChecked(this.checked);
44931         //}else{
44932             //this.checked = this.el.dom;
44933         //}
44934
44935     },
44936
44937     // private
44938     initValue : Roo.emptyFn,
44939
44940     /**
44941      * Returns the checked state of the checkbox.
44942      * @return {Boolean} True if checked, else false
44943      */
44944     getValue : function(){
44945         if(this.el){
44946             return String(this.el.dom.value) == String(this.inputValue ) ? this.inputValue : this.valueOff;
44947         }
44948         return this.valueOff;
44949         
44950     },
44951
44952         // private
44953     onClick : function(){ 
44954         if (this.disabled) {
44955             return;
44956         }
44957         this.setChecked(!this.checked);
44958
44959         //if(this.el.dom.checked != this.checked){
44960         //    this.setValue(this.el.dom.checked);
44961        // }
44962     },
44963
44964     /**
44965      * Sets the checked state of the checkbox.
44966      * On is always based on a string comparison between inputValue and the param.
44967      * @param {Boolean/String} value - the value to set 
44968      * @param {Boolean/String} suppressEvent - whether to suppress the checkchange event.
44969      */
44970     setValue : function(v,suppressEvent){
44971         
44972         
44973         //this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');
44974         //if(this.el && this.el.dom){
44975         //    this.el.dom.checked = this.checked;
44976         //    this.el.dom.defaultChecked = this.checked;
44977         //}
44978         this.setChecked(String(v) === String(this.inputValue), suppressEvent);
44979         //this.fireEvent("check", this, this.checked);
44980     },
44981     // private..
44982     setChecked : function(state,suppressEvent)
44983     {
44984         if (this.inSetChecked) {
44985             this.checked = state;
44986             return;
44987         }
44988         
44989     
44990         if(this.wrap){
44991             this.wrap[state ? 'addClass' : 'removeClass']('x-menu-item-checked');
44992         }
44993         this.checked = state;
44994         if(suppressEvent !== true){
44995             this.fireEvent('check', this, state);
44996         }
44997         this.inSetChecked = true;
44998         this.el.dom.value = state ? this.inputValue : this.valueOff;
44999         this.inSetChecked = false;
45000         
45001     },
45002     // handle setting of hidden value by some other method!!?!?
45003     setFromHidden: function()
45004     {
45005         if(!this.el){
45006             return;
45007         }
45008         //console.log("SET FROM HIDDEN");
45009         //alert('setFrom hidden');
45010         this.setValue(this.el.dom.value);
45011     },
45012     
45013     onDestroy : function()
45014     {
45015         if(this.viewEl){
45016             Roo.get(this.viewEl).remove();
45017         }
45018          
45019         Roo.form.Checkbox.superclass.onDestroy.call(this);
45020     },
45021     
45022     setBoxLabel : function(str)
45023     {
45024         this.wrap.select('.x-form-cb-label', true).first().dom.innerHTML = str;
45025     }
45026
45027 });/*
45028  * Based on:
45029  * Ext JS Library 1.1.1
45030  * Copyright(c) 2006-2007, Ext JS, LLC.
45031  *
45032  * Originally Released Under LGPL - original licence link has changed is not relivant.
45033  *
45034  * Fork - LGPL
45035  * <script type="text/javascript">
45036  */
45037  
45038 /**
45039  * @class Roo.form.Radio
45040  * @extends Roo.form.Checkbox
45041  * Single radio field.  Same as Checkbox, but provided as a convenience for automatically setting the input type.
45042  * Radio grouping is handled automatically by the browser if you give each radio in a group the same name.
45043  * @constructor
45044  * Creates a new Radio
45045  * @param {Object} config Configuration options
45046  */
45047 Roo.form.Radio = function(){
45048     Roo.form.Radio.superclass.constructor.apply(this, arguments);
45049 };
45050 Roo.extend(Roo.form.Radio, Roo.form.Checkbox, {
45051     inputType: 'radio',
45052
45053     /**
45054      * If this radio is part of a group, it will return the selected value
45055      * @return {String}
45056      */
45057     getGroupValue : function(){
45058         return this.el.up('form').child('input[name='+this.el.dom.name+']:checked', true).value;
45059     },
45060     
45061     
45062     onRender : function(ct, position){
45063         Roo.form.Checkbox.superclass.onRender.call(this, ct, position);
45064         
45065         if(this.inputValue !== undefined){
45066             this.el.dom.value = this.inputValue;
45067         }
45068          
45069         this.wrap = this.el.wrap({cls: "x-form-check-wrap"});
45070         //this.wrap = this.el.wrap({cls: 'x-menu-check-item '});
45071         //var viewEl = this.wrap.createChild({ 
45072         //    tag: 'img', cls: 'x-menu-item-icon', style: 'margin: 0px;' ,src : Roo.BLANK_IMAGE_URL });
45073         //this.viewEl = viewEl;   
45074         //this.wrap.on('click', this.onClick,  this); 
45075         
45076         //this.el.on('DOMAttrModified', this.setFromHidden,  this); //ff
45077         //this.el.on('propertychange', this.setFromHidden,  this);  //ie
45078         
45079         
45080         
45081         if(this.boxLabel){
45082             this.wrap.createChild({tag: 'label', htmlFor: this.el.id, cls: 'x-form-cb-label', html: this.boxLabel});
45083         //    viewEl.on('click', this.onClick,  this); 
45084         }
45085          if(this.checked){
45086             this.el.dom.checked =   'checked' ;
45087         }
45088          
45089     } 
45090     
45091     
45092 });Roo.rtf = {}; // namespace
45093 Roo.rtf.Hex = function(hex)
45094 {
45095     this.hexstr = hex;
45096 };
45097 Roo.rtf.Paragraph = function(opts)
45098 {
45099     this.content = []; ///??? is that used?
45100 };Roo.rtf.Span = function(opts)
45101 {
45102     this.value = opts.value;
45103 };
45104
45105 Roo.rtf.Group = function(parent)
45106 {
45107     // we dont want to acutally store parent - it will make debug a nightmare..
45108     this.content = [];
45109     this.cn  = [];
45110      
45111        
45112     
45113 };
45114
45115 Roo.rtf.Group.prototype = {
45116     ignorable : false,
45117     content: false,
45118     cn: false,
45119     addContent : function(node) {
45120         // could set styles...
45121         this.content.push(node);
45122     },
45123     addChild : function(cn)
45124     {
45125         this.cn.push(cn);
45126     },
45127     // only for images really...
45128     toDataURL : function()
45129     {
45130         var mimetype = false;
45131         switch(true) {
45132             case this.content.filter(function(a) { return a.value == 'pngblip' } ).length > 0: 
45133                 mimetype = "image/png";
45134                 break;
45135              case this.content.filter(function(a) { return a.value == 'jpegblip' } ).length > 0:
45136                 mimetype = "image/jpeg";
45137                 break;
45138             default :
45139                 return 'about:blank'; // ?? error?
45140         }
45141         
45142         
45143         var hexstring = this.content[this.content.length-1].value;
45144         
45145         return 'data:' + mimetype + ';base64,' + btoa(hexstring.match(/\w{2}/g).map(function(a) {
45146             return String.fromCharCode(parseInt(a, 16));
45147         }).join(""));
45148     }
45149     
45150 };
45151 // this looks like it's normally the {rtf{ .... }}
45152 Roo.rtf.Document = function()
45153 {
45154     // we dont want to acutally store parent - it will make debug a nightmare..
45155     this.rtlch  = [];
45156     this.content = [];
45157     this.cn = [];
45158     
45159 };
45160 Roo.extend(Roo.rtf.Document, Roo.rtf.Group, { 
45161     addChild : function(cn)
45162     {
45163         this.cn.push(cn);
45164         switch(cn.type) {
45165             case 'rtlch': // most content seems to be inside this??
45166             case 'listtext':
45167             case 'shpinst':
45168                 this.rtlch.push(cn);
45169                 return;
45170             default:
45171                 this[cn.type] = cn;
45172         }
45173         
45174     },
45175     
45176     getElementsByType : function(type)
45177     {
45178         var ret =  [];
45179         this._getElementsByType(type, ret, this.cn, 'rtf');
45180         return ret;
45181     },
45182     _getElementsByType : function (type, ret, search_array, path)
45183     {
45184         search_array.forEach(function(n,i) {
45185             if (n.type == type) {
45186                 n.path = path + '/' + n.type + ':' + i;
45187                 ret.push(n);
45188             }
45189             if (n.cn.length > 0) {
45190                 this._getElementsByType(type, ret, n.cn, path + '/' + n.type+':'+i);
45191             }
45192         },this);
45193     }
45194     
45195 });
45196  
45197 Roo.rtf.Ctrl = function(opts)
45198 {
45199     this.value = opts.value;
45200     this.param = opts.param;
45201 };
45202 /**
45203  *
45204  *
45205  * based on this https://github.com/iarna/rtf-parser
45206  * it's really only designed to extract pict from pasted RTF 
45207  *
45208  * usage:
45209  *
45210  *  var images = new Roo.rtf.Parser().parse(a_string).filter(function(g) { return g.type == 'pict'; });
45211  *  
45212  *
45213  */
45214
45215  
45216
45217
45218
45219 Roo.rtf.Parser = function(text) {
45220     //super({objectMode: true})
45221     this.text = '';
45222     this.parserState = this.parseText;
45223     
45224     // these are for interpeter...
45225     this.doc = {};
45226     ///this.parserState = this.parseTop
45227     this.groupStack = [];
45228     this.hexStore = [];
45229     this.doc = false;
45230     
45231     this.groups = []; // where we put the return.
45232     
45233     for (var ii = 0; ii < text.length; ++ii) {
45234         ++this.cpos;
45235         
45236         if (text[ii] === '\n') {
45237             ++this.row;
45238             this.col = 1;
45239         } else {
45240             ++this.col;
45241         }
45242         this.parserState(text[ii]);
45243     }
45244     
45245     
45246     
45247 };
45248 Roo.rtf.Parser.prototype = {
45249     text : '', // string being parsed..
45250     controlWord : '',
45251     controlWordParam :  '',
45252     hexChar : '',
45253     doc : false,
45254     group: false,
45255     groupStack : false,
45256     hexStore : false,
45257     
45258     
45259     cpos : 0, 
45260     row : 1, // reportin?
45261     col : 1, //
45262
45263      
45264     push : function (el)
45265     {
45266         var m = 'cmd'+ el.type;
45267         if (typeof(this[m]) == 'undefined') {
45268             Roo.log('invalid cmd:' + el.type);
45269             return;
45270         }
45271         this[m](el);
45272         //Roo.log(el);
45273     },
45274     flushHexStore : function()
45275     {
45276         if (this.hexStore.length < 1) {
45277             return;
45278         }
45279         var hexstr = this.hexStore.map(
45280             function(cmd) {
45281                 return cmd.value;
45282         }).join('');
45283         
45284         this.group.addContent( new Roo.rtf.Hex( hexstr ));
45285               
45286             
45287         this.hexStore.splice(0)
45288         
45289     },
45290     
45291     cmdgroupstart : function()
45292     {
45293         this.flushHexStore();
45294         if (this.group) {
45295             this.groupStack.push(this.group);
45296         }
45297          // parent..
45298         if (this.doc === false) {
45299             this.group = this.doc = new Roo.rtf.Document();
45300             return;
45301             
45302         }
45303         this.group = new Roo.rtf.Group(this.group);
45304     },
45305     cmdignorable : function()
45306     {
45307         this.flushHexStore();
45308         this.group.ignorable = true;
45309     },
45310     cmdendparagraph : function()
45311     {
45312         this.flushHexStore();
45313         this.group.addContent(new Roo.rtf.Paragraph());
45314     },
45315     cmdgroupend : function ()
45316     {
45317         this.flushHexStore();
45318         var endingGroup = this.group;
45319         
45320         
45321         this.group = this.groupStack.pop();
45322         if (this.group) {
45323             this.group.addChild(endingGroup);
45324         }
45325         
45326         
45327         
45328         var doc = this.group || this.doc;
45329         //if (endingGroup instanceof FontTable) {
45330         //  doc.fonts = endingGroup.table
45331         //} else if (endingGroup instanceof ColorTable) {
45332         //  doc.colors = endingGroup.table
45333         //} else if (endingGroup !== this.doc && !endingGroup.get('ignorable')) {
45334         if (endingGroup.ignorable === false) {
45335             //code
45336             this.groups.push(endingGroup);
45337            // Roo.log( endingGroup );
45338         }
45339             //Roo.each(endingGroup.content, function(item)) {
45340             //    doc.addContent(item);
45341             //}
45342             //process.emit('debug', 'GROUP END', endingGroup.type, endingGroup.get('ignorable'))
45343         //}
45344     },
45345     cmdtext : function (cmd)
45346     {
45347         this.flushHexStore();
45348         if (!this.group) { // an RTF fragment, missing the {\rtf1 header
45349             //this.group = this.doc
45350             return;  // we really don't care about stray text...
45351         }
45352         this.group.addContent(new Roo.rtf.Span(cmd));
45353     },
45354     cmdcontrolword : function (cmd)
45355     {
45356         this.flushHexStore();
45357         if (!this.group.type) {
45358             this.group.type = cmd.value;
45359             return;
45360         }
45361         this.group.addContent(new Roo.rtf.Ctrl(cmd));
45362         // we actually don't care about ctrl words...
45363         return ;
45364         /*
45365         var method = 'ctrl$' + cmd.value.replace(/-(.)/g, (_, char) => char.toUpperCase())
45366         if (this[method]) {
45367             this[method](cmd.param)
45368         } else {
45369             if (!this.group.get('ignorable')) process.emit('debug', method, cmd.param)
45370         }
45371         */
45372     },
45373     cmdhexchar : function(cmd) {
45374         this.hexStore.push(cmd);
45375     },
45376     cmderror : function(cmd) {
45377         throw new Exception (cmd.value);
45378     },
45379     
45380     /*
45381       _flush (done) {
45382         if (this.text !== '\u0000') this.emitText()
45383         done()
45384       }
45385       */
45386       
45387       
45388     parseText : function(c)
45389     {
45390         if (c === '\\') {
45391             this.parserState = this.parseEscapes;
45392         } else if (c === '{') {
45393             this.emitStartGroup();
45394         } else if (c === '}') {
45395             this.emitEndGroup();
45396         } else if (c === '\x0A' || c === '\x0D') {
45397             // cr/lf are noise chars
45398         } else {
45399             this.text += c;
45400         }
45401     },
45402     
45403     parseEscapes: function (c)
45404     {
45405         if (c === '\\' || c === '{' || c === '}') {
45406             this.text += c;
45407             this.parserState = this.parseText;
45408         } else {
45409             this.parserState = this.parseControlSymbol;
45410             this.parseControlSymbol(c);
45411         }
45412     },
45413     parseControlSymbol: function(c)
45414     {
45415         if (c === '~') {
45416             this.text += '\u00a0'; // nbsp
45417             this.parserState = this.parseText
45418         } else if (c === '-') {
45419              this.text += '\u00ad'; // soft hyphen
45420         } else if (c === '_') {
45421             this.text += '\u2011'; // non-breaking hyphen
45422         } else if (c === '*') {
45423             this.emitIgnorable();
45424             this.parserState = this.parseText;
45425         } else if (c === "'") {
45426             this.parserState = this.parseHexChar;
45427         } else if (c === '|') { // formula cacter
45428             this.emitFormula();
45429             this.parserState = this.parseText;
45430         } else if (c === ':') { // subentry in an index entry
45431             this.emitIndexSubEntry();
45432             this.parserState = this.parseText;
45433         } else if (c === '\x0a') {
45434             this.emitEndParagraph();
45435             this.parserState = this.parseText;
45436         } else if (c === '\x0d') {
45437             this.emitEndParagraph();
45438             this.parserState = this.parseText;
45439         } else {
45440             this.parserState = this.parseControlWord;
45441             this.parseControlWord(c);
45442         }
45443     },
45444     parseHexChar: function (c)
45445     {
45446         if (/^[A-Fa-f0-9]$/.test(c)) {
45447             this.hexChar += c;
45448             if (this.hexChar.length >= 2) {
45449               this.emitHexChar();
45450               this.parserState = this.parseText;
45451             }
45452             return;
45453         }
45454         this.emitError("Invalid character \"" + c + "\" in hex literal.");
45455         this.parserState = this.parseText;
45456         
45457     },
45458     parseControlWord : function(c)
45459     {
45460         if (c === ' ') {
45461             this.emitControlWord();
45462             this.parserState = this.parseText;
45463         } else if (/^[-\d]$/.test(c)) {
45464             this.parserState = this.parseControlWordParam;
45465             this.controlWordParam += c;
45466         } else if (/^[A-Za-z]$/.test(c)) {
45467           this.controlWord += c;
45468         } else {
45469           this.emitControlWord();
45470           this.parserState = this.parseText;
45471           this.parseText(c);
45472         }
45473     },
45474     parseControlWordParam : function (c) {
45475         if (/^\d$/.test(c)) {
45476           this.controlWordParam += c;
45477         } else if (c === ' ') {
45478           this.emitControlWord();
45479           this.parserState = this.parseText;
45480         } else {
45481           this.emitControlWord();
45482           this.parserState = this.parseText;
45483           this.parseText(c);
45484         }
45485     },
45486     
45487     
45488     
45489     
45490     emitText : function () {
45491         if (this.text === '') {
45492             return;
45493         }
45494         this.push({
45495             type: 'text',
45496             value: this.text,
45497             pos: this.cpos,
45498             row: this.row,
45499             col: this.col
45500         });
45501         this.text = ''
45502     },
45503     emitControlWord : function ()
45504     {
45505         this.emitText();
45506         if (this.controlWord === '') {
45507             this.emitError('empty control word');
45508         } else {
45509             this.push({
45510                   type: 'controlword',
45511                   value: this.controlWord,
45512                   param: this.controlWordParam !== '' && Number(this.controlWordParam),
45513                   pos: this.cpos,
45514                   row: this.row,
45515                   col: this.col
45516             });
45517         }
45518         this.controlWord = '';
45519         this.controlWordParam = '';
45520     },
45521     emitStartGroup : function ()
45522     {
45523         this.emitText();
45524         this.push({
45525             type: 'groupstart',
45526             pos: this.cpos,
45527             row: this.row,
45528             col: this.col
45529         });
45530     },
45531     emitEndGroup : function ()
45532     {
45533         this.emitText();
45534         this.push({
45535             type: 'groupend',
45536             pos: this.cpos,
45537             row: this.row,
45538             col: this.col
45539         });
45540     },
45541     emitIgnorable : function ()
45542     {
45543         this.emitText();
45544         this.push({
45545             type: 'ignorable',
45546             pos: this.cpos,
45547             row: this.row,
45548             col: this.col
45549         });
45550     },
45551     emitHexChar : function ()
45552     {
45553         this.emitText();
45554         this.push({
45555             type: 'hexchar',
45556             value: this.hexChar,
45557             pos: this.cpos,
45558             row: this.row,
45559             col: this.col
45560         });
45561         this.hexChar = ''
45562     },
45563     emitError : function (message)
45564     {
45565       this.emitText();
45566       this.push({
45567             type: 'error',
45568             value: message,
45569             row: this.row,
45570             col: this.col,
45571             char: this.cpos //,
45572             //stack: new Error().stack
45573         });
45574     },
45575     emitEndParagraph : function () {
45576         this.emitText();
45577         this.push({
45578             type: 'endparagraph',
45579             pos: this.cpos,
45580             row: this.row,
45581             col: this.col
45582         });
45583     }
45584      
45585 } ;
45586 Roo.htmleditor = {};
45587  
45588 /**
45589  * @class Roo.htmleditor.Filter
45590  * Base Class for filtering htmleditor stuff. - do not use this directly - extend it.
45591  * @cfg {DomElement} node The node to iterate and filter
45592  * @cfg {boolean|String|Array} tag Tags to replace 
45593  * @constructor
45594  * Create a new Filter.
45595  * @param {Object} config Configuration options
45596  */
45597
45598
45599
45600 Roo.htmleditor.Filter = function(cfg) {
45601     Roo.apply(this.cfg);
45602     // this does not actually call walk as it's really just a abstract class
45603 }
45604
45605
45606 Roo.htmleditor.Filter.prototype = {
45607     
45608     node: false,
45609     
45610     tag: false,
45611
45612     // overrride to do replace comments.
45613     replaceComment : false,
45614     
45615     // overrride to do replace or do stuff with tags..
45616     replaceTag : false,
45617     
45618     walk : function(dom)
45619     {
45620         Roo.each( Array.from(dom.childNodes), function( e ) {
45621             switch(true) {
45622                 
45623                 case e.nodeType == 8 &&  this.replaceComment  !== false: // comment
45624                     this.replaceComment(e);
45625                     return;
45626                 
45627                 case e.nodeType != 1: //not a node.
45628                     return;
45629                 
45630                 case this.tag === true: // everything
45631                 case typeof(this.tag) == 'object' && this.tag.indexOf(e.tagName) > -1: // array and it matches.
45632                 case typeof(this.tag) == 'string' && this.tag == e.tagName: // array and it matches.
45633                     if (this.replaceTag && false === this.replaceTag(e)) {
45634                         return;
45635                     }
45636                     if (e.hasChildNodes()) {
45637                         this.walk(e);
45638                     }
45639                     return;
45640                 
45641                 default:    // tags .. that do not match.
45642                     if (e.hasChildNodes()) {
45643                         this.walk(e);
45644                     }
45645             }
45646             
45647         }, this);
45648         
45649     }
45650 }; 
45651
45652 /**
45653  * @class Roo.htmleditor.FilterAttributes
45654  * clean attributes and  styles including http:// etc.. in attribute
45655  * @constructor
45656 * Run a new Attribute Filter
45657 * @param {Object} config Configuration options
45658  */
45659 Roo.htmleditor.FilterAttributes = function(cfg)
45660 {
45661     Roo.apply(this, cfg);
45662     this.attrib_black = this.attrib_black || [];
45663     this.attrib_white = this.attrib_white || [];
45664
45665     this.attrib_clean = this.attrib_clean || [];
45666     this.style_white = this.style_white || [];
45667     this.style_black = this.style_black || [];
45668     this.walk(cfg.node);
45669 }
45670
45671 Roo.extend(Roo.htmleditor.FilterAttributes, Roo.htmleditor.Filter,
45672 {
45673     tag: true, // all tags
45674     
45675     attrib_black : false, // array
45676     attrib_clean : false,
45677     attrib_white : false,
45678
45679     style_white : false,
45680     style_black : false,
45681      
45682      
45683     replaceTag : function(node)
45684     {
45685         if (!node.attributes || !node.attributes.length) {
45686             return true;
45687         }
45688         
45689         for (var i = node.attributes.length-1; i > -1 ; i--) {
45690             var a = node.attributes[i];
45691             //console.log(a);
45692             if (this.attrib_white.length && this.attrib_white.indexOf(a.name.toLowerCase()) < 0) {
45693                 node.removeAttribute(a.name);
45694                 continue;
45695             }
45696             
45697             
45698             
45699             if (a.name.toLowerCase().substr(0,2)=='on')  {
45700                 node.removeAttribute(a.name);
45701                 continue;
45702             }
45703             
45704             
45705             if (this.attrib_black.indexOf(a.name.toLowerCase()) > -1) {
45706                 node.removeAttribute(a.name);
45707                 continue;
45708             }
45709             if (this.attrib_clean.indexOf(a.name.toLowerCase()) > -1) {
45710                 this.cleanAttr(node,a.name,a.value); // fixme..
45711                 continue;
45712             }
45713             if (a.name == 'style') {
45714                 this.cleanStyle(node,a.name,a.value);
45715                 continue;
45716             }
45717             /// clean up MS crap..
45718             // tecnically this should be a list of valid class'es..
45719             
45720             
45721             if (a.name == 'class') {
45722                 if (a.value.match(/^Mso/)) {
45723                     node.removeAttribute('class');
45724                 }
45725                 
45726                 if (a.value.match(/^body$/)) {
45727                     node.removeAttribute('class');
45728                 }
45729                 continue;
45730             }
45731             
45732             
45733             // style cleanup!?
45734             // class cleanup?
45735             
45736         }
45737         return true; // clean children
45738     },
45739         
45740     cleanAttr: function(node, n,v)
45741     {
45742         
45743         if (v.match(/^\./) || v.match(/^\//)) {
45744             return;
45745         }
45746         if (v.match(/^(http|https):\/\//)
45747             || v.match(/^mailto:/) 
45748             || v.match(/^ftp:/)
45749             || v.match(/^data:/)
45750             ) {
45751             return;
45752         }
45753         if (v.match(/^#/)) {
45754             return;
45755         }
45756         if (v.match(/^\{/)) { // allow template editing.
45757             return;
45758         }
45759 //            Roo.log("(REMOVE TAG)"+ node.tagName +'.' + n + '=' + v);
45760         node.removeAttribute(n);
45761         
45762     },
45763     cleanStyle : function(node,  n,v)
45764     {
45765         if (v.match(/expression/)) { //XSS?? should we even bother..
45766             node.removeAttribute(n);
45767             return;
45768         }
45769         
45770         var parts = v.split(/;/);
45771         var clean = [];
45772         
45773         Roo.each(parts, function(p) {
45774             p = p.replace(/^\s+/g,'').replace(/\s+$/g,'');
45775             if (!p.length) {
45776                 return true;
45777             }
45778             var l = p.split(':').shift().replace(/\s+/g,'');
45779             l = l.replace(/^\s+/g,'').replace(/\s+$/g,'');
45780             
45781             if ( this.style_black.length && (this.style_black.indexOf(l) > -1 || this.style_black.indexOf(l.toLowerCase()) > -1)) {
45782                 return true;
45783             }
45784             //Roo.log()
45785             // only allow 'c whitelisted system attributes'
45786             if ( this.style_white.length &&  style_white.indexOf(l) < 0 && style_white.indexOf(l.toLowerCase()) < 0 ) {
45787                 return true;
45788             }
45789             
45790             
45791             clean.push(p);
45792             return true;
45793         },this);
45794         if (clean.length) { 
45795             node.setAttribute(n, clean.join(';'));
45796         } else {
45797             node.removeAttribute(n);
45798         }
45799         
45800     }
45801         
45802         
45803         
45804     
45805 });/**
45806  * @class Roo.htmleditor.FilterBlack
45807  * remove blacklisted elements.
45808  * @constructor
45809  * Run a new Blacklisted Filter
45810  * @param {Object} config Configuration options
45811  */
45812
45813 Roo.htmleditor.FilterBlack = function(cfg)
45814 {
45815     Roo.apply(this, cfg);
45816     this.walk(cfg.node);
45817 }
45818
45819 Roo.extend(Roo.htmleditor.FilterBlack, Roo.htmleditor.Filter,
45820 {
45821     tag : true, // all elements.
45822    
45823     replaceTag : function(n)
45824     {
45825         n.parentNode.removeChild(n);
45826     }
45827 });
45828 /**
45829  * @class Roo.htmleditor.FilterComment
45830  * remove comments.
45831  * @constructor
45832 * Run a new Comments Filter
45833 * @param {Object} config Configuration options
45834  */
45835 Roo.htmleditor.FilterComment = function(cfg)
45836 {
45837     this.walk(cfg.node);
45838 }
45839
45840 Roo.extend(Roo.htmleditor.FilterComment, Roo.htmleditor.Filter,
45841 {
45842   
45843     replaceComment : function(n)
45844     {
45845         n.parentNode.removeChild(n);
45846     }
45847 });/**
45848  * @class Roo.htmleditor.FilterKeepChildren
45849  * remove tags but keep children
45850  * @constructor
45851  * Run a new Keep Children Filter
45852  * @param {Object} config Configuration options
45853  */
45854
45855 Roo.htmleditor.FilterKeepChildren = function(cfg)
45856 {
45857     Roo.apply(this, cfg);
45858     if (this.tag === false) {
45859         return; // dont walk.. (you can use this to use this just to do a child removal on a single tag )
45860     }
45861     this.walk(cfg.node);
45862 }
45863
45864 Roo.extend(Roo.htmleditor.FilterKeepChildren, Roo.htmleditor.FilterBlack,
45865 {
45866     
45867   
45868     replaceTag : function(node)
45869     {
45870         // walk children...
45871         //Roo.log(node);
45872         var ar = Array.from(node.childNodes);
45873         //remove first..
45874         for (var i = 0; i < ar.length; i++) {
45875             if (ar[i].nodeType == 1) {
45876                 if (
45877                     (typeof(this.tag) == 'object' && this.tag.indexOf(ar[i].tagName) > -1)
45878                     || // array and it matches
45879                     (typeof(this.tag) == 'string' && this.tag == ar[i].tagName)
45880                 ) {
45881                     this.replaceTag(ar[i]); // child is blacklisted as well...
45882                     continue;
45883                 }
45884             }
45885         }  
45886         ar = Array.from(node.childNodes);
45887         for (var i = 0; i < ar.length; i++) {
45888          
45889             node.removeChild(ar[i]);
45890             // what if we need to walk these???
45891             node.parentNode.insertBefore(ar[i], node);
45892             if (this.tag !== false) {
45893                 this.walk(ar[i]);
45894                 
45895             }
45896         }
45897         node.parentNode.removeChild(node);
45898         return false; // don't walk children
45899         
45900         
45901     }
45902 });/**
45903  * @class Roo.htmleditor.FilterParagraph
45904  * paragraphs cause a nightmare for shared content - this filter is designed to be called ? at various points when editing
45905  * like on 'push' to remove the <p> tags and replace them with line breaks.
45906  * @constructor
45907  * Run a new Paragraph Filter
45908  * @param {Object} config Configuration options
45909  */
45910
45911 Roo.htmleditor.FilterParagraph = function(cfg)
45912 {
45913     // no need to apply config.
45914     this.walk(cfg.node);
45915 }
45916
45917 Roo.extend(Roo.htmleditor.FilterParagraph, Roo.htmleditor.Filter,
45918 {
45919     
45920      
45921     tag : 'P',
45922     
45923      
45924     replaceTag : function(node)
45925     {
45926         
45927         if (node.childNodes.length == 1 &&
45928             node.childNodes[0].nodeType == 3 &&
45929             node.childNodes[0].textContent.trim().length < 1
45930             ) {
45931             // remove and replace with '<BR>';
45932             node.parentNode.replaceChild(node.ownerDocument.createElement('BR'),node);
45933             return false; // no need to walk..
45934         }
45935         var ar = Array.from(node.childNodes);
45936         for (var i = 0; i < ar.length; i++) {
45937             node.removeChild(ar[i]);
45938             // what if we need to walk these???
45939             node.parentNode.insertBefore(ar[i], node);
45940         }
45941         // now what about this?
45942         // <p> &nbsp; </p>
45943         
45944         // double BR.
45945         node.parentNode.insertBefore(node.ownerDocument.createElement('BR'), node);
45946         node.parentNode.insertBefore(node.ownerDocument.createElement('BR'), node);
45947         node.parentNode.removeChild(node);
45948         
45949         return false;
45950
45951     }
45952     
45953 });/**
45954  * @class Roo.htmleditor.FilterSpan
45955  * filter span's with no attributes out..
45956  * @constructor
45957  * Run a new Span Filter
45958  * @param {Object} config Configuration options
45959  */
45960
45961 Roo.htmleditor.FilterSpan = function(cfg)
45962 {
45963     // no need to apply config.
45964     this.walk(cfg.node);
45965 }
45966
45967 Roo.extend(Roo.htmleditor.FilterSpan, Roo.htmleditor.FilterKeepChildren,
45968 {
45969      
45970     tag : 'SPAN',
45971      
45972  
45973     replaceTag : function(node)
45974     {
45975         if (node.attributes && node.attributes.length > 0) {
45976             return true; // walk if there are any.
45977         }
45978         Roo.htmleditor.FilterKeepChildren.prototype.replaceTag.call(this, node);
45979         return false;
45980      
45981     }
45982     
45983 });/**
45984  * @class Roo.htmleditor.FilterTableWidth
45985   try and remove table width data - as that frequently messes up other stuff.
45986  * 
45987  *      was cleanTableWidths.
45988  *
45989  * Quite often pasting from word etc.. results in tables with column and widths.
45990  * This does not work well on fluid HTML layouts - like emails. - so this code should hunt an destroy them..
45991  *
45992  * @constructor
45993  * Run a new Table Filter
45994  * @param {Object} config Configuration options
45995  */
45996
45997 Roo.htmleditor.FilterTableWidth = function(cfg)
45998 {
45999     // no need to apply config.
46000     this.tag = ['TABLE', 'TD', 'TR', 'TH', 'THEAD', 'TBODY' ];
46001     this.walk(cfg.node);
46002 }
46003
46004 Roo.extend(Roo.htmleditor.FilterTableWidth, Roo.htmleditor.Filter,
46005 {
46006      
46007      
46008     
46009     replaceTag: function(node) {
46010         
46011         
46012       
46013         if (node.hasAttribute('width')) {
46014             node.removeAttribute('width');
46015         }
46016         
46017          
46018         if (node.hasAttribute("style")) {
46019             // pretty basic...
46020             
46021             var styles = node.getAttribute("style").split(";");
46022             var nstyle = [];
46023             Roo.each(styles, function(s) {
46024                 if (!s.match(/:/)) {
46025                     return;
46026                 }
46027                 var kv = s.split(":");
46028                 if (kv[0].match(/^\s*(width|min-width)\s*$/)) {
46029                     return;
46030                 }
46031                 // what ever is left... we allow.
46032                 nstyle.push(s);
46033             });
46034             node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
46035             if (!nstyle.length) {
46036                 node.removeAttribute('style');
46037             }
46038         }
46039         
46040         return true; // continue doing children..
46041     }
46042 });/**
46043  * @class Roo.htmleditor.FilterWord
46044  * try and clean up all the mess that Word generates.
46045  * 
46046  * This is the 'nice version' - see 'Heavy' that white lists a very short list of elements, and multi-filters 
46047  
46048  * @constructor
46049  * Run a new Span Filter
46050  * @param {Object} config Configuration options
46051  */
46052
46053 Roo.htmleditor.FilterWord = function(cfg)
46054 {
46055     // no need to apply config.
46056     this.walk(cfg.node);
46057 }
46058
46059 Roo.extend(Roo.htmleditor.FilterWord, Roo.htmleditor.Filter,
46060 {
46061     tag: true,
46062      
46063     
46064     /**
46065      * Clean up MS wordisms...
46066      */
46067     replaceTag : function(node)
46068     {
46069          
46070         // no idea what this does - span with text, replaceds with just text.
46071         if(
46072                 node.nodeName == 'SPAN' &&
46073                 !node.hasAttributes() &&
46074                 node.childNodes.length == 1 &&
46075                 node.firstChild.nodeName == "#text"  
46076         ) {
46077             var textNode = node.firstChild;
46078             node.removeChild(textNode);
46079             if (node.getAttribute('lang') != 'zh-CN') {   // do not space pad on chinese characters..
46080                 node.parentNode.insertBefore(node.ownerDocument.createTextNode(" "), node);
46081             }
46082             node.parentNode.insertBefore(textNode, node);
46083             if (node.getAttribute('lang') != 'zh-CN') {   // do not space pad on chinese characters..
46084                 node.parentNode.insertBefore(node.ownerDocument.createTextNode(" ") , node);
46085             }
46086             
46087             node.parentNode.removeChild(node);
46088             return false; // dont do chidren - we have remove our node - so no need to do chdhilren?
46089         }
46090         
46091    
46092         
46093         if (node.tagName.toLowerCase().match(/^(style|script|applet|embed|noframes|noscript)$/)) {
46094             node.parentNode.removeChild(node);
46095             return false; // dont do chidlren
46096         }
46097         //Roo.log(node.tagName);
46098         // remove - but keep children..
46099         if (node.tagName.toLowerCase().match(/^(meta|link|\\?xml:|st1:|o:|v:|font)/)) {
46100             //Roo.log('-- removed');
46101             while (node.childNodes.length) {
46102                 var cn = node.childNodes[0];
46103                 node.removeChild(cn);
46104                 node.parentNode.insertBefore(cn, node);
46105                 // move node to parent - and clean it..
46106                 this.replaceTag(cn);
46107             }
46108             node.parentNode.removeChild(node);
46109             /// no need to iterate chidlren = it's got none..
46110             //this.iterateChildren(node, this.cleanWord);
46111             return false; // no need to iterate children.
46112         }
46113         // clean styles
46114         if (node.className.length) {
46115             
46116             var cn = node.className.split(/\W+/);
46117             var cna = [];
46118             Roo.each(cn, function(cls) {
46119                 if (cls.match(/Mso[a-zA-Z]+/)) {
46120                     return;
46121                 }
46122                 cna.push(cls);
46123             });
46124             node.className = cna.length ? cna.join(' ') : '';
46125             if (!cna.length) {
46126                 node.removeAttribute("class");
46127             }
46128         }
46129         
46130         if (node.hasAttribute("lang")) {
46131             node.removeAttribute("lang");
46132         }
46133         
46134         if (node.hasAttribute("style")) {
46135             
46136             var styles = node.getAttribute("style").split(";");
46137             var nstyle = [];
46138             Roo.each(styles, function(s) {
46139                 if (!s.match(/:/)) {
46140                     return;
46141                 }
46142                 var kv = s.split(":");
46143                 if (kv[0].match(/^(mso-|line|font|background|margin|padding|color)/)) {
46144                     return;
46145                 }
46146                 // what ever is left... we allow.
46147                 nstyle.push(s);
46148             });
46149             node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
46150             if (!nstyle.length) {
46151                 node.removeAttribute('style');
46152             }
46153         }
46154         return true; // do children
46155         
46156         
46157         
46158     }
46159 });
46160 /**
46161  * @class Roo.htmleditor.FilterStyleToTag
46162  * part of the word stuff... - certain 'styles' should be converted to tags.
46163  * eg.
46164  *   font-weight: bold -> bold
46165  *   ?? super / subscrit etc..
46166  * 
46167  * @constructor
46168 * Run a new style to tag filter.
46169 * @param {Object} config Configuration options
46170  */
46171 Roo.htmleditor.FilterStyleToTag = function(cfg)
46172 {
46173     
46174     this.tags = {
46175         B  : [ 'fontWeight' , 'bold'],
46176         I :  [ 'fontStyle' , 'italic'],
46177         //pre :  [ 'font-style' , 'italic'],
46178         // h1.. h6 ?? font-size?
46179         SUP : [ 'verticalAlign' , 'super' ],
46180         SUB : [ 'verticalAlign' , 'sub' ]
46181         
46182         
46183     };
46184     
46185     Roo.apply(this, cfg);
46186      
46187     
46188     this.walk(cfg.node);
46189     
46190     
46191     
46192 }
46193
46194
46195 Roo.extend(Roo.htmleditor.FilterStyleToTag, Roo.htmleditor.Filter,
46196 {
46197     tag: true, // all tags
46198     
46199     tags : false,
46200     
46201     
46202     replaceTag : function(node)
46203     {
46204         
46205         
46206         if (node.getAttribute("style") === null) {
46207             return true;
46208         }
46209         var inject = [];
46210         for (var k in this.tags) {
46211             if (node.style[this.tags[k][0]] == this.tags[k][1]) {
46212                 inject.push(k);
46213                 node.style.removeProperty(this.tags[k][0]);
46214             }
46215         }
46216         if (!inject.length) {
46217             return true; 
46218         }
46219         var cn = Array.from(node.childNodes);
46220         var nn = node;
46221         Roo.each(inject, function(t) {
46222             var nc = node.ownerDocument.createElement(t);
46223             nn.appendChild(nc);
46224             nn = nc;
46225         });
46226         for(var i = 0;i < cn.length;cn++) {
46227             node.removeChild(cn[i]);
46228             nn.appendChild(cn[i]);
46229         }
46230         return true /// iterate thru
46231     }
46232     
46233 })/**
46234  * @class Roo.htmleditor.FilterLongBr
46235  * BR/BR/BR - keep a maximum of 2...
46236  * @constructor
46237  * Run a new Long BR Filter
46238  * @param {Object} config Configuration options
46239  */
46240
46241 Roo.htmleditor.FilterLongBr = function(cfg)
46242 {
46243     // no need to apply config.
46244     this.walk(cfg.node);
46245 }
46246
46247 Roo.extend(Roo.htmleditor.FilterLongBr, Roo.htmleditor.Filter,
46248 {
46249     
46250      
46251     tag : 'BR',
46252     
46253      
46254     replaceTag : function(node)
46255     {
46256         
46257         var ps = node.nextSibling;
46258         while (ps && ps.nodeType == 3 && ps.nodeValue.trim().length < 1) {
46259             ps = ps.nextSibling;
46260         }
46261         
46262         if (!ps &&  [ 'TD', 'TH', 'LI', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6' ].indexOf(node.parentNode.tagName) > -1) { 
46263             node.parentNode.removeChild(node); // remove last BR inside one fo these tags
46264             return false;
46265         }
46266         
46267         if (!ps || ps.nodeType != 1) {
46268             return false;
46269         }
46270         
46271         if (!ps || ps.tagName != 'BR') {
46272            
46273             return false;
46274         }
46275         
46276         
46277         
46278         
46279         
46280         if (!node.previousSibling) {
46281             return false;
46282         }
46283         var ps = node.previousSibling;
46284         
46285         while (ps && ps.nodeType == 3 && ps.nodeValue.trim().length < 1) {
46286             ps = ps.previousSibling;
46287         }
46288         if (!ps || ps.nodeType != 1) {
46289             return false;
46290         }
46291         // if header or BR before.. then it's a candidate for removal.. - as we only want '2' of these..
46292         if (!ps || [ 'BR', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6' ].indexOf(ps.tagName) < 0) {
46293             return false;
46294         }
46295         
46296         node.parentNode.removeChild(node); // remove me...
46297         
46298         return false; // no need to do children
46299
46300     }
46301     
46302 }); 
46303
46304 /**
46305  * @class Roo.htmleditor.FilterBlock
46306  * removes id / data-block and contenteditable that are associated with blocks
46307  * usage should be done on a cloned copy of the dom
46308  * @constructor
46309 * Run a new Attribute Filter { node : xxxx }}
46310 * @param {Object} config Configuration options
46311  */
46312 Roo.htmleditor.FilterBlock = function(cfg)
46313 {
46314     Roo.apply(this, cfg);
46315     var qa = cfg.node.querySelectorAll;
46316     this.removeAttributes('data-block');
46317     this.removeAttributes('contenteditable');
46318     this.removeAttributes('id');
46319     
46320 }
46321
46322 Roo.apply(Roo.htmleditor.FilterBlock.prototype,
46323 {
46324     node: true, // all tags
46325      
46326      
46327     removeAttributes : function(attr)
46328     {
46329         var ar = this.node.querySelectorAll('*[' + attr + ']');
46330         for (var i =0;i<ar.length;i++) {
46331             ar[i].removeAttribute(attr);
46332         }
46333     }
46334         
46335         
46336         
46337     
46338 });
46339 /***
46340  * This is based loosely on tinymce 
46341  * @class Roo.htmleditor.TidySerializer
46342  * https://github.com/thorn0/tinymce.html/blob/master/tinymce.html.js
46343  * @constructor
46344  * @method Serializer
46345  * @param {Object} settings Name/value settings object.
46346  */
46347
46348
46349 Roo.htmleditor.TidySerializer = function(settings)
46350 {
46351     Roo.apply(this, settings);
46352     
46353     this.writer = new Roo.htmleditor.TidyWriter(settings);
46354     
46355     
46356
46357 };
46358 Roo.htmleditor.TidySerializer.prototype = {
46359     
46360     /**
46361      * @param {boolean} inner do the inner of the node.
46362      */
46363     inner : false,
46364     
46365     writer : false,
46366     
46367     /**
46368     * Serializes the specified node into a string.
46369     *
46370     * @example
46371     * new tinymce.html.Serializer().serialize(new tinymce.html.DomParser().parse('<p>text</p>'));
46372     * @method serialize
46373     * @param {DomElement} node Node instance to serialize.
46374     * @return {String} String with HTML based on DOM tree.
46375     */
46376     serialize : function(node) {
46377         
46378         // = settings.validate;
46379         var writer = this.writer;
46380         var self  = this;
46381         this.handlers = {
46382             // #text
46383             3: function(node) {
46384                 
46385                 writer.text(node.nodeValue, node);
46386             },
46387             // #comment
46388             8: function(node) {
46389                 writer.comment(node.nodeValue);
46390             },
46391             // Processing instruction
46392             7: function(node) {
46393                 writer.pi(node.name, node.nodeValue);
46394             },
46395             // Doctype
46396             10: function(node) {
46397                 writer.doctype(node.nodeValue);
46398             },
46399             // CDATA
46400             4: function(node) {
46401                 writer.cdata(node.nodeValue);
46402             },
46403             // Document fragment
46404             11: function(node) {
46405                 node = node.firstChild;
46406                 if (!node) {
46407                     return;
46408                 }
46409                 while(node) {
46410                     self.walk(node);
46411                     node = node.nextSibling
46412                 }
46413             }
46414         };
46415         writer.reset();
46416         1 != node.nodeType || this.inner ? this.handlers[11](node) : this.walk(node);
46417         return writer.getContent();
46418     },
46419
46420     walk: function(node)
46421     {
46422         var attrName, attrValue, sortedAttrs, i, l, elementRule,
46423             handler = this.handlers[node.nodeType];
46424             
46425         if (handler) {
46426             handler(node);
46427             return;
46428         }
46429     
46430         var name = node.nodeName;
46431         var isEmpty = node.childNodes.length < 1;
46432       
46433         var writer = this.writer;
46434         var attrs = node.attributes;
46435         // Sort attributes
46436         
46437         writer.start(node.nodeName, attrs, isEmpty, node);
46438         if (isEmpty) {
46439             return;
46440         }
46441         node = node.firstChild;
46442         if (!node) {
46443             writer.end(name);
46444             return;
46445         }
46446         while (node) {
46447             this.walk(node);
46448             node = node.nextSibling;
46449         }
46450         writer.end(name);
46451         
46452     
46453     }
46454     // Serialize element and treat all non elements as fragments
46455    
46456 }; 
46457
46458 /***
46459  * This is based loosely on tinymce 
46460  * @class Roo.htmleditor.TidyWriter
46461  * https://github.com/thorn0/tinymce.html/blob/master/tinymce.html.js
46462  *
46463  * Known issues?
46464  * - not tested much with 'PRE' formated elements.
46465  * 
46466  *
46467  *
46468  */
46469
46470 Roo.htmleditor.TidyWriter = function(settings)
46471 {
46472     
46473     // indent, indentBefore, indentAfter, encode, htmlOutput, html = [];
46474     Roo.apply(this, settings);
46475     this.html = [];
46476     this.state = [];
46477      
46478     this.encode = Roo.htmleditor.TidyEntities.getEncodeFunc(settings.entity_encoding || 'raw', settings.entities);
46479   
46480 }
46481 Roo.htmleditor.TidyWriter.prototype = {
46482
46483  
46484     state : false,
46485     
46486     indent :  '  ',
46487     
46488     // part of state...
46489     indentstr : '',
46490     in_pre: false,
46491     in_inline : false,
46492     last_inline : false,
46493     encode : false,
46494      
46495     
46496             /**
46497     * Writes the a start element such as <p id="a">.
46498     *
46499     * @method start
46500     * @param {String} name Name of the element.
46501     * @param {Array} attrs Optional attribute array or undefined if it hasn't any.
46502     * @param {Boolean} empty Optional empty state if the tag should end like <br />.
46503     */
46504     start: function(name, attrs, empty, node)
46505     {
46506         var i, l, attr, value;
46507         
46508         // there are some situations where adding line break && indentation will not work. will not work.
46509         // <span / b / i ... formating?
46510         
46511         var in_inline = this.in_inline || Roo.htmleditor.TidyWriter.inline_elements.indexOf(name) > -1;
46512         var in_pre    = this.in_pre    || Roo.htmleditor.TidyWriter.whitespace_elements.indexOf(name) > -1;
46513         
46514         var is_short   = empty ? Roo.htmleditor.TidyWriter.shortend_elements.indexOf(name) > -1 : false;
46515         
46516         var add_lb = name == 'BR' ? false : in_inline;
46517         
46518         if (!add_lb && !this.in_pre && this.lastElementEndsWS()) {
46519             i_inline = false;
46520         }
46521
46522         var indentstr =  this.indentstr;
46523         
46524         // e_inline = elements that can be inline, but still allow \n before and after?
46525         // only 'BR' ??? any others?
46526         
46527         // ADD LINE BEFORE tage
46528         if (!this.in_pre) {
46529             if (in_inline) {
46530                 //code
46531                 if (name == 'BR') {
46532                     this.addLine();
46533                 } else if (this.lastElementEndsWS()) {
46534                     this.addLine();
46535                 } else{
46536                     // otherwise - no new line. (and dont indent.)
46537                     indentstr = '';
46538                 }
46539                 
46540             } else {
46541                 this.addLine();
46542             }
46543         } else {
46544             indentstr = '';
46545         }
46546         
46547         this.html.push(indentstr + '<', name.toLowerCase());
46548         
46549         if (attrs) {
46550             for (i = 0, l = attrs.length; i < l; i++) {
46551                 attr = attrs[i];
46552                 this.html.push(' ', attr.name, '="', this.encode(attr.value, true), '"');
46553             }
46554         }
46555      
46556         if (empty) {
46557             if (is_short) {
46558                 this.html[this.html.length] = '/>';
46559             } else {
46560                 this.html[this.html.length] = '></' + name.toLowerCase() + '>';
46561             }
46562             var e_inline = name == 'BR' ? false : this.in_inline;
46563             
46564             if (!e_inline && !this.in_pre) {
46565                 this.addLine();
46566             }
46567             return;
46568         
46569         }
46570         // not empty..
46571         this.html[this.html.length] = '>';
46572         
46573         // there is a special situation, where we need to turn on in_inline - if any of the imediate chidlren are one of these.
46574         /*
46575         if (!in_inline && !in_pre) {
46576             var cn = node.firstChild;
46577             while(cn) {
46578                 if (Roo.htmleditor.TidyWriter.inline_elements.indexOf(cn.nodeName) > -1) {
46579                     in_inline = true
46580                     break;
46581                 }
46582                 cn = cn.nextSibling;
46583             }
46584              
46585         }
46586         */
46587         
46588         
46589         this.pushState({
46590             indentstr : in_pre   ? '' : (this.indentstr + this.indent),
46591             in_pre : in_pre,
46592             in_inline :  in_inline
46593         });
46594         // add a line after if we are not in a
46595         
46596         if (!in_inline && !in_pre) {
46597             this.addLine();
46598         }
46599         
46600             
46601          
46602         
46603     },
46604     
46605     lastElementEndsWS : function()
46606     {
46607         var value = this.html.length > 0 ? this.html[this.html.length-1] : false;
46608         if (value === false) {
46609             return true;
46610         }
46611         return value.match(/\s+$/);
46612         
46613     },
46614     
46615     /**
46616      * Writes the a end element such as </p>.
46617      *
46618      * @method end
46619      * @param {String} name Name of the element.
46620      */
46621     end: function(name) {
46622         var value;
46623         this.popState();
46624         var indentstr = '';
46625         var in_inline = this.in_inline || Roo.htmleditor.TidyWriter.inline_elements.indexOf(name) > -1;
46626         
46627         if (!this.in_pre && !in_inline) {
46628             this.addLine();
46629             indentstr  = this.indentstr;
46630         }
46631         this.html.push(indentstr + '</', name.toLowerCase(), '>');
46632         this.last_inline = in_inline;
46633         
46634         // pop the indent state..
46635     },
46636     /**
46637      * Writes a text node.
46638      *
46639      * In pre - we should not mess with the contents.
46640      * 
46641      *
46642      * @method text
46643      * @param {String} text String to write out.
46644      * @param {Boolean} raw Optional raw state if true the contents wont get encoded.
46645      */
46646     text: function(text, node)
46647     {
46648         // if not in whitespace critical
46649         if (text.length < 1) {
46650             return;
46651         }
46652         if (this.in_pre) {
46653             this.html[this.html.length] =  text;
46654             return;   
46655         }
46656         
46657         if (this.in_inline) {
46658             text = text.replace(/\s+/g,' '); // all white space inc line breaks to a slingle' '
46659             if (text != ' ') {
46660                 text = text.replace(/\s+/,' ');  // all white space to single white space
46661                 
46662                     
46663                 // if next tag is '<BR>', then we can trim right..
46664                 if (node.nextSibling &&
46665                     node.nextSibling.nodeType == 1 &&
46666                     node.nextSibling.nodeName == 'BR' )
46667                 {
46668                     text = text.replace(/\s+$/g,'');
46669                 }
46670                 // if previous tag was a BR, we can also trim..
46671                 if (node.previousSibling &&
46672                     node.previousSibling.nodeType == 1 &&
46673                     node.previousSibling.nodeName == 'BR' )
46674                 {
46675                     text = this.indentstr +  text.replace(/^\s+/g,'');
46676                 }
46677                 if (text.match(/\n/)) {
46678                     text = text.replace(
46679                         /(?![^\n]{1,64}$)([^\n]{1,64})\s/g, '$1\n' + this.indentstr
46680                     );
46681                     // remoeve the last whitespace / line break.
46682                     text = text.replace(/\n\s+$/,'');
46683                 }
46684                 // repace long lines
46685                 
46686             }
46687              
46688             this.html[this.html.length] =  text;
46689             return;   
46690         }
46691         // see if previous element was a inline element.
46692         var indentstr = this.indentstr;
46693    
46694         text = text.replace(/\s+/g," "); // all whitespace into single white space.
46695         
46696         // should trim left?
46697         if (node.previousSibling &&
46698             node.previousSibling.nodeType == 1 &&
46699             Roo.htmleditor.TidyWriter.inline_elements.indexOf(node.previousSibling.nodeName) > -1)
46700         {
46701             indentstr = '';
46702             
46703         } else {
46704             this.addLine();
46705             text = text.replace(/^\s+/,''); // trim left
46706           
46707         }
46708         // should trim right?
46709         if (node.nextSibling &&
46710             node.nextSibling.nodeType == 1 &&
46711             Roo.htmleditor.TidyWriter.inline_elements.indexOf(node.nextSibling.nodeName) > -1)
46712         {
46713           // noop
46714             
46715         }  else {
46716             text = text.replace(/\s+$/,''); // trim right
46717         }
46718          
46719               
46720         
46721         
46722         
46723         if (text.length < 1) {
46724             return;
46725         }
46726         if (!text.match(/\n/)) {
46727             this.html.push(indentstr + text);
46728             return;
46729         }
46730         
46731         text = this.indentstr + text.replace(
46732             /(?![^\n]{1,64}$)([^\n]{1,64})\s/g, '$1\n' + this.indentstr
46733         );
46734         // remoeve the last whitespace / line break.
46735         text = text.replace(/\s+$/,''); 
46736         
46737         this.html.push(text);
46738         
46739         // split and indent..
46740         
46741         
46742     },
46743     /**
46744      * Writes a cdata node such as <![CDATA[data]]>.
46745      *
46746      * @method cdata
46747      * @param {String} text String to write out inside the cdata.
46748      */
46749     cdata: function(text) {
46750         this.html.push('<![CDATA[', text, ']]>');
46751     },
46752     /**
46753     * Writes a comment node such as <!-- Comment -->.
46754     *
46755     * @method cdata
46756     * @param {String} text String to write out inside the comment.
46757     */
46758    comment: function(text) {
46759        this.html.push('<!--', text, '-->');
46760    },
46761     /**
46762      * Writes a PI node such as <?xml attr="value" ?>.
46763      *
46764      * @method pi
46765      * @param {String} name Name of the pi.
46766      * @param {String} text String to write out inside the pi.
46767      */
46768     pi: function(name, text) {
46769         text ? this.html.push('<?', name, ' ', this.encode(text), '?>') : this.html.push('<?', name, '?>');
46770         this.indent != '' && this.html.push('\n');
46771     },
46772     /**
46773      * Writes a doctype node such as <!DOCTYPE data>.
46774      *
46775      * @method doctype
46776      * @param {String} text String to write out inside the doctype.
46777      */
46778     doctype: function(text) {
46779         this.html.push('<!DOCTYPE', text, '>', this.indent != '' ? '\n' : '');
46780     },
46781     /**
46782      * Resets the internal buffer if one wants to reuse the writer.
46783      *
46784      * @method reset
46785      */
46786     reset: function() {
46787         this.html.length = 0;
46788         this.state = [];
46789         this.pushState({
46790             indentstr : '',
46791             in_pre : false, 
46792             in_inline : false
46793         })
46794     },
46795     /**
46796      * Returns the contents that got serialized.
46797      *
46798      * @method getContent
46799      * @return {String} HTML contents that got written down.
46800      */
46801     getContent: function() {
46802         return this.html.join('').replace(/\n$/, '');
46803     },
46804     
46805     pushState : function(cfg)
46806     {
46807         this.state.push(cfg);
46808         Roo.apply(this, cfg);
46809     },
46810     
46811     popState : function()
46812     {
46813         if (this.state.length < 1) {
46814             return; // nothing to push
46815         }
46816         var cfg = {
46817             in_pre: false,
46818             indentstr : ''
46819         };
46820         this.state.pop();
46821         if (this.state.length > 0) {
46822             cfg = this.state[this.state.length-1]; 
46823         }
46824         Roo.apply(this, cfg);
46825     },
46826     
46827     addLine: function()
46828     {
46829         if (this.html.length < 1) {
46830             return;
46831         }
46832         
46833         
46834         var value = this.html[this.html.length - 1];
46835         if (value.length > 0 && '\n' !== value) {
46836             this.html.push('\n');
46837         }
46838     }
46839     
46840     
46841 //'pre script noscript style textarea video audio iframe object code'
46842 // shortended... 'area base basefont br col frame hr img input isindex link  meta param embed source wbr track');
46843 // inline 
46844 };
46845
46846 Roo.htmleditor.TidyWriter.inline_elements = [
46847         'SPAN','STRONG','B','EM','I','FONT','STRIKE','U','VAR',
46848         'CITE','DFN','CODE','MARK','Q','SUP','SUB','SAMP', 'A'
46849 ];
46850 Roo.htmleditor.TidyWriter.shortend_elements = [
46851     'AREA','BASE','BASEFONT','BR','COL','FRAME','HR','IMG','INPUT',
46852     'ISINDEX','LINK','','META','PARAM','EMBED','SOURCE','WBR','TRACK'
46853 ];
46854
46855 Roo.htmleditor.TidyWriter.whitespace_elements = [
46856     'PRE','SCRIPT','NOSCRIPT','STYLE','TEXTAREA','VIDEO','AUDIO','IFRAME','OBJECT','CODE'
46857 ];/***
46858  * This is based loosely on tinymce 
46859  * @class Roo.htmleditor.TidyEntities
46860  * @static
46861  * https://github.com/thorn0/tinymce.html/blob/master/tinymce.html.js
46862  *
46863  * Not 100% sure this is actually used or needed.
46864  */
46865
46866 Roo.htmleditor.TidyEntities = {
46867     
46868     /**
46869      * initialize data..
46870      */
46871     init : function (){
46872      
46873         this.namedEntities = this.buildEntitiesLookup(this.namedEntitiesData, 32);
46874        
46875     },
46876
46877
46878     buildEntitiesLookup: function(items, radix) {
46879         var i, chr, entity, lookup = {};
46880         if (!items) {
46881             return {};
46882         }
46883         items = typeof(items) == 'string' ? items.split(',') : items;
46884         radix = radix || 10;
46885         // Build entities lookup table
46886         for (i = 0; i < items.length; i += 2) {
46887             chr = String.fromCharCode(parseInt(items[i], radix));
46888             // Only add non base entities
46889             if (!this.baseEntities[chr]) {
46890                 entity = '&' + items[i + 1] + ';';
46891                 lookup[chr] = entity;
46892                 lookup[entity] = chr;
46893             }
46894         }
46895         return lookup;
46896         
46897     },
46898     
46899     asciiMap : {
46900             128: '€',
46901             130: '‚',
46902             131: 'ƒ',
46903             132: '„',
46904             133: '…',
46905             134: '†',
46906             135: '‡',
46907             136: 'ˆ',
46908             137: '‰',
46909             138: 'Š',
46910             139: '‹',
46911             140: 'Œ',
46912             142: 'Ž',
46913             145: '‘',
46914             146: '’',
46915             147: '“',
46916             148: '”',
46917             149: '•',
46918             150: '–',
46919             151: '—',
46920             152: '˜',
46921             153: '™',
46922             154: 'š',
46923             155: '›',
46924             156: 'œ',
46925             158: 'ž',
46926             159: 'Ÿ'
46927     },
46928     // Raw entities
46929     baseEntities : {
46930         '"': '&quot;',
46931         // Needs to be escaped since the YUI compressor would otherwise break the code
46932         '\'': '&#39;',
46933         '<': '&lt;',
46934         '>': '&gt;',
46935         '&': '&amp;',
46936         '`': '&#96;'
46937     },
46938     // Reverse lookup table for raw entities
46939     reverseEntities : {
46940         '&lt;': '<',
46941         '&gt;': '>',
46942         '&amp;': '&',
46943         '&quot;': '"',
46944         '&apos;': '\''
46945     },
46946     
46947     attrsCharsRegExp : /[&<>\"\u0060\u007E-\uD7FF\uE000-\uFFEF]|[\uD800-\uDBFF][\uDC00-\uDFFF]/g,
46948     textCharsRegExp : /[<>&\u007E-\uD7FF\uE000-\uFFEF]|[\uD800-\uDBFF][\uDC00-\uDFFF]/g,
46949     rawCharsRegExp : /[<>&\"\']/g,
46950     entityRegExp : /&#([a-z0-9]+);?|&([a-z0-9]+);/gi,
46951     namedEntities  : false,
46952     namedEntitiesData : [ 
46953         '50',
46954         'nbsp',
46955         '51',
46956         'iexcl',
46957         '52',
46958         'cent',
46959         '53',
46960         'pound',
46961         '54',
46962         'curren',
46963         '55',
46964         'yen',
46965         '56',
46966         'brvbar',
46967         '57',
46968         'sect',
46969         '58',
46970         'uml',
46971         '59',
46972         'copy',
46973         '5a',
46974         'ordf',
46975         '5b',
46976         'laquo',
46977         '5c',
46978         'not',
46979         '5d',
46980         'shy',
46981         '5e',
46982         'reg',
46983         '5f',
46984         'macr',
46985         '5g',
46986         'deg',
46987         '5h',
46988         'plusmn',
46989         '5i',
46990         'sup2',
46991         '5j',
46992         'sup3',
46993         '5k',
46994         'acute',
46995         '5l',
46996         'micro',
46997         '5m',
46998         'para',
46999         '5n',
47000         'middot',
47001         '5o',
47002         'cedil',
47003         '5p',
47004         'sup1',
47005         '5q',
47006         'ordm',
47007         '5r',
47008         'raquo',
47009         '5s',
47010         'frac14',
47011         '5t',
47012         'frac12',
47013         '5u',
47014         'frac34',
47015         '5v',
47016         'iquest',
47017         '60',
47018         'Agrave',
47019         '61',
47020         'Aacute',
47021         '62',
47022         'Acirc',
47023         '63',
47024         'Atilde',
47025         '64',
47026         'Auml',
47027         '65',
47028         'Aring',
47029         '66',
47030         'AElig',
47031         '67',
47032         'Ccedil',
47033         '68',
47034         'Egrave',
47035         '69',
47036         'Eacute',
47037         '6a',
47038         'Ecirc',
47039         '6b',
47040         'Euml',
47041         '6c',
47042         'Igrave',
47043         '6d',
47044         'Iacute',
47045         '6e',
47046         'Icirc',
47047         '6f',
47048         'Iuml',
47049         '6g',
47050         'ETH',
47051         '6h',
47052         'Ntilde',
47053         '6i',
47054         'Ograve',
47055         '6j',
47056         'Oacute',
47057         '6k',
47058         'Ocirc',
47059         '6l',
47060         'Otilde',
47061         '6m',
47062         'Ouml',
47063         '6n',
47064         'times',
47065         '6o',
47066         'Oslash',
47067         '6p',
47068         'Ugrave',
47069         '6q',
47070         'Uacute',
47071         '6r',
47072         'Ucirc',
47073         '6s',
47074         'Uuml',
47075         '6t',
47076         'Yacute',
47077         '6u',
47078         'THORN',
47079         '6v',
47080         'szlig',
47081         '70',
47082         'agrave',
47083         '71',
47084         'aacute',
47085         '72',
47086         'acirc',
47087         '73',
47088         'atilde',
47089         '74',
47090         'auml',
47091         '75',
47092         'aring',
47093         '76',
47094         'aelig',
47095         '77',
47096         'ccedil',
47097         '78',
47098         'egrave',
47099         '79',
47100         'eacute',
47101         '7a',
47102         'ecirc',
47103         '7b',
47104         'euml',
47105         '7c',
47106         'igrave',
47107         '7d',
47108         'iacute',
47109         '7e',
47110         'icirc',
47111         '7f',
47112         'iuml',
47113         '7g',
47114         'eth',
47115         '7h',
47116         'ntilde',
47117         '7i',
47118         'ograve',
47119         '7j',
47120         'oacute',
47121         '7k',
47122         'ocirc',
47123         '7l',
47124         'otilde',
47125         '7m',
47126         'ouml',
47127         '7n',
47128         'divide',
47129         '7o',
47130         'oslash',
47131         '7p',
47132         'ugrave',
47133         '7q',
47134         'uacute',
47135         '7r',
47136         'ucirc',
47137         '7s',
47138         'uuml',
47139         '7t',
47140         'yacute',
47141         '7u',
47142         'thorn',
47143         '7v',
47144         'yuml',
47145         'ci',
47146         'fnof',
47147         'sh',
47148         'Alpha',
47149         'si',
47150         'Beta',
47151         'sj',
47152         'Gamma',
47153         'sk',
47154         'Delta',
47155         'sl',
47156         'Epsilon',
47157         'sm',
47158         'Zeta',
47159         'sn',
47160         'Eta',
47161         'so',
47162         'Theta',
47163         'sp',
47164         'Iota',
47165         'sq',
47166         'Kappa',
47167         'sr',
47168         'Lambda',
47169         'ss',
47170         'Mu',
47171         'st',
47172         'Nu',
47173         'su',
47174         'Xi',
47175         'sv',
47176         'Omicron',
47177         't0',
47178         'Pi',
47179         't1',
47180         'Rho',
47181         't3',
47182         'Sigma',
47183         't4',
47184         'Tau',
47185         't5',
47186         'Upsilon',
47187         't6',
47188         'Phi',
47189         't7',
47190         'Chi',
47191         't8',
47192         'Psi',
47193         't9',
47194         'Omega',
47195         'th',
47196         'alpha',
47197         'ti',
47198         'beta',
47199         'tj',
47200         'gamma',
47201         'tk',
47202         'delta',
47203         'tl',
47204         'epsilon',
47205         'tm',
47206         'zeta',
47207         'tn',
47208         'eta',
47209         'to',
47210         'theta',
47211         'tp',
47212         'iota',
47213         'tq',
47214         'kappa',
47215         'tr',
47216         'lambda',
47217         'ts',
47218         'mu',
47219         'tt',
47220         'nu',
47221         'tu',
47222         'xi',
47223         'tv',
47224         'omicron',
47225         'u0',
47226         'pi',
47227         'u1',
47228         'rho',
47229         'u2',
47230         'sigmaf',
47231         'u3',
47232         'sigma',
47233         'u4',
47234         'tau',
47235         'u5',
47236         'upsilon',
47237         'u6',
47238         'phi',
47239         'u7',
47240         'chi',
47241         'u8',
47242         'psi',
47243         'u9',
47244         'omega',
47245         'uh',
47246         'thetasym',
47247         'ui',
47248         'upsih',
47249         'um',
47250         'piv',
47251         '812',
47252         'bull',
47253         '816',
47254         'hellip',
47255         '81i',
47256         'prime',
47257         '81j',
47258         'Prime',
47259         '81u',
47260         'oline',
47261         '824',
47262         'frasl',
47263         '88o',
47264         'weierp',
47265         '88h',
47266         'image',
47267         '88s',
47268         'real',
47269         '892',
47270         'trade',
47271         '89l',
47272         'alefsym',
47273         '8cg',
47274         'larr',
47275         '8ch',
47276         'uarr',
47277         '8ci',
47278         'rarr',
47279         '8cj',
47280         'darr',
47281         '8ck',
47282         'harr',
47283         '8dl',
47284         'crarr',
47285         '8eg',
47286         'lArr',
47287         '8eh',
47288         'uArr',
47289         '8ei',
47290         'rArr',
47291         '8ej',
47292         'dArr',
47293         '8ek',
47294         'hArr',
47295         '8g0',
47296         'forall',
47297         '8g2',
47298         'part',
47299         '8g3',
47300         'exist',
47301         '8g5',
47302         'empty',
47303         '8g7',
47304         'nabla',
47305         '8g8',
47306         'isin',
47307         '8g9',
47308         'notin',
47309         '8gb',
47310         'ni',
47311         '8gf',
47312         'prod',
47313         '8gh',
47314         'sum',
47315         '8gi',
47316         'minus',
47317         '8gn',
47318         'lowast',
47319         '8gq',
47320         'radic',
47321         '8gt',
47322         'prop',
47323         '8gu',
47324         'infin',
47325         '8h0',
47326         'ang',
47327         '8h7',
47328         'and',
47329         '8h8',
47330         'or',
47331         '8h9',
47332         'cap',
47333         '8ha',
47334         'cup',
47335         '8hb',
47336         'int',
47337         '8hk',
47338         'there4',
47339         '8hs',
47340         'sim',
47341         '8i5',
47342         'cong',
47343         '8i8',
47344         'asymp',
47345         '8j0',
47346         'ne',
47347         '8j1',
47348         'equiv',
47349         '8j4',
47350         'le',
47351         '8j5',
47352         'ge',
47353         '8k2',
47354         'sub',
47355         '8k3',
47356         'sup',
47357         '8k4',
47358         'nsub',
47359         '8k6',
47360         'sube',
47361         '8k7',
47362         'supe',
47363         '8kl',
47364         'oplus',
47365         '8kn',
47366         'otimes',
47367         '8l5',
47368         'perp',
47369         '8m5',
47370         'sdot',
47371         '8o8',
47372         'lceil',
47373         '8o9',
47374         'rceil',
47375         '8oa',
47376         'lfloor',
47377         '8ob',
47378         'rfloor',
47379         '8p9',
47380         'lang',
47381         '8pa',
47382         'rang',
47383         '9ea',
47384         'loz',
47385         '9j0',
47386         'spades',
47387         '9j3',
47388         'clubs',
47389         '9j5',
47390         'hearts',
47391         '9j6',
47392         'diams',
47393         'ai',
47394         'OElig',
47395         'aj',
47396         'oelig',
47397         'b0',
47398         'Scaron',
47399         'b1',
47400         'scaron',
47401         'bo',
47402         'Yuml',
47403         'm6',
47404         'circ',
47405         'ms',
47406         'tilde',
47407         '802',
47408         'ensp',
47409         '803',
47410         'emsp',
47411         '809',
47412         'thinsp',
47413         '80c',
47414         'zwnj',
47415         '80d',
47416         'zwj',
47417         '80e',
47418         'lrm',
47419         '80f',
47420         'rlm',
47421         '80j',
47422         'ndash',
47423         '80k',
47424         'mdash',
47425         '80o',
47426         'lsquo',
47427         '80p',
47428         'rsquo',
47429         '80q',
47430         'sbquo',
47431         '80s',
47432         'ldquo',
47433         '80t',
47434         'rdquo',
47435         '80u',
47436         'bdquo',
47437         '810',
47438         'dagger',
47439         '811',
47440         'Dagger',
47441         '81g',
47442         'permil',
47443         '81p',
47444         'lsaquo',
47445         '81q',
47446         'rsaquo',
47447         '85c',
47448         'euro'
47449     ],
47450
47451          
47452     /**
47453      * Encodes the specified string using raw entities. This means only the required XML base entities will be encoded.
47454      *
47455      * @method encodeRaw
47456      * @param {String} text Text to encode.
47457      * @param {Boolean} attr Optional flag to specify if the text is attribute contents.
47458      * @return {String} Entity encoded text.
47459      */
47460     encodeRaw: function(text, attr)
47461     {
47462         var t = this;
47463         return text.replace(attr ? this.attrsCharsRegExp : this.textCharsRegExp, function(chr) {
47464             return t.baseEntities[chr] || chr;
47465         });
47466     },
47467     /**
47468      * Encoded the specified text with both the attributes and text entities. This function will produce larger text contents
47469      * since it doesn't know if the context is within a attribute or text node. This was added for compatibility
47470      * and is exposed as the DOMUtils.encode function.
47471      *
47472      * @method encodeAllRaw
47473      * @param {String} text Text to encode.
47474      * @return {String} Entity encoded text.
47475      */
47476     encodeAllRaw: function(text) {
47477         var t = this;
47478         return ('' + text).replace(this.rawCharsRegExp, function(chr) {
47479             return t.baseEntities[chr] || chr;
47480         });
47481     },
47482     /**
47483      * Encodes the specified string using numeric entities. The core entities will be
47484      * encoded as named ones but all non lower ascii characters will be encoded into numeric entities.
47485      *
47486      * @method encodeNumeric
47487      * @param {String} text Text to encode.
47488      * @param {Boolean} attr Optional flag to specify if the text is attribute contents.
47489      * @return {String} Entity encoded text.
47490      */
47491     encodeNumeric: function(text, attr) {
47492         var t = this;
47493         return text.replace(attr ? this.attrsCharsRegExp : this.textCharsRegExp, function(chr) {
47494             // Multi byte sequence convert it to a single entity
47495             if (chr.length > 1) {
47496                 return '&#' + (1024 * (chr.charCodeAt(0) - 55296) + (chr.charCodeAt(1) - 56320) + 65536) + ';';
47497             }
47498             return t.baseEntities[chr] || '&#' + chr.charCodeAt(0) + ';';
47499         });
47500     },
47501     /**
47502      * Encodes the specified string using named entities. The core entities will be encoded
47503      * as named ones but all non lower ascii characters will be encoded into named entities.
47504      *
47505      * @method encodeNamed
47506      * @param {String} text Text to encode.
47507      * @param {Boolean} attr Optional flag to specify if the text is attribute contents.
47508      * @param {Object} entities Optional parameter with entities to use.
47509      * @return {String} Entity encoded text.
47510      */
47511     encodeNamed: function(text, attr, entities) {
47512         var t = this;
47513         entities = entities || this.namedEntities;
47514         return text.replace(attr ? this.attrsCharsRegExp : this.textCharsRegExp, function(chr) {
47515             return t.baseEntities[chr] || entities[chr] || chr;
47516         });
47517     },
47518     /**
47519      * Returns an encode function based on the name(s) and it's optional entities.
47520      *
47521      * @method getEncodeFunc
47522      * @param {String} name Comma separated list of encoders for example named,numeric.
47523      * @param {String} entities Optional parameter with entities to use instead of the built in set.
47524      * @return {function} Encode function to be used.
47525      */
47526     getEncodeFunc: function(name, entities) {
47527         entities = this.buildEntitiesLookup(entities) || this.namedEntities;
47528         var t = this;
47529         function encodeNamedAndNumeric(text, attr) {
47530             return text.replace(attr ? t.attrsCharsRegExp : t.textCharsRegExp, function(chr) {
47531                 return t.baseEntities[chr] || entities[chr] || '&#' + chr.charCodeAt(0) + ';' || chr;
47532             });
47533         }
47534
47535         function encodeCustomNamed(text, attr) {
47536             return t.encodeNamed(text, attr, entities);
47537         }
47538         // Replace + with , to be compatible with previous TinyMCE versions
47539         name = this.makeMap(name.replace(/\+/g, ','));
47540         // Named and numeric encoder
47541         if (name.named && name.numeric) {
47542             return this.encodeNamedAndNumeric;
47543         }
47544         // Named encoder
47545         if (name.named) {
47546             // Custom names
47547             if (entities) {
47548                 return encodeCustomNamed;
47549             }
47550             return this.encodeNamed;
47551         }
47552         // Numeric
47553         if (name.numeric) {
47554             return this.encodeNumeric;
47555         }
47556         // Raw encoder
47557         return this.encodeRaw;
47558     },
47559     /**
47560      * Decodes the specified string, this will replace entities with raw UTF characters.
47561      *
47562      * @method decode
47563      * @param {String} text Text to entity decode.
47564      * @return {String} Entity decoded string.
47565      */
47566     decode: function(text)
47567     {
47568         var  t = this;
47569         return text.replace(this.entityRegExp, function(all, numeric) {
47570             if (numeric) {
47571                 numeric = 'x' === numeric.charAt(0).toLowerCase() ? parseInt(numeric.substr(1), 16) : parseInt(numeric, 10);
47572                 // Support upper UTF
47573                 if (numeric > 65535) {
47574                     numeric -= 65536;
47575                     return String.fromCharCode(55296 + (numeric >> 10), 56320 + (1023 & numeric));
47576                 }
47577                 return t.asciiMap[numeric] || String.fromCharCode(numeric);
47578             }
47579             return t.reverseEntities[all] || t.namedEntities[all] || t.nativeDecode(all);
47580         });
47581     },
47582     nativeDecode : function (text) {
47583         return text;
47584     },
47585     makeMap : function (items, delim, map) {
47586                 var i;
47587                 items = items || [];
47588                 delim = delim || ',';
47589                 if (typeof items == "string") {
47590                         items = items.split(delim);
47591                 }
47592                 map = map || {};
47593                 i = items.length;
47594                 while (i--) {
47595                         map[items[i]] = {};
47596                 }
47597                 return map;
47598         }
47599 };
47600     
47601     
47602     
47603 Roo.htmleditor.TidyEntities.init();
47604 /**
47605  * @class Roo.htmleditor.KeyEnter
47606  * Handle Enter press..
47607  * @cfg {Roo.HtmlEditorCore} core the editor.
47608  * @constructor
47609  * Create a new Filter.
47610  * @param {Object} config Configuration options
47611  */
47612
47613
47614
47615
47616
47617 Roo.htmleditor.KeyEnter = function(cfg) {
47618     Roo.apply(this, cfg);
47619     // this does not actually call walk as it's really just a abstract class
47620  
47621     Roo.get(this.core.doc.body).on('keypress', this.keypress, this);
47622 }
47623
47624 //Roo.htmleditor.KeyEnter.i = 0;
47625
47626
47627 Roo.htmleditor.KeyEnter.prototype = {
47628     
47629     core : false,
47630     
47631     keypress : function(e)
47632     {
47633         if (e.charCode != 13 && e.charCode != 10) {
47634             Roo.log([e.charCode,e]);
47635             return true;
47636         }
47637         e.preventDefault();
47638         // https://stackoverflow.com/questions/18552336/prevent-contenteditable-adding-div-on-enter-chrome
47639         var doc = this.core.doc;
47640           //add a new line
47641        
47642     
47643         var sel = this.core.getSelection();
47644         var range = sel.getRangeAt(0);
47645         var n = range.commonAncestorContainer;
47646         var pc = range.closest([ 'ol', 'ul']);
47647         var pli = range.closest('li');
47648         if (!pc || e.ctrlKey) {
47649             sel.insertNode('br', 'after'); 
47650          
47651             this.core.undoManager.addEvent();
47652             this.core.fireEditorEvent(e);
47653             return false;
47654         }
47655         
47656         // deal with <li> insetion
47657         if (pli.innerText.trim() == '' &&
47658             pli.previousSibling &&
47659             pli.previousSibling.nodeName == 'LI' &&
47660             pli.previousSibling.innerText.trim() ==  '') {
47661             pli.parentNode.removeChild(pli.previousSibling);
47662             sel.cursorAfter(pc);
47663             this.core.undoManager.addEvent();
47664             this.core.fireEditorEvent(e);
47665             return false;
47666         }
47667     
47668         var li = doc.createElement('LI');
47669         li.innerHTML = '&nbsp;';
47670         if (!pli || !pli.firstSibling) {
47671             pc.appendChild(li);
47672         } else {
47673             pli.parentNode.insertBefore(li, pli.firstSibling);
47674         }
47675         sel.cursorText (li.firstChild);
47676       
47677         this.core.undoManager.addEvent();
47678         this.core.fireEditorEvent(e);
47679
47680         return false;
47681         
47682     
47683         
47684         
47685          
47686     }
47687 };
47688      
47689 /**
47690  * @class Roo.htmleditor.Block
47691  * Base class for html editor blocks - do not use it directly .. extend it..
47692  * @cfg {DomElement} node The node to apply stuff to.
47693  * @cfg {String} friendly_name the name that appears in the context bar about this block
47694  * @cfg {Object} Context menu - see Roo.form.HtmlEditor.ToolbarContext
47695  
47696  * @constructor
47697  * Create a new Filter.
47698  * @param {Object} config Configuration options
47699  */
47700
47701 Roo.htmleditor.Block  = function(cfg)
47702 {
47703     // do nothing .. should not be called really.
47704 }
47705 /**
47706  * factory method to get the block from an element (using cache if necessary)
47707  * @static
47708  * @param {HtmlElement} the dom element
47709  */
47710 Roo.htmleditor.Block.factory = function(node)
47711 {
47712     var cc = Roo.htmleditor.Block.cache;
47713     var id = Roo.get(node).id;
47714     if (typeof(cc[id]) != 'undefined' && (!cc[id].node || cc[id].node.closest('body'))) {
47715         Roo.htmleditor.Block.cache[id].readElement(node);
47716         return Roo.htmleditor.Block.cache[id];
47717     }
47718     var db  = node.getAttribute('data-block');
47719     if (!db) {
47720         db = node.nodeName.toLowerCase().toUpperCaseFirst();
47721     }
47722     var cls = Roo.htmleditor['Block' + db];
47723     if (typeof(cls) == 'undefined') {
47724         //Roo.log(node.getAttribute('data-block'));
47725         Roo.log("OOps missing block : " + 'Block' + db);
47726         return false;
47727     }
47728     Roo.htmleditor.Block.cache[id] = new cls({ node: node });
47729     return Roo.htmleditor.Block.cache[id];  /// should trigger update element
47730 };
47731
47732 /**
47733  * initalize all Elements from content that are 'blockable'
47734  * @static
47735  * @param the body element
47736  */
47737 Roo.htmleditor.Block.initAll = function(body, type)
47738 {
47739     if (typeof(type) == 'undefined') {
47740         var ia = Roo.htmleditor.Block.initAll;
47741         ia(body,'table');
47742         ia(body,'td');
47743         ia(body,'figure');
47744         return;
47745     }
47746     Roo.each(Roo.get(body).query(type), function(e) {
47747         Roo.htmleditor.Block.factory(e);    
47748     },this);
47749 };
47750 // question goes here... do we need to clear out this cache sometimes?
47751 // or show we make it relivant to the htmleditor.
47752 Roo.htmleditor.Block.cache = {};
47753
47754 Roo.htmleditor.Block.prototype = {
47755     
47756     node : false,
47757     
47758      // used by context menu
47759     friendly_name : 'Based Block',
47760     
47761     // text for button to delete this element
47762     deleteTitle : false,
47763     
47764     context : false,
47765     /**
47766      * Update a node with values from this object
47767      * @param {DomElement} node
47768      */
47769     updateElement : function(node)
47770     {
47771         Roo.DomHelper.update(node === undefined ? this.node : node, this.toObject());
47772     },
47773      /**
47774      * convert to plain HTML for calling insertAtCursor..
47775      */
47776     toHTML : function()
47777     {
47778         return Roo.DomHelper.markup(this.toObject());
47779     },
47780     /**
47781      * used by readEleemnt to extract data from a node
47782      * may need improving as it's pretty basic
47783      
47784      * @param {DomElement} node
47785      * @param {String} tag - tag to find, eg. IMG ?? might be better to use DomQuery ?
47786      * @param {String} attribute (use html - for contents, style for using next param as style, or false to return the node)
47787      * @param {String} style the style property - eg. text-align
47788      */
47789     getVal : function(node, tag, attr, style)
47790     {
47791         var n = node;
47792         if (tag !== true && n.tagName != tag.toUpperCase()) {
47793             // in theory we could do figure[3] << 3rd figure? or some more complex search..?
47794             // but kiss for now.
47795             n = node.getElementsByTagName(tag).item(0);
47796         }
47797         if (!n) {
47798             return '';
47799         }
47800         if (attr === false) {
47801             return n;
47802         }
47803         if (attr == 'html') {
47804             return n.innerHTML;
47805         }
47806         if (attr == 'style') {
47807             return n.style[style]; 
47808         }
47809         
47810         return n.hasAttribute(attr) ? n.getAttribute(attr) : '';
47811             
47812     },
47813     /**
47814      * create a DomHelper friendly object - for use with 
47815      * Roo.DomHelper.markup / overwrite / etc..
47816      * (override this)
47817      */
47818     toObject : function()
47819     {
47820         return {};
47821     },
47822       /**
47823      * Read a node that has a 'data-block' property - and extract the values from it.
47824      * @param {DomElement} node - the node
47825      */
47826     readElement : function(node)
47827     {
47828         
47829     } 
47830     
47831     
47832 };
47833
47834  
47835
47836 /**
47837  * @class Roo.htmleditor.BlockFigure
47838  * Block that has an image and a figcaption
47839  * @cfg {String} image_src the url for the image
47840  * @cfg {String} align (left|right) alignment for the block default left
47841  * @cfg {String} caption the text to appear below  (and in the alt tag)
47842  * @cfg {String} caption_display (block|none) display or not the caption
47843  * @cfg {String|number} image_width the width of the image number or %?
47844  * @cfg {String|number} image_height the height of the image number or %?
47845  * 
47846  * @constructor
47847  * Create a new Filter.
47848  * @param {Object} config Configuration options
47849  */
47850
47851 Roo.htmleditor.BlockFigure = function(cfg)
47852 {
47853     if (cfg.node) {
47854         this.readElement(cfg.node);
47855         this.updateElement(cfg.node);
47856     }
47857     Roo.apply(this, cfg);
47858 }
47859 Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
47860  
47861     
47862     // setable values.
47863     image_src: '',
47864     align: 'center',
47865     caption : '',
47866     caption_display : 'block',
47867     width : '100%',
47868     cls : '',
47869     href: '',
47870     video_url : '',
47871     
47872     // margin: '2%', not used
47873     
47874     text_align: 'left', //   (left|right) alignment for the text caption default left. - not used at present
47875
47876     
47877     // used by context menu
47878     friendly_name : 'Image with caption',
47879     deleteTitle : "Delete Image and Caption",
47880     
47881     contextMenu : function(toolbar)
47882     {
47883         
47884         var block = function() {
47885             return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
47886         };
47887         
47888         
47889         var rooui =  typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
47890         
47891         var syncValue = toolbar.editorcore.syncValue;
47892         
47893         var fields = {};
47894         
47895         return [
47896              {
47897                 xtype : 'TextItem',
47898                 text : "Source: ",
47899                 xns : rooui.Toolbar  //Boostrap?
47900             },
47901             {
47902                 xtype : 'Button',
47903                 text: 'Change Image URL',
47904                  
47905                 listeners : {
47906                     click: function (btn, state)
47907                     {
47908                         var b = block();
47909                         
47910                         Roo.MessageBox.show({
47911                             title : "Image Source URL",
47912                             msg : "Enter the url for the image",
47913                             buttons: Roo.MessageBox.OKCANCEL,
47914                             fn: function(btn, val){
47915                                 if (btn != 'ok') {
47916                                     return;
47917                                 }
47918                                 b.image_src = val;
47919                                 b.updateElement();
47920                                 syncValue();
47921                                 toolbar.editorcore.onEditorEvent();
47922                             },
47923                             minWidth:250,
47924                             prompt:true,
47925                             //multiline: multiline,
47926                             modal : true,
47927                             value : b.image_src
47928                         });
47929                     }
47930                 },
47931                 xns : rooui.Toolbar
47932             },
47933          
47934             {
47935                 xtype : 'Button',
47936                 text: 'Change Link URL',
47937                  
47938                 listeners : {
47939                     click: function (btn, state)
47940                     {
47941                         var b = block();
47942                         
47943                         Roo.MessageBox.show({
47944                             title : "Link URL",
47945                             msg : "Enter the url for the link - leave blank to have no link",
47946                             buttons: Roo.MessageBox.OKCANCEL,
47947                             fn: function(btn, val){
47948                                 if (btn != 'ok') {
47949                                     return;
47950                                 }
47951                                 b.href = val;
47952                                 b.updateElement();
47953                                 syncValue();
47954                                 toolbar.editorcore.onEditorEvent();
47955                             },
47956                             minWidth:250,
47957                             prompt:true,
47958                             //multiline: multiline,
47959                             modal : true,
47960                             value : b.href
47961                         });
47962                     }
47963                 },
47964                 xns : rooui.Toolbar
47965             },
47966             {
47967                 xtype : 'Button',
47968                 text: 'Show Video URL',
47969                  
47970                 listeners : {
47971                     click: function (btn, state)
47972                     {
47973                         Roo.MessageBox.alert("Video URL",
47974                             block().video_url == '' ? 'This image is not linked ot a video' :
47975                                 'The image is linked to: <a target="_new" href="' + block().video_url + '">' + block().video_url + '</a>');
47976                     }
47977                 },
47978                 xns : rooui.Toolbar
47979             },
47980             
47981             
47982             {
47983                 xtype : 'TextItem',
47984                 text : "Width: ",
47985                 xns : rooui.Toolbar  //Boostrap?
47986             },
47987             {
47988                 xtype : 'ComboBox',
47989                 allowBlank : false,
47990                 displayField : 'val',
47991                 editable : true,
47992                 listWidth : 100,
47993                 triggerAction : 'all',
47994                 typeAhead : true,
47995                 valueField : 'val',
47996                 width : 70,
47997                 name : 'width',
47998                 listeners : {
47999                     select : function (combo, r, index)
48000                     {
48001                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
48002                         var b = block();
48003                         b.width = r.get('val');
48004                         b.updateElement();
48005                         syncValue();
48006                         toolbar.editorcore.onEditorEvent();
48007                     }
48008                 },
48009                 xns : rooui.form,
48010                 store : {
48011                     xtype : 'SimpleStore',
48012                     data : [
48013                         ['auto'],
48014                         ['50%'],
48015                         ['80%'],
48016                         ['100%']
48017                     ],
48018                     fields : [ 'val'],
48019                     xns : Roo.data
48020                 }
48021             },
48022             {
48023                 xtype : 'TextItem',
48024                 text : "Align: ",
48025                 xns : rooui.Toolbar  //Boostrap?
48026             },
48027             {
48028                 xtype : 'ComboBox',
48029                 allowBlank : false,
48030                 displayField : 'val',
48031                 editable : true,
48032                 listWidth : 100,
48033                 triggerAction : 'all',
48034                 typeAhead : true,
48035                 valueField : 'val',
48036                 width : 70,
48037                 name : 'align',
48038                 listeners : {
48039                     select : function (combo, r, index)
48040                     {
48041                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
48042                         var b = block();
48043                         b.align = r.get('val');
48044                         b.updateElement();
48045                         syncValue();
48046                         toolbar.editorcore.onEditorEvent();
48047                     }
48048                 },
48049                 xns : rooui.form,
48050                 store : {
48051                     xtype : 'SimpleStore',
48052                     data : [
48053                         ['left'],
48054                         ['right'],
48055                         ['center']
48056                     ],
48057                     fields : [ 'val'],
48058                     xns : Roo.data
48059                 }
48060             },
48061             
48062             
48063             {
48064                 xtype : 'Button',
48065                 text: 'Hide Caption',
48066                 name : 'caption_display',
48067                 pressed : false,
48068                 enableToggle : true,
48069                 setValue : function(v) {
48070                     // this trigger toggle.
48071                      
48072                     this.setText(v ? "Hide Caption" : "Show Caption");
48073                     this.setPressed(v);
48074                 },
48075                 listeners : {
48076                     toggle: function (btn, state)
48077                     {
48078                         var b  = block();
48079                         b.caption_display = b.caption_display == 'block' ? 'none' : 'block';
48080                         this.setText(b.caption_display == 'block' ? "Hide Caption" : "Show Caption");
48081                         b.updateElement();
48082                         syncValue();
48083                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
48084                         toolbar.editorcore.onEditorEvent();
48085                     }
48086                 },
48087                 xns : rooui.Toolbar
48088             }
48089         ];
48090         
48091     },
48092     /**
48093      * create a DomHelper friendly object - for use with
48094      * Roo.DomHelper.markup / overwrite / etc..
48095      */
48096     toObject : function()
48097     {
48098         var d = document.createElement('div');
48099         d.innerHTML = this.caption;
48100         
48101         var m = this.width != '100%' && this.align == 'center' ? '0 auto' : 0; 
48102         
48103         var iw = this.align == 'center' ? this.width : '100%';
48104         var img =   {
48105             tag : 'img',
48106             contenteditable : 'false',
48107             src : this.image_src,
48108             alt : d.innerText.replace(/\n/g, " ").replace(/\s+/g, ' ').trim(), // removeHTML and reduce spaces..
48109             style: {
48110                 width : iw,
48111                 maxWidth : iw + ' !important', // this is not getting rendered?
48112                 margin : m  
48113                 
48114             }
48115         };
48116         /*
48117         '<div class="{0}" width="420" height="315" src="{1}" frameborder="0" allowfullscreen>' +
48118                     '<a href="{2}">' + 
48119                         '<img class="{0}-thumbnail" src="{3}/Images/{4}/{5}#image-{4}" />' + 
48120                     '</a>' + 
48121                 '</div>',
48122         */
48123                 
48124         if (this.href.length > 0) {
48125             img = {
48126                 tag : 'a',
48127                 href: this.href,
48128                 contenteditable : 'true',
48129                 cn : [
48130                     img
48131                 ]
48132             };
48133         }
48134         
48135         
48136         if (this.video_url.length > 0) {
48137             img = {
48138                 tag : 'div',
48139                 cls : this.cls,
48140                 frameborder : 0,
48141                 allowfullscreen : true,
48142                 width : 420,  // these are for video tricks - that we replace the outer
48143                 height : 315,
48144                 src : this.video_url,
48145                 cn : [
48146                     img
48147                 ]
48148             };
48149         }
48150         // we remove caption totally if its hidden... - will delete data.. but otherwise we end up with fake caption
48151         var captionhtml = this.caption_display == 'none' ? '' : (this.caption.length ? this.caption : "Caption");
48152         
48153   
48154         var ret =   {
48155             tag: 'figure',
48156             'data-block' : 'Figure',
48157             
48158             contenteditable : 'false',
48159             
48160             style : {
48161                 display: 'block',
48162                 float :  this.align ,
48163                 maxWidth :  this.align == 'center' ? '100% !important' : (this.width + ' !important'),
48164                 width : this.align == 'center' ? '100%' : this.width,
48165                 margin:  '0px',
48166                 padding: this.align == 'center' ? '0' : '0 10px' ,
48167                 textAlign : this.align   // seems to work for email..
48168                 
48169             },
48170            
48171             
48172             align : this.align,
48173             cn : [
48174                 img,
48175               
48176                 {
48177                     tag: 'figcaption',
48178                     'data-display' : this.caption_display,
48179                     style : {
48180                         textAlign : 'left',
48181                         fontSize : '16px',
48182                         lineHeight : '24px',
48183                         display : this.caption_display,
48184                         maxWidth : this.width + ' !important',
48185                         margin: m,
48186                         width: this.width
48187                     
48188                          
48189                     },
48190                     cls : this.cls.length > 0 ? (this.cls  + '-thumbnail' ) : '',
48191                     cn : [
48192                         {
48193                             tag: 'div',
48194                             style  : {
48195                                 marginTop : '16px',
48196                                 textAlign : 'left'
48197                             },
48198                             align: 'left',
48199                             cn : [
48200                                 {
48201                                     // we can not rely on yahoo syndication to use CSS elements - so have to use  '<i>' to encase stuff.
48202                                     tag : 'i',
48203                                     contenteditable : true,
48204                                     html : captionhtml
48205                                 }
48206                                 
48207                             ]
48208                         }
48209                         
48210                     ]
48211                     
48212                 }
48213             ]
48214         };
48215         return ret;
48216          
48217     },
48218     
48219     readElement : function(node)
48220     {
48221         // this should not really come from the link...
48222         this.video_url = this.getVal(node, 'div', 'src');
48223         this.cls = this.getVal(node, 'div', 'class');
48224         this.href = this.getVal(node, 'a', 'href');
48225         
48226         
48227         this.image_src = this.getVal(node, 'img', 'src');
48228          
48229         this.align = this.getVal(node, 'figure', 'align');
48230         var figcaption = this.getVal(node, 'figcaption', false);
48231         this.caption = this.getVal(figcaption, 'i', 'html');
48232
48233         this.caption_display = this.getVal(node, 'figcaption', 'data-display');
48234         //this.text_align = this.getVal(node, 'figcaption', 'style','text-align');
48235         this.width = this.getVal(node, 'figcaption', 'style', 'width');
48236         //this.margin = this.getVal(node, 'figure', 'style', 'margin');
48237         
48238     },
48239     removeNode : function()
48240     {
48241         return this.node;
48242     }
48243     
48244   
48245    
48246      
48247     
48248     
48249     
48250     
48251 })
48252
48253  
48254
48255 /**
48256  * @class Roo.htmleditor.BlockTable
48257  * Block that manages a table
48258  * 
48259  * @constructor
48260  * Create a new Filter.
48261  * @param {Object} config Configuration options
48262  */
48263
48264 Roo.htmleditor.BlockTable = function(cfg)
48265 {
48266     if (cfg.node) {
48267         this.readElement(cfg.node);
48268         this.updateElement(cfg.node);
48269     }
48270     Roo.apply(this, cfg);
48271     if (!cfg.node) {
48272         this.rows = [];
48273         for(var r = 0; r < this.no_row; r++) {
48274             this.rows[r] = [];
48275             for(var c = 0; c < this.no_col; c++) {
48276                 this.rows[r][c] = this.emptyCell();
48277             }
48278         }
48279     }
48280     
48281     
48282 }
48283 Roo.extend(Roo.htmleditor.BlockTable, Roo.htmleditor.Block, {
48284  
48285     rows : false,
48286     no_col : 1,
48287     no_row : 1,
48288     
48289     
48290     width: '100%',
48291     
48292     // used by context menu
48293     friendly_name : 'Table',
48294     deleteTitle : 'Delete Table',
48295     // context menu is drawn once..
48296     
48297     contextMenu : function(toolbar)
48298     {
48299         
48300         var block = function() {
48301             return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
48302         };
48303         
48304         
48305         var rooui =  typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
48306         
48307         var syncValue = toolbar.editorcore.syncValue;
48308         
48309         var fields = {};
48310         
48311         return [
48312             {
48313                 xtype : 'TextItem',
48314                 text : "Width: ",
48315                 xns : rooui.Toolbar  //Boostrap?
48316             },
48317             {
48318                 xtype : 'ComboBox',
48319                 allowBlank : false,
48320                 displayField : 'val',
48321                 editable : true,
48322                 listWidth : 100,
48323                 triggerAction : 'all',
48324                 typeAhead : true,
48325                 valueField : 'val',
48326                 width : 100,
48327                 name : 'width',
48328                 listeners : {
48329                     select : function (combo, r, index)
48330                     {
48331                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
48332                         var b = block();
48333                         b.width = r.get('val');
48334                         b.updateElement();
48335                         syncValue();
48336                         toolbar.editorcore.onEditorEvent();
48337                     }
48338                 },
48339                 xns : rooui.form,
48340                 store : {
48341                     xtype : 'SimpleStore',
48342                     data : [
48343                         ['100%'],
48344                         ['auto']
48345                     ],
48346                     fields : [ 'val'],
48347                     xns : Roo.data
48348                 }
48349             },
48350             // -------- Cols
48351             
48352             {
48353                 xtype : 'TextItem',
48354                 text : "Columns: ",
48355                 xns : rooui.Toolbar  //Boostrap?
48356             },
48357          
48358             {
48359                 xtype : 'Button',
48360                 text: '-',
48361                 listeners : {
48362                     click : function (_self, e)
48363                     {
48364                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
48365                         block().removeColumn();
48366                         syncValue();
48367                         toolbar.editorcore.onEditorEvent();
48368                     }
48369                 },
48370                 xns : rooui.Toolbar
48371             },
48372             {
48373                 xtype : 'Button',
48374                 text: '+',
48375                 listeners : {
48376                     click : function (_self, e)
48377                     {
48378                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
48379                         block().addColumn();
48380                         syncValue();
48381                         toolbar.editorcore.onEditorEvent();
48382                     }
48383                 },
48384                 xns : rooui.Toolbar
48385             },
48386             // -------- ROWS
48387             {
48388                 xtype : 'TextItem',
48389                 text : "Rows: ",
48390                 xns : rooui.Toolbar  //Boostrap?
48391             },
48392          
48393             {
48394                 xtype : 'Button',
48395                 text: '-',
48396                 listeners : {
48397                     click : function (_self, e)
48398                     {
48399                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
48400                         block().removeRow();
48401                         syncValue();
48402                         toolbar.editorcore.onEditorEvent();
48403                     }
48404                 },
48405                 xns : rooui.Toolbar
48406             },
48407             {
48408                 xtype : 'Button',
48409                 text: '+',
48410                 listeners : {
48411                     click : function (_self, e)
48412                     {
48413                         block().addRow();
48414                         syncValue();
48415                         toolbar.editorcore.onEditorEvent();
48416                     }
48417                 },
48418                 xns : rooui.Toolbar
48419             },
48420             // -------- ROWS
48421             {
48422                 xtype : 'Button',
48423                 text: 'Reset Column Widths',
48424                 listeners : {
48425                     
48426                     click : function (_self, e)
48427                     {
48428                         block().resetWidths();
48429                         syncValue();
48430                         toolbar.editorcore.onEditorEvent();
48431                     }
48432                 },
48433                 xns : rooui.Toolbar
48434             } 
48435             
48436             
48437             
48438         ];
48439         
48440     },
48441     
48442     
48443   /**
48444      * create a DomHelper friendly object - for use with
48445      * Roo.DomHelper.markup / overwrite / etc..
48446      * ?? should it be called with option to hide all editing features?
48447      */
48448     toObject : function()
48449     {
48450         
48451         var ret = {
48452             tag : 'table',
48453             contenteditable : 'false', // this stops cell selection from picking the table.
48454             'data-block' : 'Table',
48455             style : {
48456                 width:  this.width,
48457                 border : 'solid 1px #000', // ??? hard coded?
48458                 'border-collapse' : 'collapse' 
48459             },
48460             cn : [
48461                 { tag : 'tbody' , cn : [] }
48462             ]
48463         };
48464         
48465         // do we have a head = not really 
48466         var ncols = 0;
48467         Roo.each(this.rows, function( row ) {
48468             var tr = {
48469                 tag: 'tr',
48470                 style : {
48471                     margin: '6px',
48472                     border : 'solid 1px #000',
48473                     textAlign : 'left' 
48474                 },
48475                 cn : [ ]
48476             };
48477             
48478             ret.cn[0].cn.push(tr);
48479             // does the row have any properties? ?? height?
48480             var nc = 0;
48481             Roo.each(row, function( cell ) {
48482                 
48483                 var td = {
48484                     tag : 'td',
48485                     contenteditable :  'true',
48486                     'data-block' : 'Td',
48487                     html : cell.html,
48488                     style : cell.style
48489                 };
48490                 if (cell.colspan > 1) {
48491                     td.colspan = cell.colspan ;
48492                     nc += cell.colspan;
48493                 } else {
48494                     nc++;
48495                 }
48496                 if (cell.rowspan > 1) {
48497                     td.rowspan = cell.rowspan ;
48498                 }
48499                 
48500                 
48501                 // widths ?
48502                 tr.cn.push(td);
48503                     
48504                 
48505             }, this);
48506             ncols = Math.max(nc, ncols);
48507             
48508             
48509         }, this);
48510         // add the header row..
48511         
48512         ncols++;
48513          
48514         
48515         return ret;
48516          
48517     },
48518     
48519     readElement : function(node)
48520     {
48521         node  = node ? node : this.node ;
48522         this.width = this.getVal(node, true, 'style', 'width') || '100%';
48523         
48524         this.rows = [];
48525         this.no_row = 0;
48526         var trs = Array.from(node.rows);
48527         trs.forEach(function(tr) {
48528             var row =  [];
48529             this.rows.push(row);
48530             
48531             this.no_row++;
48532             var no_column = 0;
48533             Array.from(tr.cells).forEach(function(td) {
48534                 
48535                 var add = {
48536                     colspan : td.hasAttribute('colspan') ? td.getAttribute('colspan')*1 : 1,
48537                     rowspan : td.hasAttribute('rowspan') ? td.getAttribute('rowspan')*1 : 1,
48538                     style : td.hasAttribute('style') ? td.getAttribute('style') : '',
48539                     html : td.innerHTML
48540                 };
48541                 no_column += add.colspan;
48542                      
48543                 
48544                 row.push(add);
48545                 
48546                 
48547             },this);
48548             this.no_col = Math.max(this.no_col, no_column);
48549             
48550             
48551         },this);
48552         
48553         
48554     },
48555     normalizeRows: function()
48556     {
48557         var ret= [];
48558         var rid = -1;
48559         this.rows.forEach(function(row) {
48560             rid++;
48561             ret[rid] = [];
48562             row = this.normalizeRow(row);
48563             var cid = 0;
48564             row.forEach(function(c) {
48565                 while (typeof(ret[rid][cid]) != 'undefined') {
48566                     cid++;
48567                 }
48568                 if (typeof(ret[rid]) == 'undefined') {
48569                     ret[rid] = [];
48570                 }
48571                 ret[rid][cid] = c;
48572                 c.row = rid;
48573                 c.col = cid;
48574                 if (c.rowspan < 2) {
48575                     return;
48576                 }
48577                 
48578                 for(var i = 1 ;i < c.rowspan; i++) {
48579                     if (typeof(ret[rid+i]) == 'undefined') {
48580                         ret[rid+i] = [];
48581                     }
48582                     ret[rid+i][cid] = c;
48583                 }
48584             });
48585         }, this);
48586         return ret;
48587     
48588     },
48589     
48590     normalizeRow: function(row)
48591     {
48592         var ret= [];
48593         row.forEach(function(c) {
48594             if (c.colspan < 2) {
48595                 ret.push(c);
48596                 return;
48597             }
48598             for(var i =0 ;i < c.colspan; i++) {
48599                 ret.push(c);
48600             }
48601         });
48602         return ret;
48603     
48604     },
48605     
48606     deleteColumn : function(sel)
48607     {
48608         if (!sel || sel.type != 'col') {
48609             return;
48610         }
48611         if (this.no_col < 2) {
48612             return;
48613         }
48614         
48615         this.rows.forEach(function(row) {
48616             var cols = this.normalizeRow(row);
48617             var col = cols[sel.col];
48618             if (col.colspan > 1) {
48619                 col.colspan --;
48620             } else {
48621                 row.remove(col);
48622             }
48623             
48624         }, this);
48625         this.no_col--;
48626         
48627     },
48628     removeColumn : function()
48629     {
48630         this.deleteColumn({
48631             type: 'col',
48632             col : this.no_col-1
48633         });
48634         this.updateElement();
48635     },
48636     
48637      
48638     addColumn : function()
48639     {
48640         
48641         this.rows.forEach(function(row) {
48642             row.push(this.emptyCell());
48643            
48644         }, this);
48645         this.updateElement();
48646     },
48647     
48648     deleteRow : function(sel)
48649     {
48650         if (!sel || sel.type != 'row') {
48651             return;
48652         }
48653         
48654         if (this.no_row < 2) {
48655             return;
48656         }
48657         
48658         var rows = this.normalizeRows();
48659         
48660         
48661         rows[sel.row].forEach(function(col) {
48662             if (col.rowspan > 1) {
48663                 col.rowspan--;
48664             } else {
48665                 col.remove = 1; // flage it as removed.
48666             }
48667             
48668         }, this);
48669         var newrows = [];
48670         this.rows.forEach(function(row) {
48671             newrow = [];
48672             row.forEach(function(c) {
48673                 if (typeof(c.remove) == 'undefined') {
48674                     newrow.push(c);
48675                 }
48676                 
48677             });
48678             if (newrow.length > 0) {
48679                 newrows.push(row);
48680             }
48681         });
48682         this.rows =  newrows;
48683         
48684         
48685         
48686         this.no_row--;
48687         this.updateElement();
48688         
48689     },
48690     removeRow : function()
48691     {
48692         this.deleteRow({
48693             type: 'row',
48694             row : this.no_row-1
48695         });
48696         
48697     },
48698     
48699      
48700     addRow : function()
48701     {
48702         
48703         var row = [];
48704         for (var i = 0; i < this.no_col; i++ ) {
48705             
48706             row.push(this.emptyCell());
48707            
48708         }
48709         this.rows.push(row);
48710         this.updateElement();
48711         
48712     },
48713      
48714     // the default cell object... at present...
48715     emptyCell : function() {
48716         return (new Roo.htmleditor.BlockTd({})).toObject();
48717         
48718      
48719     },
48720     
48721     removeNode : function()
48722     {
48723         return this.node;
48724     },
48725     
48726     
48727     
48728     resetWidths : function()
48729     {
48730         Array.from(this.node.getElementsByTagName('td')).forEach(function(n) {
48731             var nn = Roo.htmleditor.Block.factory(n);
48732             nn.width = '';
48733             nn.updateElement(n);
48734         });
48735     }
48736     
48737     
48738     
48739     
48740 })
48741
48742 /**
48743  *
48744  * editing a TD?
48745  *
48746  * since selections really work on the table cell, then editing really should work from there
48747  *
48748  * The original plan was to support merging etc... - but that may not be needed yet..
48749  *
48750  * So this simple version will support:
48751  *   add/remove cols
48752  *   adjust the width +/-
48753  *   reset the width...
48754  *   
48755  *
48756  */
48757
48758
48759  
48760
48761 /**
48762  * @class Roo.htmleditor.BlockTable
48763  * Block that manages a table
48764  * 
48765  * @constructor
48766  * Create a new Filter.
48767  * @param {Object} config Configuration options
48768  */
48769
48770 Roo.htmleditor.BlockTd = function(cfg)
48771 {
48772     if (cfg.node) {
48773         this.readElement(cfg.node);
48774         this.updateElement(cfg.node);
48775     }
48776     Roo.apply(this, cfg);
48777      
48778     
48779     
48780 }
48781 Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, {
48782  
48783     node : false,
48784     
48785     width: '',
48786     textAlign : 'left',
48787     valign : 'top',
48788     
48789     colspan : 1,
48790     rowspan : 1,
48791     
48792     
48793     // used by context menu
48794     friendly_name : 'Table Cell',
48795     deleteTitle : false, // use our customer delete
48796     
48797     // context menu is drawn once..
48798     
48799     contextMenu : function(toolbar)
48800     {
48801         
48802         var cell = function() {
48803             return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
48804         };
48805         
48806         var table = function() {
48807             return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode.closest('table'));
48808         };
48809         
48810         var lr = false;
48811         var saveSel = function()
48812         {
48813             lr = toolbar.editorcore.getSelection().getRangeAt(0);
48814         }
48815         var restoreSel = function()
48816         {
48817             if (lr) {
48818                 (function() {
48819                     toolbar.editorcore.focus();
48820                     var cr = toolbar.editorcore.getSelection();
48821                     cr.removeAllRanges();
48822                     cr.addRange(lr);
48823                     toolbar.editorcore.onEditorEvent();
48824                 }).defer(10, this);
48825                 
48826                 
48827             }
48828         }
48829         
48830         var rooui =  typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
48831         
48832         var syncValue = toolbar.editorcore.syncValue;
48833         
48834         var fields = {};
48835         
48836         return [
48837             {
48838                 xtype : 'Button',
48839                 text : 'Edit Table',
48840                 listeners : {
48841                     click : function() {
48842                         var t = toolbar.tb.selectedNode.closest('table');
48843                         toolbar.editorcore.selectNode(t);
48844                         toolbar.editorcore.onEditorEvent();                        
48845                     }
48846                 }
48847                 
48848             },
48849               
48850            
48851              
48852             {
48853                 xtype : 'TextItem',
48854                 text : "Column Width: ",
48855                  xns : rooui.Toolbar 
48856                
48857             },
48858             {
48859                 xtype : 'Button',
48860                 text: '-',
48861                 listeners : {
48862                     click : function (_self, e)
48863                     {
48864                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
48865                         cell().shrinkColumn();
48866                         syncValue();
48867                          toolbar.editorcore.onEditorEvent();
48868                     }
48869                 },
48870                 xns : rooui.Toolbar
48871             },
48872             {
48873                 xtype : 'Button',
48874                 text: '+',
48875                 listeners : {
48876                     click : function (_self, e)
48877                     {
48878                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
48879                         cell().growColumn();
48880                         syncValue();
48881                         toolbar.editorcore.onEditorEvent();
48882                     }
48883                 },
48884                 xns : rooui.Toolbar
48885             },
48886             
48887             {
48888                 xtype : 'TextItem',
48889                 text : "Vertical Align: ",
48890                 xns : rooui.Toolbar  //Boostrap?
48891             },
48892             {
48893                 xtype : 'ComboBox',
48894                 allowBlank : false,
48895                 displayField : 'val',
48896                 editable : true,
48897                 listWidth : 100,
48898                 triggerAction : 'all',
48899                 typeAhead : true,
48900                 valueField : 'val',
48901                 width : 100,
48902                 name : 'valign',
48903                 listeners : {
48904                     select : function (combo, r, index)
48905                     {
48906                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
48907                         var b = cell();
48908                         b.valign = r.get('val');
48909                         b.updateElement();
48910                         syncValue();
48911                         toolbar.editorcore.onEditorEvent();
48912                     }
48913                 },
48914                 xns : rooui.form,
48915                 store : {
48916                     xtype : 'SimpleStore',
48917                     data : [
48918                         ['top'],
48919                         ['middle'],
48920                         ['bottom'] // there are afew more... 
48921                     ],
48922                     fields : [ 'val'],
48923                     xns : Roo.data
48924                 }
48925             },
48926             
48927             {
48928                 xtype : 'TextItem',
48929                 text : "Merge Cells: ",
48930                  xns : rooui.Toolbar 
48931                
48932             },
48933             
48934             
48935             {
48936                 xtype : 'Button',
48937                 text: 'Right',
48938                 listeners : {
48939                     click : function (_self, e)
48940                     {
48941                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
48942                         cell().mergeRight();
48943                         //block().growColumn();
48944                         syncValue();
48945                         toolbar.editorcore.onEditorEvent();
48946                     }
48947                 },
48948                 xns : rooui.Toolbar
48949             },
48950              
48951             {
48952                 xtype : 'Button',
48953                 text: 'Below',
48954                 listeners : {
48955                     click : function (_self, e)
48956                     {
48957                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
48958                         cell().mergeBelow();
48959                         //block().growColumn();
48960                         syncValue();
48961                         toolbar.editorcore.onEditorEvent();
48962                     }
48963                 },
48964                 xns : rooui.Toolbar
48965             },
48966             {
48967                 xtype : 'TextItem',
48968                 text : "| ",
48969                  xns : rooui.Toolbar 
48970                
48971             },
48972             
48973             {
48974                 xtype : 'Button',
48975                 text: 'Split',
48976                 listeners : {
48977                     click : function (_self, e)
48978                     {
48979                         //toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
48980                         cell().split();
48981                         syncValue();
48982                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
48983                         toolbar.editorcore.onEditorEvent();
48984                                              
48985                     }
48986                 },
48987                 xns : rooui.Toolbar
48988             },
48989             {
48990                 xtype : 'Fill',
48991                 xns : rooui.Toolbar 
48992                
48993             },
48994         
48995           
48996             {
48997                 xtype : 'Button',
48998                 text: 'Delete',
48999                  
49000                 xns : rooui.Toolbar,
49001                 menu : {
49002                     xtype : 'Menu',
49003                     xns : rooui.menu,
49004                     items : [
49005                         {
49006                             xtype : 'Item',
49007                             html: 'Column',
49008                             listeners : {
49009                                 click : function (_self, e)
49010                                 {
49011                                     var t = table();
49012                                     
49013                                     cell().deleteColumn();
49014                                     syncValue();
49015                                     toolbar.editorcore.selectNode(t.node);
49016                                     toolbar.editorcore.onEditorEvent();   
49017                                 }
49018                             },
49019                             xns : rooui.menu
49020                         },
49021                         {
49022                             xtype : 'Item',
49023                             html: 'Row',
49024                             listeners : {
49025                                 click : function (_self, e)
49026                                 {
49027                                     var t = table();
49028                                     cell().deleteRow();
49029                                     syncValue();
49030                                     
49031                                     toolbar.editorcore.selectNode(t.node);
49032                                     toolbar.editorcore.onEditorEvent();   
49033                                                          
49034                                 }
49035                             },
49036                             xns : rooui.menu
49037                         },
49038                        {
49039                             xtype : 'Separator',
49040                             xns : rooui.menu
49041                         },
49042                         {
49043                             xtype : 'Item',
49044                             html: 'Table',
49045                             listeners : {
49046                                 click : function (_self, e)
49047                                 {
49048                                     var t = table();
49049                                     var nn = t.node.nextSibling || t.node.previousSibling;
49050                                     t.node.parentNode.removeChild(t.node);
49051                                     if (nn) { 
49052                                         toolbar.editorcore.selectNode(nn, true);
49053                                     }
49054                                     toolbar.editorcore.onEditorEvent();   
49055                                                          
49056                                 }
49057                             },
49058                             xns : rooui.menu
49059                         }
49060                     ]
49061                 }
49062             }
49063             
49064             // align... << fixme
49065             
49066         ];
49067         
49068     },
49069     
49070     
49071   /**
49072      * create a DomHelper friendly object - for use with
49073      * Roo.DomHelper.markup / overwrite / etc..
49074      * ?? should it be called with option to hide all editing features?
49075      */
49076  /**
49077      * create a DomHelper friendly object - for use with
49078      * Roo.DomHelper.markup / overwrite / etc..
49079      * ?? should it be called with option to hide all editing features?
49080      */
49081     toObject : function()
49082     {
49083         
49084         var ret = {
49085             tag : 'td',
49086             contenteditable : 'true', // this stops cell selection from picking the table.
49087             'data-block' : 'Td',
49088             valign : this.valign,
49089             style : {  
49090                 'text-align' :  this.textAlign,
49091                 border : 'solid 1px rgb(0, 0, 0)', // ??? hard coded?
49092                 'border-collapse' : 'collapse',
49093                 padding : '6px', // 8 for desktop / 4 for mobile
49094                 'vertical-align': this.valign
49095             },
49096             html : this.html
49097         };
49098         if (this.width != '') {
49099             ret.width = this.width;
49100             ret.style.width = this.width;
49101         }
49102         
49103         
49104         if (this.colspan > 1) {
49105             ret.colspan = this.colspan ;
49106         } 
49107         if (this.rowspan > 1) {
49108             ret.rowspan = this.rowspan ;
49109         }
49110         
49111            
49112         
49113         return ret;
49114          
49115     },
49116     
49117     readElement : function(node)
49118     {
49119         node  = node ? node : this.node ;
49120         this.width = node.style.width;
49121         this.colspan = Math.max(1,1*node.getAttribute('colspan'));
49122         this.rowspan = Math.max(1,1*node.getAttribute('rowspan'));
49123         this.html = node.innerHTML;
49124         
49125         
49126     },
49127      
49128     // the default cell object... at present...
49129     emptyCell : function() {
49130         return {
49131             colspan :  1,
49132             rowspan :  1,
49133             textAlign : 'left',
49134             html : "&nbsp;" // is this going to be editable now?
49135         };
49136      
49137     },
49138     
49139     removeNode : function()
49140     {
49141         return this.node.closest('table');
49142          
49143     },
49144     
49145     cellData : false,
49146     
49147     colWidths : false,
49148     
49149     toTableArray  : function()
49150     {
49151         var ret = [];
49152         var tab = this.node.closest('tr').closest('table');
49153         Array.from(tab.rows).forEach(function(r, ri){
49154             ret[ri] = [];
49155         });
49156         var rn = 0;
49157         this.colWidths = [];
49158         var all_auto = true;
49159         Array.from(tab.rows).forEach(function(r, ri){
49160             
49161             var cn = 0;
49162             Array.from(r.cells).forEach(function(ce, ci){
49163                 var c =  {
49164                     cell : ce,
49165                     row : rn,
49166                     col: cn,
49167                     colspan : ce.colSpan,
49168                     rowspan : ce.rowSpan
49169                 };
49170                 if (ce.isEqualNode(this.node)) {
49171                     this.cellData = c;
49172                 }
49173                 // if we have been filled up by a row?
49174                 if (typeof(ret[rn][cn]) != 'undefined') {
49175                     while(typeof(ret[rn][cn]) != 'undefined') {
49176                         cn++;
49177                     }
49178                     c.col = cn;
49179                 }
49180                 
49181                 if (typeof(this.colWidths[cn]) == 'undefined') {
49182                     this.colWidths[cn] =   ce.style.width;
49183                     if (this.colWidths[cn] != '') {
49184                         all_auto = false;
49185                     }
49186                 }
49187                 
49188                 
49189                 if (c.colspan < 2 && c.rowspan < 2 ) {
49190                     ret[rn][cn] = c;
49191                     cn++;
49192                     return;
49193                 }
49194                 for(var j = 0; j < c.rowspan; j++) {
49195                     if (typeof(ret[rn+j]) == 'undefined') {
49196                         continue; // we have a problem..
49197                     }
49198                     ret[rn+j][cn] = c;
49199                     for(var i = 0; i < c.colspan; i++) {
49200                         ret[rn+j][cn+i] = c;
49201                     }
49202                 }
49203                 
49204                 cn += c.colspan;
49205             }, this);
49206             rn++;
49207         }, this);
49208         
49209         // initalize widths.?
49210         // either all widths or no widths..
49211         if (all_auto) {
49212             this.colWidths[0] = false; // no widths flag.
49213         }
49214         
49215         
49216         return ret;
49217         
49218     },
49219     
49220     
49221     
49222     
49223     mergeRight: function()
49224     {
49225          
49226         // get the contents of the next cell along..
49227         var tr = this.node.closest('tr');
49228         var i = Array.prototype.indexOf.call(tr.childNodes, this.node);
49229         if (i >= tr.childNodes.length - 1) {
49230             return; // no cells on right to merge with.
49231         }
49232         var table = this.toTableArray();
49233         
49234         if (typeof(table[this.cellData.row][this.cellData.col+this.cellData.colspan]) == 'undefined') {
49235             return; // nothing right?
49236         }
49237         var rc = table[this.cellData.row][this.cellData.col+this.cellData.colspan];
49238         // right cell - must be same rowspan and on the same row.
49239         if (rc.rowspan != this.cellData.rowspan || rc.row != this.cellData.row) {
49240             return; // right hand side is not same rowspan.
49241         }
49242         
49243         
49244         
49245         this.node.innerHTML += ' ' + rc.cell.innerHTML;
49246         tr.removeChild(rc.cell);
49247         this.colspan += rc.colspan;
49248         this.node.setAttribute('colspan', this.colspan);
49249
49250     },
49251     
49252     
49253     mergeBelow : function()
49254     {
49255         var table = this.toTableArray();
49256         if (typeof(table[this.cellData.row+this.cellData.rowspan]) == 'undefined') {
49257             return; // no row below
49258         }
49259         if (typeof(table[this.cellData.row+this.cellData.rowspan][this.cellData.col]) == 'undefined') {
49260             return; // nothing right?
49261         }
49262         var rc = table[this.cellData.row+this.cellData.rowspan][this.cellData.col];
49263         
49264         if (rc.colspan != this.cellData.colspan || rc.col != this.cellData.col) {
49265             return; // right hand side is not same rowspan.
49266         }
49267         this.node.innerHTML =  this.node.innerHTML + rc.cell.innerHTML ;
49268         rc.cell.parentNode.removeChild(rc.cell);
49269         this.rowspan += rc.rowspan;
49270         this.node.setAttribute('rowspan', this.rowspan);
49271     },
49272     
49273     split: function()
49274     {
49275         if (this.node.rowSpan < 2 && this.node.colSpan < 2) {
49276             return;
49277         }
49278         var table = this.toTableArray();
49279         var cd = this.cellData;
49280         this.rowspan = 1;
49281         this.colspan = 1;
49282         
49283         for(var r = cd.row; r < cd.row + cd.rowspan; r++) {
49284             
49285             
49286             
49287             for(var c = cd.col; c < cd.col + cd.colspan; c++) {
49288                 if (r == cd.row && c == cd.col) {
49289                     this.node.removeAttribute('rowspan');
49290                     this.node.removeAttribute('colspan');
49291                     continue;
49292                 }
49293                  
49294                 var ntd = this.node.cloneNode(); // which col/row should be 0..
49295                 ntd.removeAttribute('id'); //
49296                 //ntd.style.width  = '';
49297                 ntd.innerHTML = '';
49298                 table[r][c] = { cell : ntd, col : c, row: r , colspan : 1 , rowspan : 1   };
49299             }
49300             
49301         }
49302         this.redrawAllCells(table);
49303         
49304          
49305         
49306     },
49307     
49308     
49309     
49310     redrawAllCells: function(table)
49311     {
49312         
49313          
49314         var tab = this.node.closest('tr').closest('table');
49315         var ctr = tab.rows[0].parentNode;
49316         Array.from(tab.rows).forEach(function(r, ri){
49317             
49318             Array.from(r.cells).forEach(function(ce, ci){
49319                 ce.parentNode.removeChild(ce);
49320             });
49321             r.parentNode.removeChild(r);
49322         });
49323         for(var r = 0 ; r < table.length; r++) {
49324             var re = tab.rows[r];
49325             
49326             var re = tab.ownerDocument.createElement('tr');
49327             ctr.appendChild(re);
49328             for(var c = 0 ; c < table[r].length; c++) {
49329                 if (table[r][c].cell === false) {
49330                     continue;
49331                 }
49332                 
49333                 re.appendChild(table[r][c].cell);
49334                  
49335                 table[r][c].cell = false;
49336             }
49337         }
49338         
49339     },
49340     updateWidths : function(table)
49341     {
49342         for(var r = 0 ; r < table.length; r++) {
49343            
49344             for(var c = 0 ; c < table[r].length; c++) {
49345                 if (table[r][c].cell === false) {
49346                     continue;
49347                 }
49348                 
49349                 if (this.colWidths[0] != false && table[r][c].colspan < 2) {
49350                     var el = Roo.htmleditor.Block.factory(table[r][c].cell);
49351                     el.width = Math.floor(this.colWidths[c])  +'%';
49352                     el.updateElement(el.node);
49353                 }
49354                 table[r][c].cell = false; // done
49355             }
49356         }
49357     },
49358     normalizeWidths : function(table)
49359     {
49360     
49361         if (this.colWidths[0] === false) {
49362             var nw = 100.0 / this.colWidths.length;
49363             this.colWidths.forEach(function(w,i) {
49364                 this.colWidths[i] = nw;
49365             },this);
49366             return;
49367         }
49368     
49369         var t = 0, missing = [];
49370         
49371         this.colWidths.forEach(function(w,i) {
49372             //if you mix % and
49373             this.colWidths[i] = this.colWidths[i] == '' ? 0 : (this.colWidths[i]+'').replace(/[^0-9]+/g,'')*1;
49374             var add =  this.colWidths[i];
49375             if (add > 0) {
49376                 t+=add;
49377                 return;
49378             }
49379             missing.push(i);
49380             
49381             
49382         },this);
49383         var nc = this.colWidths.length;
49384         if (missing.length) {
49385             var mult = (nc - missing.length) / (1.0 * nc);
49386             var t = mult * t;
49387             var ew = (100 -t) / (1.0 * missing.length);
49388             this.colWidths.forEach(function(w,i) {
49389                 if (w > 0) {
49390                     this.colWidths[i] = w * mult;
49391                     return;
49392                 }
49393                 
49394                 this.colWidths[i] = ew;
49395             }, this);
49396             // have to make up numbers..
49397              
49398         }
49399         // now we should have all the widths..
49400         
49401     
49402     },
49403     
49404     shrinkColumn : function()
49405     {
49406         var table = this.toTableArray();
49407         this.normalizeWidths(table);
49408         var col = this.cellData.col;
49409         var nw = this.colWidths[col] * 0.8;
49410         if (nw < 5) {
49411             return;
49412         }
49413         var otherAdd = (this.colWidths[col]  * 0.2) / (this.colWidths.length -1);
49414         this.colWidths.forEach(function(w,i) {
49415             if (i == col) {
49416                  this.colWidths[i] = nw;
49417                 return;
49418             }
49419             this.colWidths[i] += otherAdd
49420         }, this);
49421         this.updateWidths(table);
49422          
49423     },
49424     growColumn : function()
49425     {
49426         var table = this.toTableArray();
49427         this.normalizeWidths(table);
49428         var col = this.cellData.col;
49429         var nw = this.colWidths[col] * 1.2;
49430         if (nw > 90) {
49431             return;
49432         }
49433         var otherSub = (this.colWidths[col]  * 0.2) / (this.colWidths.length -1);
49434         this.colWidths.forEach(function(w,i) {
49435             if (i == col) {
49436                 this.colWidths[i] = nw;
49437                 return;
49438             }
49439             this.colWidths[i] -= otherSub
49440         }, this);
49441         this.updateWidths(table);
49442          
49443     },
49444     deleteRow : function()
49445     {
49446         // delete this rows 'tr'
49447         // if any of the cells in this row have a rowspan > 1 && row!= this row..
49448         // then reduce the rowspan.
49449         var table = this.toTableArray();
49450         // this.cellData.row;
49451         for (var i =0;i< table[this.cellData.row].length ; i++) {
49452             var c = table[this.cellData.row][i];
49453             if (c.row != this.cellData.row) {
49454                 
49455                 c.rowspan--;
49456                 c.cell.setAttribute('rowspan', c.rowspan);
49457                 continue;
49458             }
49459             if (c.rowspan > 1) {
49460                 c.rowspan--;
49461                 c.cell.setAttribute('rowspan', c.rowspan);
49462             }
49463         }
49464         table.splice(this.cellData.row,1);
49465         this.redrawAllCells(table);
49466         
49467     },
49468     deleteColumn : function()
49469     {
49470         var table = this.toTableArray();
49471         
49472         for (var i =0;i< table.length ; i++) {
49473             var c = table[i][this.cellData.col];
49474             if (c.col != this.cellData.col) {
49475                 table[i][this.cellData.col].colspan--;
49476             } else if (c.colspan > 1) {
49477                 c.colspan--;
49478                 c.cell.setAttribute('colspan', c.colspan);
49479             }
49480             table[i].splice(this.cellData.col,1);
49481         }
49482         
49483         this.redrawAllCells(table);
49484     }
49485     
49486     
49487     
49488     
49489 })
49490
49491 //<script type="text/javascript">
49492
49493 /*
49494  * Based  Ext JS Library 1.1.1
49495  * Copyright(c) 2006-2007, Ext JS, LLC.
49496  * LGPL
49497  *
49498  */
49499  
49500 /**
49501  * @class Roo.HtmlEditorCore
49502  * @extends Roo.Component
49503  * Provides a the editing component for the HTML editors in Roo. (bootstrap and Roo.form)
49504  *
49505  * any element that has display set to 'none' can cause problems in Safari and Firefox.<br/><br/>
49506  */
49507
49508 Roo.HtmlEditorCore = function(config){
49509     
49510     
49511     Roo.HtmlEditorCore.superclass.constructor.call(this, config);
49512     
49513     
49514     this.addEvents({
49515         /**
49516          * @event initialize
49517          * Fires when the editor is fully initialized (including the iframe)
49518          * @param {Roo.HtmlEditorCore} this
49519          */
49520         initialize: true,
49521         /**
49522          * @event activate
49523          * Fires when the editor is first receives the focus. Any insertion must wait
49524          * until after this event.
49525          * @param {Roo.HtmlEditorCore} this
49526          */
49527         activate: true,
49528          /**
49529          * @event beforesync
49530          * Fires before the textarea is updated with content from the editor iframe. Return false
49531          * to cancel the sync.
49532          * @param {Roo.HtmlEditorCore} this
49533          * @param {String} html
49534          */
49535         beforesync: true,
49536          /**
49537          * @event beforepush
49538          * Fires before the iframe editor is updated with content from the textarea. Return false
49539          * to cancel the push.
49540          * @param {Roo.HtmlEditorCore} this
49541          * @param {String} html
49542          */
49543         beforepush: true,
49544          /**
49545          * @event sync
49546          * Fires when the textarea is updated with content from the editor iframe.
49547          * @param {Roo.HtmlEditorCore} this
49548          * @param {String} html
49549          */
49550         sync: true,
49551          /**
49552          * @event push
49553          * Fires when the iframe editor is updated with content from the textarea.
49554          * @param {Roo.HtmlEditorCore} this
49555          * @param {String} html
49556          */
49557         push: true,
49558         
49559         /**
49560          * @event editorevent
49561          * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
49562          * @param {Roo.HtmlEditorCore} this
49563          */
49564         editorevent: true 
49565          
49566         
49567     });
49568     
49569     // at this point this.owner is set, so we can start working out the whitelisted / blacklisted elements
49570     
49571     // defaults : white / black...
49572     this.applyBlacklists();
49573     
49574     
49575     
49576 };
49577
49578
49579 Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
49580
49581
49582      /**
49583      * @cfg {Roo.form.HtmlEditor|Roo.bootstrap.HtmlEditor} the owner field 
49584      */
49585     
49586     owner : false,
49587     
49588      /**
49589      * @cfg {String} resizable  's' or 'se' or 'e' - wrapps the element in a
49590      *                        Roo.resizable.
49591      */
49592     resizable : false,
49593      /**
49594      * @cfg {Number} height (in pixels)
49595      */   
49596     height: 300,
49597    /**
49598      * @cfg {Number} width (in pixels)
49599      */   
49600     width: 500,
49601      /**
49602      * @cfg {boolean} autoClean - default true - loading and saving will remove quite a bit of formating,
49603      *         if you are doing an email editor, this probably needs disabling, it's designed
49604      */
49605     autoClean: true,
49606     
49607     /**
49608      * @cfg {boolean} enableBlocks - default true - if the block editor (table and figure should be enabled)
49609      */
49610     enableBlocks : true,
49611     /**
49612      * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets.
49613      * 
49614      */
49615     stylesheets: false,
49616      /**
49617      * @cfg {String} language default en - language of text (usefull for rtl languages)
49618      * 
49619      */
49620     language: 'en',
49621     
49622     /**
49623      * @cfg {boolean} allowComments - default false - allow comments in HTML source
49624      *          - by default they are stripped - if you are editing email you may need this.
49625      */
49626     allowComments: false,
49627     // id of frame..
49628     frameId: false,
49629     
49630     // private properties
49631     validationEvent : false,
49632     deferHeight: true,
49633     initialized : false,
49634     activated : false,
49635     sourceEditMode : false,
49636     onFocus : Roo.emptyFn,
49637     iframePad:3,
49638     hideMode:'offsets',
49639     
49640     clearUp: true,
49641     
49642     // blacklist + whitelisted elements..
49643     black: false,
49644     white: false,
49645      
49646     bodyCls : '',
49647
49648     
49649     undoManager : false,
49650     /**
49651      * Protected method that will not generally be called directly. It
49652      * is called when the editor initializes the iframe with HTML contents. Override this method if you
49653      * want to change the initialization markup of the iframe (e.g. to add stylesheets).
49654      */
49655     getDocMarkup : function(){
49656         // body styles..
49657         var st = '';
49658         
49659         // inherit styels from page...?? 
49660         if (this.stylesheets === false) {
49661             
49662             Roo.get(document.head).select('style').each(function(node) {
49663                 st += node.dom.outerHTML || new XMLSerializer().serializeToString(node.dom);
49664             });
49665             
49666             Roo.get(document.head).select('link').each(function(node) { 
49667                 st += node.dom.outerHTML || new XMLSerializer().serializeToString(node.dom);
49668             });
49669             
49670         } else if (!this.stylesheets.length) {
49671                 // simple..
49672                 st = '<style type="text/css">' +
49673                     'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
49674                    '</style>';
49675         } else {
49676             for (var i in this.stylesheets) {
49677                 if (typeof(this.stylesheets[i]) != 'string') {
49678                     continue;
49679                 }
49680                 st += '<link rel="stylesheet" href="' + this.stylesheets[i] +'" type="text/css">';
49681             }
49682             
49683         }
49684         
49685         st +=  '<style type="text/css">' +
49686             'IMG { cursor: pointer } ' +
49687         '</style>';
49688         
49689         st += '<meta name="google" content="notranslate">';
49690         
49691         var cls = 'notranslate roo-htmleditor-body';
49692         
49693         if(this.bodyCls.length){
49694             cls += ' ' + this.bodyCls;
49695         }
49696         
49697         return '<html  class="notranslate" translate="no"><head>' + st  +
49698             //<style type="text/css">' +
49699             //'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
49700             //'</style>' +
49701             ' </head><body contenteditable="true" data-enable-grammerly="true" class="' +  cls + '"></body></html>';
49702     },
49703
49704     // private
49705     onRender : function(ct, position)
49706     {
49707         var _t = this;
49708         //Roo.HtmlEditorCore.superclass.onRender.call(this, ct, position);
49709         this.el = this.owner.inputEl ? this.owner.inputEl() : this.owner.el;
49710         
49711         
49712         this.el.dom.style.border = '0 none';
49713         this.el.dom.setAttribute('tabIndex', -1);
49714         this.el.addClass('x-hidden hide');
49715         
49716         
49717         
49718         if(Roo.isIE){ // fix IE 1px bogus margin
49719             this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')
49720         }
49721        
49722         
49723         this.frameId = Roo.id();
49724         
49725          
49726         
49727         var iframe = this.owner.wrap.createChild({
49728             tag: 'iframe',
49729             cls: 'form-control', // bootstrap..
49730             id: this.frameId,
49731             name: this.frameId,
49732             frameBorder : 'no',
49733             'src' : Roo.SSL_SECURE_URL ? Roo.SSL_SECURE_URL  :  "javascript:false"
49734         }, this.el
49735         );
49736         
49737         
49738         this.iframe = iframe.dom;
49739
49740         this.assignDocWin();
49741         
49742         this.doc.designMode = 'on';
49743        
49744         this.doc.open();
49745         this.doc.write(this.getDocMarkup());
49746         this.doc.close();
49747
49748         
49749         var task = { // must defer to wait for browser to be ready
49750             run : function(){
49751                 //console.log("run task?" + this.doc.readyState);
49752                 this.assignDocWin();
49753                 if(this.doc.body || this.doc.readyState == 'complete'){
49754                     try {
49755                         this.doc.designMode="on";
49756                         
49757                     } catch (e) {
49758                         return;
49759                     }
49760                     Roo.TaskMgr.stop(task);
49761                     this.initEditor.defer(10, this);
49762                 }
49763             },
49764             interval : 10,
49765             duration: 10000,
49766             scope: this
49767         };
49768         Roo.TaskMgr.start(task);
49769
49770     },
49771
49772     // private
49773     onResize : function(w, h)
49774     {
49775          Roo.log('resize: ' +w + ',' + h );
49776         //Roo.HtmlEditorCore.superclass.onResize.apply(this, arguments);
49777         if(!this.iframe){
49778             return;
49779         }
49780         if(typeof w == 'number'){
49781             
49782             this.iframe.style.width = w + 'px';
49783         }
49784         if(typeof h == 'number'){
49785             
49786             this.iframe.style.height = h + 'px';
49787             if(this.doc){
49788                 (this.doc.body || this.doc.documentElement).style.height = (h - (this.iframePad*2)) + 'px';
49789             }
49790         }
49791         
49792     },
49793
49794     /**
49795      * Toggles the editor between standard and source edit mode.
49796      * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
49797      */
49798     toggleSourceEdit : function(sourceEditMode){
49799         
49800         this.sourceEditMode = sourceEditMode === true;
49801         
49802         if(this.sourceEditMode){
49803  
49804             Roo.get(this.iframe).addClass(['x-hidden','hide', 'd-none']);     //FIXME - what's the BS styles for these
49805             
49806         }else{
49807             Roo.get(this.iframe).removeClass(['x-hidden','hide', 'd-none']);
49808             //this.iframe.className = '';
49809             this.deferFocus();
49810         }
49811         //this.setSize(this.owner.wrap.getSize());
49812         //this.fireEvent('editmodechange', this, this.sourceEditMode);
49813     },
49814
49815     
49816   
49817
49818     /**
49819      * Protected method that will not generally be called directly. If you need/want
49820      * custom HTML cleanup, this is the method you should override.
49821      * @param {String} html The HTML to be cleaned
49822      * return {String} The cleaned HTML
49823      */
49824     cleanHtml : function(html)
49825     {
49826         html = String(html);
49827         if(html.length > 5){
49828             if(Roo.isSafari){ // strip safari nonsense
49829                 html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');
49830             }
49831         }
49832         if(html == '&nbsp;'){
49833             html = '';
49834         }
49835         return html;
49836     },
49837
49838     /**
49839      * HTML Editor -> Textarea
49840      * Protected method that will not generally be called directly. Syncs the contents
49841      * of the editor iframe with the textarea.
49842      */
49843     syncValue : function()
49844     {
49845         //Roo.log("HtmlEditorCore:syncValue (EDITOR->TEXT)");
49846         if(this.initialized){
49847             
49848             this.undoManager.addEvent();
49849
49850             
49851             var bd = (this.doc.body || this.doc.documentElement);
49852            
49853             
49854             var sel = this.win.getSelection();
49855             
49856             var div = document.createElement('div');
49857             div.innerHTML = bd.innerHTML;
49858             var gtx = div.getElementsByClassName('gtx-trans-icon'); // google translate - really annoying and difficult to get rid of.
49859             if (gtx.length > 0) {
49860                 var rm = gtx.item(0).parentNode;
49861                 rm.parentNode.removeChild(rm);
49862             }
49863             
49864            
49865             if (this.enableBlocks) {
49866                 new Roo.htmleditor.FilterBlock({ node : div });
49867             }
49868             //?? tidy?
49869             var tidy = new Roo.htmleditor.TidySerializer({
49870                 inner:  true
49871             });
49872             var html  = tidy.serialize(div);
49873             
49874             
49875             if(Roo.isSafari){
49876                 var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!
49877                 var m = bs ? bs.match(/text-align:(.*?);/i) : false;
49878                 if(m && m[1]){
49879                     html = '<div style="'+m[0]+'">' + html + '</div>';
49880                 }
49881             }
49882             html = this.cleanHtml(html);
49883             // fix up the special chars.. normaly like back quotes in word...
49884             // however we do not want to do this with chinese..
49885             html = html.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]|[\u0080-\uFFFF]/g, function(match) {
49886                 
49887                 var cc = match.charCodeAt();
49888
49889                 // Get the character value, handling surrogate pairs
49890                 if (match.length == 2) {
49891                     // It's a surrogate pair, calculate the Unicode code point
49892                     var high = match.charCodeAt(0) - 0xD800;
49893                     var low  = match.charCodeAt(1) - 0xDC00;
49894                     cc = (high * 0x400) + low + 0x10000;
49895                 }  else if (
49896                     (cc >= 0x4E00 && cc < 0xA000 ) ||
49897                     (cc >= 0x3400 && cc < 0x4E00 ) ||
49898                     (cc >= 0xf900 && cc < 0xfb00 )
49899                 ) {
49900                         return match;
49901                 }  
49902          
49903                 // No, use a numeric entity. Here we brazenly (and possibly mistakenly)
49904                 return "&#" + cc + ";";
49905                 
49906                 
49907             });
49908             
49909             
49910              
49911             if(this.owner.fireEvent('beforesync', this, html) !== false){
49912                 this.el.dom.value = html;
49913                 this.owner.fireEvent('sync', this, html);
49914             }
49915         }
49916     },
49917
49918     /**
49919      * TEXTAREA -> EDITABLE
49920      * Protected method that will not generally be called directly. Pushes the value of the textarea
49921      * into the iframe editor.
49922      */
49923     pushValue : function()
49924     {
49925         //Roo.log("HtmlEditorCore:pushValue (TEXT->EDITOR)");
49926         if(this.initialized){
49927             var v = this.el.dom.value.trim();
49928             
49929             
49930             if(this.owner.fireEvent('beforepush', this, v) !== false){
49931                 var d = (this.doc.body || this.doc.documentElement);
49932                 d.innerHTML = v;
49933                  
49934                 this.el.dom.value = d.innerHTML;
49935                 this.owner.fireEvent('push', this, v);
49936             }
49937             if (this.autoClean) {
49938                 new Roo.htmleditor.FilterParagraph({node : this.doc.body}); // paragraphs
49939                 new Roo.htmleditor.FilterSpan({node : this.doc.body}); // empty spans
49940             }
49941             if (this.enableBlocks) {
49942                 Roo.htmleditor.Block.initAll(this.doc.body);
49943             }
49944             
49945             this.updateLanguage();
49946             
49947             var lc = this.doc.body.lastChild;
49948             if (lc && lc.nodeType == 1 && lc.getAttribute("contenteditable") == "false") {
49949                 // add an extra line at the end.
49950                 this.doc.body.appendChild(this.doc.createElement('br'));
49951             }
49952             
49953             
49954         }
49955     },
49956
49957     // private
49958     deferFocus : function(){
49959         this.focus.defer(10, this);
49960     },
49961
49962     // doc'ed in Field
49963     focus : function(){
49964         if(this.win && !this.sourceEditMode){
49965             this.win.focus();
49966         }else{
49967             this.el.focus();
49968         }
49969     },
49970     
49971     assignDocWin: function()
49972     {
49973         var iframe = this.iframe;
49974         
49975          if(Roo.isIE){
49976             this.doc = iframe.contentWindow.document;
49977             this.win = iframe.contentWindow;
49978         } else {
49979 //            if (!Roo.get(this.frameId)) {
49980 //                return;
49981 //            }
49982 //            this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
49983 //            this.win = Roo.get(this.frameId).dom.contentWindow;
49984             
49985             if (!Roo.get(this.frameId) && !iframe.contentDocument) {
49986                 return;
49987             }
49988             
49989             this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
49990             this.win = (iframe.contentWindow || Roo.get(this.frameId).dom.contentWindow);
49991         }
49992     },
49993     
49994     // private
49995     initEditor : function(){
49996         //console.log("INIT EDITOR");
49997         this.assignDocWin();
49998         
49999         
50000         
50001         this.doc.designMode="on";
50002         this.doc.open();
50003         this.doc.write(this.getDocMarkup());
50004         this.doc.close();
50005         
50006         var dbody = (this.doc.body || this.doc.documentElement);
50007         //var ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat');
50008         // this copies styles from the containing element into thsi one..
50009         // not sure why we need all of this..
50010         //var ss = this.el.getStyles('font-size', 'background-image', 'background-repeat');
50011         
50012         //var ss = this.el.getStyles( 'background-image', 'background-repeat');
50013         //ss['background-attachment'] = 'fixed'; // w3c
50014         dbody.bgProperties = 'fixed'; // ie
50015         dbody.setAttribute("translate", "no");
50016         
50017         //Roo.DomHelper.applyStyles(dbody, ss);
50018         Roo.EventManager.on(this.doc, {
50019              
50020             'mouseup': this.onEditorEvent,
50021             'dblclick': this.onEditorEvent,
50022             'click': this.onEditorEvent,
50023             'keyup': this.onEditorEvent,
50024             
50025             buffer:100,
50026             scope: this
50027         });
50028         Roo.EventManager.on(this.doc, {
50029             'paste': this.onPasteEvent,
50030             scope : this
50031         });
50032         if(Roo.isGecko){
50033             Roo.EventManager.on(this.doc, 'keypress', this.mozKeyPress, this);
50034         }
50035         //??? needed???
50036         if(Roo.isIE || Roo.isSafari || Roo.isOpera){
50037             Roo.EventManager.on(this.doc, 'keydown', this.fixKeys, this);
50038         }
50039         this.initialized = true;
50040
50041         
50042         // initialize special key events - enter
50043         new Roo.htmleditor.KeyEnter({core : this});
50044         
50045          
50046         
50047         this.owner.fireEvent('initialize', this);
50048         this.pushValue();
50049     },
50050     // this is to prevent a href clicks resulting in a redirect?
50051    
50052     onPasteEvent : function(e,v)
50053     {
50054         // I think we better assume paste is going to be a dirty load of rubish from word..
50055         
50056         // even pasting into a 'email version' of this widget will have to clean up that mess.
50057         var cd = (e.browserEvent.clipboardData || window.clipboardData);
50058         
50059         // check what type of paste - if it's an image, then handle it differently.
50060         if (cd.files && cd.files.length > 0) {
50061             // pasting images?
50062             var urlAPI = (window.createObjectURL && window) || 
50063                 (window.URL && URL.revokeObjectURL && URL) || 
50064                 (window.webkitURL && webkitURL);
50065     
50066             var url = urlAPI.createObjectURL( cd.files[0]);
50067             this.insertAtCursor('<img src=" + url + ">');
50068             return false;
50069         }
50070         if (cd.types.indexOf('text/html') < 0 ) {
50071             return false;
50072         }
50073         var images = [];
50074         var html = cd.getData('text/html'); // clipboard event
50075         if (cd.types.indexOf('text/rtf') > -1) {
50076             var parser = new Roo.rtf.Parser(cd.getData('text/rtf'));
50077             images = parser.doc ? parser.doc.getElementsByType('pict') : [];
50078         }
50079         Roo.log(images);
50080         //Roo.log(imgs);
50081         // fixme..
50082         images = images.filter(function(g) { return !g.path.match(/^rtf\/(head|pgdsctbl|listtable|footerf)/); }) // ignore headers/footers etc.
50083                        .map(function(g) { return g.toDataURL(); })
50084                        .filter(function(g) { return g != 'about:blank'; });
50085         
50086         
50087         html = this.cleanWordChars(html);
50088         
50089         var d = (new DOMParser().parseFromString(html, 'text/html')).body;
50090         
50091         
50092         var sn = this.getParentElement();
50093         // check if d contains a table, and prevent nesting??
50094         //Roo.log(d.getElementsByTagName('table'));
50095         //Roo.log(sn);
50096         //Roo.log(sn.closest('table'));
50097         if (d.getElementsByTagName('table').length && sn && sn.closest('table')) {
50098             e.preventDefault();
50099             this.insertAtCursor("You can not nest tables");
50100             //Roo.log("prevent?"); // fixme - 
50101             return false;
50102         }
50103         
50104         if (images.length > 0) {
50105             Roo.each(d.getElementsByTagName('img'), function(img, i) {
50106                 img.setAttribute('src', images[i]);
50107             });
50108         }
50109         if (this.autoClean) {
50110             new Roo.htmleditor.FilterStyleToTag({ node : d });
50111             new Roo.htmleditor.FilterAttributes({
50112                 node : d,
50113                 attrib_white : ['href', 'src', 'name', 'align', 'colspan', 'rowspan'],
50114                 attrib_clean : ['href', 'src' ] 
50115             });
50116             new Roo.htmleditor.FilterBlack({ node : d, tag : this.black});
50117             // should be fonts..
50118             new Roo.htmleditor.FilterKeepChildren({node : d, tag : [ 'FONT', 'O:P' ]} );
50119             new Roo.htmleditor.FilterParagraph({ node : d });
50120             new Roo.htmleditor.FilterSpan({ node : d });
50121             new Roo.htmleditor.FilterLongBr({ node : d });
50122         }
50123         if (this.enableBlocks) {
50124                 
50125             Array.from(d.getElementsByTagName('img')).forEach(function(img) {
50126                 if (img.closest('figure')) { // assume!! that it's aready
50127                     return;
50128                 }
50129                 var fig  = new Roo.htmleditor.BlockFigure({
50130                     image_src  : img.src
50131                 });
50132                 fig.updateElement(img); // replace it..
50133                 
50134             });
50135         }
50136         
50137         
50138         this.insertAtCursor(d.innerHTML.replace(/&nbsp;/g,' '));
50139         if (this.enableBlocks) {
50140             Roo.htmleditor.Block.initAll(this.doc.body);
50141         }
50142         
50143         
50144         e.preventDefault();
50145         return false;
50146         // default behaveiour should be our local cleanup paste? (optional?)
50147         // for simple editor - we want to hammer the paste and get rid of everything... - so over-rideable..
50148         //this.owner.fireEvent('paste', e, v);
50149     },
50150     // private
50151     onDestroy : function(){
50152         
50153         
50154         
50155         if(this.rendered){
50156             
50157             //for (var i =0; i < this.toolbars.length;i++) {
50158             //    // fixme - ask toolbars for heights?
50159             //    this.toolbars[i].onDestroy();
50160            // }
50161             
50162             //this.wrap.dom.innerHTML = '';
50163             //this.wrap.remove();
50164         }
50165     },
50166
50167     // private
50168     onFirstFocus : function(){
50169         
50170         this.assignDocWin();
50171         this.undoManager = new Roo.lib.UndoManager(100,(this.doc.body || this.doc.documentElement));
50172         
50173         this.activated = true;
50174          
50175     
50176         if(Roo.isGecko){ // prevent silly gecko errors
50177             this.win.focus();
50178             var s = this.win.getSelection();
50179             if(!s.focusNode || s.focusNode.nodeType != 3){
50180                 var r = s.getRangeAt(0);
50181                 r.selectNodeContents((this.doc.body || this.doc.documentElement));
50182                 r.collapse(true);
50183                 this.deferFocus();
50184             }
50185             try{
50186                 this.execCmd('useCSS', true);
50187                 this.execCmd('styleWithCSS', false);
50188             }catch(e){}
50189         }
50190         this.owner.fireEvent('activate', this);
50191     },
50192
50193     // private
50194     adjustFont: function(btn){
50195         var adjust = btn.cmd == 'increasefontsize' ? 1 : -1;
50196         //if(Roo.isSafari){ // safari
50197         //    adjust *= 2;
50198        // }
50199         var v = parseInt(this.doc.queryCommandValue('FontSize')|| 3, 10);
50200         if(Roo.isSafari){ // safari
50201             var sm = { 10 : 1, 13: 2, 16:3, 18:4, 24: 5, 32:6, 48: 7 };
50202             v =  (v < 10) ? 10 : v;
50203             v =  (v > 48) ? 48 : v;
50204             v = typeof(sm[v]) == 'undefined' ? 1 : sm[v];
50205             
50206         }
50207         
50208         
50209         v = Math.max(1, v+adjust);
50210         
50211         this.execCmd('FontSize', v  );
50212     },
50213
50214     onEditorEvent : function(e)
50215     {
50216          
50217         
50218         if (e && (e.ctrlKey || e.metaKey) && e.keyCode === 90) {
50219             return; // we do not handle this.. (undo manager does..)
50220         }
50221         // in theory this detects if the last element is not a br, then we try and do that.
50222         // its so clicking in space at bottom triggers adding a br and moving the cursor.
50223         if (e &&
50224             e.target.nodeName == 'BODY' &&
50225             e.type == "mouseup" &&
50226             this.doc.body.lastChild
50227            ) {
50228             var lc = this.doc.body.lastChild;
50229             // gtx-trans is google translate plugin adding crap.
50230             while ((lc.nodeType == 3 && lc.nodeValue == '') || lc.id == 'gtx-trans') {
50231                 lc = lc.previousSibling;
50232             }
50233             if (lc.nodeType == 1 && lc.nodeName != 'BR') {
50234             // if last element is <BR> - then dont do anything.
50235             
50236                 var ns = this.doc.createElement('br');
50237                 this.doc.body.appendChild(ns);
50238                 range = this.doc.createRange();
50239                 range.setStartAfter(ns);
50240                 range.collapse(true);
50241                 var sel = this.win.getSelection();
50242                 sel.removeAllRanges();
50243                 sel.addRange(range);
50244             }
50245         }
50246         
50247         
50248         
50249         this.fireEditorEvent(e);
50250       //  this.updateToolbar();
50251         this.syncValue(); //we can not sync so often.. sync cleans, so this breaks stuff
50252     },
50253     
50254     fireEditorEvent: function(e)
50255     {
50256         this.owner.fireEvent('editorevent', this, e);
50257     },
50258
50259     insertTag : function(tg)
50260     {
50261         // could be a bit smarter... -> wrap the current selected tRoo..
50262         if (tg.toLowerCase() == 'span' ||
50263             tg.toLowerCase() == 'code' ||
50264             tg.toLowerCase() == 'sup' ||
50265             tg.toLowerCase() == 'sub' 
50266             ) {
50267             
50268             range = this.createRange(this.getSelection());
50269             var wrappingNode = this.doc.createElement(tg.toLowerCase());
50270             wrappingNode.appendChild(range.extractContents());
50271             range.insertNode(wrappingNode);
50272
50273             return;
50274             
50275             
50276             
50277         }
50278         this.execCmd("formatblock",   tg);
50279         this.undoManager.addEvent(); 
50280     },
50281     
50282     insertText : function(txt)
50283     {
50284         
50285         
50286         var range = this.createRange();
50287         range.deleteContents();
50288                //alert(Sender.getAttribute('label'));
50289                
50290         range.insertNode(this.doc.createTextNode(txt));
50291         this.undoManager.addEvent();
50292     } ,
50293     
50294      
50295
50296     /**
50297      * Executes a Midas editor command on the editor document and performs necessary focus and
50298      * toolbar updates. <b>This should only be called after the editor is initialized.</b>
50299      * @param {String} cmd The Midas command
50300      * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
50301      */
50302     relayCmd : function(cmd, value)
50303     {
50304         
50305         switch (cmd) {
50306             case 'justifyleft':
50307             case 'justifyright':
50308             case 'justifycenter':
50309                 // if we are in a cell, then we will adjust the
50310                 var n = this.getParentElement();
50311                 var td = n.closest('td');
50312                 if (td) {
50313                     var bl = Roo.htmleditor.Block.factory(td);
50314                     bl.textAlign = cmd.replace('justify','');
50315                     bl.updateElement();
50316                     this.owner.fireEvent('editorevent', this);
50317                     return;
50318                 }
50319                 this.execCmd('styleWithCSS', true); // 
50320                 break;
50321             case 'bold':
50322             case 'italic':
50323                 // if there is no selection, then we insert, and set the curson inside it..
50324                 this.execCmd('styleWithCSS', false); 
50325                 break;
50326                 
50327         
50328             default:
50329                 break;
50330         }
50331         
50332         
50333         this.win.focus();
50334         this.execCmd(cmd, value);
50335         this.owner.fireEvent('editorevent', this);
50336         //this.updateToolbar();
50337         this.owner.deferFocus();
50338     },
50339
50340     /**
50341      * Executes a Midas editor command directly on the editor document.
50342      * For visual commands, you should use {@link #relayCmd} instead.
50343      * <b>This should only be called after the editor is initialized.</b>
50344      * @param {String} cmd The Midas command
50345      * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
50346      */
50347     execCmd : function(cmd, value){
50348         this.doc.execCommand(cmd, false, value === undefined ? null : value);
50349         this.syncValue();
50350     },
50351  
50352  
50353    
50354     /**
50355      * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated
50356      * to insert tRoo.
50357      * @param {String} text | dom node.. 
50358      */
50359     insertAtCursor : function(text)
50360     {
50361         
50362         if(!this.activated){
50363             return;
50364         }
50365          
50366         if(Roo.isGecko || Roo.isOpera || Roo.isSafari){
50367             this.win.focus();
50368             
50369             
50370             // from jquery ui (MIT licenced)
50371             var range, node;
50372             var win = this.win;
50373             
50374             if (win.getSelection && win.getSelection().getRangeAt) {
50375                 
50376                 // delete the existing?
50377                 
50378                 this.createRange(this.getSelection()).deleteContents();
50379                 range = win.getSelection().getRangeAt(0);
50380                 node = typeof(text) == 'string' ? range.createContextualFragment(text) : text;
50381                 range.insertNode(node);
50382                 range = range.cloneRange();
50383                 range.collapse(false);
50384                  
50385                 win.getSelection().removeAllRanges();
50386                 win.getSelection().addRange(range);
50387                 
50388                 
50389                 
50390             } else if (win.document.selection && win.document.selection.createRange) {
50391                 // no firefox support
50392                 var txt = typeof(text) == 'string' ? text : text.outerHTML;
50393                 win.document.selection.createRange().pasteHTML(txt);
50394             
50395             } else {
50396                 // no firefox support
50397                 var txt = typeof(text) == 'string' ? text : text.outerHTML;
50398                 this.execCmd('InsertHTML', txt);
50399             } 
50400             this.syncValue();
50401             
50402             this.deferFocus();
50403         }
50404     },
50405  // private
50406     mozKeyPress : function(e){
50407         if(e.ctrlKey){
50408             var c = e.getCharCode(), cmd;
50409           
50410             if(c > 0){
50411                 c = String.fromCharCode(c).toLowerCase();
50412                 switch(c){
50413                     case 'b':
50414                         cmd = 'bold';
50415                         break;
50416                     case 'i':
50417                         cmd = 'italic';
50418                         break;
50419                     
50420                     case 'u':
50421                         cmd = 'underline';
50422                         break;
50423                     
50424                     //case 'v':
50425                       //  this.cleanUpPaste.defer(100, this);
50426                       //  return;
50427                         
50428                 }
50429                 if(cmd){
50430                     
50431                     this.relayCmd(cmd);
50432                     //this.win.focus();
50433                     //this.execCmd(cmd);
50434                     //this.deferFocus();
50435                     e.preventDefault();
50436                 }
50437                 
50438             }
50439         }
50440     },
50441
50442     // private
50443     fixKeys : function(){ // load time branching for fastest keydown performance
50444         
50445         
50446         if(Roo.isIE){
50447             return function(e){
50448                 var k = e.getKey(), r;
50449                 if(k == e.TAB){
50450                     e.stopEvent();
50451                     r = this.doc.selection.createRange();
50452                     if(r){
50453                         r.collapse(true);
50454                         r.pasteHTML('&#160;&#160;&#160;&#160;');
50455                         this.deferFocus();
50456                     }
50457                     return;
50458                 }
50459                 /// this is handled by Roo.htmleditor.KeyEnter
50460                  /*
50461                 if(k == e.ENTER){
50462                     r = this.doc.selection.createRange();
50463                     if(r){
50464                         var target = r.parentElement();
50465                         if(!target || target.tagName.toLowerCase() != 'li'){
50466                             e.stopEvent();
50467                             r.pasteHTML('<br/>');
50468                             r.collapse(false);
50469                             r.select();
50470                         }
50471                     }
50472                 }
50473                 */
50474                 //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
50475                 //    this.cleanUpPaste.defer(100, this);
50476                 //    return;
50477                 //}
50478                 
50479                 
50480             };
50481         }else if(Roo.isOpera){
50482             return function(e){
50483                 var k = e.getKey();
50484                 if(k == e.TAB){
50485                     e.stopEvent();
50486                     this.win.focus();
50487                     this.execCmd('InsertHTML','&#160;&#160;&#160;&#160;');
50488                     this.deferFocus();
50489                 }
50490                
50491                 //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
50492                 //    this.cleanUpPaste.defer(100, this);
50493                  //   return;
50494                 //}
50495                 
50496             };
50497         }else if(Roo.isSafari){
50498             return function(e){
50499                 var k = e.getKey();
50500                 
50501                 if(k == e.TAB){
50502                     e.stopEvent();
50503                     this.execCmd('InsertText','\t');
50504                     this.deferFocus();
50505                     return;
50506                 }
50507                  this.mozKeyPress(e);
50508                 
50509                //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
50510                  //   this.cleanUpPaste.defer(100, this);
50511                  //   return;
50512                // }
50513                 
50514              };
50515         }
50516     }(),
50517     
50518     getAllAncestors: function()
50519     {
50520         var p = this.getSelectedNode();
50521         var a = [];
50522         if (!p) {
50523             a.push(p); // push blank onto stack..
50524             p = this.getParentElement();
50525         }
50526         
50527         
50528         while (p && (p.nodeType == 1) && (p.tagName.toLowerCase() != 'body')) {
50529             a.push(p);
50530             p = p.parentNode;
50531         }
50532         a.push(this.doc.body);
50533         return a;
50534     },
50535     lastSel : false,
50536     lastSelNode : false,
50537     
50538     
50539     getSelection : function() 
50540     {
50541         this.assignDocWin();
50542         return Roo.lib.Selection.wrap(Roo.isIE ? this.doc.selection : this.win.getSelection(), this.doc);
50543     },
50544     /**
50545      * Select a dom node
50546      * @param {DomElement} node the node to select
50547      */
50548     selectNode : function(node, collapse)
50549     {
50550         var nodeRange = node.ownerDocument.createRange();
50551         try {
50552             nodeRange.selectNode(node);
50553         } catch (e) {
50554             nodeRange.selectNodeContents(node);
50555         }
50556         if (collapse === true) {
50557             nodeRange.collapse(true);
50558         }
50559         //
50560         var s = this.win.getSelection();
50561         s.removeAllRanges();
50562         s.addRange(nodeRange);
50563     },
50564     
50565     getSelectedNode: function() 
50566     {
50567         // this may only work on Gecko!!!
50568         
50569         // should we cache this!!!!
50570         
50571          
50572          
50573         var range = this.createRange(this.getSelection()).cloneRange();
50574         
50575         if (Roo.isIE) {
50576             var parent = range.parentElement();
50577             while (true) {
50578                 var testRange = range.duplicate();
50579                 testRange.moveToElementText(parent);
50580                 if (testRange.inRange(range)) {
50581                     break;
50582                 }
50583                 if ((parent.nodeType != 1) || (parent.tagName.toLowerCase() == 'body')) {
50584                     break;
50585                 }
50586                 parent = parent.parentElement;
50587             }
50588             return parent;
50589         }
50590         
50591         // is ancestor a text element.
50592         var ac =  range.commonAncestorContainer;
50593         if (ac.nodeType == 3) {
50594             ac = ac.parentNode;
50595         }
50596         
50597         var ar = ac.childNodes;
50598          
50599         var nodes = [];
50600         var other_nodes = [];
50601         var has_other_nodes = false;
50602         for (var i=0;i<ar.length;i++) {
50603             if ((ar[i].nodeType == 3) && (!ar[i].data.length)) { // empty text ? 
50604                 continue;
50605             }
50606             // fullly contained node.
50607             
50608             if (this.rangeIntersectsNode(range,ar[i]) && this.rangeCompareNode(range,ar[i]) == 3) {
50609                 nodes.push(ar[i]);
50610                 continue;
50611             }
50612             
50613             // probably selected..
50614             if ((ar[i].nodeType == 1) && this.rangeIntersectsNode(range,ar[i]) && (this.rangeCompareNode(range,ar[i]) > 0)) {
50615                 other_nodes.push(ar[i]);
50616                 continue;
50617             }
50618             // outer..
50619             if (!this.rangeIntersectsNode(range,ar[i])|| (this.rangeCompareNode(range,ar[i]) == 0))  {
50620                 continue;
50621             }
50622             
50623             
50624             has_other_nodes = true;
50625         }
50626         if (!nodes.length && other_nodes.length) {
50627             nodes= other_nodes;
50628         }
50629         if (has_other_nodes || !nodes.length || (nodes.length > 1)) {
50630             return false;
50631         }
50632         
50633         return nodes[0];
50634     },
50635     
50636     
50637     createRange: function(sel)
50638     {
50639         // this has strange effects when using with 
50640         // top toolbar - not sure if it's a great idea.
50641         //this.editor.contentWindow.focus();
50642         if (typeof sel != "undefined") {
50643             try {
50644                 return sel.getRangeAt ? sel.getRangeAt(0) : sel.createRange();
50645             } catch(e) {
50646                 return this.doc.createRange();
50647             }
50648         } else {
50649             return this.doc.createRange();
50650         }
50651     },
50652     getParentElement: function()
50653     {
50654         
50655         this.assignDocWin();
50656         var sel = Roo.isIE ? this.doc.selection : this.win.getSelection();
50657         
50658         var range = this.createRange(sel);
50659          
50660         try {
50661             var p = range.commonAncestorContainer;
50662             while (p.nodeType == 3) { // text node
50663                 p = p.parentNode;
50664             }
50665             return p;
50666         } catch (e) {
50667             return null;
50668         }
50669     
50670     },
50671     /***
50672      *
50673      * Range intersection.. the hard stuff...
50674      *  '-1' = before
50675      *  '0' = hits..
50676      *  '1' = after.
50677      *         [ -- selected range --- ]
50678      *   [fail]                        [fail]
50679      *
50680      *    basically..
50681      *      if end is before start or  hits it. fail.
50682      *      if start is after end or hits it fail.
50683      *
50684      *   if either hits (but other is outside. - then it's not 
50685      *   
50686      *    
50687      **/
50688     
50689     
50690     // @see http://www.thismuchiknow.co.uk/?p=64.
50691     rangeIntersectsNode : function(range, node)
50692     {
50693         var nodeRange = node.ownerDocument.createRange();
50694         try {
50695             nodeRange.selectNode(node);
50696         } catch (e) {
50697             nodeRange.selectNodeContents(node);
50698         }
50699     
50700         var rangeStartRange = range.cloneRange();
50701         rangeStartRange.collapse(true);
50702     
50703         var rangeEndRange = range.cloneRange();
50704         rangeEndRange.collapse(false);
50705     
50706         var nodeStartRange = nodeRange.cloneRange();
50707         nodeStartRange.collapse(true);
50708     
50709         var nodeEndRange = nodeRange.cloneRange();
50710         nodeEndRange.collapse(false);
50711     
50712         return rangeStartRange.compareBoundaryPoints(
50713                  Range.START_TO_START, nodeEndRange) == -1 &&
50714                rangeEndRange.compareBoundaryPoints(
50715                  Range.START_TO_START, nodeStartRange) == 1;
50716         
50717          
50718     },
50719     rangeCompareNode : function(range, node)
50720     {
50721         var nodeRange = node.ownerDocument.createRange();
50722         try {
50723             nodeRange.selectNode(node);
50724         } catch (e) {
50725             nodeRange.selectNodeContents(node);
50726         }
50727         
50728         
50729         range.collapse(true);
50730     
50731         nodeRange.collapse(true);
50732      
50733         var ss = range.compareBoundaryPoints( Range.START_TO_START, nodeRange);
50734         var ee = range.compareBoundaryPoints(  Range.END_TO_END, nodeRange);
50735          
50736         //Roo.log(node.tagName + ': ss='+ss +', ee='+ee)
50737         
50738         var nodeIsBefore   =  ss == 1;
50739         var nodeIsAfter    = ee == -1;
50740         
50741         if (nodeIsBefore && nodeIsAfter) {
50742             return 0; // outer
50743         }
50744         if (!nodeIsBefore && nodeIsAfter) {
50745             return 1; //right trailed.
50746         }
50747         
50748         if (nodeIsBefore && !nodeIsAfter) {
50749             return 2;  // left trailed.
50750         }
50751         // fully contined.
50752         return 3;
50753     },
50754  
50755     cleanWordChars : function(input) {// change the chars to hex code
50756         
50757        var swapCodes  = [ 
50758             [    8211, "&#8211;" ], 
50759             [    8212, "&#8212;" ], 
50760             [    8216,  "'" ],  
50761             [    8217, "'" ],  
50762             [    8220, '"' ],  
50763             [    8221, '"' ],  
50764             [    8226, "*" ],  
50765             [    8230, "..." ]
50766         ]; 
50767         var output = input;
50768         Roo.each(swapCodes, function(sw) { 
50769             var swapper = new RegExp("\\u" + sw[0].toString(16), "g"); // hex codes
50770             
50771             output = output.replace(swapper, sw[1]);
50772         });
50773         
50774         return output;
50775     },
50776     
50777      
50778     
50779         
50780     
50781     cleanUpChild : function (node)
50782     {
50783         
50784         new Roo.htmleditor.FilterComment({node : node});
50785         new Roo.htmleditor.FilterAttributes({
50786                 node : node,
50787                 attrib_black : this.ablack,
50788                 attrib_clean : this.aclean,
50789                 style_white : this.cwhite,
50790                 style_black : this.cblack
50791         });
50792         new Roo.htmleditor.FilterBlack({ node : node, tag : this.black});
50793         new Roo.htmleditor.FilterKeepChildren({node : node, tag : this.tag_remove} );
50794          
50795         
50796     },
50797     
50798     /**
50799      * Clean up MS wordisms...
50800      * @deprecated - use filter directly
50801      */
50802     cleanWord : function(node)
50803     {
50804         new Roo.htmleditor.FilterWord({ node : node ? node : this.doc.body });
50805         
50806     },
50807    
50808     
50809     /**
50810
50811      * @deprecated - use filters
50812      */
50813     cleanTableWidths : function(node)
50814     {
50815         new Roo.htmleditor.FilterTableWidth({ node : node ? node : this.doc.body});
50816         
50817  
50818     },
50819     
50820      
50821         
50822     applyBlacklists : function()
50823     {
50824         var w = typeof(this.owner.white) != 'undefined' && this.owner.white ? this.owner.white  : [];
50825         var b = typeof(this.owner.black) != 'undefined' && this.owner.black ? this.owner.black :  [];
50826         
50827         this.aclean = typeof(this.owner.aclean) != 'undefined' && this.owner.aclean ? this.owner.aclean :  Roo.HtmlEditorCore.aclean;
50828         this.ablack = typeof(this.owner.ablack) != 'undefined' && this.owner.ablack ? this.owner.ablack :  Roo.HtmlEditorCore.ablack;
50829         this.tag_remove = typeof(this.owner.tag_remove) != 'undefined' && this.owner.tag_remove ? this.owner.tag_remove :  Roo.HtmlEditorCore.tag_remove;
50830         
50831         this.white = [];
50832         this.black = [];
50833         Roo.each(Roo.HtmlEditorCore.white, function(tag) {
50834             if (b.indexOf(tag) > -1) {
50835                 return;
50836             }
50837             this.white.push(tag);
50838             
50839         }, this);
50840         
50841         Roo.each(w, function(tag) {
50842             if (b.indexOf(tag) > -1) {
50843                 return;
50844             }
50845             if (this.white.indexOf(tag) > -1) {
50846                 return;
50847             }
50848             this.white.push(tag);
50849             
50850         }, this);
50851         
50852         
50853         Roo.each(Roo.HtmlEditorCore.black, function(tag) {
50854             if (w.indexOf(tag) > -1) {
50855                 return;
50856             }
50857             this.black.push(tag);
50858             
50859         }, this);
50860         
50861         Roo.each(b, function(tag) {
50862             if (w.indexOf(tag) > -1) {
50863                 return;
50864             }
50865             if (this.black.indexOf(tag) > -1) {
50866                 return;
50867             }
50868             this.black.push(tag);
50869             
50870         }, this);
50871         
50872         
50873         w = typeof(this.owner.cwhite) != 'undefined' && this.owner.cwhite ? this.owner.cwhite  : [];
50874         b = typeof(this.owner.cblack) != 'undefined' && this.owner.cblack ? this.owner.cblack :  [];
50875         
50876         this.cwhite = [];
50877         this.cblack = [];
50878         Roo.each(Roo.HtmlEditorCore.cwhite, function(tag) {
50879             if (b.indexOf(tag) > -1) {
50880                 return;
50881             }
50882             this.cwhite.push(tag);
50883             
50884         }, this);
50885         
50886         Roo.each(w, function(tag) {
50887             if (b.indexOf(tag) > -1) {
50888                 return;
50889             }
50890             if (this.cwhite.indexOf(tag) > -1) {
50891                 return;
50892             }
50893             this.cwhite.push(tag);
50894             
50895         }, this);
50896         
50897         
50898         Roo.each(Roo.HtmlEditorCore.cblack, function(tag) {
50899             if (w.indexOf(tag) > -1) {
50900                 return;
50901             }
50902             this.cblack.push(tag);
50903             
50904         }, this);
50905         
50906         Roo.each(b, function(tag) {
50907             if (w.indexOf(tag) > -1) {
50908                 return;
50909             }
50910             if (this.cblack.indexOf(tag) > -1) {
50911                 return;
50912             }
50913             this.cblack.push(tag);
50914             
50915         }, this);
50916     },
50917     
50918     setStylesheets : function(stylesheets)
50919     {
50920         if(typeof(stylesheets) == 'string'){
50921             Roo.get(this.iframe.contentDocument.head).createChild({
50922                 tag : 'link',
50923                 rel : 'stylesheet',
50924                 type : 'text/css',
50925                 href : stylesheets
50926             });
50927             
50928             return;
50929         }
50930         var _this = this;
50931      
50932         Roo.each(stylesheets, function(s) {
50933             if(!s.length){
50934                 return;
50935             }
50936             
50937             Roo.get(_this.iframe.contentDocument.head).createChild({
50938                 tag : 'link',
50939                 rel : 'stylesheet',
50940                 type : 'text/css',
50941                 href : s
50942             });
50943         });
50944
50945         
50946     },
50947     
50948     
50949     updateLanguage : function()
50950     {
50951         if (!this.iframe || !this.iframe.contentDocument) {
50952             return;
50953         }
50954         Roo.get(this.iframe.contentDocument.body).attr("lang", this.language);
50955     },
50956     
50957     
50958     removeStylesheets : function()
50959     {
50960         var _this = this;
50961         
50962         Roo.each(Roo.get(_this.iframe.contentDocument.head).select('link[rel=stylesheet]', true).elements, function(s){
50963             s.remove();
50964         });
50965     },
50966     
50967     setStyle : function(style)
50968     {
50969         Roo.get(this.iframe.contentDocument.head).createChild({
50970             tag : 'style',
50971             type : 'text/css',
50972             html : style
50973         });
50974
50975         return;
50976     }
50977     
50978     // hide stuff that is not compatible
50979     /**
50980      * @event blur
50981      * @hide
50982      */
50983     /**
50984      * @event change
50985      * @hide
50986      */
50987     /**
50988      * @event focus
50989      * @hide
50990      */
50991     /**
50992      * @event specialkey
50993      * @hide
50994      */
50995     /**
50996      * @cfg {String} fieldClass @hide
50997      */
50998     /**
50999      * @cfg {String} focusClass @hide
51000      */
51001     /**
51002      * @cfg {String} autoCreate @hide
51003      */
51004     /**
51005      * @cfg {String} inputType @hide
51006      */
51007     /**
51008      * @cfg {String} invalidClass @hide
51009      */
51010     /**
51011      * @cfg {String} invalidText @hide
51012      */
51013     /**
51014      * @cfg {String} msgFx @hide
51015      */
51016     /**
51017      * @cfg {String} validateOnBlur @hide
51018      */
51019 });
51020
51021 Roo.HtmlEditorCore.white = [
51022         'AREA', 'BR', 'IMG', 'INPUT', 'HR', 'WBR',
51023         
51024        'ADDRESS', 'BLOCKQUOTE', 'CENTER', 'DD',      'DIR',       'DIV', 
51025        'DL',      'DT',         'H1',     'H2',      'H3',        'H4', 
51026        'H5',      'H6',         'HR',     'ISINDEX', 'LISTING',   'MARQUEE', 
51027        'MENU',    'MULTICOL',   'OL',     'P',       'PLAINTEXT', 'PRE', 
51028        'TABLE',   'UL',         'XMP', 
51029        
51030        'CAPTION', 'COL', 'COLGROUP', 'TBODY', 'TD', 'TFOOT', 'TH', 
51031       'THEAD',   'TR', 
51032      
51033       'DIR', 'MENU', 'OL', 'UL', 'DL',
51034        
51035       'EMBED',  'OBJECT'
51036 ];
51037
51038
51039 Roo.HtmlEditorCore.black = [
51040     //    'embed',  'object', // enable - backend responsiblity to clean thiese
51041         'APPLET', // 
51042         'BASE',   'BASEFONT', 'BGSOUND', 'BLINK',  'BODY', 
51043         'FRAME',  'FRAMESET', 'HEAD',    'HTML',   'ILAYER', 
51044         'IFRAME', 'LAYER',  'LINK',     'META',    'OBJECT',   
51045         'SCRIPT', 'STYLE' ,'TITLE',  'XML',
51046         //'FONT' // CLEAN LATER..
51047         'COLGROUP', 'COL'   // messy tables.
51048         
51049         
51050 ];
51051 Roo.HtmlEditorCore.clean = [ // ?? needed???
51052      'SCRIPT', 'STYLE', 'TITLE', 'XML'
51053 ];
51054 Roo.HtmlEditorCore.tag_remove = [
51055     'FONT', 'TBODY'  
51056 ];
51057 // attributes..
51058
51059 Roo.HtmlEditorCore.ablack = [
51060     'on'
51061 ];
51062     
51063 Roo.HtmlEditorCore.aclean = [ 
51064     'action', 'background', 'codebase', 'dynsrc', 'href', 'lowsrc' 
51065 ];
51066
51067 // protocols..
51068 Roo.HtmlEditorCore.pwhite= [
51069         'http',  'https',  'mailto'
51070 ];
51071
51072 // white listed style attributes.
51073 Roo.HtmlEditorCore.cwhite= [
51074       //  'text-align', /// default is to allow most things..
51075       
51076          
51077 //        'font-size'//??
51078 ];
51079
51080 // black listed style attributes.
51081 Roo.HtmlEditorCore.cblack= [
51082       //  'font-size' -- this can be set by the project 
51083 ];
51084
51085
51086
51087
51088     //<script type="text/javascript">
51089
51090 /*
51091  * Ext JS Library 1.1.1
51092  * Copyright(c) 2006-2007, Ext JS, LLC.
51093  * Licence LGPL
51094  * 
51095  */
51096  
51097  
51098 Roo.form.HtmlEditor = function(config){
51099     
51100     
51101     
51102     Roo.form.HtmlEditor.superclass.constructor.call(this, config);
51103     
51104     if (!this.toolbars) {
51105         this.toolbars = [];
51106     }
51107     this.editorcore = new Roo.HtmlEditorCore(Roo.apply({ owner : this} , config));
51108     
51109     
51110 };
51111
51112 /**
51113  * @class Roo.form.HtmlEditor
51114  * @extends Roo.form.Field
51115  * Provides a lightweight HTML Editor component.
51116  *
51117  * This has been tested on Fireforx / Chrome.. IE may not be so great..
51118  * 
51119  * <br><br><b>Note: The focus/blur and validation marking functionality inherited from Ext.form.Field is NOT
51120  * supported by this editor.</b><br/><br/>
51121  * An Editor is a sensitive component that can't be used in all spots standard fields can be used. Putting an Editor within
51122  * any element that has display set to 'none' can cause problems in Safari and Firefox.<br/><br/>
51123  */
51124 Roo.extend(Roo.form.HtmlEditor, Roo.form.Field, {
51125     /**
51126      * @cfg {Boolean} clearUp
51127      */
51128     clearUp : true,
51129       /**
51130      * @cfg {Array} toolbars Array of toolbars. - defaults to just the Standard one
51131      */
51132     toolbars : false,
51133    
51134      /**
51135      * @cfg {String} resizable  's' or 'se' or 'e' - wrapps the element in a
51136      *                        Roo.resizable.
51137      */
51138     resizable : false,
51139      /**
51140      * @cfg {Number} height (in pixels)
51141      */   
51142     height: 300,
51143    /**
51144      * @cfg {Number} width (in pixels)
51145      */   
51146     width: 500,
51147     
51148     /**
51149      * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets - this is usally a good idea  rootURL + '/roojs1/css/undoreset.css',   .
51150      * 
51151      */
51152     stylesheets: false,
51153     
51154     
51155      /**
51156      * @cfg {Array} blacklist of css styles style attributes (blacklist overrides whitelist)
51157      * 
51158      */
51159     cblack: false,
51160     /**
51161      * @cfg {Array} whitelist of css styles style attributes (blacklist overrides whitelist)
51162      * 
51163      */
51164     cwhite: false,
51165     
51166      /**
51167      * @cfg {Array} blacklist of html tags - in addition to standard blacklist.
51168      * 
51169      */
51170     black: false,
51171     /**
51172      * @cfg {Array} whitelist of html tags - in addition to statndard whitelist
51173      * 
51174      */
51175     white: false,
51176     /**
51177      * @cfg {boolean} allowComments - default false - allow comments in HTML source - by default they are stripped - if you are editing email you may need this.
51178      */
51179     allowComments: false,
51180     /**
51181      * @cfg {boolean} enableBlocks - default true - if the block editor (table and figure should be enabled)
51182      */
51183     enableBlocks : true,
51184     
51185     /**
51186      * @cfg {boolean} autoClean - default true - loading and saving will remove quite a bit of formating,
51187      *         if you are doing an email editor, this probably needs disabling, it's designed
51188      */
51189     autoClean: true,
51190     /**
51191      * @cfg {string} bodyCls default '' default classes to add to body of editable area - usually undoreset is a good start..
51192      */
51193     bodyCls : '',
51194     /**
51195      * @cfg {String} language default en - language of text (usefull for rtl languages)
51196      * 
51197      */
51198     language: 'en',
51199     
51200      
51201     // id of frame..
51202     frameId: false,
51203     
51204     // private properties
51205     validationEvent : false,
51206     deferHeight: true,
51207     initialized : false,
51208     activated : false,
51209     
51210     onFocus : Roo.emptyFn,
51211     iframePad:3,
51212     hideMode:'offsets',
51213     
51214     actionMode : 'container', // defaults to hiding it...
51215     
51216     defaultAutoCreate : { // modified by initCompnoent..
51217         tag: "textarea",
51218         style:"width:500px;height:300px;",
51219         autocomplete: "new-password"
51220     },
51221
51222     // private
51223     initComponent : function(){
51224         this.addEvents({
51225             /**
51226              * @event initialize
51227              * Fires when the editor is fully initialized (including the iframe)
51228              * @param {HtmlEditor} this
51229              */
51230             initialize: true,
51231             /**
51232              * @event activate
51233              * Fires when the editor is first receives the focus. Any insertion must wait
51234              * until after this event.
51235              * @param {HtmlEditor} this
51236              */
51237             activate: true,
51238              /**
51239              * @event beforesync
51240              * Fires before the textarea is updated with content from the editor iframe. Return false
51241              * to cancel the sync.
51242              * @param {HtmlEditor} this
51243              * @param {String} html
51244              */
51245             beforesync: true,
51246              /**
51247              * @event beforepush
51248              * Fires before the iframe editor is updated with content from the textarea. Return false
51249              * to cancel the push.
51250              * @param {HtmlEditor} this
51251              * @param {String} html
51252              */
51253             beforepush: true,
51254              /**
51255              * @event sync
51256              * Fires when the textarea is updated with content from the editor iframe.
51257              * @param {HtmlEditor} this
51258              * @param {String} html
51259              */
51260             sync: true,
51261              /**
51262              * @event push
51263              * Fires when the iframe editor is updated with content from the textarea.
51264              * @param {HtmlEditor} this
51265              * @param {String} html
51266              */
51267             push: true,
51268              /**
51269              * @event editmodechange
51270              * Fires when the editor switches edit modes
51271              * @param {HtmlEditor} this
51272              * @param {Boolean} sourceEdit True if source edit, false if standard editing.
51273              */
51274             editmodechange: true,
51275             /**
51276              * @event editorevent
51277              * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
51278              * @param {HtmlEditor} this
51279              */
51280             editorevent: true,
51281             /**
51282              * @event firstfocus
51283              * Fires when on first focus - needed by toolbars..
51284              * @param {HtmlEditor} this
51285              */
51286             firstfocus: true,
51287             /**
51288              * @event autosave
51289              * Auto save the htmlEditor value as a file into Events
51290              * @param {HtmlEditor} this
51291              */
51292             autosave: true,
51293             /**
51294              * @event savedpreview
51295              * preview the saved version of htmlEditor
51296              * @param {HtmlEditor} this
51297              */
51298             savedpreview: true,
51299             
51300             /**
51301             * @event stylesheetsclick
51302             * Fires when press the Sytlesheets button
51303             * @param {Roo.HtmlEditorCore} this
51304             */
51305             stylesheetsclick: true,
51306             /**
51307             * @event paste
51308             * Fires when press user pastes into the editor
51309             * @param {Roo.HtmlEditorCore} this
51310             */
51311             paste: true 
51312         });
51313         this.defaultAutoCreate =  {
51314             tag: "textarea",
51315             style:'width: ' + this.width + 'px;height: ' + this.height + 'px;',
51316             autocomplete: "new-password"
51317         };
51318     },
51319
51320     /**
51321      * Protected method that will not generally be called directly. It
51322      * is called when the editor creates its toolbar. Override this method if you need to
51323      * add custom toolbar buttons.
51324      * @param {HtmlEditor} editor
51325      */
51326     createToolbar : function(editor){
51327         Roo.log("create toolbars");
51328         if (!editor.toolbars || !editor.toolbars.length) {
51329             editor.toolbars = [ new Roo.form.HtmlEditor.ToolbarStandard() ]; // can be empty?
51330         }
51331         
51332         for (var i =0 ; i < editor.toolbars.length;i++) {
51333             editor.toolbars[i] = Roo.factory(
51334                     typeof(editor.toolbars[i]) == 'string' ?
51335                         { xtype: editor.toolbars[i]} : editor.toolbars[i],
51336                 Roo.form.HtmlEditor);
51337             editor.toolbars[i].init(editor);
51338         }
51339          
51340         
51341     },
51342     /**
51343      * get the Context selected node
51344      * @returns {DomElement|boolean} selected node if active or false if none
51345      * 
51346      */
51347     getSelectedNode : function()
51348     {
51349         if (this.toolbars.length < 2 || !this.toolbars[1].tb) {
51350             return false;
51351         }
51352         return this.toolbars[1].tb.selectedNode;
51353     
51354     },
51355     // private
51356     onRender : function(ct, position)
51357     {
51358         var _t = this;
51359         Roo.form.HtmlEditor.superclass.onRender.call(this, ct, position);
51360         
51361         this.wrap = this.el.wrap({
51362             cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
51363         });
51364         
51365         this.editorcore.onRender(ct, position);
51366          
51367         if (this.resizable) {
51368             this.resizeEl = new Roo.Resizable(this.wrap, {
51369                 pinned : true,
51370                 wrap: true,
51371                 dynamic : true,
51372                 minHeight : this.height,
51373                 height: this.height,
51374                 handles : this.resizable,
51375                 width: this.width,
51376                 listeners : {
51377                     resize : function(r, w, h) {
51378                         _t.onResize(w,h); // -something
51379                     }
51380                 }
51381             });
51382             
51383         }
51384         this.createToolbar(this);
51385        
51386         
51387         if(!this.width){
51388             this.setSize(this.wrap.getSize());
51389         }
51390         if (this.resizeEl) {
51391             this.resizeEl.resizeTo.defer(100, this.resizeEl,[ this.width,this.height ] );
51392             // should trigger onReize..
51393         }
51394         
51395         this.keyNav = new Roo.KeyNav(this.el, {
51396             
51397             "tab" : function(e){
51398                 e.preventDefault();
51399                 
51400                 var value = this.getValue();
51401                 
51402                 var start = this.el.dom.selectionStart;
51403                 var end = this.el.dom.selectionEnd;
51404                 
51405                 if(!e.shiftKey){
51406                     
51407                     this.setValue(value.substring(0, start) + "\t" + value.substring(end));
51408                     this.el.dom.setSelectionRange(end + 1, end + 1);
51409                     return;
51410                 }
51411                 
51412                 var f = value.substring(0, start).split("\t");
51413                 
51414                 if(f.pop().length != 0){
51415                     return;
51416                 }
51417                 
51418                 this.setValue(f.join("\t") + value.substring(end));
51419                 this.el.dom.setSelectionRange(start - 1, start - 1);
51420                 
51421             },
51422             
51423             "home" : function(e){
51424                 e.preventDefault();
51425                 
51426                 var curr = this.el.dom.selectionStart;
51427                 var lines = this.getValue().split("\n");
51428                 
51429                 if(!lines.length){
51430                     return;
51431                 }
51432                 
51433                 if(e.ctrlKey){
51434                     this.el.dom.setSelectionRange(0, 0);
51435                     return;
51436                 }
51437                 
51438                 var pos = 0;
51439                 
51440                 for (var i = 0; i < lines.length;i++) {
51441                     pos += lines[i].length;
51442                     
51443                     if(i != 0){
51444                         pos += 1;
51445                     }
51446                     
51447                     if(pos < curr){
51448                         continue;
51449                     }
51450                     
51451                     pos -= lines[i].length;
51452                     
51453                     break;
51454                 }
51455                 
51456                 if(!e.shiftKey){
51457                     this.el.dom.setSelectionRange(pos, pos);
51458                     return;
51459                 }
51460                 
51461                 this.el.dom.selectionStart = pos;
51462                 this.el.dom.selectionEnd = curr;
51463             },
51464             
51465             "end" : function(e){
51466                 e.preventDefault();
51467                 
51468                 var curr = this.el.dom.selectionStart;
51469                 var lines = this.getValue().split("\n");
51470                 
51471                 if(!lines.length){
51472                     return;
51473                 }
51474                 
51475                 if(e.ctrlKey){
51476                     this.el.dom.setSelectionRange(this.getValue().length, this.getValue().length);
51477                     return;
51478                 }
51479                 
51480                 var pos = 0;
51481                 
51482                 for (var i = 0; i < lines.length;i++) {
51483                     
51484                     pos += lines[i].length;
51485                     
51486                     if(i != 0){
51487                         pos += 1;
51488                     }
51489                     
51490                     if(pos < curr){
51491                         continue;
51492                     }
51493                     
51494                     break;
51495                 }
51496                 
51497                 if(!e.shiftKey){
51498                     this.el.dom.setSelectionRange(pos, pos);
51499                     return;
51500                 }
51501                 
51502                 this.el.dom.selectionStart = curr;
51503                 this.el.dom.selectionEnd = pos;
51504             },
51505
51506             scope : this,
51507
51508             doRelay : function(foo, bar, hname){
51509                 return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
51510             },
51511
51512             forceKeyDown: true
51513         });
51514         
51515 //        if(this.autosave && this.w){
51516 //            this.autoSaveFn = setInterval(this.autosave, 1000);
51517 //        }
51518     },
51519
51520     // private
51521     onResize : function(w, h)
51522     {
51523         Roo.form.HtmlEditor.superclass.onResize.apply(this, arguments);
51524         var ew = false;
51525         var eh = false;
51526         
51527         if(this.el ){
51528             if(typeof w == 'number'){
51529                 var aw = w - this.wrap.getFrameWidth('lr');
51530                 this.el.setWidth(this.adjustWidth('textarea', aw));
51531                 ew = aw;
51532             }
51533             if(typeof h == 'number'){
51534                 var tbh = 0;
51535                 for (var i =0; i < this.toolbars.length;i++) {
51536                     // fixme - ask toolbars for heights?
51537                     tbh += this.toolbars[i].tb.el.getHeight();
51538                     if (this.toolbars[i].footer) {
51539                         tbh += this.toolbars[i].footer.el.getHeight();
51540                     }
51541                 }
51542                 
51543                 
51544                 
51545                 
51546                 var ah = h - this.wrap.getFrameWidth('tb') - tbh;// this.tb.el.getHeight();
51547                 ah -= 5; // knock a few pixes off for look..
51548 //                Roo.log(ah);
51549                 this.el.setHeight(this.adjustWidth('textarea', ah));
51550                 var eh = ah;
51551             }
51552         }
51553         Roo.log('onResize:' + [w,h,ew,eh].join(',') );
51554         this.editorcore.onResize(ew,eh);
51555         
51556     },
51557
51558     /**
51559      * Toggles the editor between standard and source edit mode.
51560      * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
51561      */
51562     toggleSourceEdit : function(sourceEditMode)
51563     {
51564         this.editorcore.toggleSourceEdit(sourceEditMode);
51565         
51566         if(this.editorcore.sourceEditMode){
51567             Roo.log('editor - showing textarea');
51568             
51569 //            Roo.log('in');
51570 //            Roo.log(this.syncValue());
51571             this.editorcore.syncValue();
51572             this.el.removeClass('x-hidden');
51573             this.el.dom.removeAttribute('tabIndex');
51574             this.el.focus();
51575             this.el.dom.scrollTop = 0;
51576             
51577             
51578             for (var i = 0; i < this.toolbars.length; i++) {
51579                 if(this.toolbars[i] instanceof Roo.form.HtmlEditor.ToolbarContext){
51580                     this.toolbars[i].tb.hide();
51581                     this.toolbars[i].footer.hide();
51582                 }
51583             }
51584             
51585         }else{
51586             Roo.log('editor - hiding textarea');
51587 //            Roo.log('out')
51588 //            Roo.log(this.pushValue()); 
51589             this.editorcore.pushValue();
51590             
51591             this.el.addClass('x-hidden');
51592             this.el.dom.setAttribute('tabIndex', -1);
51593             
51594             for (var i = 0; i < this.toolbars.length; i++) {
51595                 if(this.toolbars[i] instanceof Roo.form.HtmlEditor.ToolbarContext){
51596                     this.toolbars[i].tb.show();
51597                     this.toolbars[i].footer.show();
51598                 }
51599             }
51600             
51601             //this.deferFocus();
51602         }
51603         
51604         this.setSize(this.wrap.getSize());
51605         this.onResize(this.wrap.getSize().width, this.wrap.getSize().height);
51606         
51607         this.fireEvent('editmodechange', this, this.editorcore.sourceEditMode);
51608     },
51609  
51610     // private (for BoxComponent)
51611     adjustSize : Roo.BoxComponent.prototype.adjustSize,
51612
51613     // private (for BoxComponent)
51614     getResizeEl : function(){
51615         return this.wrap;
51616     },
51617
51618     // private (for BoxComponent)
51619     getPositionEl : function(){
51620         return this.wrap;
51621     },
51622
51623     // private
51624     initEvents : function(){
51625         this.originalValue = this.getValue();
51626     },
51627
51628     /**
51629      * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
51630      * @method
51631      */
51632     markInvalid : Roo.emptyFn,
51633     /**
51634      * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
51635      * @method
51636      */
51637     clearInvalid : Roo.emptyFn,
51638
51639     setValue : function(v){
51640         Roo.form.HtmlEditor.superclass.setValue.call(this, v);
51641         this.editorcore.pushValue();
51642     },
51643
51644     /**
51645      * update the language in the body - really done by core
51646      * @param {String} language - eg. en / ar / zh-CN etc..
51647      */
51648     updateLanguage : function(lang)
51649     {
51650         this.language = lang;
51651         this.editorcore.language = lang;
51652         this.editorcore.updateLanguage();
51653      
51654     },
51655     // private
51656     deferFocus : function(){
51657         this.focus.defer(10, this);
51658     },
51659
51660     // doc'ed in Field
51661     focus : function(){
51662         this.editorcore.focus();
51663         
51664     },
51665       
51666
51667     // private
51668     onDestroy : function(){
51669         
51670         
51671         
51672         if(this.rendered){
51673             
51674             for (var i =0; i < this.toolbars.length;i++) {
51675                 // fixme - ask toolbars for heights?
51676                 this.toolbars[i].onDestroy();
51677             }
51678             
51679             this.wrap.dom.innerHTML = '';
51680             this.wrap.remove();
51681         }
51682     },
51683
51684     // private
51685     onFirstFocus : function(){
51686         //Roo.log("onFirstFocus");
51687         this.editorcore.onFirstFocus();
51688          for (var i =0; i < this.toolbars.length;i++) {
51689             this.toolbars[i].onFirstFocus();
51690         }
51691         
51692     },
51693     
51694     // private
51695     syncValue : function()
51696     {
51697         this.editorcore.syncValue();
51698     },
51699     
51700     pushValue : function()
51701     {
51702         this.editorcore.pushValue();
51703     },
51704     
51705     setStylesheets : function(stylesheets)
51706     {
51707         this.editorcore.setStylesheets(stylesheets);
51708     },
51709     
51710     removeStylesheets : function()
51711     {
51712         this.editorcore.removeStylesheets();
51713     }
51714      
51715     
51716     // hide stuff that is not compatible
51717     /**
51718      * @event blur
51719      * @hide
51720      */
51721     /**
51722      * @event change
51723      * @hide
51724      */
51725     /**
51726      * @event focus
51727      * @hide
51728      */
51729     /**
51730      * @event specialkey
51731      * @hide
51732      */
51733     /**
51734      * @cfg {String} fieldClass @hide
51735      */
51736     /**
51737      * @cfg {String} focusClass @hide
51738      */
51739     /**
51740      * @cfg {String} autoCreate @hide
51741      */
51742     /**
51743      * @cfg {String} inputType @hide
51744      */
51745     /**
51746      * @cfg {String} invalidClass @hide
51747      */
51748     /**
51749      * @cfg {String} invalidText @hide
51750      */
51751     /**
51752      * @cfg {String} msgFx @hide
51753      */
51754     /**
51755      * @cfg {String} validateOnBlur @hide
51756      */
51757 });
51758  
51759     /*
51760  * Based on
51761  * Ext JS Library 1.1.1
51762  * Copyright(c) 2006-2007, Ext JS, LLC.
51763  *  
51764  
51765  */
51766
51767 /**
51768  * @class Roo.form.HtmlEditor.ToolbarStandard
51769  * Basic Toolbar
51770
51771  * Usage:
51772  *
51773  new Roo.form.HtmlEditor({
51774     ....
51775     toolbars : [
51776         new Roo.form.HtmlEditorToolbar1({
51777             disable : { fonts: 1 , format: 1, ..., ... , ...],
51778             btns : [ .... ]
51779         })
51780     }
51781      
51782  * 
51783  * @cfg {Object} disable List of elements to disable..
51784  * @cfg {Roo.Toolbar.Item|Roo.Toolbar.Button|Roo.Toolbar.SplitButton|Roo.form.Field} btns[] List of additional buttons.
51785  * 
51786  * 
51787  * NEEDS Extra CSS? 
51788  * .x-html-editor-tb .x-edit-none .x-btn-text { background: none; }
51789  */
51790  
51791 Roo.form.HtmlEditor.ToolbarStandard = function(config)
51792 {
51793     
51794     Roo.apply(this, config);
51795     
51796     // default disabled, based on 'good practice'..
51797     this.disable = this.disable || {};
51798     Roo.applyIf(this.disable, {
51799         fontSize : true,
51800         colors : true,
51801         specialElements : true
51802     });
51803     
51804     
51805     //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
51806     // dont call parent... till later.
51807 }
51808
51809 Roo.form.HtmlEditor.ToolbarStandard.prototype = {
51810     
51811     tb: false,
51812     
51813     rendered: false,
51814     
51815     editor : false,
51816     editorcore : false,
51817     /**
51818      * @cfg {Object} disable  List of toolbar elements to disable
51819          
51820      */
51821     disable : false,
51822     
51823     
51824      /**
51825      * @cfg {String} createLinkText The default text for the create link prompt
51826      */
51827     createLinkText : 'Please enter the URL for the link:',
51828     /**
51829      * @cfg {String} defaultLinkValue The default value for the create link prompt (defaults to http:/ /)
51830      */
51831     defaultLinkValue : 'http:/'+'/',
51832    
51833     
51834       /**
51835      * @cfg {Array} fontFamilies An array of available font families
51836      */
51837     fontFamilies : [
51838         'Arial',
51839         'Courier New',
51840         'Tahoma',
51841         'Times New Roman',
51842         'Verdana'
51843     ],
51844     
51845     specialChars : [
51846            "&#169;",
51847           "&#174;",     
51848           "&#8482;",    
51849           "&#163;" ,    
51850          // "&#8212;",    
51851           "&#8230;",    
51852           "&#247;" ,    
51853         //  "&#225;" ,     ?? a acute?
51854            "&#8364;"    , //Euro
51855        //   "&#8220;"    ,
51856         //  "&#8221;"    ,
51857         //  "&#8226;"    ,
51858           "&#176;"  //   , // degrees
51859
51860          // "&#233;"     , // e ecute
51861          // "&#250;"     , // u ecute?
51862     ],
51863     
51864     specialElements : [
51865         {
51866             text: "Insert Table",
51867             xtype: 'MenuItem',
51868             xns : Roo.Menu,
51869             ihtml :  '<table><tr><td>Cell</td></tr></table>' 
51870                 
51871         },
51872         {    
51873             text: "Insert Image",
51874             xtype: 'MenuItem',
51875             xns : Roo.Menu,
51876             ihtml : '<img src="about:blank"/>'
51877             
51878         }
51879         
51880          
51881     ],
51882     
51883     
51884     inputElements : [ 
51885             "form", "input:text", "input:hidden", "input:checkbox", "input:radio", "input:password", 
51886             "input:submit", "input:button", "select", "textarea", "label" ],
51887     formats : [
51888         ["p"] ,  
51889         ["h1"],["h2"],["h3"],["h4"],["h5"],["h6"], 
51890         ["pre"],[ "code"], 
51891         ["abbr"],[ "acronym"],[ "address"],[ "cite"],[ "samp"],[ "var"],
51892         ['div'],['span'],
51893         ['sup'],['sub']
51894     ],
51895     
51896     cleanStyles : [
51897         "font-size"
51898     ],
51899      /**
51900      * @cfg {String} defaultFont default font to use.
51901      */
51902     defaultFont: 'tahoma',
51903    
51904     fontSelect : false,
51905     
51906     
51907     formatCombo : false,
51908     
51909     init : function(editor)
51910     {
51911         this.editor = editor;
51912         this.editorcore = editor.editorcore ? editor.editorcore : editor;
51913         var editorcore = this.editorcore;
51914         
51915         var _t = this;
51916         
51917         var fid = editorcore.frameId;
51918         var etb = this;
51919         function btn(id, toggle, handler){
51920             var xid = fid + '-'+ id ;
51921             return {
51922                 id : xid,
51923                 cmd : id,
51924                 cls : 'x-btn-icon x-edit-'+id,
51925                 enableToggle:toggle !== false,
51926                 scope: _t, // was editor...
51927                 handler:handler||_t.relayBtnCmd,
51928                 clickEvent:'mousedown',
51929                 tooltip: etb.buttonTips[id] || undefined, ///tips ???
51930                 tabIndex:-1
51931             };
51932         }
51933         
51934         
51935         
51936         var tb = new Roo.Toolbar(editor.wrap.dom.firstChild);
51937         this.tb = tb;
51938          // stop form submits
51939         tb.el.on('click', function(e){
51940             e.preventDefault(); // what does this do?
51941         });
51942
51943         if(!this.disable.font) { // && !Roo.isSafari){
51944             /* why no safari for fonts 
51945             editor.fontSelect = tb.el.createChild({
51946                 tag:'select',
51947                 tabIndex: -1,
51948                 cls:'x-font-select',
51949                 html: this.createFontOptions()
51950             });
51951             
51952             editor.fontSelect.on('change', function(){
51953                 var font = editor.fontSelect.dom.value;
51954                 editor.relayCmd('fontname', font);
51955                 editor.deferFocus();
51956             }, editor);
51957             
51958             tb.add(
51959                 editor.fontSelect.dom,
51960                 '-'
51961             );
51962             */
51963             
51964         };
51965         if(!this.disable.formats){
51966             this.formatCombo = new Roo.form.ComboBox({
51967                 store: new Roo.data.SimpleStore({
51968                     id : 'tag',
51969                     fields: ['tag'],
51970                     data : this.formats // from states.js
51971                 }),
51972                 blockFocus : true,
51973                 name : '',
51974                 //autoCreate : {tag: "div",  size: "20"},
51975                 displayField:'tag',
51976                 typeAhead: false,
51977                 mode: 'local',
51978                 editable : false,
51979                 triggerAction: 'all',
51980                 emptyText:'Add tag',
51981                 selectOnFocus:true,
51982                 width:135,
51983                 listeners : {
51984                     'select': function(c, r, i) {
51985                         editorcore.insertTag(r.get('tag'));
51986                         editor.focus();
51987                     }
51988                 }
51989
51990             });
51991             tb.addField(this.formatCombo);
51992             
51993         }
51994         
51995         if(!this.disable.format){
51996             tb.add(
51997                 btn('bold'),
51998                 btn('italic'),
51999                 btn('underline'),
52000                 btn('strikethrough')
52001             );
52002         };
52003         if(!this.disable.fontSize){
52004             tb.add(
52005                 '-',
52006                 
52007                 
52008                 btn('increasefontsize', false, editorcore.adjustFont),
52009                 btn('decreasefontsize', false, editorcore.adjustFont)
52010             );
52011         };
52012         
52013         
52014         if(!this.disable.colors){
52015             tb.add(
52016                 '-', {
52017                     id:editorcore.frameId +'-forecolor',
52018                     cls:'x-btn-icon x-edit-forecolor',
52019                     clickEvent:'mousedown',
52020                     tooltip: this.buttonTips['forecolor'] || undefined,
52021                     tabIndex:-1,
52022                     menu : new Roo.menu.ColorMenu({
52023                         allowReselect: true,
52024                         focus: Roo.emptyFn,
52025                         value:'000000',
52026                         plain:true,
52027                         selectHandler: function(cp, color){
52028                             editorcore.execCmd('forecolor', Roo.isSafari || Roo.isIE ? '#'+color : color);
52029                             editor.deferFocus();
52030                         },
52031                         scope: editorcore,
52032                         clickEvent:'mousedown'
52033                     })
52034                 }, {
52035                     id:editorcore.frameId +'backcolor',
52036                     cls:'x-btn-icon x-edit-backcolor',
52037                     clickEvent:'mousedown',
52038                     tooltip: this.buttonTips['backcolor'] || undefined,
52039                     tabIndex:-1,
52040                     menu : new Roo.menu.ColorMenu({
52041                         focus: Roo.emptyFn,
52042                         value:'FFFFFF',
52043                         plain:true,
52044                         allowReselect: true,
52045                         selectHandler: function(cp, color){
52046                             if(Roo.isGecko){
52047                                 editorcore.execCmd('useCSS', false);
52048                                 editorcore.execCmd('hilitecolor', color);
52049                                 editorcore.execCmd('useCSS', true);
52050                                 editor.deferFocus();
52051                             }else{
52052                                 editorcore.execCmd(Roo.isOpera ? 'hilitecolor' : 'backcolor', 
52053                                     Roo.isSafari || Roo.isIE ? '#'+color : color);
52054                                 editor.deferFocus();
52055                             }
52056                         },
52057                         scope:editorcore,
52058                         clickEvent:'mousedown'
52059                     })
52060                 }
52061             );
52062         };
52063         // now add all the items...
52064         
52065
52066         if(!this.disable.alignments){
52067             tb.add(
52068                 '-',
52069                 btn('justifyleft'),
52070                 btn('justifycenter'),
52071                 btn('justifyright')
52072             );
52073         };
52074
52075         //if(!Roo.isSafari){
52076             if(!this.disable.links){
52077                 tb.add(
52078                     '-',
52079                     btn('createlink', false, this.createLink)    /// MOVE TO HERE?!!?!?!?!
52080                 );
52081             };
52082
52083             if(!this.disable.lists){
52084                 tb.add(
52085                     '-',
52086                     btn('insertorderedlist'),
52087                     btn('insertunorderedlist')
52088                 );
52089             }
52090             if(!this.disable.sourceEdit){
52091                 tb.add(
52092                     '-',
52093                     btn('sourceedit', true, function(btn){
52094                         this.toggleSourceEdit(btn.pressed);
52095                     })
52096                 );
52097             }
52098         //}
52099         
52100         var smenu = { };
52101         // special menu.. - needs to be tidied up..
52102         if (!this.disable.special) {
52103             smenu = {
52104                 text: "&#169;",
52105                 cls: 'x-edit-none',
52106                 
52107                 menu : {
52108                     items : []
52109                 }
52110             };
52111             for (var i =0; i < this.specialChars.length; i++) {
52112                 smenu.menu.items.push({
52113                     
52114                     html: this.specialChars[i],
52115                     handler: function(a,b) {
52116                         editorcore.insertAtCursor(String.fromCharCode(a.html.replace('&#','').replace(';', '')));
52117                         //editor.insertAtCursor(a.html);
52118                         
52119                     },
52120                     tabIndex:-1
52121                 });
52122             }
52123             
52124             
52125             tb.add(smenu);
52126             
52127             
52128         }
52129         
52130         var cmenu = { };
52131         if (!this.disable.cleanStyles) {
52132             cmenu = {
52133                 cls: 'x-btn-icon x-btn-clear',
52134                 
52135                 menu : {
52136                     items : []
52137                 }
52138             };
52139             for (var i =0; i < this.cleanStyles.length; i++) {
52140                 cmenu.menu.items.push({
52141                     actiontype : this.cleanStyles[i],
52142                     html: 'Remove ' + this.cleanStyles[i],
52143                     handler: function(a,b) {
52144 //                        Roo.log(a);
52145 //                        Roo.log(b);
52146                         var c = Roo.get(editorcore.doc.body);
52147                         c.select('[style]').each(function(s) {
52148                             s.dom.style.removeProperty(a.actiontype);
52149                         });
52150                         editorcore.syncValue();
52151                     },
52152                     tabIndex:-1
52153                 });
52154             }
52155             cmenu.menu.items.push({
52156                 actiontype : 'tablewidths',
52157                 html: 'Remove Table Widths',
52158                 handler: function(a,b) {
52159                     editorcore.cleanTableWidths();
52160                     editorcore.syncValue();
52161                 },
52162                 tabIndex:-1
52163             });
52164             cmenu.menu.items.push({
52165                 actiontype : 'word',
52166                 html: 'Remove MS Word Formating',
52167                 handler: function(a,b) {
52168                     editorcore.cleanWord();
52169                     editorcore.syncValue();
52170                 },
52171                 tabIndex:-1
52172             });
52173             
52174             cmenu.menu.items.push({
52175                 actiontype : 'all',
52176                 html: 'Remove All Styles',
52177                 handler: function(a,b) {
52178                     
52179                     var c = Roo.get(editorcore.doc.body);
52180                     c.select('[style]').each(function(s) {
52181                         s.dom.removeAttribute('style');
52182                     });
52183                     editorcore.syncValue();
52184                 },
52185                 tabIndex:-1
52186             });
52187             
52188             cmenu.menu.items.push({
52189                 actiontype : 'all',
52190                 html: 'Remove All CSS Classes',
52191                 handler: function(a,b) {
52192                     
52193                     var c = Roo.get(editorcore.doc.body);
52194                     c.select('[class]').each(function(s) {
52195                         s.dom.removeAttribute('class');
52196                     });
52197                     editorcore.cleanWord();
52198                     editorcore.syncValue();
52199                 },
52200                 tabIndex:-1
52201             });
52202             
52203              cmenu.menu.items.push({
52204                 actiontype : 'tidy',
52205                 html: 'Tidy HTML Source',
52206                 handler: function(a,b) {
52207                     new Roo.htmleditor.Tidy(editorcore.doc.body);
52208                     editorcore.syncValue();
52209                 },
52210                 tabIndex:-1
52211             });
52212             
52213             
52214             tb.add(cmenu);
52215         }
52216          
52217         if (!this.disable.specialElements) {
52218             var semenu = {
52219                 text: "Other;",
52220                 cls: 'x-edit-none',
52221                 menu : {
52222                     items : []
52223                 }
52224             };
52225             for (var i =0; i < this.specialElements.length; i++) {
52226                 semenu.menu.items.push(
52227                     Roo.apply({ 
52228                         handler: function(a,b) {
52229                             editor.insertAtCursor(this.ihtml);
52230                         }
52231                     }, this.specialElements[i])
52232                 );
52233                     
52234             }
52235             
52236             tb.add(semenu);
52237             
52238             
52239         }
52240          
52241         
52242         if (this.btns) {
52243             for(var i =0; i< this.btns.length;i++) {
52244                 var b = Roo.factory(this.btns[i],this.btns[i].xns || Roo.form);
52245                 b.cls =  'x-edit-none';
52246                 
52247                 if(typeof(this.btns[i].cls) != 'undefined' && this.btns[i].cls.indexOf('x-init-enable') !== -1){
52248                     b.cls += ' x-init-enable';
52249                 }
52250                 
52251                 b.scope = editorcore;
52252                 tb.add(b);
52253             }
52254         
52255         }
52256         
52257         
52258         
52259         // disable everything...
52260         
52261         this.tb.items.each(function(item){
52262             
52263            if(
52264                 item.id != editorcore.frameId+ '-sourceedit' && 
52265                 (typeof(item.cls) != 'undefined' && item.cls.indexOf('x-init-enable') === -1)
52266             ){
52267                 
52268                 item.disable();
52269             }
52270         });
52271         this.rendered = true;
52272         
52273         // the all the btns;
52274         editor.on('editorevent', this.updateToolbar, this);
52275         // other toolbars need to implement this..
52276         //editor.on('editmodechange', this.updateToolbar, this);
52277     },
52278     
52279     
52280     relayBtnCmd : function(btn) {
52281         this.editorcore.relayCmd(btn.cmd);
52282     },
52283     // private used internally
52284     createLink : function(){
52285         //Roo.log("create link?");
52286         var ec = this.editorcore;
52287         var ar = ec.getAllAncestors();
52288         var n = false;
52289         for(var i = 0;i< ar.length;i++) {
52290             if (ar[i] && ar[i].nodeName == 'A') {
52291                 n = ar[i];
52292                 break;
52293             }
52294         }
52295         
52296         (function() {
52297             
52298             Roo.MessageBox.show({
52299                 title : "Add / Edit Link URL",
52300                 msg : "Enter the url for the link",
52301                 buttons: Roo.MessageBox.OKCANCEL,
52302                 fn: function(btn, url){
52303                     if (btn != 'ok') {
52304                         return;
52305                     }
52306                     if(url && url != 'http:/'+'/'){
52307                         if (n) {
52308                             n.setAttribute('href', url);
52309                         } else {
52310                             ec.relayCmd('createlink', url);
52311                         }
52312                     }
52313                 },
52314                 minWidth:250,
52315                 prompt:true,
52316                 //multiline: multiline,
52317                 modal : true,
52318                 value :  n  ? n.getAttribute('href') : '' 
52319             });
52320             
52321              
52322         }).defer(100, this); // we have to defer this , otherwise the mouse click gives focus to the main window.
52323         
52324     },
52325
52326     
52327     /**
52328      * Protected method that will not generally be called directly. It triggers
52329      * a toolbar update by reading the markup state of the current selection in the editor.
52330      */
52331     updateToolbar: function(){
52332
52333         if(!this.editorcore.activated){
52334             this.editor.onFirstFocus();
52335             return;
52336         }
52337
52338         var btns = this.tb.items.map, 
52339             doc = this.editorcore.doc,
52340             frameId = this.editorcore.frameId;
52341
52342         if(!this.disable.font && !Roo.isSafari){
52343             /*
52344             var name = (doc.queryCommandValue('FontName')||this.editor.defaultFont).toLowerCase();
52345             if(name != this.fontSelect.dom.value){
52346                 this.fontSelect.dom.value = name;
52347             }
52348             */
52349         }
52350         if(!this.disable.format){
52351             btns[frameId + '-bold'].toggle(doc.queryCommandState('bold'));
52352             btns[frameId + '-italic'].toggle(doc.queryCommandState('italic'));
52353             btns[frameId + '-underline'].toggle(doc.queryCommandState('underline'));
52354             btns[frameId + '-strikethrough'].toggle(doc.queryCommandState('strikethrough'));
52355         }
52356         if(!this.disable.alignments){
52357             btns[frameId + '-justifyleft'].toggle(doc.queryCommandState('justifyleft'));
52358             btns[frameId + '-justifycenter'].toggle(doc.queryCommandState('justifycenter'));
52359             btns[frameId + '-justifyright'].toggle(doc.queryCommandState('justifyright'));
52360         }
52361         if(!Roo.isSafari && !this.disable.lists){
52362             btns[frameId + '-insertorderedlist'].toggle(doc.queryCommandState('insertorderedlist'));
52363             btns[frameId + '-insertunorderedlist'].toggle(doc.queryCommandState('insertunorderedlist'));
52364         }
52365         
52366         var ans = this.editorcore.getAllAncestors();
52367         if (this.formatCombo) {
52368             
52369             
52370             var store = this.formatCombo.store;
52371             this.formatCombo.setValue("");
52372             for (var i =0; i < ans.length;i++) {
52373                 if (ans[i] && store.query('tag',ans[i].tagName.toLowerCase(), false).length) {
52374                     // select it..
52375                     this.formatCombo.setValue(ans[i].tagName.toLowerCase());
52376                     break;
52377                 }
52378             }
52379         }
52380         
52381         
52382         
52383         // hides menus... - so this cant be on a menu...
52384         Roo.menu.MenuMgr.hideAll();
52385
52386         //this.editorsyncValue();
52387     },
52388    
52389     
52390     createFontOptions : function(){
52391         var buf = [], fs = this.fontFamilies, ff, lc;
52392         
52393         
52394         
52395         for(var i = 0, len = fs.length; i< len; i++){
52396             ff = fs[i];
52397             lc = ff.toLowerCase();
52398             buf.push(
52399                 '<option value="',lc,'" style="font-family:',ff,';"',
52400                     (this.defaultFont == lc ? ' selected="true">' : '>'),
52401                     ff,
52402                 '</option>'
52403             );
52404         }
52405         return buf.join('');
52406     },
52407     
52408     toggleSourceEdit : function(sourceEditMode){
52409         
52410         Roo.log("toolbar toogle");
52411         if(sourceEditMode === undefined){
52412             sourceEditMode = !this.sourceEditMode;
52413         }
52414         this.sourceEditMode = sourceEditMode === true;
52415         var btn = this.tb.items.get(this.editorcore.frameId +'-sourceedit');
52416         // just toggle the button?
52417         if(btn.pressed !== this.sourceEditMode){
52418             btn.toggle(this.sourceEditMode);
52419             return;
52420         }
52421         
52422         if(sourceEditMode){
52423             Roo.log("disabling buttons");
52424             this.tb.items.each(function(item){
52425                 if(item.cmd != 'sourceedit' && (typeof(item.cls) != 'undefined' && item.cls.indexOf('x-init-enable') === -1)){
52426                     item.disable();
52427                 }
52428             });
52429           
52430         }else{
52431             Roo.log("enabling buttons");
52432             if(this.editorcore.initialized){
52433                 this.tb.items.each(function(item){
52434                     item.enable();
52435                 });
52436                 // initialize 'blocks'
52437                 Roo.each(Roo.get(this.editorcore.doc.body).query('*[data-block]'), function(e) {
52438                     Roo.htmleditor.Block.factory(e).updateElement(e);
52439                 },this);
52440             
52441             }
52442             
52443         }
52444         Roo.log("calling toggole on editor");
52445         // tell the editor that it's been pressed..
52446         this.editor.toggleSourceEdit(sourceEditMode);
52447        
52448     },
52449      /**
52450      * Object collection of toolbar tooltips for the buttons in the editor. The key
52451      * is the command id associated with that button and the value is a valid QuickTips object.
52452      * For example:
52453 <pre><code>
52454 {
52455     bold : {
52456         title: 'Bold (Ctrl+B)',
52457         text: 'Make the selected text bold.',
52458         cls: 'x-html-editor-tip'
52459     },
52460     italic : {
52461         title: 'Italic (Ctrl+I)',
52462         text: 'Make the selected text italic.',
52463         cls: 'x-html-editor-tip'
52464     },
52465     ...
52466 </code></pre>
52467     * @type Object
52468      */
52469     buttonTips : {
52470         bold : {
52471             title: 'Bold (Ctrl+B)',
52472             text: 'Make the selected text bold.',
52473             cls: 'x-html-editor-tip'
52474         },
52475         italic : {
52476             title: 'Italic (Ctrl+I)',
52477             text: 'Make the selected text italic.',
52478             cls: 'x-html-editor-tip'
52479         },
52480         underline : {
52481             title: 'Underline (Ctrl+U)',
52482             text: 'Underline the selected text.',
52483             cls: 'x-html-editor-tip'
52484         },
52485         strikethrough : {
52486             title: 'Strikethrough',
52487             text: 'Strikethrough the selected text.',
52488             cls: 'x-html-editor-tip'
52489         },
52490         increasefontsize : {
52491             title: 'Grow Text',
52492             text: 'Increase the font size.',
52493             cls: 'x-html-editor-tip'
52494         },
52495         decreasefontsize : {
52496             title: 'Shrink Text',
52497             text: 'Decrease the font size.',
52498             cls: 'x-html-editor-tip'
52499         },
52500         backcolor : {
52501             title: 'Text Highlight Color',
52502             text: 'Change the background color of the selected text.',
52503             cls: 'x-html-editor-tip'
52504         },
52505         forecolor : {
52506             title: 'Font Color',
52507             text: 'Change the color of the selected text.',
52508             cls: 'x-html-editor-tip'
52509         },
52510         justifyleft : {
52511             title: 'Align Text Left',
52512             text: 'Align text to the left.',
52513             cls: 'x-html-editor-tip'
52514         },
52515         justifycenter : {
52516             title: 'Center Text',
52517             text: 'Center text in the editor.',
52518             cls: 'x-html-editor-tip'
52519         },
52520         justifyright : {
52521             title: 'Align Text Right',
52522             text: 'Align text to the right.',
52523             cls: 'x-html-editor-tip'
52524         },
52525         insertunorderedlist : {
52526             title: 'Bullet List',
52527             text: 'Start a bulleted list.',
52528             cls: 'x-html-editor-tip'
52529         },
52530         insertorderedlist : {
52531             title: 'Numbered List',
52532             text: 'Start a numbered list.',
52533             cls: 'x-html-editor-tip'
52534         },
52535         createlink : {
52536             title: 'Hyperlink',
52537             text: 'Make the selected text a hyperlink.',
52538             cls: 'x-html-editor-tip'
52539         },
52540         sourceedit : {
52541             title: 'Source Edit',
52542             text: 'Switch to source editing mode.',
52543             cls: 'x-html-editor-tip'
52544         }
52545     },
52546     // private
52547     onDestroy : function(){
52548         if(this.rendered){
52549             
52550             this.tb.items.each(function(item){
52551                 if(item.menu){
52552                     item.menu.removeAll();
52553                     if(item.menu.el){
52554                         item.menu.el.destroy();
52555                     }
52556                 }
52557                 item.destroy();
52558             });
52559              
52560         }
52561     },
52562     onFirstFocus: function() {
52563         this.tb.items.each(function(item){
52564            item.enable();
52565         });
52566     }
52567 };
52568
52569
52570
52571
52572 // <script type="text/javascript">
52573 /*
52574  * Based on
52575  * Ext JS Library 1.1.1
52576  * Copyright(c) 2006-2007, Ext JS, LLC.
52577  *  
52578  
52579  */
52580
52581  
52582 /**
52583  * @class Roo.form.HtmlEditor.ToolbarContext
52584  * Context Toolbar
52585  * 
52586  * Usage:
52587  *
52588  new Roo.form.HtmlEditor({
52589     ....
52590     toolbars : [
52591         { xtype: 'ToolbarStandard', styles : {} }
52592         { xtype: 'ToolbarContext', disable : {} }
52593     ]
52594 })
52595
52596      
52597  * 
52598  * @config : {Object} disable List of elements to disable.. (not done yet.)
52599  * @config : {Object} styles  Map of styles available.
52600  * 
52601  */
52602
52603 Roo.form.HtmlEditor.ToolbarContext = function(config)
52604 {
52605     
52606     Roo.apply(this, config);
52607     //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
52608     // dont call parent... till later.
52609     this.styles = this.styles || {};
52610 }
52611
52612  
52613
52614 Roo.form.HtmlEditor.ToolbarContext.types = {
52615     'IMG' : [
52616         {
52617             name : 'width',
52618             title: "Width",
52619             width: 40
52620         },
52621         {
52622             name : 'height',
52623             title: "Height",
52624             width: 40
52625         },
52626         {
52627             name : 'align',
52628             title: "Align",
52629             opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
52630             width : 80
52631             
52632         },
52633         {
52634             name : 'border',
52635             title: "Border",
52636             width: 40
52637         },
52638         {
52639             name : 'alt',
52640             title: "Alt",
52641             width: 120
52642         },
52643         {
52644             name : 'src',
52645             title: "Src",
52646             width: 220
52647         }
52648         
52649     ],
52650     
52651     'FIGURE' : [
52652         {
52653             name : 'align',
52654             title: "Align",
52655             opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
52656             width : 80  
52657         }
52658     ],
52659     'A' : [
52660         {
52661             name : 'name',
52662             title: "Name",
52663             width: 50
52664         },
52665         {
52666             name : 'target',
52667             title: "Target",
52668             width: 120
52669         },
52670         {
52671             name : 'href',
52672             title: "Href",
52673             width: 220
52674         } // border?
52675         
52676     ],
52677     
52678     'INPUT' : [
52679         {
52680             name : 'name',
52681             title: "name",
52682             width: 120
52683         },
52684         {
52685             name : 'value',
52686             title: "Value",
52687             width: 120
52688         },
52689         {
52690             name : 'width',
52691             title: "Width",
52692             width: 40
52693         }
52694     ],
52695     'LABEL' : [
52696          {
52697             name : 'for',
52698             title: "For",
52699             width: 120
52700         }
52701     ],
52702     'TEXTAREA' : [
52703         {
52704             name : 'name',
52705             title: "name",
52706             width: 120
52707         },
52708         {
52709             name : 'rows',
52710             title: "Rows",
52711             width: 20
52712         },
52713         {
52714             name : 'cols',
52715             title: "Cols",
52716             width: 20
52717         }
52718     ],
52719     'SELECT' : [
52720         {
52721             name : 'name',
52722             title: "name",
52723             width: 120
52724         },
52725         {
52726             name : 'selectoptions',
52727             title: "Options",
52728             width: 200
52729         }
52730     ],
52731     
52732     // should we really allow this??
52733     // should this just be 
52734     'BODY' : [
52735         
52736         {
52737             name : 'title',
52738             title: "Title",
52739             width: 200,
52740             disabled : true
52741         }
52742     ],
52743  
52744     '*' : [
52745         // empty.
52746     ]
52747
52748 };
52749
52750 // this should be configurable.. - you can either set it up using stores, or modify options somehwere..
52751 Roo.form.HtmlEditor.ToolbarContext.stores = false;
52752
52753 Roo.form.HtmlEditor.ToolbarContext.options = {
52754         'font-family'  : [ 
52755                 [ 'Helvetica,Arial,sans-serif', 'Helvetica'],
52756                 [ 'Courier New', 'Courier New'],
52757                 [ 'Tahoma', 'Tahoma'],
52758                 [ 'Times New Roman,serif', 'Times'],
52759                 [ 'Verdana','Verdana' ]
52760         ]
52761 };
52762
52763 // fixme - these need to be configurable..
52764  
52765
52766 //Roo.form.HtmlEditor.ToolbarContext.types
52767
52768
52769 Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
52770     
52771     tb: false,
52772     
52773     rendered: false,
52774     
52775     editor : false,
52776     editorcore : false,
52777     /**
52778      * @cfg {Object} disable  List of toolbar elements to disable
52779          
52780      */
52781     disable : false,
52782     /**
52783      * @cfg {Object} styles List of styles 
52784      *    eg. { '*' : [ 'headline' ] , 'TD' : [ 'underline', 'double-underline' ] } 
52785      *
52786      * These must be defined in the page, so they get rendered correctly..
52787      * .headline { }
52788      * TD.underline { }
52789      * 
52790      */
52791     styles : false,
52792     
52793     options: false,
52794     
52795     toolbars : false,
52796     
52797     init : function(editor)
52798     {
52799         this.editor = editor;
52800         this.editorcore = editor.editorcore ? editor.editorcore : editor;
52801         var editorcore = this.editorcore;
52802         
52803         var fid = editorcore.frameId;
52804         var etb = this;
52805         function btn(id, toggle, handler){
52806             var xid = fid + '-'+ id ;
52807             return {
52808                 id : xid,
52809                 cmd : id,
52810                 cls : 'x-btn-icon x-edit-'+id,
52811                 enableToggle:toggle !== false,
52812                 scope: editorcore, // was editor...
52813                 handler:handler||editorcore.relayBtnCmd,
52814                 clickEvent:'mousedown',
52815                 tooltip: etb.buttonTips[id] || undefined, ///tips ???
52816                 tabIndex:-1
52817             };
52818         }
52819         // create a new element.
52820         var wdiv = editor.wrap.createChild({
52821                 tag: 'div'
52822             }, editor.wrap.dom.firstChild.nextSibling, true);
52823         
52824         // can we do this more than once??
52825         
52826          // stop form submits
52827       
52828  
52829         // disable everything...
52830         var ty= Roo.form.HtmlEditor.ToolbarContext.types;
52831         this.toolbars = {};
52832         // block toolbars are built in updateToolbar when needed.
52833         for (var i in  ty) {
52834             
52835             this.toolbars[i] = this.buildToolbar(ty[i],i);
52836         }
52837         this.tb = this.toolbars.BODY;
52838         this.tb.el.show();
52839         this.buildFooter();
52840         this.footer.show();
52841         editor.on('hide', function( ) { this.footer.hide() }, this);
52842         editor.on('show', function( ) { this.footer.show() }, this);
52843         
52844          
52845         this.rendered = true;
52846         
52847         // the all the btns;
52848         editor.on('editorevent', this.updateToolbar, this);
52849         // other toolbars need to implement this..
52850         //editor.on('editmodechange', this.updateToolbar, this);
52851     },
52852     
52853     
52854     
52855     /**
52856      * Protected method that will not generally be called directly. It triggers
52857      * a toolbar update by reading the markup state of the current selection in the editor.
52858      *
52859      * Note you can force an update by calling on('editorevent', scope, false)
52860      */
52861     updateToolbar: function(editor ,ev, sel)
52862     {
52863         
52864         if (ev) {
52865             ev.stopEvent(); // se if we can stop this looping with mutiple events.
52866         }
52867         
52868         //Roo.log(ev);
52869         // capture mouse up - this is handy for selecting images..
52870         // perhaps should go somewhere else...
52871         if(!this.editorcore.activated){
52872              this.editor.onFirstFocus();
52873             return;
52874         }
52875         //Roo.log(ev ? ev.target : 'NOTARGET');
52876         
52877         
52878         // http://developer.yahoo.com/yui/docs/simple-editor.js.html
52879         // selectNode - might want to handle IE?
52880         
52881         
52882         
52883         if (ev &&
52884             (ev.type == 'mouseup' || ev.type == 'click' ) &&
52885             ev.target && ev.target.tagName != 'BODY' ) { // && ev.target.tagName == 'IMG') {
52886             // they have click on an image...
52887             // let's see if we can change the selection...
52888             sel = ev.target;
52889             
52890             // this triggers looping?
52891             //this.editorcore.selectNode(sel);
52892              
52893         }
52894         
52895         // this forces an id..
52896         Array.from(this.editorcore.doc.body.querySelectorAll('.roo-ed-selection')).forEach(function(e) {
52897              e.classList.remove('roo-ed-selection');
52898         });
52899         //Roo.select('.roo-ed-selection', false, this.editorcore.doc).removeClass('roo-ed-selection');
52900         //Roo.get(node).addClass('roo-ed-selection');
52901       
52902         //var updateFooter = sel ? false : true; 
52903         
52904         
52905         var ans = this.editorcore.getAllAncestors();
52906         
52907         // pick
52908         var ty = Roo.form.HtmlEditor.ToolbarContext.types;
52909         
52910         if (!sel) { 
52911             sel = ans.length ? (ans[0] ?  ans[0]  : ans[1]) : this.editorcore.doc.body;
52912             sel = sel ? sel : this.editorcore.doc.body;
52913             sel = sel.tagName.length ? sel : this.editorcore.doc.body;
52914             
52915         }
52916         
52917         var tn = sel.tagName.toUpperCase();
52918         var lastSel = this.tb.selectedNode;
52919         this.tb.selectedNode = sel;
52920         var left_label = tn;
52921         
52922         // ok see if we are editing a block?
52923         
52924         var db = false;
52925         // you are not actually selecting the block.
52926         if (sel && sel.hasAttribute('data-block')) {
52927             db = sel;
52928         } else if (sel && sel.closest('[data-block]')) {
52929             
52930             db = sel.closest('[data-block]');
52931             //var cepar = sel.closest('[contenteditable=true]');
52932             //if (db && cepar && cepar.tagName != 'BODY') {
52933             //   db = false; // we are inside an editable block.. = not sure how we are going to handle nested blocks!?
52934             //}   
52935         }
52936         
52937         
52938         var block = false;
52939         //if (db && !sel.hasAttribute('contenteditable') && sel.getAttribute('contenteditable') != 'true' ) {
52940         if (db && this.editorcore.enableBlocks) {
52941             block = Roo.htmleditor.Block.factory(db);
52942             
52943             
52944             if (block) {
52945                  db.className = (
52946                         db.classList.length > 0  ? db.className + ' ' : ''
52947                     )  + 'roo-ed-selection';
52948                  
52949                  // since we removed it earlier... its not there..
52950                 tn = 'BLOCK.' + db.getAttribute('data-block');
52951                 
52952                 //this.editorcore.selectNode(db);
52953                 if (typeof(this.toolbars[tn]) == 'undefined') {
52954                    this.toolbars[tn] = this.buildToolbar( false  ,tn ,block.friendly_name, block);
52955                 }
52956                 this.toolbars[tn].selectedNode = db;
52957                 left_label = block.friendly_name;
52958                 ans = this.editorcore.getAllAncestors();
52959             }
52960             
52961                 
52962             
52963         }
52964         
52965         
52966         if (this.tb.name == tn && lastSel == this.tb.selectedNode && ev !== false) {
52967             return; // no change?
52968         }
52969         
52970         
52971           
52972         this.tb.el.hide();
52973         ///console.log("show: " + tn);
52974         this.tb =  typeof(this.toolbars[tn]) != 'undefined' ? this.toolbars[tn] : this.toolbars['*'];
52975         
52976         this.tb.el.show();
52977         // update name
52978         this.tb.items.first().el.innerHTML = left_label + ':&nbsp;';
52979         
52980         
52981         // update attributes
52982         if (block && this.tb.fields) {
52983              
52984             this.tb.fields.each(function(e) {
52985                 e.setValue(block[e.name]);
52986             });
52987             
52988             
52989         } else  if (this.tb.fields && this.tb.selectedNode) {
52990             this.tb.fields.each( function(e) {
52991                 if (e.stylename) {
52992                     e.setValue(this.tb.selectedNode.style[e.stylename]);
52993                     return;
52994                 } 
52995                 e.setValue(this.tb.selectedNode.getAttribute(e.attrname));
52996             }, this);
52997             this.updateToolbarStyles(this.tb.selectedNode);  
52998         }
52999         
53000         
53001        
53002         Roo.menu.MenuMgr.hideAll();
53003
53004         
53005         
53006     
53007         // update the footer
53008         //
53009         this.updateFooter(ans);
53010              
53011     },
53012     
53013     updateToolbarStyles : function(sel)
53014     {
53015         var hasStyles = false;
53016         for(var i in this.styles) {
53017             hasStyles = true;
53018             break;
53019         }
53020         
53021         // update styles
53022         if (hasStyles && this.tb.hasStyles) { 
53023             var st = this.tb.fields.item(0);
53024             
53025             st.store.removeAll();
53026             var cn = sel.className.split(/\s+/);
53027             
53028             var avs = [];
53029             if (this.styles['*']) {
53030                 
53031                 Roo.each(this.styles['*'], function(v) {
53032                     avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );         
53033                 });
53034             }
53035             if (this.styles[tn]) { 
53036                 Roo.each(this.styles[tn], function(v) {
53037                     avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );         
53038                 });
53039             }
53040             
53041             st.store.loadData(avs);
53042             st.collapse();
53043             st.setValue(cn);
53044         }
53045     },
53046     
53047      
53048     updateFooter : function(ans)
53049     {
53050         var html = '';
53051         if (ans === false) {
53052             this.footDisp.dom.innerHTML = '';
53053             return;
53054         }
53055         
53056         this.footerEls = ans.reverse();
53057         Roo.each(this.footerEls, function(a,i) {
53058             if (!a) { return; }
53059             html += html.length ? ' &gt; '  :  '';
53060             
53061             html += '<span class="x-ed-loc-' + i + '">' + a.tagName + '</span>';
53062             
53063         });
53064        
53065         // 
53066         var sz = this.footDisp.up('td').getSize();
53067         this.footDisp.dom.style.width = (sz.width -10) + 'px';
53068         this.footDisp.dom.style.marginLeft = '5px';
53069         
53070         this.footDisp.dom.style.overflow = 'hidden';
53071         
53072         this.footDisp.dom.innerHTML = html;
53073             
53074         
53075     },
53076    
53077        
53078     // private
53079     onDestroy : function(){
53080         if(this.rendered){
53081             
53082             this.tb.items.each(function(item){
53083                 if(item.menu){
53084                     item.menu.removeAll();
53085                     if(item.menu.el){
53086                         item.menu.el.destroy();
53087                     }
53088                 }
53089                 item.destroy();
53090             });
53091              
53092         }
53093     },
53094     onFirstFocus: function() {
53095         // need to do this for all the toolbars..
53096         this.tb.items.each(function(item){
53097            item.enable();
53098         });
53099     },
53100     buildToolbar: function(tlist, nm, friendly_name, block)
53101     {
53102         var editor = this.editor;
53103         var editorcore = this.editorcore;
53104          // create a new element.
53105         var wdiv = editor.wrap.createChild({
53106                 tag: 'div'
53107             }, editor.wrap.dom.firstChild.nextSibling, true);
53108         
53109        
53110         var tb = new Roo.Toolbar(wdiv);
53111         ///this.tb = tb; // << this sets the active toolbar..
53112         if (tlist === false && block) {
53113             tlist = block.contextMenu(this);
53114         }
53115         
53116         tb.hasStyles = false;
53117         tb.name = nm;
53118         
53119         tb.add((typeof(friendly_name) == 'undefined' ? nm : friendly_name) + ":&nbsp;");
53120         
53121         var styles = Array.from(this.styles);
53122         
53123         
53124         // styles...
53125         if (styles && styles.length) {
53126             tb.hasStyles = true;
53127             // this needs a multi-select checkbox...
53128             tb.addField( new Roo.form.ComboBox({
53129                 store: new Roo.data.SimpleStore({
53130                     id : 'val',
53131                     fields: ['val', 'selected'],
53132                     data : [] 
53133                 }),
53134                 name : '-roo-edit-className',
53135                 attrname : 'className',
53136                 displayField: 'val',
53137                 typeAhead: false,
53138                 mode: 'local',
53139                 editable : false,
53140                 triggerAction: 'all',
53141                 emptyText:'Select Style',
53142                 selectOnFocus:true,
53143                 width: 130,
53144                 listeners : {
53145                     'select': function(c, r, i) {
53146                         // initial support only for on class per el..
53147                         tb.selectedNode.className =  r ? r.get('val') : '';
53148                         editorcore.syncValue();
53149                     }
53150                 }
53151     
53152             }));
53153         }
53154         
53155         var tbc = Roo.form.HtmlEditor.ToolbarContext;
53156         
53157         
53158         for (var i = 0; i < tlist.length; i++) {
53159             
53160             // newer versions will use xtype cfg to create menus.
53161             if (typeof(tlist[i].xtype) != 'undefined') {
53162                 
53163                 tb[typeof(tlist[i].name)== 'undefined' ? 'add' : 'addField'](Roo.factory(tlist[i]));
53164                 
53165                 
53166                 continue;
53167             }
53168             
53169             var item = tlist[i];
53170             tb.add(item.title + ":&nbsp;");
53171             
53172             
53173             //optname == used so you can configure the options available..
53174             var opts = item.opts ? item.opts : false;
53175             if (item.optname) { // use the b
53176                 opts = Roo.form.HtmlEditor.ToolbarContext.options[item.optname];
53177            
53178             }
53179             
53180             if (opts) {
53181                 // opts == pulldown..
53182                 tb.addField( new Roo.form.ComboBox({
53183                     store:   typeof(tbc.stores[i]) != 'undefined' ?  Roo.factory(tbc.stores[i],Roo.data) : new Roo.data.SimpleStore({
53184                         id : 'val',
53185                         fields: ['val', 'display'],
53186                         data : opts  
53187                     }),
53188                     name : '-roo-edit-' + tlist[i].name,
53189                     
53190                     attrname : tlist[i].name,
53191                     stylename : item.style ? item.style : false,
53192                     
53193                     displayField: item.displayField ? item.displayField : 'val',
53194                     valueField :  'val',
53195                     typeAhead: false,
53196                     mode: typeof(tbc.stores[tlist[i].name]) != 'undefined'  ? 'remote' : 'local',
53197                     editable : false,
53198                     triggerAction: 'all',
53199                     emptyText:'Select',
53200                     selectOnFocus:true,
53201                     width: item.width ? item.width  : 130,
53202                     listeners : {
53203                         'select': function(c, r, i) {
53204                              
53205                             
53206                             if (c.stylename) {
53207                                 tb.selectedNode.style[c.stylename] =  r.get('val');
53208                                 editorcore.syncValue();
53209                                 return;
53210                             }
53211                             if (r === false) {
53212                                 tb.selectedNode.removeAttribute(c.attrname);
53213                                 editorcore.syncValue();
53214                                 return;
53215                             }
53216                             tb.selectedNode.setAttribute(c.attrname, r.get('val'));
53217                             editorcore.syncValue();
53218                         }
53219                     }
53220
53221                 }));
53222                 continue;
53223                     
53224                  
53225                 /*
53226                 tb.addField( new Roo.form.TextField({
53227                     name: i,
53228                     width: 100,
53229                     //allowBlank:false,
53230                     value: ''
53231                 }));
53232                 continue;
53233                 */
53234             }
53235             tb.addField( new Roo.form.TextField({
53236                 name: '-roo-edit-' + tlist[i].name,
53237                 attrname : tlist[i].name,
53238                 
53239                 width: item.width,
53240                 //allowBlank:true,
53241                 value: '',
53242                 listeners: {
53243                     'change' : function(f, nv, ov) {
53244                         
53245                          
53246                         tb.selectedNode.setAttribute(f.attrname, nv);
53247                         editorcore.syncValue();
53248                     }
53249                 }
53250             }));
53251              
53252         }
53253         
53254         var _this = this;
53255         var show_delete = !block || block.deleteTitle !== false;
53256         if(nm == 'BODY'){
53257             show_delete = false;
53258             tb.addSeparator();
53259         
53260             tb.addButton( {
53261                 text: 'Stylesheets',
53262
53263                 listeners : {
53264                     click : function ()
53265                     {
53266                         _this.editor.fireEvent('stylesheetsclick', _this.editor);
53267                     }
53268                 }
53269             });
53270         }
53271         
53272         tb.addFill();
53273         if (show_delete) {
53274             tb.addButton({
53275                 text: block && block.deleteTitle ? block.deleteTitle  : 'Remove Block or Formating', // remove the tag, and puts the children outside...
53276         
53277                 listeners : {
53278                     click : function ()
53279                     {
53280                         var sn = tb.selectedNode;
53281                         if (block) {
53282                             sn = Roo.htmleditor.Block.factory(tb.selectedNode).removeNode();
53283                             
53284                         }
53285                         if (!sn) {
53286                             return;
53287                         }
53288                         var stn =  sn.childNodes[0] || sn.nextSibling || sn.previousSibling || sn.parentNode;
53289                         if (sn.hasAttribute('data-block')) {
53290                             stn =  sn.nextSibling || sn.previousSibling || sn.parentNode;
53291                             sn.parentNode.removeChild(sn);
53292                             
53293                         } else if (sn && sn.tagName != 'BODY') {
53294                             // remove and keep parents.
53295                             a = new Roo.htmleditor.FilterKeepChildren({tag : false});
53296                             a.replaceTag(sn);
53297                         }
53298                         
53299                         
53300                         var range = editorcore.createRange();
53301             
53302                         range.setStart(stn,0);
53303                         range.setEnd(stn,0); 
53304                         var selection = editorcore.getSelection();
53305                         selection.removeAllRanges();
53306                         selection.addRange(range);
53307                         
53308                         
53309                         //_this.updateToolbar(null, null, pn);
53310                         _this.updateToolbar(null, null, null);
53311                         _this.updateFooter(false);
53312                         
53313                     }
53314                 }
53315                 
53316                         
53317                     
53318                 
53319             });
53320         }    
53321         
53322         tb.el.on('click', function(e){
53323             e.preventDefault(); // what does this do?
53324         });
53325         tb.el.setVisibilityMode( Roo.Element.DISPLAY);
53326         tb.el.hide();
53327         
53328         // dont need to disable them... as they will get hidden
53329         return tb;
53330          
53331         
53332     },
53333     buildFooter : function()
53334     {
53335         
53336         var fel = this.editor.wrap.createChild();
53337         this.footer = new Roo.Toolbar(fel);
53338         // toolbar has scrolly on left / right?
53339         var footDisp= new Roo.Toolbar.Fill();
53340         var _t = this;
53341         this.footer.add(
53342             {
53343                 text : '&lt;',
53344                 xtype: 'Button',
53345                 handler : function() {
53346                     _t.footDisp.scrollTo('left',0,true)
53347                 }
53348             }
53349         );
53350         this.footer.add( footDisp );
53351         this.footer.add( 
53352             {
53353                 text : '&gt;',
53354                 xtype: 'Button',
53355                 handler : function() {
53356                     // no animation..
53357                     _t.footDisp.select('span').last().scrollIntoView(_t.footDisp,true);
53358                 }
53359             }
53360         );
53361         var fel = Roo.get(footDisp.el);
53362         fel.addClass('x-editor-context');
53363         this.footDispWrap = fel; 
53364         this.footDispWrap.overflow  = 'hidden';
53365         
53366         this.footDisp = fel.createChild();
53367         this.footDispWrap.on('click', this.onContextClick, this)
53368         
53369         
53370     },
53371     // when the footer contect changes
53372     onContextClick : function (ev,dom)
53373     {
53374         ev.preventDefault();
53375         var  cn = dom.className;
53376         //Roo.log(cn);
53377         if (!cn.match(/x-ed-loc-/)) {
53378             return;
53379         }
53380         var n = cn.split('-').pop();
53381         var ans = this.footerEls;
53382         var sel = ans[n];
53383         
53384         this.editorcore.selectNode(sel);
53385         
53386         
53387         this.updateToolbar(null, null, sel);
53388         
53389         
53390     }
53391     
53392     
53393     
53394     
53395     
53396 });
53397
53398
53399
53400
53401
53402 /*
53403  * Based on:
53404  * Ext JS Library 1.1.1
53405  * Copyright(c) 2006-2007, Ext JS, LLC.
53406  *
53407  * Originally Released Under LGPL - original licence link has changed is not relivant.
53408  *
53409  * Fork - LGPL
53410  * <script type="text/javascript">
53411  */
53412  
53413 /**
53414  * @class Roo.form.BasicForm
53415  * @extends Roo.util.Observable
53416  * Supplies the functionality to do "actions" on forms and initialize Roo.form.Field types on existing markup.
53417  * @constructor
53418  * @param {String/HTMLElement/Roo.Element} el The form element or its id
53419  * @param {Object} config Configuration options
53420  */
53421 Roo.form.BasicForm = function(el, config){
53422     this.allItems = [];
53423     this.childForms = [];
53424     Roo.apply(this, config);
53425     /*
53426      * The Roo.form.Field items in this form.
53427      * @type MixedCollection
53428      */
53429      
53430      
53431     this.items = new Roo.util.MixedCollection(false, function(o){
53432         return o.id || (o.id = Roo.id());
53433     });
53434     this.addEvents({
53435         /**
53436          * @event beforeaction
53437          * Fires before any action is performed. Return false to cancel the action.
53438          * @param {Form} this
53439          * @param {Action} action The action to be performed
53440          */
53441         beforeaction: true,
53442         /**
53443          * @event actionfailed
53444          * Fires when an action fails.
53445          * @param {Form} this
53446          * @param {Action} action The action that failed
53447          */
53448         actionfailed : true,
53449         /**
53450          * @event actioncomplete
53451          * Fires when an action is completed.
53452          * @param {Form} this
53453          * @param {Action} action The action that completed
53454          */
53455         actioncomplete : true
53456     });
53457     if(el){
53458         this.initEl(el);
53459     }
53460     Roo.form.BasicForm.superclass.constructor.call(this);
53461     
53462     Roo.form.BasicForm.popover.apply();
53463 };
53464
53465 Roo.extend(Roo.form.BasicForm, Roo.util.Observable, {
53466     /**
53467      * @cfg {String} method
53468      * The request method to use (GET or POST) for form actions if one isn't supplied in the action options.
53469      */
53470     /**
53471      * @cfg {DataReader} reader
53472      * An Roo.data.DataReader (e.g. {@link Roo.data.XmlReader}) to be used to read data when executing "load" actions.
53473      * This is optional as there is built-in support for processing JSON.
53474      */
53475     /**
53476      * @cfg {DataReader} errorReader
53477      * An Roo.data.DataReader (e.g. {@link Roo.data.XmlReader}) to be used to read data when reading validation errors on "submit" actions.
53478      * This is completely optional as there is built-in support for processing JSON.
53479      */
53480     /**
53481      * @cfg {String} url
53482      * The URL to use for form actions if one isn't supplied in the action options.
53483      */
53484     /**
53485      * @cfg {Boolean} fileUpload
53486      * Set to true if this form is a file upload.
53487      */
53488      
53489     /**
53490      * @cfg {Object} baseParams
53491      * Parameters to pass with all requests. e.g. baseParams: {id: '123', foo: 'bar'}.
53492      */
53493      /**
53494      
53495     /**
53496      * @cfg {Number} timeout Timeout for form actions in seconds (default is 30 seconds).
53497      */
53498     timeout: 30,
53499
53500     // private
53501     activeAction : null,
53502
53503     /**
53504      * @cfg {Boolean} trackResetOnLoad If set to true, form.reset() resets to the last loaded
53505      * or setValues() data instead of when the form was first created.
53506      */
53507     trackResetOnLoad : false,
53508     
53509     
53510     /**
53511      * childForms - used for multi-tab forms
53512      * @type {Array}
53513      */
53514     childForms : false,
53515     
53516     /**
53517      * allItems - full list of fields.
53518      * @type {Array}
53519      */
53520     allItems : false,
53521     
53522     /**
53523      * By default wait messages are displayed with Roo.MessageBox.wait. You can target a specific
53524      * element by passing it or its id or mask the form itself by passing in true.
53525      * @type Mixed
53526      */
53527     waitMsgTarget : false,
53528     
53529     /**
53530      * @type Boolean
53531      */
53532     disableMask : false,
53533     
53534     /**
53535      * @cfg {Boolean} errorMask (true|false) default false
53536      */
53537     errorMask : false,
53538     
53539     /**
53540      * @cfg {Number} maskOffset Default 100
53541      */
53542     maskOffset : 100,
53543
53544     // private
53545     initEl : function(el){
53546         this.el = Roo.get(el);
53547         this.id = this.el.id || Roo.id();
53548         this.el.on('submit', this.onSubmit, this);
53549         this.el.addClass('x-form');
53550     },
53551
53552     // private
53553     onSubmit : function(e){
53554         e.stopEvent();
53555     },
53556
53557     /**
53558      * Returns true if client-side validation on the form is successful.
53559      * @return Boolean
53560      */
53561     isValid : function(){
53562         var valid = true;
53563         var target = false;
53564         this.items.each(function(f){
53565             if(f.validate()){
53566                 return;
53567             }
53568             
53569             valid = false;
53570                 
53571             if(!target && f.el.isVisible(true)){
53572                 target = f;
53573             }
53574         });
53575         
53576         if(this.errorMask && !valid){
53577             Roo.form.BasicForm.popover.mask(this, target);
53578         }
53579         
53580         return valid;
53581     },
53582     /**
53583      * Returns array of invalid form fields.
53584      * @return Array
53585      */
53586     
53587     invalidFields : function()
53588     {
53589         var ret = [];
53590         this.items.each(function(f){
53591             if(f.validate()){
53592                 return;
53593             }
53594             ret.push(f);
53595             
53596         });
53597         
53598         return ret;
53599     },
53600     
53601     
53602     /**
53603      * DEPRICATED Returns true if any fields in this form have changed since their original load. 
53604      * @return Boolean
53605      */
53606     isDirty : function(){
53607         var dirty = false;
53608         this.items.each(function(f){
53609            if(f.isDirty()){
53610                dirty = true;
53611                return false;
53612            }
53613         });
53614         return dirty;
53615     },
53616     
53617     /**
53618      * Returns true if any fields in this form have changed since their original load. (New version)
53619      * @return Boolean
53620      */
53621     
53622     hasChanged : function()
53623     {
53624         var dirty = false;
53625         this.items.each(function(f){
53626            if(f.hasChanged()){
53627                dirty = true;
53628                return false;
53629            }
53630         });
53631         return dirty;
53632         
53633     },
53634     /**
53635      * Resets all hasChanged to 'false' -
53636      * The old 'isDirty' used 'original value..' however this breaks reset() and a few other things.
53637      * So hasChanged storage is only to be used for this purpose
53638      * @return Boolean
53639      */
53640     resetHasChanged : function()
53641     {
53642         this.items.each(function(f){
53643            f.resetHasChanged();
53644         });
53645         
53646     },
53647     
53648     
53649     /**
53650      * Performs a predefined action (submit or load) or custom actions you define on this form.
53651      * @param {String} actionName The name of the action type
53652      * @param {Object} options (optional) The options to pass to the action.  All of the config options listed
53653      * below are supported by both the submit and load actions unless otherwise noted (custom actions could also
53654      * accept other config options):
53655      * <pre>
53656 Property          Type             Description
53657 ----------------  ---------------  ----------------------------------------------------------------------------------
53658 url               String           The url for the action (defaults to the form's url)
53659 method            String           The form method to use (defaults to the form's method, or POST if not defined)
53660 params            String/Object    The params to pass (defaults to the form's baseParams, or none if not defined)
53661 clientValidation  Boolean          Applies to submit only.  Pass true to call form.isValid() prior to posting to
53662                                    validate the form on the client (defaults to false)
53663      * </pre>
53664      * @return {BasicForm} this
53665      */
53666     doAction : function(action, options){
53667         if(typeof action == 'string'){
53668             action = new Roo.form.Action.ACTION_TYPES[action](this, options);
53669         }
53670         if(this.fireEvent('beforeaction', this, action) !== false){
53671             this.beforeAction(action);
53672             action.run.defer(100, action);
53673         }
53674         return this;
53675     },
53676
53677     /**
53678      * Shortcut to do a submit action.
53679      * @param {Object} options The options to pass to the action (see {@link #doAction} for details)
53680      * @return {BasicForm} this
53681      */
53682     submit : function(options){
53683         this.doAction('submit', options);
53684         return this;
53685     },
53686
53687     /**
53688      * Shortcut to do a load action.
53689      * @param {Object} options The options to pass to the action (see {@link #doAction} for details)
53690      * @return {BasicForm} this
53691      */
53692     load : function(options){
53693         this.doAction('load', options);
53694         return this;
53695     },
53696
53697     /**
53698      * Persists the values in this form into the passed Roo.data.Record object in a beginEdit/endEdit block.
53699      * @param {Record} record The record to edit
53700      * @return {BasicForm} this
53701      */
53702     updateRecord : function(record){
53703         record.beginEdit();
53704         var fs = record.fields;
53705         fs.each(function(f){
53706             var field = this.findField(f.name);
53707             if(field){
53708                 record.set(f.name, field.getValue());
53709             }
53710         }, this);
53711         record.endEdit();
53712         return this;
53713     },
53714
53715     /**
53716      * Loads an Roo.data.Record into this form.
53717      * @param {Record} record The record to load
53718      * @return {BasicForm} this
53719      */
53720     loadRecord : function(record){
53721         this.setValues(record.data);
53722         return this;
53723     },
53724
53725     // private
53726     beforeAction : function(action){
53727         var o = action.options;
53728         
53729         if(!this.disableMask) {
53730             if(this.waitMsgTarget === true){
53731                 this.el.mask(o.waitMsg || "Sending", 'x-mask-loading');
53732             }else if(this.waitMsgTarget){
53733                 this.waitMsgTarget = Roo.get(this.waitMsgTarget);
53734                 this.waitMsgTarget.mask(o.waitMsg || "Sending", 'x-mask-loading');
53735             }else {
53736                 Roo.MessageBox.wait(o.waitMsg || "Sending", o.waitTitle || this.waitTitle || 'Please Wait...');
53737             }
53738         }
53739         
53740          
53741     },
53742
53743     // private
53744     afterAction : function(action, success){
53745         this.activeAction = null;
53746         var o = action.options;
53747         
53748         if(!this.disableMask) {
53749             if(this.waitMsgTarget === true){
53750                 this.el.unmask();
53751             }else if(this.waitMsgTarget){
53752                 this.waitMsgTarget.unmask();
53753             }else{
53754                 Roo.MessageBox.updateProgress(1);
53755                 Roo.MessageBox.hide();
53756             }
53757         }
53758         
53759         if(success){
53760             if(o.reset){
53761                 this.reset();
53762             }
53763             Roo.callback(o.success, o.scope, [this, action]);
53764             this.fireEvent('actioncomplete', this, action);
53765             
53766         }else{
53767             
53768             // failure condition..
53769             // we have a scenario where updates need confirming.
53770             // eg. if a locking scenario exists..
53771             // we look for { errors : { needs_confirm : true }} in the response.
53772             if (
53773                 (typeof(action.result) != 'undefined')  &&
53774                 (typeof(action.result.errors) != 'undefined')  &&
53775                 (typeof(action.result.errors.needs_confirm) != 'undefined')
53776            ){
53777                 var _t = this;
53778                 Roo.MessageBox.confirm(
53779                     "Change requires confirmation",
53780                     action.result.errorMsg,
53781                     function(r) {
53782                         if (r != 'yes') {
53783                             return;
53784                         }
53785                         _t.doAction('submit', { params :  { _submit_confirmed : 1 } }  );
53786                     }
53787                     
53788                 );
53789                 
53790                 
53791                 
53792                 return;
53793             }
53794             
53795             Roo.callback(o.failure, o.scope, [this, action]);
53796             // show an error message if no failed handler is set..
53797             if (!this.hasListener('actionfailed')) {
53798                 Roo.MessageBox.alert("Error",
53799                     (typeof(action.result) != 'undefined' && typeof(action.result.errorMsg) != 'undefined') ?
53800                         action.result.errorMsg :
53801                         "Saving Failed, please check your entries or try again"
53802                 );
53803             }
53804             
53805             this.fireEvent('actionfailed', this, action);
53806         }
53807         
53808     },
53809
53810     /**
53811      * Find a Roo.form.Field in this form by id, dataIndex, name or hiddenName
53812      * @param {String} id The value to search for
53813      * @return Field
53814      */
53815     findField : function(id){
53816         var field = this.items.get(id);
53817         if(!field){
53818             this.items.each(function(f){
53819                 if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){
53820                     field = f;
53821                     return false;
53822                 }
53823             });
53824         }
53825         return field || null;
53826     },
53827
53828     /**
53829      * Add a secondary form to this one, 
53830      * Used to provide tabbed forms. One form is primary, with hidden values 
53831      * which mirror the elements from the other forms.
53832      * 
53833      * @param {Roo.form.Form} form to add.
53834      * 
53835      */
53836     addForm : function(form)
53837     {
53838        
53839         if (this.childForms.indexOf(form) > -1) {
53840             // already added..
53841             return;
53842         }
53843         this.childForms.push(form);
53844         var n = '';
53845         Roo.each(form.allItems, function (fe) {
53846             
53847             n = typeof(fe.getName) == 'undefined' ? fe.name : fe.getName();
53848             if (this.findField(n)) { // already added..
53849                 return;
53850             }
53851             var add = new Roo.form.Hidden({
53852                 name : n
53853             });
53854             add.render(this.el);
53855             
53856             this.add( add );
53857         }, this);
53858         
53859     },
53860     /**
53861      * Mark fields in this form invalid in bulk.
53862      * @param {Array/Object} errors Either an array in the form [{id:'fieldId', msg:'The message'},...] or an object hash of {id: msg, id2: msg2}
53863      * @return {BasicForm} this
53864      */
53865     markInvalid : function(errors){
53866         if(errors instanceof Array){
53867             for(var i = 0, len = errors.length; i < len; i++){
53868                 var fieldError = errors[i];
53869                 var f = this.findField(fieldError.id);
53870                 if(f){
53871                     f.markInvalid(fieldError.msg);
53872                 }
53873             }
53874         }else{
53875             var field, id;
53876             for(id in errors){
53877                 if(typeof errors[id] != 'function' && (field = this.findField(id))){
53878                     field.markInvalid(errors[id]);
53879                 }
53880             }
53881         }
53882         Roo.each(this.childForms || [], function (f) {
53883             f.markInvalid(errors);
53884         });
53885         
53886         return this;
53887     },
53888
53889     /**
53890      * Set values for fields in this form in bulk.
53891      * @param {Array/Object} values Either an array in the form [{id:'fieldId', value:'foo'},...] or an object hash of {id: value, id2: value2}
53892      * @return {BasicForm} this
53893      */
53894     setValues : function(values){
53895         if(values instanceof Array){ // array of objects
53896             for(var i = 0, len = values.length; i < len; i++){
53897                 var v = values[i];
53898                 var f = this.findField(v.id);
53899                 if(f){
53900                     f.setValue(v.value);
53901                     if(this.trackResetOnLoad){
53902                         f.originalValue = f.getValue();
53903                     }
53904                 }
53905             }
53906         }else{ // object hash
53907             var field, id;
53908             for(id in values){
53909                 if(typeof values[id] != 'function' && (field = this.findField(id))){
53910                     
53911                     if (field.setFromData && 
53912                         field.valueField && 
53913                         field.displayField &&
53914                         // combos' with local stores can 
53915                         // be queried via setValue()
53916                         // to set their value..
53917                         (field.store && !field.store.isLocal)
53918                         ) {
53919                         // it's a combo
53920                         var sd = { };
53921                         sd[field.valueField] = typeof(values[field.hiddenName]) == 'undefined' ? '' : values[field.hiddenName];
53922                         sd[field.displayField] = typeof(values[field.name]) == 'undefined' ? '' : values[field.name];
53923                         field.setFromData(sd);
53924                         
53925                     } else {
53926                         field.setValue(values[id]);
53927                     }
53928                     
53929                     
53930                     if(this.trackResetOnLoad){
53931                         field.originalValue = field.getValue();
53932                     }
53933                 }
53934             }
53935         }
53936         this.resetHasChanged();
53937         
53938         
53939         Roo.each(this.childForms || [], function (f) {
53940             f.setValues(values);
53941             f.resetHasChanged();
53942         });
53943                 
53944         return this;
53945     },
53946  
53947     /**
53948      * Returns the fields in this form as an object with key/value pairs. If multiple fields exist with the same name
53949      * they are returned as an array.
53950      * @param {Boolean} asString
53951      * @return {Object}
53952      */
53953     getValues : function(asString)
53954     {
53955         if (this.childForms) {
53956             // copy values from the child forms
53957             Roo.each(this.childForms, function (f) {
53958                 this.setValues(f.getFieldValues()); // get the full set of data, as we might be copying comboboxes from external into this one.
53959             }, this);
53960         }
53961         
53962         // use formdata
53963         if (typeof(FormData) != 'undefined' && asString !== true) {
53964             // this relies on a 'recent' version of chrome apparently...
53965             try {
53966                 var fd = (new FormData(this.el.dom)).entries();
53967                 var ret = {};
53968                 var ent = fd.next();
53969                 while (!ent.done) {
53970                     ret[ent.value[0]] = ent.value[1]; // not sure how this will handle duplicates..
53971                     ent = fd.next();
53972                 };
53973                 return ret;
53974             } catch(e) {
53975                 
53976             }
53977             
53978         }
53979         
53980         
53981         var fs = Roo.lib.Ajax.serializeForm(this.el.dom);
53982         if(asString === true){
53983             return fs;
53984         }
53985         return Roo.urlDecode(fs);
53986     },
53987     
53988     /**
53989      * Returns the fields in this form as an object with key/value pairs. 
53990      * This differs from getValues as it calls getValue on each child item, rather than using dom data.
53991      * Normally this will not return readOnly data 
53992      * @param {Boolean} with_readonly return readonly field data.
53993      * @return {Object}
53994      */
53995     getFieldValues : function(with_readonly)
53996     {
53997         if (this.childForms) {
53998             // copy values from the child forms
53999             // should this call getFieldValues - probably not as we do not currently copy
54000             // hidden fields when we generate..
54001             Roo.each(this.childForms, function (f) {
54002                 this.setValues(f.getFieldValues());
54003             }, this);
54004         }
54005         
54006         var ret = {};
54007         this.items.each(function(f){
54008             
54009             if (f.readOnly && with_readonly !== true) {
54010                 return; // skip read only values. - this is in theory to stop 'old' values being copied over new ones
54011                         // if a subform contains a copy of them.
54012                         // if you have subforms with the same editable data, you will need to copy the data back
54013                         // and forth.
54014             }
54015             
54016             if (!f.getName()) {
54017                 return;
54018             }
54019             var v = f.getValue();
54020             if (f.inputType =='radio') {
54021                 if (typeof(ret[f.getName()]) == 'undefined') {
54022                     ret[f.getName()] = ''; // empty..
54023                 }
54024                 
54025                 if (!f.el.dom.checked) {
54026                     return;
54027                     
54028                 }
54029                 v = f.el.dom.value;
54030                 
54031             }
54032             
54033             // not sure if this supported any more..
54034             if ((typeof(v) == 'object') && f.getRawValue) {
54035                 v = f.getRawValue() ; // dates..
54036             }
54037             // combo boxes where name != hiddenName...
54038             if (f.name != f.getName()) {
54039                 ret[f.name] = f.getRawValue();
54040             }
54041             ret[f.getName()] = v;
54042         });
54043         
54044         return ret;
54045     },
54046
54047     /**
54048      * Clears all invalid messages in this form.
54049      * @return {BasicForm} this
54050      */
54051     clearInvalid : function(){
54052         this.items.each(function(f){
54053            f.clearInvalid();
54054         });
54055         
54056         Roo.each(this.childForms || [], function (f) {
54057             f.clearInvalid();
54058         });
54059         
54060         
54061         return this;
54062     },
54063
54064     /**
54065      * Resets this form.
54066      * @return {BasicForm} this
54067      */
54068     reset : function(){
54069         this.items.each(function(f){
54070             f.reset();
54071         });
54072         
54073         Roo.each(this.childForms || [], function (f) {
54074             f.reset();
54075         });
54076         this.resetHasChanged();
54077         
54078         return this;
54079     },
54080
54081     /**
54082      * Add Roo.form components to this form.
54083      * @param {Field} field1
54084      * @param {Field} field2 (optional)
54085      * @param {Field} etc (optional)
54086      * @return {BasicForm} this
54087      */
54088     add : function(){
54089         this.items.addAll(Array.prototype.slice.call(arguments, 0));
54090         return this;
54091     },
54092
54093
54094     /**
54095      * Removes a field from the items collection (does NOT remove its markup).
54096      * @param {Field} field
54097      * @return {BasicForm} this
54098      */
54099     remove : function(field){
54100         this.items.remove(field);
54101         return this;
54102     },
54103
54104     /**
54105      * Looks at the fields in this form, checks them for an id attribute,
54106      * and calls applyTo on the existing dom element with that id.
54107      * @return {BasicForm} this
54108      */
54109     render : function(){
54110         this.items.each(function(f){
54111             if(f.isFormField && !f.rendered && document.getElementById(f.id)){ // if the element exists
54112                 f.applyTo(f.id);
54113             }
54114         });
54115         return this;
54116     },
54117
54118     /**
54119      * Calls {@link Ext#apply} for all fields in this form with the passed object.
54120      * @param {Object} values
54121      * @return {BasicForm} this
54122      */
54123     applyToFields : function(o){
54124         this.items.each(function(f){
54125            Roo.apply(f, o);
54126         });
54127         return this;
54128     },
54129
54130     /**
54131      * Calls {@link Ext#applyIf} for all field in this form with the passed object.
54132      * @param {Object} values
54133      * @return {BasicForm} this
54134      */
54135     applyIfToFields : function(o){
54136         this.items.each(function(f){
54137            Roo.applyIf(f, o);
54138         });
54139         return this;
54140     }
54141 });
54142
54143 // back compat
54144 Roo.BasicForm = Roo.form.BasicForm;
54145
54146 Roo.apply(Roo.form.BasicForm, {
54147     
54148     popover : {
54149         
54150         padding : 5,
54151         
54152         isApplied : false,
54153         
54154         isMasked : false,
54155         
54156         form : false,
54157         
54158         target : false,
54159         
54160         intervalID : false,
54161         
54162         maskEl : false,
54163         
54164         apply : function()
54165         {
54166             if(this.isApplied){
54167                 return;
54168             }
54169             
54170             this.maskEl = {
54171                 top : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-top-mask" }, true),
54172                 left : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-left-mask" }, true),
54173                 bottom : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-bottom-mask" }, true),
54174                 right : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-right-mask" }, true)
54175             };
54176             
54177             this.maskEl.top.enableDisplayMode("block");
54178             this.maskEl.left.enableDisplayMode("block");
54179             this.maskEl.bottom.enableDisplayMode("block");
54180             this.maskEl.right.enableDisplayMode("block");
54181             
54182             Roo.get(document.body).on('click', function(){
54183                 this.unmask();
54184             }, this);
54185             
54186             Roo.get(document.body).on('touchstart', function(){
54187                 this.unmask();
54188             }, this);
54189             
54190             this.isApplied = true
54191         },
54192         
54193         mask : function(form, target)
54194         {
54195             this.form = form;
54196             
54197             this.target = target;
54198             
54199             if(!this.form.errorMask || !target.el){
54200                 return;
54201             }
54202             
54203             var scrollable = this.target.el.findScrollableParent() || this.target.el.findParent('div.x-layout-active-content', 100, true) || Roo.get(document.body);
54204             
54205             var ot = this.target.el.calcOffsetsTo(scrollable);
54206             
54207             var scrollTo = ot[1] - this.form.maskOffset;
54208             
54209             scrollTo = Math.min(scrollTo, scrollable.dom.scrollHeight);
54210             
54211             scrollable.scrollTo('top', scrollTo);
54212             
54213             var el = this.target.wrap || this.target.el;
54214             
54215             var box = el.getBox();
54216             
54217             this.maskEl.top.setStyle('position', 'absolute');
54218             this.maskEl.top.setStyle('z-index', 10000);
54219             this.maskEl.top.setSize(Roo.lib.Dom.getDocumentWidth(), box.y - this.padding);
54220             this.maskEl.top.setLeft(0);
54221             this.maskEl.top.setTop(0);
54222             this.maskEl.top.show();
54223             
54224             this.maskEl.left.setStyle('position', 'absolute');
54225             this.maskEl.left.setStyle('z-index', 10000);
54226             this.maskEl.left.setSize(box.x - this.padding, box.height + this.padding * 2);
54227             this.maskEl.left.setLeft(0);
54228             this.maskEl.left.setTop(box.y - this.padding);
54229             this.maskEl.left.show();
54230
54231             this.maskEl.bottom.setStyle('position', 'absolute');
54232             this.maskEl.bottom.setStyle('z-index', 10000);
54233             this.maskEl.bottom.setSize(Roo.lib.Dom.getDocumentWidth(), Roo.lib.Dom.getDocumentHeight() - box.bottom - this.padding);
54234             this.maskEl.bottom.setLeft(0);
54235             this.maskEl.bottom.setTop(box.bottom + this.padding);
54236             this.maskEl.bottom.show();
54237
54238             this.maskEl.right.setStyle('position', 'absolute');
54239             this.maskEl.right.setStyle('z-index', 10000);
54240             this.maskEl.right.setSize(Roo.lib.Dom.getDocumentWidth() - box.right - this.padding, box.height + this.padding * 2);
54241             this.maskEl.right.setLeft(box.right + this.padding);
54242             this.maskEl.right.setTop(box.y - this.padding);
54243             this.maskEl.right.show();
54244
54245             this.intervalID = window.setInterval(function() {
54246                 Roo.form.BasicForm.popover.unmask();
54247             }, 10000);
54248
54249             window.onwheel = function(){ return false;};
54250             
54251             (function(){ this.isMasked = true; }).defer(500, this);
54252             
54253         },
54254         
54255         unmask : function()
54256         {
54257             if(!this.isApplied || !this.isMasked || !this.form || !this.target || !this.form.errorMask){
54258                 return;
54259             }
54260             
54261             this.maskEl.top.setStyle('position', 'absolute');
54262             this.maskEl.top.setSize(0, 0).setXY([0, 0]);
54263             this.maskEl.top.hide();
54264
54265             this.maskEl.left.setStyle('position', 'absolute');
54266             this.maskEl.left.setSize(0, 0).setXY([0, 0]);
54267             this.maskEl.left.hide();
54268
54269             this.maskEl.bottom.setStyle('position', 'absolute');
54270             this.maskEl.bottom.setSize(0, 0).setXY([0, 0]);
54271             this.maskEl.bottom.hide();
54272
54273             this.maskEl.right.setStyle('position', 'absolute');
54274             this.maskEl.right.setSize(0, 0).setXY([0, 0]);
54275             this.maskEl.right.hide();
54276             
54277             window.onwheel = function(){ return true;};
54278             
54279             if(this.intervalID){
54280                 window.clearInterval(this.intervalID);
54281                 this.intervalID = false;
54282             }
54283             
54284             this.isMasked = false;
54285             
54286         }
54287         
54288     }
54289     
54290 });/*
54291  * Based on:
54292  * Ext JS Library 1.1.1
54293  * Copyright(c) 2006-2007, Ext JS, LLC.
54294  *
54295  * Originally Released Under LGPL - original licence link has changed is not relivant.
54296  *
54297  * Fork - LGPL
54298  * <script type="text/javascript">
54299  */
54300
54301 /**
54302  * @class Roo.form.Form
54303  * @extends Roo.form.BasicForm
54304  * @children Roo.form.Column Roo.form.FieldSet Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem
54305  * Adds the ability to dynamically render forms with JavaScript to {@link Roo.form.BasicForm}.
54306  * @constructor
54307  * @param {Object} config Configuration options
54308  */
54309 Roo.form.Form = function(config){
54310     var xitems =  [];
54311     if (config.items) {
54312         xitems = config.items;
54313         delete config.items;
54314     }
54315    
54316     
54317     Roo.form.Form.superclass.constructor.call(this, null, config);
54318     this.url = this.url || this.action;
54319     if(!this.root){
54320         this.root = new Roo.form.Layout(Roo.applyIf({
54321             id: Roo.id()
54322         }, config));
54323     }
54324     this.active = this.root;
54325     /**
54326      * Array of all the buttons that have been added to this form via {@link addButton}
54327      * @type Array
54328      */
54329     this.buttons = [];
54330     this.allItems = [];
54331     this.addEvents({
54332         /**
54333          * @event clientvalidation
54334          * If the monitorValid config option is true, this event fires repetitively to notify of valid state
54335          * @param {Form} this
54336          * @param {Boolean} valid true if the form has passed client-side validation
54337          */
54338         clientvalidation: true,
54339         /**
54340          * @event rendered
54341          * Fires when the form is rendered
54342          * @param {Roo.form.Form} form
54343          */
54344         rendered : true
54345     });
54346     
54347     if (this.progressUrl) {
54348             // push a hidden field onto the list of fields..
54349             this.addxtype( {
54350                     xns: Roo.form, 
54351                     xtype : 'Hidden', 
54352                     name : 'UPLOAD_IDENTIFIER' 
54353             });
54354         }
54355         
54356     
54357     Roo.each(xitems, this.addxtype, this);
54358     
54359 };
54360
54361 Roo.extend(Roo.form.Form, Roo.form.BasicForm, {
54362      /**
54363      * @cfg {Roo.Button} buttons[] buttons at bottom of form
54364      */
54365     
54366     /**
54367      * @cfg {Number} labelWidth The width of labels. This property cascades to child containers.
54368      */
54369     /**
54370      * @cfg {String} itemCls A css class to apply to the x-form-item of fields. This property cascades to child containers.
54371      */
54372     /**
54373      * @cfg {String} (left|center|right) buttonAlign Valid values are "left," "center" and "right" (defaults to "center")
54374      */
54375     buttonAlign:'center',
54376
54377     /**
54378      * @cfg {Number} minButtonWidth Minimum width of all buttons in pixels (defaults to 75)
54379      */
54380     minButtonWidth:75,
54381
54382     /**
54383      * @cfg {String} labelAlign (left|top|right) Valid values are "left," "top" and "right" (defaults to "left").
54384      * This property cascades to child containers if not set.
54385      */
54386     labelAlign:'left',
54387
54388     /**
54389      * @cfg {Boolean} monitorValid If true the form monitors its valid state <b>client-side</b> and
54390      * fires a looping event with that state. This is required to bind buttons to the valid
54391      * state using the config value formBind:true on the button.
54392      */
54393     monitorValid : false,
54394
54395     /**
54396      * @cfg {Number} monitorPoll The milliseconds to poll valid state, ignored if monitorValid is not true (defaults to 200)
54397      */
54398     monitorPoll : 200,
54399     
54400     /**
54401      * @cfg {String} progressUrl - Url to return progress data 
54402      */
54403     
54404     progressUrl : false,
54405     /**
54406      * @cfg {boolean|FormData} formData - true to use new 'FormData' post, or set to a new FormData({dom form}) Object, if
54407      * sending a formdata with extra parameters - eg uploaded elements.
54408      */
54409     
54410     formData : false,
54411     
54412     /**
54413      * Opens a new {@link Roo.form.Column} container in the layout stack. If fields are passed after the config, the
54414      * fields are added and the column is closed. If no fields are passed the column remains open
54415      * until end() is called.
54416      * @param {Object} config The config to pass to the column
54417      * @param {Field} field1 (optional)
54418      * @param {Field} field2 (optional)
54419      * @param {Field} etc (optional)
54420      * @return Column The column container object
54421      */
54422     column : function(c){
54423         var col = new Roo.form.Column(c);
54424         this.start(col);
54425         if(arguments.length > 1){ // duplicate code required because of Opera
54426             this.add.apply(this, Array.prototype.slice.call(arguments, 1));
54427             this.end();
54428         }
54429         return col;
54430     },
54431
54432     /**
54433      * Opens a new {@link Roo.form.FieldSet} container in the layout stack. If fields are passed after the config, the
54434      * fields are added and the fieldset is closed. If no fields are passed the fieldset remains open
54435      * until end() is called.
54436      * @param {Object} config The config to pass to the fieldset
54437      * @param {Field} field1 (optional)
54438      * @param {Field} field2 (optional)
54439      * @param {Field} etc (optional)
54440      * @return FieldSet The fieldset container object
54441      */
54442     fieldset : function(c){
54443         var fs = new Roo.form.FieldSet(c);
54444         this.start(fs);
54445         if(arguments.length > 1){ // duplicate code required because of Opera
54446             this.add.apply(this, Array.prototype.slice.call(arguments, 1));
54447             this.end();
54448         }
54449         return fs;
54450     },
54451
54452     /**
54453      * Opens a new {@link Roo.form.Layout} container in the layout stack. If fields are passed after the config, the
54454      * fields are added and the container is closed. If no fields are passed the container remains open
54455      * until end() is called.
54456      * @param {Object} config The config to pass to the Layout
54457      * @param {Field} field1 (optional)
54458      * @param {Field} field2 (optional)
54459      * @param {Field} etc (optional)
54460      * @return Layout The container object
54461      */
54462     container : function(c){
54463         var l = new Roo.form.Layout(c);
54464         this.start(l);
54465         if(arguments.length > 1){ // duplicate code required because of Opera
54466             this.add.apply(this, Array.prototype.slice.call(arguments, 1));
54467             this.end();
54468         }
54469         return l;
54470     },
54471
54472     /**
54473      * Opens the passed container in the layout stack. The container can be any {@link Roo.form.Layout} or subclass.
54474      * @param {Object} container A Roo.form.Layout or subclass of Layout
54475      * @return {Form} this
54476      */
54477     start : function(c){
54478         // cascade label info
54479         Roo.applyIf(c, {'labelAlign': this.active.labelAlign, 'labelWidth': this.active.labelWidth, 'itemCls': this.active.itemCls});
54480         this.active.stack.push(c);
54481         c.ownerCt = this.active;
54482         this.active = c;
54483         return this;
54484     },
54485
54486     /**
54487      * Closes the current open container
54488      * @return {Form} this
54489      */
54490     end : function(){
54491         if(this.active == this.root){
54492             return this;
54493         }
54494         this.active = this.active.ownerCt;
54495         return this;
54496     },
54497
54498     /**
54499      * Add Roo.form components to the current open container (e.g. column, fieldset, etc.).  Fields added via this method
54500      * can also be passed with an additional property of fieldLabel, which if supplied, will provide the text to display
54501      * as the label of the field.
54502      * @param {Field} field1
54503      * @param {Field} field2 (optional)
54504      * @param {Field} etc. (optional)
54505      * @return {Form} this
54506      */
54507     add : function(){
54508         this.active.stack.push.apply(this.active.stack, arguments);
54509         this.allItems.push.apply(this.allItems,arguments);
54510         var r = [];
54511         for(var i = 0, a = arguments, len = a.length; i < len; i++) {
54512             if(a[i].isFormField){
54513                 r.push(a[i]);
54514             }
54515         }
54516         if(r.length > 0){
54517             Roo.form.Form.superclass.add.apply(this, r);
54518         }
54519         return this;
54520     },
54521     
54522
54523     
54524     
54525     
54526      /**
54527      * Find any element that has been added to a form, using it's ID or name
54528      * This can include framesets, columns etc. along with regular fields..
54529      * @param {String} id - id or name to find.
54530      
54531      * @return {Element} e - or false if nothing found.
54532      */
54533     findbyId : function(id)
54534     {
54535         var ret = false;
54536         if (!id) {
54537             return ret;
54538         }
54539         Roo.each(this.allItems, function(f){
54540             if (f.id == id || f.name == id ){
54541                 ret = f;
54542                 return false;
54543             }
54544         });
54545         return ret;
54546     },
54547
54548     
54549     
54550     /**
54551      * Render this form into the passed container. This should only be called once!
54552      * @param {String/HTMLElement/Element} container The element this component should be rendered into
54553      * @return {Form} this
54554      */
54555     render : function(ct)
54556     {
54557         
54558         
54559         
54560         ct = Roo.get(ct);
54561         var o = this.autoCreate || {
54562             tag: 'form',
54563             method : this.method || 'POST',
54564             id : this.id || Roo.id()
54565         };
54566         this.initEl(ct.createChild(o));
54567
54568         this.root.render(this.el);
54569         
54570        
54571              
54572         this.items.each(function(f){
54573             f.render('x-form-el-'+f.id);
54574         });
54575
54576         if(this.buttons.length > 0){
54577             // tables are required to maintain order and for correct IE layout
54578             var tb = this.el.createChild({cls:'x-form-btns-ct', cn: {
54579                 cls:"x-form-btns x-form-btns-"+this.buttonAlign,
54580                 html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'
54581             }}, null, true);
54582             var tr = tb.getElementsByTagName('tr')[0];
54583             for(var i = 0, len = this.buttons.length; i < len; i++) {
54584                 var b = this.buttons[i];
54585                 var td = document.createElement('td');
54586                 td.className = 'x-form-btn-td';
54587                 b.render(tr.appendChild(td));
54588             }
54589         }
54590         if(this.monitorValid){ // initialize after render
54591             this.startMonitoring();
54592         }
54593         this.fireEvent('rendered', this);
54594         return this;
54595     },
54596
54597     /**
54598      * Adds a button to the footer of the form - this <b>must</b> be called before the form is rendered.
54599      * @param {String/Object} config A string becomes the button text, an object can either be a Button config
54600      * object or a valid Roo.DomHelper element config
54601      * @param {Function} handler The function called when the button is clicked
54602      * @param {Object} scope (optional) The scope of the handler function
54603      * @return {Roo.Button}
54604      */
54605     addButton : function(config, handler, scope){
54606         var bc = {
54607             handler: handler,
54608             scope: scope,
54609             minWidth: this.minButtonWidth,
54610             hideParent:true
54611         };
54612         if(typeof config == "string"){
54613             bc.text = config;
54614         }else{
54615             Roo.apply(bc, config);
54616         }
54617         var btn = new Roo.Button(null, bc);
54618         this.buttons.push(btn);
54619         return btn;
54620     },
54621
54622      /**
54623      * Adds a series of form elements (using the xtype property as the factory method.
54624      * Valid xtypes are:  TextField, TextArea .... Button, Layout, FieldSet, Column, (and 'end' to close a block)
54625      * @param {Object} config 
54626      */
54627     
54628     addxtype : function()
54629     {
54630         var ar = Array.prototype.slice.call(arguments, 0);
54631         var ret = false;
54632         for(var i = 0; i < ar.length; i++) {
54633             if (!ar[i]) {
54634                 continue; // skip -- if this happends something invalid got sent, we 
54635                 // should ignore it, as basically that interface element will not show up
54636                 // and that should be pretty obvious!!
54637             }
54638             
54639             if (Roo.form[ar[i].xtype]) {
54640                 ar[i].form = this;
54641                 var fe = Roo.factory(ar[i], Roo.form);
54642                 if (!ret) {
54643                     ret = fe;
54644                 }
54645                 fe.form = this;
54646                 if (fe.store) {
54647                     fe.store.form = this;
54648                 }
54649                 if (fe.isLayout) {  
54650                          
54651                     this.start(fe);
54652                     this.allItems.push(fe);
54653                     if (fe.items && fe.addxtype) {
54654                         fe.addxtype.apply(fe, fe.items);
54655                         delete fe.items;
54656                     }
54657                      this.end();
54658                     continue;
54659                 }
54660                 
54661                 
54662                  
54663                 this.add(fe);
54664               //  console.log('adding ' + ar[i].xtype);
54665             }
54666             if (ar[i].xtype == 'Button') {  
54667                 //console.log('adding button');
54668                 //console.log(ar[i]);
54669                 this.addButton(ar[i]);
54670                 this.allItems.push(fe);
54671                 continue;
54672             }
54673             
54674             if (ar[i].xtype == 'end') { // so we can add fieldsets... / layout etc.
54675                 alert('end is not supported on xtype any more, use items');
54676             //    this.end();
54677             //    //console.log('adding end');
54678             }
54679             
54680         }
54681         return ret;
54682     },
54683     
54684     /**
54685      * Starts monitoring of the valid state of this form. Usually this is done by passing the config
54686      * option "monitorValid"
54687      */
54688     startMonitoring : function(){
54689         if(!this.bound){
54690             this.bound = true;
54691             Roo.TaskMgr.start({
54692                 run : this.bindHandler,
54693                 interval : this.monitorPoll || 200,
54694                 scope: this
54695             });
54696         }
54697     },
54698
54699     /**
54700      * Stops monitoring of the valid state of this form
54701      */
54702     stopMonitoring : function(){
54703         this.bound = false;
54704     },
54705
54706     // private
54707     bindHandler : function(){
54708         if(!this.bound){
54709             return false; // stops binding
54710         }
54711         var valid = true;
54712         this.items.each(function(f){
54713             if(!f.isValid(true)){
54714                 valid = false;
54715                 return false;
54716             }
54717         });
54718         for(var i = 0, len = this.buttons.length; i < len; i++){
54719             var btn = this.buttons[i];
54720             if(btn.formBind === true && btn.disabled === valid){
54721                 btn.setDisabled(!valid);
54722             }
54723         }
54724         this.fireEvent('clientvalidation', this, valid);
54725     }
54726     
54727     
54728     
54729     
54730     
54731     
54732     
54733     
54734 });
54735
54736
54737 // back compat
54738 Roo.Form = Roo.form.Form;
54739 /*
54740  * Based on:
54741  * Ext JS Library 1.1.1
54742  * Copyright(c) 2006-2007, Ext JS, LLC.
54743  *
54744  * Originally Released Under LGPL - original licence link has changed is not relivant.
54745  *
54746  * Fork - LGPL
54747  * <script type="text/javascript">
54748  */
54749
54750 // as we use this in bootstrap.
54751 Roo.namespace('Roo.form');
54752  /**
54753  * @class Roo.form.Action
54754  * Internal Class used to handle form actions
54755  * @constructor
54756  * @param {Roo.form.BasicForm} el The form element or its id
54757  * @param {Object} config Configuration options
54758  */
54759
54760  
54761  
54762 // define the action interface
54763 Roo.form.Action = function(form, options){
54764     this.form = form;
54765     this.options = options || {};
54766 };
54767 /**
54768  * Client Validation Failed
54769  * @const 
54770  */
54771 Roo.form.Action.CLIENT_INVALID = 'client';
54772 /**
54773  * Server Validation Failed
54774  * @const 
54775  */
54776 Roo.form.Action.SERVER_INVALID = 'server';
54777  /**
54778  * Connect to Server Failed
54779  * @const 
54780  */
54781 Roo.form.Action.CONNECT_FAILURE = 'connect';
54782 /**
54783  * Reading Data from Server Failed
54784  * @const 
54785  */
54786 Roo.form.Action.LOAD_FAILURE = 'load';
54787
54788 Roo.form.Action.prototype = {
54789     type : 'default',
54790     failureType : undefined,
54791     response : undefined,
54792     result : undefined,
54793
54794     // interface method
54795     run : function(options){
54796
54797     },
54798
54799     // interface method
54800     success : function(response){
54801
54802     },
54803
54804     // interface method
54805     handleResponse : function(response){
54806
54807     },
54808
54809     // default connection failure
54810     failure : function(response){
54811         
54812         this.response = response;
54813         this.failureType = Roo.form.Action.CONNECT_FAILURE;
54814         this.form.afterAction(this, false);
54815     },
54816
54817     processResponse : function(response){
54818         this.response = response;
54819         if(!response.responseText){
54820             return true;
54821         }
54822         this.result = this.handleResponse(response);
54823         return this.result;
54824     },
54825
54826     // utility functions used internally
54827     getUrl : function(appendParams){
54828         var url = this.options.url || this.form.url || this.form.el.dom.action;
54829         if(appendParams){
54830             var p = this.getParams();
54831             if(p){
54832                 url += (url.indexOf('?') != -1 ? '&' : '?') + p;
54833             }
54834         }
54835         return url;
54836     },
54837
54838     getMethod : function(){
54839         return (this.options.method || this.form.method || this.form.el.dom.method || 'POST').toUpperCase();
54840     },
54841
54842     getParams : function(){
54843         var bp = this.form.baseParams;
54844         var p = this.options.params;
54845         if(p){
54846             if(typeof p == "object"){
54847                 p = Roo.urlEncode(Roo.applyIf(p, bp));
54848             }else if(typeof p == 'string' && bp){
54849                 p += '&' + Roo.urlEncode(bp);
54850             }
54851         }else if(bp){
54852             p = Roo.urlEncode(bp);
54853         }
54854         return p;
54855     },
54856
54857     createCallback : function(){
54858         return {
54859             success: this.success,
54860             failure: this.failure,
54861             scope: this,
54862             timeout: (this.form.timeout*1000),
54863             upload: this.form.fileUpload ? this.success : undefined
54864         };
54865     }
54866 };
54867
54868 Roo.form.Action.Submit = function(form, options){
54869     Roo.form.Action.Submit.superclass.constructor.call(this, form, options);
54870 };
54871
54872 Roo.extend(Roo.form.Action.Submit, Roo.form.Action, {
54873     type : 'submit',
54874
54875     haveProgress : false,
54876     uploadComplete : false,
54877     
54878     // uploadProgress indicator.
54879     uploadProgress : function()
54880     {
54881         if (!this.form.progressUrl) {
54882             return;
54883         }
54884         
54885         if (!this.haveProgress) {
54886             Roo.MessageBox.progress("Uploading", "Uploading");
54887         }
54888         if (this.uploadComplete) {
54889            Roo.MessageBox.hide();
54890            return;
54891         }
54892         
54893         this.haveProgress = true;
54894    
54895         var uid = this.form.findField('UPLOAD_IDENTIFIER').getValue();
54896         
54897         var c = new Roo.data.Connection();
54898         c.request({
54899             url : this.form.progressUrl,
54900             params: {
54901                 id : uid
54902             },
54903             method: 'GET',
54904             success : function(req){
54905                //console.log(data);
54906                 var rdata = false;
54907                 var edata;
54908                 try  {
54909                    rdata = Roo.decode(req.responseText)
54910                 } catch (e) {
54911                     Roo.log("Invalid data from server..");
54912                     Roo.log(edata);
54913                     return;
54914                 }
54915                 if (!rdata || !rdata.success) {
54916                     Roo.log(rdata);
54917                     Roo.MessageBox.alert(Roo.encode(rdata));
54918                     return;
54919                 }
54920                 var data = rdata.data;
54921                 
54922                 if (this.uploadComplete) {
54923                    Roo.MessageBox.hide();
54924                    return;
54925                 }
54926                    
54927                 if (data){
54928                     Roo.MessageBox.updateProgress(data.bytes_uploaded/data.bytes_total,
54929                        Math.floor((data.bytes_total - data.bytes_uploaded)/1000) + 'k remaining'
54930                     );
54931                 }
54932                 this.uploadProgress.defer(2000,this);
54933             },
54934        
54935             failure: function(data) {
54936                 Roo.log('progress url failed ');
54937                 Roo.log(data);
54938             },
54939             scope : this
54940         });
54941            
54942     },
54943     
54944     
54945     run : function()
54946     {
54947         // run get Values on the form, so it syncs any secondary forms.
54948         this.form.getValues();
54949         
54950         var o = this.options;
54951         var method = this.getMethod();
54952         var isPost = method == 'POST';
54953         if(o.clientValidation === false || this.form.isValid()){
54954             
54955             if (this.form.progressUrl) {
54956                 this.form.findField('UPLOAD_IDENTIFIER').setValue(
54957                     (new Date() * 1) + '' + Math.random());
54958                     
54959             } 
54960             
54961             
54962             Roo.Ajax.request(Roo.apply(this.createCallback(), {
54963                 form:this.form.el.dom,
54964                 url:this.getUrl(!isPost),
54965                 method: method,
54966                 params:isPost ? this.getParams() : null,
54967                 isUpload: this.form.fileUpload,
54968                 formData : this.form.formData
54969             }));
54970             
54971             this.uploadProgress();
54972
54973         }else if (o.clientValidation !== false){ // client validation failed
54974             this.failureType = Roo.form.Action.CLIENT_INVALID;
54975             this.form.afterAction(this, false);
54976         }
54977     },
54978
54979     success : function(response)
54980     {
54981         this.uploadComplete= true;
54982         if (this.haveProgress) {
54983             Roo.MessageBox.hide();
54984         }
54985         
54986         
54987         var result = this.processResponse(response);
54988         if(result === true || result.success){
54989             this.form.afterAction(this, true);
54990             return;
54991         }
54992         if(result.errors){
54993             this.form.markInvalid(result.errors);
54994             this.failureType = Roo.form.Action.SERVER_INVALID;
54995         }
54996         this.form.afterAction(this, false);
54997     },
54998     failure : function(response)
54999     {
55000         this.uploadComplete= true;
55001         if (this.haveProgress) {
55002             Roo.MessageBox.hide();
55003         }
55004         
55005         this.response = response;
55006         this.failureType = Roo.form.Action.CONNECT_FAILURE;
55007         this.form.afterAction(this, false);
55008     },
55009     
55010     handleResponse : function(response){
55011         if(this.form.errorReader){
55012             var rs = this.form.errorReader.read(response);
55013             var errors = [];
55014             if(rs.records){
55015                 for(var i = 0, len = rs.records.length; i < len; i++) {
55016                     var r = rs.records[i];
55017                     errors[i] = r.data;
55018                 }
55019             }
55020             if(errors.length < 1){
55021                 errors = null;
55022             }
55023             return {
55024                 success : rs.success,
55025                 errors : errors
55026             };
55027         }
55028         var ret = false;
55029         try {
55030             ret = Roo.decode(response.responseText);
55031         } catch (e) {
55032             ret = {
55033                 success: false,
55034                 errorMsg: "Failed to read server message: " + (response ? response.responseText : ' - no message'),
55035                 errors : []
55036             };
55037         }
55038         return ret;
55039         
55040     }
55041 });
55042
55043
55044 Roo.form.Action.Load = function(form, options){
55045     Roo.form.Action.Load.superclass.constructor.call(this, form, options);
55046     this.reader = this.form.reader;
55047 };
55048
55049 Roo.extend(Roo.form.Action.Load, Roo.form.Action, {
55050     type : 'load',
55051
55052     run : function(){
55053         
55054         Roo.Ajax.request(Roo.apply(
55055                 this.createCallback(), {
55056                     method:this.getMethod(),
55057                     url:this.getUrl(false),
55058                     params:this.getParams()
55059         }));
55060     },
55061
55062     success : function(response){
55063         
55064         var result = this.processResponse(response);
55065         if(result === true || !result.success || !result.data){
55066             this.failureType = Roo.form.Action.LOAD_FAILURE;
55067             this.form.afterAction(this, false);
55068             return;
55069         }
55070         this.form.clearInvalid();
55071         this.form.setValues(result.data);
55072         this.form.afterAction(this, true);
55073     },
55074
55075     handleResponse : function(response){
55076         if(this.form.reader){
55077             var rs = this.form.reader.read(response);
55078             var data = rs.records && rs.records[0] ? rs.records[0].data : null;
55079             return {
55080                 success : rs.success,
55081                 data : data
55082             };
55083         }
55084         return Roo.decode(response.responseText);
55085     }
55086 });
55087
55088 Roo.form.Action.ACTION_TYPES = {
55089     'load' : Roo.form.Action.Load,
55090     'submit' : Roo.form.Action.Submit
55091 };/*
55092  * Based on:
55093  * Ext JS Library 1.1.1
55094  * Copyright(c) 2006-2007, Ext JS, LLC.
55095  *
55096  * Originally Released Under LGPL - original licence link has changed is not relivant.
55097  *
55098  * Fork - LGPL
55099  * <script type="text/javascript">
55100  */
55101  
55102 /**
55103  * @class Roo.form.Layout
55104  * @extends Roo.Component
55105  * @children Roo.form.Column Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem Roo.form.FieldSet
55106  * Creates a container for layout and rendering of fields in an {@link Roo.form.Form}.
55107  * @constructor
55108  * @param {Object} config Configuration options
55109  */
55110 Roo.form.Layout = function(config){
55111     var xitems = [];
55112     if (config.items) {
55113         xitems = config.items;
55114         delete config.items;
55115     }
55116     Roo.form.Layout.superclass.constructor.call(this, config);
55117     this.stack = [];
55118     Roo.each(xitems, this.addxtype, this);
55119      
55120 };
55121
55122 Roo.extend(Roo.form.Layout, Roo.Component, {
55123     /**
55124      * @cfg {String/Object} autoCreate
55125      * A DomHelper element spec used to autocreate the layout (defaults to {tag: 'div', cls: 'x-form-ct'})
55126      */
55127     /**
55128      * @cfg {String/Object/Function} style
55129      * A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or
55130      * a function which returns such a specification.
55131      */
55132     /**
55133      * @cfg {String} labelAlign
55134      * Valid values are "left," "top" and "right" (defaults to "left")
55135      */
55136     /**
55137      * @cfg {Number} labelWidth
55138      * Fixed width in pixels of all field labels (defaults to undefined)
55139      */
55140     /**
55141      * @cfg {Boolean} clear
55142      * True to add a clearing element at the end of this layout, equivalent to CSS clear: both (defaults to true)
55143      */
55144     clear : true,
55145     /**
55146      * @cfg {String} labelSeparator
55147      * The separator to use after field labels (defaults to ':')
55148      */
55149     labelSeparator : ':',
55150     /**
55151      * @cfg {Boolean} hideLabels
55152      * True to suppress the display of field labels in this layout (defaults to false)
55153      */
55154     hideLabels : false,
55155
55156     // private
55157     defaultAutoCreate : {tag: 'div', cls: 'x-form-ct'},
55158     
55159     isLayout : true,
55160     
55161     // private
55162     onRender : function(ct, position){
55163         if(this.el){ // from markup
55164             this.el = Roo.get(this.el);
55165         }else {  // generate
55166             var cfg = this.getAutoCreate();
55167             this.el = ct.createChild(cfg, position);
55168         }
55169         if(this.style){
55170             this.el.applyStyles(this.style);
55171         }
55172         if(this.labelAlign){
55173             this.el.addClass('x-form-label-'+this.labelAlign);
55174         }
55175         if(this.hideLabels){
55176             this.labelStyle = "display:none";
55177             this.elementStyle = "padding-left:0;";
55178         }else{
55179             if(typeof this.labelWidth == 'number'){
55180                 this.labelStyle = "width:"+this.labelWidth+"px;";
55181                 this.elementStyle = "padding-left:"+((this.labelWidth+(typeof this.labelPad == 'number' ? this.labelPad : 5))+'px')+";";
55182             }
55183             if(this.labelAlign == 'top'){
55184                 this.labelStyle = "width:auto;";
55185                 this.elementStyle = "padding-left:0;";
55186             }
55187         }
55188         var stack = this.stack;
55189         var slen = stack.length;
55190         if(slen > 0){
55191             if(!this.fieldTpl){
55192                 var t = new Roo.Template(
55193                     '<div class="x-form-item {5}">',
55194                         '<label for="{0}" style="{2}">{1}{4}</label>',
55195                         '<div class="x-form-element" id="x-form-el-{0}" style="{3}">',
55196                         '</div>',
55197                     '</div><div class="x-form-clear-left"></div>'
55198                 );
55199                 t.disableFormats = true;
55200                 t.compile();
55201                 Roo.form.Layout.prototype.fieldTpl = t;
55202             }
55203             for(var i = 0; i < slen; i++) {
55204                 if(stack[i].isFormField){
55205                     this.renderField(stack[i]);
55206                 }else{
55207                     this.renderComponent(stack[i]);
55208                 }
55209             }
55210         }
55211         if(this.clear){
55212             this.el.createChild({cls:'x-form-clear'});
55213         }
55214     },
55215
55216     // private
55217     renderField : function(f){
55218         f.fieldEl = Roo.get(this.fieldTpl.append(this.el, [
55219                f.id, //0
55220                f.fieldLabel, //1
55221                f.labelStyle||this.labelStyle||'', //2
55222                this.elementStyle||'', //3
55223                typeof f.labelSeparator == 'undefined' ? this.labelSeparator : f.labelSeparator, //4
55224                f.itemCls||this.itemCls||''  //5
55225        ], true).getPrevSibling());
55226     },
55227
55228     // private
55229     renderComponent : function(c){
55230         c.render(c.isLayout ? this.el : this.el.createChild());    
55231     },
55232     /**
55233      * Adds a object form elements (using the xtype property as the factory method.)
55234      * Valid xtypes are:  TextField, TextArea .... Button, Layout, FieldSet, Column
55235      * @param {Object} config 
55236      */
55237     addxtype : function(o)
55238     {
55239         // create the lement.
55240         o.form = this.form;
55241         var fe = Roo.factory(o, Roo.form);
55242         this.form.allItems.push(fe);
55243         this.stack.push(fe);
55244         
55245         if (fe.isFormField) {
55246             this.form.items.add(fe);
55247         }
55248          
55249         return fe;
55250     }
55251 });
55252
55253 /**
55254  * @class Roo.form.Column
55255  * @extends Roo.form.Layout
55256  * @children Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem Roo.form.FieldSet
55257  * Creates a column container for layout and rendering of fields in an {@link Roo.form.Form}.
55258  * @constructor
55259  * @param {Object} config Configuration options
55260  */
55261 Roo.form.Column = function(config){
55262     Roo.form.Column.superclass.constructor.call(this, config);
55263 };
55264
55265 Roo.extend(Roo.form.Column, Roo.form.Layout, {
55266     /**
55267      * @cfg {Number/String} width
55268      * The fixed width of the column in pixels or CSS value (defaults to "auto")
55269      */
55270     /**
55271      * @cfg {String/Object} autoCreate
55272      * A DomHelper element spec used to autocreate the column (defaults to {tag: 'div', cls: 'x-form-ct x-form-column'})
55273      */
55274
55275     // private
55276     defaultAutoCreate : {tag: 'div', cls: 'x-form-ct x-form-column'},
55277
55278     // private
55279     onRender : function(ct, position){
55280         Roo.form.Column.superclass.onRender.call(this, ct, position);
55281         if(this.width){
55282             this.el.setWidth(this.width);
55283         }
55284     }
55285 });
55286
55287
55288 /**
55289  * @class Roo.form.Row
55290  * @extends Roo.form.Layout
55291  * @children Roo.form.Column Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem Roo.form.FieldSet
55292  * Creates a row container for layout and rendering of fields in an {@link Roo.form.Form}.
55293  * @constructor
55294  * @param {Object} config Configuration options
55295  */
55296
55297  
55298 Roo.form.Row = function(config){
55299     Roo.form.Row.superclass.constructor.call(this, config);
55300 };
55301  
55302 Roo.extend(Roo.form.Row, Roo.form.Layout, {
55303       /**
55304      * @cfg {Number/String} width
55305      * The fixed width of the column in pixels or CSS value (defaults to "auto")
55306      */
55307     /**
55308      * @cfg {Number/String} height
55309      * The fixed height of the column in pixels or CSS value (defaults to "auto")
55310      */
55311     defaultAutoCreate : {tag: 'div', cls: 'x-form-ct x-form-row'},
55312     
55313     padWidth : 20,
55314     // private
55315     onRender : function(ct, position){
55316         //console.log('row render');
55317         if(!this.rowTpl){
55318             var t = new Roo.Template(
55319                 '<div class="x-form-item {5}" style="float:left;width:{6}px">',
55320                     '<label for="{0}" style="{2}">{1}{4}</label>',
55321                     '<div class="x-form-element" id="x-form-el-{0}" style="{3}">',
55322                     '</div>',
55323                 '</div>'
55324             );
55325             t.disableFormats = true;
55326             t.compile();
55327             Roo.form.Layout.prototype.rowTpl = t;
55328         }
55329         this.fieldTpl = this.rowTpl;
55330         
55331         //console.log('lw' + this.labelWidth +', la:' + this.labelAlign);
55332         var labelWidth = 100;
55333         
55334         if ((this.labelAlign != 'top')) {
55335             if (typeof this.labelWidth == 'number') {
55336                 labelWidth = this.labelWidth
55337             }
55338             this.padWidth =  20 + labelWidth;
55339             
55340         }
55341         
55342         Roo.form.Column.superclass.onRender.call(this, ct, position);
55343         if(this.width){
55344             this.el.setWidth(this.width);
55345         }
55346         if(this.height){
55347             this.el.setHeight(this.height);
55348         }
55349     },
55350     
55351     // private
55352     renderField : function(f){
55353         f.fieldEl = this.fieldTpl.append(this.el, [
55354                f.id, f.fieldLabel,
55355                f.labelStyle||this.labelStyle||'',
55356                this.elementStyle||'',
55357                typeof f.labelSeparator == 'undefined' ? this.labelSeparator : f.labelSeparator,
55358                f.itemCls||this.itemCls||'',
55359                f.width ? f.width + this.padWidth : 160 + this.padWidth
55360        ],true);
55361     }
55362 });
55363  
55364
55365 /**
55366  * @class Roo.form.FieldSet
55367  * @extends Roo.form.Layout
55368  * @children Roo.form.Column Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem
55369  * Creates a fieldset container for layout and rendering of fields in an {@link Roo.form.Form}.
55370  * @constructor
55371  * @param {Object} config Configuration options
55372  */
55373 Roo.form.FieldSet = function(config){
55374     Roo.form.FieldSet.superclass.constructor.call(this, config);
55375 };
55376
55377 Roo.extend(Roo.form.FieldSet, Roo.form.Layout, {
55378     /**
55379      * @cfg {String} legend
55380      * The text to display as the legend for the FieldSet (defaults to '')
55381      */
55382     /**
55383      * @cfg {String/Object} autoCreate
55384      * A DomHelper element spec used to autocreate the fieldset (defaults to {tag: 'fieldset', cn: {tag:'legend'}})
55385      */
55386
55387     // private
55388     defaultAutoCreate : {tag: 'fieldset', cn: {tag:'legend'}},
55389
55390     // private
55391     onRender : function(ct, position){
55392         Roo.form.FieldSet.superclass.onRender.call(this, ct, position);
55393         if(this.legend){
55394             this.setLegend(this.legend);
55395         }
55396     },
55397
55398     // private
55399     setLegend : function(text){
55400         if(this.rendered){
55401             this.el.child('legend').update(text);
55402         }
55403     }
55404 });/*
55405  * Based on:
55406  * Ext JS Library 1.1.1
55407  * Copyright(c) 2006-2007, Ext JS, LLC.
55408  *
55409  * Originally Released Under LGPL - original licence link has changed is not relivant.
55410  *
55411  * Fork - LGPL
55412  * <script type="text/javascript">
55413  */
55414 /**
55415  * @class Roo.form.VTypes
55416  * Overridable validation definitions. The validations provided are basic and intended to be easily customizable and extended.
55417  * @static
55418  */
55419 Roo.form.VTypes = function(){
55420     // closure these in so they are only created once.
55421     var alpha = /^[a-zA-Z_]+$/;
55422     var alphanum = /^[a-zA-Z0-9_]+$/;
55423     var email = /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,24}$/;
55424     var url = /(((https?)|(ftp)):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@&#;`~=%!]*)(\.\w{2,})?)*\/?)/i;
55425
55426     // All these messages and functions are configurable
55427     return {
55428         /**
55429          * The function used to validate email addresses
55430          * @param {String} value The email address
55431          */
55432         'email' : function(v){
55433             return email.test(v);
55434         },
55435         /**
55436          * The error text to display when the email validation function returns false
55437          * @type String
55438          */
55439         'emailText' : 'This field should be an e-mail address in the format "user@domain.com"',
55440         /**
55441          * The keystroke filter mask to be applied on email input
55442          * @type RegExp
55443          */
55444         'emailMask' : /[a-z0-9_\.\-@]/i,
55445
55446         /**
55447          * The function used to validate URLs
55448          * @param {String} value The URL
55449          */
55450         'url' : function(v){
55451             return url.test(v);
55452         },
55453         /**
55454          * The error text to display when the url validation function returns false
55455          * @type String
55456          */
55457         'urlText' : 'This field should be a URL in the format "http:/'+'/www.domain.com"',
55458         
55459         /**
55460          * The function used to validate alpha values
55461          * @param {String} value The value
55462          */
55463         'alpha' : function(v){
55464             return alpha.test(v);
55465         },
55466         /**
55467          * The error text to display when the alpha validation function returns false
55468          * @type String
55469          */
55470         'alphaText' : 'This field should only contain letters and _',
55471         /**
55472          * The keystroke filter mask to be applied on alpha input
55473          * @type RegExp
55474          */
55475         'alphaMask' : /[a-z_]/i,
55476
55477         /**
55478          * The function used to validate alphanumeric values
55479          * @param {String} value The value
55480          */
55481         'alphanum' : function(v){
55482             return alphanum.test(v);
55483         },
55484         /**
55485          * The error text to display when the alphanumeric validation function returns false
55486          * @type String
55487          */
55488         'alphanumText' : 'This field should only contain letters, numbers and _',
55489         /**
55490          * The keystroke filter mask to be applied on alphanumeric input
55491          * @type RegExp
55492          */
55493         'alphanumMask' : /[a-z0-9_]/i
55494     };
55495 }();//<script type="text/javascript">
55496
55497 /**
55498  * @class Roo.form.FCKeditor
55499  * @extends Roo.form.TextArea
55500  * Wrapper around the FCKEditor http://www.fckeditor.net
55501  * @constructor
55502  * Creates a new FCKeditor
55503  * @param {Object} config Configuration options
55504  */
55505 Roo.form.FCKeditor = function(config){
55506     Roo.form.FCKeditor.superclass.constructor.call(this, config);
55507     this.addEvents({
55508          /**
55509          * @event editorinit
55510          * Fired when the editor is initialized - you can add extra handlers here..
55511          * @param {FCKeditor} this
55512          * @param {Object} the FCK object.
55513          */
55514         editorinit : true
55515     });
55516     
55517     
55518 };
55519 Roo.form.FCKeditor.editors = { };
55520 Roo.extend(Roo.form.FCKeditor, Roo.form.TextArea,
55521 {
55522     //defaultAutoCreate : {
55523     //    tag : "textarea",style   : "width:100px;height:60px;" ,autocomplete    : "off"
55524     //},
55525     // private
55526     /**
55527      * @cfg {Object} fck options - see fck manual for details.
55528      */
55529     fckconfig : false,
55530     
55531     /**
55532      * @cfg {Object} fck toolbar set (Basic or Default)
55533      */
55534     toolbarSet : 'Basic',
55535     /**
55536      * @cfg {Object} fck BasePath
55537      */ 
55538     basePath : '/fckeditor/',
55539     
55540     
55541     frame : false,
55542     
55543     value : '',
55544     
55545    
55546     onRender : function(ct, position)
55547     {
55548         if(!this.el){
55549             this.defaultAutoCreate = {
55550                 tag: "textarea",
55551                 style:"width:300px;height:60px;",
55552                 autocomplete: "new-password"
55553             };
55554         }
55555         Roo.form.FCKeditor.superclass.onRender.call(this, ct, position);
55556         /*
55557         if(this.grow){
55558             this.textSizeEl = Roo.DomHelper.append(document.body, {tag: "pre", cls: "x-form-grow-sizer"});
55559             if(this.preventScrollbars){
55560                 this.el.setStyle("overflow", "hidden");
55561             }
55562             this.el.setHeight(this.growMin);
55563         }
55564         */
55565         //console.log('onrender' + this.getId() );
55566         Roo.form.FCKeditor.editors[this.getId()] = this;
55567          
55568
55569         this.replaceTextarea() ;
55570         
55571     },
55572     
55573     getEditor : function() {
55574         return this.fckEditor;
55575     },
55576     /**
55577      * Sets a data value into the field and validates it.  To set the value directly without validation see {@link #setRawValue}.
55578      * @param {Mixed} value The value to set
55579      */
55580     
55581     
55582     setValue : function(value)
55583     {
55584         //console.log('setValue: ' + value);
55585         
55586         if(typeof(value) == 'undefined') { // not sure why this is happending...
55587             return;
55588         }
55589         Roo.form.FCKeditor.superclass.setValue.apply(this,[value]);
55590         
55591         //if(!this.el || !this.getEditor()) {
55592         //    this.value = value;
55593             //this.setValue.defer(100,this,[value]);    
55594         //    return;
55595         //} 
55596         
55597         if(!this.getEditor()) {
55598             return;
55599         }
55600         
55601         this.getEditor().SetData(value);
55602         
55603         //
55604
55605     },
55606
55607     /**
55608      * Returns the normalized data value (undefined or emptyText will be returned as '').  To return the raw value see {@link #getRawValue}.
55609      * @return {Mixed} value The field value
55610      */
55611     getValue : function()
55612     {
55613         
55614         if (this.frame && this.frame.dom.style.display == 'none') {
55615             return Roo.form.FCKeditor.superclass.getValue.call(this);
55616         }
55617         
55618         if(!this.el || !this.getEditor()) {
55619            
55620            // this.getValue.defer(100,this); 
55621             return this.value;
55622         }
55623        
55624         
55625         var value=this.getEditor().GetData();
55626         Roo.form.FCKeditor.superclass.setValue.apply(this,[value]);
55627         return Roo.form.FCKeditor.superclass.getValue.call(this);
55628         
55629
55630     },
55631
55632     /**
55633      * Returns the raw data value which may or may not be a valid, defined value.  To return a normalized value see {@link #getValue}.
55634      * @return {Mixed} value The field value
55635      */
55636     getRawValue : function()
55637     {
55638         if (this.frame && this.frame.dom.style.display == 'none') {
55639             return Roo.form.FCKeditor.superclass.getRawValue.call(this);
55640         }
55641         
55642         if(!this.el || !this.getEditor()) {
55643             //this.getRawValue.defer(100,this); 
55644             return this.value;
55645             return;
55646         }
55647         
55648         
55649         
55650         var value=this.getEditor().GetData();
55651         Roo.form.FCKeditor.superclass.setRawValue.apply(this,[value]);
55652         return Roo.form.FCKeditor.superclass.getRawValue.call(this);
55653          
55654     },
55655     
55656     setSize : function(w,h) {
55657         
55658         
55659         
55660         //if (this.frame && this.frame.dom.style.display == 'none') {
55661         //    Roo.form.FCKeditor.superclass.setSize.apply(this, [w, h]);
55662         //    return;
55663         //}
55664         //if(!this.el || !this.getEditor()) {
55665         //    this.setSize.defer(100,this, [w,h]); 
55666         //    return;
55667         //}
55668         
55669         
55670         
55671         Roo.form.FCKeditor.superclass.setSize.apply(this, [w, h]);
55672         
55673         this.frame.dom.setAttribute('width', w);
55674         this.frame.dom.setAttribute('height', h);
55675         this.frame.setSize(w,h);
55676         
55677     },
55678     
55679     toggleSourceEdit : function(value) {
55680         
55681       
55682          
55683         this.el.dom.style.display = value ? '' : 'none';
55684         this.frame.dom.style.display = value ?  'none' : '';
55685         
55686     },
55687     
55688     
55689     focus: function(tag)
55690     {
55691         if (this.frame.dom.style.display == 'none') {
55692             return Roo.form.FCKeditor.superclass.focus.call(this);
55693         }
55694         if(!this.el || !this.getEditor()) {
55695             this.focus.defer(100,this, [tag]); 
55696             return;
55697         }
55698         
55699         
55700         
55701         
55702         var tgs = this.getEditor().EditorDocument.getElementsByTagName(tag);
55703         this.getEditor().Focus();
55704         if (tgs.length) {
55705             if (!this.getEditor().Selection.GetSelection()) {
55706                 this.focus.defer(100,this, [tag]); 
55707                 return;
55708             }
55709             
55710             
55711             var r = this.getEditor().EditorDocument.createRange();
55712             r.setStart(tgs[0],0);
55713             r.setEnd(tgs[0],0);
55714             this.getEditor().Selection.GetSelection().removeAllRanges();
55715             this.getEditor().Selection.GetSelection().addRange(r);
55716             this.getEditor().Focus();
55717         }
55718         
55719     },
55720     
55721     
55722     
55723     replaceTextarea : function()
55724     {
55725         if ( document.getElementById( this.getId() + '___Frame' ) ) {
55726             return ;
55727         }
55728         //if ( !this.checkBrowser || this._isCompatibleBrowser() )
55729         //{
55730             // We must check the elements firstly using the Id and then the name.
55731         var oTextarea = document.getElementById( this.getId() );
55732         
55733         var colElementsByName = document.getElementsByName( this.getId() ) ;
55734          
55735         oTextarea.style.display = 'none' ;
55736
55737         if ( oTextarea.tabIndex ) {            
55738             this.TabIndex = oTextarea.tabIndex ;
55739         }
55740         
55741         this._insertHtmlBefore( this._getConfigHtml(), oTextarea ) ;
55742         this._insertHtmlBefore( this._getIFrameHtml(), oTextarea ) ;
55743         this.frame = Roo.get(this.getId() + '___Frame')
55744     },
55745     
55746     _getConfigHtml : function()
55747     {
55748         var sConfig = '' ;
55749
55750         for ( var o in this.fckconfig ) {
55751             sConfig += sConfig.length > 0  ? '&amp;' : '';
55752             sConfig += encodeURIComponent( o ) + '=' + encodeURIComponent( this.fckconfig[o] ) ;
55753         }
55754
55755         return '<input type="hidden" id="' + this.getId() + '___Config" value="' + sConfig + '" style="display:none" />' ;
55756     },
55757     
55758     
55759     _getIFrameHtml : function()
55760     {
55761         var sFile = 'fckeditor.html' ;
55762         /* no idea what this is about..
55763         try
55764         {
55765             if ( (/fcksource=true/i).test( window.top.location.search ) )
55766                 sFile = 'fckeditor.original.html' ;
55767         }
55768         catch (e) { 
55769         */
55770
55771         var sLink = this.basePath + 'editor/' + sFile + '?InstanceName=' + encodeURIComponent( this.getId() ) ;
55772         sLink += this.toolbarSet ? ( '&amp;Toolbar=' + this.toolbarSet)  : '';
55773         
55774         
55775         var html = '<iframe id="' + this.getId() +
55776             '___Frame" src="' + sLink +
55777             '" width="' + this.width +
55778             '" height="' + this.height + '"' +
55779             (this.tabIndex ?  ' tabindex="' + this.tabIndex + '"' :'' ) +
55780             ' frameborder="0" scrolling="no"></iframe>' ;
55781
55782         return html ;
55783     },
55784     
55785     _insertHtmlBefore : function( html, element )
55786     {
55787         if ( element.insertAdjacentHTML )       {
55788             // IE
55789             element.insertAdjacentHTML( 'beforeBegin', html ) ;
55790         } else { // Gecko
55791             var oRange = document.createRange() ;
55792             oRange.setStartBefore( element ) ;
55793             var oFragment = oRange.createContextualFragment( html );
55794             element.parentNode.insertBefore( oFragment, element ) ;
55795         }
55796     }
55797     
55798     
55799   
55800     
55801     
55802     
55803     
55804
55805 });
55806
55807 //Roo.reg('fckeditor', Roo.form.FCKeditor);
55808
55809 function FCKeditor_OnComplete(editorInstance){
55810     var f = Roo.form.FCKeditor.editors[editorInstance.Name];
55811     f.fckEditor = editorInstance;
55812     //console.log("loaded");
55813     f.fireEvent('editorinit', f, editorInstance);
55814
55815   
55816
55817  
55818
55819
55820
55821
55822
55823
55824
55825
55826
55827
55828
55829
55830
55831
55832
55833 //<script type="text/javascript">
55834 /**
55835  * @class Roo.form.GridField
55836  * @extends Roo.form.Field
55837  * Embed a grid (or editable grid into a form)
55838  * STATUS ALPHA
55839  * 
55840  * This embeds a grid in a form, the value of the field should be the json encoded array of rows
55841  * it needs 
55842  * xgrid.store = Roo.data.Store
55843  * xgrid.store.proxy = Roo.data.MemoryProxy (data = [] )
55844  * xgrid.store.reader = Roo.data.JsonReader 
55845  * 
55846  * 
55847  * @constructor
55848  * Creates a new GridField
55849  * @param {Object} config Configuration options
55850  */
55851 Roo.form.GridField = function(config){
55852     Roo.form.GridField.superclass.constructor.call(this, config);
55853      
55854 };
55855
55856 Roo.extend(Roo.form.GridField, Roo.form.Field,  {
55857     /**
55858      * @cfg {Number} width  - used to restrict width of grid..
55859      */
55860     width : 100,
55861     /**
55862      * @cfg {Number} height - used to restrict height of grid..
55863      */
55864     height : 50,
55865      /**
55866      * @cfg {Object} xgrid (xtype'd description of grid) { xtype : 'Grid', dataSource: .... }
55867          * 
55868          *}
55869      */
55870     xgrid : false, 
55871     /**
55872      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
55873      * {tag: "input", type: "checkbox", autocomplete: "off"})
55874      */
55875    // defaultAutoCreate : { tag: 'div' },
55876     defaultAutoCreate : { tag: 'input', type: 'hidden', autocomplete: 'new-password'},
55877     /**
55878      * @cfg {String} addTitle Text to include for adding a title.
55879      */
55880     addTitle : false,
55881     //
55882     onResize : function(){
55883         Roo.form.Field.superclass.onResize.apply(this, arguments);
55884     },
55885
55886     initEvents : function(){
55887         // Roo.form.Checkbox.superclass.initEvents.call(this);
55888         // has no events...
55889        
55890     },
55891
55892
55893     getResizeEl : function(){
55894         return this.wrap;
55895     },
55896
55897     getPositionEl : function(){
55898         return this.wrap;
55899     },
55900
55901     // private
55902     onRender : function(ct, position){
55903         
55904         this.style = this.style || 'overflow: hidden; border:1px solid #c3daf9;';
55905         var style = this.style;
55906         delete this.style;
55907         
55908         Roo.form.GridField.superclass.onRender.call(this, ct, position);
55909         this.wrap = this.el.wrap({cls: ''}); // not sure why ive done thsi...
55910         this.viewEl = this.wrap.createChild({ tag: 'div' });
55911         if (style) {
55912             this.viewEl.applyStyles(style);
55913         }
55914         if (this.width) {
55915             this.viewEl.setWidth(this.width);
55916         }
55917         if (this.height) {
55918             this.viewEl.setHeight(this.height);
55919         }
55920         //if(this.inputValue !== undefined){
55921         //this.setValue(this.value);
55922         
55923         
55924         this.grid = new Roo.grid[this.xgrid.xtype](this.viewEl, this.xgrid);
55925         
55926         
55927         this.grid.render();
55928         this.grid.getDataSource().on('remove', this.refreshValue, this);
55929         this.grid.getDataSource().on('update', this.refreshValue, this);
55930         this.grid.on('afteredit', this.refreshValue, this);
55931  
55932     },
55933      
55934     
55935     /**
55936      * Sets the value of the item. 
55937      * @param {String} either an object  or a string..
55938      */
55939     setValue : function(v){
55940         //this.value = v;
55941         v = v || []; // empty set..
55942         // this does not seem smart - it really only affects memoryproxy grids..
55943         if (this.grid && this.grid.getDataSource() && typeof(v) != 'undefined') {
55944             var ds = this.grid.getDataSource();
55945             // assumes a json reader..
55946             var data = {}
55947             data[ds.reader.meta.root ] =  typeof(v) == 'string' ? Roo.decode(v) : v;
55948             ds.loadData( data);
55949         }
55950         // clear selection so it does not get stale.
55951         if (this.grid.sm) { 
55952             this.grid.sm.clearSelections();
55953         }
55954         
55955         Roo.form.GridField.superclass.setValue.call(this, v);
55956         this.refreshValue();
55957         // should load data in the grid really....
55958     },
55959     
55960     // private
55961     refreshValue: function() {
55962          var val = [];
55963         this.grid.getDataSource().each(function(r) {
55964             val.push(r.data);
55965         });
55966         this.el.dom.value = Roo.encode(val);
55967     }
55968     
55969      
55970     
55971     
55972 });/*
55973  * Based on:
55974  * Ext JS Library 1.1.1
55975  * Copyright(c) 2006-2007, Ext JS, LLC.
55976  *
55977  * Originally Released Under LGPL - original licence link has changed is not relivant.
55978  *
55979  * Fork - LGPL
55980  * <script type="text/javascript">
55981  */
55982 /**
55983  * @class Roo.form.DisplayField
55984  * @extends Roo.form.Field
55985  * A generic Field to display non-editable data.
55986  * @cfg {Boolean} closable (true|false) default false
55987  * @constructor
55988  * Creates a new Display Field item.
55989  * @param {Object} config Configuration options
55990  */
55991 Roo.form.DisplayField = function(config){
55992     Roo.form.DisplayField.superclass.constructor.call(this, config);
55993     
55994     this.addEvents({
55995         /**
55996          * @event close
55997          * Fires after the click the close btn
55998              * @param {Roo.form.DisplayField} this
55999              */
56000         close : true
56001     });
56002 };
56003
56004 Roo.extend(Roo.form.DisplayField, Roo.form.TextField,  {
56005     inputType:      'hidden',
56006     allowBlank:     true,
56007     readOnly:         true,
56008     
56009  
56010     /**
56011      * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
56012      */
56013     focusClass : undefined,
56014     /**
56015      * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to "x-form-field")
56016      */
56017     fieldClass: 'x-form-field',
56018     
56019      /**
56020      * @cfg {Function} valueRenderer The renderer for the field (so you can reformat output). should return raw HTML
56021      */
56022     valueRenderer: undefined,
56023     
56024     width: 100,
56025     /**
56026      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
56027      * {tag: "input", type: "checkbox", autocomplete: "off"})
56028      */
56029      
56030  //   defaultAutoCreate : { tag: 'input', type: 'hidden', autocomplete: 'off'},
56031  
56032     closable : false,
56033     
56034     onResize : function(){
56035         Roo.form.DisplayField.superclass.onResize.apply(this, arguments);
56036         
56037     },
56038
56039     initEvents : function(){
56040         // Roo.form.Checkbox.superclass.initEvents.call(this);
56041         // has no events...
56042         
56043         if(this.closable){
56044             this.closeEl.on('click', this.onClose, this);
56045         }
56046        
56047     },
56048
56049
56050     getResizeEl : function(){
56051         return this.wrap;
56052     },
56053
56054     getPositionEl : function(){
56055         return this.wrap;
56056     },
56057
56058     // private
56059     onRender : function(ct, position){
56060         
56061         Roo.form.DisplayField.superclass.onRender.call(this, ct, position);
56062         //if(this.inputValue !== undefined){
56063         this.wrap = this.el.wrap();
56064         
56065         this.viewEl = this.wrap.createChild({ tag: 'div', cls: 'x-form-displayfield'});
56066         
56067         if(this.closable){
56068             this.closeEl = this.wrap.createChild({ tag: 'div', cls: 'x-dlg-close'});
56069         }
56070         
56071         if (this.bodyStyle) {
56072             this.viewEl.applyStyles(this.bodyStyle);
56073         }
56074         //this.viewEl.setStyle('padding', '2px');
56075         
56076         this.setValue(this.value);
56077         
56078     },
56079 /*
56080     // private
56081     initValue : Roo.emptyFn,
56082
56083   */
56084
56085         // private
56086     onClick : function(){
56087         
56088     },
56089
56090     /**
56091      * Sets the checked state of the checkbox.
56092      * @param {Boolean/String} checked True, 'true', '1', or 'on' to check the checkbox, any other value will uncheck it.
56093      */
56094     setValue : function(v){
56095         this.value = v;
56096         var html = this.valueRenderer ?  this.valueRenderer(v) : String.format('{0}', v);
56097         // this might be called before we have a dom element..
56098         if (!this.viewEl) {
56099             return;
56100         }
56101         this.viewEl.dom.innerHTML = html;
56102         Roo.form.DisplayField.superclass.setValue.call(this, v);
56103
56104     },
56105     
56106     onClose : function(e)
56107     {
56108         e.preventDefault();
56109         
56110         this.fireEvent('close', this);
56111     }
56112 });/*
56113  * 
56114  * Licence- LGPL
56115  * 
56116  */
56117
56118 /**
56119  * @class Roo.form.DayPicker
56120  * @extends Roo.form.Field
56121  * A Day picker show [M] [T] [W] ....
56122  * @constructor
56123  * Creates a new Day Picker
56124  * @param {Object} config Configuration options
56125  */
56126 Roo.form.DayPicker= function(config){
56127     Roo.form.DayPicker.superclass.constructor.call(this, config);
56128      
56129 };
56130
56131 Roo.extend(Roo.form.DayPicker, Roo.form.Field,  {
56132     /**
56133      * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
56134      */
56135     focusClass : undefined,
56136     /**
56137      * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to "x-form-field")
56138      */
56139     fieldClass: "x-form-field",
56140    
56141     /**
56142      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
56143      * {tag: "input", type: "checkbox", autocomplete: "off"})
56144      */
56145     defaultAutoCreate : { tag: "input", type: 'hidden', autocomplete: "new-password"},
56146     
56147    
56148     actionMode : 'viewEl', 
56149     //
56150     // private
56151  
56152     inputType : 'hidden',
56153     
56154      
56155     inputElement: false, // real input element?
56156     basedOn: false, // ????
56157     
56158     isFormField: true, // not sure where this is needed!!!!
56159
56160     onResize : function(){
56161         Roo.form.Checkbox.superclass.onResize.apply(this, arguments);
56162         if(!this.boxLabel){
56163             this.el.alignTo(this.wrap, 'c-c');
56164         }
56165     },
56166
56167     initEvents : function(){
56168         Roo.form.Checkbox.superclass.initEvents.call(this);
56169         this.el.on("click", this.onClick,  this);
56170         this.el.on("change", this.onClick,  this);
56171     },
56172
56173
56174     getResizeEl : function(){
56175         return this.wrap;
56176     },
56177
56178     getPositionEl : function(){
56179         return this.wrap;
56180     },
56181
56182     
56183     // private
56184     onRender : function(ct, position){
56185         Roo.form.Checkbox.superclass.onRender.call(this, ct, position);
56186        
56187         this.wrap = this.el.wrap({cls: 'x-form-daypick-item '});
56188         
56189         var r1 = '<table><tr>';
56190         var r2 = '<tr class="x-form-daypick-icons">';
56191         for (var i=0; i < 7; i++) {
56192             r1+= '<td><div>' + Date.dayNames[i].substring(0,3) + '</div></td>';
56193             r2+= '<td><img class="x-menu-item-icon" src="' + Roo.BLANK_IMAGE_URL  +'"></td>';
56194         }
56195         
56196         var viewEl = this.wrap.createChild( r1 + '</tr>' + r2 + '</tr></table>');
56197         viewEl.select('img').on('click', this.onClick, this);
56198         this.viewEl = viewEl;   
56199         
56200         
56201         // this will not work on Chrome!!!
56202         this.el.on('DOMAttrModified', this.setFromHidden,  this); //ff
56203         this.el.on('propertychange', this.setFromHidden,  this);  //ie
56204         
56205         
56206           
56207
56208     },
56209
56210     // private
56211     initValue : Roo.emptyFn,
56212
56213     /**
56214      * Returns the checked state of the checkbox.
56215      * @return {Boolean} True if checked, else false
56216      */
56217     getValue : function(){
56218         return this.el.dom.value;
56219         
56220     },
56221
56222         // private
56223     onClick : function(e){ 
56224         //this.setChecked(!this.checked);
56225         Roo.get(e.target).toggleClass('x-menu-item-checked');
56226         this.refreshValue();
56227         //if(this.el.dom.checked != this.checked){
56228         //    this.setValue(this.el.dom.checked);
56229        // }
56230     },
56231     
56232     // private
56233     refreshValue : function()
56234     {
56235         var val = '';
56236         this.viewEl.select('img',true).each(function(e,i,n)  {
56237             val += e.is(".x-menu-item-checked") ? String(n) : '';
56238         });
56239         this.setValue(val, true);
56240     },
56241
56242     /**
56243      * Sets the checked state of the checkbox.
56244      * On is always based on a string comparison between inputValue and the param.
56245      * @param {Boolean/String} value - the value to set 
56246      * @param {Boolean/String} suppressEvent - whether to suppress the checkchange event.
56247      */
56248     setValue : function(v,suppressEvent){
56249         if (!this.el.dom) {
56250             return;
56251         }
56252         var old = this.el.dom.value ;
56253         this.el.dom.value = v;
56254         if (suppressEvent) {
56255             return ;
56256         }
56257          
56258         // update display..
56259         this.viewEl.select('img',true).each(function(e,i,n)  {
56260             
56261             var on = e.is(".x-menu-item-checked");
56262             var newv = v.indexOf(String(n)) > -1;
56263             if (on != newv) {
56264                 e.toggleClass('x-menu-item-checked');
56265             }
56266             
56267         });
56268         
56269         
56270         this.fireEvent('change', this, v, old);
56271         
56272         
56273     },
56274    
56275     // handle setting of hidden value by some other method!!?!?
56276     setFromHidden: function()
56277     {
56278         if(!this.el){
56279             return;
56280         }
56281         //console.log("SET FROM HIDDEN");
56282         //alert('setFrom hidden');
56283         this.setValue(this.el.dom.value);
56284     },
56285     
56286     onDestroy : function()
56287     {
56288         if(this.viewEl){
56289             Roo.get(this.viewEl).remove();
56290         }
56291          
56292         Roo.form.DayPicker.superclass.onDestroy.call(this);
56293     }
56294
56295 });/*
56296  * RooJS Library 1.1.1
56297  * Copyright(c) 2008-2011  Alan Knowles
56298  *
56299  * License - LGPL
56300  */
56301  
56302
56303 /**
56304  * @class Roo.form.ComboCheck
56305  * @extends Roo.form.ComboBox
56306  * A combobox for multiple select items.
56307  *
56308  * FIXME - could do with a reset button..
56309  * 
56310  * @constructor
56311  * Create a new ComboCheck
56312  * @param {Object} config Configuration options
56313  */
56314 Roo.form.ComboCheck = function(config){
56315     Roo.form.ComboCheck.superclass.constructor.call(this, config);
56316     // should verify some data...
56317     // like
56318     // hiddenName = required..
56319     // displayField = required
56320     // valudField == required
56321     var req= [ 'hiddenName', 'displayField', 'valueField' ];
56322     var _t = this;
56323     Roo.each(req, function(e) {
56324         if ((typeof(_t[e]) == 'undefined' ) || !_t[e].length) {
56325             throw "Roo.form.ComboCheck : missing value for: " + e;
56326         }
56327     });
56328     
56329     
56330 };
56331
56332 Roo.extend(Roo.form.ComboCheck, Roo.form.ComboBox, {
56333      
56334      
56335     editable : false,
56336      
56337     selectedClass: 'x-menu-item-checked', 
56338     
56339     // private
56340     onRender : function(ct, position){
56341         var _t = this;
56342         
56343         
56344         
56345         if(!this.tpl){
56346             var cls = 'x-combo-list';
56347
56348             
56349             this.tpl =  new Roo.Template({
56350                 html :  '<div class="'+cls+'-item x-menu-check-item">' +
56351                    '<img class="x-menu-item-icon" style="margin: 0px;" src="' + Roo.BLANK_IMAGE_URL + '">' + 
56352                    '<span>{' + this.displayField + '}</span>' +
56353                     '</div>' 
56354                 
56355             });
56356         }
56357  
56358         
56359         Roo.form.ComboCheck.superclass.onRender.call(this, ct, position);
56360         this.view.singleSelect = false;
56361         this.view.multiSelect = true;
56362         this.view.toggleSelect = true;
56363         this.pageTb.add(new Roo.Toolbar.Fill(), {
56364             
56365             text: 'Done',
56366             handler: function()
56367             {
56368                 _t.collapse();
56369             }
56370         });
56371     },
56372     
56373     onViewOver : function(e, t){
56374         // do nothing...
56375         return;
56376         
56377     },
56378     
56379     onViewClick : function(doFocus,index){
56380         return;
56381         
56382     },
56383     select: function () {
56384         //Roo.log("SELECT CALLED");
56385     },
56386      
56387     selectByValue : function(xv, scrollIntoView){
56388         var ar = this.getValueArray();
56389         var sels = [];
56390         
56391         Roo.each(ar, function(v) {
56392             if(v === undefined || v === null){
56393                 return;
56394             }
56395             var r = this.findRecord(this.valueField, v);
56396             if(r){
56397                 sels.push(this.store.indexOf(r))
56398                 
56399             }
56400         },this);
56401         this.view.select(sels);
56402         return false;
56403     },
56404     
56405     
56406     
56407     onSelect : function(record, index){
56408        // Roo.log("onselect Called");
56409        // this is only called by the clear button now..
56410         this.view.clearSelections();
56411         this.setValue('[]');
56412         if (this.value != this.valueBefore) {
56413             this.fireEvent('change', this, this.value, this.valueBefore);
56414             this.valueBefore = this.value;
56415         }
56416     },
56417     getValueArray : function()
56418     {
56419         var ar = [] ;
56420         
56421         try {
56422             //Roo.log(this.value);
56423             if (typeof(this.value) == 'undefined') {
56424                 return [];
56425             }
56426             var ar = Roo.decode(this.value);
56427             return  ar instanceof Array ? ar : []; //?? valid?
56428             
56429         } catch(e) {
56430             Roo.log(e + "\nRoo.form.ComboCheck:getValueArray  invalid data:" + this.getValue());
56431             return [];
56432         }
56433          
56434     },
56435     expand : function ()
56436     {
56437         
56438         Roo.form.ComboCheck.superclass.expand.call(this);
56439         this.valueBefore = typeof(this.value) == 'undefined' ? '' : this.value;
56440         //this.valueBefore = typeof(this.valueBefore) == 'undefined' ? '' : this.valueBefore;
56441         
56442
56443     },
56444     
56445     collapse : function(){
56446         Roo.form.ComboCheck.superclass.collapse.call(this);
56447         var sl = this.view.getSelectedIndexes();
56448         var st = this.store;
56449         var nv = [];
56450         var tv = [];
56451         var r;
56452         Roo.each(sl, function(i) {
56453             r = st.getAt(i);
56454             nv.push(r.get(this.valueField));
56455         },this);
56456         this.setValue(Roo.encode(nv));
56457         if (this.value != this.valueBefore) {
56458
56459             this.fireEvent('change', this, this.value, this.valueBefore);
56460             this.valueBefore = this.value;
56461         }
56462         
56463     },
56464     
56465     setValue : function(v){
56466         // Roo.log(v);
56467         this.value = v;
56468         
56469         var vals = this.getValueArray();
56470         var tv = [];
56471         Roo.each(vals, function(k) {
56472             var r = this.findRecord(this.valueField, k);
56473             if(r){
56474                 tv.push(r.data[this.displayField]);
56475             }else if(this.valueNotFoundText !== undefined){
56476                 tv.push( this.valueNotFoundText );
56477             }
56478         },this);
56479        // Roo.log(tv);
56480         
56481         Roo.form.ComboBox.superclass.setValue.call(this, tv.join(', '));
56482         this.hiddenField.value = v;
56483         this.value = v;
56484     }
56485     
56486 });/*
56487  * Based on:
56488  * Ext JS Library 1.1.1
56489  * Copyright(c) 2006-2007, Ext JS, LLC.
56490  *
56491  * Originally Released Under LGPL - original licence link has changed is not relivant.
56492  *
56493  * Fork - LGPL
56494  * <script type="text/javascript">
56495  */
56496  
56497 /**
56498  * @class Roo.form.Signature
56499  * @extends Roo.form.Field
56500  * Signature field.  
56501  * @constructor
56502  * 
56503  * @param {Object} config Configuration options
56504  */
56505
56506 Roo.form.Signature = function(config){
56507     Roo.form.Signature.superclass.constructor.call(this, config);
56508     
56509     this.addEvents({// not in used??
56510          /**
56511          * @event confirm
56512          * Fires when the 'confirm' icon is pressed (add a listener to enable add button)
56513              * @param {Roo.form.Signature} combo This combo box
56514              */
56515         'confirm' : true,
56516         /**
56517          * @event reset
56518          * Fires when the 'edit' icon is pressed (add a listener to enable add button)
56519              * @param {Roo.form.ComboBox} combo This combo box
56520              * @param {Roo.data.Record|false} record The data record returned from the underlying store (or false on nothing selected)
56521              */
56522         'reset' : true
56523     });
56524 };
56525
56526 Roo.extend(Roo.form.Signature, Roo.form.Field,  {
56527     /**
56528      * @cfg {Object} labels Label to use when rendering a form.
56529      * defaults to 
56530      * labels : { 
56531      *      clear : "Clear",
56532      *      confirm : "Confirm"
56533      *  }
56534      */
56535     labels : { 
56536         clear : "Clear",
56537         confirm : "Confirm"
56538     },
56539     /**
56540      * @cfg {Number} width The signature panel width (defaults to 300)
56541      */
56542     width: 300,
56543     /**
56544      * @cfg {Number} height The signature panel height (defaults to 100)
56545      */
56546     height : 100,
56547     /**
56548      * @cfg {Boolean} allowBlank False to validate that the value length > 0 (defaults to false)
56549      */
56550     allowBlank : false,
56551     
56552     //private
56553     // {Object} signPanel The signature SVG panel element (defaults to {})
56554     signPanel : {},
56555     // {Boolean} isMouseDown False to validate that the mouse down event (defaults to false)
56556     isMouseDown : false,
56557     // {Boolean} isConfirmed validate the signature is confirmed or not for submitting form (defaults to false)
56558     isConfirmed : false,
56559     // {String} signatureTmp SVG mapping string (defaults to empty string)
56560     signatureTmp : '',
56561     
56562     
56563     defaultAutoCreate : { // modified by initCompnoent..
56564         tag: "input",
56565         type:"hidden"
56566     },
56567
56568     // private
56569     onRender : function(ct, position){
56570         
56571         Roo.form.Signature.superclass.onRender.call(this, ct, position);
56572         
56573         this.wrap = this.el.wrap({
56574             cls:'x-form-signature-wrap', style : 'width: ' + this.width + 'px', cn:{cls:'x-form-signature'}
56575         });
56576         
56577         this.createToolbar(this);
56578         this.signPanel = this.wrap.createChild({
56579                 tag: 'div',
56580                 style: 'width: ' + this.width + 'px; height: ' + this.height + 'px; border: 0;'
56581             }, this.el
56582         );
56583             
56584         this.svgID = Roo.id();
56585         this.svgEl = this.signPanel.createChild({
56586               xmlns : 'http://www.w3.org/2000/svg',
56587               tag : 'svg',
56588               id : this.svgID + "-svg",
56589               width: this.width,
56590               height: this.height,
56591               viewBox: '0 0 '+this.width+' '+this.height,
56592               cn : [
56593                 {
56594                     tag: "rect",
56595                     id: this.svgID + "-svg-r",
56596                     width: this.width,
56597                     height: this.height,
56598                     fill: "#ffa"
56599                 },
56600                 {
56601                     tag: "line",
56602                     id: this.svgID + "-svg-l",
56603                     x1: "0", // start
56604                     y1: (this.height*0.8), // start set the line in 80% of height
56605                     x2: this.width, // end
56606                     y2: (this.height*0.8), // end set the line in 80% of height
56607                     'stroke': "#666",
56608                     'stroke-width': "1",
56609                     'stroke-dasharray': "3",
56610                     'shape-rendering': "crispEdges",
56611                     'pointer-events': "none"
56612                 },
56613                 {
56614                     tag: "path",
56615                     id: this.svgID + "-svg-p",
56616                     'stroke': "navy",
56617                     'stroke-width': "3",
56618                     'fill': "none",
56619                     'pointer-events': 'none'
56620                 }
56621               ]
56622         });
56623         this.createSVG();
56624         this.svgBox = this.svgEl.dom.getScreenCTM();
56625     },
56626     createSVG : function(){ 
56627         var svg = this.signPanel;
56628         var r = svg.select('#'+ this.svgID + '-svg-r', true).first().dom;
56629         var t = this;
56630
56631         r.addEventListener('mousedown', function(e) { return t.down(e); }, false);
56632         r.addEventListener('mousemove', function(e) { return t.move(e); }, false);
56633         r.addEventListener('mouseup', function(e) { return t.up(e); }, false);
56634         r.addEventListener('mouseout', function(e) { return t.up(e); }, false);
56635         r.addEventListener('touchstart', function(e) { return t.down(e); }, false);
56636         r.addEventListener('touchmove', function(e) { return t.move(e); }, false);
56637         r.addEventListener('touchend', function(e) { return t.up(e); }, false);
56638         
56639     },
56640     isTouchEvent : function(e){
56641         return e.type.match(/^touch/);
56642     },
56643     getCoords : function (e) {
56644         var pt    = this.svgEl.dom.createSVGPoint();
56645         pt.x = e.clientX; 
56646         pt.y = e.clientY;
56647         if (this.isTouchEvent(e)) {
56648             pt.x =  e.targetTouches[0].clientX;
56649             pt.y = e.targetTouches[0].clientY;
56650         }
56651         var a = this.svgEl.dom.getScreenCTM();
56652         var b = a.inverse();
56653         var mx = pt.matrixTransform(b);
56654         return mx.x + ',' + mx.y;
56655     },
56656     //mouse event headler 
56657     down : function (e) {
56658         this.signatureTmp += 'M' + this.getCoords(e) + ' ';
56659         this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr('d', this.signatureTmp);
56660         
56661         this.isMouseDown = true;
56662         
56663         e.preventDefault();
56664     },
56665     move : function (e) {
56666         if (this.isMouseDown) {
56667             this.signatureTmp += 'L' + this.getCoords(e) + ' ';
56668             this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr( 'd', this.signatureTmp);
56669         }
56670         
56671         e.preventDefault();
56672     },
56673     up : function (e) {
56674         this.isMouseDown = false;
56675         var sp = this.signatureTmp.split(' ');
56676         
56677         if(sp.length > 1){
56678             if(!sp[sp.length-2].match(/^L/)){
56679                 sp.pop();
56680                 sp.pop();
56681                 sp.push("");
56682                 this.signatureTmp = sp.join(" ");
56683             }
56684         }
56685         if(this.getValue() != this.signatureTmp){
56686             this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#ffa');
56687             this.isConfirmed = false;
56688         }
56689         e.preventDefault();
56690     },
56691     
56692     /**
56693      * Protected method that will not generally be called directly. It
56694      * is called when the editor creates its toolbar. Override this method if you need to
56695      * add custom toolbar buttons.
56696      * @param {HtmlEditor} editor
56697      */
56698     createToolbar : function(editor){
56699          function btn(id, toggle, handler){
56700             var xid = fid + '-'+ id ;
56701             return {
56702                 id : xid,
56703                 cmd : id,
56704                 cls : 'x-btn-icon x-edit-'+id,
56705                 enableToggle:toggle !== false,
56706                 scope: editor, // was editor...
56707                 handler:handler||editor.relayBtnCmd,
56708                 clickEvent:'mousedown',
56709                 tooltip: etb.buttonTips[id] || undefined, ///tips ???
56710                 tabIndex:-1
56711             };
56712         }
56713         
56714         
56715         var tb = new Roo.Toolbar(editor.wrap.dom.firstChild);
56716         this.tb = tb;
56717         this.tb.add(
56718            {
56719                 cls : ' x-signature-btn x-signature-'+id,
56720                 scope: editor, // was editor...
56721                 handler: this.reset,
56722                 clickEvent:'mousedown',
56723                 text: this.labels.clear
56724             },
56725             {
56726                  xtype : 'Fill',
56727                  xns: Roo.Toolbar
56728             }, 
56729             {
56730                 cls : '  x-signature-btn x-signature-'+id,
56731                 scope: editor, // was editor...
56732                 handler: this.confirmHandler,
56733                 clickEvent:'mousedown',
56734                 text: this.labels.confirm
56735             }
56736         );
56737     
56738     },
56739     //public
56740     /**
56741      * when user is clicked confirm then show this image.....
56742      * 
56743      * @return {String} Image Data URI
56744      */
56745     getImageDataURI : function(){
56746         var svg = this.svgEl.dom.parentNode.innerHTML;
56747         var src = 'data:image/svg+xml;base64,'+window.btoa(svg);
56748         return src; 
56749     },
56750     /**
56751      * 
56752      * @return {Boolean} this.isConfirmed
56753      */
56754     getConfirmed : function(){
56755         return this.isConfirmed;
56756     },
56757     /**
56758      * 
56759      * @return {Number} this.width
56760      */
56761     getWidth : function(){
56762         return this.width;
56763     },
56764     /**
56765      * 
56766      * @return {Number} this.height
56767      */
56768     getHeight : function(){
56769         return this.height;
56770     },
56771     // private
56772     getSignature : function(){
56773         return this.signatureTmp;
56774     },
56775     // private
56776     reset : function(){
56777         this.signatureTmp = '';
56778         this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#ffa');
56779         this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr( 'd', '');
56780         this.isConfirmed = false;
56781         Roo.form.Signature.superclass.reset.call(this);
56782     },
56783     setSignature : function(s){
56784         this.signatureTmp = s;
56785         this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#ffa');
56786         this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr( 'd', s);
56787         this.setValue(s);
56788         this.isConfirmed = false;
56789         Roo.form.Signature.superclass.reset.call(this);
56790     }, 
56791     test : function(){
56792 //        Roo.log(this.signPanel.dom.contentWindow.up())
56793     },
56794     //private
56795     setConfirmed : function(){
56796         
56797         
56798         
56799 //        Roo.log(Roo.get(this.signPanel.dom.contentWindow.r).attr('fill', '#cfc'));
56800     },
56801     // private
56802     confirmHandler : function(){
56803         if(!this.getSignature()){
56804             return;
56805         }
56806         
56807         this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#cfc');
56808         this.setValue(this.getSignature());
56809         this.isConfirmed = true;
56810         
56811         this.fireEvent('confirm', this);
56812     },
56813     // private
56814     // Subclasses should provide the validation implementation by overriding this
56815     validateValue : function(value){
56816         if(this.allowBlank){
56817             return true;
56818         }
56819         
56820         if(this.isConfirmed){
56821             return true;
56822         }
56823         return false;
56824     }
56825 });/*
56826  * Based on:
56827  * Ext JS Library 1.1.1
56828  * Copyright(c) 2006-2007, Ext JS, LLC.
56829  *
56830  * Originally Released Under LGPL - original licence link has changed is not relivant.
56831  *
56832  * Fork - LGPL
56833  * <script type="text/javascript">
56834  */
56835  
56836
56837 /**
56838  * @class Roo.form.ComboBox
56839  * @extends Roo.form.TriggerField
56840  * A combobox control with support for autocomplete, remote-loading, paging and many other features.
56841  * @constructor
56842  * Create a new ComboBox.
56843  * @param {Object} config Configuration options
56844  */
56845 Roo.form.Select = function(config){
56846     Roo.form.Select.superclass.constructor.call(this, config);
56847      
56848 };
56849
56850 Roo.extend(Roo.form.Select , Roo.form.ComboBox, {
56851     /**
56852      * @cfg {String/HTMLElement/Element} transform The id, DOM node or element of an existing select to convert to a ComboBox
56853      */
56854     /**
56855      * @cfg {Boolean} lazyRender True to prevent the ComboBox from rendering until requested (should always be used when
56856      * rendering into an Roo.Editor, defaults to false)
56857      */
56858     /**
56859      * @cfg {Boolean/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to:
56860      * {tag: "input", type: "text", size: "24", autocomplete: "off"})
56861      */
56862     /**
56863      * @cfg {Roo.data.Store} store The data store to which this combo is bound (defaults to undefined)
56864      */
56865     /**
56866      * @cfg {String} title If supplied, a header element is created containing this text and added into the top of
56867      * the dropdown list (defaults to undefined, with no header element)
56868      */
56869
56870      /**
56871      * @cfg {String/Roo.Template} tpl The template to use to render the output
56872      */
56873      
56874     // private
56875     defaultAutoCreate : {tag: "select"  },
56876     /**
56877      * @cfg {Number} listWidth The width in pixels of the dropdown list (defaults to the width of the ComboBox field)
56878      */
56879     listWidth: undefined,
56880     /**
56881      * @cfg {String} displayField The underlying data field name to bind to this CombBox (defaults to undefined if
56882      * mode = 'remote' or 'text' if mode = 'local')
56883      */
56884     displayField: undefined,
56885     /**
56886      * @cfg {String} valueField The underlying data value name to bind to this CombBox (defaults to undefined if
56887      * mode = 'remote' or 'value' if mode = 'local'). 
56888      * Note: use of a valueField requires the user make a selection
56889      * in order for a value to be mapped.
56890      */
56891     valueField: undefined,
56892     
56893     
56894     /**
56895      * @cfg {String} hiddenName If specified, a hidden form field with this name is dynamically generated to store the
56896      * field's data value (defaults to the underlying DOM element's name)
56897      */
56898     hiddenName: undefined,
56899     /**
56900      * @cfg {String} listClass CSS class to apply to the dropdown list element (defaults to '')
56901      */
56902     listClass: '',
56903     /**
56904      * @cfg {String} selectedClass CSS class to apply to the selected item in the dropdown list (defaults to 'x-combo-selected')
56905      */
56906     selectedClass: 'x-combo-selected',
56907     /**
56908      * @cfg {String} triggerClass An additional CSS class used to style the trigger button.  The trigger will always get the
56909      * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-arrow-trigger'
56910      * which displays a downward arrow icon).
56911      */
56912     triggerClass : 'x-form-arrow-trigger',
56913     /**
56914      * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
56915      */
56916     shadow:'sides',
56917     /**
56918      * @cfg {String} listAlign A valid anchor position value. See {@link Roo.Element#alignTo} for details on supported
56919      * anchor positions (defaults to 'tl-bl')
56920      */
56921     listAlign: 'tl-bl?',
56922     /**
56923      * @cfg {Number} maxHeight The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300)
56924      */
56925     maxHeight: 300,
56926     /**
56927      * @cfg {String} triggerAction The action to execute when the trigger field is activated.  Use 'all' to run the
56928      * query specified by the allQuery config option (defaults to 'query')
56929      */
56930     triggerAction: 'query',
56931     /**
56932      * @cfg {Number} minChars The minimum number of characters the user must type before autocomplete and typeahead activate
56933      * (defaults to 4, does not apply if editable = false)
56934      */
56935     minChars : 4,
56936     /**
56937      * @cfg {Boolean} typeAhead True to populate and autoselect the remainder of the text being typed after a configurable
56938      * delay (typeAheadDelay) if it matches a known value (defaults to false)
56939      */
56940     typeAhead: false,
56941     /**
56942      * @cfg {Number} queryDelay The length of time in milliseconds to delay between the start of typing and sending the
56943      * query to filter the dropdown list (defaults to 500 if mode = 'remote' or 10 if mode = 'local')
56944      */
56945     queryDelay: 500,
56946     /**
56947      * @cfg {Number} pageSize If greater than 0, a paging toolbar is displayed in the footer of the dropdown list and the
56948      * filter queries will execute with page start and limit parameters.  Only applies when mode = 'remote' (defaults to 0)
56949      */
56950     pageSize: 0,
56951     /**
56952      * @cfg {Boolean} selectOnFocus True to select any existing text in the field immediately on focus.  Only applies
56953      * when editable = true (defaults to false)
56954      */
56955     selectOnFocus:false,
56956     /**
56957      * @cfg {String} queryParam Name of the query as it will be passed on the querystring (defaults to 'query')
56958      */
56959     queryParam: 'query',
56960     /**
56961      * @cfg {String} loadingText The text to display in the dropdown list while data is loading.  Only applies
56962      * when mode = 'remote' (defaults to 'Loading...')
56963      */
56964     loadingText: 'Loading...',
56965     /**
56966      * @cfg {Boolean} resizable True to add a resize handle to the bottom of the dropdown list (defaults to false)
56967      */
56968     resizable: false,
56969     /**
56970      * @cfg {Number} handleHeight The height in pixels of the dropdown list resize handle if resizable = true (defaults to 8)
56971      */
56972     handleHeight : 8,
56973     /**
56974      * @cfg {Boolean} editable False to prevent the user from typing text directly into the field, just like a
56975      * traditional select (defaults to true)
56976      */
56977     editable: true,
56978     /**
56979      * @cfg {String} allQuery The text query to send to the server to return all records for the list with no filtering (defaults to '')
56980      */
56981     allQuery: '',
56982     /**
56983      * @cfg {String} mode Set to 'local' if the ComboBox loads local data (defaults to 'remote' which loads from the server)
56984      */
56985     mode: 'remote',
56986     /**
56987      * @cfg {Number} minListWidth The minimum width of the dropdown list in pixels (defaults to 70, will be ignored if
56988      * listWidth has a higher value)
56989      */
56990     minListWidth : 70,
56991     /**
56992      * @cfg {Boolean} forceSelection True to restrict the selected value to one of the values in the list, false to
56993      * allow the user to set arbitrary text into the field (defaults to false)
56994      */
56995     forceSelection:false,
56996     /**
56997      * @cfg {Number} typeAheadDelay The length of time in milliseconds to wait until the typeahead text is displayed
56998      * if typeAhead = true (defaults to 250)
56999      */
57000     typeAheadDelay : 250,
57001     /**
57002      * @cfg {String} valueNotFoundText When using a name/value combo, if the value passed to setValue is not found in
57003      * the store, valueNotFoundText will be displayed as the field text if defined (defaults to undefined)
57004      */
57005     valueNotFoundText : undefined,
57006     
57007     /**
57008      * @cfg {String} defaultValue The value displayed after loading the store.
57009      */
57010     defaultValue: '',
57011     
57012     /**
57013      * @cfg {Boolean} blockFocus Prevents all focus calls, so it can work with things like HTML edtor bar
57014      */
57015     blockFocus : false,
57016     
57017     /**
57018      * @cfg {Boolean} disableClear Disable showing of clear button.
57019      */
57020     disableClear : false,
57021     /**
57022      * @cfg {Boolean} alwaysQuery  Disable caching of results, and always send query
57023      */
57024     alwaysQuery : false,
57025     
57026     //private
57027     addicon : false,
57028     editicon: false,
57029     
57030     // element that contains real text value.. (when hidden is used..)
57031      
57032     // private
57033     onRender : function(ct, position){
57034         Roo.form.Field.prototype.onRender.call(this, ct, position);
57035         
57036         if(this.store){
57037             this.store.on('beforeload', this.onBeforeLoad, this);
57038             this.store.on('load', this.onLoad, this);
57039             this.store.on('loadexception', this.onLoadException, this);
57040             this.store.load({});
57041         }
57042         
57043         
57044         
57045     },
57046
57047     // private
57048     initEvents : function(){
57049         //Roo.form.ComboBox.superclass.initEvents.call(this);
57050  
57051     },
57052
57053     onDestroy : function(){
57054        
57055         if(this.store){
57056             this.store.un('beforeload', this.onBeforeLoad, this);
57057             this.store.un('load', this.onLoad, this);
57058             this.store.un('loadexception', this.onLoadException, this);
57059         }
57060         //Roo.form.ComboBox.superclass.onDestroy.call(this);
57061     },
57062
57063     // private
57064     fireKey : function(e){
57065         if(e.isNavKeyPress() && !this.list.isVisible()){
57066             this.fireEvent("specialkey", this, e);
57067         }
57068     },
57069
57070     // private
57071     onResize: function(w, h){
57072         
57073         return; 
57074     
57075         
57076     },
57077
57078     /**
57079      * Allow or prevent the user from directly editing the field text.  If false is passed,
57080      * the user will only be able to select from the items defined in the dropdown list.  This method
57081      * is the runtime equivalent of setting the 'editable' config option at config time.
57082      * @param {Boolean} value True to allow the user to directly edit the field text
57083      */
57084     setEditable : function(value){
57085          
57086     },
57087
57088     // private
57089     onBeforeLoad : function(){
57090         
57091         Roo.log("Select before load");
57092         return;
57093     
57094         this.innerList.update(this.loadingText ?
57095                '<div class="loading-indicator">'+this.loadingText+'</div>' : '');
57096         //this.restrictHeight();
57097         this.selectedIndex = -1;
57098     },
57099
57100     // private
57101     onLoad : function(){
57102
57103     
57104         var dom = this.el.dom;
57105         dom.innerHTML = '';
57106          var od = dom.ownerDocument;
57107          
57108         if (this.emptyText) {
57109             var op = od.createElement('option');
57110             op.setAttribute('value', '');
57111             op.innerHTML = String.format('{0}', this.emptyText);
57112             dom.appendChild(op);
57113         }
57114         if(this.store.getCount() > 0){
57115            
57116             var vf = this.valueField;
57117             var df = this.displayField;
57118             this.store.data.each(function(r) {
57119                 // which colmsn to use... testing - cdoe / title..
57120                 var op = od.createElement('option');
57121                 op.setAttribute('value', r.data[vf]);
57122                 op.innerHTML = String.format('{0}', r.data[df]);
57123                 dom.appendChild(op);
57124             });
57125             if (typeof(this.defaultValue != 'undefined')) {
57126                 this.setValue(this.defaultValue);
57127             }
57128             
57129              
57130         }else{
57131             //this.onEmptyResults();
57132         }
57133         //this.el.focus();
57134     },
57135     // private
57136     onLoadException : function()
57137     {
57138         dom.innerHTML = '';
57139             
57140         Roo.log("Select on load exception");
57141         return;
57142     
57143         this.collapse();
57144         Roo.log(this.store.reader.jsonData);
57145         if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
57146             Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
57147         }
57148         
57149         
57150     },
57151     // private
57152     onTypeAhead : function(){
57153          
57154     },
57155
57156     // private
57157     onSelect : function(record, index){
57158         Roo.log('on select?');
57159         return;
57160         if(this.fireEvent('beforeselect', this, record, index) !== false){
57161             this.setFromData(index > -1 ? record.data : false);
57162             this.collapse();
57163             this.fireEvent('select', this, record, index);
57164         }
57165     },
57166
57167     /**
57168      * Returns the currently selected field value or empty string if no value is set.
57169      * @return {String} value The selected value
57170      */
57171     getValue : function(){
57172         var dom = this.el.dom;
57173         this.value = dom.options[dom.selectedIndex].value;
57174         return this.value;
57175         
57176     },
57177
57178     /**
57179      * Clears any text/value currently set in the field
57180      */
57181     clearValue : function(){
57182         this.value = '';
57183         this.el.dom.selectedIndex = this.emptyText ? 0 : -1;
57184         
57185     },
57186
57187     /**
57188      * Sets the specified value into the field.  If the value finds a match, the corresponding record text
57189      * will be displayed in the field.  If the value does not match the data value of an existing item,
57190      * and the valueNotFoundText config option is defined, it will be displayed as the default field text.
57191      * Otherwise the field will be blank (although the value will still be set).
57192      * @param {String} value The value to match
57193      */
57194     setValue : function(v){
57195         var d = this.el.dom;
57196         for (var i =0; i < d.options.length;i++) {
57197             if (v == d.options[i].value) {
57198                 d.selectedIndex = i;
57199                 this.value = v;
57200                 return;
57201             }
57202         }
57203         this.clearValue();
57204     },
57205     /**
57206      * @property {Object} the last set data for the element
57207      */
57208     
57209     lastData : false,
57210     /**
57211      * Sets the value of the field based on a object which is related to the record format for the store.
57212      * @param {Object} value the value to set as. or false on reset?
57213      */
57214     setFromData : function(o){
57215         Roo.log('setfrom data?');
57216          
57217         
57218         
57219     },
57220     // private
57221     reset : function(){
57222         this.clearValue();
57223     },
57224     // private
57225     findRecord : function(prop, value){
57226         
57227         return false;
57228     
57229         var record;
57230         if(this.store.getCount() > 0){
57231             this.store.each(function(r){
57232                 if(r.data[prop] == value){
57233                     record = r;
57234                     return false;
57235                 }
57236                 return true;
57237             });
57238         }
57239         return record;
57240     },
57241     
57242     getName: function()
57243     {
57244         // returns hidden if it's set..
57245         if (!this.rendered) {return ''};
57246         return !this.hiddenName && this.el.dom.name  ? this.el.dom.name : (this.hiddenName || '');
57247         
57248     },
57249      
57250
57251     
57252
57253     // private
57254     onEmptyResults : function(){
57255         Roo.log('empty results');
57256         //this.collapse();
57257     },
57258
57259     /**
57260      * Returns true if the dropdown list is expanded, else false.
57261      */
57262     isExpanded : function(){
57263         return false;
57264     },
57265
57266     /**
57267      * Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire.
57268      * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
57269      * @param {String} value The data value of the item to select
57270      * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
57271      * selected item if it is not currently in view (defaults to true)
57272      * @return {Boolean} True if the value matched an item in the list, else false
57273      */
57274     selectByValue : function(v, scrollIntoView){
57275         Roo.log('select By Value');
57276         return false;
57277     
57278         if(v !== undefined && v !== null){
57279             var r = this.findRecord(this.valueField || this.displayField, v);
57280             if(r){
57281                 this.select(this.store.indexOf(r), scrollIntoView);
57282                 return true;
57283             }
57284         }
57285         return false;
57286     },
57287
57288     /**
57289      * Select an item in the dropdown list by its numeric index in the list. This function does NOT cause the select event to fire.
57290      * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
57291      * @param {Number} index The zero-based index of the list item to select
57292      * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
57293      * selected item if it is not currently in view (defaults to true)
57294      */
57295     select : function(index, scrollIntoView){
57296         Roo.log('select ');
57297         return  ;
57298         
57299         this.selectedIndex = index;
57300         this.view.select(index);
57301         if(scrollIntoView !== false){
57302             var el = this.view.getNode(index);
57303             if(el){
57304                 this.innerList.scrollChildIntoView(el, false);
57305             }
57306         }
57307     },
57308
57309       
57310
57311     // private
57312     validateBlur : function(){
57313         
57314         return;
57315         
57316     },
57317
57318     // private
57319     initQuery : function(){
57320         this.doQuery(this.getRawValue());
57321     },
57322
57323     // private
57324     doForce : function(){
57325         if(this.el.dom.value.length > 0){
57326             this.el.dom.value =
57327                 this.lastSelectionText === undefined ? '' : this.lastSelectionText;
57328              
57329         }
57330     },
57331
57332     /**
57333      * Execute a query to filter the dropdown list.  Fires the beforequery event prior to performing the
57334      * query allowing the query action to be canceled if needed.
57335      * @param {String} query The SQL query to execute
57336      * @param {Boolean} forceAll True to force the query to execute even if there are currently fewer characters
57337      * in the field than the minimum specified by the minChars config option.  It also clears any filter previously
57338      * saved in the current store (defaults to false)
57339      */
57340     doQuery : function(q, forceAll){
57341         
57342         Roo.log('doQuery?');
57343         if(q === undefined || q === null){
57344             q = '';
57345         }
57346         var qe = {
57347             query: q,
57348             forceAll: forceAll,
57349             combo: this,
57350             cancel:false
57351         };
57352         if(this.fireEvent('beforequery', qe)===false || qe.cancel){
57353             return false;
57354         }
57355         q = qe.query;
57356         forceAll = qe.forceAll;
57357         if(forceAll === true || (q.length >= this.minChars)){
57358             if(this.lastQuery != q || this.alwaysQuery){
57359                 this.lastQuery = q;
57360                 if(this.mode == 'local'){
57361                     this.selectedIndex = -1;
57362                     if(forceAll){
57363                         this.store.clearFilter();
57364                     }else{
57365                         this.store.filter(this.displayField, q);
57366                     }
57367                     this.onLoad();
57368                 }else{
57369                     this.store.baseParams[this.queryParam] = q;
57370                     this.store.load({
57371                         params: this.getParams(q)
57372                     });
57373                     this.expand();
57374                 }
57375             }else{
57376                 this.selectedIndex = -1;
57377                 this.onLoad();   
57378             }
57379         }
57380     },
57381
57382     // private
57383     getParams : function(q){
57384         var p = {};
57385         //p[this.queryParam] = q;
57386         if(this.pageSize){
57387             p.start = 0;
57388             p.limit = this.pageSize;
57389         }
57390         return p;
57391     },
57392
57393     /**
57394      * Hides the dropdown list if it is currently expanded. Fires the 'collapse' event on completion.
57395      */
57396     collapse : function(){
57397         
57398     },
57399
57400     // private
57401     collapseIf : function(e){
57402         
57403     },
57404
57405     /**
57406      * Expands the dropdown list if it is currently hidden. Fires the 'expand' event on completion.
57407      */
57408     expand : function(){
57409         
57410     } ,
57411
57412     // private
57413      
57414
57415     /** 
57416     * @cfg {Boolean} grow 
57417     * @hide 
57418     */
57419     /** 
57420     * @cfg {Number} growMin 
57421     * @hide 
57422     */
57423     /** 
57424     * @cfg {Number} growMax 
57425     * @hide 
57426     */
57427     /**
57428      * @hide
57429      * @method autoSize
57430      */
57431     
57432     setWidth : function()
57433     {
57434         
57435     },
57436     getResizeEl : function(){
57437         return this.el;
57438     }
57439 });//<script type="text/javasscript">
57440  
57441
57442 /**
57443  * @class Roo.DDView
57444  * A DnD enabled version of Roo.View.
57445  * @param {Element/String} container The Element in which to create the View.
57446  * @param {String} tpl The template string used to create the markup for each element of the View
57447  * @param {Object} config The configuration properties. These include all the config options of
57448  * {@link Roo.View} plus some specific to this class.<br>
57449  * <p>
57450  * Drag/drop is implemented by adding {@link Roo.data.Record}s to the target DDView. If copying is
57451  * not being performed, the original {@link Roo.data.Record} is removed from the source DDView.<br>
57452  * <p>
57453  * The following extra CSS rules are needed to provide insertion point highlighting:<pre><code>
57454 .x-view-drag-insert-above {
57455         border-top:1px dotted #3366cc;
57456 }
57457 .x-view-drag-insert-below {
57458         border-bottom:1px dotted #3366cc;
57459 }
57460 </code></pre>
57461  * 
57462  */
57463  
57464 Roo.DDView = function(container, tpl, config) {
57465     Roo.DDView.superclass.constructor.apply(this, arguments);
57466     this.getEl().setStyle("outline", "0px none");
57467     this.getEl().unselectable();
57468     if (this.dragGroup) {
57469         this.setDraggable(this.dragGroup.split(","));
57470     }
57471     if (this.dropGroup) {
57472         this.setDroppable(this.dropGroup.split(","));
57473     }
57474     if (this.deletable) {
57475         this.setDeletable();
57476     }
57477     this.isDirtyFlag = false;
57478         this.addEvents({
57479                 "drop" : true
57480         });
57481 };
57482
57483 Roo.extend(Roo.DDView, Roo.View, {
57484 /**     @cfg {String/Array} dragGroup The ddgroup name(s) for the View's DragZone. */
57485 /**     @cfg {String/Array} dropGroup The ddgroup name(s) for the View's DropZone. */
57486 /**     @cfg {Boolean} copy Causes drag operations to copy nodes rather than move. */
57487 /**     @cfg {Boolean} allowCopy Causes ctrl/drag operations to copy nodes rather than move. */
57488
57489         isFormField: true,
57490
57491         reset: Roo.emptyFn,
57492         
57493         clearInvalid: Roo.form.Field.prototype.clearInvalid,
57494
57495         validate: function() {
57496                 return true;
57497         },
57498         
57499         destroy: function() {
57500                 this.purgeListeners();
57501                 this.getEl.removeAllListeners();
57502                 this.getEl().remove();
57503                 if (this.dragZone) {
57504                         if (this.dragZone.destroy) {
57505                                 this.dragZone.destroy();
57506                         }
57507                 }
57508                 if (this.dropZone) {
57509                         if (this.dropZone.destroy) {
57510                                 this.dropZone.destroy();
57511                         }
57512                 }
57513         },
57514
57515 /**     Allows this class to be an Roo.form.Field so it can be found using {@link Roo.form.BasicForm#findField}. */
57516         getName: function() {
57517                 return this.name;
57518         },
57519
57520 /**     Loads the View from a JSON string representing the Records to put into the Store. */
57521         setValue: function(v) {
57522                 if (!this.store) {
57523                         throw "DDView.setValue(). DDView must be constructed with a valid Store";
57524                 }
57525                 var data = {};
57526                 data[this.store.reader.meta.root] = v ? [].concat(v) : [];
57527                 this.store.proxy = new Roo.data.MemoryProxy(data);
57528                 this.store.load();
57529         },
57530
57531 /**     @return {String} a parenthesised list of the ids of the Records in the View. */
57532         getValue: function() {
57533                 var result = '(';
57534                 this.store.each(function(rec) {
57535                         result += rec.id + ',';
57536                 });
57537                 return result.substr(0, result.length - 1) + ')';
57538         },
57539         
57540         getIds: function() {
57541                 var i = 0, result = new Array(this.store.getCount());
57542                 this.store.each(function(rec) {
57543                         result[i++] = rec.id;
57544                 });
57545                 return result;
57546         },
57547         
57548         isDirty: function() {
57549                 return this.isDirtyFlag;
57550         },
57551
57552 /**
57553  *      Part of the Roo.dd.DropZone interface. If no target node is found, the
57554  *      whole Element becomes the target, and this causes the drop gesture to append.
57555  */
57556     getTargetFromEvent : function(e) {
57557                 var target = e.getTarget();
57558                 while ((target !== null) && (target.parentNode != this.el.dom)) {
57559                 target = target.parentNode;
57560                 }
57561                 if (!target) {
57562                         target = this.el.dom.lastChild || this.el.dom;
57563                 }
57564                 return target;
57565     },
57566
57567 /**
57568  *      Create the drag data which consists of an object which has the property "ddel" as
57569  *      the drag proxy element. 
57570  */
57571     getDragData : function(e) {
57572         var target = this.findItemFromChild(e.getTarget());
57573                 if(target) {
57574                         this.handleSelection(e);
57575                         var selNodes = this.getSelectedNodes();
57576             var dragData = {
57577                 source: this,
57578                 copy: this.copy || (this.allowCopy && e.ctrlKey),
57579                 nodes: selNodes,
57580                 records: []
57581                         };
57582                         var selectedIndices = this.getSelectedIndexes();
57583                         for (var i = 0; i < selectedIndices.length; i++) {
57584                                 dragData.records.push(this.store.getAt(selectedIndices[i]));
57585                         }
57586                         if (selNodes.length == 1) {
57587                                 dragData.ddel = target.cloneNode(true); // the div element
57588                         } else {
57589                                 var div = document.createElement('div'); // create the multi element drag "ghost"
57590                                 div.className = 'multi-proxy';
57591                                 for (var i = 0, len = selNodes.length; i < len; i++) {
57592                                         div.appendChild(selNodes[i].cloneNode(true));
57593                                 }
57594                                 dragData.ddel = div;
57595                         }
57596             //console.log(dragData)
57597             //console.log(dragData.ddel.innerHTML)
57598                         return dragData;
57599                 }
57600         //console.log('nodragData')
57601                 return false;
57602     },
57603     
57604 /**     Specify to which ddGroup items in this DDView may be dragged. */
57605     setDraggable: function(ddGroup) {
57606         if (ddGroup instanceof Array) {
57607                 Roo.each(ddGroup, this.setDraggable, this);
57608                 return;
57609         }
57610         if (this.dragZone) {
57611                 this.dragZone.addToGroup(ddGroup);
57612         } else {
57613                         this.dragZone = new Roo.dd.DragZone(this.getEl(), {
57614                                 containerScroll: true,
57615                                 ddGroup: ddGroup 
57616
57617                         });
57618 //                      Draggability implies selection. DragZone's mousedown selects the element.
57619                         if (!this.multiSelect) { this.singleSelect = true; }
57620
57621 //                      Wire the DragZone's handlers up to methods in *this*
57622                         this.dragZone.getDragData = this.getDragData.createDelegate(this);
57623                 }
57624     },
57625
57626 /**     Specify from which ddGroup this DDView accepts drops. */
57627     setDroppable: function(ddGroup) {
57628         if (ddGroup instanceof Array) {
57629                 Roo.each(ddGroup, this.setDroppable, this);
57630                 return;
57631         }
57632         if (this.dropZone) {
57633                 this.dropZone.addToGroup(ddGroup);
57634         } else {
57635                         this.dropZone = new Roo.dd.DropZone(this.getEl(), {
57636                                 containerScroll: true,
57637                                 ddGroup: ddGroup
57638                         });
57639
57640 //                      Wire the DropZone's handlers up to methods in *this*
57641                         this.dropZone.getTargetFromEvent = this.getTargetFromEvent.createDelegate(this);
57642                         this.dropZone.onNodeEnter = this.onNodeEnter.createDelegate(this);
57643                         this.dropZone.onNodeOver = this.onNodeOver.createDelegate(this);
57644                         this.dropZone.onNodeOut = this.onNodeOut.createDelegate(this);
57645                         this.dropZone.onNodeDrop = this.onNodeDrop.createDelegate(this);
57646                 }
57647     },
57648
57649 /**     Decide whether to drop above or below a View node. */
57650     getDropPoint : function(e, n, dd){
57651         if (n == this.el.dom) { return "above"; }
57652                 var t = Roo.lib.Dom.getY(n), b = t + n.offsetHeight;
57653                 var c = t + (b - t) / 2;
57654                 var y = Roo.lib.Event.getPageY(e);
57655                 if(y <= c) {
57656                         return "above";
57657                 }else{
57658                         return "below";
57659                 }
57660     },
57661
57662     onNodeEnter : function(n, dd, e, data){
57663                 return false;
57664     },
57665     
57666     onNodeOver : function(n, dd, e, data){
57667                 var pt = this.getDropPoint(e, n, dd);
57668                 // set the insert point style on the target node
57669                 var dragElClass = this.dropNotAllowed;
57670                 if (pt) {
57671                         var targetElClass;
57672                         if (pt == "above"){
57673                                 dragElClass = n.previousSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-above";
57674                                 targetElClass = "x-view-drag-insert-above";
57675                         } else {
57676                                 dragElClass = n.nextSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-below";
57677                                 targetElClass = "x-view-drag-insert-below";
57678                         }
57679                         if (this.lastInsertClass != targetElClass){
57680                                 Roo.fly(n).replaceClass(this.lastInsertClass, targetElClass);
57681                                 this.lastInsertClass = targetElClass;
57682                         }
57683                 }
57684                 return dragElClass;
57685         },
57686
57687     onNodeOut : function(n, dd, e, data){
57688                 this.removeDropIndicators(n);
57689     },
57690
57691     onNodeDrop : function(n, dd, e, data){
57692         if (this.fireEvent("drop", this, n, dd, e, data) === false) {
57693                 return false;
57694         }
57695         var pt = this.getDropPoint(e, n, dd);
57696                 var insertAt = (n == this.el.dom) ? this.nodes.length : n.nodeIndex;
57697                 if (pt == "below") { insertAt++; }
57698                 for (var i = 0; i < data.records.length; i++) {
57699                         var r = data.records[i];
57700                         var dup = this.store.getById(r.id);
57701                         if (dup && (dd != this.dragZone)) {
57702                                 Roo.fly(this.getNode(this.store.indexOf(dup))).frame("red", 1);
57703                         } else {
57704                                 if (data.copy) {
57705                                         this.store.insert(insertAt++, r.copy());
57706                                 } else {
57707                                         data.source.isDirtyFlag = true;
57708                                         r.store.remove(r);
57709                                         this.store.insert(insertAt++, r);
57710                                 }
57711                                 this.isDirtyFlag = true;
57712                         }
57713                 }
57714                 this.dragZone.cachedTarget = null;
57715                 return true;
57716     },
57717
57718     removeDropIndicators : function(n){
57719                 if(n){
57720                         Roo.fly(n).removeClass([
57721                                 "x-view-drag-insert-above",
57722                                 "x-view-drag-insert-below"]);
57723                         this.lastInsertClass = "_noclass";
57724                 }
57725     },
57726
57727 /**
57728  *      Utility method. Add a delete option to the DDView's context menu.
57729  *      @param {String} imageUrl The URL of the "delete" icon image.
57730  */
57731         setDeletable: function(imageUrl) {
57732                 if (!this.singleSelect && !this.multiSelect) {
57733                         this.singleSelect = true;
57734                 }
57735                 var c = this.getContextMenu();
57736                 this.contextMenu.on("itemclick", function(item) {
57737                         switch (item.id) {
57738                                 case "delete":
57739                                         this.remove(this.getSelectedIndexes());
57740                                         break;
57741                         }
57742                 }, this);
57743                 this.contextMenu.add({
57744                         icon: imageUrl,
57745                         id: "delete",
57746                         text: 'Delete'
57747                 });
57748         },
57749         
57750 /**     Return the context menu for this DDView. */
57751         getContextMenu: function() {
57752                 if (!this.contextMenu) {
57753 //                      Create the View's context menu
57754                         this.contextMenu = new Roo.menu.Menu({
57755                                 id: this.id + "-contextmenu"
57756                         });
57757                         this.el.on("contextmenu", this.showContextMenu, this);
57758                 }
57759                 return this.contextMenu;
57760         },
57761         
57762         disableContextMenu: function() {
57763                 if (this.contextMenu) {
57764                         this.el.un("contextmenu", this.showContextMenu, this);
57765                 }
57766         },
57767
57768         showContextMenu: function(e, item) {
57769         item = this.findItemFromChild(e.getTarget());
57770                 if (item) {
57771                         e.stopEvent();
57772                         this.select(this.getNode(item), this.multiSelect && e.ctrlKey, true);
57773                         this.contextMenu.showAt(e.getXY());
57774             }
57775     },
57776
57777 /**
57778  *      Remove {@link Roo.data.Record}s at the specified indices.
57779  *      @param {Array/Number} selectedIndices The index (or Array of indices) of Records to remove.
57780  */
57781     remove: function(selectedIndices) {
57782                 selectedIndices = [].concat(selectedIndices);
57783                 for (var i = 0; i < selectedIndices.length; i++) {
57784                         var rec = this.store.getAt(selectedIndices[i]);
57785                         this.store.remove(rec);
57786                 }
57787     },
57788
57789 /**
57790  *      Double click fires the event, but also, if this is draggable, and there is only one other
57791  *      related DropZone, it transfers the selected node.
57792  */
57793     onDblClick : function(e){
57794         var item = this.findItemFromChild(e.getTarget());
57795         if(item){
57796             if (this.fireEvent("dblclick", this, this.indexOf(item), item, e) === false) {
57797                 return false;
57798             }
57799             if (this.dragGroup) {
57800                     var targets = Roo.dd.DragDropMgr.getRelated(this.dragZone, true);
57801                     while (targets.indexOf(this.dropZone) > -1) {
57802                             targets.remove(this.dropZone);
57803                                 }
57804                     if (targets.length == 1) {
57805                                         this.dragZone.cachedTarget = null;
57806                         var el = Roo.get(targets[0].getEl());
57807                         var box = el.getBox(true);
57808                         targets[0].onNodeDrop(el.dom, {
57809                                 target: el.dom,
57810                                 xy: [box.x, box.y + box.height - 1]
57811                         }, null, this.getDragData(e));
57812                     }
57813                 }
57814         }
57815     },
57816     
57817     handleSelection: function(e) {
57818                 this.dragZone.cachedTarget = null;
57819         var item = this.findItemFromChild(e.getTarget());
57820         if (!item) {
57821                 this.clearSelections(true);
57822                 return;
57823         }
57824                 if (item && (this.multiSelect || this.singleSelect)){
57825                         if(this.multiSelect && e.shiftKey && (!e.ctrlKey) && this.lastSelection){
57826                                 this.select(this.getNodes(this.indexOf(this.lastSelection), item.nodeIndex), false);
57827                         }else if (this.isSelected(this.getNode(item)) && e.ctrlKey){
57828                                 this.unselect(item);
57829                         } else {
57830                                 this.select(item, this.multiSelect && e.ctrlKey);
57831                                 this.lastSelection = item;
57832                         }
57833                 }
57834     },
57835
57836     onItemClick : function(item, index, e){
57837                 if(this.fireEvent("beforeclick", this, index, item, e) === false){
57838                         return false;
57839                 }
57840                 return true;
57841     },
57842
57843     unselect : function(nodeInfo, suppressEvent){
57844                 var node = this.getNode(nodeInfo);
57845                 if(node && this.isSelected(node)){
57846                         if(this.fireEvent("beforeselect", this, node, this.selections) !== false){
57847                                 Roo.fly(node).removeClass(this.selectedClass);
57848                                 this.selections.remove(node);
57849                                 if(!suppressEvent){
57850                                         this.fireEvent("selectionchange", this, this.selections);
57851                                 }
57852                         }
57853                 }
57854     }
57855 });
57856 /*
57857  * Based on:
57858  * Ext JS Library 1.1.1
57859  * Copyright(c) 2006-2007, Ext JS, LLC.
57860  *
57861  * Originally Released Under LGPL - original licence link has changed is not relivant.
57862  *
57863  * Fork - LGPL
57864  * <script type="text/javascript">
57865  */
57866  
57867 /**
57868  * @class Roo.LayoutManager
57869  * @extends Roo.util.Observable
57870  * Base class for layout managers.
57871  */
57872 Roo.LayoutManager = function(container, config){
57873     Roo.LayoutManager.superclass.constructor.call(this);
57874     this.el = Roo.get(container);
57875     // ie scrollbar fix
57876     if(this.el.dom == document.body && Roo.isIE && !config.allowScroll){
57877         document.body.scroll = "no";
57878     }else if(this.el.dom != document.body && this.el.getStyle('position') == 'static'){
57879         this.el.position('relative');
57880     }
57881     this.id = this.el.id;
57882     this.el.addClass("x-layout-container");
57883     /** false to disable window resize monitoring @type Boolean */
57884     this.monitorWindowResize = true;
57885     this.regions = {};
57886     this.addEvents({
57887         /**
57888          * @event layout
57889          * Fires when a layout is performed. 
57890          * @param {Roo.LayoutManager} this
57891          */
57892         "layout" : true,
57893         /**
57894          * @event regionresized
57895          * Fires when the user resizes a region. 
57896          * @param {Roo.LayoutRegion} region The resized region
57897          * @param {Number} newSize The new size (width for east/west, height for north/south)
57898          */
57899         "regionresized" : true,
57900         /**
57901          * @event regioncollapsed
57902          * Fires when a region is collapsed. 
57903          * @param {Roo.LayoutRegion} region The collapsed region
57904          */
57905         "regioncollapsed" : true,
57906         /**
57907          * @event regionexpanded
57908          * Fires when a region is expanded.  
57909          * @param {Roo.LayoutRegion} region The expanded region
57910          */
57911         "regionexpanded" : true
57912     });
57913     this.updating = false;
57914     Roo.EventManager.onWindowResize(this.onWindowResize, this, true);
57915 };
57916
57917 Roo.extend(Roo.LayoutManager, Roo.util.Observable, {
57918     /**
57919      * Returns true if this layout is currently being updated
57920      * @return {Boolean}
57921      */
57922     isUpdating : function(){
57923         return this.updating; 
57924     },
57925     
57926     /**
57927      * Suspend the LayoutManager from doing auto-layouts while
57928      * making multiple add or remove calls
57929      */
57930     beginUpdate : function(){
57931         this.updating = true;    
57932     },
57933     
57934     /**
57935      * Restore auto-layouts and optionally disable the manager from performing a layout
57936      * @param {Boolean} noLayout true to disable a layout update 
57937      */
57938     endUpdate : function(noLayout){
57939         this.updating = false;
57940         if(!noLayout){
57941             this.layout();
57942         }    
57943     },
57944     
57945     layout: function(){
57946         
57947     },
57948     
57949     onRegionResized : function(region, newSize){
57950         this.fireEvent("regionresized", region, newSize);
57951         this.layout();
57952     },
57953     
57954     onRegionCollapsed : function(region){
57955         this.fireEvent("regioncollapsed", region);
57956     },
57957     
57958     onRegionExpanded : function(region){
57959         this.fireEvent("regionexpanded", region);
57960     },
57961         
57962     /**
57963      * Returns the size of the current view. This method normalizes document.body and element embedded layouts and
57964      * performs box-model adjustments.
57965      * @return {Object} The size as an object {width: (the width), height: (the height)}
57966      */
57967     getViewSize : function(){
57968         var size;
57969         if(this.el.dom != document.body){
57970             size = this.el.getSize();
57971         }else{
57972             size = {width: Roo.lib.Dom.getViewWidth(), height: Roo.lib.Dom.getViewHeight()};
57973         }
57974         size.width -= this.el.getBorderWidth("lr")-this.el.getPadding("lr");
57975         size.height -= this.el.getBorderWidth("tb")-this.el.getPadding("tb");
57976         return size;
57977     },
57978     
57979     /**
57980      * Returns the Element this layout is bound to.
57981      * @return {Roo.Element}
57982      */
57983     getEl : function(){
57984         return this.el;
57985     },
57986     
57987     /**
57988      * Returns the specified region.
57989      * @param {String} target The region key ('center', 'north', 'south', 'east' or 'west')
57990      * @return {Roo.LayoutRegion}
57991      */
57992     getRegion : function(target){
57993         return this.regions[target.toLowerCase()];
57994     },
57995     
57996     onWindowResize : function(){
57997         if(this.monitorWindowResize){
57998             this.layout();
57999         }
58000     }
58001 });/*
58002  * Based on:
58003  * Ext JS Library 1.1.1
58004  * Copyright(c) 2006-2007, Ext JS, LLC.
58005  *
58006  * Originally Released Under LGPL - original licence link has changed is not relivant.
58007  *
58008  * Fork - LGPL
58009  * <script type="text/javascript">
58010  */
58011 /**
58012  * @class Roo.BorderLayout
58013  * @extends Roo.LayoutManager
58014  * @children Roo.ContentPanel
58015  * This class represents a common layout manager used in desktop applications. For screenshots and more details,
58016  * please see: <br><br>
58017  * <a href="http://www.jackslocum.com/yui/2006/10/19/cross-browser-web-20-layouts-with-yahoo-ui/">Cross Browser Layouts - Part 1</a><br>
58018  * <a href="http://www.jackslocum.com/yui/2006/10/28/cross-browser-web-20-layouts-part-2-ajax-feed-viewer-20/">Cross Browser Layouts - Part 2</a><br><br>
58019  * Example:
58020  <pre><code>
58021  var layout = new Roo.BorderLayout(document.body, {
58022     north: {
58023         initialSize: 25,
58024         titlebar: false
58025     },
58026     west: {
58027         split:true,
58028         initialSize: 200,
58029         minSize: 175,
58030         maxSize: 400,
58031         titlebar: true,
58032         collapsible: true
58033     },
58034     east: {
58035         split:true,
58036         initialSize: 202,
58037         minSize: 175,
58038         maxSize: 400,
58039         titlebar: true,
58040         collapsible: true
58041     },
58042     south: {
58043         split:true,
58044         initialSize: 100,
58045         minSize: 100,
58046         maxSize: 200,
58047         titlebar: true,
58048         collapsible: true
58049     },
58050     center: {
58051         titlebar: true,
58052         autoScroll:true,
58053         resizeTabs: true,
58054         minTabWidth: 50,
58055         preferredTabWidth: 150
58056     }
58057 });
58058
58059 // shorthand
58060 var CP = Roo.ContentPanel;
58061
58062 layout.beginUpdate();
58063 layout.add("north", new CP("north", "North"));
58064 layout.add("south", new CP("south", {title: "South", closable: true}));
58065 layout.add("west", new CP("west", {title: "West"}));
58066 layout.add("east", new CP("autoTabs", {title: "Auto Tabs", closable: true}));
58067 layout.add("center", new CP("center1", {title: "Close Me", closable: true}));
58068 layout.add("center", new CP("center2", {title: "Center Panel", closable: false}));
58069 layout.getRegion("center").showPanel("center1");
58070 layout.endUpdate();
58071 </code></pre>
58072
58073 <b>The container the layout is rendered into can be either the body element or any other element.
58074 If it is not the body element, the container needs to either be an absolute positioned element,
58075 or you will need to add "position:relative" to the css of the container.  You will also need to specify
58076 the container size if it is not the body element.</b>
58077
58078 * @constructor
58079 * Create a new BorderLayout
58080 * @param {String/HTMLElement/Element} container The container this layout is bound to
58081 * @param {Object} config Configuration options
58082  */
58083 Roo.BorderLayout = function(container, config){
58084     config = config || {};
58085     Roo.BorderLayout.superclass.constructor.call(this, container, config);
58086     this.factory = config.factory || Roo.BorderLayout.RegionFactory;
58087     for(var i = 0, len = this.factory.validRegions.length; i < len; i++) {
58088         var target = this.factory.validRegions[i];
58089         if(config[target]){
58090             this.addRegion(target, config[target]);
58091         }
58092     }
58093 };
58094
58095 Roo.extend(Roo.BorderLayout, Roo.LayoutManager, {
58096         
58097         /**
58098          * @cfg {Roo.LayoutRegion} east
58099          */
58100         /**
58101          * @cfg {Roo.LayoutRegion} west
58102          */
58103         /**
58104          * @cfg {Roo.LayoutRegion} north
58105          */
58106         /**
58107          * @cfg {Roo.LayoutRegion} south
58108          */
58109         /**
58110          * @cfg {Roo.LayoutRegion} center
58111          */
58112     /**
58113      * Creates and adds a new region if it doesn't already exist.
58114      * @param {String} target The target region key (north, south, east, west or center).
58115      * @param {Object} config The regions config object
58116      * @return {BorderLayoutRegion} The new region
58117      */
58118     addRegion : function(target, config){
58119         if(!this.regions[target]){
58120             var r = this.factory.create(target, this, config);
58121             this.bindRegion(target, r);
58122         }
58123         return this.regions[target];
58124     },
58125
58126     // private (kinda)
58127     bindRegion : function(name, r){
58128         this.regions[name] = r;
58129         r.on("visibilitychange", this.layout, this);
58130         r.on("paneladded", this.layout, this);
58131         r.on("panelremoved", this.layout, this);
58132         r.on("invalidated", this.layout, this);
58133         r.on("resized", this.onRegionResized, this);
58134         r.on("collapsed", this.onRegionCollapsed, this);
58135         r.on("expanded", this.onRegionExpanded, this);
58136     },
58137
58138     /**
58139      * Performs a layout update.
58140      */
58141     layout : function(){
58142         if(this.updating) {
58143             return;
58144         }
58145         var size = this.getViewSize();
58146         var w = size.width;
58147         var h = size.height;
58148         var centerW = w;
58149         var centerH = h;
58150         var centerY = 0;
58151         var centerX = 0;
58152         //var x = 0, y = 0;
58153
58154         var rs = this.regions;
58155         var north = rs["north"];
58156         var south = rs["south"]; 
58157         var west = rs["west"];
58158         var east = rs["east"];
58159         var center = rs["center"];
58160         //if(this.hideOnLayout){ // not supported anymore
58161             //c.el.setStyle("display", "none");
58162         //}
58163         if(north && north.isVisible()){
58164             var b = north.getBox();
58165             var m = north.getMargins();
58166             b.width = w - (m.left+m.right);
58167             b.x = m.left;
58168             b.y = m.top;
58169             centerY = b.height + b.y + m.bottom;
58170             centerH -= centerY;
58171             north.updateBox(this.safeBox(b));
58172         }
58173         if(south && south.isVisible()){
58174             var b = south.getBox();
58175             var m = south.getMargins();
58176             b.width = w - (m.left+m.right);
58177             b.x = m.left;
58178             var totalHeight = (b.height + m.top + m.bottom);
58179             b.y = h - totalHeight + m.top;
58180             centerH -= totalHeight;
58181             south.updateBox(this.safeBox(b));
58182         }
58183         if(west && west.isVisible()){
58184             var b = west.getBox();
58185             var m = west.getMargins();
58186             b.height = centerH - (m.top+m.bottom);
58187             b.x = m.left;
58188             b.y = centerY + m.top;
58189             var totalWidth = (b.width + m.left + m.right);
58190             centerX += totalWidth;
58191             centerW -= totalWidth;
58192             west.updateBox(this.safeBox(b));
58193         }
58194         if(east && east.isVisible()){
58195             var b = east.getBox();
58196             var m = east.getMargins();
58197             b.height = centerH - (m.top+m.bottom);
58198             var totalWidth = (b.width + m.left + m.right);
58199             b.x = w - totalWidth + m.left;
58200             b.y = centerY + m.top;
58201             centerW -= totalWidth;
58202             east.updateBox(this.safeBox(b));
58203         }
58204         if(center){
58205             var m = center.getMargins();
58206             var centerBox = {
58207                 x: centerX + m.left,
58208                 y: centerY + m.top,
58209                 width: centerW - (m.left+m.right),
58210                 height: centerH - (m.top+m.bottom)
58211             };
58212             //if(this.hideOnLayout){
58213                 //center.el.setStyle("display", "block");
58214             //}
58215             center.updateBox(this.safeBox(centerBox));
58216         }
58217         this.el.repaint();
58218         this.fireEvent("layout", this);
58219     },
58220
58221     // private
58222     safeBox : function(box){
58223         box.width = Math.max(0, box.width);
58224         box.height = Math.max(0, box.height);
58225         return box;
58226     },
58227
58228     /**
58229      * Adds a ContentPanel (or subclass) to this layout.
58230      * @param {String} target The target region key (north, south, east, west or center).
58231      * @param {Roo.ContentPanel} panel The panel to add
58232      * @return {Roo.ContentPanel} The added panel
58233      */
58234     add : function(target, panel){
58235          
58236         target = target.toLowerCase();
58237         return this.regions[target].add(panel);
58238     },
58239
58240     /**
58241      * Remove a ContentPanel (or subclass) to this layout.
58242      * @param {String} target The target region key (north, south, east, west or center).
58243      * @param {Number/String/Roo.ContentPanel} panel The index, id or panel to remove
58244      * @return {Roo.ContentPanel} The removed panel
58245      */
58246     remove : function(target, panel){
58247         target = target.toLowerCase();
58248         return this.regions[target].remove(panel);
58249     },
58250
58251     /**
58252      * Searches all regions for a panel with the specified id
58253      * @param {String} panelId
58254      * @return {Roo.ContentPanel} The panel or null if it wasn't found
58255      */
58256     findPanel : function(panelId){
58257         var rs = this.regions;
58258         for(var target in rs){
58259             if(typeof rs[target] != "function"){
58260                 var p = rs[target].getPanel(panelId);
58261                 if(p){
58262                     return p;
58263                 }
58264             }
58265         }
58266         return null;
58267     },
58268
58269     /**
58270      * Searches all regions for a panel with the specified id and activates (shows) it.
58271      * @param {String/ContentPanel} panelId The panels id or the panel itself
58272      * @return {Roo.ContentPanel} The shown panel or null
58273      */
58274     showPanel : function(panelId) {
58275       var rs = this.regions;
58276       for(var target in rs){
58277          var r = rs[target];
58278          if(typeof r != "function"){
58279             if(r.hasPanel(panelId)){
58280                return r.showPanel(panelId);
58281             }
58282          }
58283       }
58284       return null;
58285    },
58286
58287    /**
58288      * Restores this layout's state using Roo.state.Manager or the state provided by the passed provider.
58289      * @param {Roo.state.Provider} provider (optional) An alternate state provider
58290      */
58291     restoreState : function(provider){
58292         if(!provider){
58293             provider = Roo.state.Manager;
58294         }
58295         var sm = new Roo.LayoutStateManager();
58296         sm.init(this, provider);
58297     },
58298
58299     /**
58300      * Adds a batch of multiple ContentPanels dynamically by passing a special regions config object.  This config
58301      * object should contain properties for each region to add ContentPanels to, and each property's value should be
58302      * a valid ContentPanel config object.  Example:
58303      * <pre><code>
58304 // Create the main layout
58305 var layout = new Roo.BorderLayout('main-ct', {
58306     west: {
58307         split:true,
58308         minSize: 175,
58309         titlebar: true
58310     },
58311     center: {
58312         title:'Components'
58313     }
58314 }, 'main-ct');
58315
58316 // Create and add multiple ContentPanels at once via configs
58317 layout.batchAdd({
58318    west: {
58319        id: 'source-files',
58320        autoCreate:true,
58321        title:'Ext Source Files',
58322        autoScroll:true,
58323        fitToFrame:true
58324    },
58325    center : {
58326        el: cview,
58327        autoScroll:true,
58328        fitToFrame:true,
58329        toolbar: tb,
58330        resizeEl:'cbody'
58331    }
58332 });
58333 </code></pre>
58334      * @param {Object} regions An object containing ContentPanel configs by region name
58335      */
58336     batchAdd : function(regions){
58337         this.beginUpdate();
58338         for(var rname in regions){
58339             var lr = this.regions[rname];
58340             if(lr){
58341                 this.addTypedPanels(lr, regions[rname]);
58342             }
58343         }
58344         this.endUpdate();
58345     },
58346
58347     // private
58348     addTypedPanels : function(lr, ps){
58349         if(typeof ps == 'string'){
58350             lr.add(new Roo.ContentPanel(ps));
58351         }
58352         else if(ps instanceof Array){
58353             for(var i =0, len = ps.length; i < len; i++){
58354                 this.addTypedPanels(lr, ps[i]);
58355             }
58356         }
58357         else if(!ps.events){ // raw config?
58358             var el = ps.el;
58359             delete ps.el; // prevent conflict
58360             lr.add(new Roo.ContentPanel(el || Roo.id(), ps));
58361         }
58362         else {  // panel object assumed!
58363             lr.add(ps);
58364         }
58365     },
58366     /**
58367      * Adds a xtype elements to the layout.
58368      * <pre><code>
58369
58370 layout.addxtype({
58371        xtype : 'ContentPanel',
58372        region: 'west',
58373        items: [ .... ]
58374    }
58375 );
58376
58377 layout.addxtype({
58378         xtype : 'NestedLayoutPanel',
58379         region: 'west',
58380         layout: {
58381            center: { },
58382            west: { }   
58383         },
58384         items : [ ... list of content panels or nested layout panels.. ]
58385    }
58386 );
58387 </code></pre>
58388      * @param {Object} cfg Xtype definition of item to add.
58389      */
58390     addxtype : function(cfg)
58391     {
58392         // basically accepts a pannel...
58393         // can accept a layout region..!?!?
58394         //Roo.log('Roo.BorderLayout add ' + cfg.xtype)
58395         
58396         if (!cfg.xtype.match(/Panel$/)) {
58397             return false;
58398         }
58399         var ret = false;
58400         
58401         if (typeof(cfg.region) == 'undefined') {
58402             Roo.log("Failed to add Panel, region was not set");
58403             Roo.log(cfg);
58404             return false;
58405         }
58406         var region = cfg.region;
58407         delete cfg.region;
58408         
58409           
58410         var xitems = [];
58411         if (cfg.items) {
58412             xitems = cfg.items;
58413             delete cfg.items;
58414         }
58415         var nb = false;
58416         
58417         switch(cfg.xtype) 
58418         {
58419             case 'ContentPanel':  // ContentPanel (el, cfg)
58420             case 'ScrollPanel':  // ContentPanel (el, cfg)
58421             case 'ViewPanel': 
58422                 if(cfg.autoCreate) {
58423                     ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
58424                 } else {
58425                     var el = this.el.createChild();
58426                     ret = new Roo[cfg.xtype](el, cfg); // new panel!!!!!
58427                 }
58428                 
58429                 this.add(region, ret);
58430                 break;
58431             
58432             
58433             case 'TreePanel': // our new panel!
58434                 cfg.el = this.el.createChild();
58435                 ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
58436                 this.add(region, ret);
58437                 break;
58438             
58439             case 'NestedLayoutPanel': 
58440                 // create a new Layout (which is  a Border Layout...
58441                 var el = this.el.createChild();
58442                 var clayout = cfg.layout;
58443                 delete cfg.layout;
58444                 clayout.items   = clayout.items  || [];
58445                 // replace this exitems with the clayout ones..
58446                 xitems = clayout.items;
58447                  
58448                 
58449                 if (region == 'center' && this.active && this.getRegion('center').panels.length < 1) {
58450                     cfg.background = false;
58451                 }
58452                 var layout = new Roo.BorderLayout(el, clayout);
58453                 
58454                 ret = new Roo[cfg.xtype](layout, cfg); // new panel!!!!!
58455                 //console.log('adding nested layout panel '  + cfg.toSource());
58456                 this.add(region, ret);
58457                 nb = {}; /// find first...
58458                 break;
58459                 
58460             case 'GridPanel': 
58461             
58462                 // needs grid and region
58463                 
58464                 //var el = this.getRegion(region).el.createChild();
58465                 var el = this.el.createChild();
58466                 // create the grid first...
58467                 
58468                 var grid = new Roo.grid[cfg.grid.xtype](el, cfg.grid);
58469                 delete cfg.grid;
58470                 if (region == 'center' && this.active ) {
58471                     cfg.background = false;
58472                 }
58473                 ret = new Roo[cfg.xtype](grid, cfg); // new panel!!!!!
58474                 
58475                 this.add(region, ret);
58476                 if (cfg.background) {
58477                     ret.on('activate', function(gp) {
58478                         if (!gp.grid.rendered) {
58479                             gp.grid.render();
58480                         }
58481                     });
58482                 } else {
58483                     grid.render();
58484                 }
58485                 break;
58486            
58487            
58488            
58489                 
58490                 
58491                 
58492             default:
58493                 if (typeof(Roo[cfg.xtype]) != 'undefined') {
58494                     
58495                     ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
58496                     this.add(region, ret);
58497                 } else {
58498                 
58499                     alert("Can not add '" + cfg.xtype + "' to BorderLayout");
58500                     return null;
58501                 }
58502                 
58503              // GridPanel (grid, cfg)
58504             
58505         }
58506         this.beginUpdate();
58507         // add children..
58508         var region = '';
58509         var abn = {};
58510         Roo.each(xitems, function(i)  {
58511             region = nb && i.region ? i.region : false;
58512             
58513             var add = ret.addxtype(i);
58514            
58515             if (region) {
58516                 nb[region] = nb[region] == undefined ? 0 : nb[region]+1;
58517                 if (!i.background) {
58518                     abn[region] = nb[region] ;
58519                 }
58520             }
58521             
58522         });
58523         this.endUpdate();
58524
58525         // make the last non-background panel active..
58526         //if (nb) { Roo.log(abn); }
58527         if (nb) {
58528             
58529             for(var r in abn) {
58530                 region = this.getRegion(r);
58531                 if (region) {
58532                     // tried using nb[r], but it does not work..
58533                      
58534                     region.showPanel(abn[r]);
58535                    
58536                 }
58537             }
58538         }
58539         return ret;
58540         
58541     }
58542 });
58543
58544 /**
58545  * Shortcut for creating a new BorderLayout object and adding one or more ContentPanels to it in a single step, handling
58546  * the beginUpdate and endUpdate calls internally.  The key to this method is the <b>panels</b> property that can be
58547  * provided with each region config, which allows you to add ContentPanel configs in addition to the region configs
58548  * during creation.  The following code is equivalent to the constructor-based example at the beginning of this class:
58549  * <pre><code>
58550 // shorthand
58551 var CP = Roo.ContentPanel;
58552
58553 var layout = Roo.BorderLayout.create({
58554     north: {
58555         initialSize: 25,
58556         titlebar: false,
58557         panels: [new CP("north", "North")]
58558     },
58559     west: {
58560         split:true,
58561         initialSize: 200,
58562         minSize: 175,
58563         maxSize: 400,
58564         titlebar: true,
58565         collapsible: true,
58566         panels: [new CP("west", {title: "West"})]
58567     },
58568     east: {
58569         split:true,
58570         initialSize: 202,
58571         minSize: 175,
58572         maxSize: 400,
58573         titlebar: true,
58574         collapsible: true,
58575         panels: [new CP("autoTabs", {title: "Auto Tabs", closable: true})]
58576     },
58577     south: {
58578         split:true,
58579         initialSize: 100,
58580         minSize: 100,
58581         maxSize: 200,
58582         titlebar: true,
58583         collapsible: true,
58584         panels: [new CP("south", {title: "South", closable: true})]
58585     },
58586     center: {
58587         titlebar: true,
58588         autoScroll:true,
58589         resizeTabs: true,
58590         minTabWidth: 50,
58591         preferredTabWidth: 150,
58592         panels: [
58593             new CP("center1", {title: "Close Me", closable: true}),
58594             new CP("center2", {title: "Center Panel", closable: false})
58595         ]
58596     }
58597 }, document.body);
58598
58599 layout.getRegion("center").showPanel("center1");
58600 </code></pre>
58601  * @param config
58602  * @param targetEl
58603  */
58604 Roo.BorderLayout.create = function(config, targetEl){
58605     var layout = new Roo.BorderLayout(targetEl || document.body, config);
58606     layout.beginUpdate();
58607     var regions = Roo.BorderLayout.RegionFactory.validRegions;
58608     for(var j = 0, jlen = regions.length; j < jlen; j++){
58609         var lr = regions[j];
58610         if(layout.regions[lr] && config[lr].panels){
58611             var r = layout.regions[lr];
58612             var ps = config[lr].panels;
58613             layout.addTypedPanels(r, ps);
58614         }
58615     }
58616     layout.endUpdate();
58617     return layout;
58618 };
58619
58620 // private
58621 Roo.BorderLayout.RegionFactory = {
58622     // private
58623     validRegions : ["north","south","east","west","center"],
58624
58625     // private
58626     create : function(target, mgr, config){
58627         target = target.toLowerCase();
58628         if(config.lightweight || config.basic){
58629             return new Roo.BasicLayoutRegion(mgr, config, target);
58630         }
58631         switch(target){
58632             case "north":
58633                 return new Roo.NorthLayoutRegion(mgr, config);
58634             case "south":
58635                 return new Roo.SouthLayoutRegion(mgr, config);
58636             case "east":
58637                 return new Roo.EastLayoutRegion(mgr, config);
58638             case "west":
58639                 return new Roo.WestLayoutRegion(mgr, config);
58640             case "center":
58641                 return new Roo.CenterLayoutRegion(mgr, config);
58642         }
58643         throw 'Layout region "'+target+'" not supported.';
58644     }
58645 };/*
58646  * Based on:
58647  * Ext JS Library 1.1.1
58648  * Copyright(c) 2006-2007, Ext JS, LLC.
58649  *
58650  * Originally Released Under LGPL - original licence link has changed is not relivant.
58651  *
58652  * Fork - LGPL
58653  * <script type="text/javascript">
58654  */
58655  
58656 /**
58657  * @class Roo.BasicLayoutRegion
58658  * @extends Roo.util.Observable
58659  * This class represents a lightweight region in a layout manager. This region does not move dom nodes
58660  * and does not have a titlebar, tabs or any other features. All it does is size and position 
58661  * panels. To create a BasicLayoutRegion, add lightweight:true or basic:true to your regions config.
58662  */
58663 Roo.BasicLayoutRegion = function(mgr, config, pos, skipConfig){
58664     this.mgr = mgr;
58665     this.position  = pos;
58666     this.events = {
58667         /**
58668          * @scope Roo.BasicLayoutRegion
58669          */
58670         
58671         /**
58672          * @event beforeremove
58673          * Fires before a panel is removed (or closed). To cancel the removal set "e.cancel = true" on the event argument.
58674          * @param {Roo.LayoutRegion} this
58675          * @param {Roo.ContentPanel} panel The panel
58676          * @param {Object} e The cancel event object
58677          */
58678         "beforeremove" : true,
58679         /**
58680          * @event invalidated
58681          * Fires when the layout for this region is changed.
58682          * @param {Roo.LayoutRegion} this
58683          */
58684         "invalidated" : true,
58685         /**
58686          * @event visibilitychange
58687          * Fires when this region is shown or hidden 
58688          * @param {Roo.LayoutRegion} this
58689          * @param {Boolean} visibility true or false
58690          */
58691         "visibilitychange" : true,
58692         /**
58693          * @event paneladded
58694          * Fires when a panel is added. 
58695          * @param {Roo.LayoutRegion} this
58696          * @param {Roo.ContentPanel} panel The panel
58697          */
58698         "paneladded" : true,
58699         /**
58700          * @event panelremoved
58701          * Fires when a panel is removed. 
58702          * @param {Roo.LayoutRegion} this
58703          * @param {Roo.ContentPanel} panel The panel
58704          */
58705         "panelremoved" : true,
58706         /**
58707          * @event beforecollapse
58708          * Fires when this region before collapse.
58709          * @param {Roo.LayoutRegion} this
58710          */
58711         "beforecollapse" : true,
58712         /**
58713          * @event collapsed
58714          * Fires when this region is collapsed.
58715          * @param {Roo.LayoutRegion} this
58716          */
58717         "collapsed" : true,
58718         /**
58719          * @event expanded
58720          * Fires when this region is expanded.
58721          * @param {Roo.LayoutRegion} this
58722          */
58723         "expanded" : true,
58724         /**
58725          * @event slideshow
58726          * Fires when this region is slid into view.
58727          * @param {Roo.LayoutRegion} this
58728          */
58729         "slideshow" : true,
58730         /**
58731          * @event slidehide
58732          * Fires when this region slides out of view. 
58733          * @param {Roo.LayoutRegion} this
58734          */
58735         "slidehide" : true,
58736         /**
58737          * @event panelactivated
58738          * Fires when a panel is activated. 
58739          * @param {Roo.LayoutRegion} this
58740          * @param {Roo.ContentPanel} panel The activated panel
58741          */
58742         "panelactivated" : true,
58743         /**
58744          * @event resized
58745          * Fires when the user resizes this region. 
58746          * @param {Roo.LayoutRegion} this
58747          * @param {Number} newSize The new size (width for east/west, height for north/south)
58748          */
58749         "resized" : true
58750     };
58751     /** A collection of panels in this region. @type Roo.util.MixedCollection */
58752     this.panels = new Roo.util.MixedCollection();
58753     this.panels.getKey = this.getPanelId.createDelegate(this);
58754     this.box = null;
58755     this.activePanel = null;
58756     // ensure listeners are added...
58757     
58758     if (config.listeners || config.events) {
58759         Roo.BasicLayoutRegion.superclass.constructor.call(this, {
58760             listeners : config.listeners || {},
58761             events : config.events || {}
58762         });
58763     }
58764     
58765     if(skipConfig !== true){
58766         this.applyConfig(config);
58767     }
58768 };
58769
58770 Roo.extend(Roo.BasicLayoutRegion, Roo.util.Observable, {
58771     getPanelId : function(p){
58772         return p.getId();
58773     },
58774     
58775     applyConfig : function(config){
58776         this.margins = config.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
58777         this.config = config;
58778         
58779     },
58780     
58781     /**
58782      * Resizes the region to the specified size. For vertical regions (west, east) this adjusts 
58783      * the width, for horizontal (north, south) the height.
58784      * @param {Number} newSize The new width or height
58785      */
58786     resizeTo : function(newSize){
58787         var el = this.el ? this.el :
58788                  (this.activePanel ? this.activePanel.getEl() : null);
58789         if(el){
58790             switch(this.position){
58791                 case "east":
58792                 case "west":
58793                     el.setWidth(newSize);
58794                     this.fireEvent("resized", this, newSize);
58795                 break;
58796                 case "north":
58797                 case "south":
58798                     el.setHeight(newSize);
58799                     this.fireEvent("resized", this, newSize);
58800                 break;                
58801             }
58802         }
58803     },
58804     
58805     getBox : function(){
58806         return this.activePanel ? this.activePanel.getEl().getBox(false, true) : null;
58807     },
58808     
58809     getMargins : function(){
58810         return this.margins;
58811     },
58812     
58813     updateBox : function(box){
58814         this.box = box;
58815         var el = this.activePanel.getEl();
58816         el.dom.style.left = box.x + "px";
58817         el.dom.style.top = box.y + "px";
58818         this.activePanel.setSize(box.width, box.height);
58819     },
58820     
58821     /**
58822      * Returns the container element for this region.
58823      * @return {Roo.Element}
58824      */
58825     getEl : function(){
58826         return this.activePanel;
58827     },
58828     
58829     /**
58830      * Returns true if this region is currently visible.
58831      * @return {Boolean}
58832      */
58833     isVisible : function(){
58834         return this.activePanel ? true : false;
58835     },
58836     
58837     setActivePanel : function(panel){
58838         panel = this.getPanel(panel);
58839         if(this.activePanel && this.activePanel != panel){
58840             this.activePanel.setActiveState(false);
58841             this.activePanel.getEl().setLeftTop(-10000,-10000);
58842         }
58843         this.activePanel = panel;
58844         panel.setActiveState(true);
58845         if(this.box){
58846             panel.setSize(this.box.width, this.box.height);
58847         }
58848         this.fireEvent("panelactivated", this, panel);
58849         this.fireEvent("invalidated");
58850     },
58851     
58852     /**
58853      * Show the specified panel.
58854      * @param {Number/String/ContentPanel} panelId The panels index, id or the panel itself
58855      * @return {Roo.ContentPanel} The shown panel or null
58856      */
58857     showPanel : function(panel){
58858         if(panel = this.getPanel(panel)){
58859             this.setActivePanel(panel);
58860         }
58861         return panel;
58862     },
58863     
58864     /**
58865      * Get the active panel for this region.
58866      * @return {Roo.ContentPanel} The active panel or null
58867      */
58868     getActivePanel : function(){
58869         return this.activePanel;
58870     },
58871     
58872     /**
58873      * Add the passed ContentPanel(s)
58874      * @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
58875      * @return {Roo.ContentPanel} The panel added (if only one was added)
58876      */
58877     add : function(panel){
58878         if(arguments.length > 1){
58879             for(var i = 0, len = arguments.length; i < len; i++) {
58880                 this.add(arguments[i]);
58881             }
58882             return null;
58883         }
58884         if(this.hasPanel(panel)){
58885             this.showPanel(panel);
58886             return panel;
58887         }
58888         var el = panel.getEl();
58889         if(el.dom.parentNode != this.mgr.el.dom){
58890             this.mgr.el.dom.appendChild(el.dom);
58891         }
58892         if(panel.setRegion){
58893             panel.setRegion(this);
58894         }
58895         this.panels.add(panel);
58896         el.setStyle("position", "absolute");
58897         if(!panel.background){
58898             this.setActivePanel(panel);
58899             if(this.config.initialSize && this.panels.getCount()==1){
58900                 this.resizeTo(this.config.initialSize);
58901             }
58902         }
58903         this.fireEvent("paneladded", this, panel);
58904         return panel;
58905     },
58906     
58907     /**
58908      * Returns true if the panel is in this region.
58909      * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
58910      * @return {Boolean}
58911      */
58912     hasPanel : function(panel){
58913         if(typeof panel == "object"){ // must be panel obj
58914             panel = panel.getId();
58915         }
58916         return this.getPanel(panel) ? true : false;
58917     },
58918     
58919     /**
58920      * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
58921      * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
58922      * @param {Boolean} preservePanel Overrides the config preservePanel option
58923      * @return {Roo.ContentPanel} The panel that was removed
58924      */
58925     remove : function(panel, preservePanel){
58926         panel = this.getPanel(panel);
58927         if(!panel){
58928             return null;
58929         }
58930         var e = {};
58931         this.fireEvent("beforeremove", this, panel, e);
58932         if(e.cancel === true){
58933             return null;
58934         }
58935         var panelId = panel.getId();
58936         this.panels.removeKey(panelId);
58937         return panel;
58938     },
58939     
58940     /**
58941      * Returns the panel specified or null if it's not in this region.
58942      * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
58943      * @return {Roo.ContentPanel}
58944      */
58945     getPanel : function(id){
58946         if(typeof id == "object"){ // must be panel obj
58947             return id;
58948         }
58949         return this.panels.get(id);
58950     },
58951     
58952     /**
58953      * Returns this regions position (north/south/east/west/center).
58954      * @return {String} 
58955      */
58956     getPosition: function(){
58957         return this.position;    
58958     }
58959 });/*
58960  * Based on:
58961  * Ext JS Library 1.1.1
58962  * Copyright(c) 2006-2007, Ext JS, LLC.
58963  *
58964  * Originally Released Under LGPL - original licence link has changed is not relivant.
58965  *
58966  * Fork - LGPL
58967  * <script type="text/javascript">
58968  */
58969  
58970 /**
58971  * @class Roo.LayoutRegion
58972  * @extends Roo.BasicLayoutRegion
58973  * This class represents a region in a layout manager.
58974  * @cfg {Boolean}   collapsible     False to disable collapsing (defaults to true)
58975  * @cfg {Boolean}   collapsed       True to set the initial display to collapsed (defaults to false)
58976  * @cfg {Boolean}   floatable       False to disable floating (defaults to true)
58977  * @cfg {Object}    margins         Margins for the element (defaults to {top: 0, left: 0, right:0, bottom: 0})
58978  * @cfg {Object}    cmargins        Margins for the element when collapsed (defaults to: north/south {top: 2, left: 0, right:0, bottom: 2} or east/west {top: 0, left: 2, right:2, bottom: 0})
58979  * @cfg {String}    tabPosition     (top|bottom) "top" or "bottom" (defaults to "bottom")
58980  * @cfg {String}    collapsedTitle  Optional string message to display in the collapsed block of a north or south region
58981  * @cfg {Boolean}   alwaysShowTabs  True to always display tabs even when there is only 1 panel (defaults to false)
58982  * @cfg {Boolean}   autoScroll      True to enable overflow scrolling (defaults to false)
58983  * @cfg {Boolean}   titlebar        True to display a title bar (defaults to true)
58984  * @cfg {String}    title           The title for the region (overrides panel titles)
58985  * @cfg {Boolean}   animate         True to animate expand/collapse (defaults to false)
58986  * @cfg {Boolean}   autoHide        False to disable auto hiding when the mouse leaves the "floated" region (defaults to true)
58987  * @cfg {Boolean}   preservePanels  True to preserve removed panels so they can be readded later (defaults to false)
58988  * @cfg {Boolean}   closeOnTab      True to place the close icon on the tabs instead of the region titlebar (defaults to false)
58989  * @cfg {Boolean}   hideTabs        True to hide the tab strip (defaults to false)
58990  * @cfg {Boolean}   resizeTabs      True to enable automatic tab resizing. This will resize the tabs so they are all the same size and fit within
58991  *                      the space available, similar to FireFox 1.5 tabs (defaults to false)
58992  * @cfg {Number}    minTabWidth     The minimum tab width (defaults to 40)
58993  * @cfg {Number}    preferredTabWidth The preferred tab width (defaults to 150)
58994  * @cfg {Boolean}   showPin         True to show a pin button
58995  * @cfg {Boolean}   hidden          True to start the region hidden (defaults to false)
58996  * @cfg {Boolean}   hideWhenEmpty   True to hide the region when it has no panels
58997  * @cfg {Boolean}   disableTabTips  True to disable tab tooltips
58998  * @cfg {Number}    width           For East/West panels
58999  * @cfg {Number}    height          For North/South panels
59000  * @cfg {Boolean}   split           To show the splitter
59001  * @cfg {Boolean}   toolbar         xtype configuration for a toolbar - shows on right of tabbar
59002  */
59003 Roo.LayoutRegion = function(mgr, config, pos){
59004     Roo.LayoutRegion.superclass.constructor.call(this, mgr, config, pos, true);
59005     var dh = Roo.DomHelper;
59006     /** This region's container element 
59007     * @type Roo.Element */
59008     this.el = dh.append(mgr.el.dom, {tag: "div", cls: "x-layout-panel x-layout-panel-" + this.position}, true);
59009     /** This region's title element 
59010     * @type Roo.Element */
59011
59012     this.titleEl = dh.append(this.el.dom, {tag: "div", unselectable: "on", cls: "x-unselectable x-layout-panel-hd x-layout-title-"+this.position, children:[
59013         {tag: "span", cls: "x-unselectable x-layout-panel-hd-text", unselectable: "on", html: "&#160;"},
59014         {tag: "div", cls: "x-unselectable x-layout-panel-hd-tools", unselectable: "on"}
59015     ]}, true);
59016     this.titleEl.enableDisplayMode();
59017     /** This region's title text element 
59018     * @type HTMLElement */
59019     this.titleTextEl = this.titleEl.dom.firstChild;
59020     this.tools = Roo.get(this.titleEl.dom.childNodes[1], true);
59021     this.closeBtn = this.createTool(this.tools.dom, "x-layout-close");
59022     this.closeBtn.enableDisplayMode();
59023     this.closeBtn.on("click", this.closeClicked, this);
59024     this.closeBtn.hide();
59025
59026     this.createBody(config);
59027     this.visible = true;
59028     this.collapsed = false;
59029
59030     if(config.hideWhenEmpty){
59031         this.hide();
59032         this.on("paneladded", this.validateVisibility, this);
59033         this.on("panelremoved", this.validateVisibility, this);
59034     }
59035     this.applyConfig(config);
59036 };
59037
59038 Roo.extend(Roo.LayoutRegion, Roo.BasicLayoutRegion, {
59039
59040     createBody : function(){
59041         /** This region's body element 
59042         * @type Roo.Element */
59043         this.bodyEl = this.el.createChild({tag: "div", cls: "x-layout-panel-body"});
59044     },
59045
59046     applyConfig : function(c){
59047         if(c.collapsible && this.position != "center" && !this.collapsedEl){
59048             var dh = Roo.DomHelper;
59049             if(c.titlebar !== false){
59050                 this.collapseBtn = this.createTool(this.tools.dom, "x-layout-collapse-"+this.position);
59051                 this.collapseBtn.on("click", this.collapse, this);
59052                 this.collapseBtn.enableDisplayMode();
59053
59054                 if(c.showPin === true || this.showPin){
59055                     this.stickBtn = this.createTool(this.tools.dom, "x-layout-stick");
59056                     this.stickBtn.enableDisplayMode();
59057                     this.stickBtn.on("click", this.expand, this);
59058                     this.stickBtn.hide();
59059                 }
59060             }
59061             /** This region's collapsed element
59062             * @type Roo.Element */
59063             this.collapsedEl = dh.append(this.mgr.el.dom, {cls: "x-layout-collapsed x-layout-collapsed-"+this.position, children:[
59064                 {cls: "x-layout-collapsed-tools", children:[{cls: "x-layout-ctools-inner"}]}
59065             ]}, true);
59066             if(c.floatable !== false){
59067                this.collapsedEl.addClassOnOver("x-layout-collapsed-over");
59068                this.collapsedEl.on("click", this.collapseClick, this);
59069             }
59070
59071             if(c.collapsedTitle && (this.position == "north" || this.position== "south")) {
59072                 this.collapsedTitleTextEl = dh.append(this.collapsedEl.dom, {tag: "div", cls: "x-unselectable x-layout-panel-hd-text",
59073                    id: "message", unselectable: "on", style:{"float":"left"}});
59074                this.collapsedTitleTextEl.innerHTML = c.collapsedTitle;
59075              }
59076             this.expandBtn = this.createTool(this.collapsedEl.dom.firstChild.firstChild, "x-layout-expand-"+this.position);
59077             this.expandBtn.on("click", this.expand, this);
59078         }
59079         if(this.collapseBtn){
59080             this.collapseBtn.setVisible(c.collapsible == true);
59081         }
59082         this.cmargins = c.cmargins || this.cmargins ||
59083                          (this.position == "west" || this.position == "east" ?
59084                              {top: 0, left: 2, right:2, bottom: 0} :
59085                              {top: 2, left: 0, right:0, bottom: 2});
59086         this.margins = c.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
59087         this.bottomTabs = c.tabPosition != "top";
59088         this.autoScroll = c.autoScroll || false;
59089         if(this.autoScroll){
59090             this.bodyEl.setStyle("overflow", "auto");
59091         }else{
59092             this.bodyEl.setStyle("overflow", "hidden");
59093         }
59094         //if(c.titlebar !== false){
59095             if((!c.titlebar && !c.title) || c.titlebar === false){
59096                 this.titleEl.hide();
59097             }else{
59098                 this.titleEl.show();
59099                 if(c.title){
59100                     this.titleTextEl.innerHTML = c.title;
59101                 }
59102             }
59103         //}
59104         this.duration = c.duration || .30;
59105         this.slideDuration = c.slideDuration || .45;
59106         this.config = c;
59107         if(c.collapsed){
59108             this.collapse(true);
59109         }
59110         if(c.hidden){
59111             this.hide();
59112         }
59113     },
59114     /**
59115      * Returns true if this region is currently visible.
59116      * @return {Boolean}
59117      */
59118     isVisible : function(){
59119         return this.visible;
59120     },
59121
59122     /**
59123      * Updates the title for collapsed north/south regions (used with {@link #collapsedTitle} config option)
59124      * @param {String} title (optional) The title text (accepts HTML markup, defaults to the numeric character reference for a non-breaking space, "&amp;#160;")
59125      */
59126     setCollapsedTitle : function(title){
59127         title = title || "&#160;";
59128         if(this.collapsedTitleTextEl){
59129             this.collapsedTitleTextEl.innerHTML = title;
59130         }
59131     },
59132
59133     getBox : function(){
59134         var b;
59135         if(!this.collapsed){
59136             b = this.el.getBox(false, true);
59137         }else{
59138             b = this.collapsedEl.getBox(false, true);
59139         }
59140         return b;
59141     },
59142
59143     getMargins : function(){
59144         return this.collapsed ? this.cmargins : this.margins;
59145     },
59146
59147     highlight : function(){
59148         this.el.addClass("x-layout-panel-dragover");
59149     },
59150
59151     unhighlight : function(){
59152         this.el.removeClass("x-layout-panel-dragover");
59153     },
59154
59155     updateBox : function(box){
59156         this.box = box;
59157         if(!this.collapsed){
59158             this.el.dom.style.left = box.x + "px";
59159             this.el.dom.style.top = box.y + "px";
59160             this.updateBody(box.width, box.height);
59161         }else{
59162             this.collapsedEl.dom.style.left = box.x + "px";
59163             this.collapsedEl.dom.style.top = box.y + "px";
59164             this.collapsedEl.setSize(box.width, box.height);
59165         }
59166         if(this.tabs){
59167             this.tabs.autoSizeTabs();
59168         }
59169     },
59170
59171     updateBody : function(w, h){
59172         if(w !== null){
59173             this.el.setWidth(w);
59174             w -= this.el.getBorderWidth("rl");
59175             if(this.config.adjustments){
59176                 w += this.config.adjustments[0];
59177             }
59178         }
59179         if(h !== null){
59180             this.el.setHeight(h);
59181             h = this.titleEl && this.titleEl.isDisplayed() ? h - (this.titleEl.getHeight()||0) : h;
59182             h -= this.el.getBorderWidth("tb");
59183             if(this.config.adjustments){
59184                 h += this.config.adjustments[1];
59185             }
59186             this.bodyEl.setHeight(h);
59187             if(this.tabs){
59188                 h = this.tabs.syncHeight(h);
59189             }
59190         }
59191         if(this.panelSize){
59192             w = w !== null ? w : this.panelSize.width;
59193             h = h !== null ? h : this.panelSize.height;
59194         }
59195         if(this.activePanel){
59196             var el = this.activePanel.getEl();
59197             w = w !== null ? w : el.getWidth();
59198             h = h !== null ? h : el.getHeight();
59199             this.panelSize = {width: w, height: h};
59200             this.activePanel.setSize(w, h);
59201         }
59202         if(Roo.isIE && this.tabs){
59203             this.tabs.el.repaint();
59204         }
59205     },
59206
59207     /**
59208      * Returns the container element for this region.
59209      * @return {Roo.Element}
59210      */
59211     getEl : function(){
59212         return this.el;
59213     },
59214
59215     /**
59216      * Hides this region.
59217      */
59218     hide : function(){
59219         if(!this.collapsed){
59220             this.el.dom.style.left = "-2000px";
59221             this.el.hide();
59222         }else{
59223             this.collapsedEl.dom.style.left = "-2000px";
59224             this.collapsedEl.hide();
59225         }
59226         this.visible = false;
59227         this.fireEvent("visibilitychange", this, false);
59228     },
59229
59230     /**
59231      * Shows this region if it was previously hidden.
59232      */
59233     show : function(){
59234         if(!this.collapsed){
59235             this.el.show();
59236         }else{
59237             this.collapsedEl.show();
59238         }
59239         this.visible = true;
59240         this.fireEvent("visibilitychange", this, true);
59241     },
59242
59243     closeClicked : function(){
59244         if(this.activePanel){
59245             this.remove(this.activePanel);
59246         }
59247     },
59248
59249     collapseClick : function(e){
59250         if(this.isSlid){
59251            e.stopPropagation();
59252            this.slideIn();
59253         }else{
59254            e.stopPropagation();
59255            this.slideOut();
59256         }
59257     },
59258
59259     /**
59260      * Collapses this region.
59261      * @param {Boolean} skipAnim (optional) true to collapse the element without animation (if animate is true)
59262      */
59263     collapse : function(skipAnim, skipCheck){
59264         if(this.collapsed) {
59265             return;
59266         }
59267         
59268         if(skipCheck || this.fireEvent("beforecollapse", this) != false){
59269             
59270             this.collapsed = true;
59271             if(this.split){
59272                 this.split.el.hide();
59273             }
59274             if(this.config.animate && skipAnim !== true){
59275                 this.fireEvent("invalidated", this);
59276                 this.animateCollapse();
59277             }else{
59278                 this.el.setLocation(-20000,-20000);
59279                 this.el.hide();
59280                 this.collapsedEl.show();
59281                 this.fireEvent("collapsed", this);
59282                 this.fireEvent("invalidated", this);
59283             }
59284         }
59285         
59286     },
59287
59288     animateCollapse : function(){
59289         // overridden
59290     },
59291
59292     /**
59293      * Expands this region if it was previously collapsed.
59294      * @param {Roo.EventObject} e The event that triggered the expand (or null if calling manually)
59295      * @param {Boolean} skipAnim (optional) true to expand the element without animation (if animate is true)
59296      */
59297     expand : function(e, skipAnim){
59298         if(e) {
59299             e.stopPropagation();
59300         }
59301         if(!this.collapsed || this.el.hasActiveFx()) {
59302             return;
59303         }
59304         if(this.isSlid){
59305             this.afterSlideIn();
59306             skipAnim = true;
59307         }
59308         this.collapsed = false;
59309         if(this.config.animate && skipAnim !== true){
59310             this.animateExpand();
59311         }else{
59312             this.el.show();
59313             if(this.split){
59314                 this.split.el.show();
59315             }
59316             this.collapsedEl.setLocation(-2000,-2000);
59317             this.collapsedEl.hide();
59318             this.fireEvent("invalidated", this);
59319             this.fireEvent("expanded", this);
59320         }
59321     },
59322
59323     animateExpand : function(){
59324         // overridden
59325     },
59326
59327     initTabs : function()
59328     {
59329         this.bodyEl.setStyle("overflow", "hidden");
59330         var ts = new Roo.TabPanel(
59331                 this.bodyEl.dom,
59332                 {
59333                     tabPosition: this.bottomTabs ? 'bottom' : 'top',
59334                     disableTooltips: this.config.disableTabTips,
59335                     toolbar : this.config.toolbar
59336                 }
59337         );
59338         if(this.config.hideTabs){
59339             ts.stripWrap.setDisplayed(false);
59340         }
59341         this.tabs = ts;
59342         ts.resizeTabs = this.config.resizeTabs === true;
59343         ts.minTabWidth = this.config.minTabWidth || 40;
59344         ts.maxTabWidth = this.config.maxTabWidth || 250;
59345         ts.preferredTabWidth = this.config.preferredTabWidth || 150;
59346         ts.monitorResize = false;
59347         ts.bodyEl.setStyle("overflow", this.config.autoScroll ? "auto" : "hidden");
59348         ts.bodyEl.addClass('x-layout-tabs-body');
59349         this.panels.each(this.initPanelAsTab, this);
59350     },
59351
59352     initPanelAsTab : function(panel){
59353         var ti = this.tabs.addTab(panel.getEl().id, panel.getTitle(), null,
59354                     this.config.closeOnTab && panel.isClosable());
59355         if(panel.tabTip !== undefined){
59356             ti.setTooltip(panel.tabTip);
59357         }
59358         ti.on("activate", function(){
59359               this.setActivePanel(panel);
59360         }, this);
59361         if(this.config.closeOnTab){
59362             ti.on("beforeclose", function(t, e){
59363                 e.cancel = true;
59364                 this.remove(panel);
59365             }, this);
59366         }
59367         return ti;
59368     },
59369
59370     updatePanelTitle : function(panel, title){
59371         if(this.activePanel == panel){
59372             this.updateTitle(title);
59373         }
59374         if(this.tabs){
59375             var ti = this.tabs.getTab(panel.getEl().id);
59376             ti.setText(title);
59377             if(panel.tabTip !== undefined){
59378                 ti.setTooltip(panel.tabTip);
59379             }
59380         }
59381     },
59382
59383     updateTitle : function(title){
59384         if(this.titleTextEl && !this.config.title){
59385             this.titleTextEl.innerHTML = (typeof title != "undefined" && title.length > 0 ? title : "&#160;");
59386         }
59387     },
59388
59389     setActivePanel : function(panel){
59390         panel = this.getPanel(panel);
59391         if(this.activePanel && this.activePanel != panel){
59392             this.activePanel.setActiveState(false);
59393         }
59394         this.activePanel = panel;
59395         panel.setActiveState(true);
59396         if(this.panelSize){
59397             panel.setSize(this.panelSize.width, this.panelSize.height);
59398         }
59399         if(this.closeBtn){
59400             this.closeBtn.setVisible(!this.config.closeOnTab && !this.isSlid && panel.isClosable());
59401         }
59402         this.updateTitle(panel.getTitle());
59403         if(this.tabs){
59404             this.fireEvent("invalidated", this);
59405         }
59406         this.fireEvent("panelactivated", this, panel);
59407     },
59408
59409     /**
59410      * Shows the specified panel.
59411      * @param {Number/String/ContentPanel} panelId The panel's index, id or the panel itself
59412      * @return {Roo.ContentPanel} The shown panel, or null if a panel could not be found from panelId
59413      */
59414     showPanel : function(panel)
59415     {
59416         panel = this.getPanel(panel);
59417         if(panel){
59418             if(this.tabs){
59419                 var tab = this.tabs.getTab(panel.getEl().id);
59420                 if(tab.isHidden()){
59421                     this.tabs.unhideTab(tab.id);
59422                 }
59423                 tab.activate();
59424             }else{
59425                 this.setActivePanel(panel);
59426             }
59427         }
59428         return panel;
59429     },
59430
59431     /**
59432      * Get the active panel for this region.
59433      * @return {Roo.ContentPanel} The active panel or null
59434      */
59435     getActivePanel : function(){
59436         return this.activePanel;
59437     },
59438
59439     validateVisibility : function(){
59440         if(this.panels.getCount() < 1){
59441             this.updateTitle("&#160;");
59442             this.closeBtn.hide();
59443             this.hide();
59444         }else{
59445             if(!this.isVisible()){
59446                 this.show();
59447             }
59448         }
59449     },
59450
59451     /**
59452      * Adds the passed ContentPanel(s) to this region.
59453      * @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
59454      * @return {Roo.ContentPanel} The panel added (if only one was added; null otherwise)
59455      */
59456     add : function(panel){
59457         if(arguments.length > 1){
59458             for(var i = 0, len = arguments.length; i < len; i++) {
59459                 this.add(arguments[i]);
59460             }
59461             return null;
59462         }
59463         if(this.hasPanel(panel)){
59464             this.showPanel(panel);
59465             return panel;
59466         }
59467         panel.setRegion(this);
59468         this.panels.add(panel);
59469         if(this.panels.getCount() == 1 && !this.config.alwaysShowTabs){
59470             this.bodyEl.dom.appendChild(panel.getEl().dom);
59471             if(panel.background !== true){
59472                 this.setActivePanel(panel);
59473             }
59474             this.fireEvent("paneladded", this, panel);
59475             return panel;
59476         }
59477         if(!this.tabs){
59478             this.initTabs();
59479         }else{
59480             this.initPanelAsTab(panel);
59481         }
59482         if(panel.background !== true){
59483             this.tabs.activate(panel.getEl().id);
59484         }
59485         this.fireEvent("paneladded", this, panel);
59486         return panel;
59487     },
59488
59489     /**
59490      * Hides the tab for the specified panel.
59491      * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
59492      */
59493     hidePanel : function(panel){
59494         if(this.tabs && (panel = this.getPanel(panel))){
59495             this.tabs.hideTab(panel.getEl().id);
59496         }
59497     },
59498
59499     /**
59500      * Unhides the tab for a previously hidden panel.
59501      * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
59502      */
59503     unhidePanel : function(panel){
59504         if(this.tabs && (panel = this.getPanel(panel))){
59505             this.tabs.unhideTab(panel.getEl().id);
59506         }
59507     },
59508
59509     clearPanels : function(){
59510         while(this.panels.getCount() > 0){
59511              this.remove(this.panels.first());
59512         }
59513     },
59514
59515     /**
59516      * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
59517      * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
59518      * @param {Boolean} preservePanel Overrides the config preservePanel option
59519      * @return {Roo.ContentPanel} The panel that was removed
59520      */
59521     remove : function(panel, preservePanel){
59522         panel = this.getPanel(panel);
59523         if(!panel){
59524             return null;
59525         }
59526         var e = {};
59527         this.fireEvent("beforeremove", this, panel, e);
59528         if(e.cancel === true){
59529             return null;
59530         }
59531         preservePanel = (typeof preservePanel != "undefined" ? preservePanel : (this.config.preservePanels === true || panel.preserve === true));
59532         var panelId = panel.getId();
59533         this.panels.removeKey(panelId);
59534         if(preservePanel){
59535             document.body.appendChild(panel.getEl().dom);
59536         }
59537         if(this.tabs){
59538             this.tabs.removeTab(panel.getEl().id);
59539         }else if (!preservePanel){
59540             this.bodyEl.dom.removeChild(panel.getEl().dom);
59541         }
59542         if(this.panels.getCount() == 1 && this.tabs && !this.config.alwaysShowTabs){
59543             var p = this.panels.first();
59544             var tempEl = document.createElement("div"); // temp holder to keep IE from deleting the node
59545             tempEl.appendChild(p.getEl().dom);
59546             this.bodyEl.update("");
59547             this.bodyEl.dom.appendChild(p.getEl().dom);
59548             tempEl = null;
59549             this.updateTitle(p.getTitle());
59550             this.tabs = null;
59551             this.bodyEl.setStyle("overflow", this.config.autoScroll ? "auto" : "hidden");
59552             this.setActivePanel(p);
59553         }
59554         panel.setRegion(null);
59555         if(this.activePanel == panel){
59556             this.activePanel = null;
59557         }
59558         if(this.config.autoDestroy !== false && preservePanel !== true){
59559             try{panel.destroy();}catch(e){}
59560         }
59561         this.fireEvent("panelremoved", this, panel);
59562         return panel;
59563     },
59564
59565     /**
59566      * Returns the TabPanel component used by this region
59567      * @return {Roo.TabPanel}
59568      */
59569     getTabs : function(){
59570         return this.tabs;
59571     },
59572
59573     createTool : function(parentEl, className){
59574         var btn = Roo.DomHelper.append(parentEl, {tag: "div", cls: "x-layout-tools-button",
59575             children: [{tag: "div", cls: "x-layout-tools-button-inner " + className, html: "&#160;"}]}, true);
59576         btn.addClassOnOver("x-layout-tools-button-over");
59577         return btn;
59578     }
59579 });/*
59580  * Based on:
59581  * Ext JS Library 1.1.1
59582  * Copyright(c) 2006-2007, Ext JS, LLC.
59583  *
59584  * Originally Released Under LGPL - original licence link has changed is not relivant.
59585  *
59586  * Fork - LGPL
59587  * <script type="text/javascript">
59588  */
59589  
59590
59591
59592 /**
59593  * @class Roo.SplitLayoutRegion
59594  * @extends Roo.LayoutRegion
59595  * Adds a splitbar and other (private) useful functionality to a {@link Roo.LayoutRegion}.
59596  */
59597 Roo.SplitLayoutRegion = function(mgr, config, pos, cursor){
59598     this.cursor = cursor;
59599     Roo.SplitLayoutRegion.superclass.constructor.call(this, mgr, config, pos);
59600 };
59601
59602 Roo.extend(Roo.SplitLayoutRegion, Roo.LayoutRegion, {
59603     splitTip : "Drag to resize.",
59604     collapsibleSplitTip : "Drag to resize. Double click to hide.",
59605     useSplitTips : false,
59606
59607     applyConfig : function(config){
59608         Roo.SplitLayoutRegion.superclass.applyConfig.call(this, config);
59609         if(config.split){
59610             if(!this.split){
59611                 var splitEl = Roo.DomHelper.append(this.mgr.el.dom, 
59612                         {tag: "div", id: this.el.id + "-split", cls: "x-layout-split x-layout-split-"+this.position, html: "&#160;"});
59613                 /** The SplitBar for this region 
59614                 * @type Roo.SplitBar */
59615                 this.split = new Roo.SplitBar(splitEl, this.el, this.orientation);
59616                 this.split.on("moved", this.onSplitMove, this);
59617                 this.split.useShim = config.useShim === true;
59618                 this.split.getMaximumSize = this[this.position == 'north' || this.position == 'south' ? 'getVMaxSize' : 'getHMaxSize'].createDelegate(this);
59619                 if(this.useSplitTips){
59620                     this.split.el.dom.title = config.collapsible ? this.collapsibleSplitTip : this.splitTip;
59621                 }
59622                 if(config.collapsible){
59623                     this.split.el.on("dblclick", this.collapse,  this);
59624                 }
59625             }
59626             if(typeof config.minSize != "undefined"){
59627                 this.split.minSize = config.minSize;
59628             }
59629             if(typeof config.maxSize != "undefined"){
59630                 this.split.maxSize = config.maxSize;
59631             }
59632             if(config.hideWhenEmpty || config.hidden || config.collapsed){
59633                 this.hideSplitter();
59634             }
59635         }
59636     },
59637
59638     getHMaxSize : function(){
59639          var cmax = this.config.maxSize || 10000;
59640          var center = this.mgr.getRegion("center");
59641          return Math.min(cmax, (this.el.getWidth()+center.getEl().getWidth())-center.getMinWidth());
59642     },
59643
59644     getVMaxSize : function(){
59645          var cmax = this.config.maxSize || 10000;
59646          var center = this.mgr.getRegion("center");
59647          return Math.min(cmax, (this.el.getHeight()+center.getEl().getHeight())-center.getMinHeight());
59648     },
59649
59650     onSplitMove : function(split, newSize){
59651         this.fireEvent("resized", this, newSize);
59652     },
59653     
59654     /** 
59655      * Returns the {@link Roo.SplitBar} for this region.
59656      * @return {Roo.SplitBar}
59657      */
59658     getSplitBar : function(){
59659         return this.split;
59660     },
59661     
59662     hide : function(){
59663         this.hideSplitter();
59664         Roo.SplitLayoutRegion.superclass.hide.call(this);
59665     },
59666
59667     hideSplitter : function(){
59668         if(this.split){
59669             this.split.el.setLocation(-2000,-2000);
59670             this.split.el.hide();
59671         }
59672     },
59673
59674     show : function(){
59675         if(this.split){
59676             this.split.el.show();
59677         }
59678         Roo.SplitLayoutRegion.superclass.show.call(this);
59679     },
59680     
59681     beforeSlide: function(){
59682         if(Roo.isGecko){// firefox overflow auto bug workaround
59683             this.bodyEl.clip();
59684             if(this.tabs) {
59685                 this.tabs.bodyEl.clip();
59686             }
59687             if(this.activePanel){
59688                 this.activePanel.getEl().clip();
59689                 
59690                 if(this.activePanel.beforeSlide){
59691                     this.activePanel.beforeSlide();
59692                 }
59693             }
59694         }
59695     },
59696     
59697     afterSlide : function(){
59698         if(Roo.isGecko){// firefox overflow auto bug workaround
59699             this.bodyEl.unclip();
59700             if(this.tabs) {
59701                 this.tabs.bodyEl.unclip();
59702             }
59703             if(this.activePanel){
59704                 this.activePanel.getEl().unclip();
59705                 if(this.activePanel.afterSlide){
59706                     this.activePanel.afterSlide();
59707                 }
59708             }
59709         }
59710     },
59711
59712     initAutoHide : function(){
59713         if(this.autoHide !== false){
59714             if(!this.autoHideHd){
59715                 var st = new Roo.util.DelayedTask(this.slideIn, this);
59716                 this.autoHideHd = {
59717                     "mouseout": function(e){
59718                         if(!e.within(this.el, true)){
59719                             st.delay(500);
59720                         }
59721                     },
59722                     "mouseover" : function(e){
59723                         st.cancel();
59724                     },
59725                     scope : this
59726                 };
59727             }
59728             this.el.on(this.autoHideHd);
59729         }
59730     },
59731
59732     clearAutoHide : function(){
59733         if(this.autoHide !== false){
59734             this.el.un("mouseout", this.autoHideHd.mouseout);
59735             this.el.un("mouseover", this.autoHideHd.mouseover);
59736         }
59737     },
59738
59739     clearMonitor : function(){
59740         Roo.get(document).un("click", this.slideInIf, this);
59741     },
59742
59743     // these names are backwards but not changed for compat
59744     slideOut : function(){
59745         if(this.isSlid || this.el.hasActiveFx()){
59746             return;
59747         }
59748         this.isSlid = true;
59749         if(this.collapseBtn){
59750             this.collapseBtn.hide();
59751         }
59752         this.closeBtnState = this.closeBtn.getStyle('display');
59753         this.closeBtn.hide();
59754         if(this.stickBtn){
59755             this.stickBtn.show();
59756         }
59757         this.el.show();
59758         this.el.alignTo(this.collapsedEl, this.getCollapseAnchor());
59759         this.beforeSlide();
59760         this.el.setStyle("z-index", 10001);
59761         this.el.slideIn(this.getSlideAnchor(), {
59762             callback: function(){
59763                 this.afterSlide();
59764                 this.initAutoHide();
59765                 Roo.get(document).on("click", this.slideInIf, this);
59766                 this.fireEvent("slideshow", this);
59767             },
59768             scope: this,
59769             block: true
59770         });
59771     },
59772
59773     afterSlideIn : function(){
59774         this.clearAutoHide();
59775         this.isSlid = false;
59776         this.clearMonitor();
59777         this.el.setStyle("z-index", "");
59778         if(this.collapseBtn){
59779             this.collapseBtn.show();
59780         }
59781         this.closeBtn.setStyle('display', this.closeBtnState);
59782         if(this.stickBtn){
59783             this.stickBtn.hide();
59784         }
59785         this.fireEvent("slidehide", this);
59786     },
59787
59788     slideIn : function(cb){
59789         if(!this.isSlid || this.el.hasActiveFx()){
59790             Roo.callback(cb);
59791             return;
59792         }
59793         this.isSlid = false;
59794         this.beforeSlide();
59795         this.el.slideOut(this.getSlideAnchor(), {
59796             callback: function(){
59797                 this.el.setLeftTop(-10000, -10000);
59798                 this.afterSlide();
59799                 this.afterSlideIn();
59800                 Roo.callback(cb);
59801             },
59802             scope: this,
59803             block: true
59804         });
59805     },
59806     
59807     slideInIf : function(e){
59808         if(!e.within(this.el)){
59809             this.slideIn();
59810         }
59811     },
59812
59813     animateCollapse : function(){
59814         this.beforeSlide();
59815         this.el.setStyle("z-index", 20000);
59816         var anchor = this.getSlideAnchor();
59817         this.el.slideOut(anchor, {
59818             callback : function(){
59819                 this.el.setStyle("z-index", "");
59820                 this.collapsedEl.slideIn(anchor, {duration:.3});
59821                 this.afterSlide();
59822                 this.el.setLocation(-10000,-10000);
59823                 this.el.hide();
59824                 this.fireEvent("collapsed", this);
59825             },
59826             scope: this,
59827             block: true
59828         });
59829     },
59830
59831     animateExpand : function(){
59832         this.beforeSlide();
59833         this.el.alignTo(this.collapsedEl, this.getCollapseAnchor(), this.getExpandAdj());
59834         this.el.setStyle("z-index", 20000);
59835         this.collapsedEl.hide({
59836             duration:.1
59837         });
59838         this.el.slideIn(this.getSlideAnchor(), {
59839             callback : function(){
59840                 this.el.setStyle("z-index", "");
59841                 this.afterSlide();
59842                 if(this.split){
59843                     this.split.el.show();
59844                 }
59845                 this.fireEvent("invalidated", this);
59846                 this.fireEvent("expanded", this);
59847             },
59848             scope: this,
59849             block: true
59850         });
59851     },
59852
59853     anchors : {
59854         "west" : "left",
59855         "east" : "right",
59856         "north" : "top",
59857         "south" : "bottom"
59858     },
59859
59860     sanchors : {
59861         "west" : "l",
59862         "east" : "r",
59863         "north" : "t",
59864         "south" : "b"
59865     },
59866
59867     canchors : {
59868         "west" : "tl-tr",
59869         "east" : "tr-tl",
59870         "north" : "tl-bl",
59871         "south" : "bl-tl"
59872     },
59873
59874     getAnchor : function(){
59875         return this.anchors[this.position];
59876     },
59877
59878     getCollapseAnchor : function(){
59879         return this.canchors[this.position];
59880     },
59881
59882     getSlideAnchor : function(){
59883         return this.sanchors[this.position];
59884     },
59885
59886     getAlignAdj : function(){
59887         var cm = this.cmargins;
59888         switch(this.position){
59889             case "west":
59890                 return [0, 0];
59891             break;
59892             case "east":
59893                 return [0, 0];
59894             break;
59895             case "north":
59896                 return [0, 0];
59897             break;
59898             case "south":
59899                 return [0, 0];
59900             break;
59901         }
59902     },
59903
59904     getExpandAdj : function(){
59905         var c = this.collapsedEl, cm = this.cmargins;
59906         switch(this.position){
59907             case "west":
59908                 return [-(cm.right+c.getWidth()+cm.left), 0];
59909             break;
59910             case "east":
59911                 return [cm.right+c.getWidth()+cm.left, 0];
59912             break;
59913             case "north":
59914                 return [0, -(cm.top+cm.bottom+c.getHeight())];
59915             break;
59916             case "south":
59917                 return [0, cm.top+cm.bottom+c.getHeight()];
59918             break;
59919         }
59920     }
59921 });/*
59922  * Based on:
59923  * Ext JS Library 1.1.1
59924  * Copyright(c) 2006-2007, Ext JS, LLC.
59925  *
59926  * Originally Released Under LGPL - original licence link has changed is not relivant.
59927  *
59928  * Fork - LGPL
59929  * <script type="text/javascript">
59930  */
59931 /*
59932  * These classes are private internal classes
59933  */
59934 Roo.CenterLayoutRegion = function(mgr, config){
59935     Roo.LayoutRegion.call(this, mgr, config, "center");
59936     this.visible = true;
59937     this.minWidth = config.minWidth || 20;
59938     this.minHeight = config.minHeight || 20;
59939 };
59940
59941 Roo.extend(Roo.CenterLayoutRegion, Roo.LayoutRegion, {
59942     hide : function(){
59943         // center panel can't be hidden
59944     },
59945     
59946     show : function(){
59947         // center panel can't be hidden
59948     },
59949     
59950     getMinWidth: function(){
59951         return this.minWidth;
59952     },
59953     
59954     getMinHeight: function(){
59955         return this.minHeight;
59956     }
59957 });
59958
59959
59960 Roo.NorthLayoutRegion = function(mgr, config){
59961     Roo.LayoutRegion.call(this, mgr, config, "north", "n-resize");
59962     if(this.split){
59963         this.split.placement = Roo.SplitBar.TOP;
59964         this.split.orientation = Roo.SplitBar.VERTICAL;
59965         this.split.el.addClass("x-layout-split-v");
59966     }
59967     var size = config.initialSize || config.height;
59968     if(typeof size != "undefined"){
59969         this.el.setHeight(size);
59970     }
59971 };
59972 Roo.extend(Roo.NorthLayoutRegion, Roo.SplitLayoutRegion, {
59973     orientation: Roo.SplitBar.VERTICAL,
59974     getBox : function(){
59975         if(this.collapsed){
59976             return this.collapsedEl.getBox();
59977         }
59978         var box = this.el.getBox();
59979         if(this.split){
59980             box.height += this.split.el.getHeight();
59981         }
59982         return box;
59983     },
59984     
59985     updateBox : function(box){
59986         if(this.split && !this.collapsed){
59987             box.height -= this.split.el.getHeight();
59988             this.split.el.setLeft(box.x);
59989             this.split.el.setTop(box.y+box.height);
59990             this.split.el.setWidth(box.width);
59991         }
59992         if(this.collapsed){
59993             this.updateBody(box.width, null);
59994         }
59995         Roo.LayoutRegion.prototype.updateBox.call(this, box);
59996     }
59997 });
59998
59999 Roo.SouthLayoutRegion = function(mgr, config){
60000     Roo.SplitLayoutRegion.call(this, mgr, config, "south", "s-resize");
60001     if(this.split){
60002         this.split.placement = Roo.SplitBar.BOTTOM;
60003         this.split.orientation = Roo.SplitBar.VERTICAL;
60004         this.split.el.addClass("x-layout-split-v");
60005     }
60006     var size = config.initialSize || config.height;
60007     if(typeof size != "undefined"){
60008         this.el.setHeight(size);
60009     }
60010 };
60011 Roo.extend(Roo.SouthLayoutRegion, Roo.SplitLayoutRegion, {
60012     orientation: Roo.SplitBar.VERTICAL,
60013     getBox : function(){
60014         if(this.collapsed){
60015             return this.collapsedEl.getBox();
60016         }
60017         var box = this.el.getBox();
60018         if(this.split){
60019             var sh = this.split.el.getHeight();
60020             box.height += sh;
60021             box.y -= sh;
60022         }
60023         return box;
60024     },
60025     
60026     updateBox : function(box){
60027         if(this.split && !this.collapsed){
60028             var sh = this.split.el.getHeight();
60029             box.height -= sh;
60030             box.y += sh;
60031             this.split.el.setLeft(box.x);
60032             this.split.el.setTop(box.y-sh);
60033             this.split.el.setWidth(box.width);
60034         }
60035         if(this.collapsed){
60036             this.updateBody(box.width, null);
60037         }
60038         Roo.LayoutRegion.prototype.updateBox.call(this, box);
60039     }
60040 });
60041
60042 Roo.EastLayoutRegion = function(mgr, config){
60043     Roo.SplitLayoutRegion.call(this, mgr, config, "east", "e-resize");
60044     if(this.split){
60045         this.split.placement = Roo.SplitBar.RIGHT;
60046         this.split.orientation = Roo.SplitBar.HORIZONTAL;
60047         this.split.el.addClass("x-layout-split-h");
60048     }
60049     var size = config.initialSize || config.width;
60050     if(typeof size != "undefined"){
60051         this.el.setWidth(size);
60052     }
60053 };
60054 Roo.extend(Roo.EastLayoutRegion, Roo.SplitLayoutRegion, {
60055     orientation: Roo.SplitBar.HORIZONTAL,
60056     getBox : function(){
60057         if(this.collapsed){
60058             return this.collapsedEl.getBox();
60059         }
60060         var box = this.el.getBox();
60061         if(this.split){
60062             var sw = this.split.el.getWidth();
60063             box.width += sw;
60064             box.x -= sw;
60065         }
60066         return box;
60067     },
60068
60069     updateBox : function(box){
60070         if(this.split && !this.collapsed){
60071             var sw = this.split.el.getWidth();
60072             box.width -= sw;
60073             this.split.el.setLeft(box.x);
60074             this.split.el.setTop(box.y);
60075             this.split.el.setHeight(box.height);
60076             box.x += sw;
60077         }
60078         if(this.collapsed){
60079             this.updateBody(null, box.height);
60080         }
60081         Roo.LayoutRegion.prototype.updateBox.call(this, box);
60082     }
60083 });
60084
60085 Roo.WestLayoutRegion = function(mgr, config){
60086     Roo.SplitLayoutRegion.call(this, mgr, config, "west", "w-resize");
60087     if(this.split){
60088         this.split.placement = Roo.SplitBar.LEFT;
60089         this.split.orientation = Roo.SplitBar.HORIZONTAL;
60090         this.split.el.addClass("x-layout-split-h");
60091     }
60092     var size = config.initialSize || config.width;
60093     if(typeof size != "undefined"){
60094         this.el.setWidth(size);
60095     }
60096 };
60097 Roo.extend(Roo.WestLayoutRegion, Roo.SplitLayoutRegion, {
60098     orientation: Roo.SplitBar.HORIZONTAL,
60099     getBox : function(){
60100         if(this.collapsed){
60101             return this.collapsedEl.getBox();
60102         }
60103         var box = this.el.getBox();
60104         if(this.split){
60105             box.width += this.split.el.getWidth();
60106         }
60107         return box;
60108     },
60109     
60110     updateBox : function(box){
60111         if(this.split && !this.collapsed){
60112             var sw = this.split.el.getWidth();
60113             box.width -= sw;
60114             this.split.el.setLeft(box.x+box.width);
60115             this.split.el.setTop(box.y);
60116             this.split.el.setHeight(box.height);
60117         }
60118         if(this.collapsed){
60119             this.updateBody(null, box.height);
60120         }
60121         Roo.LayoutRegion.prototype.updateBox.call(this, box);
60122     }
60123 });
60124 /*
60125  * Based on:
60126  * Ext JS Library 1.1.1
60127  * Copyright(c) 2006-2007, Ext JS, LLC.
60128  *
60129  * Originally Released Under LGPL - original licence link has changed is not relivant.
60130  *
60131  * Fork - LGPL
60132  * <script type="text/javascript">
60133  */
60134  
60135  
60136 /*
60137  * Private internal class for reading and applying state
60138  */
60139 Roo.LayoutStateManager = function(layout){
60140      // default empty state
60141      this.state = {
60142         north: {},
60143         south: {},
60144         east: {},
60145         west: {}       
60146     };
60147 };
60148
60149 Roo.LayoutStateManager.prototype = {
60150     init : function(layout, provider){
60151         this.provider = provider;
60152         var state = provider.get(layout.id+"-layout-state");
60153         if(state){
60154             var wasUpdating = layout.isUpdating();
60155             if(!wasUpdating){
60156                 layout.beginUpdate();
60157             }
60158             for(var key in state){
60159                 if(typeof state[key] != "function"){
60160                     var rstate = state[key];
60161                     var r = layout.getRegion(key);
60162                     if(r && rstate){
60163                         if(rstate.size){
60164                             r.resizeTo(rstate.size);
60165                         }
60166                         if(rstate.collapsed == true){
60167                             r.collapse(true);
60168                         }else{
60169                             r.expand(null, true);
60170                         }
60171                     }
60172                 }
60173             }
60174             if(!wasUpdating){
60175                 layout.endUpdate();
60176             }
60177             this.state = state; 
60178         }
60179         this.layout = layout;
60180         layout.on("regionresized", this.onRegionResized, this);
60181         layout.on("regioncollapsed", this.onRegionCollapsed, this);
60182         layout.on("regionexpanded", this.onRegionExpanded, this);
60183     },
60184     
60185     storeState : function(){
60186         this.provider.set(this.layout.id+"-layout-state", this.state);
60187     },
60188     
60189     onRegionResized : function(region, newSize){
60190         this.state[region.getPosition()].size = newSize;
60191         this.storeState();
60192     },
60193     
60194     onRegionCollapsed : function(region){
60195         this.state[region.getPosition()].collapsed = true;
60196         this.storeState();
60197     },
60198     
60199     onRegionExpanded : function(region){
60200         this.state[region.getPosition()].collapsed = false;
60201         this.storeState();
60202     }
60203 };/*
60204  * Based on:
60205  * Ext JS Library 1.1.1
60206  * Copyright(c) 2006-2007, Ext JS, LLC.
60207  *
60208  * Originally Released Under LGPL - original licence link has changed is not relivant.
60209  *
60210  * Fork - LGPL
60211  * <script type="text/javascript">
60212  */
60213 /**
60214  * @class Roo.ContentPanel
60215  * @extends Roo.util.Observable
60216  * @children Roo.form.Form Roo.JsonView Roo.View
60217  * @parent Roo.BorderLayout Roo.LayoutDialog builder
60218  * A basic ContentPanel element.
60219  * @cfg {Boolean}   fitToFrame    True for this panel to adjust its size to fit when the region resizes  (defaults to false)
60220  * @cfg {Boolean}   fitContainer   When using {@link #fitToFrame} and {@link #resizeEl}, you can also fit the parent container  (defaults to false)
60221  * @cfg {Boolean|Object} autoCreate True to auto generate the DOM element for this panel, or a {@link Roo.DomHelper} config of the element to create
60222  * @cfg {Boolean}   closable      True if the panel can be closed/removed
60223  * @cfg {Boolean}   background    True if the panel should not be activated when it is added (defaults to false)
60224  * @cfg {String|HTMLElement|Element} resizeEl An element to resize if {@link #fitToFrame} is true (instead of this panel's element)
60225  * @cfg {Roo.Toolbar}   toolbar       A toolbar for this panel
60226  * @cfg {Boolean} autoScroll    True to scroll overflow in this panel (use with {@link #fitToFrame})
60227  * @cfg {String} title          The title for this panel
60228  * @cfg {Array} adjustments     Values to <b>add</b> to the width/height when doing a {@link #fitToFrame} (default is [0, 0])
60229  * @cfg {String} url            Calls {@link #setUrl} with this value
60230  * @cfg {String} region (center|north|south|east|west) [required] which region to put this panel on (when used with xtype constructors)
60231  * @cfg {String|Object} params  When used with {@link #url}, calls {@link #setUrl} with this value
60232  * @cfg {Boolean} loadOnce      When used with {@link #url}, calls {@link #setUrl} with this value
60233  * @cfg {String}    content        Raw content to fill content panel with (uses setContent on construction.)
60234  * @cfg {String}    style  Extra style to add to the content panel
60235  * @cfg {Roo.menu.Menu} menu  popup menu
60236
60237  * @constructor
60238  * Create a new ContentPanel.
60239  * @param {String/HTMLElement/Roo.Element} el The container element for this panel
60240  * @param {String/Object} config A string to set only the title or a config object
60241  * @param {String} content (optional) Set the HTML content for this panel
60242  * @param {String} region (optional) Used by xtype constructors to add to regions. (values center,east,west,south,north)
60243  */
60244 Roo.ContentPanel = function(el, config, content){
60245     
60246      
60247     /*
60248     if(el.autoCreate || el.xtype){ // xtype is available if this is called from factory
60249         config = el;
60250         el = Roo.id();
60251     }
60252     if (config && config.parentLayout) { 
60253         el = config.parentLayout.el.createChild(); 
60254     }
60255     */
60256     if(el.autoCreate){ // xtype is available if this is called from factory
60257         config = el;
60258         el = Roo.id();
60259     }
60260     this.el = Roo.get(el);
60261     if(!this.el && config && config.autoCreate){
60262         if(typeof config.autoCreate == "object"){
60263             if(!config.autoCreate.id){
60264                 config.autoCreate.id = config.id||el;
60265             }
60266             this.el = Roo.DomHelper.append(document.body,
60267                         config.autoCreate, true);
60268         }else{
60269             this.el = Roo.DomHelper.append(document.body,
60270                         {tag: "div", cls: "x-layout-inactive-content", id: config.id||el}, true);
60271         }
60272     }
60273     
60274     
60275     this.closable = false;
60276     this.loaded = false;
60277     this.active = false;
60278     if(typeof config == "string"){
60279         this.title = config;
60280     }else{
60281         Roo.apply(this, config);
60282     }
60283     
60284     if (this.toolbar && !this.toolbar.el && this.toolbar.xtype) {
60285         this.wrapEl = this.el.wrap();
60286         this.toolbar.container = this.el.insertSibling(false, 'before');
60287         this.toolbar = new Roo.Toolbar(this.toolbar);
60288     }
60289     
60290     // xtype created footer. - not sure if will work as we normally have to render first..
60291     if (this.footer && !this.footer.el && this.footer.xtype) {
60292         if (!this.wrapEl) {
60293             this.wrapEl = this.el.wrap();
60294         }
60295     
60296         this.footer.container = this.wrapEl.createChild();
60297          
60298         this.footer = Roo.factory(this.footer, Roo);
60299         
60300     }
60301     
60302     if(this.resizeEl){
60303         this.resizeEl = Roo.get(this.resizeEl, true);
60304     }else{
60305         this.resizeEl = this.el;
60306     }
60307     // handle view.xtype
60308     
60309  
60310     
60311     
60312     this.addEvents({
60313         /**
60314          * @event activate
60315          * Fires when this panel is activated. 
60316          * @param {Roo.ContentPanel} this
60317          */
60318         "activate" : true,
60319         /**
60320          * @event deactivate
60321          * Fires when this panel is activated. 
60322          * @param {Roo.ContentPanel} this
60323          */
60324         "deactivate" : true,
60325
60326         /**
60327          * @event resize
60328          * Fires when this panel is resized if fitToFrame is true.
60329          * @param {Roo.ContentPanel} this
60330          * @param {Number} width The width after any component adjustments
60331          * @param {Number} height The height after any component adjustments
60332          */
60333         "resize" : true,
60334         
60335          /**
60336          * @event render
60337          * Fires when this tab is created
60338          * @param {Roo.ContentPanel} this
60339          */
60340         "render" : true
60341          
60342         
60343     });
60344     
60345
60346     
60347     
60348     if(this.autoScroll){
60349         this.resizeEl.setStyle("overflow", "auto");
60350     } else {
60351         // fix randome scrolling
60352         this.el.on('scroll', function() {
60353             Roo.log('fix random scolling');
60354             this.scrollTo('top',0); 
60355         });
60356     }
60357     content = content || this.content;
60358     if(content){
60359         this.setContent(content);
60360     }
60361     if(config && config.url){
60362         this.setUrl(this.url, this.params, this.loadOnce);
60363     }
60364     
60365     
60366     
60367     Roo.ContentPanel.superclass.constructor.call(this);
60368     
60369     if (this.view && typeof(this.view.xtype) != 'undefined') {
60370         this.view.el = this.el.appendChild(document.createElement("div"));
60371         this.view = Roo.factory(this.view); 
60372         this.view.render  &&  this.view.render(false, '');  
60373     }
60374     
60375     
60376     this.fireEvent('render', this);
60377 };
60378
60379 Roo.extend(Roo.ContentPanel, Roo.util.Observable, {
60380     tabTip:'',
60381     setRegion : function(region){
60382         this.region = region;
60383         if(region){
60384            this.el.replaceClass("x-layout-inactive-content", "x-layout-active-content");
60385         }else{
60386            this.el.replaceClass("x-layout-active-content", "x-layout-inactive-content");
60387         } 
60388     },
60389     
60390     /**
60391      * Returns the toolbar for this Panel if one was configured. 
60392      * @return {Roo.Toolbar} 
60393      */
60394     getToolbar : function(){
60395         return this.toolbar;
60396     },
60397     
60398     setActiveState : function(active){
60399         this.active = active;
60400         if(!active){
60401             this.fireEvent("deactivate", this);
60402         }else{
60403             this.fireEvent("activate", this);
60404         }
60405     },
60406     /**
60407      * Updates this panel's element
60408      * @param {String} content The new content
60409      * @param {Boolean} loadScripts (optional) true to look for and process scripts
60410     */
60411     setContent : function(content, loadScripts){
60412         this.el.update(content, loadScripts);
60413     },
60414
60415     ignoreResize : function(w, h){
60416         if(this.lastSize && this.lastSize.width == w && this.lastSize.height == h){
60417             return true;
60418         }else{
60419             this.lastSize = {width: w, height: h};
60420             return false;
60421         }
60422     },
60423     /**
60424      * Get the {@link Roo.UpdateManager} for this panel. Enables you to perform Ajax updates.
60425      * @return {Roo.UpdateManager} The UpdateManager
60426      */
60427     getUpdateManager : function(){
60428         return this.el.getUpdateManager();
60429     },
60430      /**
60431      * Loads this content panel immediately with content from XHR. Note: to delay loading until the panel is activated, use {@link #setUrl}.
60432      * @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:
60433 <pre><code>
60434 panel.load({
60435     url: "your-url.php",
60436     params: {param1: "foo", param2: "bar"}, // or a URL encoded string
60437     callback: yourFunction,
60438     scope: yourObject, //(optional scope)
60439     discardUrl: false,
60440     nocache: false,
60441     text: "Loading...",
60442     timeout: 30,
60443     scripts: false
60444 });
60445 </code></pre>
60446      * The only required property is <i>url</i>. The optional properties <i>nocache</i>, <i>text</i> and <i>scripts</i>
60447      * are shorthand for <i>disableCaching</i>, <i>indicatorText</i> and <i>loadScripts</i> and are used to set their associated property on this panel UpdateManager instance.
60448      * @param {String/Object} params (optional) The parameters to pass as either a URL encoded string "param1=1&amp;param2=2" or an object {param1: 1, param2: 2}
60449      * @param {Function} callback (optional) Callback when transaction is complete -- called with signature (oElement, bSuccess, oResponse)
60450      * @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.
60451      * @return {Roo.ContentPanel} this
60452      */
60453     load : function(){
60454         var um = this.el.getUpdateManager();
60455         um.update.apply(um, arguments);
60456         return this;
60457     },
60458
60459
60460     /**
60461      * Set a URL to be used to load the content for this panel. When this panel is activated, the content will be loaded from that URL.
60462      * @param {String/Function} url The URL to load the content from or a function to call to get the URL
60463      * @param {String/Object} params (optional) The string params for the update call or an object of the params. See {@link Roo.UpdateManager#update} for more details. (Defaults to null)
60464      * @param {Boolean} loadOnce (optional) Whether to only load the content once. If this is false it makes the Ajax call every time this panel is activated. (Defaults to false)
60465      * @return {Roo.UpdateManager} The UpdateManager
60466      */
60467     setUrl : function(url, params, loadOnce){
60468         if(this.refreshDelegate){
60469             this.removeListener("activate", this.refreshDelegate);
60470         }
60471         this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
60472         this.on("activate", this.refreshDelegate);
60473         return this.el.getUpdateManager();
60474     },
60475     
60476     _handleRefresh : function(url, params, loadOnce){
60477         if(!loadOnce || !this.loaded){
60478             var updater = this.el.getUpdateManager();
60479             updater.update(url, params, this._setLoaded.createDelegate(this));
60480         }
60481     },
60482     
60483     _setLoaded : function(){
60484         this.loaded = true;
60485     }, 
60486     
60487     /**
60488      * Returns this panel's id
60489      * @return {String} 
60490      */
60491     getId : function(){
60492         return this.el.id;
60493     },
60494     
60495     /** 
60496      * Returns this panel's element - used by regiosn to add.
60497      * @return {Roo.Element} 
60498      */
60499     getEl : function(){
60500         return this.wrapEl || this.el;
60501     },
60502     
60503     adjustForComponents : function(width, height)
60504     {
60505         //Roo.log('adjustForComponents ');
60506         if(this.resizeEl != this.el){
60507             width -= this.el.getFrameWidth('lr');
60508             height -= this.el.getFrameWidth('tb');
60509         }
60510         if(this.toolbar){
60511             var te = this.toolbar.getEl();
60512             height -= te.getHeight();
60513             te.setWidth(width);
60514         }
60515         if(this.footer){
60516             var te = this.footer.getEl();
60517             //Roo.log("footer:" + te.getHeight());
60518             
60519             height -= te.getHeight();
60520             te.setWidth(width);
60521         }
60522         
60523         
60524         if(this.adjustments){
60525             width += this.adjustments[0];
60526             height += this.adjustments[1];
60527         }
60528         return {"width": width, "height": height};
60529     },
60530     
60531     setSize : function(width, height){
60532         if(this.fitToFrame && !this.ignoreResize(width, height)){
60533             if(this.fitContainer && this.resizeEl != this.el){
60534                 this.el.setSize(width, height);
60535             }
60536             var size = this.adjustForComponents(width, height);
60537             this.resizeEl.setSize(this.autoWidth ? "auto" : size.width, this.autoHeight ? "auto" : size.height);
60538             this.fireEvent('resize', this, size.width, size.height);
60539         }
60540     },
60541     
60542     /**
60543      * Returns this panel's title
60544      * @return {String} 
60545      */
60546     getTitle : function(){
60547         return this.title;
60548     },
60549     
60550     /**
60551      * Set this panel's title
60552      * @param {String} title
60553      */
60554     setTitle : function(title){
60555         this.title = title;
60556         if(this.region){
60557             this.region.updatePanelTitle(this, title);
60558         }
60559     },
60560     
60561     /**
60562      * Returns true is this panel was configured to be closable
60563      * @return {Boolean} 
60564      */
60565     isClosable : function(){
60566         return this.closable;
60567     },
60568     
60569     beforeSlide : function(){
60570         this.el.clip();
60571         this.resizeEl.clip();
60572     },
60573     
60574     afterSlide : function(){
60575         this.el.unclip();
60576         this.resizeEl.unclip();
60577     },
60578     
60579     /**
60580      *   Force a content refresh from the URL specified in the {@link #setUrl} method.
60581      *   Will fail silently if the {@link #setUrl} method has not been called.
60582      *   This does not activate the panel, just updates its content.
60583      */
60584     refresh : function(){
60585         if(this.refreshDelegate){
60586            this.loaded = false;
60587            this.refreshDelegate();
60588         }
60589     },
60590     
60591     /**
60592      * Destroys this panel
60593      */
60594     destroy : function(){
60595         this.el.removeAllListeners();
60596         var tempEl = document.createElement("span");
60597         tempEl.appendChild(this.el.dom);
60598         tempEl.innerHTML = "";
60599         this.el.remove();
60600         this.el = null;
60601     },
60602     
60603     /**
60604      * form - if the content panel contains a form - this is a reference to it.
60605      * @type {Roo.form.Form}
60606      */
60607     form : false,
60608     /**
60609      * view - if the content panel contains a view (Roo.DatePicker / Roo.View / Roo.JsonView)
60610      *    This contains a reference to it.
60611      * @type {Roo.View}
60612      */
60613     view : false,
60614     
60615       /**
60616      * Adds a xtype elements to the panel - currently only supports Forms, View, JsonView.
60617      * <pre><code>
60618
60619 layout.addxtype({
60620        xtype : 'Form',
60621        items: [ .... ]
60622    }
60623 );
60624
60625 </code></pre>
60626      * @param {Object} cfg Xtype definition of item to add.
60627      */
60628     
60629     addxtype : function(cfg) {
60630         // add form..
60631         if (cfg.xtype.match(/^Form$/)) {
60632             
60633             var el;
60634             //if (this.footer) {
60635             //    el = this.footer.container.insertSibling(false, 'before');
60636             //} else {
60637                 el = this.el.createChild();
60638             //}
60639
60640             this.form = new  Roo.form.Form(cfg);
60641             
60642             
60643             if ( this.form.allItems.length) {
60644                 this.form.render(el.dom);
60645             }
60646             return this.form;
60647         }
60648         // should only have one of theses..
60649         if ([ 'View', 'JsonView', 'DatePicker'].indexOf(cfg.xtype) > -1) {
60650             // views.. should not be just added - used named prop 'view''
60651             
60652             cfg.el = this.el.appendChild(document.createElement("div"));
60653             // factory?
60654             
60655             var ret = new Roo.factory(cfg);
60656              
60657              ret.render && ret.render(false, ''); // render blank..
60658             this.view = ret;
60659             return ret;
60660         }
60661         return false;
60662     }
60663 });
60664
60665
60666
60667
60668
60669
60670
60671
60672
60673
60674
60675
60676 /**
60677  * @class Roo.GridPanel
60678  * @extends Roo.ContentPanel
60679  * @parent Roo.BorderLayout Roo.LayoutDialog builder
60680  * @constructor
60681  * Create a new GridPanel.
60682  * @cfg {Roo.grid.Grid} grid The grid for this panel
60683  */
60684 Roo.GridPanel = function(grid, config){
60685     
60686     // universal ctor...
60687     if (typeof(grid.grid) != 'undefined') {
60688         config = grid;
60689         grid = config.grid;
60690     }
60691     this.wrapper = Roo.DomHelper.append(document.body, // wrapper for IE7 strict & safari scroll issue
60692         {tag: "div", cls: "x-layout-grid-wrapper x-layout-inactive-content"}, true);
60693         
60694     this.wrapper.dom.appendChild(grid.getGridEl().dom);
60695     
60696     Roo.GridPanel.superclass.constructor.call(this, this.wrapper, config);
60697     
60698     if(this.toolbar){
60699         this.toolbar.el.insertBefore(this.wrapper.dom.firstChild);
60700     }
60701     // xtype created footer. - not sure if will work as we normally have to render first..
60702     if (this.footer && !this.footer.el && this.footer.xtype) {
60703         
60704         this.footer.container = this.grid.getView().getFooterPanel(true);
60705         this.footer.dataSource = this.grid.dataSource;
60706         this.footer = Roo.factory(this.footer, Roo);
60707         
60708     }
60709     
60710     grid.monitorWindowResize = false; // turn off autosizing
60711     grid.autoHeight = false;
60712     grid.autoWidth = false;
60713     this.grid = grid;
60714     this.grid.getGridEl().replaceClass("x-layout-inactive-content", "x-layout-component-panel");
60715 };
60716
60717 Roo.extend(Roo.GridPanel, Roo.ContentPanel, {
60718     getId : function(){
60719         return this.grid.id;
60720     },
60721     
60722     /**
60723      * Returns the grid for this panel
60724      * @return {Roo.grid.Grid} 
60725      */
60726     getGrid : function(){
60727         return this.grid;    
60728     },
60729     
60730     setSize : function(width, height){
60731         if(!this.ignoreResize(width, height)){
60732             var grid = this.grid;
60733             var size = this.adjustForComponents(width, height);
60734             grid.getGridEl().setSize(size.width, size.height);
60735             grid.autoSize();
60736         }
60737     },
60738     
60739     beforeSlide : function(){
60740         this.grid.getView().scroller.clip();
60741     },
60742     
60743     afterSlide : function(){
60744         this.grid.getView().scroller.unclip();
60745     },
60746     
60747     destroy : function(){
60748         this.grid.destroy();
60749         delete this.grid;
60750         Roo.GridPanel.superclass.destroy.call(this); 
60751     }
60752 });
60753
60754
60755 /**
60756  * @class Roo.NestedLayoutPanel
60757  * @extends Roo.ContentPanel
60758  * @parent Roo.BorderLayout Roo.LayoutDialog builder
60759  * @cfg {Roo.BorderLayout} layout   [required] The layout for this panel
60760  *
60761  * 
60762  * @constructor
60763  * Create a new NestedLayoutPanel.
60764  * 
60765  * 
60766  * @param {Roo.BorderLayout} layout [required] The layout for this panel
60767  * @param {String/Object} config A string to set only the title or a config object
60768  */
60769 Roo.NestedLayoutPanel = function(layout, config)
60770 {
60771     // construct with only one argument..
60772     /* FIXME - implement nicer consturctors
60773     if (layout.layout) {
60774         config = layout;
60775         layout = config.layout;
60776         delete config.layout;
60777     }
60778     if (layout.xtype && !layout.getEl) {
60779         // then layout needs constructing..
60780         layout = Roo.factory(layout, Roo);
60781     }
60782     */
60783     
60784     
60785     Roo.NestedLayoutPanel.superclass.constructor.call(this, layout.getEl(), config);
60786     
60787     layout.monitorWindowResize = false; // turn off autosizing
60788     this.layout = layout;
60789     this.layout.getEl().addClass("x-layout-nested-layout");
60790     
60791     
60792     
60793     
60794 };
60795
60796 Roo.extend(Roo.NestedLayoutPanel, Roo.ContentPanel, {
60797
60798     layout : false,
60799
60800     setSize : function(width, height){
60801         if(!this.ignoreResize(width, height)){
60802             var size = this.adjustForComponents(width, height);
60803             var el = this.layout.getEl();
60804             el.setSize(size.width, size.height);
60805             var touch = el.dom.offsetWidth;
60806             this.layout.layout();
60807             // ie requires a double layout on the first pass
60808             if(Roo.isIE && !this.initialized){
60809                 this.initialized = true;
60810                 this.layout.layout();
60811             }
60812         }
60813     },
60814     
60815     // activate all subpanels if not currently active..
60816     
60817     setActiveState : function(active){
60818         this.active = active;
60819         if(!active){
60820             this.fireEvent("deactivate", this);
60821             return;
60822         }
60823         
60824         this.fireEvent("activate", this);
60825         // not sure if this should happen before or after..
60826         if (!this.layout) {
60827             return; // should not happen..
60828         }
60829         var reg = false;
60830         for (var r in this.layout.regions) {
60831             reg = this.layout.getRegion(r);
60832             if (reg.getActivePanel()) {
60833                 //reg.showPanel(reg.getActivePanel()); // force it to activate.. 
60834                 reg.setActivePanel(reg.getActivePanel());
60835                 continue;
60836             }
60837             if (!reg.panels.length) {
60838                 continue;
60839             }
60840             reg.showPanel(reg.getPanel(0));
60841         }
60842         
60843         
60844         
60845         
60846     },
60847     
60848     /**
60849      * Returns the nested BorderLayout for this panel
60850      * @return {Roo.BorderLayout}
60851      */
60852     getLayout : function(){
60853         return this.layout;
60854     },
60855     
60856      /**
60857      * Adds a xtype elements to the layout of the nested panel
60858      * <pre><code>
60859
60860 panel.addxtype({
60861        xtype : 'ContentPanel',
60862        region: 'west',
60863        items: [ .... ]
60864    }
60865 );
60866
60867 panel.addxtype({
60868         xtype : 'NestedLayoutPanel',
60869         region: 'west',
60870         layout: {
60871            center: { },
60872            west: { }   
60873         },
60874         items : [ ... list of content panels or nested layout panels.. ]
60875    }
60876 );
60877 </code></pre>
60878      * @param {Object} cfg Xtype definition of item to add.
60879      */
60880     addxtype : function(cfg) {
60881         return this.layout.addxtype(cfg);
60882     
60883     }
60884 });
60885
60886 Roo.ScrollPanel = function(el, config, content){
60887     config = config || {};
60888     config.fitToFrame = true;
60889     Roo.ScrollPanel.superclass.constructor.call(this, el, config, content);
60890     
60891     this.el.dom.style.overflow = "hidden";
60892     var wrap = this.el.wrap({cls: "x-scroller x-layout-inactive-content"});
60893     this.el.removeClass("x-layout-inactive-content");
60894     this.el.on("mousewheel", this.onWheel, this);
60895
60896     var up = wrap.createChild({cls: "x-scroller-up", html: "&#160;"}, this.el.dom);
60897     var down = wrap.createChild({cls: "x-scroller-down", html: "&#160;"});
60898     up.unselectable(); down.unselectable();
60899     up.on("click", this.scrollUp, this);
60900     down.on("click", this.scrollDown, this);
60901     up.addClassOnOver("x-scroller-btn-over");
60902     down.addClassOnOver("x-scroller-btn-over");
60903     up.addClassOnClick("x-scroller-btn-click");
60904     down.addClassOnClick("x-scroller-btn-click");
60905     this.adjustments = [0, -(up.getHeight() + down.getHeight())];
60906
60907     this.resizeEl = this.el;
60908     this.el = wrap; this.up = up; this.down = down;
60909 };
60910
60911 Roo.extend(Roo.ScrollPanel, Roo.ContentPanel, {
60912     increment : 100,
60913     wheelIncrement : 5,
60914     scrollUp : function(){
60915         this.resizeEl.scroll("up", this.increment, {callback: this.afterScroll, scope: this});
60916     },
60917
60918     scrollDown : function(){
60919         this.resizeEl.scroll("down", this.increment, {callback: this.afterScroll, scope: this});
60920     },
60921
60922     afterScroll : function(){
60923         var el = this.resizeEl;
60924         var t = el.dom.scrollTop, h = el.dom.scrollHeight, ch = el.dom.clientHeight;
60925         this.up[t == 0 ? "addClass" : "removeClass"]("x-scroller-btn-disabled");
60926         this.down[h - t <= ch ? "addClass" : "removeClass"]("x-scroller-btn-disabled");
60927     },
60928
60929     setSize : function(){
60930         Roo.ScrollPanel.superclass.setSize.apply(this, arguments);
60931         this.afterScroll();
60932     },
60933
60934     onWheel : function(e){
60935         var d = e.getWheelDelta();
60936         this.resizeEl.dom.scrollTop -= (d*this.wheelIncrement);
60937         this.afterScroll();
60938         e.stopEvent();
60939     },
60940
60941     setContent : function(content, loadScripts){
60942         this.resizeEl.update(content, loadScripts);
60943     }
60944
60945 });
60946
60947
60948
60949 /**
60950  * @class Roo.TreePanel
60951  * @extends Roo.ContentPanel
60952  * @parent Roo.BorderLayout Roo.LayoutDialog builder
60953  * Treepanel component
60954  * 
60955  * @constructor
60956  * Create a new TreePanel. - defaults to fit/scoll contents.
60957  * @param {String/Object} config A string to set only the panel's title, or a config object
60958  */
60959 Roo.TreePanel = function(config){
60960     var el = config.el;
60961     var tree = config.tree;
60962     delete config.tree; 
60963     delete config.el; // hopefull!
60964     
60965     // wrapper for IE7 strict & safari scroll issue
60966     
60967     var treeEl = el.createChild();
60968     config.resizeEl = treeEl;
60969     
60970     
60971     
60972     Roo.TreePanel.superclass.constructor.call(this, el, config);
60973  
60974  
60975     this.tree = new Roo.tree.TreePanel(treeEl , tree);
60976     //console.log(tree);
60977     this.on('activate', function()
60978     {
60979         if (this.tree.rendered) {
60980             return;
60981         }
60982         //console.log('render tree');
60983         this.tree.render();
60984     });
60985     // this should not be needed.. - it's actually the 'el' that resizes?
60986     // actuall it breaks the containerScroll - dragging nodes auto scroll at top
60987     
60988     //this.on('resize',  function (cp, w, h) {
60989     //        this.tree.innerCt.setWidth(w);
60990     //        this.tree.innerCt.setHeight(h);
60991     //        //this.tree.innerCt.setStyle('overflow-y', 'auto');
60992     //});
60993
60994         
60995     
60996 };
60997
60998 Roo.extend(Roo.TreePanel, Roo.ContentPanel, {   
60999     fitToFrame : true,
61000     autoScroll : true,
61001     /*
61002      * @cfg {Roo.tree.TreePanel} tree [required] The tree TreePanel, with config etc.
61003      */
61004     tree : false
61005
61006 });
61007 /*
61008  * Based on:
61009  * Ext JS Library 1.1.1
61010  * Copyright(c) 2006-2007, Ext JS, LLC.
61011  *
61012  * Originally Released Under LGPL - original licence link has changed is not relivant.
61013  *
61014  * Fork - LGPL
61015  * <script type="text/javascript">
61016  */
61017  
61018
61019 /**
61020  * @class Roo.ReaderLayout
61021  * @extends Roo.BorderLayout
61022  * This is a pre-built layout that represents a classic, 5-pane application.  It consists of a header, a primary
61023  * center region containing two nested regions (a top one for a list view and one for item preview below),
61024  * and regions on either side that can be used for navigation, application commands, informational displays, etc.
61025  * The setup and configuration work exactly the same as it does for a {@link Roo.BorderLayout} - this class simply
61026  * expedites the setup of the overall layout and regions for this common application style.
61027  * Example:
61028  <pre><code>
61029 var reader = new Roo.ReaderLayout();
61030 var CP = Roo.ContentPanel;  // shortcut for adding
61031
61032 reader.beginUpdate();
61033 reader.add("north", new CP("north", "North"));
61034 reader.add("west", new CP("west", {title: "West"}));
61035 reader.add("east", new CP("east", {title: "East"}));
61036
61037 reader.regions.listView.add(new CP("listView", "List"));
61038 reader.regions.preview.add(new CP("preview", "Preview"));
61039 reader.endUpdate();
61040 </code></pre>
61041 * @constructor
61042 * Create a new ReaderLayout
61043 * @param {Object} config Configuration options
61044 * @param {String/HTMLElement/Element} container (optional) The container this layout is bound to (defaults to
61045 * document.body if omitted)
61046 */
61047 Roo.ReaderLayout = function(config, renderTo){
61048     var c = config || {size:{}};
61049     Roo.ReaderLayout.superclass.constructor.call(this, renderTo || document.body, {
61050         north: c.north !== false ? Roo.apply({
61051             split:false,
61052             initialSize: 32,
61053             titlebar: false
61054         }, c.north) : false,
61055         west: c.west !== false ? Roo.apply({
61056             split:true,
61057             initialSize: 200,
61058             minSize: 175,
61059             maxSize: 400,
61060             titlebar: true,
61061             collapsible: true,
61062             animate: true,
61063             margins:{left:5,right:0,bottom:5,top:5},
61064             cmargins:{left:5,right:5,bottom:5,top:5}
61065         }, c.west) : false,
61066         east: c.east !== false ? Roo.apply({
61067             split:true,
61068             initialSize: 200,
61069             minSize: 175,
61070             maxSize: 400,
61071             titlebar: true,
61072             collapsible: true,
61073             animate: true,
61074             margins:{left:0,right:5,bottom:5,top:5},
61075             cmargins:{left:5,right:5,bottom:5,top:5}
61076         }, c.east) : false,
61077         center: Roo.apply({
61078             tabPosition: 'top',
61079             autoScroll:false,
61080             closeOnTab: true,
61081             titlebar:false,
61082             margins:{left:c.west!==false ? 0 : 5,right:c.east!==false ? 0 : 5,bottom:5,top:2}
61083         }, c.center)
61084     });
61085
61086     this.el.addClass('x-reader');
61087
61088     this.beginUpdate();
61089
61090     var inner = new Roo.BorderLayout(Roo.get(document.body).createChild(), {
61091         south: c.preview !== false ? Roo.apply({
61092             split:true,
61093             initialSize: 200,
61094             minSize: 100,
61095             autoScroll:true,
61096             collapsible:true,
61097             titlebar: true,
61098             cmargins:{top:5,left:0, right:0, bottom:0}
61099         }, c.preview) : false,
61100         center: Roo.apply({
61101             autoScroll:false,
61102             titlebar:false,
61103             minHeight:200
61104         }, c.listView)
61105     });
61106     this.add('center', new Roo.NestedLayoutPanel(inner,
61107             Roo.apply({title: c.mainTitle || '',tabTip:''},c.innerPanelCfg)));
61108
61109     this.endUpdate();
61110
61111     this.regions.preview = inner.getRegion('south');
61112     this.regions.listView = inner.getRegion('center');
61113 };
61114
61115 Roo.extend(Roo.ReaderLayout, Roo.BorderLayout);/*
61116  * Based on:
61117  * Ext JS Library 1.1.1
61118  * Copyright(c) 2006-2007, Ext JS, LLC.
61119  *
61120  * Originally Released Under LGPL - original licence link has changed is not relivant.
61121  *
61122  * Fork - LGPL
61123  * <script type="text/javascript">
61124  */
61125  
61126 /**
61127  * @class Roo.grid.Grid
61128  * @extends Roo.util.Observable
61129  * This class represents the primary interface of a component based grid control.
61130  * <br><br>Usage:<pre><code>
61131  var grid = new Roo.grid.Grid("my-container-id", {
61132      ds: myDataStore,
61133      cm: myColModel,
61134      selModel: mySelectionModel,
61135      autoSizeColumns: true,
61136      monitorWindowResize: false,
61137      trackMouseOver: true
61138  });
61139  // set any options
61140  grid.render();
61141  * </code></pre>
61142  * <b>Common Problems:</b><br/>
61143  * - Grid does not resize properly when going smaller: Setting overflow hidden on the container
61144  * element will correct this<br/>
61145  * - If you get el.style[camel]= NaNpx or -2px or something related, be certain you have given your container element
61146  * dimensions. The grid adapts to your container's size, if your container has no size defined then the results
61147  * are unpredictable.<br/>
61148  * - Do not render the grid into an element with display:none. Try using visibility:hidden. Otherwise there is no way for the
61149  * grid to calculate dimensions/offsets.<br/>
61150   * @constructor
61151  * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered -
61152  * The container MUST have some type of size defined for the grid to fill. The container will be
61153  * automatically set to position relative if it isn't already.
61154  * @param {Object} config A config object that sets properties on this grid.
61155  */
61156 Roo.grid.Grid = function(container, config){
61157         // initialize the container
61158         this.container = Roo.get(container);
61159         this.container.update("");
61160         this.container.setStyle("overflow", "hidden");
61161     this.container.addClass('x-grid-container');
61162
61163     this.id = this.container.id;
61164
61165     Roo.apply(this, config);
61166     // check and correct shorthanded configs
61167     if(this.ds){
61168         this.dataSource = this.ds;
61169         delete this.ds;
61170     }
61171     if(this.cm){
61172         this.colModel = this.cm;
61173         delete this.cm;
61174     }
61175     if(this.sm){
61176         this.selModel = this.sm;
61177         delete this.sm;
61178     }
61179
61180     if (this.selModel) {
61181         this.selModel = Roo.factory(this.selModel, Roo.grid);
61182         this.sm = this.selModel;
61183         this.sm.xmodule = this.xmodule || false;
61184     }
61185     if (typeof(this.colModel.config) == 'undefined') {
61186         this.colModel = new Roo.grid.ColumnModel(this.colModel);
61187         this.cm = this.colModel;
61188         this.cm.xmodule = this.xmodule || false;
61189     }
61190     if (this.dataSource) {
61191         this.dataSource= Roo.factory(this.dataSource, Roo.data);
61192         this.ds = this.dataSource;
61193         this.ds.xmodule = this.xmodule || false;
61194          
61195     }
61196     
61197     
61198     
61199     if(this.width){
61200         this.container.setWidth(this.width);
61201     }
61202
61203     if(this.height){
61204         this.container.setHeight(this.height);
61205     }
61206     /** @private */
61207         this.addEvents({
61208         // raw events
61209         /**
61210          * @event click
61211          * The raw click event for the entire grid.
61212          * @param {Roo.EventObject} e
61213          */
61214         "click" : true,
61215         /**
61216          * @event dblclick
61217          * The raw dblclick event for the entire grid.
61218          * @param {Roo.EventObject} e
61219          */
61220         "dblclick" : true,
61221         /**
61222          * @event contextmenu
61223          * The raw contextmenu event for the entire grid.
61224          * @param {Roo.EventObject} e
61225          */
61226         "contextmenu" : true,
61227         /**
61228          * @event mousedown
61229          * The raw mousedown event for the entire grid.
61230          * @param {Roo.EventObject} e
61231          */
61232         "mousedown" : true,
61233         /**
61234          * @event mouseup
61235          * The raw mouseup event for the entire grid.
61236          * @param {Roo.EventObject} e
61237          */
61238         "mouseup" : true,
61239         /**
61240          * @event mouseover
61241          * The raw mouseover event for the entire grid.
61242          * @param {Roo.EventObject} e
61243          */
61244         "mouseover" : true,
61245         /**
61246          * @event mouseout
61247          * The raw mouseout event for the entire grid.
61248          * @param {Roo.EventObject} e
61249          */
61250         "mouseout" : true,
61251         /**
61252          * @event keypress
61253          * The raw keypress event for the entire grid.
61254          * @param {Roo.EventObject} e
61255          */
61256         "keypress" : true,
61257         /**
61258          * @event keydown
61259          * The raw keydown event for the entire grid.
61260          * @param {Roo.EventObject} e
61261          */
61262         "keydown" : true,
61263
61264         // custom events
61265
61266         /**
61267          * @event cellclick
61268          * Fires when a cell is clicked
61269          * @param {Grid} this
61270          * @param {Number} rowIndex
61271          * @param {Number} columnIndex
61272          * @param {Roo.EventObject} e
61273          */
61274         "cellclick" : true,
61275         /**
61276          * @event celldblclick
61277          * Fires when a cell is double clicked
61278          * @param {Grid} this
61279          * @param {Number} rowIndex
61280          * @param {Number} columnIndex
61281          * @param {Roo.EventObject} e
61282          */
61283         "celldblclick" : true,
61284         /**
61285          * @event rowclick
61286          * Fires when a row is clicked
61287          * @param {Grid} this
61288          * @param {Number} rowIndex
61289          * @param {Roo.EventObject} e
61290          */
61291         "rowclick" : true,
61292         /**
61293          * @event rowdblclick
61294          * Fires when a row is double clicked
61295          * @param {Grid} this
61296          * @param {Number} rowIndex
61297          * @param {Roo.EventObject} e
61298          */
61299         "rowdblclick" : true,
61300         /**
61301          * @event headerclick
61302          * Fires when a header is clicked
61303          * @param {Grid} this
61304          * @param {Number} columnIndex
61305          * @param {Roo.EventObject} e
61306          */
61307         "headerclick" : true,
61308         /**
61309          * @event headerdblclick
61310          * Fires when a header cell is double clicked
61311          * @param {Grid} this
61312          * @param {Number} columnIndex
61313          * @param {Roo.EventObject} e
61314          */
61315         "headerdblclick" : true,
61316         /**
61317          * @event rowcontextmenu
61318          * Fires when a row is right clicked
61319          * @param {Grid} this
61320          * @param {Number} rowIndex
61321          * @param {Roo.EventObject} e
61322          */
61323         "rowcontextmenu" : true,
61324         /**
61325          * @event cellcontextmenu
61326          * Fires when a cell is right clicked
61327          * @param {Grid} this
61328          * @param {Number} rowIndex
61329          * @param {Number} cellIndex
61330          * @param {Roo.EventObject} e
61331          */
61332          "cellcontextmenu" : true,
61333         /**
61334          * @event headercontextmenu
61335          * Fires when a header is right clicked
61336          * @param {Grid} this
61337          * @param {Number} columnIndex
61338          * @param {Roo.EventObject} e
61339          */
61340         "headercontextmenu" : true,
61341         /**
61342          * @event bodyscroll
61343          * Fires when the body element is scrolled
61344          * @param {Number} scrollLeft
61345          * @param {Number} scrollTop
61346          */
61347         "bodyscroll" : true,
61348         /**
61349          * @event columnresize
61350          * Fires when the user resizes a column
61351          * @param {Number} columnIndex
61352          * @param {Number} newSize
61353          */
61354         "columnresize" : true,
61355         /**
61356          * @event columnmove
61357          * Fires when the user moves a column
61358          * @param {Number} oldIndex
61359          * @param {Number} newIndex
61360          */
61361         "columnmove" : true,
61362         /**
61363          * @event startdrag
61364          * Fires when row(s) start being dragged
61365          * @param {Grid} this
61366          * @param {Roo.GridDD} dd The drag drop object
61367          * @param {event} e The raw browser event
61368          */
61369         "startdrag" : true,
61370         /**
61371          * @event enddrag
61372          * Fires when a drag operation is complete
61373          * @param {Grid} this
61374          * @param {Roo.GridDD} dd The drag drop object
61375          * @param {event} e The raw browser event
61376          */
61377         "enddrag" : true,
61378         /**
61379          * @event dragdrop
61380          * Fires when dragged row(s) are dropped on a valid DD target
61381          * @param {Grid} this
61382          * @param {Roo.GridDD} dd The drag drop object
61383          * @param {String} targetId The target drag drop object
61384          * @param {event} e The raw browser event
61385          */
61386         "dragdrop" : true,
61387         /**
61388          * @event dragover
61389          * Fires while row(s) are being dragged. "targetId" is the id of the Yahoo.util.DD object the selected rows are being dragged over.
61390          * @param {Grid} this
61391          * @param {Roo.GridDD} dd The drag drop object
61392          * @param {String} targetId The target drag drop object
61393          * @param {event} e The raw browser event
61394          */
61395         "dragover" : true,
61396         /**
61397          * @event dragenter
61398          *  Fires when the dragged row(s) first cross another DD target while being dragged
61399          * @param {Grid} this
61400          * @param {Roo.GridDD} dd The drag drop object
61401          * @param {String} targetId The target drag drop object
61402          * @param {event} e The raw browser event
61403          */
61404         "dragenter" : true,
61405         /**
61406          * @event dragout
61407          * Fires when the dragged row(s) leave another DD target while being dragged
61408          * @param {Grid} this
61409          * @param {Roo.GridDD} dd The drag drop object
61410          * @param {String} targetId The target drag drop object
61411          * @param {event} e The raw browser event
61412          */
61413         "dragout" : true,
61414         /**
61415          * @event rowclass
61416          * Fires when a row is rendered, so you can change add a style to it.
61417          * @param {GridView} gridview   The grid view
61418          * @param {Object} rowcfg   contains record  rowIndex and rowClass - set rowClass to add a style.
61419          */
61420         'rowclass' : true,
61421
61422         /**
61423          * @event render
61424          * Fires when the grid is rendered
61425          * @param {Grid} grid
61426          */
61427         'render' : true
61428     });
61429
61430     Roo.grid.Grid.superclass.constructor.call(this);
61431 };
61432 Roo.extend(Roo.grid.Grid, Roo.util.Observable, {
61433     
61434     /**
61435          * @cfg {Roo.grid.AbstractSelectionModel} sm The selection Model (default = Roo.grid.RowSelectionModel)
61436          */
61437         /**
61438          * @cfg {Roo.grid.GridView} view  The view that renders the grid (default = Roo.grid.GridView)
61439          */
61440         /**
61441          * @cfg {Roo.grid.ColumnModel} cm[] The columns of the grid
61442          */
61443         /**
61444          * @cfg {Roo.data.Store} ds The data store for the grid
61445          */
61446         /**
61447          * @cfg {Roo.Toolbar} toolbar a toolbar for buttons etc.
61448          */
61449         /**
61450      * @cfg {String} ddGroup - drag drop group.
61451      */
61452       /**
61453      * @cfg {String} dragGroup - drag group (?? not sure if needed.)
61454      */
61455
61456     /**
61457      * @cfg {Number} minColumnWidth The minimum width a column can be resized to. Default is 25.
61458      */
61459     minColumnWidth : 25,
61460
61461     /**
61462      * @cfg {Boolean} autoSizeColumns True to automatically resize the columns to fit their content
61463      * <b>on initial render.</b> It is more efficient to explicitly size the columns
61464      * through the ColumnModel's {@link Roo.grid.ColumnModel#width} config option.  Default is false.
61465      */
61466     autoSizeColumns : false,
61467
61468     /**
61469      * @cfg {Boolean} autoSizeHeaders True to measure headers with column data when auto sizing columns. Default is true.
61470      */
61471     autoSizeHeaders : true,
61472
61473     /**
61474      * @cfg {Boolean} monitorWindowResize True to autoSize the grid when the window resizes. Default is true.
61475      */
61476     monitorWindowResize : true,
61477
61478     /**
61479      * @cfg {Boolean} maxRowsToMeasure If autoSizeColumns is on, maxRowsToMeasure can be used to limit the number of
61480      * rows measured to get a columns size. Default is 0 (all rows).
61481      */
61482     maxRowsToMeasure : 0,
61483
61484     /**
61485      * @cfg {Boolean} trackMouseOver True to highlight rows when the mouse is over. Default is true.
61486      */
61487     trackMouseOver : true,
61488
61489     /**
61490     * @cfg {Boolean} enableDrag  True to enable drag of rows. Default is false. (double check if this is needed?)
61491     */
61492       /**
61493     * @cfg {Boolean} enableDrop  True to enable drop of elements. Default is false. (double check if this is needed?)
61494     */
61495     
61496     /**
61497     * @cfg {Boolean} enableDragDrop True to enable drag and drop of rows. Default is false.
61498     */
61499     enableDragDrop : false,
61500     
61501     /**
61502     * @cfg {Boolean} enableColumnMove True to enable drag and drop reorder of columns. Default is true.
61503     */
61504     enableColumnMove : true,
61505     
61506     /**
61507     * @cfg {Boolean} enableColumnHide True to enable hiding of columns with the header context menu. Default is true.
61508     */
61509     enableColumnHide : true,
61510     
61511     /**
61512     * @cfg {Boolean} enableRowHeightSync True to manually sync row heights across locked and not locked rows. Default is false.
61513     */
61514     enableRowHeightSync : false,
61515     
61516     /**
61517     * @cfg {Boolean} stripeRows True to stripe the rows.  Default is true.
61518     */
61519     stripeRows : true,
61520     
61521     /**
61522     * @cfg {Boolean} autoHeight True to fit the height of the grid container to the height of the data. Default is false.
61523     */
61524     autoHeight : false,
61525
61526     /**
61527      * @cfg {String} autoExpandColumn The id (or dataIndex) of a column in this grid that should expand to fill unused space. This id can not be 0. Default is false.
61528      */
61529     autoExpandColumn : false,
61530
61531     /**
61532     * @cfg {Number} autoExpandMin The minimum width the autoExpandColumn can have (if enabled).
61533     * Default is 50.
61534     */
61535     autoExpandMin : 50,
61536
61537     /**
61538     * @cfg {Number} autoExpandMax The maximum width the autoExpandColumn can have (if enabled). Default is 1000.
61539     */
61540     autoExpandMax : 1000,
61541
61542     /**
61543     * @cfg {Object} view The {@link Roo.grid.GridView} used by the grid. This can be set before a call to render().
61544     */
61545     view : null,
61546
61547     /**
61548     * @cfg {Object} loadMask An {@link Roo.LoadMask} config or true to mask the grid while loading. Default is false.
61549     */
61550     loadMask : false,
61551     /**
61552     * @cfg {Roo.dd.DropTarget} dropTarget An {@link Roo.dd.DropTarget} config
61553     */
61554     dropTarget: false,
61555      /**
61556     * @cfg {boolean} sortColMenu Sort the column order menu when it shows (usefull for long lists..) default false
61557     */ 
61558     sortColMenu : false,
61559     
61560     // private
61561     rendered : false,
61562
61563     /**
61564     * @cfg {Boolean} autoWidth True to set the grid's width to the default total width of the grid's columns instead
61565     * of a fixed width. Default is false.
61566     */
61567     /**
61568     * @cfg {Number} maxHeight Sets the maximum height of the grid - ignored if autoHeight is not on.
61569     */
61570     
61571     
61572     /**
61573     * @cfg {String} ddText Configures the text is the drag proxy (defaults to "%0 selected row(s)").
61574     * %0 is replaced with the number of selected rows.
61575     */
61576     ddText : "{0} selected row{1}",
61577     
61578     
61579     /**
61580      * Called once after all setup has been completed and the grid is ready to be rendered.
61581      * @return {Roo.grid.Grid} this
61582      */
61583     render : function()
61584     {
61585         var c = this.container;
61586         // try to detect autoHeight/width mode
61587         if((!c.dom.offsetHeight || c.dom.offsetHeight < 20) || c.getStyle("height") == "auto"){
61588             this.autoHeight = true;
61589         }
61590         var view = this.getView();
61591         view.init(this);
61592
61593         c.on("click", this.onClick, this);
61594         c.on("dblclick", this.onDblClick, this);
61595         c.on("contextmenu", this.onContextMenu, this);
61596         c.on("keydown", this.onKeyDown, this);
61597         if (Roo.isTouch) {
61598             c.on("touchstart", this.onTouchStart, this);
61599         }
61600
61601         this.relayEvents(c, ["mousedown","mouseup","mouseover","mouseout","keypress"]);
61602
61603         this.getSelectionModel().init(this);
61604
61605         view.render();
61606
61607         if(this.loadMask){
61608             this.loadMask = new Roo.LoadMask(this.container,
61609                     Roo.apply({store:this.dataSource}, this.loadMask));
61610         }
61611         
61612         
61613         if (this.toolbar && this.toolbar.xtype) {
61614             this.toolbar.container = this.getView().getHeaderPanel(true);
61615             this.toolbar = new Roo.Toolbar(this.toolbar);
61616         }
61617         if (this.footer && this.footer.xtype) {
61618             this.footer.dataSource = this.getDataSource();
61619             this.footer.container = this.getView().getFooterPanel(true);
61620             this.footer = Roo.factory(this.footer, Roo);
61621         }
61622         if (this.dropTarget && this.dropTarget.xtype) {
61623             delete this.dropTarget.xtype;
61624             this.dropTarget =  new Roo.dd.DropTarget(this.getView().mainBody, this.dropTarget);
61625         }
61626         
61627         
61628         this.rendered = true;
61629         this.fireEvent('render', this);
61630         return this;
61631     },
61632
61633     /**
61634      * Reconfigures the grid to use a different Store and Column Model.
61635      * The View will be bound to the new objects and refreshed.
61636      * @param {Roo.data.Store} dataSource The new {@link Roo.data.Store} object
61637      * @param {Roo.grid.ColumnModel} The new {@link Roo.grid.ColumnModel} object
61638      */
61639     reconfigure : function(dataSource, colModel){
61640         if(this.loadMask){
61641             this.loadMask.destroy();
61642             this.loadMask = new Roo.LoadMask(this.container,
61643                     Roo.apply({store:dataSource}, this.loadMask));
61644         }
61645         this.view.bind(dataSource, colModel);
61646         this.dataSource = dataSource;
61647         this.colModel = colModel;
61648         this.view.refresh(true);
61649     },
61650     /**
61651      * addColumns
61652      * Add's a column, default at the end..
61653      
61654      * @param {int} position to add (default end)
61655      * @param {Array} of objects of column configuration see {@link Roo.grid.ColumnModel} 
61656      */
61657     addColumns : function(pos, ar)
61658     {
61659         
61660         for (var i =0;i< ar.length;i++) {
61661             var cfg = ar[i];
61662             cfg.id = typeof(cfg.id) == 'undefined' ? Roo.id() : cfg.id; // don't normally use this..
61663             this.cm.lookup[cfg.id] = cfg;
61664         }
61665         
61666         
61667         if (typeof(pos) == 'undefined' || pos >= this.cm.config.length) {
61668             pos = this.cm.config.length; //this.cm.config.push(cfg);
61669         } 
61670         pos = Math.max(0,pos);
61671         ar.unshift(0);
61672         ar.unshift(pos);
61673         this.cm.config.splice.apply(this.cm.config, ar);
61674         
61675         
61676         
61677         this.view.generateRules(this.cm);
61678         this.view.refresh(true);
61679         
61680     },
61681     
61682     
61683     
61684     
61685     // private
61686     onKeyDown : function(e){
61687         this.fireEvent("keydown", e);
61688     },
61689
61690     /**
61691      * Destroy this grid.
61692      * @param {Boolean} removeEl True to remove the element
61693      */
61694     destroy : function(removeEl, keepListeners){
61695         if(this.loadMask){
61696             this.loadMask.destroy();
61697         }
61698         var c = this.container;
61699         c.removeAllListeners();
61700         this.view.destroy();
61701         this.colModel.purgeListeners();
61702         if(!keepListeners){
61703             this.purgeListeners();
61704         }
61705         c.update("");
61706         if(removeEl === true){
61707             c.remove();
61708         }
61709     },
61710
61711     // private
61712     processEvent : function(name, e){
61713         // does this fire select???
61714         //Roo.log('grid:processEvent '  + name);
61715         
61716         if (name != 'touchstart' ) {
61717             this.fireEvent(name, e);    
61718         }
61719         
61720         var t = e.getTarget();
61721         var v = this.view;
61722         var header = v.findHeaderIndex(t);
61723         if(header !== false){
61724             var ename = name == 'touchstart' ? 'click' : name;
61725              
61726             this.fireEvent("header" + ename, this, header, e);
61727         }else{
61728             var row = v.findRowIndex(t);
61729             var cell = v.findCellIndex(t);
61730             if (name == 'touchstart') {
61731                 // first touch is always a click.
61732                 // hopefull this happens after selection is updated.?
61733                 name = false;
61734                 
61735                 if (typeof(this.selModel.getSelectedCell) != 'undefined') {
61736                     var cs = this.selModel.getSelectedCell();
61737                     if (row == cs[0] && cell == cs[1]){
61738                         name = 'dblclick';
61739                     }
61740                 }
61741                 if (typeof(this.selModel.getSelections) != 'undefined') {
61742                     var cs = this.selModel.getSelections();
61743                     var ds = this.dataSource;
61744                     if (cs.length == 1 && ds.getAt(row) == cs[0]){
61745                         name = 'dblclick';
61746                     }
61747                 }
61748                 if (!name) {
61749                     return;
61750                 }
61751             }
61752             
61753             
61754             if(row !== false){
61755                 this.fireEvent("row" + name, this, row, e);
61756                 if(cell !== false){
61757                     this.fireEvent("cell" + name, this, row, cell, e);
61758                 }
61759             }
61760         }
61761     },
61762
61763     // private
61764     onClick : function(e){
61765         this.processEvent("click", e);
61766     },
61767    // private
61768     onTouchStart : function(e){
61769         this.processEvent("touchstart", e);
61770     },
61771
61772     // private
61773     onContextMenu : function(e, t){
61774         this.processEvent("contextmenu", e);
61775     },
61776
61777     // private
61778     onDblClick : function(e){
61779         this.processEvent("dblclick", e);
61780     },
61781
61782     // private
61783     walkCells : function(row, col, step, fn, scope){
61784         var cm = this.colModel, clen = cm.getColumnCount();
61785         var ds = this.dataSource, rlen = ds.getCount(), first = true;
61786         if(step < 0){
61787             if(col < 0){
61788                 row--;
61789                 first = false;
61790             }
61791             while(row >= 0){
61792                 if(!first){
61793                     col = clen-1;
61794                 }
61795                 first = false;
61796                 while(col >= 0){
61797                     if(fn.call(scope || this, row, col, cm) === true){
61798                         return [row, col];
61799                     }
61800                     col--;
61801                 }
61802                 row--;
61803             }
61804         } else {
61805             if(col >= clen){
61806                 row++;
61807                 first = false;
61808             }
61809             while(row < rlen){
61810                 if(!first){
61811                     col = 0;
61812                 }
61813                 first = false;
61814                 while(col < clen){
61815                     if(fn.call(scope || this, row, col, cm) === true){
61816                         return [row, col];
61817                     }
61818                     col++;
61819                 }
61820                 row++;
61821             }
61822         }
61823         return null;
61824     },
61825
61826     // private
61827     getSelections : function(){
61828         return this.selModel.getSelections();
61829     },
61830
61831     /**
61832      * Causes the grid to manually recalculate its dimensions. Generally this is done automatically,
61833      * but if manual update is required this method will initiate it.
61834      */
61835     autoSize : function(){
61836         if(this.rendered){
61837             this.view.layout();
61838             if(this.view.adjustForScroll){
61839                 this.view.adjustForScroll();
61840             }
61841         }
61842     },
61843
61844     /**
61845      * Returns the grid's underlying element.
61846      * @return {Element} The element
61847      */
61848     getGridEl : function(){
61849         return this.container;
61850     },
61851
61852     // private for compatibility, overridden by editor grid
61853     stopEditing : function(){},
61854
61855     /**
61856      * Returns the grid's SelectionModel.
61857      * @return {SelectionModel}
61858      */
61859     getSelectionModel : function(){
61860         if(!this.selModel){
61861             this.selModel = new Roo.grid.RowSelectionModel();
61862         }
61863         return this.selModel;
61864     },
61865
61866     /**
61867      * Returns the grid's DataSource.
61868      * @return {DataSource}
61869      */
61870     getDataSource : function(){
61871         return this.dataSource;
61872     },
61873
61874     /**
61875      * Returns the grid's ColumnModel.
61876      * @return {ColumnModel}
61877      */
61878     getColumnModel : function(){
61879         return this.colModel;
61880     },
61881
61882     /**
61883      * Returns the grid's GridView object.
61884      * @return {GridView}
61885      */
61886     getView : function(){
61887         if(!this.view){
61888             this.view = new Roo.grid.GridView(this.viewConfig);
61889             this.relayEvents(this.view, [
61890                 "beforerowremoved", "beforerowsinserted",
61891                 "beforerefresh", "rowremoved",
61892                 "rowsinserted", "rowupdated" ,"refresh"
61893             ]);
61894         }
61895         return this.view;
61896     },
61897     /**
61898      * Called to get grid's drag proxy text, by default returns this.ddText.
61899      * Override this to put something different in the dragged text.
61900      * @return {String}
61901      */
61902     getDragDropText : function(){
61903         var count = this.selModel.getCount();
61904         return String.format(this.ddText, count, count == 1 ? '' : 's');
61905     }
61906 });
61907 /*
61908  * Based on:
61909  * Ext JS Library 1.1.1
61910  * Copyright(c) 2006-2007, Ext JS, LLC.
61911  *
61912  * Originally Released Under LGPL - original licence link has changed is not relivant.
61913  *
61914  * Fork - LGPL
61915  * <script type="text/javascript">
61916  */
61917  /**
61918  * @class Roo.grid.AbstractGridView
61919  * @extends Roo.util.Observable
61920  * @abstract
61921  * Abstract base class for grid Views
61922  * @constructor
61923  */
61924 Roo.grid.AbstractGridView = function(){
61925         this.grid = null;
61926         
61927         this.events = {
61928             "beforerowremoved" : true,
61929             "beforerowsinserted" : true,
61930             "beforerefresh" : true,
61931             "rowremoved" : true,
61932             "rowsinserted" : true,
61933             "rowupdated" : true,
61934             "refresh" : true
61935         };
61936     Roo.grid.AbstractGridView.superclass.constructor.call(this);
61937 };
61938
61939 Roo.extend(Roo.grid.AbstractGridView, Roo.util.Observable, {
61940     rowClass : "x-grid-row",
61941     cellClass : "x-grid-cell",
61942     tdClass : "x-grid-td",
61943     hdClass : "x-grid-hd",
61944     splitClass : "x-grid-hd-split",
61945     
61946     init: function(grid){
61947         this.grid = grid;
61948                 var cid = this.grid.getGridEl().id;
61949         this.colSelector = "#" + cid + " ." + this.cellClass + "-";
61950         this.tdSelector = "#" + cid + " ." + this.tdClass + "-";
61951         this.hdSelector = "#" + cid + " ." + this.hdClass + "-";
61952         this.splitSelector = "#" + cid + " ." + this.splitClass + "-";
61953         },
61954         
61955     getColumnRenderers : function(){
61956         var renderers = [];
61957         var cm = this.grid.colModel;
61958         var colCount = cm.getColumnCount();
61959         for(var i = 0; i < colCount; i++){
61960             renderers[i] = cm.getRenderer(i);
61961         }
61962         return renderers;
61963     },
61964     
61965     getColumnIds : function(){
61966         var ids = [];
61967         var cm = this.grid.colModel;
61968         var colCount = cm.getColumnCount();
61969         for(var i = 0; i < colCount; i++){
61970             ids[i] = cm.getColumnId(i);
61971         }
61972         return ids;
61973     },
61974     
61975     getDataIndexes : function(){
61976         if(!this.indexMap){
61977             this.indexMap = this.buildIndexMap();
61978         }
61979         return this.indexMap.colToData;
61980     },
61981     
61982     getColumnIndexByDataIndex : function(dataIndex){
61983         if(!this.indexMap){
61984             this.indexMap = this.buildIndexMap();
61985         }
61986         return this.indexMap.dataToCol[dataIndex];
61987     },
61988     
61989     /**
61990      * Set a css style for a column dynamically. 
61991      * @param {Number} colIndex The index of the column
61992      * @param {String} name The css property name
61993      * @param {String} value The css value
61994      */
61995     setCSSStyle : function(colIndex, name, value){
61996         var selector = "#" + this.grid.id + " .x-grid-col-" + colIndex;
61997         Roo.util.CSS.updateRule(selector, name, value);
61998     },
61999     
62000     generateRules : function(cm){
62001         var ruleBuf = [], rulesId = this.grid.id + '-cssrules';
62002         Roo.util.CSS.removeStyleSheet(rulesId);
62003         for(var i = 0, len = cm.getColumnCount(); i < len; i++){
62004             var cid = cm.getColumnId(i);
62005             ruleBuf.push(this.colSelector, cid, " {\n", cm.config[i].css, "}\n",
62006                          this.tdSelector, cid, " {\n}\n",
62007                          this.hdSelector, cid, " {\n}\n",
62008                          this.splitSelector, cid, " {\n}\n");
62009         }
62010         return Roo.util.CSS.createStyleSheet(ruleBuf.join(""), rulesId);
62011     }
62012 });/*
62013  * Based on:
62014  * Ext JS Library 1.1.1
62015  * Copyright(c) 2006-2007, Ext JS, LLC.
62016  *
62017  * Originally Released Under LGPL - original licence link has changed is not relivant.
62018  *
62019  * Fork - LGPL
62020  * <script type="text/javascript">
62021  */
62022
62023 // private
62024 // This is a support class used internally by the Grid components
62025 Roo.grid.HeaderDragZone = function(grid, hd, hd2){
62026     this.grid = grid;
62027     this.view = grid.getView();
62028     this.ddGroup = "gridHeader" + this.grid.getGridEl().id;
62029     Roo.grid.HeaderDragZone.superclass.constructor.call(this, hd);
62030     if(hd2){
62031         this.setHandleElId(Roo.id(hd));
62032         this.setOuterHandleElId(Roo.id(hd2));
62033     }
62034     this.scroll = false;
62035 };
62036 Roo.extend(Roo.grid.HeaderDragZone, Roo.dd.DragZone, {
62037     maxDragWidth: 120,
62038     getDragData : function(e){
62039         var t = Roo.lib.Event.getTarget(e);
62040         var h = this.view.findHeaderCell(t);
62041         if(h){
62042             return {ddel: h.firstChild, header:h};
62043         }
62044         return false;
62045     },
62046
62047     onInitDrag : function(e){
62048         this.view.headersDisabled = true;
62049         var clone = this.dragData.ddel.cloneNode(true);
62050         clone.id = Roo.id();
62051         clone.style.width = Math.min(this.dragData.header.offsetWidth,this.maxDragWidth) + "px";
62052         this.proxy.update(clone);
62053         return true;
62054     },
62055
62056     afterValidDrop : function(){
62057         var v = this.view;
62058         setTimeout(function(){
62059             v.headersDisabled = false;
62060         }, 50);
62061     },
62062
62063     afterInvalidDrop : function(){
62064         var v = this.view;
62065         setTimeout(function(){
62066             v.headersDisabled = false;
62067         }, 50);
62068     }
62069 });
62070 /*
62071  * Based on:
62072  * Ext JS Library 1.1.1
62073  * Copyright(c) 2006-2007, Ext JS, LLC.
62074  *
62075  * Originally Released Under LGPL - original licence link has changed is not relivant.
62076  *
62077  * Fork - LGPL
62078  * <script type="text/javascript">
62079  */
62080 // private
62081 // This is a support class used internally by the Grid components
62082 Roo.grid.HeaderDropZone = function(grid, hd, hd2){
62083     this.grid = grid;
62084     this.view = grid.getView();
62085     // split the proxies so they don't interfere with mouse events
62086     this.proxyTop = Roo.DomHelper.append(document.body, {
62087         cls:"col-move-top", html:"&#160;"
62088     }, true);
62089     this.proxyBottom = Roo.DomHelper.append(document.body, {
62090         cls:"col-move-bottom", html:"&#160;"
62091     }, true);
62092     this.proxyTop.hide = this.proxyBottom.hide = function(){
62093         this.setLeftTop(-100,-100);
62094         this.setStyle("visibility", "hidden");
62095     };
62096     this.ddGroup = "gridHeader" + this.grid.getGridEl().id;
62097     // temporarily disabled
62098     //Roo.dd.ScrollManager.register(this.view.scroller.dom);
62099     Roo.grid.HeaderDropZone.superclass.constructor.call(this, grid.getGridEl().dom);
62100 };
62101 Roo.extend(Roo.grid.HeaderDropZone, Roo.dd.DropZone, {
62102     proxyOffsets : [-4, -9],
62103     fly: Roo.Element.fly,
62104
62105     getTargetFromEvent : function(e){
62106         var t = Roo.lib.Event.getTarget(e);
62107         var cindex = this.view.findCellIndex(t);
62108         if(cindex !== false){
62109             return this.view.getHeaderCell(cindex);
62110         }
62111         return null;
62112     },
62113
62114     nextVisible : function(h){
62115         var v = this.view, cm = this.grid.colModel;
62116         h = h.nextSibling;
62117         while(h){
62118             if(!cm.isHidden(v.getCellIndex(h))){
62119                 return h;
62120             }
62121             h = h.nextSibling;
62122         }
62123         return null;
62124     },
62125
62126     prevVisible : function(h){
62127         var v = this.view, cm = this.grid.colModel;
62128         h = h.prevSibling;
62129         while(h){
62130             if(!cm.isHidden(v.getCellIndex(h))){
62131                 return h;
62132             }
62133             h = h.prevSibling;
62134         }
62135         return null;
62136     },
62137
62138     positionIndicator : function(h, n, e){
62139         var x = Roo.lib.Event.getPageX(e);
62140         var r = Roo.lib.Dom.getRegion(n.firstChild);
62141         var px, pt, py = r.top + this.proxyOffsets[1];
62142         if((r.right - x) <= (r.right-r.left)/2){
62143             px = r.right+this.view.borderWidth;
62144             pt = "after";
62145         }else{
62146             px = r.left;
62147             pt = "before";
62148         }
62149         var oldIndex = this.view.getCellIndex(h);
62150         var newIndex = this.view.getCellIndex(n);
62151
62152         if(this.grid.colModel.isFixed(newIndex)){
62153             return false;
62154         }
62155
62156         var locked = this.grid.colModel.isLocked(newIndex);
62157
62158         if(pt == "after"){
62159             newIndex++;
62160         }
62161         if(oldIndex < newIndex){
62162             newIndex--;
62163         }
62164         if(oldIndex == newIndex && (locked == this.grid.colModel.isLocked(oldIndex))){
62165             return false;
62166         }
62167         px +=  this.proxyOffsets[0];
62168         this.proxyTop.setLeftTop(px, py);
62169         this.proxyTop.show();
62170         if(!this.bottomOffset){
62171             this.bottomOffset = this.view.mainHd.getHeight();
62172         }
62173         this.proxyBottom.setLeftTop(px, py+this.proxyTop.dom.offsetHeight+this.bottomOffset);
62174         this.proxyBottom.show();
62175         return pt;
62176     },
62177
62178     onNodeEnter : function(n, dd, e, data){
62179         if(data.header != n){
62180             this.positionIndicator(data.header, n, e);
62181         }
62182     },
62183
62184     onNodeOver : function(n, dd, e, data){
62185         var result = false;
62186         if(data.header != n){
62187             result = this.positionIndicator(data.header, n, e);
62188         }
62189         if(!result){
62190             this.proxyTop.hide();
62191             this.proxyBottom.hide();
62192         }
62193         return result ? this.dropAllowed : this.dropNotAllowed;
62194     },
62195
62196     onNodeOut : function(n, dd, e, data){
62197         this.proxyTop.hide();
62198         this.proxyBottom.hide();
62199     },
62200
62201     onNodeDrop : function(n, dd, e, data){
62202         var h = data.header;
62203         if(h != n){
62204             var cm = this.grid.colModel;
62205             var x = Roo.lib.Event.getPageX(e);
62206             var r = Roo.lib.Dom.getRegion(n.firstChild);
62207             var pt = (r.right - x) <= ((r.right-r.left)/2) ? "after" : "before";
62208             var oldIndex = this.view.getCellIndex(h);
62209             var newIndex = this.view.getCellIndex(n);
62210             var locked = cm.isLocked(newIndex);
62211             if(pt == "after"){
62212                 newIndex++;
62213             }
62214             if(oldIndex < newIndex){
62215                 newIndex--;
62216             }
62217             if(oldIndex == newIndex && (locked == cm.isLocked(oldIndex))){
62218                 return false;
62219             }
62220             cm.setLocked(oldIndex, locked, true);
62221             cm.moveColumn(oldIndex, newIndex);
62222             this.grid.fireEvent("columnmove", oldIndex, newIndex);
62223             return true;
62224         }
62225         return false;
62226     }
62227 });
62228 /*
62229  * Based on:
62230  * Ext JS Library 1.1.1
62231  * Copyright(c) 2006-2007, Ext JS, LLC.
62232  *
62233  * Originally Released Under LGPL - original licence link has changed is not relivant.
62234  *
62235  * Fork - LGPL
62236  * <script type="text/javascript">
62237  */
62238   
62239 /**
62240  * @class Roo.grid.GridView
62241  * @extends Roo.util.Observable
62242  *
62243  * @constructor
62244  * @param {Object} config
62245  */
62246 Roo.grid.GridView = function(config){
62247     Roo.grid.GridView.superclass.constructor.call(this);
62248     this.el = null;
62249
62250     Roo.apply(this, config);
62251 };
62252
62253 Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
62254
62255     unselectable :  'unselectable="on"',
62256     unselectableCls :  'x-unselectable',
62257     
62258     
62259     rowClass : "x-grid-row",
62260
62261     cellClass : "x-grid-col",
62262
62263     tdClass : "x-grid-td",
62264
62265     hdClass : "x-grid-hd",
62266
62267     splitClass : "x-grid-split",
62268
62269     sortClasses : ["sort-asc", "sort-desc"],
62270
62271     enableMoveAnim : false,
62272
62273     hlColor: "C3DAF9",
62274
62275     dh : Roo.DomHelper,
62276
62277     fly : Roo.Element.fly,
62278
62279     css : Roo.util.CSS,
62280
62281     borderWidth: 1,
62282
62283     splitOffset: 3,
62284
62285     scrollIncrement : 22,
62286
62287     cellRE: /(?:.*?)x-grid-(?:hd|cell|csplit)-(?:[\d]+)-([\d]+)(?:.*?)/,
62288
62289     findRE: /\s?(?:x-grid-hd|x-grid-col|x-grid-csplit)\s/,
62290
62291     bind : function(ds, cm){
62292         if(this.ds){
62293             this.ds.un("load", this.onLoad, this);
62294             this.ds.un("datachanged", this.onDataChange, this);
62295             this.ds.un("add", this.onAdd, this);
62296             this.ds.un("remove", this.onRemove, this);
62297             this.ds.un("update", this.onUpdate, this);
62298             this.ds.un("clear", this.onClear, this);
62299         }
62300         if(ds){
62301             ds.on("load", this.onLoad, this);
62302             ds.on("datachanged", this.onDataChange, this);
62303             ds.on("add", this.onAdd, this);
62304             ds.on("remove", this.onRemove, this);
62305             ds.on("update", this.onUpdate, this);
62306             ds.on("clear", this.onClear, this);
62307         }
62308         this.ds = ds;
62309
62310         if(this.cm){
62311             this.cm.un("widthchange", this.onColWidthChange, this);
62312             this.cm.un("headerchange", this.onHeaderChange, this);
62313             this.cm.un("hiddenchange", this.onHiddenChange, this);
62314             this.cm.un("columnmoved", this.onColumnMove, this);
62315             this.cm.un("columnlockchange", this.onColumnLock, this);
62316         }
62317         if(cm){
62318             this.generateRules(cm);
62319             cm.on("widthchange", this.onColWidthChange, this);
62320             cm.on("headerchange", this.onHeaderChange, this);
62321             cm.on("hiddenchange", this.onHiddenChange, this);
62322             cm.on("columnmoved", this.onColumnMove, this);
62323             cm.on("columnlockchange", this.onColumnLock, this);
62324         }
62325         this.cm = cm;
62326     },
62327
62328     init: function(grid){
62329         Roo.grid.GridView.superclass.init.call(this, grid);
62330
62331         this.bind(grid.dataSource, grid.colModel);
62332
62333         grid.on("headerclick", this.handleHeaderClick, this);
62334
62335         if(grid.trackMouseOver){
62336             grid.on("mouseover", this.onRowOver, this);
62337             grid.on("mouseout", this.onRowOut, this);
62338         }
62339         grid.cancelTextSelection = function(){};
62340         this.gridId = grid.id;
62341
62342         var tpls = this.templates || {};
62343
62344         if(!tpls.master){
62345             tpls.master = new Roo.Template(
62346                '<div class="x-grid" hidefocus="true">',
62347                 '<a href="#" class="x-grid-focus" tabIndex="-1"></a>',
62348                   '<div class="x-grid-topbar"></div>',
62349                   '<div class="x-grid-scroller"><div></div></div>',
62350                   '<div class="x-grid-locked">',
62351                       '<div class="x-grid-header">{lockedHeader}</div>',
62352                       '<div class="x-grid-body">{lockedBody}</div>',
62353                   "</div>",
62354                   '<div class="x-grid-viewport">',
62355                       '<div class="x-grid-header">{header}</div>',
62356                       '<div class="x-grid-body">{body}</div>',
62357                   "</div>",
62358                   '<div class="x-grid-bottombar"></div>',
62359                  
62360                   '<div class="x-grid-resize-proxy">&#160;</div>',
62361                "</div>"
62362             );
62363             tpls.master.disableformats = true;
62364         }
62365
62366         if(!tpls.header){
62367             tpls.header = new Roo.Template(
62368                '<table border="0" cellspacing="0" cellpadding="0">',
62369                '<tbody><tr class="x-grid-hd-row">{cells}</tr></tbody>',
62370                "</table>{splits}"
62371             );
62372             tpls.header.disableformats = true;
62373         }
62374         tpls.header.compile();
62375
62376         if(!tpls.hcell){
62377             tpls.hcell = new Roo.Template(
62378                 '<td class="x-grid-hd x-grid-td-{id} {cellId}"><div title="{title}" class="x-grid-hd-inner x-grid-hd-{id}">',
62379                 '<div class="x-grid-hd-text ' + this.unselectableCls +  '" ' + this.unselectable +'>{value}<img class="x-grid-sort-icon" src="', Roo.BLANK_IMAGE_URL, '" /></div>',
62380                 "</div></td>"
62381              );
62382              tpls.hcell.disableFormats = true;
62383         }
62384         tpls.hcell.compile();
62385
62386         if(!tpls.hsplit){
62387             tpls.hsplit = new Roo.Template('<div class="x-grid-split {splitId} x-grid-split-{id}" style="{style} ' +
62388                                             this.unselectableCls +  '" ' + this.unselectable +'>&#160;</div>');
62389             tpls.hsplit.disableFormats = true;
62390         }
62391         tpls.hsplit.compile();
62392
62393         if(!tpls.body){
62394             tpls.body = new Roo.Template(
62395                '<table border="0" cellspacing="0" cellpadding="0">',
62396                "<tbody>{rows}</tbody>",
62397                "</table>"
62398             );
62399             tpls.body.disableFormats = true;
62400         }
62401         tpls.body.compile();
62402
62403         if(!tpls.row){
62404             tpls.row = new Roo.Template('<tr class="x-grid-row {alt}">{cells}</tr>');
62405             tpls.row.disableFormats = true;
62406         }
62407         tpls.row.compile();
62408
62409         if(!tpls.cell){
62410             tpls.cell = new Roo.Template(
62411                 '<td class="x-grid-col x-grid-td-{id} {cellId} {css}" tabIndex="0">',
62412                 '<div class="x-grid-col-{id} x-grid-cell-inner"><div class="x-grid-cell-text ' +
62413                     this.unselectableCls +  '" ' + this.unselectable +'" {attr}>{value}</div></div>',
62414                 "</td>"
62415             );
62416             tpls.cell.disableFormats = true;
62417         }
62418         tpls.cell.compile();
62419
62420         this.templates = tpls;
62421     },
62422
62423     // remap these for backwards compat
62424     onColWidthChange : function(){
62425         this.updateColumns.apply(this, arguments);
62426     },
62427     onHeaderChange : function(){
62428         this.updateHeaders.apply(this, arguments);
62429     }, 
62430     onHiddenChange : function(){
62431         this.handleHiddenChange.apply(this, arguments);
62432     },
62433     onColumnMove : function(){
62434         this.handleColumnMove.apply(this, arguments);
62435     },
62436     onColumnLock : function(){
62437         this.handleLockChange.apply(this, arguments);
62438     },
62439
62440     onDataChange : function(){
62441         this.refresh();
62442         this.updateHeaderSortState();
62443     },
62444
62445     onClear : function(){
62446         this.refresh();
62447     },
62448
62449     onUpdate : function(ds, record){
62450         this.refreshRow(record);
62451     },
62452
62453     refreshRow : function(record){
62454         var ds = this.ds, index;
62455         if(typeof record == 'number'){
62456             index = record;
62457             record = ds.getAt(index);
62458         }else{
62459             index = ds.indexOf(record);
62460         }
62461         this.insertRows(ds, index, index, true);
62462         this.onRemove(ds, record, index+1, true);
62463         this.syncRowHeights(index, index);
62464         this.layout();
62465         this.fireEvent("rowupdated", this, index, record);
62466     },
62467
62468     onAdd : function(ds, records, index){
62469         this.insertRows(ds, index, index + (records.length-1));
62470     },
62471
62472     onRemove : function(ds, record, index, isUpdate){
62473         if(isUpdate !== true){
62474             this.fireEvent("beforerowremoved", this, index, record);
62475         }
62476         var bt = this.getBodyTable(), lt = this.getLockedTable();
62477         if(bt.rows[index]){
62478             bt.firstChild.removeChild(bt.rows[index]);
62479         }
62480         if(lt.rows[index]){
62481             lt.firstChild.removeChild(lt.rows[index]);
62482         }
62483         if(isUpdate !== true){
62484             this.stripeRows(index);
62485             this.syncRowHeights(index, index);
62486             this.layout();
62487             this.fireEvent("rowremoved", this, index, record);
62488         }
62489     },
62490
62491     onLoad : function(){
62492         this.scrollToTop();
62493     },
62494
62495     /**
62496      * Scrolls the grid to the top
62497      */
62498     scrollToTop : function(){
62499         if(this.scroller){
62500             this.scroller.dom.scrollTop = 0;
62501             this.syncScroll();
62502         }
62503     },
62504
62505     /**
62506      * Gets a panel in the header of the grid that can be used for toolbars etc.
62507      * After modifying the contents of this panel a call to grid.autoSize() may be
62508      * required to register any changes in size.
62509      * @param {Boolean} doShow By default the header is hidden. Pass true to show the panel
62510      * @return Roo.Element
62511      */
62512     getHeaderPanel : function(doShow){
62513         if(doShow){
62514             this.headerPanel.show();
62515         }
62516         return this.headerPanel;
62517     },
62518
62519     /**
62520      * Gets a panel in the footer of the grid that can be used for toolbars etc.
62521      * After modifying the contents of this panel a call to grid.autoSize() may be
62522      * required to register any changes in size.
62523      * @param {Boolean} doShow By default the footer is hidden. Pass true to show the panel
62524      * @return Roo.Element
62525      */
62526     getFooterPanel : function(doShow){
62527         if(doShow){
62528             this.footerPanel.show();
62529         }
62530         return this.footerPanel;
62531     },
62532
62533     initElements : function(){
62534         var E = Roo.Element;
62535         var el = this.grid.getGridEl().dom.firstChild;
62536         var cs = el.childNodes;
62537
62538         this.el = new E(el);
62539         
62540          this.focusEl = new E(el.firstChild);
62541         this.focusEl.swallowEvent("click", true);
62542         
62543         this.headerPanel = new E(cs[1]);
62544         this.headerPanel.enableDisplayMode("block");
62545
62546         this.scroller = new E(cs[2]);
62547         this.scrollSizer = new E(this.scroller.dom.firstChild);
62548
62549         this.lockedWrap = new E(cs[3]);
62550         this.lockedHd = new E(this.lockedWrap.dom.firstChild);
62551         this.lockedBody = new E(this.lockedWrap.dom.childNodes[1]);
62552
62553         this.mainWrap = new E(cs[4]);
62554         this.mainHd = new E(this.mainWrap.dom.firstChild);
62555         this.mainBody = new E(this.mainWrap.dom.childNodes[1]);
62556
62557         this.footerPanel = new E(cs[5]);
62558         this.footerPanel.enableDisplayMode("block");
62559
62560         this.resizeProxy = new E(cs[6]);
62561
62562         this.headerSelector = String.format(
62563            '#{0} td.x-grid-hd, #{1} td.x-grid-hd',
62564            this.lockedHd.id, this.mainHd.id
62565         );
62566
62567         this.splitterSelector = String.format(
62568            '#{0} div.x-grid-split, #{1} div.x-grid-split',
62569            this.idToCssName(this.lockedHd.id), this.idToCssName(this.mainHd.id)
62570         );
62571     },
62572     idToCssName : function(s)
62573     {
62574         return s.replace(/[^a-z0-9]+/ig, '-');
62575     },
62576
62577     getHeaderCell : function(index){
62578         return Roo.DomQuery.select(this.headerSelector)[index];
62579     },
62580
62581     getHeaderCellMeasure : function(index){
62582         return this.getHeaderCell(index).firstChild;
62583     },
62584
62585     getHeaderCellText : function(index){
62586         return this.getHeaderCell(index).firstChild.firstChild;
62587     },
62588
62589     getLockedTable : function(){
62590         return this.lockedBody.dom.firstChild;
62591     },
62592
62593     getBodyTable : function(){
62594         return this.mainBody.dom.firstChild;
62595     },
62596
62597     getLockedRow : function(index){
62598         return this.getLockedTable().rows[index];
62599     },
62600
62601     getRow : function(index){
62602         return this.getBodyTable().rows[index];
62603     },
62604
62605     getRowComposite : function(index){
62606         if(!this.rowEl){
62607             this.rowEl = new Roo.CompositeElementLite();
62608         }
62609         var els = [], lrow, mrow;
62610         if(lrow = this.getLockedRow(index)){
62611             els.push(lrow);
62612         }
62613         if(mrow = this.getRow(index)){
62614             els.push(mrow);
62615         }
62616         this.rowEl.elements = els;
62617         return this.rowEl;
62618     },
62619     /**
62620      * Gets the 'td' of the cell
62621      * 
62622      * @param {Integer} rowIndex row to select
62623      * @param {Integer} colIndex column to select
62624      * 
62625      * @return {Object} 
62626      */
62627     getCell : function(rowIndex, colIndex){
62628         var locked = this.cm.getLockedCount();
62629         var source;
62630         if(colIndex < locked){
62631             source = this.lockedBody.dom.firstChild;
62632         }else{
62633             source = this.mainBody.dom.firstChild;
62634             colIndex -= locked;
62635         }
62636         return source.rows[rowIndex].childNodes[colIndex];
62637     },
62638
62639     getCellText : function(rowIndex, colIndex){
62640         return this.getCell(rowIndex, colIndex).firstChild.firstChild;
62641     },
62642
62643     getCellBox : function(cell){
62644         var b = this.fly(cell).getBox();
62645         if(Roo.isOpera){ // opera fails to report the Y
62646             b.y = cell.offsetTop + this.mainBody.getY();
62647         }
62648         return b;
62649     },
62650
62651     getCellIndex : function(cell){
62652         var id = String(cell.className).match(this.cellRE);
62653         if(id){
62654             return parseInt(id[1], 10);
62655         }
62656         return 0;
62657     },
62658
62659     findHeaderIndex : function(n){
62660         var r = Roo.fly(n).findParent("td." + this.hdClass, 6);
62661         return r ? this.getCellIndex(r) : false;
62662     },
62663
62664     findHeaderCell : function(n){
62665         var r = Roo.fly(n).findParent("td." + this.hdClass, 6);
62666         return r ? r : false;
62667     },
62668
62669     findRowIndex : function(n){
62670         if(!n){
62671             return false;
62672         }
62673         var r = Roo.fly(n).findParent("tr." + this.rowClass, 6);
62674         return r ? r.rowIndex : false;
62675     },
62676
62677     findCellIndex : function(node){
62678         var stop = this.el.dom;
62679         while(node && node != stop){
62680             if(this.findRE.test(node.className)){
62681                 return this.getCellIndex(node);
62682             }
62683             node = node.parentNode;
62684         }
62685         return false;
62686     },
62687
62688     getColumnId : function(index){
62689         return this.cm.getColumnId(index);
62690     },
62691
62692     getSplitters : function()
62693     {
62694         if(this.splitterSelector){
62695            return Roo.DomQuery.select(this.splitterSelector);
62696         }else{
62697             return null;
62698       }
62699     },
62700
62701     getSplitter : function(index){
62702         return this.getSplitters()[index];
62703     },
62704
62705     onRowOver : function(e, t){
62706         var row;
62707         if((row = this.findRowIndex(t)) !== false){
62708             this.getRowComposite(row).addClass("x-grid-row-over");
62709         }
62710     },
62711
62712     onRowOut : function(e, t){
62713         var row;
62714         if((row = this.findRowIndex(t)) !== false && row !== this.findRowIndex(e.getRelatedTarget())){
62715             this.getRowComposite(row).removeClass("x-grid-row-over");
62716         }
62717     },
62718
62719     renderHeaders : function(){
62720         var cm = this.cm;
62721         var ct = this.templates.hcell, ht = this.templates.header, st = this.templates.hsplit;
62722         var cb = [], lb = [], sb = [], lsb = [], p = {};
62723         for(var i = 0, len = cm.getColumnCount(); i < len; i++){
62724             p.cellId = "x-grid-hd-0-" + i;
62725             p.splitId = "x-grid-csplit-0-" + i;
62726             p.id = cm.getColumnId(i);
62727             p.value = cm.getColumnHeader(i) || "";
62728             p.title = cm.getColumnTooltip(i) || (''+p.value).match(/\</)  ? '' :  p.value  || "";
62729             p.style = (this.grid.enableColumnResize === false || !cm.isResizable(i) || cm.isFixed(i)) ? 'cursor:default' : '';
62730             if(!cm.isLocked(i)){
62731                 cb[cb.length] = ct.apply(p);
62732                 sb[sb.length] = st.apply(p);
62733             }else{
62734                 lb[lb.length] = ct.apply(p);
62735                 lsb[lsb.length] = st.apply(p);
62736             }
62737         }
62738         return [ht.apply({cells: lb.join(""), splits:lsb.join("")}),
62739                 ht.apply({cells: cb.join(""), splits:sb.join("")})];
62740     },
62741
62742     updateHeaders : function(){
62743         var html = this.renderHeaders();
62744         this.lockedHd.update(html[0]);
62745         this.mainHd.update(html[1]);
62746     },
62747
62748     /**
62749      * Focuses the specified row.
62750      * @param {Number} row The row index
62751      */
62752     focusRow : function(row)
62753     {
62754         //Roo.log('GridView.focusRow');
62755         var x = this.scroller.dom.scrollLeft;
62756         this.focusCell(row, 0, false);
62757         this.scroller.dom.scrollLeft = x;
62758     },
62759
62760     /**
62761      * Focuses the specified cell.
62762      * @param {Number} row The row index
62763      * @param {Number} col The column index
62764      * @param {Boolean} hscroll false to disable horizontal scrolling
62765      */
62766     focusCell : function(row, col, hscroll)
62767     {
62768         //Roo.log('GridView.focusCell');
62769         var el = this.ensureVisible(row, col, hscroll);
62770         this.focusEl.alignTo(el, "tl-tl");
62771         if(Roo.isGecko){
62772             this.focusEl.focus();
62773         }else{
62774             this.focusEl.focus.defer(1, this.focusEl);
62775         }
62776     },
62777
62778     /**
62779      * Scrolls the specified cell into view
62780      * @param {Number} row The row index
62781      * @param {Number} col The column index
62782      * @param {Boolean} hscroll false to disable horizontal scrolling
62783      */
62784     ensureVisible : function(row, col, hscroll)
62785     {
62786         //Roo.log('GridView.ensureVisible,' + row + ',' + col);
62787         //return null; //disable for testing.
62788         if(typeof row != "number"){
62789             row = row.rowIndex;
62790         }
62791         if(row < 0 && row >= this.ds.getCount()){
62792             return  null;
62793         }
62794         col = (col !== undefined ? col : 0);
62795         var cm = this.grid.colModel;
62796         while(cm.isHidden(col)){
62797             col++;
62798         }
62799
62800         var el = this.getCell(row, col);
62801         if(!el){
62802             return null;
62803         }
62804         var c = this.scroller.dom;
62805
62806         var ctop = parseInt(el.offsetTop, 10);
62807         var cleft = parseInt(el.offsetLeft, 10);
62808         var cbot = ctop + el.offsetHeight;
62809         var cright = cleft + el.offsetWidth;
62810         
62811         var ch = c.clientHeight - this.mainHd.dom.offsetHeight;
62812         var stop = parseInt(c.scrollTop, 10);
62813         var sleft = parseInt(c.scrollLeft, 10);
62814         var sbot = stop + ch;
62815         var sright = sleft + c.clientWidth;
62816         /*
62817         Roo.log('GridView.ensureVisible:' +
62818                 ' ctop:' + ctop +
62819                 ' c.clientHeight:' + c.clientHeight +
62820                 ' this.mainHd.dom.offsetHeight:' + this.mainHd.dom.offsetHeight +
62821                 ' stop:' + stop +
62822                 ' cbot:' + cbot +
62823                 ' sbot:' + sbot +
62824                 ' ch:' + ch  
62825                 );
62826         */
62827         if(ctop < stop){
62828             c.scrollTop = ctop;
62829             //Roo.log("set scrolltop to ctop DISABLE?");
62830         }else if(cbot > sbot){
62831             //Roo.log("set scrolltop to cbot-ch");
62832             c.scrollTop = cbot-ch;
62833         }
62834         
62835         if(hscroll !== false){
62836             if(cleft < sleft){
62837                 c.scrollLeft = cleft;
62838             }else if(cright > sright){
62839                 c.scrollLeft = cright-c.clientWidth;
62840             }
62841         }
62842          
62843         return el;
62844     },
62845
62846     updateColumns : function(){
62847         this.grid.stopEditing();
62848         var cm = this.grid.colModel, colIds = this.getColumnIds();
62849         //var totalWidth = cm.getTotalWidth();
62850         var pos = 0;
62851         for(var i = 0, len = cm.getColumnCount(); i < len; i++){
62852             //if(cm.isHidden(i)) continue;
62853             var w = cm.getColumnWidth(i);
62854             this.css.updateRule(this.colSelector+this.idToCssName(colIds[i]), "width", (w - this.borderWidth) + "px");
62855             this.css.updateRule(this.hdSelector+this.idToCssName(colIds[i]), "width", (w - this.borderWidth) + "px");
62856         }
62857         this.updateSplitters();
62858     },
62859
62860     generateRules : function(cm){
62861         var ruleBuf = [], rulesId = this.idToCssName(this.grid.id)+ '-cssrules';
62862         Roo.util.CSS.removeStyleSheet(rulesId);
62863         for(var i = 0, len = cm.getColumnCount(); i < len; i++){
62864             var cid = cm.getColumnId(i);
62865             var align = '';
62866             if(cm.config[i].align){
62867                 align = 'text-align:'+cm.config[i].align+';';
62868             }
62869             var hidden = '';
62870             if(cm.isHidden(i)){
62871                 hidden = 'display:none;';
62872             }
62873             var width = "width:" + (cm.getColumnWidth(i) - this.borderWidth) + "px;";
62874             ruleBuf.push(
62875                     this.colSelector, cid, " {\n", cm.config[i].css, align, width, "\n}\n",
62876                     this.hdSelector, cid, " {\n", align, width, "}\n",
62877                     this.tdSelector, cid, " {\n",hidden,"\n}\n",
62878                     this.splitSelector, cid, " {\n", hidden , "\n}\n");
62879         }
62880         return Roo.util.CSS.createStyleSheet(ruleBuf.join(""), rulesId);
62881     },
62882
62883     updateSplitters : function(){
62884         var cm = this.cm, s = this.getSplitters();
62885         if(s){ // splitters not created yet
62886             var pos = 0, locked = true;
62887             for(var i = 0, len = cm.getColumnCount(); i < len; i++){
62888                 if(cm.isHidden(i)) {
62889                     continue;
62890                 }
62891                 var w = cm.getColumnWidth(i); // make sure it's a number
62892                 if(!cm.isLocked(i) && locked){
62893                     pos = 0;
62894                     locked = false;
62895                 }
62896                 pos += w;
62897                 s[i].style.left = (pos-this.splitOffset) + "px";
62898             }
62899         }
62900     },
62901
62902     handleHiddenChange : function(colModel, colIndex, hidden){
62903         if(hidden){
62904             this.hideColumn(colIndex);
62905         }else{
62906             this.unhideColumn(colIndex);
62907         }
62908     },
62909
62910     hideColumn : function(colIndex){
62911         var cid = this.getColumnId(colIndex);
62912         this.css.updateRule(this.tdSelector+this.idToCssName(cid), "display", "none");
62913         this.css.updateRule(this.splitSelector+this.idToCssName(cid), "display", "none");
62914         if(Roo.isSafari){
62915             this.updateHeaders();
62916         }
62917         this.updateSplitters();
62918         this.layout();
62919     },
62920
62921     unhideColumn : function(colIndex){
62922         var cid = this.getColumnId(colIndex);
62923         this.css.updateRule(this.tdSelector+this.idToCssName(cid), "display", "");
62924         this.css.updateRule(this.splitSelector+this.idToCssName(cid), "display", "");
62925
62926         if(Roo.isSafari){
62927             this.updateHeaders();
62928         }
62929         this.updateSplitters();
62930         this.layout();
62931     },
62932
62933     insertRows : function(dm, firstRow, lastRow, isUpdate){
62934         if(firstRow == 0 && lastRow == dm.getCount()-1){
62935             this.refresh();
62936         }else{
62937             if(!isUpdate){
62938                 this.fireEvent("beforerowsinserted", this, firstRow, lastRow);
62939             }
62940             var s = this.getScrollState();
62941             var markup = this.renderRows(firstRow, lastRow);
62942             this.bufferRows(markup[0], this.getLockedTable(), firstRow);
62943             this.bufferRows(markup[1], this.getBodyTable(), firstRow);
62944             this.restoreScroll(s);
62945             if(!isUpdate){
62946                 this.fireEvent("rowsinserted", this, firstRow, lastRow);
62947                 this.syncRowHeights(firstRow, lastRow);
62948                 this.stripeRows(firstRow);
62949                 this.layout();
62950             }
62951         }
62952     },
62953
62954     bufferRows : function(markup, target, index){
62955         var before = null, trows = target.rows, tbody = target.tBodies[0];
62956         if(index < trows.length){
62957             before = trows[index];
62958         }
62959         var b = document.createElement("div");
62960         b.innerHTML = "<table><tbody>"+markup+"</tbody></table>";
62961         var rows = b.firstChild.rows;
62962         for(var i = 0, len = rows.length; i < len; i++){
62963             if(before){
62964                 tbody.insertBefore(rows[0], before);
62965             }else{
62966                 tbody.appendChild(rows[0]);
62967             }
62968         }
62969         b.innerHTML = "";
62970         b = null;
62971     },
62972
62973     deleteRows : function(dm, firstRow, lastRow){
62974         if(dm.getRowCount()<1){
62975             this.fireEvent("beforerefresh", this);
62976             this.mainBody.update("");
62977             this.lockedBody.update("");
62978             this.fireEvent("refresh", this);
62979         }else{
62980             this.fireEvent("beforerowsdeleted", this, firstRow, lastRow);
62981             var bt = this.getBodyTable();
62982             var tbody = bt.firstChild;
62983             var rows = bt.rows;
62984             for(var rowIndex = firstRow; rowIndex <= lastRow; rowIndex++){
62985                 tbody.removeChild(rows[firstRow]);
62986             }
62987             this.stripeRows(firstRow);
62988             this.fireEvent("rowsdeleted", this, firstRow, lastRow);
62989         }
62990     },
62991
62992     updateRows : function(dataSource, firstRow, lastRow){
62993         var s = this.getScrollState();
62994         this.refresh();
62995         this.restoreScroll(s);
62996     },
62997
62998     handleSort : function(dataSource, sortColumnIndex, sortDir, noRefresh){
62999         if(!noRefresh){
63000            this.refresh();
63001         }
63002         this.updateHeaderSortState();
63003     },
63004
63005     getScrollState : function(){
63006         
63007         var sb = this.scroller.dom;
63008         return {left: sb.scrollLeft, top: sb.scrollTop};
63009     },
63010
63011     stripeRows : function(startRow){
63012         if(!this.grid.stripeRows || this.ds.getCount() < 1){
63013             return;
63014         }
63015         startRow = startRow || 0;
63016         var rows = this.getBodyTable().rows;
63017         var lrows = this.getLockedTable().rows;
63018         var cls = ' x-grid-row-alt ';
63019         for(var i = startRow, len = rows.length; i < len; i++){
63020             var row = rows[i], lrow = lrows[i];
63021             var isAlt = ((i+1) % 2 == 0);
63022             var hasAlt = (' '+row.className + ' ').indexOf(cls) != -1;
63023             if(isAlt == hasAlt){
63024                 continue;
63025             }
63026             if(isAlt){
63027                 row.className += " x-grid-row-alt";
63028             }else{
63029                 row.className = row.className.replace("x-grid-row-alt", "");
63030             }
63031             if(lrow){
63032                 lrow.className = row.className;
63033             }
63034         }
63035     },
63036
63037     restoreScroll : function(state){
63038         //Roo.log('GridView.restoreScroll');
63039         var sb = this.scroller.dom;
63040         sb.scrollLeft = state.left;
63041         sb.scrollTop = state.top;
63042         this.syncScroll();
63043     },
63044
63045     syncScroll : function(){
63046         //Roo.log('GridView.syncScroll');
63047         var sb = this.scroller.dom;
63048         var sh = this.mainHd.dom;
63049         var bs = this.mainBody.dom;
63050         var lv = this.lockedBody.dom;
63051         sh.scrollLeft = bs.scrollLeft = sb.scrollLeft;
63052         lv.scrollTop = bs.scrollTop = sb.scrollTop;
63053     },
63054
63055     handleScroll : function(e){
63056         this.syncScroll();
63057         var sb = this.scroller.dom;
63058         this.grid.fireEvent("bodyscroll", sb.scrollLeft, sb.scrollTop);
63059         e.stopEvent();
63060     },
63061
63062     handleWheel : function(e){
63063         var d = e.getWheelDelta();
63064         this.scroller.dom.scrollTop -= d*22;
63065         // set this here to prevent jumpy scrolling on large tables
63066         this.lockedBody.dom.scrollTop = this.mainBody.dom.scrollTop = this.scroller.dom.scrollTop;
63067         e.stopEvent();
63068     },
63069
63070     renderRows : function(startRow, endRow){
63071         // pull in all the crap needed to render rows
63072         var g = this.grid, cm = g.colModel, ds = g.dataSource, stripe = g.stripeRows;
63073         var colCount = cm.getColumnCount();
63074
63075         if(ds.getCount() < 1){
63076             return ["", ""];
63077         }
63078
63079         // build a map for all the columns
63080         var cs = [];
63081         for(var i = 0; i < colCount; i++){
63082             var name = cm.getDataIndex(i);
63083             cs[i] = {
63084                 name : typeof name == 'undefined' ? ds.fields.get(i).name : name,
63085                 renderer : cm.getRenderer(i),
63086                 id : cm.getColumnId(i),
63087                 locked : cm.isLocked(i),
63088                 has_editor : cm.isCellEditable(i)
63089             };
63090         }
63091
63092         startRow = startRow || 0;
63093         endRow = typeof endRow == "undefined"? ds.getCount()-1 : endRow;
63094
63095         // records to render
63096         var rs = ds.getRange(startRow, endRow);
63097
63098         return this.doRender(cs, rs, ds, startRow, colCount, stripe);
63099     },
63100
63101     // As much as I hate to duplicate code, this was branched because FireFox really hates
63102     // [].join("") on strings. The performance difference was substantial enough to
63103     // branch this function
63104     doRender : Roo.isGecko ?
63105             function(cs, rs, ds, startRow, colCount, stripe){
63106                 var ts = this.templates, ct = ts.cell, rt = ts.row;
63107                 // buffers
63108                 var buf = "", lbuf = "", cb, lcb, c, p = {}, rp = {}, r, rowIndex;
63109                 
63110                 var hasListener = this.grid.hasListener('rowclass');
63111                 var rowcfg = {};
63112                 for(var j = 0, len = rs.length; j < len; j++){
63113                     r = rs[j]; cb = ""; lcb = ""; rowIndex = (j+startRow);
63114                     for(var i = 0; i < colCount; i++){
63115                         c = cs[i];
63116                         p.cellId = "x-grid-cell-" + rowIndex + "-" + i;
63117                         p.id = c.id;
63118                         p.css = p.attr = "";
63119                         p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
63120                         if(p.value == undefined || p.value === "") {
63121                             p.value = "&#160;";
63122                         }
63123                         if(c.has_editor){
63124                             p.css += ' x-grid-editable-cell';
63125                         }
63126                         if(c.dirty && typeof r.modified[c.name] !== 'undefined'){
63127                             p.css +=  ' x-grid-dirty-cell';
63128                         }
63129                         var markup = ct.apply(p);
63130                         if(!c.locked){
63131                             cb+= markup;
63132                         }else{
63133                             lcb+= markup;
63134                         }
63135                     }
63136                     var alt = [];
63137                     if(stripe && ((rowIndex+1) % 2 == 0)){
63138                         alt.push("x-grid-row-alt")
63139                     }
63140                     if(r.dirty){
63141                         alt.push(  " x-grid-dirty-row");
63142                     }
63143                     rp.cells = lcb;
63144                     if(this.getRowClass){
63145                         alt.push(this.getRowClass(r, rowIndex));
63146                     }
63147                     if (hasListener) {
63148                         rowcfg = {
63149                              
63150                             record: r,
63151                             rowIndex : rowIndex,
63152                             rowClass : ''
63153                         };
63154                         this.grid.fireEvent('rowclass', this, rowcfg);
63155                         alt.push(rowcfg.rowClass);
63156                     }
63157                     rp.alt = alt.join(" ");
63158                     lbuf+= rt.apply(rp);
63159                     rp.cells = cb;
63160                     buf+=  rt.apply(rp);
63161                 }
63162                 return [lbuf, buf];
63163             } :
63164             function(cs, rs, ds, startRow, colCount, stripe){
63165                 var ts = this.templates, ct = ts.cell, rt = ts.row;
63166                 // buffers
63167                 var buf = [], lbuf = [], cb, lcb, c, p = {}, rp = {}, r, rowIndex;
63168                 var hasListener = this.grid.hasListener('rowclass');
63169  
63170                 var rowcfg = {};
63171                 for(var j = 0, len = rs.length; j < len; j++){
63172                     r = rs[j]; cb = []; lcb = []; rowIndex = (j+startRow);
63173                     for(var i = 0; i < colCount; i++){
63174                         c = cs[i];
63175                         p.cellId = "x-grid-cell-" + rowIndex + "-" + i;
63176                         p.id = c.id;
63177                         p.css = p.attr = "";
63178                         p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
63179                         if(p.value == undefined || p.value === "") {
63180                             p.value = "&#160;";
63181                         }
63182                         //Roo.log(c);
63183                          if(c.has_editor){
63184                             p.css += ' x-grid-editable-cell';
63185                         }
63186                         if(r.dirty && typeof r.modified[c.name] !== 'undefined'){
63187                             p.css += ' x-grid-dirty-cell' 
63188                         }
63189                         
63190                         var markup = ct.apply(p);
63191                         if(!c.locked){
63192                             cb[cb.length] = markup;
63193                         }else{
63194                             lcb[lcb.length] = markup;
63195                         }
63196                     }
63197                     var alt = [];
63198                     if(stripe && ((rowIndex+1) % 2 == 0)){
63199                         alt.push( "x-grid-row-alt");
63200                     }
63201                     if(r.dirty){
63202                         alt.push(" x-grid-dirty-row");
63203                     }
63204                     rp.cells = lcb;
63205                     if(this.getRowClass){
63206                         alt.push( this.getRowClass(r, rowIndex));
63207                     }
63208                     if (hasListener) {
63209                         rowcfg = {
63210                              
63211                             record: r,
63212                             rowIndex : rowIndex,
63213                             rowClass : ''
63214                         };
63215                         this.grid.fireEvent('rowclass', this, rowcfg);
63216                         alt.push(rowcfg.rowClass);
63217                     }
63218                     
63219                     rp.alt = alt.join(" ");
63220                     rp.cells = lcb.join("");
63221                     lbuf[lbuf.length] = rt.apply(rp);
63222                     rp.cells = cb.join("");
63223                     buf[buf.length] =  rt.apply(rp);
63224                 }
63225                 return [lbuf.join(""), buf.join("")];
63226             },
63227
63228     renderBody : function(){
63229         var markup = this.renderRows();
63230         var bt = this.templates.body;
63231         return [bt.apply({rows: markup[0]}), bt.apply({rows: markup[1]})];
63232     },
63233
63234     /**
63235      * Refreshes the grid
63236      * @param {Boolean} headersToo
63237      */
63238     refresh : function(headersToo){
63239         this.fireEvent("beforerefresh", this);
63240         this.grid.stopEditing();
63241         var result = this.renderBody();
63242         this.lockedBody.update(result[0]);
63243         this.mainBody.update(result[1]);
63244         if(headersToo === true){
63245             this.updateHeaders();
63246             this.updateColumns();
63247             this.updateSplitters();
63248             this.updateHeaderSortState();
63249         }
63250         this.syncRowHeights();
63251         this.layout();
63252         this.fireEvent("refresh", this);
63253     },
63254
63255     handleColumnMove : function(cm, oldIndex, newIndex){
63256         this.indexMap = null;
63257         var s = this.getScrollState();
63258         this.refresh(true);
63259         this.restoreScroll(s);
63260         this.afterMove(newIndex);
63261     },
63262
63263     afterMove : function(colIndex){
63264         if(this.enableMoveAnim && Roo.enableFx){
63265             this.fly(this.getHeaderCell(colIndex).firstChild).highlight(this.hlColor);
63266         }
63267         // if multisort - fix sortOrder, and reload..
63268         if (this.grid.dataSource.multiSort) {
63269             // the we can call sort again..
63270             var dm = this.grid.dataSource;
63271             var cm = this.grid.colModel;
63272             var so = [];
63273             for(var i = 0; i < cm.config.length; i++ ) {
63274                 
63275                 if ((typeof(dm.sortToggle[cm.config[i].dataIndex]) == 'undefined')) {
63276                     continue; // dont' bother, it's not in sort list or being set.
63277                 }
63278                 
63279                 so.push(cm.config[i].dataIndex);
63280             };
63281             dm.sortOrder = so;
63282             dm.load(dm.lastOptions);
63283             
63284             
63285         }
63286         
63287     },
63288
63289     updateCell : function(dm, rowIndex, dataIndex){
63290         var colIndex = this.getColumnIndexByDataIndex(dataIndex);
63291         if(typeof colIndex == "undefined"){ // not present in grid
63292             return;
63293         }
63294         var cm = this.grid.colModel;
63295         var cell = this.getCell(rowIndex, colIndex);
63296         var cellText = this.getCellText(rowIndex, colIndex);
63297
63298         var p = {
63299             cellId : "x-grid-cell-" + rowIndex + "-" + colIndex,
63300             id : cm.getColumnId(colIndex),
63301             css: colIndex == cm.getColumnCount()-1 ? "x-grid-col-last" : ""
63302         };
63303         var renderer = cm.getRenderer(colIndex);
63304         var val = renderer(dm.getValueAt(rowIndex, dataIndex), p, rowIndex, colIndex, dm);
63305         if(typeof val == "undefined" || val === "") {
63306             val = "&#160;";
63307         }
63308         cellText.innerHTML = val;
63309         cell.className = this.cellClass + " " + this.idToCssName(p.cellId) + " " + p.css;
63310         this.syncRowHeights(rowIndex, rowIndex);
63311     },
63312
63313     calcColumnWidth : function(colIndex, maxRowsToMeasure){
63314         var maxWidth = 0;
63315         if(this.grid.autoSizeHeaders){
63316             var h = this.getHeaderCellMeasure(colIndex);
63317             maxWidth = Math.max(maxWidth, h.scrollWidth);
63318         }
63319         var tb, index;
63320         if(this.cm.isLocked(colIndex)){
63321             tb = this.getLockedTable();
63322             index = colIndex;
63323         }else{
63324             tb = this.getBodyTable();
63325             index = colIndex - this.cm.getLockedCount();
63326         }
63327         if(tb && tb.rows){
63328             var rows = tb.rows;
63329             var stopIndex = Math.min(maxRowsToMeasure || rows.length, rows.length);
63330             for(var i = 0; i < stopIndex; i++){
63331                 var cell = rows[i].childNodes[index].firstChild;
63332                 maxWidth = Math.max(maxWidth, cell.scrollWidth);
63333             }
63334         }
63335         return maxWidth + /*margin for error in IE*/ 5;
63336     },
63337     /**
63338      * Autofit a column to its content.
63339      * @param {Number} colIndex
63340      * @param {Boolean} forceMinSize true to force the column to go smaller if possible
63341      */
63342      autoSizeColumn : function(colIndex, forceMinSize, suppressEvent){
63343          if(this.cm.isHidden(colIndex)){
63344              return; // can't calc a hidden column
63345          }
63346         if(forceMinSize){
63347             var cid = this.cm.getColumnId(colIndex);
63348             this.css.updateRule(this.colSelector +this.idToCssName( cid), "width", this.grid.minColumnWidth + "px");
63349            if(this.grid.autoSizeHeaders){
63350                this.css.updateRule(this.hdSelector + this.idToCssName(cid), "width", this.grid.minColumnWidth + "px");
63351            }
63352         }
63353         var newWidth = this.calcColumnWidth(colIndex);
63354         this.cm.setColumnWidth(colIndex,
63355             Math.max(this.grid.minColumnWidth, newWidth), suppressEvent);
63356         if(!suppressEvent){
63357             this.grid.fireEvent("columnresize", colIndex, newWidth);
63358         }
63359     },
63360
63361     /**
63362      * Autofits all columns to their content and then expands to fit any extra space in the grid
63363      */
63364      autoSizeColumns : function(){
63365         var cm = this.grid.colModel;
63366         var colCount = cm.getColumnCount();
63367         for(var i = 0; i < colCount; i++){
63368             this.autoSizeColumn(i, true, true);
63369         }
63370         if(cm.getTotalWidth() < this.scroller.dom.clientWidth){
63371             this.fitColumns();
63372         }else{
63373             this.updateColumns();
63374             this.layout();
63375         }
63376     },
63377
63378     /**
63379      * Autofits all columns to the grid's width proportionate with their current size
63380      * @param {Boolean} reserveScrollSpace Reserve space for a scrollbar
63381      */
63382     fitColumns : function(reserveScrollSpace){
63383         var cm = this.grid.colModel;
63384         var colCount = cm.getColumnCount();
63385         var cols = [];
63386         var width = 0;
63387         var i, w;
63388         for (i = 0; i < colCount; i++){
63389             if(!cm.isHidden(i) && !cm.isFixed(i)){
63390                 w = cm.getColumnWidth(i);
63391                 cols.push(i);
63392                 cols.push(w);
63393                 width += w;
63394             }
63395         }
63396         var avail = Math.min(this.scroller.dom.clientWidth, this.el.getWidth());
63397         if(reserveScrollSpace){
63398             avail -= 17;
63399         }
63400         var frac = (avail - cm.getTotalWidth())/width;
63401         while (cols.length){
63402             w = cols.pop();
63403             i = cols.pop();
63404             cm.setColumnWidth(i, Math.floor(w + w*frac), true);
63405         }
63406         this.updateColumns();
63407         this.layout();
63408     },
63409
63410     onRowSelect : function(rowIndex){
63411         var row = this.getRowComposite(rowIndex);
63412         row.addClass("x-grid-row-selected");
63413     },
63414
63415     onRowDeselect : function(rowIndex){
63416         var row = this.getRowComposite(rowIndex);
63417         row.removeClass("x-grid-row-selected");
63418     },
63419
63420     onCellSelect : function(row, col){
63421         var cell = this.getCell(row, col);
63422         if(cell){
63423             Roo.fly(cell).addClass("x-grid-cell-selected");
63424         }
63425     },
63426
63427     onCellDeselect : function(row, col){
63428         var cell = this.getCell(row, col);
63429         if(cell){
63430             Roo.fly(cell).removeClass("x-grid-cell-selected");
63431         }
63432     },
63433
63434     updateHeaderSortState : function(){
63435         
63436         // sort state can be single { field: xxx, direction : yyy}
63437         // or   { xxx=>ASC , yyy : DESC ..... }
63438         
63439         var mstate = {};
63440         if (!this.ds.multiSort) { 
63441             var state = this.ds.getSortState();
63442             if(!state){
63443                 return;
63444             }
63445             mstate[state.field] = state.direction;
63446             // FIXME... - this is not used here.. but might be elsewhere..
63447             this.sortState = state;
63448             
63449         } else {
63450             mstate = this.ds.sortToggle;
63451         }
63452         //remove existing sort classes..
63453         
63454         var sc = this.sortClasses;
63455         var hds = this.el.select(this.headerSelector).removeClass(sc);
63456         
63457         for(var f in mstate) {
63458         
63459             var sortColumn = this.cm.findColumnIndex(f);
63460             
63461             if(sortColumn != -1){
63462                 var sortDir = mstate[f];        
63463                 hds.item(sortColumn).addClass(sc[sortDir == "DESC" ? 1 : 0]);
63464             }
63465         }
63466         
63467          
63468         
63469     },
63470
63471
63472     handleHeaderClick : function(g, index,e){
63473         
63474         Roo.log("header click");
63475         
63476         if (Roo.isTouch) {
63477             // touch events on header are handled by context
63478             this.handleHdCtx(g,index,e);
63479             return;
63480         }
63481         
63482         
63483         if(this.headersDisabled){
63484             return;
63485         }
63486         var dm = g.dataSource, cm = g.colModel;
63487         if(!cm.isSortable(index)){
63488             return;
63489         }
63490         g.stopEditing();
63491         
63492         if (dm.multiSort) {
63493             // update the sortOrder
63494             var so = [];
63495             for(var i = 0; i < cm.config.length; i++ ) {
63496                 
63497                 if ((typeof(dm.sortToggle[cm.config[i].dataIndex]) == 'undefined') && (index != i)) {
63498                     continue; // dont' bother, it's not in sort list or being set.
63499                 }
63500                 
63501                 so.push(cm.config[i].dataIndex);
63502             };
63503             dm.sortOrder = so;
63504         }
63505         
63506         
63507         dm.sort(cm.getDataIndex(index));
63508     },
63509
63510
63511     destroy : function(){
63512         if(this.colMenu){
63513             this.colMenu.removeAll();
63514             Roo.menu.MenuMgr.unregister(this.colMenu);
63515             this.colMenu.getEl().remove();
63516             delete this.colMenu;
63517         }
63518         if(this.hmenu){
63519             this.hmenu.removeAll();
63520             Roo.menu.MenuMgr.unregister(this.hmenu);
63521             this.hmenu.getEl().remove();
63522             delete this.hmenu;
63523         }
63524         if(this.grid.enableColumnMove){
63525             var dds = Roo.dd.DDM.ids['gridHeader' + this.grid.getGridEl().id];
63526             if(dds){
63527                 for(var dd in dds){
63528                     if(!dds[dd].config.isTarget && dds[dd].dragElId){
63529                         var elid = dds[dd].dragElId;
63530                         dds[dd].unreg();
63531                         Roo.get(elid).remove();
63532                     } else if(dds[dd].config.isTarget){
63533                         dds[dd].proxyTop.remove();
63534                         dds[dd].proxyBottom.remove();
63535                         dds[dd].unreg();
63536                     }
63537                     if(Roo.dd.DDM.locationCache[dd]){
63538                         delete Roo.dd.DDM.locationCache[dd];
63539                     }
63540                 }
63541                 delete Roo.dd.DDM.ids['gridHeader' + this.grid.getGridEl().id];
63542             }
63543         }
63544         Roo.util.CSS.removeStyleSheet(this.idToCssName(this.grid.id) + '-cssrules');
63545         this.bind(null, null);
63546         Roo.EventManager.removeResizeListener(this.onWindowResize, this);
63547     },
63548
63549     handleLockChange : function(){
63550         this.refresh(true);
63551     },
63552
63553     onDenyColumnLock : function(){
63554
63555     },
63556
63557     onDenyColumnHide : function(){
63558
63559     },
63560
63561     handleHdMenuClick : function(item){
63562         var index = this.hdCtxIndex;
63563         var cm = this.cm, ds = this.ds;
63564         switch(item.id){
63565             case "asc":
63566                 ds.sort(cm.getDataIndex(index), "ASC");
63567                 break;
63568             case "desc":
63569                 ds.sort(cm.getDataIndex(index), "DESC");
63570                 break;
63571             case "lock":
63572                 var lc = cm.getLockedCount();
63573                 if(cm.getColumnCount(true) <= lc+1){
63574                     this.onDenyColumnLock();
63575                     return;
63576                 }
63577                 if(lc != index){
63578                     cm.setLocked(index, true, true);
63579                     cm.moveColumn(index, lc);
63580                     this.grid.fireEvent("columnmove", index, lc);
63581                 }else{
63582                     cm.setLocked(index, true);
63583                 }
63584             break;
63585             case "unlock":
63586                 var lc = cm.getLockedCount();
63587                 if((lc-1) != index){
63588                     cm.setLocked(index, false, true);
63589                     cm.moveColumn(index, lc-1);
63590                     this.grid.fireEvent("columnmove", index, lc-1);
63591                 }else{
63592                     cm.setLocked(index, false);
63593                 }
63594             break;
63595             case 'wider': // used to expand cols on touch..
63596             case 'narrow':
63597                 var cw = cm.getColumnWidth(index);
63598                 cw += (item.id == 'wider' ? 1 : -1) * 50;
63599                 cw = Math.max(0, cw);
63600                 cw = Math.min(cw,4000);
63601                 cm.setColumnWidth(index, cw);
63602                 break;
63603                 
63604             default:
63605                 index = cm.getIndexById(item.id.substr(4));
63606                 if(index != -1){
63607                     if(item.checked && cm.getColumnCount(true) <= 1){
63608                         this.onDenyColumnHide();
63609                         return false;
63610                     }
63611                     cm.setHidden(index, item.checked);
63612                 }
63613         }
63614         return true;
63615     },
63616
63617     beforeColMenuShow : function(){
63618         var cm = this.cm,  colCount = cm.getColumnCount();
63619         this.colMenu.removeAll();
63620         
63621         var items = [];
63622         for(var i = 0; i < colCount; i++){
63623             items.push({
63624                 id: "col-"+cm.getColumnId(i),
63625                 text: cm.getColumnHeader(i),
63626                 checked: !cm.isHidden(i),
63627                 hideOnClick:false
63628             });
63629         }
63630         
63631         if (this.grid.sortColMenu) {
63632             items.sort(function(a,b) {
63633                 if (a.text == b.text) {
63634                     return 0;
63635                 }
63636                 return a.text.toUpperCase() > b.text.toUpperCase() ? 1 : -1;
63637             });
63638         }
63639         
63640         for(var i = 0; i < colCount; i++){
63641             this.colMenu.add(new Roo.menu.CheckItem(items[i]));
63642         }
63643     },
63644
63645     handleHdCtx : function(g, index, e){
63646         e.stopEvent();
63647         var hd = this.getHeaderCell(index);
63648         this.hdCtxIndex = index;
63649         var ms = this.hmenu.items, cm = this.cm;
63650         ms.get("asc").setDisabled(!cm.isSortable(index));
63651         ms.get("desc").setDisabled(!cm.isSortable(index));
63652         if(this.grid.enableColLock !== false){
63653             ms.get("lock").setDisabled(cm.isLocked(index));
63654             ms.get("unlock").setDisabled(!cm.isLocked(index));
63655         }
63656         this.hmenu.show(hd, "tl-bl");
63657     },
63658
63659     handleHdOver : function(e){
63660         var hd = this.findHeaderCell(e.getTarget());
63661         if(hd && !this.headersDisabled){
63662             if(this.grid.colModel.isSortable(this.getCellIndex(hd))){
63663                this.fly(hd).addClass("x-grid-hd-over");
63664             }
63665         }
63666     },
63667
63668     handleHdOut : function(e){
63669         var hd = this.findHeaderCell(e.getTarget());
63670         if(hd){
63671             this.fly(hd).removeClass("x-grid-hd-over");
63672         }
63673     },
63674
63675     handleSplitDblClick : function(e, t){
63676         var i = this.getCellIndex(t);
63677         if(this.grid.enableColumnResize !== false && this.cm.isResizable(i) && !this.cm.isFixed(i)){
63678             this.autoSizeColumn(i, true);
63679             this.layout();
63680         }
63681     },
63682
63683     render : function(){
63684
63685         var cm = this.cm;
63686         var colCount = cm.getColumnCount();
63687
63688         if(this.grid.monitorWindowResize === true){
63689             Roo.EventManager.onWindowResize(this.onWindowResize, this, true);
63690         }
63691         var header = this.renderHeaders();
63692         var body = this.templates.body.apply({rows:""});
63693         var html = this.templates.master.apply({
63694             lockedBody: body,
63695             body: body,
63696             lockedHeader: header[0],
63697             header: header[1]
63698         });
63699
63700         //this.updateColumns();
63701
63702         this.grid.getGridEl().dom.innerHTML = html;
63703
63704         this.initElements();
63705         
63706         // a kludge to fix the random scolling effect in webkit
63707         this.el.on("scroll", function() {
63708             this.el.dom.scrollTop=0; // hopefully not recursive..
63709         },this);
63710
63711         this.scroller.on("scroll", this.handleScroll, this);
63712         this.lockedBody.on("mousewheel", this.handleWheel, this);
63713         this.mainBody.on("mousewheel", this.handleWheel, this);
63714
63715         this.mainHd.on("mouseover", this.handleHdOver, this);
63716         this.mainHd.on("mouseout", this.handleHdOut, this);
63717         this.mainHd.on("dblclick", this.handleSplitDblClick, this,
63718                 {delegate: "."+this.splitClass});
63719
63720         this.lockedHd.on("mouseover", this.handleHdOver, this);
63721         this.lockedHd.on("mouseout", this.handleHdOut, this);
63722         this.lockedHd.on("dblclick", this.handleSplitDblClick, this,
63723                 {delegate: "."+this.splitClass});
63724
63725         if(this.grid.enableColumnResize !== false && Roo.grid.SplitDragZone){
63726             new Roo.grid.SplitDragZone(this.grid, this.lockedHd.dom, this.mainHd.dom);
63727         }
63728
63729         this.updateSplitters();
63730
63731         if(this.grid.enableColumnMove && Roo.grid.HeaderDragZone){
63732             new Roo.grid.HeaderDragZone(this.grid, this.lockedHd.dom, this.mainHd.dom);
63733             new Roo.grid.HeaderDropZone(this.grid, this.lockedHd.dom, this.mainHd.dom);
63734         }
63735
63736         if(this.grid.enableCtxMenu !== false && Roo.menu.Menu){
63737             this.hmenu = new Roo.menu.Menu({id: this.grid.id + "-hctx"});
63738             this.hmenu.add(
63739                 {id:"asc", text: this.sortAscText, cls: "xg-hmenu-sort-asc"},
63740                 {id:"desc", text: this.sortDescText, cls: "xg-hmenu-sort-desc"}
63741             );
63742             if(this.grid.enableColLock !== false){
63743                 this.hmenu.add('-',
63744                     {id:"lock", text: this.lockText, cls: "xg-hmenu-lock"},
63745                     {id:"unlock", text: this.unlockText, cls: "xg-hmenu-unlock"}
63746                 );
63747             }
63748             if (Roo.isTouch) {
63749                  this.hmenu.add('-',
63750                     {id:"wider", text: this.columnsWiderText},
63751                     {id:"narrow", text: this.columnsNarrowText }
63752                 );
63753                 
63754                  
63755             }
63756             
63757             if(this.grid.enableColumnHide !== false){
63758
63759                 this.colMenu = new Roo.menu.Menu({id:this.grid.id + "-hcols-menu"});
63760                 this.colMenu.on("beforeshow", this.beforeColMenuShow, this);
63761                 this.colMenu.on("itemclick", this.handleHdMenuClick, this);
63762
63763                 this.hmenu.add('-',
63764                     {id:"columns", text: this.columnsText, menu: this.colMenu}
63765                 );
63766             }
63767             this.hmenu.on("itemclick", this.handleHdMenuClick, this);
63768
63769             this.grid.on("headercontextmenu", this.handleHdCtx, this);
63770         }
63771
63772         if((this.grid.enableDragDrop || this.grid.enableDrag) && Roo.grid.GridDragZone){
63773             this.dd = new Roo.grid.GridDragZone(this.grid, {
63774                 ddGroup : this.grid.ddGroup || 'GridDD'
63775             });
63776             
63777         }
63778
63779         /*
63780         for(var i = 0; i < colCount; i++){
63781             if(cm.isHidden(i)){
63782                 this.hideColumn(i);
63783             }
63784             if(cm.config[i].align){
63785                 this.css.updateRule(this.colSelector + i, "textAlign", cm.config[i].align);
63786                 this.css.updateRule(this.hdSelector + i, "textAlign", cm.config[i].align);
63787             }
63788         }*/
63789         
63790         this.updateHeaderSortState();
63791
63792         this.beforeInitialResize();
63793         this.layout(true);
63794
63795         // two part rendering gives faster view to the user
63796         this.renderPhase2.defer(1, this);
63797     },
63798
63799     renderPhase2 : function(){
63800         // render the rows now
63801         this.refresh();
63802         if(this.grid.autoSizeColumns){
63803             this.autoSizeColumns();
63804         }
63805     },
63806
63807     beforeInitialResize : function(){
63808
63809     },
63810
63811     onColumnSplitterMoved : function(i, w){
63812         this.userResized = true;
63813         var cm = this.grid.colModel;
63814         cm.setColumnWidth(i, w, true);
63815         var cid = cm.getColumnId(i);
63816         this.css.updateRule(this.colSelector + this.idToCssName(cid), "width", (w-this.borderWidth) + "px");
63817         this.css.updateRule(this.hdSelector + this.idToCssName(cid), "width", (w-this.borderWidth) + "px");
63818         this.updateSplitters();
63819         this.layout();
63820         this.grid.fireEvent("columnresize", i, w);
63821     },
63822
63823     syncRowHeights : function(startIndex, endIndex){
63824         if(this.grid.enableRowHeightSync === true && this.cm.getLockedCount() > 0){
63825             startIndex = startIndex || 0;
63826             var mrows = this.getBodyTable().rows;
63827             var lrows = this.getLockedTable().rows;
63828             var len = mrows.length-1;
63829             endIndex = Math.min(endIndex || len, len);
63830             for(var i = startIndex; i <= endIndex; i++){
63831                 var m = mrows[i], l = lrows[i];
63832                 var h = Math.max(m.offsetHeight, l.offsetHeight);
63833                 m.style.height = l.style.height = h + "px";
63834             }
63835         }
63836     },
63837
63838     layout : function(initialRender, is2ndPass)
63839     {
63840         var g = this.grid;
63841         var auto = g.autoHeight;
63842         var scrollOffset = 16;
63843         var c = g.getGridEl(), cm = this.cm,
63844                 expandCol = g.autoExpandColumn,
63845                 gv = this;
63846         //c.beginMeasure();
63847
63848         if(!c.dom.offsetWidth){ // display:none?
63849             if(initialRender){
63850                 this.lockedWrap.show();
63851                 this.mainWrap.show();
63852             }
63853             return;
63854         }
63855
63856         var hasLock = this.cm.isLocked(0);
63857
63858         var tbh = this.headerPanel.getHeight();
63859         var bbh = this.footerPanel.getHeight();
63860
63861         if(auto){
63862             var ch = this.getBodyTable().offsetHeight + tbh + bbh + this.mainHd.getHeight();
63863             var newHeight = ch + c.getBorderWidth("tb");
63864             if(g.maxHeight){
63865                 newHeight = Math.min(g.maxHeight, newHeight);
63866             }
63867             c.setHeight(newHeight);
63868         }
63869
63870         if(g.autoWidth){
63871             c.setWidth(cm.getTotalWidth()+c.getBorderWidth('lr'));
63872         }
63873
63874         var s = this.scroller;
63875
63876         var csize = c.getSize(true);
63877
63878         this.el.setSize(csize.width, csize.height);
63879
63880         this.headerPanel.setWidth(csize.width);
63881         this.footerPanel.setWidth(csize.width);
63882
63883         var hdHeight = this.mainHd.getHeight();
63884         var vw = csize.width;
63885         var vh = csize.height - (tbh + bbh);
63886
63887         s.setSize(vw, vh);
63888
63889         var bt = this.getBodyTable();
63890         
63891         if(cm.getLockedCount() == cm.config.length){
63892             bt = this.getLockedTable();
63893         }
63894         
63895         var ltWidth = hasLock ?
63896                       Math.max(this.getLockedTable().offsetWidth, this.lockedHd.dom.firstChild.offsetWidth) : 0;
63897
63898         var scrollHeight = bt.offsetHeight;
63899         var scrollWidth = ltWidth + bt.offsetWidth;
63900         var vscroll = false, hscroll = false;
63901
63902         this.scrollSizer.setSize(scrollWidth, scrollHeight+hdHeight);
63903
63904         var lw = this.lockedWrap, mw = this.mainWrap;
63905         var lb = this.lockedBody, mb = this.mainBody;
63906
63907         setTimeout(function(){
63908             var t = s.dom.offsetTop;
63909             var w = s.dom.clientWidth,
63910                 h = s.dom.clientHeight;
63911
63912             lw.setTop(t);
63913             lw.setSize(ltWidth, h);
63914
63915             mw.setLeftTop(ltWidth, t);
63916             mw.setSize(w-ltWidth, h);
63917
63918             lb.setHeight(h-hdHeight);
63919             mb.setHeight(h-hdHeight);
63920
63921             if(is2ndPass !== true && !gv.userResized && expandCol){
63922                 // high speed resize without full column calculation
63923                 
63924                 var ci = cm.getIndexById(expandCol);
63925                 if (ci < 0) {
63926                     ci = cm.findColumnIndex(expandCol);
63927                 }
63928                 ci = Math.max(0, ci); // make sure it's got at least the first col.
63929                 var expandId = cm.getColumnId(ci);
63930                 var  tw = cm.getTotalWidth(false);
63931                 var currentWidth = cm.getColumnWidth(ci);
63932                 var cw = Math.min(Math.max(((w-tw)+currentWidth-2)-/*scrollbar*/(w <= s.dom.offsetWidth ? 0 : 18), g.autoExpandMin), g.autoExpandMax);
63933                 if(currentWidth != cw){
63934                     cm.setColumnWidth(ci, cw, true);
63935                     gv.css.updateRule(gv.colSelector+gv.idToCssName(expandId), "width", (cw - gv.borderWidth) + "px");
63936                     gv.css.updateRule(gv.hdSelector+gv.idToCssName(expandId), "width", (cw - gv.borderWidth) + "px");
63937                     gv.updateSplitters();
63938                     gv.layout(false, true);
63939                 }
63940             }
63941
63942             if(initialRender){
63943                 lw.show();
63944                 mw.show();
63945             }
63946             //c.endMeasure();
63947         }, 10);
63948     },
63949
63950     onWindowResize : function(){
63951         if(!this.grid.monitorWindowResize || this.grid.autoHeight){
63952             return;
63953         }
63954         this.layout();
63955     },
63956
63957     appendFooter : function(parentEl){
63958         return null;
63959     },
63960
63961     sortAscText : "Sort Ascending",
63962     sortDescText : "Sort Descending",
63963     lockText : "Lock Column",
63964     unlockText : "Unlock Column",
63965     columnsText : "Columns",
63966  
63967     columnsWiderText : "Wider",
63968     columnsNarrowText : "Thinner"
63969 });
63970
63971
63972 Roo.grid.GridView.ColumnDragZone = function(grid, hd){
63973     Roo.grid.GridView.ColumnDragZone.superclass.constructor.call(this, grid, hd, null);
63974     this.proxy.el.addClass('x-grid3-col-dd');
63975 };
63976
63977 Roo.extend(Roo.grid.GridView.ColumnDragZone, Roo.grid.HeaderDragZone, {
63978     handleMouseDown : function(e){
63979
63980     },
63981
63982     callHandleMouseDown : function(e){
63983         Roo.grid.GridView.ColumnDragZone.superclass.handleMouseDown.call(this, e);
63984     }
63985 });
63986 /*
63987  * Based on:
63988  * Ext JS Library 1.1.1
63989  * Copyright(c) 2006-2007, Ext JS, LLC.
63990  *
63991  * Originally Released Under LGPL - original licence link has changed is not relivant.
63992  *
63993  * Fork - LGPL
63994  * <script type="text/javascript">
63995  */
63996  /**
63997  * @extends Roo.dd.DDProxy
63998  * @class Roo.grid.SplitDragZone
63999  * Support for Column Header resizing
64000  * @constructor
64001  * @param {Object} config
64002  */
64003 // private
64004 // This is a support class used internally by the Grid components
64005 Roo.grid.SplitDragZone = function(grid, hd, hd2){
64006     this.grid = grid;
64007     this.view = grid.getView();
64008     this.proxy = this.view.resizeProxy;
64009     Roo.grid.SplitDragZone.superclass.constructor.call(
64010         this,
64011         hd, // ID
64012         "gridSplitters" + this.grid.getGridEl().id, // SGROUP
64013         {  // CONFIG
64014             dragElId : Roo.id(this.proxy.dom),
64015             resizeFrame:false
64016         }
64017     );
64018     
64019     this.setHandleElId(Roo.id(hd));
64020     if (hd2 !== false) {
64021         this.setOuterHandleElId(Roo.id(hd2));
64022     }
64023     
64024     this.scroll = false;
64025 };
64026 Roo.extend(Roo.grid.SplitDragZone, Roo.dd.DDProxy, {
64027     fly: Roo.Element.fly,
64028
64029     b4StartDrag : function(x, y){
64030         this.view.headersDisabled = true;
64031         var h = this.view.mainWrap ? this.view.mainWrap.getHeight() : (
64032                     this.view.headEl.getHeight() + this.view.bodyEl.getHeight()
64033         );
64034         this.proxy.setHeight(h);
64035         
64036         // for old system colWidth really stored the actual width?
64037         // in bootstrap we tried using xs/ms/etc.. to do % sizing?
64038         // which in reality did not work.. - it worked only for fixed sizes
64039         // for resizable we need to use actual sizes.
64040         var w = this.cm.getColumnWidth(this.cellIndex);
64041         if (!this.view.mainWrap) {
64042             // bootstrap.
64043             w = this.view.getHeaderIndex(this.cellIndex).getWidth();
64044         }
64045         
64046         
64047         
64048         // this was w-this.grid.minColumnWidth;
64049         // doesnt really make sense? - w = thie curren width or the rendered one?
64050         var minw = Math.max(w-this.grid.minColumnWidth, 0);
64051         this.resetConstraints();
64052         this.setXConstraint(minw, 1000);
64053         this.setYConstraint(0, 0);
64054         this.minX = x - minw;
64055         this.maxX = x + 1000;
64056         this.startPos = x;
64057         if (!this.view.mainWrap) { // this is Bootstrap code..
64058             this.getDragEl().style.display='block';
64059         }
64060         
64061         Roo.dd.DDProxy.prototype.b4StartDrag.call(this, x, y);
64062     },
64063
64064
64065     handleMouseDown : function(e){
64066         ev = Roo.EventObject.setEvent(e);
64067         var t = this.fly(ev.getTarget());
64068         if(t.hasClass("x-grid-split")){
64069             this.cellIndex = this.view.getCellIndex(t.dom);
64070             this.split = t.dom;
64071             this.cm = this.grid.colModel;
64072             if(this.cm.isResizable(this.cellIndex) && !this.cm.isFixed(this.cellIndex)){
64073                 Roo.grid.SplitDragZone.superclass.handleMouseDown.apply(this, arguments);
64074             }
64075         }
64076     },
64077
64078     endDrag : function(e){
64079         this.view.headersDisabled = false;
64080         var endX = Math.max(this.minX, Roo.lib.Event.getPageX(e));
64081         var diff = endX - this.startPos;
64082         // 
64083         var w = this.cm.getColumnWidth(this.cellIndex);
64084         if (!this.view.mainWrap) {
64085             w = 0;
64086         }
64087         this.view.onColumnSplitterMoved(this.cellIndex, w+diff);
64088     },
64089
64090     autoOffset : function(){
64091         this.setDelta(0,0);
64092     }
64093 });/*
64094  * Based on:
64095  * Ext JS Library 1.1.1
64096  * Copyright(c) 2006-2007, Ext JS, LLC.
64097  *
64098  * Originally Released Under LGPL - original licence link has changed is not relivant.
64099  *
64100  * Fork - LGPL
64101  * <script type="text/javascript">
64102  */
64103  
64104 // private
64105 // This is a support class used internally by the Grid components
64106 Roo.grid.GridDragZone = function(grid, config){
64107     this.view = grid.getView();
64108     Roo.grid.GridDragZone.superclass.constructor.call(this, this.view.mainBody.dom, config);
64109     if(this.view.lockedBody){
64110         this.setHandleElId(Roo.id(this.view.mainBody.dom));
64111         this.setOuterHandleElId(Roo.id(this.view.lockedBody.dom));
64112     }
64113     this.scroll = false;
64114     this.grid = grid;
64115     this.ddel = document.createElement('div');
64116     this.ddel.className = 'x-grid-dd-wrap';
64117 };
64118
64119 Roo.extend(Roo.grid.GridDragZone, Roo.dd.DragZone, {
64120     ddGroup : "GridDD",
64121
64122     getDragData : function(e){
64123         var t = Roo.lib.Event.getTarget(e);
64124         var rowIndex = this.view.findRowIndex(t);
64125         var sm = this.grid.selModel;
64126             
64127         //Roo.log(rowIndex);
64128         
64129         if (sm.getSelectedCell) {
64130             // cell selection..
64131             if (!sm.getSelectedCell()) {
64132                 return false;
64133             }
64134             if (rowIndex != sm.getSelectedCell()[0]) {
64135                 return false;
64136             }
64137         
64138         }
64139         if (sm.getSelections && sm.getSelections().length < 1) {
64140             return false;
64141         }
64142         
64143         
64144         // before it used to all dragging of unseleted... - now we dont do that.
64145         if(rowIndex !== false){
64146             
64147             // if editorgrid.. 
64148             
64149             
64150             //Roo.log([ sm.getSelectedCell() ? sm.getSelectedCell()[0] : 'NO' , rowIndex ]);
64151                
64152             //if(!sm.isSelected(rowIndex) || e.hasModifier()){
64153               //  
64154             //}
64155             if (e.hasModifier()){
64156                 sm.handleMouseDown(e, t); // non modifier buttons are handled by row select.
64157             }
64158             
64159             Roo.log("getDragData");
64160             
64161             return {
64162                 grid: this.grid,
64163                 ddel: this.ddel,
64164                 rowIndex: rowIndex,
64165                 selections: sm.getSelections ? sm.getSelections() : (
64166                     sm.getSelectedCell() ? [ this.grid.ds.getAt(sm.getSelectedCell()[0]) ] : [])
64167             };
64168         }
64169         return false;
64170     },
64171     
64172     
64173     onInitDrag : function(e){
64174         var data = this.dragData;
64175         this.ddel.innerHTML = this.grid.getDragDropText();
64176         this.proxy.update(this.ddel);
64177         // fire start drag?
64178     },
64179
64180     afterRepair : function(){
64181         this.dragging = false;
64182     },
64183
64184     getRepairXY : function(e, data){
64185         return false;
64186     },
64187
64188     onEndDrag : function(data, e){
64189         // fire end drag?
64190     },
64191
64192     onValidDrop : function(dd, e, id){
64193         // fire drag drop?
64194         this.hideProxy();
64195     },
64196
64197     beforeInvalidDrop : function(e, id){
64198
64199     }
64200 });/*
64201  * Based on:
64202  * Ext JS Library 1.1.1
64203  * Copyright(c) 2006-2007, Ext JS, LLC.
64204  *
64205  * Originally Released Under LGPL - original licence link has changed is not relivant.
64206  *
64207  * Fork - LGPL
64208  * <script type="text/javascript">
64209  */
64210  
64211
64212 /**
64213  * @class Roo.grid.ColumnModel
64214  * @extends Roo.util.Observable
64215  * This is the default implementation of a ColumnModel used by the Grid. It defines
64216  * the columns in the grid.
64217  * <br>Usage:<br>
64218  <pre><code>
64219  var colModel = new Roo.grid.ColumnModel([
64220         {header: "Ticker", width: 60, sortable: true, locked: true},
64221         {header: "Company Name", width: 150, sortable: true},
64222         {header: "Market Cap.", width: 100, sortable: true},
64223         {header: "$ Sales", width: 100, sortable: true, renderer: money},
64224         {header: "Employees", width: 100, sortable: true, resizable: false}
64225  ]);
64226  </code></pre>
64227  * <p>
64228  
64229  * The config options listed for this class are options which may appear in each
64230  * individual column definition.
64231  * <br/>RooJS Fix - column id's are not sequential but use Roo.id() - fixes bugs with layouts.
64232  * @constructor
64233  * @param {Object} config An Array of column config objects. See this class's
64234  * config objects for details.
64235 */
64236 Roo.grid.ColumnModel = function(config){
64237         /**
64238      * The config passed into the constructor
64239      */
64240     this.config = []; //config;
64241     this.lookup = {};
64242
64243     // if no id, create one
64244     // if the column does not have a dataIndex mapping,
64245     // map it to the order it is in the config
64246     for(var i = 0, len = config.length; i < len; i++){
64247         this.addColumn(config[i]);
64248         
64249     }
64250
64251     /**
64252      * The width of columns which have no width specified (defaults to 100)
64253      * @type Number
64254      */
64255     this.defaultWidth = 100;
64256
64257     /**
64258      * Default sortable of columns which have no sortable specified (defaults to false)
64259      * @type Boolean
64260      */
64261     this.defaultSortable = false;
64262
64263     this.addEvents({
64264         /**
64265              * @event widthchange
64266              * Fires when the width of a column changes.
64267              * @param {ColumnModel} this
64268              * @param {Number} columnIndex The column index
64269              * @param {Number} newWidth The new width
64270              */
64271             "widthchange": true,
64272         /**
64273              * @event headerchange
64274              * Fires when the text of a header changes.
64275              * @param {ColumnModel} this
64276              * @param {Number} columnIndex The column index
64277              * @param {Number} newText The new header text
64278              */
64279             "headerchange": true,
64280         /**
64281              * @event hiddenchange
64282              * Fires when a column is hidden or "unhidden".
64283              * @param {ColumnModel} this
64284              * @param {Number} columnIndex The column index
64285              * @param {Boolean} hidden true if hidden, false otherwise
64286              */
64287             "hiddenchange": true,
64288             /**
64289          * @event columnmoved
64290          * Fires when a column is moved.
64291          * @param {ColumnModel} this
64292          * @param {Number} oldIndex
64293          * @param {Number} newIndex
64294          */
64295         "columnmoved" : true,
64296         /**
64297          * @event columlockchange
64298          * Fires when a column's locked state is changed
64299          * @param {ColumnModel} this
64300          * @param {Number} colIndex
64301          * @param {Boolean} locked true if locked
64302          */
64303         "columnlockchange" : true
64304     });
64305     Roo.grid.ColumnModel.superclass.constructor.call(this);
64306 };
64307 Roo.extend(Roo.grid.ColumnModel, Roo.util.Observable, {
64308     /**
64309      * @cfg {String} header [required] The header text to display in the Grid view.
64310      */
64311         /**
64312      * @cfg {String} xsHeader Header at Bootsrap Extra Small width (default for all)
64313      */
64314         /**
64315      * @cfg {String} smHeader Header at Bootsrap Small width
64316      */
64317         /**
64318      * @cfg {String} mdHeader Header at Bootsrap Medium width
64319      */
64320         /**
64321      * @cfg {String} lgHeader Header at Bootsrap Large width
64322      */
64323         /**
64324      * @cfg {String} xlHeader Header at Bootsrap extra Large width
64325      */
64326     /**
64327      * @cfg {String} dataIndex  The name of the field in the grid's {@link Roo.data.Store}'s
64328      * {@link Roo.data.Record} definition from which to draw the column's value. If not
64329      * specified, the column's index is used as an index into the Record's data Array.
64330      */
64331     /**
64332      * @cfg {Number} width  The initial width in pixels of the column. Using this
64333      * instead of {@link Roo.grid.Grid#autoSizeColumns} is more efficient.
64334      */
64335     /**
64336      * @cfg {Boolean} sortable True if sorting is to be allowed on this column.
64337      * Defaults to the value of the {@link #defaultSortable} property.
64338      * Whether local/remote sorting is used is specified in {@link Roo.data.Store#remoteSort}.
64339      */
64340     /**
64341      * @cfg {Boolean} locked  True to lock the column in place while scrolling the Grid.  Defaults to false.
64342      */
64343     /**
64344      * @cfg {Boolean} fixed  True if the column width cannot be changed.  Defaults to false.
64345      */
64346     /**
64347      * @cfg {Boolean} resizable  False to disable column resizing. Defaults to true.
64348      */
64349     /**
64350      * @cfg {Boolean} hidden  True to hide the column. Defaults to false.
64351      */
64352     /**
64353      * @cfg {Function} renderer A function used to generate HTML markup for a cell
64354      * given the cell's data value. See {@link #setRenderer}. If not specified, the
64355      * default renderer returns the escaped data value. If an object is returned (bootstrap only)
64356      * then it is treated as a Roo Component object instance, and it is rendered after the initial row is rendered
64357      */
64358        /**
64359      * @cfg {Roo.grid.GridEditor} editor  For grid editors - returns the grid editor 
64360      */
64361     /**
64362      * @cfg {String} align (left|right) Set the CSS text-align property of the column.  Defaults to undefined (left).
64363      */
64364     /**
64365      * @cfg {String} valign (top|bottom|middle) Set the CSS vertical-align property of the column (eg. middle, top, bottom etc).  Defaults to undefined (middle)
64366      */
64367     /**
64368      * @cfg {String} cursor ( auto|default|none|context-menu|help|pointer|progress|wait|cell|crosshair|text|vertical-text|alias|copy|move|no-drop|not-allowed|e-resize|n-resize|ne-resize|nw-resize|s-resize|se-resize|sw-resize|w-resize|ew-resize|ns-resize|nesw-resize|nwse-resize|col-resize|row-resize|all-scroll|zoom-in|zoom-out|grab|grabbing)
64369      */
64370     /**
64371      * @cfg {String} tooltip mouse over tooltip text
64372      */
64373     /**
64374      * @cfg {Number} xs  can be '0' for hidden at this size (number less than 12)
64375      */
64376     /**
64377      * @cfg {Number} sm can be '0' for hidden at this size (number less than 12)
64378      */
64379     /**
64380      * @cfg {Number} md can be '0' for hidden at this size (number less than 12)
64381      */
64382     /**
64383      * @cfg {Number} lg   can be '0' for hidden at this size (number less than 12)
64384      */
64385         /**
64386      * @cfg {Number} xl   can be '0' for hidden at this size (number less than 12)
64387      */
64388     /**
64389      * Returns the id of the column at the specified index.
64390      * @param {Number} index The column index
64391      * @return {String} the id
64392      */
64393     getColumnId : function(index){
64394         return this.config[index].id;
64395     },
64396
64397     /**
64398      * Returns the column for a specified id.
64399      * @param {String} id The column id
64400      * @return {Object} the column
64401      */
64402     getColumnById : function(id){
64403         return this.lookup[id];
64404     },
64405
64406     
64407     /**
64408      * Returns the column Object for a specified dataIndex.
64409      * @param {String} dataIndex The column dataIndex
64410      * @return {Object|Boolean} the column or false if not found
64411      */
64412     getColumnByDataIndex: function(dataIndex){
64413         var index = this.findColumnIndex(dataIndex);
64414         return index > -1 ? this.config[index] : false;
64415     },
64416     
64417     /**
64418      * Returns the index for a specified column id.
64419      * @param {String} id The column id
64420      * @return {Number} the index, or -1 if not found
64421      */
64422     getIndexById : function(id){
64423         for(var i = 0, len = this.config.length; i < len; i++){
64424             if(this.config[i].id == id){
64425                 return i;
64426             }
64427         }
64428         return -1;
64429     },
64430     
64431     /**
64432      * Returns the index for a specified column dataIndex.
64433      * @param {String} dataIndex The column dataIndex
64434      * @return {Number} the index, or -1 if not found
64435      */
64436     
64437     findColumnIndex : function(dataIndex){
64438         for(var i = 0, len = this.config.length; i < len; i++){
64439             if(this.config[i].dataIndex == dataIndex){
64440                 return i;
64441             }
64442         }
64443         return -1;
64444     },
64445     
64446     
64447     moveColumn : function(oldIndex, newIndex){
64448         var c = this.config[oldIndex];
64449         this.config.splice(oldIndex, 1);
64450         this.config.splice(newIndex, 0, c);
64451         this.dataMap = null;
64452         this.fireEvent("columnmoved", this, oldIndex, newIndex);
64453     },
64454
64455     isLocked : function(colIndex){
64456         return this.config[colIndex].locked === true;
64457     },
64458
64459     setLocked : function(colIndex, value, suppressEvent){
64460         if(this.isLocked(colIndex) == value){
64461             return;
64462         }
64463         this.config[colIndex].locked = value;
64464         if(!suppressEvent){
64465             this.fireEvent("columnlockchange", this, colIndex, value);
64466         }
64467     },
64468
64469     getTotalLockedWidth : function(){
64470         var totalWidth = 0;
64471         for(var i = 0; i < this.config.length; i++){
64472             if(this.isLocked(i) && !this.isHidden(i)){
64473                 this.totalWidth += this.getColumnWidth(i);
64474             }
64475         }
64476         return totalWidth;
64477     },
64478
64479     getLockedCount : function(){
64480         for(var i = 0, len = this.config.length; i < len; i++){
64481             if(!this.isLocked(i)){
64482                 return i;
64483             }
64484         }
64485         
64486         return this.config.length;
64487     },
64488
64489     /**
64490      * Returns the number of columns.
64491      * @return {Number}
64492      */
64493     getColumnCount : function(visibleOnly){
64494         if(visibleOnly === true){
64495             var c = 0;
64496             for(var i = 0, len = this.config.length; i < len; i++){
64497                 if(!this.isHidden(i)){
64498                     c++;
64499                 }
64500             }
64501             return c;
64502         }
64503         return this.config.length;
64504     },
64505
64506     /**
64507      * Returns the column configs that return true by the passed function that is called with (columnConfig, index)
64508      * @param {Function} fn
64509      * @param {Object} scope (optional)
64510      * @return {Array} result
64511      */
64512     getColumnsBy : function(fn, scope){
64513         var r = [];
64514         for(var i = 0, len = this.config.length; i < len; i++){
64515             var c = this.config[i];
64516             if(fn.call(scope||this, c, i) === true){
64517                 r[r.length] = c;
64518             }
64519         }
64520         return r;
64521     },
64522
64523     /**
64524      * Returns true if the specified column is sortable.
64525      * @param {Number} col The column index
64526      * @return {Boolean}
64527      */
64528     isSortable : function(col){
64529         if(typeof this.config[col].sortable == "undefined"){
64530             return this.defaultSortable;
64531         }
64532         return this.config[col].sortable;
64533     },
64534
64535     /**
64536      * Returns the rendering (formatting) function defined for the column.
64537      * @param {Number} col The column index.
64538      * @return {Function} The function used to render the cell. See {@link #setRenderer}.
64539      */
64540     getRenderer : function(col){
64541         if(!this.config[col].renderer){
64542             return Roo.grid.ColumnModel.defaultRenderer;
64543         }
64544         return this.config[col].renderer;
64545     },
64546
64547     /**
64548      * Sets the rendering (formatting) function for a column.
64549      * @param {Number} col The column index
64550      * @param {Function} fn The function to use to process the cell's raw data
64551      * to return HTML markup for the grid view. The render function is called with
64552      * the following parameters:<ul>
64553      * <li>Data value.</li>
64554      * <li>Cell metadata. An object in which you may set the following attributes:<ul>
64555      * <li>css A CSS style string to apply to the table cell.</li>
64556      * <li>attr An HTML attribute definition string to apply to the data container element <i>within</i> the table cell.</li></ul>
64557      * <li>The {@link Roo.data.Record} from which the data was extracted.</li>
64558      * <li>Row index</li>
64559      * <li>Column index</li>
64560      * <li>The {@link Roo.data.Store} object from which the Record was extracted</li></ul>
64561      */
64562     setRenderer : function(col, fn){
64563         this.config[col].renderer = fn;
64564     },
64565
64566     /**
64567      * Returns the width for the specified column.
64568      * @param {Number} col The column index
64569      * @param (optional) {String} gridSize bootstrap width size.
64570      * @return {Number}
64571      */
64572     getColumnWidth : function(col, gridSize)
64573         {
64574                 var cfg = this.config[col];
64575                 
64576                 if (typeof(gridSize) == 'undefined') {
64577                         return cfg.width * 1 || this.defaultWidth;
64578                 }
64579                 if (gridSize === false) { // if we set it..
64580                         return cfg.width || false;
64581                 }
64582                 var sizes = ['xl', 'lg', 'md', 'sm', 'xs'];
64583                 
64584                 for(var i = sizes.indexOf(gridSize); i < sizes.length; i++) {
64585                         if (typeof(cfg[ sizes[i] ] ) == 'undefined') {
64586                                 continue;
64587                         }
64588                         return cfg[ sizes[i] ];
64589                 }
64590                 return 1;
64591                 
64592     },
64593
64594     /**
64595      * Sets the width for a column.
64596      * @param {Number} col The column index
64597      * @param {Number} width The new width
64598      */
64599     setColumnWidth : function(col, width, suppressEvent){
64600         this.config[col].width = width;
64601         this.totalWidth = null;
64602         if(!suppressEvent){
64603              this.fireEvent("widthchange", this, col, width);
64604         }
64605     },
64606
64607     /**
64608      * Returns the total width of all columns.
64609      * @param {Boolean} includeHidden True to include hidden column widths
64610      * @return {Number}
64611      */
64612     getTotalWidth : function(includeHidden){
64613         if(!this.totalWidth){
64614             this.totalWidth = 0;
64615             for(var i = 0, len = this.config.length; i < len; i++){
64616                 if(includeHidden || !this.isHidden(i)){
64617                     this.totalWidth += this.getColumnWidth(i);
64618                 }
64619             }
64620         }
64621         return this.totalWidth;
64622     },
64623
64624     /**
64625      * Returns the header for the specified column.
64626      * @param {Number} col The column index
64627      * @return {String}
64628      */
64629     getColumnHeader : function(col){
64630         return this.config[col].header;
64631     },
64632
64633     /**
64634      * Sets the header for a column.
64635      * @param {Number} col The column index
64636      * @param {String} header The new header
64637      */
64638     setColumnHeader : function(col, header){
64639         this.config[col].header = header;
64640         this.fireEvent("headerchange", this, col, header);
64641     },
64642
64643     /**
64644      * Returns the tooltip for the specified column.
64645      * @param {Number} col The column index
64646      * @return {String}
64647      */
64648     getColumnTooltip : function(col){
64649             return this.config[col].tooltip;
64650     },
64651     /**
64652      * Sets the tooltip for a column.
64653      * @param {Number} col The column index
64654      * @param {String} tooltip The new tooltip
64655      */
64656     setColumnTooltip : function(col, tooltip){
64657             this.config[col].tooltip = tooltip;
64658     },
64659
64660     /**
64661      * Returns the dataIndex for the specified column.
64662      * @param {Number} col The column index
64663      * @return {Number}
64664      */
64665     getDataIndex : function(col){
64666         return this.config[col].dataIndex;
64667     },
64668
64669     /**
64670      * Sets the dataIndex for a column.
64671      * @param {Number} col The column index
64672      * @param {Number} dataIndex The new dataIndex
64673      */
64674     setDataIndex : function(col, dataIndex){
64675         this.config[col].dataIndex = dataIndex;
64676     },
64677
64678     
64679     
64680     /**
64681      * Returns true if the cell is editable.
64682      * @param {Number} colIndex The column index
64683      * @param {Number} rowIndex The row index - this is nto actually used..?
64684      * @return {Boolean}
64685      */
64686     isCellEditable : function(colIndex, rowIndex){
64687         return (this.config[colIndex].editable || (typeof this.config[colIndex].editable == "undefined" && this.config[colIndex].editor)) ? true : false;
64688     },
64689
64690     /**
64691      * Returns the editor defined for the cell/column.
64692      * return false or null to disable editing.
64693      * @param {Number} colIndex The column index
64694      * @param {Number} rowIndex The row index
64695      * @return {Object}
64696      */
64697     getCellEditor : function(colIndex, rowIndex){
64698         return this.config[colIndex].editor;
64699     },
64700
64701     /**
64702      * Sets if a column is editable.
64703      * @param {Number} col The column index
64704      * @param {Boolean} editable True if the column is editable
64705      */
64706     setEditable : function(col, editable){
64707         this.config[col].editable = editable;
64708     },
64709
64710
64711     /**
64712      * Returns true if the column is hidden.
64713      * @param {Number} colIndex The column index
64714      * @return {Boolean}
64715      */
64716     isHidden : function(colIndex){
64717         return this.config[colIndex].hidden;
64718     },
64719
64720
64721     /**
64722      * Returns true if the column width cannot be changed
64723      */
64724     isFixed : function(colIndex){
64725         return this.config[colIndex].fixed;
64726     },
64727
64728     /**
64729      * Returns true if the column can be resized
64730      * @return {Boolean}
64731      */
64732     isResizable : function(colIndex){
64733         return colIndex >= 0 && this.config[colIndex].resizable !== false && this.config[colIndex].fixed !== true;
64734     },
64735     /**
64736      * Sets if a column is hidden.
64737      * @param {Number} colIndex The column index
64738      * @param {Boolean} hidden True if the column is hidden
64739      */
64740     setHidden : function(colIndex, hidden){
64741         this.config[colIndex].hidden = hidden;
64742         this.totalWidth = null;
64743         this.fireEvent("hiddenchange", this, colIndex, hidden);
64744     },
64745
64746     /**
64747      * Sets the editor for a column.
64748      * @param {Number} col The column index
64749      * @param {Object} editor The editor object
64750      */
64751     setEditor : function(col, editor){
64752         this.config[col].editor = editor;
64753     },
64754     /**
64755      * Add a column (experimental...) - defaults to adding to the end..
64756      * @param {Object} config 
64757     */
64758     addColumn : function(c)
64759     {
64760     
64761         var i = this.config.length;
64762         this.config[i] = c;
64763         
64764         if(typeof c.dataIndex == "undefined"){
64765             c.dataIndex = i;
64766         }
64767         if(typeof c.renderer == "string"){
64768             c.renderer = Roo.util.Format[c.renderer];
64769         }
64770         if(typeof c.id == "undefined"){
64771             c.id = Roo.id();
64772         }
64773         if(c.editor && c.editor.xtype){
64774             c.editor  = Roo.factory(c.editor, Roo.grid);
64775         }
64776         if(c.editor && c.editor.isFormField){
64777             c.editor = new Roo.grid.GridEditor(c.editor);
64778         }
64779         this.lookup[c.id] = c;
64780     }
64781     
64782 });
64783
64784 Roo.grid.ColumnModel.defaultRenderer = function(value)
64785 {
64786     if(typeof value == "object") {
64787         return value;
64788     }
64789         if(typeof value == "string" && value.length < 1){
64790             return "&#160;";
64791         }
64792     
64793         return String.format("{0}", value);
64794 };
64795
64796 // Alias for backwards compatibility
64797 Roo.grid.DefaultColumnModel = Roo.grid.ColumnModel;
64798 /*
64799  * Based on:
64800  * Ext JS Library 1.1.1
64801  * Copyright(c) 2006-2007, Ext JS, LLC.
64802  *
64803  * Originally Released Under LGPL - original licence link has changed is not relivant.
64804  *
64805  * Fork - LGPL
64806  * <script type="text/javascript">
64807  */
64808
64809 /**
64810  * @class Roo.grid.AbstractSelectionModel
64811  * @extends Roo.util.Observable
64812  * @abstract
64813  * Abstract base class for grid SelectionModels.  It provides the interface that should be
64814  * implemented by descendant classes.  This class should not be directly instantiated.
64815  * @constructor
64816  */
64817 Roo.grid.AbstractSelectionModel = function(){
64818     this.locked = false;
64819     Roo.grid.AbstractSelectionModel.superclass.constructor.call(this);
64820 };
64821
64822 Roo.extend(Roo.grid.AbstractSelectionModel, Roo.util.Observable,  {
64823     /** @ignore Called by the grid automatically. Do not call directly. */
64824     init : function(grid){
64825         this.grid = grid;
64826         this.initEvents();
64827     },
64828
64829     /**
64830      * Locks the selections.
64831      */
64832     lock : function(){
64833         this.locked = true;
64834     },
64835
64836     /**
64837      * Unlocks the selections.
64838      */
64839     unlock : function(){
64840         this.locked = false;
64841     },
64842
64843     /**
64844      * Returns true if the selections are locked.
64845      * @return {Boolean}
64846      */
64847     isLocked : function(){
64848         return this.locked;
64849     }
64850 });/*
64851  * Based on:
64852  * Ext JS Library 1.1.1
64853  * Copyright(c) 2006-2007, Ext JS, LLC.
64854  *
64855  * Originally Released Under LGPL - original licence link has changed is not relivant.
64856  *
64857  * Fork - LGPL
64858  * <script type="text/javascript">
64859  */
64860 /**
64861  * @extends Roo.grid.AbstractSelectionModel
64862  * @class Roo.grid.RowSelectionModel
64863  * The default SelectionModel used by {@link Roo.grid.Grid}.
64864  * It supports multiple selections and keyboard selection/navigation. 
64865  * @constructor
64866  * @param {Object} config
64867  */
64868 Roo.grid.RowSelectionModel = function(config){
64869     Roo.apply(this, config);
64870     this.selections = new Roo.util.MixedCollection(false, function(o){
64871         return o.id;
64872     });
64873
64874     this.last = false;
64875     this.lastActive = false;
64876
64877     this.addEvents({
64878         /**
64879         * @event selectionchange
64880         * Fires when the selection changes
64881         * @param {SelectionModel} this
64882         */
64883        "selectionchange" : true,
64884        /**
64885         * @event afterselectionchange
64886         * Fires after the selection changes (eg. by key press or clicking)
64887         * @param {SelectionModel} this
64888         */
64889        "afterselectionchange" : true,
64890        /**
64891         * @event beforerowselect
64892         * Fires when a row is selected being selected, return false to cancel.
64893         * @param {SelectionModel} this
64894         * @param {Number} rowIndex The selected index
64895         * @param {Boolean} keepExisting False if other selections will be cleared
64896         */
64897        "beforerowselect" : true,
64898        /**
64899         * @event rowselect
64900         * Fires when a row is selected.
64901         * @param {SelectionModel} this
64902         * @param {Number} rowIndex The selected index
64903         * @param {Roo.data.Record} r The record
64904         */
64905        "rowselect" : true,
64906        /**
64907         * @event rowdeselect
64908         * Fires when a row is deselected.
64909         * @param {SelectionModel} this
64910         * @param {Number} rowIndex The selected index
64911         */
64912         "rowdeselect" : true
64913     });
64914     Roo.grid.RowSelectionModel.superclass.constructor.call(this);
64915     this.locked = false;
64916 };
64917
64918 Roo.extend(Roo.grid.RowSelectionModel, Roo.grid.AbstractSelectionModel,  {
64919     /**
64920      * @cfg {Boolean} singleSelect
64921      * True to allow selection of only one row at a time (defaults to false)
64922      */
64923     singleSelect : false,
64924
64925     // private
64926     initEvents : function(){
64927
64928         if(!this.grid.enableDragDrop && !this.grid.enableDrag){
64929             this.grid.on("mousedown", this.handleMouseDown, this);
64930         }else{ // allow click to work like normal
64931             this.grid.on("rowclick", this.handleDragableRowClick, this);
64932         }
64933         // bootstrap does not have a view..
64934         var view = this.grid.view ? this.grid.view : this.grid;
64935         this.rowNav = new Roo.KeyNav(this.grid.getGridEl(), {
64936             "up" : function(e){
64937                 if(!e.shiftKey){
64938                     this.selectPrevious(e.shiftKey);
64939                 }else if(this.last !== false && this.lastActive !== false){
64940                     var last = this.last;
64941                     this.selectRange(this.last,  this.lastActive-1);
64942                     view.focusRow(this.lastActive);
64943                     if(last !== false){
64944                         this.last = last;
64945                     }
64946                 }else{
64947                     this.selectFirstRow();
64948                 }
64949                 this.fireEvent("afterselectionchange", this);
64950             },
64951             "down" : function(e){
64952                 if(!e.shiftKey){
64953                     this.selectNext(e.shiftKey);
64954                 }else if(this.last !== false && this.lastActive !== false){
64955                     var last = this.last;
64956                     this.selectRange(this.last,  this.lastActive+1);
64957                     view.focusRow(this.lastActive);
64958                     if(last !== false){
64959                         this.last = last;
64960                     }
64961                 }else{
64962                     this.selectFirstRow();
64963                 }
64964                 this.fireEvent("afterselectionchange", this);
64965             },
64966             scope: this
64967         });
64968
64969          
64970         view.on("refresh", this.onRefresh, this);
64971         view.on("rowupdated", this.onRowUpdated, this);
64972         view.on("rowremoved", this.onRemove, this);
64973     },
64974
64975     // private
64976     onRefresh : function(){
64977         var ds = this.grid.ds, i, v = this.grid.view;
64978         var s = this.selections;
64979         s.each(function(r){
64980             if((i = ds.indexOfId(r.id)) != -1){
64981                 v.onRowSelect(i);
64982                 s.add(ds.getAt(i)); // updating the selection relate data
64983             }else{
64984                 s.remove(r);
64985             }
64986         });
64987     },
64988
64989     // private
64990     onRemove : function(v, index, r){
64991         this.selections.remove(r);
64992     },
64993
64994     // private
64995     onRowUpdated : function(v, index, r){
64996         if(this.isSelected(r)){
64997             v.onRowSelect(index);
64998         }
64999     },
65000
65001     /**
65002      * Select records.
65003      * @param {Array} records The records to select
65004      * @param {Boolean} keepExisting (optional) True to keep existing selections
65005      */
65006     selectRecords : function(records, keepExisting){
65007         if(!keepExisting){
65008             this.clearSelections();
65009         }
65010         var ds = this.grid.ds;
65011         for(var i = 0, len = records.length; i < len; i++){
65012             this.selectRow(ds.indexOf(records[i]), true);
65013         }
65014     },
65015
65016     /**
65017      * Gets the number of selected rows.
65018      * @return {Number}
65019      */
65020     getCount : function(){
65021         return this.selections.length;
65022     },
65023
65024     /**
65025      * Selects the first row in the grid.
65026      */
65027     selectFirstRow : function(){
65028         this.selectRow(0);
65029     },
65030
65031     /**
65032      * Select the last row.
65033      * @param {Boolean} keepExisting (optional) True to keep existing selections
65034      */
65035     selectLastRow : function(keepExisting){
65036         this.selectRow(this.grid.ds.getCount() - 1, keepExisting);
65037     },
65038
65039     /**
65040      * Selects the row immediately following the last selected row.
65041      * @param {Boolean} keepExisting (optional) True to keep existing selections
65042      */
65043     selectNext : function(keepExisting){
65044         if(this.last !== false && (this.last+1) < this.grid.ds.getCount()){
65045             this.selectRow(this.last+1, keepExisting);
65046             var view = this.grid.view ? this.grid.view : this.grid;
65047             view.focusRow(this.last);
65048         }
65049     },
65050
65051     /**
65052      * Selects the row that precedes the last selected row.
65053      * @param {Boolean} keepExisting (optional) True to keep existing selections
65054      */
65055     selectPrevious : function(keepExisting){
65056         if(this.last){
65057             this.selectRow(this.last-1, keepExisting);
65058             var view = this.grid.view ? this.grid.view : this.grid;
65059             view.focusRow(this.last);
65060         }
65061     },
65062
65063     /**
65064      * Returns the selected records
65065      * @return {Array} Array of selected records
65066      */
65067     getSelections : function(){
65068         return [].concat(this.selections.items);
65069     },
65070
65071     /**
65072      * Returns the first selected record.
65073      * @return {Record}
65074      */
65075     getSelected : function(){
65076         return this.selections.itemAt(0);
65077     },
65078
65079
65080     /**
65081      * Clears all selections.
65082      */
65083     clearSelections : function(fast){
65084         if(this.locked) {
65085             return;
65086         }
65087         if(fast !== true){
65088             var ds = this.grid.ds;
65089             var s = this.selections;
65090             s.each(function(r){
65091                 this.deselectRow(ds.indexOfId(r.id));
65092             }, this);
65093             s.clear();
65094         }else{
65095             this.selections.clear();
65096         }
65097         this.last = false;
65098     },
65099
65100
65101     /**
65102      * Selects all rows.
65103      */
65104     selectAll : function(){
65105         if(this.locked) {
65106             return;
65107         }
65108         this.selections.clear();
65109         for(var i = 0, len = this.grid.ds.getCount(); i < len; i++){
65110             this.selectRow(i, true);
65111         }
65112     },
65113
65114     /**
65115      * Returns True if there is a selection.
65116      * @return {Boolean}
65117      */
65118     hasSelection : function(){
65119         return this.selections.length > 0;
65120     },
65121
65122     /**
65123      * Returns True if the specified row is selected.
65124      * @param {Number/Record} record The record or index of the record to check
65125      * @return {Boolean}
65126      */
65127     isSelected : function(index){
65128         var r = typeof index == "number" ? this.grid.ds.getAt(index) : index;
65129         return (r && this.selections.key(r.id) ? true : false);
65130     },
65131
65132     /**
65133      * Returns True if the specified record id is selected.
65134      * @param {String} id The id of record to check
65135      * @return {Boolean}
65136      */
65137     isIdSelected : function(id){
65138         return (this.selections.key(id) ? true : false);
65139     },
65140
65141     // private
65142     handleMouseDown : function(e, t)
65143     {
65144         var view = this.grid.view ? this.grid.view : this.grid;
65145         var rowIndex;
65146         if(this.isLocked() || (rowIndex = view.findRowIndex(t)) === false){
65147             return;
65148         };
65149         if(e.shiftKey && this.last !== false){
65150             var last = this.last;
65151             this.selectRange(last, rowIndex, e.ctrlKey);
65152             this.last = last; // reset the last
65153             view.focusRow(rowIndex);
65154         }else{
65155             var isSelected = this.isSelected(rowIndex);
65156             if(e.button !== 0 && isSelected){
65157                 view.focusRow(rowIndex);
65158             }else if(e.ctrlKey && isSelected){
65159                 this.deselectRow(rowIndex);
65160             }else if(!isSelected){
65161                 this.selectRow(rowIndex, e.button === 0 && (e.ctrlKey || e.shiftKey));
65162                 view.focusRow(rowIndex);
65163             }
65164         }
65165         this.fireEvent("afterselectionchange", this);
65166     },
65167     // private
65168     handleDragableRowClick :  function(grid, rowIndex, e) 
65169     {
65170         if(e.button === 0 && !e.shiftKey && !e.ctrlKey) {
65171             this.selectRow(rowIndex, false);
65172             var view = this.grid.view ? this.grid.view : this.grid;
65173             view.focusRow(rowIndex);
65174              this.fireEvent("afterselectionchange", this);
65175         }
65176     },
65177     
65178     /**
65179      * Selects multiple rows.
65180      * @param {Array} rows Array of the indexes of the row to select
65181      * @param {Boolean} keepExisting (optional) True to keep existing selections
65182      */
65183     selectRows : function(rows, keepExisting){
65184         if(!keepExisting){
65185             this.clearSelections();
65186         }
65187         for(var i = 0, len = rows.length; i < len; i++){
65188             this.selectRow(rows[i], true);
65189         }
65190     },
65191
65192     /**
65193      * Selects a range of rows. All rows in between startRow and endRow are also selected.
65194      * @param {Number} startRow The index of the first row in the range
65195      * @param {Number} endRow The index of the last row in the range
65196      * @param {Boolean} keepExisting (optional) True to retain existing selections
65197      */
65198     selectRange : function(startRow, endRow, keepExisting){
65199         if(this.locked) {
65200             return;
65201         }
65202         if(!keepExisting){
65203             this.clearSelections();
65204         }
65205         if(startRow <= endRow){
65206             for(var i = startRow; i <= endRow; i++){
65207                 this.selectRow(i, true);
65208             }
65209         }else{
65210             for(var i = startRow; i >= endRow; i--){
65211                 this.selectRow(i, true);
65212             }
65213         }
65214     },
65215
65216     /**
65217      * Deselects a range of rows. All rows in between startRow and endRow are also deselected.
65218      * @param {Number} startRow The index of the first row in the range
65219      * @param {Number} endRow The index of the last row in the range
65220      */
65221     deselectRange : function(startRow, endRow, preventViewNotify){
65222         if(this.locked) {
65223             return;
65224         }
65225         for(var i = startRow; i <= endRow; i++){
65226             this.deselectRow(i, preventViewNotify);
65227         }
65228     },
65229
65230     /**
65231      * Selects a row.
65232      * @param {Number} row The index of the row to select
65233      * @param {Boolean} keepExisting (optional) True to keep existing selections
65234      */
65235     selectRow : function(index, keepExisting, preventViewNotify){
65236         if(this.locked || (index < 0 || index >= this.grid.ds.getCount())) {
65237             return;
65238         }
65239         if(this.fireEvent("beforerowselect", this, index, keepExisting) !== false){
65240             if(!keepExisting || this.singleSelect){
65241                 this.clearSelections();
65242             }
65243             var r = this.grid.ds.getAt(index);
65244             this.selections.add(r);
65245             this.last = this.lastActive = index;
65246             if(!preventViewNotify){
65247                 var view = this.grid.view ? this.grid.view : this.grid;
65248                 view.onRowSelect(index);
65249             }
65250             this.fireEvent("rowselect", this, index, r);
65251             this.fireEvent("selectionchange", this);
65252         }
65253     },
65254
65255     /**
65256      * Deselects a row.
65257      * @param {Number} row The index of the row to deselect
65258      */
65259     deselectRow : function(index, preventViewNotify){
65260         if(this.locked) {
65261             return;
65262         }
65263         if(this.last == index){
65264             this.last = false;
65265         }
65266         if(this.lastActive == index){
65267             this.lastActive = false;
65268         }
65269         var r = this.grid.ds.getAt(index);
65270         this.selections.remove(r);
65271         if(!preventViewNotify){
65272             var view = this.grid.view ? this.grid.view : this.grid;
65273             view.onRowDeselect(index);
65274         }
65275         this.fireEvent("rowdeselect", this, index);
65276         this.fireEvent("selectionchange", this);
65277     },
65278
65279     // private
65280     restoreLast : function(){
65281         if(this._last){
65282             this.last = this._last;
65283         }
65284     },
65285
65286     // private
65287     acceptsNav : function(row, col, cm){
65288         return !cm.isHidden(col) && cm.isCellEditable(col, row);
65289     },
65290
65291     // private
65292     onEditorKey : function(field, e){
65293         var k = e.getKey(), newCell, g = this.grid, ed = g.activeEditor;
65294         if(k == e.TAB){
65295             e.stopEvent();
65296             ed.completeEdit();
65297             if(e.shiftKey){
65298                 newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this);
65299             }else{
65300                 newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
65301             }
65302         }else if(k == e.ENTER && !e.ctrlKey){
65303             e.stopEvent();
65304             ed.completeEdit();
65305             if(e.shiftKey){
65306                 newCell = g.walkCells(ed.row-1, ed.col, -1, this.acceptsNav, this);
65307             }else{
65308                 newCell = g.walkCells(ed.row+1, ed.col, 1, this.acceptsNav, this);
65309             }
65310         }else if(k == e.ESC){
65311             ed.cancelEdit();
65312         }
65313         if(newCell){
65314             g.startEditing(newCell[0], newCell[1]);
65315         }
65316     }
65317 });/*
65318  * Based on:
65319  * Ext JS Library 1.1.1
65320  * Copyright(c) 2006-2007, Ext JS, LLC.
65321  *
65322  * Originally Released Under LGPL - original licence link has changed is not relivant.
65323  *
65324  * Fork - LGPL
65325  * <script type="text/javascript">
65326  */
65327 /**
65328  * @class Roo.grid.CellSelectionModel
65329  * @extends Roo.grid.AbstractSelectionModel
65330  * This class provides the basic implementation for cell selection in a grid.
65331  * @constructor
65332  * @param {Object} config The object containing the configuration of this model.
65333  * @cfg {Boolean} enter_is_tab Enter behaves the same as tab. (eg. goes to next cell) default: false
65334  */
65335 Roo.grid.CellSelectionModel = function(config){
65336     Roo.apply(this, config);
65337
65338     this.selection = null;
65339
65340     this.addEvents({
65341         /**
65342              * @event beforerowselect
65343              * Fires before a cell is selected.
65344              * @param {SelectionModel} this
65345              * @param {Number} rowIndex The selected row index
65346              * @param {Number} colIndex The selected cell index
65347              */
65348             "beforecellselect" : true,
65349         /**
65350              * @event cellselect
65351              * Fires when a cell is selected.
65352              * @param {SelectionModel} this
65353              * @param {Number} rowIndex The selected row index
65354              * @param {Number} colIndex The selected cell index
65355              */
65356             "cellselect" : true,
65357         /**
65358              * @event selectionchange
65359              * Fires when the active selection changes.
65360              * @param {SelectionModel} this
65361              * @param {Object} selection null for no selection or an object (o) with two properties
65362                 <ul>
65363                 <li>o.record: the record object for the row the selection is in</li>
65364                 <li>o.cell: An array of [rowIndex, columnIndex]</li>
65365                 </ul>
65366              */
65367             "selectionchange" : true,
65368         /**
65369              * @event tabend
65370              * Fires when the tab (or enter) was pressed on the last editable cell
65371              * You can use this to trigger add new row.
65372              * @param {SelectionModel} this
65373              */
65374             "tabend" : true,
65375          /**
65376              * @event beforeeditnext
65377              * Fires before the next editable sell is made active
65378              * You can use this to skip to another cell or fire the tabend
65379              *    if you set cell to false
65380              * @param {Object} eventdata object : { cell : [ row, col ] } 
65381              */
65382             "beforeeditnext" : true
65383     });
65384     Roo.grid.CellSelectionModel.superclass.constructor.call(this);
65385 };
65386
65387 Roo.extend(Roo.grid.CellSelectionModel, Roo.grid.AbstractSelectionModel,  {
65388     
65389     enter_is_tab: false,
65390
65391     /** @ignore */
65392     initEvents : function(){
65393         this.grid.on("mousedown", this.handleMouseDown, this);
65394         this.grid.getGridEl().on(Roo.isIE ? "keydown" : "keypress", this.handleKeyDown, this);
65395         var view = this.grid.view;
65396         view.on("refresh", this.onViewChange, this);
65397         view.on("rowupdated", this.onRowUpdated, this);
65398         view.on("beforerowremoved", this.clearSelections, this);
65399         view.on("beforerowsinserted", this.clearSelections, this);
65400         if(this.grid.isEditor){
65401             this.grid.on("beforeedit", this.beforeEdit,  this);
65402         }
65403     },
65404
65405         //private
65406     beforeEdit : function(e){
65407         this.select(e.row, e.column, false, true, e.record);
65408     },
65409
65410         //private
65411     onRowUpdated : function(v, index, r){
65412         if(this.selection && this.selection.record == r){
65413             v.onCellSelect(index, this.selection.cell[1]);
65414         }
65415     },
65416
65417         //private
65418     onViewChange : function(){
65419         this.clearSelections(true);
65420     },
65421
65422         /**
65423          * Returns the currently selected cell,.
65424          * @return {Array} The selected cell (row, column) or null if none selected.
65425          */
65426     getSelectedCell : function(){
65427         return this.selection ? this.selection.cell : null;
65428     },
65429
65430     /**
65431      * Clears all selections.
65432      * @param {Boolean} true to prevent the gridview from being notified about the change.
65433      */
65434     clearSelections : function(preventNotify){
65435         var s = this.selection;
65436         if(s){
65437             if(preventNotify !== true){
65438                 this.grid.view.onCellDeselect(s.cell[0], s.cell[1]);
65439             }
65440             this.selection = null;
65441             this.fireEvent("selectionchange", this, null);
65442         }
65443     },
65444
65445     /**
65446      * Returns true if there is a selection.
65447      * @return {Boolean}
65448      */
65449     hasSelection : function(){
65450         return this.selection ? true : false;
65451     },
65452
65453     /** @ignore */
65454     handleMouseDown : function(e, t){
65455         var v = this.grid.getView();
65456         if(this.isLocked()){
65457             return;
65458         };
65459         var row = v.findRowIndex(t);
65460         var cell = v.findCellIndex(t);
65461         if(row !== false && cell !== false){
65462             this.select(row, cell);
65463         }
65464     },
65465
65466     /**
65467      * Selects a cell.
65468      * @param {Number} rowIndex
65469      * @param {Number} collIndex
65470      */
65471     select : function(rowIndex, colIndex, preventViewNotify, preventFocus, /*internal*/ r){
65472         if(this.fireEvent("beforecellselect", this, rowIndex, colIndex) !== false){
65473             this.clearSelections();
65474             r = r || this.grid.dataSource.getAt(rowIndex);
65475             this.selection = {
65476                 record : r,
65477                 cell : [rowIndex, colIndex]
65478             };
65479             if(!preventViewNotify){
65480                 var v = this.grid.getView();
65481                 v.onCellSelect(rowIndex, colIndex);
65482                 if(preventFocus !== true){
65483                     v.focusCell(rowIndex, colIndex);
65484                 }
65485             }
65486             this.fireEvent("cellselect", this, rowIndex, colIndex);
65487             this.fireEvent("selectionchange", this, this.selection);
65488         }
65489     },
65490
65491         //private
65492     isSelectable : function(rowIndex, colIndex, cm){
65493         return !cm.isHidden(colIndex);
65494     },
65495
65496     /** @ignore */
65497     handleKeyDown : function(e){
65498         //Roo.log('Cell Sel Model handleKeyDown');
65499         if(!e.isNavKeyPress()){
65500             return;
65501         }
65502         var g = this.grid, s = this.selection;
65503         if(!s){
65504             e.stopEvent();
65505             var cell = g.walkCells(0, 0, 1, this.isSelectable,  this);
65506             if(cell){
65507                 this.select(cell[0], cell[1]);
65508             }
65509             return;
65510         }
65511         var sm = this;
65512         var walk = function(row, col, step){
65513             return g.walkCells(row, col, step, sm.isSelectable,  sm);
65514         };
65515         var k = e.getKey(), r = s.cell[0], c = s.cell[1];
65516         var newCell;
65517
65518       
65519
65520         switch(k){
65521             case e.TAB:
65522                 // handled by onEditorKey
65523                 if (g.isEditor && g.editing) {
65524                     return;
65525                 }
65526                 if(e.shiftKey) {
65527                     newCell = walk(r, c-1, -1);
65528                 } else {
65529                     newCell = walk(r, c+1, 1);
65530                 }
65531                 break;
65532             
65533             case e.DOWN:
65534                newCell = walk(r+1, c, 1);
65535                 break;
65536             
65537             case e.UP:
65538                 newCell = walk(r-1, c, -1);
65539                 break;
65540             
65541             case e.RIGHT:
65542                 newCell = walk(r, c+1, 1);
65543                 break;
65544             
65545             case e.LEFT:
65546                 newCell = walk(r, c-1, -1);
65547                 break;
65548             
65549             case e.ENTER:
65550                 
65551                 if(g.isEditor && !g.editing){
65552                    g.startEditing(r, c);
65553                    e.stopEvent();
65554                    return;
65555                 }
65556                 
65557                 
65558              break;
65559         };
65560         if(newCell){
65561             this.select(newCell[0], newCell[1]);
65562             e.stopEvent();
65563             
65564         }
65565     },
65566
65567     acceptsNav : function(row, col, cm){
65568         return !cm.isHidden(col) && cm.isCellEditable(col, row);
65569     },
65570     /**
65571      * Selects a cell.
65572      * @param {Number} field (not used) - as it's normally used as a listener
65573      * @param {Number} e - event - fake it by using
65574      *
65575      * var e = Roo.EventObjectImpl.prototype;
65576      * e.keyCode = e.TAB
65577      *
65578      * 
65579      */
65580     onEditorKey : function(field, e){
65581         
65582         var k = e.getKey(),
65583             newCell,
65584             g = this.grid,
65585             ed = g.activeEditor,
65586             forward = false;
65587         ///Roo.log('onEditorKey' + k);
65588         
65589         
65590         if (this.enter_is_tab && k == e.ENTER) {
65591             k = e.TAB;
65592         }
65593         
65594         if(k == e.TAB){
65595             if(e.shiftKey){
65596                 newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this);
65597             }else{
65598                 newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
65599                 forward = true;
65600             }
65601             
65602             e.stopEvent();
65603             
65604         } else if(k == e.ENTER &&  !e.ctrlKey){
65605             ed.completeEdit();
65606             e.stopEvent();
65607             newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
65608         
65609                 } else if(k == e.ESC){
65610             ed.cancelEdit();
65611         }
65612                 
65613         if (newCell) {
65614             var ecall = { cell : newCell, forward : forward };
65615             this.fireEvent('beforeeditnext', ecall );
65616             newCell = ecall.cell;
65617                         forward = ecall.forward;
65618         }
65619                 
65620         if(newCell){
65621             //Roo.log('next cell after edit');
65622             g.startEditing.defer(100, g, [newCell[0], newCell[1]]);
65623         } else if (forward) {
65624             // tabbed past last
65625             this.fireEvent.defer(100, this, ['tabend',this]);
65626         }
65627     }
65628 });/*
65629  * Based on:
65630  * Ext JS Library 1.1.1
65631  * Copyright(c) 2006-2007, Ext JS, LLC.
65632  *
65633  * Originally Released Under LGPL - original licence link has changed is not relivant.
65634  *
65635  * Fork - LGPL
65636  * <script type="text/javascript">
65637  */
65638  
65639 /**
65640  * @class Roo.grid.EditorGrid
65641  * @extends Roo.grid.Grid
65642  * Class for creating and editable grid.
65643  * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered - 
65644  * The container MUST have some type of size defined for the grid to fill. The container will be 
65645  * automatically set to position relative if it isn't already.
65646  * @param {Object} dataSource The data model to bind to
65647  * @param {Object} colModel The column model with info about this grid's columns
65648  */
65649 Roo.grid.EditorGrid = function(container, config){
65650     Roo.grid.EditorGrid.superclass.constructor.call(this, container, config);
65651     this.getGridEl().addClass("xedit-grid");
65652
65653     if(!this.selModel){
65654         this.selModel = new Roo.grid.CellSelectionModel();
65655     }
65656
65657     this.activeEditor = null;
65658
65659         this.addEvents({
65660             /**
65661              * @event beforeedit
65662              * Fires before cell editing is triggered. The edit event object has the following properties <br />
65663              * <ul style="padding:5px;padding-left:16px;">
65664              * <li>grid - This grid</li>
65665              * <li>record - The record being edited</li>
65666              * <li>field - The field name being edited</li>
65667              * <li>value - The value for the field being edited.</li>
65668              * <li>row - The grid row index</li>
65669              * <li>column - The grid column index</li>
65670              * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
65671              * </ul>
65672              * @param {Object} e An edit event (see above for description)
65673              */
65674             "beforeedit" : true,
65675             /**
65676              * @event afteredit
65677              * Fires after a cell is edited. <br />
65678              * <ul style="padding:5px;padding-left:16px;">
65679              * <li>grid - This grid</li>
65680              * <li>record - The record being edited</li>
65681              * <li>field - The field name being edited</li>
65682              * <li>value - The value being set</li>
65683              * <li>originalValue - The original value for the field, before the edit.</li>
65684              * <li>row - The grid row index</li>
65685              * <li>column - The grid column index</li>
65686              * </ul>
65687              * @param {Object} e An edit event (see above for description)
65688              */
65689             "afteredit" : true,
65690             /**
65691              * @event validateedit
65692              * Fires after a cell is edited, but before the value is set in the record. 
65693          * You can use this to modify the value being set in the field, Return false
65694              * to cancel the change. The edit event object has the following properties <br />
65695              * <ul style="padding:5px;padding-left:16px;">
65696          * <li>editor - This editor</li>
65697              * <li>grid - This grid</li>
65698              * <li>record - The record being edited</li>
65699              * <li>field - The field name being edited</li>
65700              * <li>value - The value being set</li>
65701              * <li>originalValue - The original value for the field, before the edit.</li>
65702              * <li>row - The grid row index</li>
65703              * <li>column - The grid column index</li>
65704              * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
65705              * </ul>
65706              * @param {Object} e An edit event (see above for description)
65707              */
65708             "validateedit" : true
65709         });
65710     this.on("bodyscroll", this.stopEditing,  this);
65711     this.on(this.clicksToEdit == 1 ? "cellclick" : "celldblclick", this.onCellDblClick,  this);
65712 };
65713
65714 Roo.extend(Roo.grid.EditorGrid, Roo.grid.Grid, {
65715     /**
65716      * @cfg {Number} clicksToEdit
65717      * The number of clicks on a cell required to display the cell's editor (defaults to 2)
65718      */
65719     clicksToEdit: 2,
65720
65721     // private
65722     isEditor : true,
65723     // private
65724     trackMouseOver: false, // causes very odd FF errors
65725
65726     onCellDblClick : function(g, row, col){
65727         this.startEditing(row, col);
65728     },
65729
65730     onEditComplete : function(ed, value, startValue){
65731         this.editing = false;
65732         this.activeEditor = null;
65733         ed.un("specialkey", this.selModel.onEditorKey, this.selModel);
65734         var r = ed.record;
65735         var field = this.colModel.getDataIndex(ed.col);
65736         var e = {
65737             grid: this,
65738             record: r,
65739             field: field,
65740             originalValue: startValue,
65741             value: value,
65742             row: ed.row,
65743             column: ed.col,
65744             cancel:false,
65745             editor: ed
65746         };
65747         var cell = Roo.get(this.view.getCell(ed.row,ed.col));
65748         cell.show();
65749           
65750         if(String(value) !== String(startValue)){
65751             
65752             if(this.fireEvent("validateedit", e) !== false && !e.cancel){
65753                 r.set(field, e.value);
65754                 // if we are dealing with a combo box..
65755                 // then we also set the 'name' colum to be the displayField
65756                 if (ed.field.displayField && ed.field.name) {
65757                     r.set(ed.field.name, ed.field.el.dom.value);
65758                 }
65759                 
65760                 delete e.cancel; //?? why!!!
65761                 this.fireEvent("afteredit", e);
65762             }
65763         } else {
65764             this.fireEvent("afteredit", e); // always fire it!
65765         }
65766         this.view.focusCell(ed.row, ed.col);
65767     },
65768
65769     /**
65770      * Starts editing the specified for the specified row/column
65771      * @param {Number} rowIndex
65772      * @param {Number} colIndex
65773      */
65774     startEditing : function(row, col){
65775         this.stopEditing();
65776         if(this.colModel.isCellEditable(col, row)){
65777             this.view.ensureVisible(row, col, true);
65778           
65779             var r = this.dataSource.getAt(row);
65780             var field = this.colModel.getDataIndex(col);
65781             var cell = Roo.get(this.view.getCell(row,col));
65782             var e = {
65783                 grid: this,
65784                 record: r,
65785                 field: field,
65786                 value: r.data[field],
65787                 row: row,
65788                 column: col,
65789                 cancel:false 
65790             };
65791             if(this.fireEvent("beforeedit", e) !== false && !e.cancel){
65792                 this.editing = true;
65793                 var ed = this.colModel.getCellEditor(col, row);
65794                 
65795                 if (!ed) {
65796                     return;
65797                 }
65798                 if(!ed.rendered){
65799                     ed.render(ed.parentEl || document.body);
65800                 }
65801                 ed.field.reset();
65802                
65803                 cell.hide();
65804                 
65805                 (function(){ // complex but required for focus issues in safari, ie and opera
65806                     ed.row = row;
65807                     ed.col = col;
65808                     ed.record = r;
65809                     ed.on("complete",   this.onEditComplete,        this,       {single: true});
65810                     ed.on("specialkey", this.selModel.onEditorKey,  this.selModel);
65811                     this.activeEditor = ed;
65812                     var v = r.data[field];
65813                     ed.startEdit(this.view.getCell(row, col), v);
65814                     // combo's with 'displayField and name set
65815                     if (ed.field.displayField && ed.field.name) {
65816                         ed.field.el.dom.value = r.data[ed.field.name];
65817                     }
65818                     
65819                     
65820                 }).defer(50, this);
65821             }
65822         }
65823     },
65824         
65825     /**
65826      * Stops any active editing
65827      */
65828     stopEditing : function(){
65829         if(this.activeEditor){
65830             this.activeEditor.completeEdit();
65831         }
65832         this.activeEditor = null;
65833     },
65834         
65835          /**
65836      * Called to get grid's drag proxy text, by default returns this.ddText.
65837      * @return {String}
65838      */
65839     getDragDropText : function(){
65840         var count = this.selModel.getSelectedCell() ? 1 : 0;
65841         return String.format(this.ddText, count, count == 1 ? '' : 's');
65842     }
65843         
65844 });/*
65845  * Based on:
65846  * Ext JS Library 1.1.1
65847  * Copyright(c) 2006-2007, Ext JS, LLC.
65848  *
65849  * Originally Released Under LGPL - original licence link has changed is not relivant.
65850  *
65851  * Fork - LGPL
65852  * <script type="text/javascript">
65853  */
65854
65855 // private - not really -- you end up using it !
65856 // This is a support class used internally by the Grid components
65857
65858 /**
65859  * @class Roo.grid.GridEditor
65860  * @extends Roo.Editor
65861  * Class for creating and editable grid elements.
65862  * @param {Object} config any settings (must include field)
65863  */
65864 Roo.grid.GridEditor = function(field, config){
65865     if (!config && field.field) {
65866         config = field;
65867         field = Roo.factory(config.field, Roo.form);
65868     }
65869     Roo.grid.GridEditor.superclass.constructor.call(this, field, config);
65870     field.monitorTab = false;
65871 };
65872
65873 Roo.extend(Roo.grid.GridEditor, Roo.Editor, {
65874     
65875     /**
65876      * @cfg {Roo.form.Field} field Field to wrap (or xtyped)
65877      */
65878     
65879     alignment: "tl-tl",
65880     autoSize: "width",
65881     hideEl : false,
65882     cls: "x-small-editor x-grid-editor",
65883     shim:false,
65884     shadow:"frame"
65885 });/*
65886  * Based on:
65887  * Ext JS Library 1.1.1
65888  * Copyright(c) 2006-2007, Ext JS, LLC.
65889  *
65890  * Originally Released Under LGPL - original licence link has changed is not relivant.
65891  *
65892  * Fork - LGPL
65893  * <script type="text/javascript">
65894  */
65895   
65896
65897   
65898 Roo.grid.PropertyRecord = Roo.data.Record.create([
65899     {name:'name',type:'string'},  'value'
65900 ]);
65901
65902
65903 Roo.grid.PropertyStore = function(grid, source){
65904     this.grid = grid;
65905     this.store = new Roo.data.Store({
65906         recordType : Roo.grid.PropertyRecord
65907     });
65908     this.store.on('update', this.onUpdate,  this);
65909     if(source){
65910         this.setSource(source);
65911     }
65912     Roo.grid.PropertyStore.superclass.constructor.call(this);
65913 };
65914
65915
65916
65917 Roo.extend(Roo.grid.PropertyStore, Roo.util.Observable, {
65918     setSource : function(o){
65919         this.source = o;
65920         this.store.removeAll();
65921         var data = [];
65922         for(var k in o){
65923             if(this.isEditableValue(o[k])){
65924                 data.push(new Roo.grid.PropertyRecord({name: k, value: o[k]}, k));
65925             }
65926         }
65927         this.store.loadRecords({records: data}, {}, true);
65928     },
65929
65930     onUpdate : function(ds, record, type){
65931         if(type == Roo.data.Record.EDIT){
65932             var v = record.data['value'];
65933             var oldValue = record.modified['value'];
65934             if(this.grid.fireEvent('beforepropertychange', this.source, record.id, v, oldValue) !== false){
65935                 this.source[record.id] = v;
65936                 record.commit();
65937                 this.grid.fireEvent('propertychange', this.source, record.id, v, oldValue);
65938             }else{
65939                 record.reject();
65940             }
65941         }
65942     },
65943
65944     getProperty : function(row){
65945        return this.store.getAt(row);
65946     },
65947
65948     isEditableValue: function(val){
65949         if(val && val instanceof Date){
65950             return true;
65951         }else if(typeof val == 'object' || typeof val == 'function'){
65952             return false;
65953         }
65954         return true;
65955     },
65956
65957     setValue : function(prop, value){
65958         this.source[prop] = value;
65959         this.store.getById(prop).set('value', value);
65960     },
65961
65962     getSource : function(){
65963         return this.source;
65964     }
65965 });
65966
65967 Roo.grid.PropertyColumnModel = function(grid, store){
65968     this.grid = grid;
65969     var g = Roo.grid;
65970     g.PropertyColumnModel.superclass.constructor.call(this, [
65971         {header: this.nameText, sortable: true, dataIndex:'name', id: 'name'},
65972         {header: this.valueText, resizable:false, dataIndex: 'value', id: 'value'}
65973     ]);
65974     this.store = store;
65975     this.bselect = Roo.DomHelper.append(document.body, {
65976         tag: 'select', style:'display:none', cls: 'x-grid-editor', children: [
65977             {tag: 'option', value: 'true', html: 'true'},
65978             {tag: 'option', value: 'false', html: 'false'}
65979         ]
65980     });
65981     Roo.id(this.bselect);
65982     var f = Roo.form;
65983     this.editors = {
65984         'date' : new g.GridEditor(new f.DateField({selectOnFocus:true})),
65985         'string' : new g.GridEditor(new f.TextField({selectOnFocus:true})),
65986         'number' : new g.GridEditor(new f.NumberField({selectOnFocus:true, style:'text-align:left;'})),
65987         'int' : new g.GridEditor(new f.NumberField({selectOnFocus:true, allowDecimals:false, style:'text-align:left;'})),
65988         'boolean' : new g.GridEditor(new f.Field({el:this.bselect,selectOnFocus:true}))
65989     };
65990     this.renderCellDelegate = this.renderCell.createDelegate(this);
65991     this.renderPropDelegate = this.renderProp.createDelegate(this);
65992 };
65993
65994 Roo.extend(Roo.grid.PropertyColumnModel, Roo.grid.ColumnModel, {
65995     
65996     
65997     nameText : 'Name',
65998     valueText : 'Value',
65999     
66000     dateFormat : 'm/j/Y',
66001     
66002     
66003     renderDate : function(dateVal){
66004         return dateVal.dateFormat(this.dateFormat);
66005     },
66006
66007     renderBool : function(bVal){
66008         return bVal ? 'true' : 'false';
66009     },
66010
66011     isCellEditable : function(colIndex, rowIndex){
66012         return colIndex == 1;
66013     },
66014
66015     getRenderer : function(col){
66016         return col == 1 ?
66017             this.renderCellDelegate : this.renderPropDelegate;
66018     },
66019
66020     renderProp : function(v){
66021         return this.getPropertyName(v);
66022     },
66023
66024     renderCell : function(val){
66025         var rv = val;
66026         if(val instanceof Date){
66027             rv = this.renderDate(val);
66028         }else if(typeof val == 'boolean'){
66029             rv = this.renderBool(val);
66030         }
66031         return Roo.util.Format.htmlEncode(rv);
66032     },
66033
66034     getPropertyName : function(name){
66035         var pn = this.grid.propertyNames;
66036         return pn && pn[name] ? pn[name] : name;
66037     },
66038
66039     getCellEditor : function(colIndex, rowIndex){
66040         var p = this.store.getProperty(rowIndex);
66041         var n = p.data['name'], val = p.data['value'];
66042         
66043         if(typeof(this.grid.customEditors[n]) == 'string'){
66044             return this.editors[this.grid.customEditors[n]];
66045         }
66046         if(typeof(this.grid.customEditors[n]) != 'undefined'){
66047             return this.grid.customEditors[n];
66048         }
66049         if(val instanceof Date){
66050             return this.editors['date'];
66051         }else if(typeof val == 'number'){
66052             return this.editors['number'];
66053         }else if(typeof val == 'boolean'){
66054             return this.editors['boolean'];
66055         }else{
66056             return this.editors['string'];
66057         }
66058     }
66059 });
66060
66061 /**
66062  * @class Roo.grid.PropertyGrid
66063  * @extends Roo.grid.EditorGrid
66064  * This class represents the  interface of a component based property grid control.
66065  * <br><br>Usage:<pre><code>
66066  var grid = new Roo.grid.PropertyGrid("my-container-id", {
66067       
66068  });
66069  // set any options
66070  grid.render();
66071  * </code></pre>
66072   
66073  * @constructor
66074  * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered -
66075  * The container MUST have some type of size defined for the grid to fill. The container will be
66076  * automatically set to position relative if it isn't already.
66077  * @param {Object} config A config object that sets properties on this grid.
66078  */
66079 Roo.grid.PropertyGrid = function(container, config){
66080     config = config || {};
66081     var store = new Roo.grid.PropertyStore(this);
66082     this.store = store;
66083     var cm = new Roo.grid.PropertyColumnModel(this, store);
66084     store.store.sort('name', 'ASC');
66085     Roo.grid.PropertyGrid.superclass.constructor.call(this, container, Roo.apply({
66086         ds: store.store,
66087         cm: cm,
66088         enableColLock:false,
66089         enableColumnMove:false,
66090         stripeRows:false,
66091         trackMouseOver: false,
66092         clicksToEdit:1
66093     }, config));
66094     this.getGridEl().addClass('x-props-grid');
66095     this.lastEditRow = null;
66096     this.on('columnresize', this.onColumnResize, this);
66097     this.addEvents({
66098          /**
66099              * @event beforepropertychange
66100              * Fires before a property changes (return false to stop?)
66101              * @param {Roo.grid.PropertyGrid} grid property grid? (check could be store)
66102              * @param {String} id Record Id
66103              * @param {String} newval New Value
66104          * @param {String} oldval Old Value
66105              */
66106         "beforepropertychange": true,
66107         /**
66108              * @event propertychange
66109              * Fires after a property changes
66110              * @param {Roo.grid.PropertyGrid} grid property grid? (check could be store)
66111              * @param {String} id Record Id
66112              * @param {String} newval New Value
66113          * @param {String} oldval Old Value
66114              */
66115         "propertychange": true
66116     });
66117     this.customEditors = this.customEditors || {};
66118 };
66119 Roo.extend(Roo.grid.PropertyGrid, Roo.grid.EditorGrid, {
66120     
66121      /**
66122      * @cfg {Object} customEditors map of colnames=> custom editors.
66123      * the custom editor can be one of the standard ones (date|string|number|int|boolean), or a
66124      * grid editor eg. Roo.grid.GridEditor(new Roo.form.TextArea({selectOnFocus:true})),
66125      * false disables editing of the field.
66126          */
66127     
66128       /**
66129      * @cfg {Object} propertyNames map of property Names to their displayed value
66130          */
66131     
66132     render : function(){
66133         Roo.grid.PropertyGrid.superclass.render.call(this);
66134         this.autoSize.defer(100, this);
66135     },
66136
66137     autoSize : function(){
66138         Roo.grid.PropertyGrid.superclass.autoSize.call(this);
66139         if(this.view){
66140             this.view.fitColumns();
66141         }
66142     },
66143
66144     onColumnResize : function(){
66145         this.colModel.setColumnWidth(1, this.container.getWidth(true)-this.colModel.getColumnWidth(0));
66146         this.autoSize();
66147     },
66148     /**
66149      * Sets the data for the Grid
66150      * accepts a Key => Value object of all the elements avaiable.
66151      * @param {Object} data  to appear in grid.
66152      */
66153     setSource : function(source){
66154         this.store.setSource(source);
66155         //this.autoSize();
66156     },
66157     /**
66158      * Gets all the data from the grid.
66159      * @return {Object} data  data stored in grid
66160      */
66161     getSource : function(){
66162         return this.store.getSource();
66163     }
66164 });/*
66165   
66166  * Licence LGPL
66167  
66168  */
66169  
66170 /**
66171  * @class Roo.grid.Calendar
66172  * @extends Roo.grid.Grid
66173  * This class extends the Grid to provide a calendar widget
66174  * <br><br>Usage:<pre><code>
66175  var grid = new Roo.grid.Calendar("my-container-id", {
66176      ds: myDataStore,
66177      cm: myColModel,
66178      selModel: mySelectionModel,
66179      autoSizeColumns: true,
66180      monitorWindowResize: false,
66181      trackMouseOver: true
66182      eventstore : real data store..
66183  });
66184  // set any options
66185  grid.render();
66186   
66187   * @constructor
66188  * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered -
66189  * The container MUST have some type of size defined for the grid to fill. The container will be
66190  * automatically set to position relative if it isn't already.
66191  * @param {Object} config A config object that sets properties on this grid.
66192  */
66193 Roo.grid.Calendar = function(container, config){
66194         // initialize the container
66195         this.container = Roo.get(container);
66196         this.container.update("");
66197         this.container.setStyle("overflow", "hidden");
66198     this.container.addClass('x-grid-container');
66199
66200     this.id = this.container.id;
66201
66202     Roo.apply(this, config);
66203     // check and correct shorthanded configs
66204     
66205     var rows = [];
66206     var d =1;
66207     for (var r = 0;r < 6;r++) {
66208         
66209         rows[r]=[];
66210         for (var c =0;c < 7;c++) {
66211             rows[r][c]= '';
66212         }
66213     }
66214     if (this.eventStore) {
66215         this.eventStore= Roo.factory(this.eventStore, Roo.data);
66216         this.eventStore.on('load',this.onLoad, this);
66217         this.eventStore.on('beforeload',this.clearEvents, this);
66218          
66219     }
66220     
66221     this.dataSource = new Roo.data.Store({
66222             proxy: new Roo.data.MemoryProxy(rows),
66223             reader: new Roo.data.ArrayReader({}, [
66224                    'weekday0', 'weekday1', 'weekday2', 'weekday3', 'weekday4', 'weekday5', 'weekday6' ])
66225     });
66226
66227     this.dataSource.load();
66228     this.ds = this.dataSource;
66229     this.ds.xmodule = this.xmodule || false;
66230     
66231     
66232     var cellRender = function(v,x,r)
66233     {
66234         return String.format(
66235             '<div class="fc-day  fc-widget-content"><div>' +
66236                 '<div class="fc-event-container"></div>' +
66237                 '<div class="fc-day-number">{0}</div>'+
66238                 
66239                 '<div class="fc-day-content"><div style="position:relative"></div></div>' +
66240             '</div></div>', v);
66241     
66242     }
66243     
66244     
66245     this.colModel = new Roo.grid.ColumnModel( [
66246         {
66247             xtype: 'ColumnModel',
66248             xns: Roo.grid,
66249             dataIndex : 'weekday0',
66250             header : 'Sunday',
66251             renderer : cellRender
66252         },
66253         {
66254             xtype: 'ColumnModel',
66255             xns: Roo.grid,
66256             dataIndex : 'weekday1',
66257             header : 'Monday',
66258             renderer : cellRender
66259         },
66260         {
66261             xtype: 'ColumnModel',
66262             xns: Roo.grid,
66263             dataIndex : 'weekday2',
66264             header : 'Tuesday',
66265             renderer : cellRender
66266         },
66267         {
66268             xtype: 'ColumnModel',
66269             xns: Roo.grid,
66270             dataIndex : 'weekday3',
66271             header : 'Wednesday',
66272             renderer : cellRender
66273         },
66274         {
66275             xtype: 'ColumnModel',
66276             xns: Roo.grid,
66277             dataIndex : 'weekday4',
66278             header : 'Thursday',
66279             renderer : cellRender
66280         },
66281         {
66282             xtype: 'ColumnModel',
66283             xns: Roo.grid,
66284             dataIndex : 'weekday5',
66285             header : 'Friday',
66286             renderer : cellRender
66287         },
66288         {
66289             xtype: 'ColumnModel',
66290             xns: Roo.grid,
66291             dataIndex : 'weekday6',
66292             header : 'Saturday',
66293             renderer : cellRender
66294         }
66295     ]);
66296     this.cm = this.colModel;
66297     this.cm.xmodule = this.xmodule || false;
66298  
66299         
66300           
66301     //this.selModel = new Roo.grid.CellSelectionModel();
66302     //this.sm = this.selModel;
66303     //this.selModel.init(this);
66304     
66305     
66306     if(this.width){
66307         this.container.setWidth(this.width);
66308     }
66309
66310     if(this.height){
66311         this.container.setHeight(this.height);
66312     }
66313     /** @private */
66314         this.addEvents({
66315         // raw events
66316         /**
66317          * @event click
66318          * The raw click event for the entire grid.
66319          * @param {Roo.EventObject} e
66320          */
66321         "click" : true,
66322         /**
66323          * @event dblclick
66324          * The raw dblclick event for the entire grid.
66325          * @param {Roo.EventObject} e
66326          */
66327         "dblclick" : true,
66328         /**
66329          * @event contextmenu
66330          * The raw contextmenu event for the entire grid.
66331          * @param {Roo.EventObject} e
66332          */
66333         "contextmenu" : true,
66334         /**
66335          * @event mousedown
66336          * The raw mousedown event for the entire grid.
66337          * @param {Roo.EventObject} e
66338          */
66339         "mousedown" : true,
66340         /**
66341          * @event mouseup
66342          * The raw mouseup event for the entire grid.
66343          * @param {Roo.EventObject} e
66344          */
66345         "mouseup" : true,
66346         /**
66347          * @event mouseover
66348          * The raw mouseover event for the entire grid.
66349          * @param {Roo.EventObject} e
66350          */
66351         "mouseover" : true,
66352         /**
66353          * @event mouseout
66354          * The raw mouseout event for the entire grid.
66355          * @param {Roo.EventObject} e
66356          */
66357         "mouseout" : true,
66358         /**
66359          * @event keypress
66360          * The raw keypress event for the entire grid.
66361          * @param {Roo.EventObject} e
66362          */
66363         "keypress" : true,
66364         /**
66365          * @event keydown
66366          * The raw keydown event for the entire grid.
66367          * @param {Roo.EventObject} e
66368          */
66369         "keydown" : true,
66370
66371         // custom events
66372
66373         /**
66374          * @event cellclick
66375          * Fires when a cell is clicked
66376          * @param {Grid} this
66377          * @param {Number} rowIndex
66378          * @param {Number} columnIndex
66379          * @param {Roo.EventObject} e
66380          */
66381         "cellclick" : true,
66382         /**
66383          * @event celldblclick
66384          * Fires when a cell is double clicked
66385          * @param {Grid} this
66386          * @param {Number} rowIndex
66387          * @param {Number} columnIndex
66388          * @param {Roo.EventObject} e
66389          */
66390         "celldblclick" : true,
66391         /**
66392          * @event rowclick
66393          * Fires when a row is clicked
66394          * @param {Grid} this
66395          * @param {Number} rowIndex
66396          * @param {Roo.EventObject} e
66397          */
66398         "rowclick" : true,
66399         /**
66400          * @event rowdblclick
66401          * Fires when a row is double clicked
66402          * @param {Grid} this
66403          * @param {Number} rowIndex
66404          * @param {Roo.EventObject} e
66405          */
66406         "rowdblclick" : true,
66407         /**
66408          * @event headerclick
66409          * Fires when a header is clicked
66410          * @param {Grid} this
66411          * @param {Number} columnIndex
66412          * @param {Roo.EventObject} e
66413          */
66414         "headerclick" : true,
66415         /**
66416          * @event headerdblclick
66417          * Fires when a header cell is double clicked
66418          * @param {Grid} this
66419          * @param {Number} columnIndex
66420          * @param {Roo.EventObject} e
66421          */
66422         "headerdblclick" : true,
66423         /**
66424          * @event rowcontextmenu
66425          * Fires when a row is right clicked
66426          * @param {Grid} this
66427          * @param {Number} rowIndex
66428          * @param {Roo.EventObject} e
66429          */
66430         "rowcontextmenu" : true,
66431         /**
66432          * @event cellcontextmenu
66433          * Fires when a cell is right clicked
66434          * @param {Grid} this
66435          * @param {Number} rowIndex
66436          * @param {Number} cellIndex
66437          * @param {Roo.EventObject} e
66438          */
66439          "cellcontextmenu" : true,
66440         /**
66441          * @event headercontextmenu
66442          * Fires when a header is right clicked
66443          * @param {Grid} this
66444          * @param {Number} columnIndex
66445          * @param {Roo.EventObject} e
66446          */
66447         "headercontextmenu" : true,
66448         /**
66449          * @event bodyscroll
66450          * Fires when the body element is scrolled
66451          * @param {Number} scrollLeft
66452          * @param {Number} scrollTop
66453          */
66454         "bodyscroll" : true,
66455         /**
66456          * @event columnresize
66457          * Fires when the user resizes a column
66458          * @param {Number} columnIndex
66459          * @param {Number} newSize
66460          */
66461         "columnresize" : true,
66462         /**
66463          * @event columnmove
66464          * Fires when the user moves a column
66465          * @param {Number} oldIndex
66466          * @param {Number} newIndex
66467          */
66468         "columnmove" : true,
66469         /**
66470          * @event startdrag
66471          * Fires when row(s) start being dragged
66472          * @param {Grid} this
66473          * @param {Roo.GridDD} dd The drag drop object
66474          * @param {event} e The raw browser event
66475          */
66476         "startdrag" : true,
66477         /**
66478          * @event enddrag
66479          * Fires when a drag operation is complete
66480          * @param {Grid} this
66481          * @param {Roo.GridDD} dd The drag drop object
66482          * @param {event} e The raw browser event
66483          */
66484         "enddrag" : true,
66485         /**
66486          * @event dragdrop
66487          * Fires when dragged row(s) are dropped on a valid DD target
66488          * @param {Grid} this
66489          * @param {Roo.GridDD} dd The drag drop object
66490          * @param {String} targetId The target drag drop object
66491          * @param {event} e The raw browser event
66492          */
66493         "dragdrop" : true,
66494         /**
66495          * @event dragover
66496          * Fires while row(s) are being dragged. "targetId" is the id of the Yahoo.util.DD object the selected rows are being dragged over.
66497          * @param {Grid} this
66498          * @param {Roo.GridDD} dd The drag drop object
66499          * @param {String} targetId The target drag drop object
66500          * @param {event} e The raw browser event
66501          */
66502         "dragover" : true,
66503         /**
66504          * @event dragenter
66505          *  Fires when the dragged row(s) first cross another DD target while being dragged
66506          * @param {Grid} this
66507          * @param {Roo.GridDD} dd The drag drop object
66508          * @param {String} targetId The target drag drop object
66509          * @param {event} e The raw browser event
66510          */
66511         "dragenter" : true,
66512         /**
66513          * @event dragout
66514          * Fires when the dragged row(s) leave another DD target while being dragged
66515          * @param {Grid} this
66516          * @param {Roo.GridDD} dd The drag drop object
66517          * @param {String} targetId The target drag drop object
66518          * @param {event} e The raw browser event
66519          */
66520         "dragout" : true,
66521         /**
66522          * @event rowclass
66523          * Fires when a row is rendered, so you can change add a style to it.
66524          * @param {GridView} gridview   The grid view
66525          * @param {Object} rowcfg   contains record  rowIndex and rowClass - set rowClass to add a style.
66526          */
66527         'rowclass' : true,
66528
66529         /**
66530          * @event render
66531          * Fires when the grid is rendered
66532          * @param {Grid} grid
66533          */
66534         'render' : true,
66535             /**
66536              * @event select
66537              * Fires when a date is selected
66538              * @param {DatePicker} this
66539              * @param {Date} date The selected date
66540              */
66541         'select': true,
66542         /**
66543              * @event monthchange
66544              * Fires when the displayed month changes 
66545              * @param {DatePicker} this
66546              * @param {Date} date The selected month
66547              */
66548         'monthchange': true,
66549         /**
66550              * @event evententer
66551              * Fires when mouse over an event
66552              * @param {Calendar} this
66553              * @param {event} Event
66554              */
66555         'evententer': true,
66556         /**
66557              * @event eventleave
66558              * Fires when the mouse leaves an
66559              * @param {Calendar} this
66560              * @param {event}
66561              */
66562         'eventleave': true,
66563         /**
66564              * @event eventclick
66565              * Fires when the mouse click an
66566              * @param {Calendar} this
66567              * @param {event}
66568              */
66569         'eventclick': true,
66570         /**
66571              * @event eventrender
66572              * Fires before each cell is rendered, so you can modify the contents, like cls / title / qtip
66573              * @param {Calendar} this
66574              * @param {data} data to be modified
66575              */
66576         'eventrender': true
66577         
66578     });
66579
66580     Roo.grid.Grid.superclass.constructor.call(this);
66581     this.on('render', function() {
66582         this.view.el.addClass('x-grid-cal'); 
66583         
66584         (function() { this.setDate(new Date()); }).defer(100,this); //default today..
66585
66586     },this);
66587     
66588     if (!Roo.grid.Calendar.style) {
66589         Roo.grid.Calendar.style = Roo.util.CSS.createStyleSheet({
66590             
66591             
66592             '.x-grid-cal .x-grid-col' :  {
66593                 height: 'auto !important',
66594                 'vertical-align': 'top'
66595             },
66596             '.x-grid-cal  .fc-event-hori' : {
66597                 height: '14px'
66598             }
66599              
66600             
66601         }, Roo.id());
66602     }
66603
66604     
66605     
66606 };
66607 Roo.extend(Roo.grid.Calendar, Roo.grid.Grid, {
66608     /**
66609      * @cfg {Store} eventStore The store that loads events.
66610      */
66611     eventStore : 25,
66612
66613      
66614     activeDate : false,
66615     startDay : 0,
66616     autoWidth : true,
66617     monitorWindowResize : false,
66618
66619     
66620     resizeColumns : function() {
66621         var col = (this.view.el.getWidth() / 7) - 3;
66622         // loop through cols, and setWidth
66623         for(var i =0 ; i < 7 ; i++){
66624             this.cm.setColumnWidth(i, col);
66625         }
66626     },
66627      setDate :function(date) {
66628         
66629         Roo.log('setDate?');
66630         
66631         this.resizeColumns();
66632         var vd = this.activeDate;
66633         this.activeDate = date;
66634 //        if(vd && this.el){
66635 //            var t = date.getTime();
66636 //            if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
66637 //                Roo.log('using add remove');
66638 //                
66639 //                this.fireEvent('monthchange', this, date);
66640 //                
66641 //                this.cells.removeClass("fc-state-highlight");
66642 //                this.cells.each(function(c){
66643 //                   if(c.dateValue == t){
66644 //                       c.addClass("fc-state-highlight");
66645 //                       setTimeout(function(){
66646 //                            try{c.dom.firstChild.focus();}catch(e){}
66647 //                       }, 50);
66648 //                       return false;
66649 //                   }
66650 //                   return true;
66651 //                });
66652 //                return;
66653 //            }
66654 //        }
66655         
66656         var days = date.getDaysInMonth();
66657         
66658         var firstOfMonth = date.getFirstDateOfMonth();
66659         var startingPos = firstOfMonth.getDay()-this.startDay;
66660         
66661         if(startingPos < this.startDay){
66662             startingPos += 7;
66663         }
66664         
66665         var pm = date.add(Date.MONTH, -1);
66666         var prevStart = pm.getDaysInMonth()-startingPos;
66667 //        
66668         
66669         
66670         this.cells = this.view.el.select('.x-grid-row .x-grid-col',true);
66671         
66672         this.textNodes = this.view.el.query('.x-grid-row .x-grid-col .x-grid-cell-text');
66673         //this.cells.addClassOnOver('fc-state-hover');
66674         
66675         var cells = this.cells.elements;
66676         var textEls = this.textNodes;
66677         
66678         //Roo.each(cells, function(cell){
66679         //    cell.removeClass([ 'fc-past', 'fc-other-month', 'fc-future', 'fc-state-highlight', 'fc-state-disabled']);
66680         //});
66681         
66682         days += startingPos;
66683
66684         // convert everything to numbers so it's fast
66685         var day = 86400000;
66686         var d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime();
66687         //Roo.log(d);
66688         //Roo.log(pm);
66689         //Roo.log(prevStart);
66690         
66691         var today = new Date().clearTime().getTime();
66692         var sel = date.clearTime().getTime();
66693         var min = this.minDate ? this.minDate.clearTime() : Number.NEGATIVE_INFINITY;
66694         var max = this.maxDate ? this.maxDate.clearTime() : Number.POSITIVE_INFINITY;
66695         var ddMatch = this.disabledDatesRE;
66696         var ddText = this.disabledDatesText;
66697         var ddays = this.disabledDays ? this.disabledDays.join("") : false;
66698         var ddaysText = this.disabledDaysText;
66699         var format = this.format;
66700         
66701         var setCellClass = function(cal, cell){
66702             
66703             //Roo.log('set Cell Class');
66704             cell.title = "";
66705             var t = d.getTime();
66706             
66707             //Roo.log(d);
66708             
66709             
66710             cell.dateValue = t;
66711             if(t == today){
66712                 cell.className += " fc-today";
66713                 cell.className += " fc-state-highlight";
66714                 cell.title = cal.todayText;
66715             }
66716             if(t == sel){
66717                 // disable highlight in other month..
66718                 cell.className += " fc-state-highlight";
66719                 
66720             }
66721             // disabling
66722             if(t < min) {
66723                 //cell.className = " fc-state-disabled";
66724                 cell.title = cal.minText;
66725                 return;
66726             }
66727             if(t > max) {
66728                 //cell.className = " fc-state-disabled";
66729                 cell.title = cal.maxText;
66730                 return;
66731             }
66732             if(ddays){
66733                 if(ddays.indexOf(d.getDay()) != -1){
66734                     // cell.title = ddaysText;
66735                    // cell.className = " fc-state-disabled";
66736                 }
66737             }
66738             if(ddMatch && format){
66739                 var fvalue = d.dateFormat(format);
66740                 if(ddMatch.test(fvalue)){
66741                     cell.title = ddText.replace("%0", fvalue);
66742                    cell.className = " fc-state-disabled";
66743                 }
66744             }
66745             
66746             if (!cell.initialClassName) {
66747                 cell.initialClassName = cell.dom.className;
66748             }
66749             
66750             cell.dom.className = cell.initialClassName  + ' ' +  cell.className;
66751         };
66752
66753         var i = 0;
66754         
66755         for(; i < startingPos; i++) {
66756             cells[i].dayName =  (++prevStart);
66757             Roo.log(textEls[i]);
66758             d.setDate(d.getDate()+1);
66759             
66760             //cells[i].className = "fc-past fc-other-month";
66761             setCellClass(this, cells[i]);
66762         }
66763         
66764         var intDay = 0;
66765         
66766         for(; i < days; i++){
66767             intDay = i - startingPos + 1;
66768             cells[i].dayName =  (intDay);
66769             d.setDate(d.getDate()+1);
66770             
66771             cells[i].className = ''; // "x-date-active";
66772             setCellClass(this, cells[i]);
66773         }
66774         var extraDays = 0;
66775         
66776         for(; i < 42; i++) {
66777             //textEls[i].innerHTML = (++extraDays);
66778             
66779             d.setDate(d.getDate()+1);
66780             cells[i].dayName = (++extraDays);
66781             cells[i].className = "fc-future fc-other-month";
66782             setCellClass(this, cells[i]);
66783         }
66784         
66785         //this.el.select('.fc-header-title h2',true).update(Date.monthNames[date.getMonth()] + " " + date.getFullYear());
66786         
66787         var totalRows = Math.ceil((date.getDaysInMonth() + date.getFirstDateOfMonth().getDay()) / 7);
66788         
66789         // this will cause all the cells to mis
66790         var rows= [];
66791         var i =0;
66792         for (var r = 0;r < 6;r++) {
66793             for (var c =0;c < 7;c++) {
66794                 this.ds.getAt(r).set('weekday' + c ,cells[i++].dayName );
66795             }    
66796         }
66797         
66798         this.cells = this.view.el.select('.x-grid-row .x-grid-col',true);
66799         for(i=0;i<cells.length;i++) {
66800             
66801             this.cells.elements[i].dayName = cells[i].dayName ;
66802             this.cells.elements[i].className = cells[i].className;
66803             this.cells.elements[i].initialClassName = cells[i].initialClassName ;
66804             this.cells.elements[i].title = cells[i].title ;
66805             this.cells.elements[i].dateValue = cells[i].dateValue ;
66806         }
66807         
66808         
66809         
66810         
66811         //this.el.select('tr.fc-week.fc-prev-last',true).removeClass('fc-last');
66812         //this.el.select('tr.fc-week.fc-next-last',true).addClass('fc-last').show();
66813         
66814         ////if(totalRows != 6){
66815             //this.el.select('tr.fc-week.fc-last',true).removeClass('fc-last').addClass('fc-next-last').hide();
66816            // this.el.select('tr.fc-week.fc-prev-last',true).addClass('fc-last');
66817        // }
66818         
66819         this.fireEvent('monthchange', this, date);
66820         
66821         
66822     },
66823  /**
66824      * Returns the grid's SelectionModel.
66825      * @return {SelectionModel}
66826      */
66827     getSelectionModel : function(){
66828         if(!this.selModel){
66829             this.selModel = new Roo.grid.CellSelectionModel();
66830         }
66831         return this.selModel;
66832     },
66833
66834     load: function() {
66835         this.eventStore.load()
66836         
66837         
66838         
66839     },
66840     
66841     findCell : function(dt) {
66842         dt = dt.clearTime().getTime();
66843         var ret = false;
66844         this.cells.each(function(c){
66845             //Roo.log("check " +c.dateValue + '?=' + dt);
66846             if(c.dateValue == dt){
66847                 ret = c;
66848                 return false;
66849             }
66850             return true;
66851         });
66852         
66853         return ret;
66854     },
66855     
66856     findCells : function(rec) {
66857         var s = rec.data.start_dt.clone().clearTime().getTime();
66858        // Roo.log(s);
66859         var e= rec.data.end_dt.clone().clearTime().getTime();
66860        // Roo.log(e);
66861         var ret = [];
66862         this.cells.each(function(c){
66863              ////Roo.log("check " +c.dateValue + '<' + e + ' > ' + s);
66864             
66865             if(c.dateValue > e){
66866                 return ;
66867             }
66868             if(c.dateValue < s){
66869                 return ;
66870             }
66871             ret.push(c);
66872         });
66873         
66874         return ret;    
66875     },
66876     
66877     findBestRow: function(cells)
66878     {
66879         var ret = 0;
66880         
66881         for (var i =0 ; i < cells.length;i++) {
66882             ret  = Math.max(cells[i].rows || 0,ret);
66883         }
66884         return ret;
66885         
66886     },
66887     
66888     
66889     addItem : function(rec)
66890     {
66891         // look for vertical location slot in
66892         var cells = this.findCells(rec);
66893         
66894         rec.row = this.findBestRow(cells);
66895         
66896         // work out the location.
66897         
66898         var crow = false;
66899         var rows = [];
66900         for(var i =0; i < cells.length; i++) {
66901             if (!crow) {
66902                 crow = {
66903                     start : cells[i],
66904                     end :  cells[i]
66905                 };
66906                 continue;
66907             }
66908             if (crow.start.getY() == cells[i].getY()) {
66909                 // on same row.
66910                 crow.end = cells[i];
66911                 continue;
66912             }
66913             // different row.
66914             rows.push(crow);
66915             crow = {
66916                 start: cells[i],
66917                 end : cells[i]
66918             };
66919             
66920         }
66921         
66922         rows.push(crow);
66923         rec.els = [];
66924         rec.rows = rows;
66925         rec.cells = cells;
66926         for (var i = 0; i < cells.length;i++) {
66927             cells[i].rows = Math.max(cells[i].rows || 0 , rec.row + 1 );
66928             
66929         }
66930         
66931         
66932     },
66933     
66934     clearEvents: function() {
66935         
66936         if (!this.eventStore.getCount()) {
66937             return;
66938         }
66939         // reset number of rows in cells.
66940         Roo.each(this.cells.elements, function(c){
66941             c.rows = 0;
66942         });
66943         
66944         this.eventStore.each(function(e) {
66945             this.clearEvent(e);
66946         },this);
66947         
66948     },
66949     
66950     clearEvent : function(ev)
66951     {
66952         if (ev.els) {
66953             Roo.each(ev.els, function(el) {
66954                 el.un('mouseenter' ,this.onEventEnter, this);
66955                 el.un('mouseleave' ,this.onEventLeave, this);
66956                 el.remove();
66957             },this);
66958             ev.els = [];
66959         }
66960     },
66961     
66962     
66963     renderEvent : function(ev,ctr) {
66964         if (!ctr) {
66965              ctr = this.view.el.select('.fc-event-container',true).first();
66966         }
66967         
66968          
66969         this.clearEvent(ev);
66970             //code
66971        
66972         
66973         
66974         ev.els = [];
66975         var cells = ev.cells;
66976         var rows = ev.rows;
66977         this.fireEvent('eventrender', this, ev);
66978         
66979         for(var i =0; i < rows.length; i++) {
66980             
66981             cls = '';
66982             if (i == 0) {
66983                 cls += ' fc-event-start';
66984             }
66985             if ((i+1) == rows.length) {
66986                 cls += ' fc-event-end';
66987             }
66988             
66989             //Roo.log(ev.data);
66990             // how many rows should it span..
66991             var cg = this.eventTmpl.append(ctr,Roo.apply({
66992                 fccls : cls
66993                 
66994             }, ev.data) , true);
66995             
66996             
66997             cg.on('mouseenter' ,this.onEventEnter, this, ev);
66998             cg.on('mouseleave' ,this.onEventLeave, this, ev);
66999             cg.on('click', this.onEventClick, this, ev);
67000             
67001             ev.els.push(cg);
67002             
67003             var sbox = rows[i].start.select('.fc-day-content',true).first().getBox();
67004             var ebox = rows[i].end.select('.fc-day-content',true).first().getBox();
67005             //Roo.log(cg);
67006              
67007             cg.setXY([sbox.x +2, sbox.y +(ev.row * 20)]);    
67008             cg.setWidth(ebox.right - sbox.x -2);
67009         }
67010     },
67011     
67012     renderEvents: function()
67013     {   
67014         // first make sure there is enough space..
67015         
67016         if (!this.eventTmpl) {
67017             this.eventTmpl = new Roo.Template(
67018                 '<div class="roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable {fccls} {cls}"  style="position: absolute" unselectable="on">' +
67019                     '<div class="fc-event-inner">' +
67020                         '<span class="fc-event-time">{time}</span>' +
67021                         '<span class="fc-event-title" qtip="{qtip}">{title}</span>' +
67022                     '</div>' +
67023                     '<div class="ui-resizable-heandle ui-resizable-e">&nbsp;&nbsp;&nbsp;</div>' +
67024                 '</div>'
67025             );
67026                 
67027         }
67028                
67029         
67030         
67031         this.cells.each(function(c) {
67032             //Roo.log(c.select('.fc-day-content div',true).first());
67033             c.select('.fc-day-content div',true).first().setHeight(Math.max(34, (c.rows || 1) * 20));
67034         });
67035         
67036         var ctr = this.view.el.select('.fc-event-container',true).first();
67037         
67038         var cls;
67039         this.eventStore.each(function(ev){
67040             
67041             this.renderEvent(ev);
67042              
67043              
67044         }, this);
67045         this.view.layout();
67046         
67047     },
67048     
67049     onEventEnter: function (e, el,event,d) {
67050         this.fireEvent('evententer', this, el, event);
67051     },
67052     
67053     onEventLeave: function (e, el,event,d) {
67054         this.fireEvent('eventleave', this, el, event);
67055     },
67056     
67057     onEventClick: function (e, el,event,d) {
67058         this.fireEvent('eventclick', this, el, event);
67059     },
67060     
67061     onMonthChange: function () {
67062         this.store.load();
67063     },
67064     
67065     onLoad: function () {
67066         
67067         //Roo.log('calendar onload');
67068 //         
67069         if(this.eventStore.getCount() > 0){
67070             
67071            
67072             
67073             this.eventStore.each(function(d){
67074                 
67075                 
67076                 // FIXME..
67077                 var add =   d.data;
67078                 if (typeof(add.end_dt) == 'undefined')  {
67079                     Roo.log("Missing End time in calendar data: ");
67080                     Roo.log(d);
67081                     return;
67082                 }
67083                 if (typeof(add.start_dt) == 'undefined')  {
67084                     Roo.log("Missing Start time in calendar data: ");
67085                     Roo.log(d);
67086                     return;
67087                 }
67088                 add.start_dt = typeof(add.start_dt) == 'string' ? Date.parseDate(add.start_dt,'Y-m-d H:i:s') : add.start_dt,
67089                 add.end_dt = typeof(add.end_dt) == 'string' ? Date.parseDate(add.end_dt,'Y-m-d H:i:s') : add.end_dt,
67090                 add.id = add.id || d.id;
67091                 add.title = add.title || '??';
67092                 
67093                 this.addItem(d);
67094                 
67095              
67096             },this);
67097         }
67098         
67099         this.renderEvents();
67100     }
67101     
67102
67103 });
67104 /*
67105  grid : {
67106                 xtype: 'Grid',
67107                 xns: Roo.grid,
67108                 listeners : {
67109                     render : function ()
67110                     {
67111                         _this.grid = this;
67112                         
67113                         if (!this.view.el.hasClass('course-timesheet')) {
67114                             this.view.el.addClass('course-timesheet');
67115                         }
67116                         if (this.tsStyle) {
67117                             this.ds.load({});
67118                             return; 
67119                         }
67120                         Roo.log('width');
67121                         Roo.log(_this.grid.view.el.getWidth());
67122                         
67123                         
67124                         this.tsStyle =  Roo.util.CSS.createStyleSheet({
67125                             '.course-timesheet .x-grid-row' : {
67126                                 height: '80px'
67127                             },
67128                             '.x-grid-row td' : {
67129                                 'vertical-align' : 0
67130                             },
67131                             '.course-edit-link' : {
67132                                 'color' : 'blue',
67133                                 'text-overflow' : 'ellipsis',
67134                                 'overflow' : 'hidden',
67135                                 'white-space' : 'nowrap',
67136                                 'cursor' : 'pointer'
67137                             },
67138                             '.sub-link' : {
67139                                 'color' : 'green'
67140                             },
67141                             '.de-act-sup-link' : {
67142                                 'color' : 'purple',
67143                                 'text-decoration' : 'line-through'
67144                             },
67145                             '.de-act-link' : {
67146                                 'color' : 'red',
67147                                 'text-decoration' : 'line-through'
67148                             },
67149                             '.course-timesheet .course-highlight' : {
67150                                 'border-top-style': 'dashed !important',
67151                                 'border-bottom-bottom': 'dashed !important'
67152                             },
67153                             '.course-timesheet .course-item' : {
67154                                 'font-family'   : 'tahoma, arial, helvetica',
67155                                 'font-size'     : '11px',
67156                                 'overflow'      : 'hidden',
67157                                 'padding-left'  : '10px',
67158                                 'padding-right' : '10px',
67159                                 'padding-top' : '10px' 
67160                             }
67161                             
67162                         }, Roo.id());
67163                                 this.ds.load({});
67164                     }
67165                 },
67166                 autoWidth : true,
67167                 monitorWindowResize : false,
67168                 cellrenderer : function(v,x,r)
67169                 {
67170                     return v;
67171                 },
67172                 sm : {
67173                     xtype: 'CellSelectionModel',
67174                     xns: Roo.grid
67175                 },
67176                 dataSource : {
67177                     xtype: 'Store',
67178                     xns: Roo.data,
67179                     listeners : {
67180                         beforeload : function (_self, options)
67181                         {
67182                             options.params = options.params || {};
67183                             options.params._month = _this.monthField.getValue();
67184                             options.params.limit = 9999;
67185                             options.params['sort'] = 'when_dt';    
67186                             options.params['dir'] = 'ASC';    
67187                             this.proxy.loadResponse = this.loadResponse;
67188                             Roo.log("load?");
67189                             //this.addColumns();
67190                         },
67191                         load : function (_self, records, options)
67192                         {
67193                             _this.grid.view.el.select('.course-edit-link', true).on('click', function() {
67194                                 // if you click on the translation.. you can edit it...
67195                                 var el = Roo.get(this);
67196                                 var id = el.dom.getAttribute('data-id');
67197                                 var d = el.dom.getAttribute('data-date');
67198                                 var t = el.dom.getAttribute('data-time');
67199                                 //var id = this.child('span').dom.textContent;
67200                                 
67201                                 //Roo.log(this);
67202                                 Pman.Dialog.CourseCalendar.show({
67203                                     id : id,
67204                                     when_d : d,
67205                                     when_t : t,
67206                                     productitem_active : id ? 1 : 0
67207                                 }, function() {
67208                                     _this.grid.ds.load({});
67209                                 });
67210                            
67211                            });
67212                            
67213                            _this.panel.fireEvent('resize', [ '', '' ]);
67214                         }
67215                     },
67216                     loadResponse : function(o, success, response){
67217                             // this is overridden on before load..
67218                             
67219                             Roo.log("our code?");       
67220                             //Roo.log(success);
67221                             //Roo.log(response)
67222                             delete this.activeRequest;
67223                             if(!success){
67224                                 this.fireEvent("loadexception", this, o, response);
67225                                 o.request.callback.call(o.request.scope, null, o.request.arg, false);
67226                                 return;
67227                             }
67228                             var result;
67229                             try {
67230                                 result = o.reader.read(response);
67231                             }catch(e){
67232                                 Roo.log("load exception?");
67233                                 this.fireEvent("loadexception", this, o, response, e);
67234                                 o.request.callback.call(o.request.scope, null, o.request.arg, false);
67235                                 return;
67236                             }
67237                             Roo.log("ready...");        
67238                             // loop through result.records;
67239                             // and set this.tdate[date] = [] << array of records..
67240                             _this.tdata  = {};
67241                             Roo.each(result.records, function(r){
67242                                 //Roo.log(r.data);
67243                                 if(typeof(_this.tdata[r.data.when_dt.format('j')]) == 'undefined'){
67244                                     _this.tdata[r.data.when_dt.format('j')] = [];
67245                                 }
67246                                 _this.tdata[r.data.when_dt.format('j')].push(r.data);
67247                             });
67248                             
67249                             //Roo.log(_this.tdata);
67250                             
67251                             result.records = [];
67252                             result.totalRecords = 6;
67253                     
67254                             // let's generate some duumy records for the rows.
67255                             //var st = _this.dateField.getValue();
67256                             
67257                             // work out monday..
67258                             //st = st.add(Date.DAY, -1 * st.format('w'));
67259                             
67260                             var date = Date.parseDate(_this.monthField.getValue(), "Y-m-d");
67261                             
67262                             var firstOfMonth = date.getFirstDayOfMonth();
67263                             var days = date.getDaysInMonth();
67264                             var d = 1;
67265                             var firstAdded = false;
67266                             for (var i = 0; i < result.totalRecords ; i++) {
67267                                 //var d= st.add(Date.DAY, i);
67268                                 var row = {};
67269                                 var added = 0;
67270                                 for(var w = 0 ; w < 7 ; w++){
67271                                     if(!firstAdded && firstOfMonth != w){
67272                                         continue;
67273                                     }
67274                                     if(d > days){
67275                                         continue;
67276                                     }
67277                                     firstAdded = true;
67278                                     var dd = (d > 0 && d < 10) ? "0"+d : d;
67279                                     row['weekday'+w] = String.format(
67280                                                     '<span style="font-size: 16px;"><b>{0}</b></span>'+
67281                                                     '<span class="course-edit-link" style="color:blue;" data-id="0" data-date="{1}"> Add New</span>',
67282                                                     d,
67283                                                     date.format('Y-m-')+dd
67284                                                 );
67285                                     added++;
67286                                     if(typeof(_this.tdata[d]) != 'undefined'){
67287                                         Roo.each(_this.tdata[d], function(r){
67288                                             var is_sub = '';
67289                                             var deactive = '';
67290                                             var id = r.id;
67291                                             var desc = (r.productitem_id_descrip) ? r.productitem_id_descrip : '';
67292                                             if(r.parent_id*1>0){
67293                                                 is_sub = (r.productitem_id_visible*1 < 1) ? 'de-act-sup-link' :'sub-link';
67294                                                 id = r.parent_id;
67295                                             }
67296                                             if(r.productitem_id_visible*1 < 1 && r.parent_id*1 < 1){
67297                                                 deactive = 'de-act-link';
67298                                             }
67299                                             
67300                                             row['weekday'+w] += String.format(
67301                                                     '<br /><span class="course-edit-link {3} {4}" qtip="{5}" data-id="{0}">{2} - {1}</span>',
67302                                                     id, //0
67303                                                     r.product_id_name, //1
67304                                                     r.when_dt.format('h:ia'), //2
67305                                                     is_sub, //3
67306                                                     deactive, //4
67307                                                     desc // 5
67308                                             );
67309                                         });
67310                                     }
67311                                     d++;
67312                                 }
67313                                 
67314                                 // only do this if something added..
67315                                 if(added > 0){ 
67316                                     result.records.push(_this.grid.dataSource.reader.newRow(row));
67317                                 }
67318                                 
67319                                 
67320                                 // push it twice. (second one with an hour..
67321                                 
67322                             }
67323                             //Roo.log(result);
67324                             this.fireEvent("load", this, o, o.request.arg);
67325                             o.request.callback.call(o.request.scope, result, o.request.arg, true);
67326                         },
67327                     sortInfo : {field: 'when_dt', direction : 'ASC' },
67328                     proxy : {
67329                         xtype: 'HttpProxy',
67330                         xns: Roo.data,
67331                         method : 'GET',
67332                         url : baseURL + '/Roo/Shop_course.php'
67333                     },
67334                     reader : {
67335                         xtype: 'JsonReader',
67336                         xns: Roo.data,
67337                         id : 'id',
67338                         fields : [
67339                             {
67340                                 'name': 'id',
67341                                 'type': 'int'
67342                             },
67343                             {
67344                                 'name': 'when_dt',
67345                                 'type': 'string'
67346                             },
67347                             {
67348                                 'name': 'end_dt',
67349                                 'type': 'string'
67350                             },
67351                             {
67352                                 'name': 'parent_id',
67353                                 'type': 'int'
67354                             },
67355                             {
67356                                 'name': 'product_id',
67357                                 'type': 'int'
67358                             },
67359                             {
67360                                 'name': 'productitem_id',
67361                                 'type': 'int'
67362                             },
67363                             {
67364                                 'name': 'guid',
67365                                 'type': 'int'
67366                             }
67367                         ]
67368                     }
67369                 },
67370                 toolbar : {
67371                     xtype: 'Toolbar',
67372                     xns: Roo,
67373                     items : [
67374                         {
67375                             xtype: 'Button',
67376                             xns: Roo.Toolbar,
67377                             listeners : {
67378                                 click : function (_self, e)
67379                                 {
67380                                     var sd = Date.parseDate(_this.monthField.getValue(), "Y-m-d");
67381                                     sd.setMonth(sd.getMonth()-1);
67382                                     _this.monthField.setValue(sd.format('Y-m-d'));
67383                                     _this.grid.ds.load({});
67384                                 }
67385                             },
67386                             text : "Back"
67387                         },
67388                         {
67389                             xtype: 'Separator',
67390                             xns: Roo.Toolbar
67391                         },
67392                         {
67393                             xtype: 'MonthField',
67394                             xns: Roo.form,
67395                             listeners : {
67396                                 render : function (_self)
67397                                 {
67398                                     _this.monthField = _self;
67399                                    // _this.monthField.set  today
67400                                 },
67401                                 select : function (combo, date)
67402                                 {
67403                                     _this.grid.ds.load({});
67404                                 }
67405                             },
67406                             value : (function() { return new Date(); })()
67407                         },
67408                         {
67409                             xtype: 'Separator',
67410                             xns: Roo.Toolbar
67411                         },
67412                         {
67413                             xtype: 'TextItem',
67414                             xns: Roo.Toolbar,
67415                             text : "Blue: in-active, green: in-active sup-event, red: de-active, purple: de-active sup-event"
67416                         },
67417                         {
67418                             xtype: 'Fill',
67419                             xns: Roo.Toolbar
67420                         },
67421                         {
67422                             xtype: 'Button',
67423                             xns: Roo.Toolbar,
67424                             listeners : {
67425                                 click : function (_self, e)
67426                                 {
67427                                     var sd = Date.parseDate(_this.monthField.getValue(), "Y-m-d");
67428                                     sd.setMonth(sd.getMonth()+1);
67429                                     _this.monthField.setValue(sd.format('Y-m-d'));
67430                                     _this.grid.ds.load({});
67431                                 }
67432                             },
67433                             text : "Next"
67434                         }
67435                     ]
67436                 },
67437                  
67438             }
67439         };
67440         
67441         *//*
67442  * Based on:
67443  * Ext JS Library 1.1.1
67444  * Copyright(c) 2006-2007, Ext JS, LLC.
67445  *
67446  * Originally Released Under LGPL - original licence link has changed is not relivant.
67447  *
67448  * Fork - LGPL
67449  * <script type="text/javascript">
67450  */
67451  
67452 /**
67453  * @class Roo.LoadMask
67454  * A simple utility class for generically masking elements while loading data.  If the element being masked has
67455  * an underlying {@link Roo.data.Store}, the masking will be automatically synchronized with the store's loading
67456  * process and the mask element will be cached for reuse.  For all other elements, this mask will replace the
67457  * element's UpdateManager load indicator and will be destroyed after the initial load.
67458  * @constructor
67459  * Create a new LoadMask
67460  * @param {String/HTMLElement/Roo.Element} el The element or DOM node, or its id
67461  * @param {Object} config The config object
67462  */
67463 Roo.LoadMask = function(el, config){
67464     this.el = Roo.get(el);
67465     Roo.apply(this, config);
67466     if(this.store){
67467         this.store.on('beforeload', this.onBeforeLoad, this);
67468         this.store.on('load', this.onLoad, this);
67469         this.store.on('loadexception', this.onLoadException, this);
67470         this.removeMask = false;
67471     }else{
67472         var um = this.el.getUpdateManager();
67473         um.showLoadIndicator = false; // disable the default indicator
67474         um.on('beforeupdate', this.onBeforeLoad, this);
67475         um.on('update', this.onLoad, this);
67476         um.on('failure', this.onLoad, this);
67477         this.removeMask = true;
67478     }
67479 };
67480
67481 Roo.LoadMask.prototype = {
67482     /**
67483      * @cfg {Boolean} removeMask
67484      * True to create a single-use mask that is automatically destroyed after loading (useful for page loads),
67485      * False to persist the mask element reference for multiple uses (e.g., for paged data widgets).  Defaults to false.
67486      */
67487     removeMask : false,
67488     /**
67489      * @cfg {String} msg
67490      * The text to display in a centered loading message box (defaults to 'Loading...')
67491      */
67492     msg : 'Loading...',
67493     /**
67494      * @cfg {String} msgCls
67495      * The CSS class to apply to the loading message element (defaults to "x-mask-loading")
67496      */
67497     msgCls : 'x-mask-loading',
67498
67499     /**
67500      * Read-only. True if the mask is currently disabled so that it will not be displayed (defaults to false)
67501      * @type Boolean
67502      */
67503     disabled: false,
67504
67505     /**
67506      * Disables the mask to prevent it from being displayed
67507      */
67508     disable : function(){
67509        this.disabled = true;
67510     },
67511
67512     /**
67513      * Enables the mask so that it can be displayed
67514      */
67515     enable : function(){
67516         this.disabled = false;
67517     },
67518     
67519     onLoadException : function()
67520     {
67521         Roo.log(arguments);
67522         
67523         if (typeof(arguments[3]) != 'undefined') {
67524             Roo.MessageBox.alert("Error loading",arguments[3]);
67525         } 
67526         /*
67527         try {
67528             if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
67529                 Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
67530             }   
67531         } catch(e) {
67532             
67533         }
67534         */
67535     
67536         (function() { this.el.unmask(this.removeMask); }).defer(50, this);
67537     },
67538     // private
67539     onLoad : function()
67540     {
67541         (function() { this.el.unmask(this.removeMask); }).defer(50, this);
67542     },
67543
67544     // private
67545     onBeforeLoad : function(){
67546         if(!this.disabled){
67547             (function() { this.el.mask(this.msg, this.msgCls); }).defer(50, this);
67548         }
67549     },
67550
67551     // private
67552     destroy : function(){
67553         if(this.store){
67554             this.store.un('beforeload', this.onBeforeLoad, this);
67555             this.store.un('load', this.onLoad, this);
67556             this.store.un('loadexception', this.onLoadException, this);
67557         }else{
67558             var um = this.el.getUpdateManager();
67559             um.un('beforeupdate', this.onBeforeLoad, this);
67560             um.un('update', this.onLoad, this);
67561             um.un('failure', this.onLoad, this);
67562         }
67563     }
67564 };/*
67565  * Based on:
67566  * Ext JS Library 1.1.1
67567  * Copyright(c) 2006-2007, Ext JS, LLC.
67568  *
67569  * Originally Released Under LGPL - original licence link has changed is not relivant.
67570  *
67571  * Fork - LGPL
67572  * <script type="text/javascript">
67573  */
67574
67575
67576 /**
67577  * @class Roo.XTemplate
67578  * @extends Roo.Template
67579  * Provides a template that can have nested templates for loops or conditionals. The syntax is:
67580 <pre><code>
67581 var t = new Roo.XTemplate(
67582         '&lt;select name="{name}"&gt;',
67583                 '&lt;tpl for="options"&gt;&lt;option value="{value:trim}"&gt;{text:ellipsis(10)}&lt;/option&gt;&lt;/tpl&gt;',
67584         '&lt;/select&gt;'
67585 );
67586  
67587 // then append, applying the master template values
67588  </code></pre>
67589  *
67590  * Supported features:
67591  *
67592  *  Tags:
67593
67594 <pre><code>
67595       {a_variable} - output encoded.
67596       {a_variable.format:("Y-m-d")} - call a method on the variable
67597       {a_variable:raw} - unencoded output
67598       {a_variable:toFixed(1,2)} - Roo.util.Format."toFixed"
67599       {a_variable:this.method_on_template(...)} - call a method on the template object.
67600  
67601 </code></pre>
67602  *  The tpl tag:
67603 <pre><code>
67604         &lt;tpl for="a_variable or condition.."&gt;&lt;/tpl&gt;
67605         &lt;tpl if="a_variable or condition"&gt;&lt;/tpl&gt;
67606         &lt;tpl exec="some javascript"&gt;&lt;/tpl&gt;
67607         &lt;tpl name="named_template"&gt;&lt;/tpl&gt; (experimental)
67608   
67609         &lt;tpl for="."&gt;&lt;/tpl&gt; - just iterate the property..
67610         &lt;tpl for=".."&gt;&lt;/tpl&gt; - iterates with the parent (probably the template) 
67611 </code></pre>
67612  *      
67613  */
67614 Roo.XTemplate = function()
67615 {
67616     Roo.XTemplate.superclass.constructor.apply(this, arguments);
67617     if (this.html) {
67618         this.compile();
67619     }
67620 };
67621
67622
67623 Roo.extend(Roo.XTemplate, Roo.Template, {
67624
67625     /**
67626      * The various sub templates
67627      */
67628     tpls : false,
67629     /**
67630      *
67631      * basic tag replacing syntax
67632      * WORD:WORD()
67633      *
67634      * // you can fake an object call by doing this
67635      *  x.t:(test,tesT) 
67636      * 
67637      */
67638     re : /\{([\w-\.]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
67639
67640     /**
67641      * compile the template
67642      *
67643      * This is not recursive, so I'm not sure how nested templates are really going to be handled..
67644      *
67645      */
67646     compile: function()
67647     {
67648         var s = this.html;
67649      
67650         s = ['<tpl>', s, '</tpl>'].join('');
67651     
67652         var re     = /<tpl\b[^>]*>((?:(?=([^<]+))\2|<(?!tpl\b[^>]*>))*?)<\/tpl>/,
67653             nameRe = /^<tpl\b[^>]*?for="(.*?)"/,
67654             ifRe   = /^<tpl\b[^>]*?if="(.*?)"/,
67655             execRe = /^<tpl\b[^>]*?exec="(.*?)"/,
67656             namedRe = /^<tpl\b[^>]*?name="(\w+)"/,  // named templates..
67657             m,
67658             id     = 0,
67659             tpls   = [];
67660     
67661         while(true == !!(m = s.match(re))){
67662             var forMatch   = m[0].match(nameRe),
67663                 ifMatch   = m[0].match(ifRe),
67664                 execMatch   = m[0].match(execRe),
67665                 namedMatch   = m[0].match(namedRe),
67666                 
67667                 exp  = null, 
67668                 fn   = null,
67669                 exec = null,
67670                 name = forMatch && forMatch[1] ? forMatch[1] : '';
67671                 
67672             if (ifMatch) {
67673                 // if - puts fn into test..
67674                 exp = ifMatch && ifMatch[1] ? ifMatch[1] : null;
67675                 if(exp){
67676                    fn = new Function('values', 'parent', 'with(values){ return '+(Roo.util.Format.htmlDecode(exp))+'; }');
67677                 }
67678             }
67679             
67680             if (execMatch) {
67681                 // exec - calls a function... returns empty if true is  returned.
67682                 exp = execMatch && execMatch[1] ? execMatch[1] : null;
67683                 if(exp){
67684                    exec = new Function('values', 'parent', 'with(values){ '+(Roo.util.Format.htmlDecode(exp))+'; }');
67685                 }
67686             }
67687             
67688             
67689             if (name) {
67690                 // for = 
67691                 switch(name){
67692                     case '.':  name = new Function('values', 'parent', 'with(values){ return values; }'); break;
67693                     case '..': name = new Function('values', 'parent', 'with(values){ return parent; }'); break;
67694                     default:   name = new Function('values', 'parent', 'with(values){ return '+name+'; }');
67695                 }
67696             }
67697             var uid = namedMatch ? namedMatch[1] : id;
67698             
67699             
67700             tpls.push({
67701                 id:     namedMatch ? namedMatch[1] : id,
67702                 target: name,
67703                 exec:   exec,
67704                 test:   fn,
67705                 body:   m[1] || ''
67706             });
67707             if (namedMatch) {
67708                 s = s.replace(m[0], '');
67709             } else { 
67710                 s = s.replace(m[0], '{xtpl'+ id + '}');
67711             }
67712             ++id;
67713         }
67714         this.tpls = [];
67715         for(var i = tpls.length-1; i >= 0; --i){
67716             this.compileTpl(tpls[i]);
67717             this.tpls[tpls[i].id] = tpls[i];
67718         }
67719         this.master = tpls[tpls.length-1];
67720         return this;
67721     },
67722     /**
67723      * same as applyTemplate, except it's done to one of the subTemplates
67724      * when using named templates, you can do:
67725      *
67726      * var str = pl.applySubTemplate('your-name', values);
67727      *
67728      * 
67729      * @param {Number} id of the template
67730      * @param {Object} values to apply to template
67731      * @param {Object} parent (normaly the instance of this object)
67732      */
67733     applySubTemplate : function(id, values, parent)
67734     {
67735         
67736         
67737         var t = this.tpls[id];
67738         
67739         
67740         try { 
67741             if(t.test && !t.test.call(this, values, parent)){
67742                 return '';
67743             }
67744         } catch(e) {
67745             Roo.log("Xtemplate.applySubTemplate 'test': Exception thrown");
67746             Roo.log(e.toString());
67747             Roo.log(t.test);
67748             return ''
67749         }
67750         try { 
67751             
67752             if(t.exec && t.exec.call(this, values, parent)){
67753                 return '';
67754             }
67755         } catch(e) {
67756             Roo.log("Xtemplate.applySubTemplate 'exec': Exception thrown");
67757             Roo.log(e.toString());
67758             Roo.log(t.exec);
67759             return ''
67760         }
67761         try {
67762             var vs = t.target ? t.target.call(this, values, parent) : values;
67763             parent = t.target ? values : parent;
67764             if(t.target && vs instanceof Array){
67765                 var buf = [];
67766                 for(var i = 0, len = vs.length; i < len; i++){
67767                     buf[buf.length] = t.compiled.call(this, vs[i], parent);
67768                 }
67769                 return buf.join('');
67770             }
67771             return t.compiled.call(this, vs, parent);
67772         } catch (e) {
67773             Roo.log("Xtemplate.applySubTemplate : Exception thrown");
67774             Roo.log(e.toString());
67775             Roo.log(t.compiled);
67776             return '';
67777         }
67778     },
67779
67780     compileTpl : function(tpl)
67781     {
67782         var fm = Roo.util.Format;
67783         var useF = this.disableFormats !== true;
67784         var sep = Roo.isGecko ? "+" : ",";
67785         var undef = function(str) {
67786             Roo.log("Property not found :"  + str);
67787             return '';
67788         };
67789         
67790         var fn = function(m, name, format, args)
67791         {
67792             //Roo.log(arguments);
67793             args = args ? args.replace(/\\'/g,"'") : args;
67794             //["{TEST:(a,b,c)}", "TEST", "", "a,b,c", 0, "{TEST:(a,b,c)}"]
67795             if (typeof(format) == 'undefined') {
67796                 format= 'htmlEncode';
67797             }
67798             if (format == 'raw' ) {
67799                 format = false;
67800             }
67801             
67802             if(name.substr(0, 4) == 'xtpl'){
67803                 return "'"+ sep +'this.applySubTemplate('+name.substr(4)+', values, parent)'+sep+"'";
67804             }
67805             
67806             // build an array of options to determine if value is undefined..
67807             
67808             // basically get 'xxxx.yyyy' then do
67809             // (typeof(xxxx) == 'undefined' || typeof(xxx.yyyy) == 'undefined') ?
67810             //    (function () { Roo.log("Property not found"); return ''; })() :
67811             //    ......
67812             
67813             var udef_ar = [];
67814             var lookfor = '';
67815             Roo.each(name.split('.'), function(st) {
67816                 lookfor += (lookfor.length ? '.': '') + st;
67817                 udef_ar.push(  "(typeof(" + lookfor + ") == 'undefined')"  );
67818             });
67819             
67820             var udef_st = '((' + udef_ar.join(" || ") +") ? undef('" + name + "') : "; // .. needs )
67821             
67822             
67823             if(format && useF){
67824                 
67825                 args = args ? ',' + args : "";
67826                  
67827                 if(format.substr(0, 5) != "this."){
67828                     format = "fm." + format + '(';
67829                 }else{
67830                     format = 'this.call("'+ format.substr(5) + '", ';
67831                     args = ", values";
67832                 }
67833                 
67834                 return "'"+ sep +   udef_st   +    format + name + args + "))"+sep+"'";
67835             }
67836              
67837             if (args.length) {
67838                 // called with xxyx.yuu:(test,test)
67839                 // change to ()
67840                 return "'"+ sep + udef_st  + name + '(' +  args + "))"+sep+"'";
67841             }
67842             // raw.. - :raw modifier..
67843             return "'"+ sep + udef_st  + name + ")"+sep+"'";
67844             
67845         };
67846         var body;
67847         // branched to use + in gecko and [].join() in others
67848         if(Roo.isGecko){
67849             body = "tpl.compiled = function(values, parent){  with(values) { return '" +
67850                    tpl.body.replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn) +
67851                     "';};};";
67852         }else{
67853             body = ["tpl.compiled = function(values, parent){  with (values) { return ['"];
67854             body.push(tpl.body.replace(/(\r\n|\n)/g,
67855                             '\\n').replace(/'/g, "\\'").replace(this.re, fn));
67856             body.push("'].join('');};};");
67857             body = body.join('');
67858         }
67859         
67860         Roo.debug && Roo.log(body.replace(/\\n/,'\n'));
67861        
67862         /** eval:var:tpl eval:var:fm eval:var:useF eval:var:undef  */
67863         eval(body);
67864         
67865         return this;
67866     },
67867
67868     applyTemplate : function(values){
67869         return this.master.compiled.call(this, values, {});
67870         //var s = this.subs;
67871     },
67872
67873     apply : function(){
67874         return this.applyTemplate.apply(this, arguments);
67875     }
67876
67877  });
67878
67879 Roo.XTemplate.from = function(el){
67880     el = Roo.getDom(el);
67881     return new Roo.XTemplate(el.value || el.innerHTML);
67882 };