roojs-all.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  * @singleton
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         isIE = ua.indexOf("msie") > -1,
57         isIE7 = ua.indexOf("msie 7") > -1,
58         isGecko = !isSafari && ua.indexOf("gecko") > -1,
59         isBorderBox = isIE && !isStrict,
60         isWindows = (ua.indexOf("windows") != -1 || ua.indexOf("win32") != -1),
61         isMac = (ua.indexOf("macintosh") != -1 || ua.indexOf("mac os x") != -1),
62         isLinux = (ua.indexOf("linux") != -1),
63         isSecure = window.location.href.toLowerCase().indexOf("https") === 0;
64
65     // remove css image flicker
66         if(isIE && !isIE7){
67         try{
68             document.execCommand("BackgroundImageCache", false, true);
69         }catch(e){}
70     }
71
72     Roo.apply(Roo, {
73         /**
74          * True if the browser is in strict mode
75          * @type Boolean
76          */
77         isStrict : isStrict,
78         /**
79          * True if the page is running over SSL
80          * @type Boolean
81          */
82         isSecure : isSecure,
83         /**
84          * True when the document is fully initialized and ready for action
85          * @type Boolean
86          */
87         isReady : false,
88         /**
89          * Turn on debugging output (currently only the factory uses this)
90          * @type Boolean
91          */
92         
93         debug: false,
94
95         /**
96          * True to automatically uncache orphaned Roo.Elements periodically (defaults to true)
97          * @type Boolean
98          */
99         enableGarbageCollector : true,
100
101         /**
102          * True to automatically purge event listeners after uncaching an element (defaults to false).
103          * Note: this only happens if enableGarbageCollector is true.
104          * @type Boolean
105          */
106         enableListenerCollection:false,
107
108         /**
109          * URL to a blank file used by Roo when in secure mode for iframe src and onReady src to prevent
110          * the IE insecure content warning (defaults to javascript:false).
111          * @type String
112          */
113         SSL_SECURE_URL : "javascript:false",
114
115         /**
116          * URL to a 1x1 transparent gif image used by Roo to create inline icons with CSS background images. (Defaults to
117          * "http://Roojs.com/s.gif" and you should change this to a URL on your server).
118          * @type String
119          */
120         BLANK_IMAGE_URL : "http:/"+"/localhost/s.gif",
121
122         emptyFn : function(){},
123
124         /**
125          * Copies all the properties of config to obj if they don't already exist.
126          * @param {Object} obj The receiver of the properties
127          * @param {Object} config The source of the properties
128          * @return {Object} returns obj
129          */
130         applyIf : function(o, c){
131             if(o && c){
132                 for(var p in c){
133                     if(typeof o[p] == "undefined"){ o[p] = c[p]; }
134                 }
135             }
136             return o;
137         },
138
139         /**
140          * Applies event listeners to elements by selectors when the document is ready.
141          * The event name is specified with an @ suffix.
142 <pre><code>
143 Roo.addBehaviors({
144    // add a listener for click on all anchors in element with id foo
145    '#foo a@click' : function(e, t){
146        // do something
147    },
148
149    // add the same listener to multiple selectors (separated by comma BEFORE the @)
150    '#foo a, #bar span.some-class@mouseover' : function(){
151        // do something
152    }
153 });
154 </code></pre>
155          * @param {Object} obj The list of behaviors to apply
156          */
157         addBehaviors : function(o){
158             if(!Roo.isReady){
159                 Roo.onReady(function(){
160                     Roo.addBehaviors(o);
161                 });
162                 return;
163             }
164             var cache = {}; // simple cache for applying multiple behaviors to same selector does query multiple times
165             for(var b in o){
166                 var parts = b.split('@');
167                 if(parts[1]){ // for Object prototype breakers
168                     var s = parts[0];
169                     if(!cache[s]){
170                         cache[s] = Roo.select(s);
171                     }
172                     cache[s].on(parts[1], o[b]);
173                 }
174             }
175             cache = null;
176         },
177
178         /**
179          * Generates unique ids. If the element already has an id, it is unchanged
180          * @param {String/HTMLElement/Element} el (optional) The element to generate an id for
181          * @param {String} prefix (optional) Id prefix (defaults "Roo-gen")
182          * @return {String} The generated Id.
183          */
184         id : function(el, prefix){
185             prefix = prefix || "roo-gen";
186             el = Roo.getDom(el);
187             var id = prefix + (++idSeed);
188             return el ? (el.id ? el.id : (el.id = id)) : id;
189         },
190          
191        
192         /**
193          * Extends one class with another class and optionally overrides members with the passed literal. This class
194          * also adds the function "override()" to the class that can be used to override
195          * members on an instance.
196          * @param {Object} subclass The class inheriting the functionality
197          * @param {Object} superclass The class being extended
198          * @param {Object} overrides (optional) A literal with members
199          * @method extend
200          */
201         extend : function(){
202             // inline overrides
203             var io = function(o){
204                 for(var m in o){
205                     this[m] = o[m];
206                 }
207             };
208             return function(sb, sp, overrides){
209                 if(typeof sp == 'object'){ // eg. prototype, rather than function constructor..
210                     overrides = sp;
211                     sp = sb;
212                     sb = function(){sp.apply(this, arguments);};
213                 }
214                 var F = function(){}, sbp, spp = sp.prototype;
215                 F.prototype = spp;
216                 sbp = sb.prototype = new F();
217                 sbp.constructor=sb;
218                 sb.superclass=spp;
219                 
220                 if(spp.constructor == Object.prototype.constructor){
221                     spp.constructor=sp;
222                    
223                 }
224                 
225                 sb.override = function(o){
226                     Roo.override(sb, o);
227                 };
228                 sbp.override = io;
229                 Roo.override(sb, overrides);
230                 return sb;
231             };
232         }(),
233
234         /**
235          * Adds a list of functions to the prototype of an existing class, overwriting any existing methods with the same name.
236          * Usage:<pre><code>
237 Roo.override(MyClass, {
238     newMethod1: function(){
239         // etc.
240     },
241     newMethod2: function(foo){
242         // etc.
243     }
244 });
245  </code></pre>
246          * @param {Object} origclass The class to override
247          * @param {Object} overrides The list of functions to add to origClass.  This should be specified as an object literal
248          * containing one or more methods.
249          * @method override
250          */
251         override : function(origclass, overrides){
252             if(overrides){
253                 var p = origclass.prototype;
254                 for(var method in overrides){
255                     p[method] = overrides[method];
256                 }
257             }
258         },
259         /**
260          * Creates namespaces to be used for scoping variables and classes so that they are not global.  Usage:
261          * <pre><code>
262 Roo.namespace('Company', 'Company.data');
263 Company.Widget = function() { ... }
264 Company.data.CustomStore = function(config) { ... }
265 </code></pre>
266          * @param {String} namespace1
267          * @param {String} namespace2
268          * @param {String} etc
269          * @method namespace
270          */
271         namespace : function(){
272             var a=arguments, o=null, i, j, d, rt;
273             for (i=0; i<a.length; ++i) {
274                 d=a[i].split(".");
275                 rt = d[0];
276                 /** eval:var:o */
277                 eval('if (typeof ' + rt + ' == "undefined"){' + rt + ' = {};} o = ' + rt + ';');
278                 for (j=1; j<d.length; ++j) {
279                     o[d[j]]=o[d[j]] || {};
280                     o=o[d[j]];
281                 }
282             }
283         },
284         /**
285          * Creates namespaces to be used for scoping variables and classes so that they are not global.  Usage:
286          * <pre><code>
287 Roo.factory({ xns: Roo.data, xtype : 'Store', .....});
288 Roo.factory(conf, Roo.data);
289 </code></pre>
290          * @param {String} classname
291          * @param {String} namespace (optional)
292          * @method factory
293          */
294          
295         factory : function(c, ns)
296         {
297             // no xtype, no ns or c.xns - or forced off by c.xns
298             if (!c.xtype   || (!ns && !c.xns) ||  (c.xns === false)) { // not enough info...
299                 return c;
300             }
301             ns = c.xns ? c.xns : ns; // if c.xns is set, then use that..
302             if (c.constructor == ns[c.xtype]) {// already created...
303                 return c;
304             }
305             if (ns[c.xtype]) {
306                 if (Roo.debug) Roo.log("Roo.Factory(" + c.xtype + ")");
307                 var ret = new ns[c.xtype](c);
308                 ret.xns = false;
309                 return ret;
310             }
311             c.xns = false; // prevent recursion..
312             return c;
313         },
314          /**
315          * Logs to console if it can.
316          *
317          * @param {String|Object} string
318          * @method log
319          */
320         log : function(s)
321         {
322             if ((typeof(console) == 'undefined') || (typeof(console.log) == 'undefined')) {
323                 return; // alerT?
324             }
325             console.log(s);
326             
327         },
328         /**
329          * 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.
330          * @param {Object} o
331          * @return {String}
332          */
333         urlEncode : function(o){
334             if(!o){
335                 return "";
336             }
337             var buf = [];
338             for(var key in o){
339                 var ov = o[key], k = Roo.encodeURIComponent(key);
340                 var type = typeof ov;
341                 if(type == 'undefined'){
342                     buf.push(k, "=&");
343                 }else if(type != "function" && type != "object"){
344                     buf.push(k, "=", Roo.encodeURIComponent(ov), "&");
345                 }else if(ov instanceof Array){
346                     if (ov.length) {
347                             for(var i = 0, len = ov.length; i < len; i++) {
348                                 buf.push(k, "=", Roo.encodeURIComponent(ov[i] === undefined ? '' : ov[i]), "&");
349                             }
350                         } else {
351                             buf.push(k, "=&");
352                         }
353                 }
354             }
355             buf.pop();
356             return buf.join("");
357         },
358          /**
359          * Safe version of encodeURIComponent
360          * @param {String} data 
361          * @return {String} 
362          */
363         
364         encodeURIComponent : function (data)
365         {
366             try {
367                 return encodeURIComponent(data);
368             } catch(e) {} // should be an uri encode error.
369             
370             if (data == '' || data == null){
371                return '';
372             }
373             // http://stackoverflow.com/questions/2596483/unicode-and-uri-encoding-decoding-and-escaping-in-javascript
374             function nibble_to_hex(nibble){
375                 var chars = '0123456789ABCDEF';
376                 return chars.charAt(nibble);
377             }
378             data = data.toString();
379             var buffer = '';
380             for(var i=0; i<data.length; i++){
381                 var c = data.charCodeAt(i);
382                 var bs = new Array();
383                 if (c > 0x10000){
384                         // 4 bytes
385                     bs[0] = 0xF0 | ((c & 0x1C0000) >>> 18);
386                     bs[1] = 0x80 | ((c & 0x3F000) >>> 12);
387                     bs[2] = 0x80 | ((c & 0xFC0) >>> 6);
388                     bs[3] = 0x80 | (c & 0x3F);
389                 }else if (c > 0x800){
390                          // 3 bytes
391                     bs[0] = 0xE0 | ((c & 0xF000) >>> 12);
392                     bs[1] = 0x80 | ((c & 0xFC0) >>> 6);
393                     bs[2] = 0x80 | (c & 0x3F);
394                 }else if (c > 0x80){
395                        // 2 bytes
396                     bs[0] = 0xC0 | ((c & 0x7C0) >>> 6);
397                     bs[1] = 0x80 | (c & 0x3F);
398                 }else{
399                         // 1 byte
400                     bs[0] = c;
401                 }
402                 for(var j=0; j<bs.length; j++){
403                     var b = bs[j];
404                     var hex = nibble_to_hex((b & 0xF0) >>> 4) 
405                             + nibble_to_hex(b &0x0F);
406                     buffer += '%'+hex;
407                }
408             }
409             return buffer;    
410              
411         },
412
413         /**
414          * 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]}.
415          * @param {String} string
416          * @param {Boolean} overwrite (optional) Items of the same name will overwrite previous values instead of creating an an array (Defaults to false).
417          * @return {Object} A literal with members
418          */
419         urlDecode : function(string, overwrite){
420             if(!string || !string.length){
421                 return {};
422             }
423             var obj = {};
424             var pairs = string.split('&');
425             var pair, name, value;
426             for(var i = 0, len = pairs.length; i < len; i++){
427                 pair = pairs[i].split('=');
428                 name = decodeURIComponent(pair[0]);
429                 value = decodeURIComponent(pair[1]);
430                 if(overwrite !== true){
431                     if(typeof obj[name] == "undefined"){
432                         obj[name] = value;
433                     }else if(typeof obj[name] == "string"){
434                         obj[name] = [obj[name]];
435                         obj[name].push(value);
436                     }else{
437                         obj[name].push(value);
438                     }
439                 }else{
440                     obj[name] = value;
441                 }
442             }
443             return obj;
444         },
445
446         /**
447          * Iterates an array calling the passed function with each item, stopping if your function returns false. If the
448          * passed array is not really an array, your function is called once with it.
449          * The supplied function is called with (Object item, Number index, Array allItems).
450          * @param {Array/NodeList/Mixed} array
451          * @param {Function} fn
452          * @param {Object} scope
453          */
454         each : function(array, fn, scope){
455             if(typeof array.length == "undefined" || typeof array == "string"){
456                 array = [array];
457             }
458             for(var i = 0, len = array.length; i < len; i++){
459                 if(fn.call(scope || array[i], array[i], i, array) === false){ return i; };
460             }
461         },
462
463         // deprecated
464         combine : function(){
465             var as = arguments, l = as.length, r = [];
466             for(var i = 0; i < l; i++){
467                 var a = as[i];
468                 if(a instanceof Array){
469                     r = r.concat(a);
470                 }else if(a.length !== undefined && !a.substr){
471                     r = r.concat(Array.prototype.slice.call(a, 0));
472                 }else{
473                     r.push(a);
474                 }
475             }
476             return r;
477         },
478
479         /**
480          * Escapes the passed string for use in a regular expression
481          * @param {String} str
482          * @return {String}
483          */
484         escapeRe : function(s) {
485             return s.replace(/([.*+?^${}()|[\]\/\\])/g, "\\$1");
486         },
487
488         // internal
489         callback : function(cb, scope, args, delay){
490             if(typeof cb == "function"){
491                 if(delay){
492                     cb.defer(delay, scope, args || []);
493                 }else{
494                     cb.apply(scope, args || []);
495                 }
496             }
497         },
498
499         /**
500          * Return the dom node for the passed string (id), dom node, or Roo.Element
501          * @param {String/HTMLElement/Roo.Element} el
502          * @return HTMLElement
503          */
504         getDom : function(el){
505             if(!el){
506                 return null;
507             }
508             return el.dom ? el.dom : (typeof el == 'string' ? document.getElementById(el) : el);
509         },
510
511         /**
512         * Shorthand for {@link Roo.ComponentMgr#get}
513         * @param {String} id
514         * @return Roo.Component
515         */
516         getCmp : function(id){
517             return Roo.ComponentMgr.get(id);
518         },
519          
520         num : function(v, defaultValue){
521             if(typeof v != 'number'){
522                 return defaultValue;
523             }
524             return v;
525         },
526
527         destroy : function(){
528             for(var i = 0, a = arguments, len = a.length; i < len; i++) {
529                 var as = a[i];
530                 if(as){
531                     if(as.dom){
532                         as.removeAllListeners();
533                         as.remove();
534                         continue;
535                     }
536                     if(typeof as.purgeListeners == 'function'){
537                         as.purgeListeners();
538                     }
539                     if(typeof as.destroy == 'function'){
540                         as.destroy();
541                     }
542                 }
543             }
544         },
545
546         // inpired by a similar function in mootools library
547         /**
548          * Returns the type of object that is passed in. If the object passed in is null or undefined it
549          * return false otherwise it returns one of the following values:<ul>
550          * <li><b>string</b>: If the object passed is a string</li>
551          * <li><b>number</b>: If the object passed is a number</li>
552          * <li><b>boolean</b>: If the object passed is a boolean value</li>
553          * <li><b>function</b>: If the object passed is a function reference</li>
554          * <li><b>object</b>: If the object passed is an object</li>
555          * <li><b>array</b>: If the object passed is an array</li>
556          * <li><b>regexp</b>: If the object passed is a regular expression</li>
557          * <li><b>element</b>: If the object passed is a DOM Element</li>
558          * <li><b>nodelist</b>: If the object passed is a DOM NodeList</li>
559          * <li><b>textnode</b>: If the object passed is a DOM text node and contains something other than whitespace</li>
560          * <li><b>whitespace</b>: If the object passed is a DOM text node and contains only whitespace</li>
561          * @param {Mixed} object
562          * @return {String}
563          */
564         type : function(o){
565             if(o === undefined || o === null){
566                 return false;
567             }
568             if(o.htmlElement){
569                 return 'element';
570             }
571             var t = typeof o;
572             if(t == 'object' && o.nodeName) {
573                 switch(o.nodeType) {
574                     case 1: return 'element';
575                     case 3: return (/\S/).test(o.nodeValue) ? 'textnode' : 'whitespace';
576                 }
577             }
578             if(t == 'object' || t == 'function') {
579                 switch(o.constructor) {
580                     case Array: return 'array';
581                     case RegExp: return 'regexp';
582                 }
583                 if(typeof o.length == 'number' && typeof o.item == 'function') {
584                     return 'nodelist';
585                 }
586             }
587             return t;
588         },
589
590         /**
591          * Returns true if the passed value is null, undefined or an empty string (optional).
592          * @param {Mixed} value The value to test
593          * @param {Boolean} allowBlank (optional) Pass true if an empty string is not considered empty
594          * @return {Boolean}
595          */
596         isEmpty : function(v, allowBlank){
597             return v === null || v === undefined || (!allowBlank ? v === '' : false);
598         },
599         
600         /** @type Boolean */
601         isOpera : isOpera,
602         /** @type Boolean */
603         isSafari : isSafari,
604         /** @type Boolean */
605         isIE : isIE,
606         /** @type Boolean */
607         isIE7 : isIE7,
608         /** @type Boolean */
609         isGecko : isGecko,
610         /** @type Boolean */
611         isBorderBox : isBorderBox,
612         /** @type Boolean */
613         isWindows : isWindows,
614         /** @type Boolean */
615         isLinux : isLinux,
616         /** @type Boolean */
617         isMac : isMac,
618
619         /**
620          * By default, Ext intelligently decides whether floating elements should be shimmed. If you are using flash,
621          * you may want to set this to true.
622          * @type Boolean
623          */
624         useShims : ((isIE && !isIE7) || (isGecko && isMac)),
625         
626         
627                 
628         /**
629          * Selects a single element as a Roo Element
630          * This is about as close as you can get to jQuery's $('do crazy stuff')
631          * @param {String} selector The selector/xpath query
632          * @param {Node} root (optional) The start of the query (defaults to document).
633          * @return {Roo.Element}
634          */
635         selectNode : function(selector, root) 
636         {
637             var node = Roo.DomQuery.selectNode(selector,root);
638             return node ? Roo.get(node) : new Roo.Element(false);
639         }
640         
641     });
642
643
644 })();
645
646 Roo.namespace("Roo", "Roo.util", "Roo.grid", "Roo.dd", "Roo.tree", "Roo.data",
647                 "Roo.form", "Roo.menu", "Roo.state", "Roo.lib", "Roo.layout", "Roo.app", "Roo.ux");
648 /*
649  * Based on:
650  * Ext JS Library 1.1.1
651  * Copyright(c) 2006-2007, Ext JS, LLC.
652  *
653  * Originally Released Under LGPL - original licence link has changed is not relivant.
654  *
655  * Fork - LGPL
656  * <script type="text/javascript">
657  */
658
659 (function() {    
660     // wrappedn so fnCleanup is not in global scope...
661     if(Roo.isIE) {
662         function fnCleanUp() {
663             var p = Function.prototype;
664             delete p.createSequence;
665             delete p.defer;
666             delete p.createDelegate;
667             delete p.createCallback;
668             delete p.createInterceptor;
669
670             window.detachEvent("onunload", fnCleanUp);
671         }
672         window.attachEvent("onunload", fnCleanUp);
673     }
674 })();
675
676
677 /**
678  * @class Function
679  * These functions are available on every Function object (any JavaScript function).
680  */
681 Roo.apply(Function.prototype, {
682      /**
683      * Creates a callback that passes arguments[0], arguments[1], arguments[2], ...
684      * Call directly on any function. Example: <code>myFunction.createCallback(myarg, myarg2)</code>
685      * Will create a function that is bound to those 2 args.
686      * @return {Function} The new function
687     */
688     createCallback : function(/*args...*/){
689         // make args available, in function below
690         var args = arguments;
691         var method = this;
692         return function() {
693             return method.apply(window, args);
694         };
695     },
696
697     /**
698      * Creates a delegate (callback) that sets the scope to obj.
699      * Call directly on any function. Example: <code>this.myFunction.createDelegate(this)</code>
700      * Will create a function that is automatically scoped to this.
701      * @param {Object} obj (optional) The object for which the scope is set
702      * @param {Array} args (optional) Overrides arguments for the call. (Defaults to the arguments passed by the caller)
703      * @param {Boolean/Number} appendArgs (optional) if True args are appended to call args instead of overriding,
704      *                                             if a number the args are inserted at the specified position
705      * @return {Function} The new function
706      */
707     createDelegate : function(obj, args, appendArgs){
708         var method = this;
709         return function() {
710             var callArgs = args || arguments;
711             if(appendArgs === true){
712                 callArgs = Array.prototype.slice.call(arguments, 0);
713                 callArgs = callArgs.concat(args);
714             }else if(typeof appendArgs == "number"){
715                 callArgs = Array.prototype.slice.call(arguments, 0); // copy arguments first
716                 var applyArgs = [appendArgs, 0].concat(args); // create method call params
717                 Array.prototype.splice.apply(callArgs, applyArgs); // splice them in
718             }
719             return method.apply(obj || window, callArgs);
720         };
721     },
722
723     /**
724      * Calls this function after the number of millseconds specified.
725      * @param {Number} millis The number of milliseconds for the setTimeout call (if 0 the function is executed immediately)
726      * @param {Object} obj (optional) The object for which the scope is set
727      * @param {Array} args (optional) Overrides arguments for the call. (Defaults to the arguments passed by the caller)
728      * @param {Boolean/Number} appendArgs (optional) if True args are appended to call args instead of overriding,
729      *                                             if a number the args are inserted at the specified position
730      * @return {Number} The timeout id that can be used with clearTimeout
731      */
732     defer : function(millis, obj, args, appendArgs){
733         var fn = this.createDelegate(obj, args, appendArgs);
734         if(millis){
735             return setTimeout(fn, millis);
736         }
737         fn();
738         return 0;
739     },
740     /**
741      * Create a combined function call sequence of the original function + the passed function.
742      * The resulting function returns the results of the original function.
743      * The passed fcn is called with the parameters of the original function
744      * @param {Function} fcn The function to sequence
745      * @param {Object} scope (optional) The scope of the passed fcn (Defaults to scope of original function or window)
746      * @return {Function} The new function
747      */
748     createSequence : function(fcn, scope){
749         if(typeof fcn != "function"){
750             return this;
751         }
752         var method = this;
753         return function() {
754             var retval = method.apply(this || window, arguments);
755             fcn.apply(scope || this || window, arguments);
756             return retval;
757         };
758     },
759
760     /**
761      * Creates an interceptor function. The passed fcn is called before the original one. If it returns false, the original one is not called.
762      * The resulting function returns the results of the original function.
763      * The passed fcn is called with the parameters of the original function.
764      * @addon
765      * @param {Function} fcn The function to call before the original
766      * @param {Object} scope (optional) The scope of the passed fcn (Defaults to scope of original function or window)
767      * @return {Function} The new function
768      */
769     createInterceptor : function(fcn, scope){
770         if(typeof fcn != "function"){
771             return this;
772         }
773         var method = this;
774         return function() {
775             fcn.target = this;
776             fcn.method = method;
777             if(fcn.apply(scope || this || window, arguments) === false){
778                 return;
779             }
780             return method.apply(this || window, arguments);
781         };
782     }
783 });
784 /*
785  * Based on:
786  * Ext JS Library 1.1.1
787  * Copyright(c) 2006-2007, Ext JS, LLC.
788  *
789  * Originally Released Under LGPL - original licence link has changed is not relivant.
790  *
791  * Fork - LGPL
792  * <script type="text/javascript">
793  */
794
795 Roo.applyIf(String, {
796     
797     /** @scope String */
798     
799     /**
800      * Escapes the passed string for ' and \
801      * @param {String} string The string to escape
802      * @return {String} The escaped string
803      * @static
804      */
805     escape : function(string) {
806         return string.replace(/('|\\)/g, "\\$1");
807     },
808
809     /**
810      * Pads the left side of a string with a specified character.  This is especially useful
811      * for normalizing number and date strings.  Example usage:
812      * <pre><code>
813 var s = String.leftPad('123', 5, '0');
814 // s now contains the string: '00123'
815 </code></pre>
816      * @param {String} string The original string
817      * @param {Number} size The total length of the output string
818      * @param {String} char (optional) The character with which to pad the original string (defaults to empty string " ")
819      * @return {String} The padded string
820      * @static
821      */
822     leftPad : function (val, size, ch) {
823         var result = new String(val);
824         if(ch === null || ch === undefined || ch === '') {
825             ch = " ";
826         }
827         while (result.length < size) {
828             result = ch + result;
829         }
830         return result;
831     },
832
833     /**
834      * Allows you to define a tokenized string and pass an arbitrary number of arguments to replace the tokens.  Each
835      * token must be unique, and must increment in the format {0}, {1}, etc.  Example usage:
836      * <pre><code>
837 var cls = 'my-class', text = 'Some text';
838 var s = String.format('<div class="{0}">{1}</div>', cls, text);
839 // s now contains the string: '<div class="my-class">Some text</div>'
840 </code></pre>
841      * @param {String} string The tokenized string to be formatted
842      * @param {String} value1 The value to replace token {0}
843      * @param {String} value2 Etc...
844      * @return {String} The formatted string
845      * @static
846      */
847     format : function(format){
848         var args = Array.prototype.slice.call(arguments, 1);
849         return format.replace(/\{(\d+)\}/g, function(m, i){
850             return Roo.util.Format.htmlEncode(args[i]);
851         });
852     }
853 });
854
855 /**
856  * Utility function that allows you to easily switch a string between two alternating values.  The passed value
857  * is compared to the current string, and if they are equal, the other value that was passed in is returned.  If
858  * they are already different, the first value passed in is returned.  Note that this method returns the new value
859  * but does not change the current string.
860  * <pre><code>
861 // alternate sort directions
862 sort = sort.toggle('ASC', 'DESC');
863
864 // instead of conditional logic:
865 sort = (sort == 'ASC' ? 'DESC' : 'ASC');
866 </code></pre>
867  * @param {String} value The value to compare to the current string
868  * @param {String} other The new value to use if the string already equals the first value passed in
869  * @return {String} The new value
870  */
871  
872 String.prototype.toggle = function(value, other){
873     return this == value ? other : value;
874 };/*
875  * Based on:
876  * Ext JS Library 1.1.1
877  * Copyright(c) 2006-2007, Ext JS, LLC.
878  *
879  * Originally Released Under LGPL - original licence link has changed is not relivant.
880  *
881  * Fork - LGPL
882  * <script type="text/javascript">
883  */
884
885  /**
886  * @class Number
887  */
888 Roo.applyIf(Number.prototype, {
889     /**
890      * Checks whether or not the current number is within a desired range.  If the number is already within the
891      * range it is returned, otherwise the min or max value is returned depending on which side of the range is
892      * exceeded.  Note that this method returns the constrained value but does not change the current number.
893      * @param {Number} min The minimum number in the range
894      * @param {Number} max The maximum number in the range
895      * @return {Number} The constrained value if outside the range, otherwise the current value
896      */
897     constrain : function(min, max){
898         return Math.min(Math.max(this, min), max);
899     }
900 });/*
901  * Based on:
902  * Ext JS Library 1.1.1
903  * Copyright(c) 2006-2007, Ext JS, LLC.
904  *
905  * Originally Released Under LGPL - original licence link has changed is not relivant.
906  *
907  * Fork - LGPL
908  * <script type="text/javascript">
909  */
910  /**
911  * @class Array
912  */
913 Roo.applyIf(Array.prototype, {
914     /**
915      * Checks whether or not the specified object exists in the array.
916      * @param {Object} o The object to check for
917      * @return {Number} The index of o in the array (or -1 if it is not found)
918      */
919     indexOf : function(o){
920        for (var i = 0, len = this.length; i < len; i++){
921               if(this[i] == o) return i;
922        }
923            return -1;
924     },
925
926     /**
927      * Removes the specified object from the array.  If the object is not found nothing happens.
928      * @param {Object} o The object to remove
929      */
930     remove : function(o){
931        var index = this.indexOf(o);
932        if(index != -1){
933            this.splice(index, 1);
934        }
935     },
936     /**
937      * Map (JS 1.6 compatibility)
938      * @param {Function} function  to call
939      */
940     map : function(fun )
941     {
942         var len = this.length >>> 0;
943         if (typeof fun != "function")
944             throw new TypeError();
945
946         var res = new Array(len);
947         var thisp = arguments[1];
948         for (var i = 0; i < len; i++)
949         {
950             if (i in this)
951                 res[i] = fun.call(thisp, this[i], i, this);
952         }
953
954         return res;
955     }
956     
957 });
958
959
960  /*
961  * Based on:
962  * Ext JS Library 1.1.1
963  * Copyright(c) 2006-2007, Ext JS, LLC.
964  *
965  * Originally Released Under LGPL - original licence link has changed is not relivant.
966  *
967  * Fork - LGPL
968  * <script type="text/javascript">
969  */
970
971 /**
972  * @class Date
973  *
974  * The date parsing and format syntax is a subset of
975  * <a href="http://www.php.net/date">PHP's date() function</a>, and the formats that are
976  * supported will provide results equivalent to their PHP versions.
977  *
978  * Following is the list of all currently supported formats:
979  *<pre>
980 Sample date:
981 'Wed Jan 10 2007 15:05:01 GMT-0600 (Central Standard Time)'
982
983 Format  Output      Description
984 ------  ----------  --------------------------------------------------------------
985   d      10         Day of the month, 2 digits with leading zeros
986   D      Wed        A textual representation of a day, three letters
987   j      10         Day of the month without leading zeros
988   l      Wednesday  A full textual representation of the day of the week
989   S      th         English ordinal day of month suffix, 2 chars (use with j)
990   w      3          Numeric representation of the day of the week
991   z      9          The julian date, or day of the year (0-365)
992   W      01         ISO-8601 2-digit week number of year, weeks starting on Monday (00-52)
993   F      January    A full textual representation of the month
994   m      01         Numeric representation of a month, with leading zeros
995   M      Jan        Month name abbreviation, three letters
996   n      1          Numeric representation of a month, without leading zeros
997   t      31         Number of days in the given month
998   L      0          Whether it's a leap year (1 if it is a leap year, else 0)
999   Y      2007       A full numeric representation of a year, 4 digits
1000   y      07         A two digit representation of a year
1001   a      pm         Lowercase Ante meridiem and Post meridiem
1002   A      PM         Uppercase Ante meridiem and Post meridiem
1003   g      3          12-hour format of an hour without leading zeros
1004   G      15         24-hour format of an hour without leading zeros
1005   h      03         12-hour format of an hour with leading zeros
1006   H      15         24-hour format of an hour with leading zeros
1007   i      05         Minutes with leading zeros
1008   s      01         Seconds, with leading zeros
1009   O      -0600      Difference to Greenwich time (GMT) in hours
1010   P      -06:00     Difference to Greenwich time (GMT) with colon between hours and minutes
1011   T      CST        Timezone setting of the machine running the code
1012   Z      -21600     Timezone offset in seconds (negative if west of UTC, positive if east)
1013 </pre>
1014  *
1015  * Example usage (note that you must escape format specifiers with '\\' to render them as character literals):
1016  * <pre><code>
1017 var dt = new Date('1/10/2007 03:05:01 PM GMT-0600');
1018 document.write(dt.format('Y-m-d'));                         //2007-01-10
1019 document.write(dt.format('F j, Y, g:i a'));                 //January 10, 2007, 3:05 pm
1020 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
1021  </code></pre>
1022  *
1023  * Here are some standard date/time patterns that you might find helpful.  They
1024  * are not part of the source of Date.js, but to use them you can simply copy this
1025  * block of code into any script that is included after Date.js and they will also become
1026  * globally available on the Date object.  Feel free to add or remove patterns as needed in your code.
1027  * <pre><code>
1028 Date.patterns = {
1029     ISO8601Long:"Y-m-d H:i:s",
1030     ISO8601Short:"Y-m-d",
1031     ShortDate: "n/j/Y",
1032     LongDate: "l, F d, Y",
1033     FullDateTime: "l, F d, Y g:i:s A",
1034     MonthDay: "F d",
1035     ShortTime: "g:i A",
1036     LongTime: "g:i:s A",
1037     SortableDateTime: "Y-m-d\\TH:i:s",
1038     UniversalSortableDateTime: "Y-m-d H:i:sO",
1039     YearMonth: "F, Y"
1040 };
1041 </code></pre>
1042  *
1043  * Example usage:
1044  * <pre><code>
1045 var dt = new Date();
1046 document.write(dt.format(Date.patterns.ShortDate));
1047  </code></pre>
1048  */
1049
1050 /*
1051  * Most of the date-formatting functions below are the excellent work of Baron Schwartz.
1052  * They generate precompiled functions from date formats instead of parsing and
1053  * processing the pattern every time you format a date.  These functions are available
1054  * on every Date object (any javascript function).
1055  *
1056  * The original article and download are here:
1057  * http://www.xaprb.com/blog/2005/12/12/javascript-closures-for-runtime-efficiency/
1058  *
1059  */
1060  
1061  
1062  // was in core
1063 /**
1064  Returns the number of milliseconds between this date and date
1065  @param {Date} date (optional) Defaults to now
1066  @return {Number} The diff in milliseconds
1067  @member Date getElapsed
1068  */
1069 Date.prototype.getElapsed = function(date) {
1070         return Math.abs((date || new Date()).getTime()-this.getTime());
1071 };
1072 // was in date file..
1073
1074
1075 // private
1076 Date.parseFunctions = {count:0};
1077 // private
1078 Date.parseRegexes = [];
1079 // private
1080 Date.formatFunctions = {count:0};
1081
1082 // private
1083 Date.prototype.dateFormat = function(format) {
1084     if (Date.formatFunctions[format] == null) {
1085         Date.createNewFormat(format);
1086     }
1087     var func = Date.formatFunctions[format];
1088     return this[func]();
1089 };
1090
1091
1092 /**
1093  * Formats a date given the supplied format string
1094  * @param {String} format The format string
1095  * @return {String} The formatted date
1096  * @method
1097  */
1098 Date.prototype.format = Date.prototype.dateFormat;
1099
1100 // private
1101 Date.createNewFormat = function(format) {
1102     var funcName = "format" + Date.formatFunctions.count++;
1103     Date.formatFunctions[format] = funcName;
1104     var code = "Date.prototype." + funcName + " = function(){return ";
1105     var special = false;
1106     var ch = '';
1107     for (var i = 0; i < format.length; ++i) {
1108         ch = format.charAt(i);
1109         if (!special && ch == "\\") {
1110             special = true;
1111         }
1112         else if (special) {
1113             special = false;
1114             code += "'" + String.escape(ch) + "' + ";
1115         }
1116         else {
1117             code += Date.getFormatCode(ch);
1118         }
1119     }
1120     /** eval:var:zzzzzzzzzzzzz */
1121     eval(code.substring(0, code.length - 3) + ";}");
1122 };
1123
1124 // private
1125 Date.getFormatCode = function(character) {
1126     switch (character) {
1127     case "d":
1128         return "String.leftPad(this.getDate(), 2, '0') + ";
1129     case "D":
1130         return "Date.dayNames[this.getDay()].substring(0, 3) + ";
1131     case "j":
1132         return "this.getDate() + ";
1133     case "l":
1134         return "Date.dayNames[this.getDay()] + ";
1135     case "S":
1136         return "this.getSuffix() + ";
1137     case "w":
1138         return "this.getDay() + ";
1139     case "z":
1140         return "this.getDayOfYear() + ";
1141     case "W":
1142         return "this.getWeekOfYear() + ";
1143     case "F":
1144         return "Date.monthNames[this.getMonth()] + ";
1145     case "m":
1146         return "String.leftPad(this.getMonth() + 1, 2, '0') + ";
1147     case "M":
1148         return "Date.monthNames[this.getMonth()].substring(0, 3) + ";
1149     case "n":
1150         return "(this.getMonth() + 1) + ";
1151     case "t":
1152         return "this.getDaysInMonth() + ";
1153     case "L":
1154         return "(this.isLeapYear() ? 1 : 0) + ";
1155     case "Y":
1156         return "this.getFullYear() + ";
1157     case "y":
1158         return "('' + this.getFullYear()).substring(2, 4) + ";
1159     case "a":
1160         return "(this.getHours() < 12 ? 'am' : 'pm') + ";
1161     case "A":
1162         return "(this.getHours() < 12 ? 'AM' : 'PM') + ";
1163     case "g":
1164         return "((this.getHours() % 12) ? this.getHours() % 12 : 12) + ";
1165     case "G":
1166         return "this.getHours() + ";
1167     case "h":
1168         return "String.leftPad((this.getHours() % 12) ? this.getHours() % 12 : 12, 2, '0') + ";
1169     case "H":
1170         return "String.leftPad(this.getHours(), 2, '0') + ";
1171     case "i":
1172         return "String.leftPad(this.getMinutes(), 2, '0') + ";
1173     case "s":
1174         return "String.leftPad(this.getSeconds(), 2, '0') + ";
1175     case "O":
1176         return "this.getGMTOffset() + ";
1177     case "P":
1178         return "this.getGMTColonOffset() + ";
1179     case "T":
1180         return "this.getTimezone() + ";
1181     case "Z":
1182         return "(this.getTimezoneOffset() * -60) + ";
1183     default:
1184         return "'" + String.escape(character) + "' + ";
1185     }
1186 };
1187
1188 /**
1189  * Parses the passed string using the specified format. Note that this function expects dates in normal calendar
1190  * format, meaning that months are 1-based (1 = January) and not zero-based like in JavaScript dates.  Any part of
1191  * the date format that is not specified will default to the current date value for that part.  Time parts can also
1192  * be specified, but default to 0.  Keep in mind that the input date string must precisely match the specified format
1193  * string or the parse operation will fail.
1194  * Example Usage:
1195 <pre><code>
1196 //dt = Fri May 25 2007 (current date)
1197 var dt = new Date();
1198
1199 //dt = Thu May 25 2006 (today's month/day in 2006)
1200 dt = Date.parseDate("2006", "Y");
1201
1202 //dt = Sun Jan 15 2006 (all date parts specified)
1203 dt = Date.parseDate("2006-1-15", "Y-m-d");
1204
1205 //dt = Sun Jan 15 2006 15:20:01 GMT-0600 (CST)
1206 dt = Date.parseDate("2006-1-15 3:20:01 PM", "Y-m-d h:i:s A" );
1207 </code></pre>
1208  * @param {String} input The unparsed date as a string
1209  * @param {String} format The format the date is in
1210  * @return {Date} The parsed date
1211  * @static
1212  */
1213 Date.parseDate = function(input, format) {
1214     if (Date.parseFunctions[format] == null) {
1215         Date.createParser(format);
1216     }
1217     var func = Date.parseFunctions[format];
1218     return Date[func](input);
1219 };
1220 /**
1221  * @private
1222  */
1223 Date.createParser = function(format) {
1224     var funcName = "parse" + Date.parseFunctions.count++;
1225     var regexNum = Date.parseRegexes.length;
1226     var currentGroup = 1;
1227     Date.parseFunctions[format] = funcName;
1228
1229     var code = "Date." + funcName + " = function(input){\n"
1230         + "var y = -1, m = -1, d = -1, h = -1, i = -1, s = -1, o, z, v;\n"
1231         + "var d = new Date();\n"
1232         + "y = d.getFullYear();\n"
1233         + "m = d.getMonth();\n"
1234         + "d = d.getDate();\n"
1235         + "var results = input.match(Date.parseRegexes[" + regexNum + "]);\n"
1236         + "if (results && results.length > 0) {";
1237     var regex = "";
1238
1239     var special = false;
1240     var ch = '';
1241     for (var i = 0; i < format.length; ++i) {
1242         ch = format.charAt(i);
1243         if (!special && ch == "\\") {
1244             special = true;
1245         }
1246         else if (special) {
1247             special = false;
1248             regex += String.escape(ch);
1249         }
1250         else {
1251             var obj = Date.formatCodeToRegex(ch, currentGroup);
1252             currentGroup += obj.g;
1253             regex += obj.s;
1254             if (obj.g && obj.c) {
1255                 code += obj.c;
1256             }
1257         }
1258     }
1259
1260     code += "if (y >= 0 && m >= 0 && d > 0 && h >= 0 && i >= 0 && s >= 0)\n"
1261         + "{v = new Date(y, m, d, h, i, s);}\n"
1262         + "else if (y >= 0 && m >= 0 && d > 0 && h >= 0 && i >= 0)\n"
1263         + "{v = new Date(y, m, d, h, i);}\n"
1264         + "else if (y >= 0 && m >= 0 && d > 0 && h >= 0)\n"
1265         + "{v = new Date(y, m, d, h);}\n"
1266         + "else if (y >= 0 && m >= 0 && d > 0)\n"
1267         + "{v = new Date(y, m, d);}\n"
1268         + "else if (y >= 0 && m >= 0)\n"
1269         + "{v = new Date(y, m);}\n"
1270         + "else if (y >= 0)\n"
1271         + "{v = new Date(y);}\n"
1272         + "}return (v && (z || o))?\n" // favour UTC offset over GMT offset
1273         + "    ((z)? v.add(Date.SECOND, (v.getTimezoneOffset() * 60) + (z*1)) :\n" // reset to UTC, then add offset
1274         + "        v.add(Date.HOUR, (v.getGMTOffset() / 100) + (o / -100))) : v\n" // reset to GMT, then add offset
1275         + ";}";
1276
1277     Date.parseRegexes[regexNum] = new RegExp("^" + regex + "$");
1278     /** eval:var:zzzzzzzzzzzzz */
1279     eval(code);
1280 };
1281
1282 // private
1283 Date.formatCodeToRegex = function(character, currentGroup) {
1284     switch (character) {
1285     case "D":
1286         return {g:0,
1287         c:null,
1288         s:"(?:Sun|Mon|Tue|Wed|Thu|Fri|Sat)"};
1289     case "j":
1290         return {g:1,
1291             c:"d = parseInt(results[" + currentGroup + "], 10);\n",
1292             s:"(\\d{1,2})"}; // day of month without leading zeroes
1293     case "d":
1294         return {g:1,
1295             c:"d = parseInt(results[" + currentGroup + "], 10);\n",
1296             s:"(\\d{2})"}; // day of month with leading zeroes
1297     case "l":
1298         return {g:0,
1299             c:null,
1300             s:"(?:" + Date.dayNames.join("|") + ")"};
1301     case "S":
1302         return {g:0,
1303             c:null,
1304             s:"(?:st|nd|rd|th)"};
1305     case "w":
1306         return {g:0,
1307             c:null,
1308             s:"\\d"};
1309     case "z":
1310         return {g:0,
1311             c:null,
1312             s:"(?:\\d{1,3})"};
1313     case "W":
1314         return {g:0,
1315             c:null,
1316             s:"(?:\\d{2})"};
1317     case "F":
1318         return {g:1,
1319             c:"m = parseInt(Date.monthNumbers[results[" + currentGroup + "].substring(0, 3)], 10);\n",
1320             s:"(" + Date.monthNames.join("|") + ")"};
1321     case "M":
1322         return {g:1,
1323             c:"m = parseInt(Date.monthNumbers[results[" + currentGroup + "]], 10);\n",
1324             s:"(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)"};
1325     case "n":
1326         return {g:1,
1327             c:"m = parseInt(results[" + currentGroup + "], 10) - 1;\n",
1328             s:"(\\d{1,2})"}; // Numeric representation of a month, without leading zeros
1329     case "m":
1330         return {g:1,
1331             c:"m = parseInt(results[" + currentGroup + "], 10) - 1;\n",
1332             s:"(\\d{2})"}; // Numeric representation of a month, with leading zeros
1333     case "t":
1334         return {g:0,
1335             c:null,
1336             s:"\\d{1,2}"};
1337     case "L":
1338         return {g:0,
1339             c:null,
1340             s:"(?:1|0)"};
1341     case "Y":
1342         return {g:1,
1343             c:"y = parseInt(results[" + currentGroup + "], 10);\n",
1344             s:"(\\d{4})"};
1345     case "y":
1346         return {g:1,
1347             c:"var ty = parseInt(results[" + currentGroup + "], 10);\n"
1348                 + "y = ty > Date.y2kYear ? 1900 + ty : 2000 + ty;\n",
1349             s:"(\\d{1,2})"};
1350     case "a":
1351         return {g:1,
1352             c:"if (results[" + currentGroup + "] == 'am') {\n"
1353                 + "if (h == 12) { h = 0; }\n"
1354                 + "} else { if (h < 12) { h += 12; }}",
1355             s:"(am|pm)"};
1356     case "A":
1357         return {g:1,
1358             c:"if (results[" + currentGroup + "] == 'AM') {\n"
1359                 + "if (h == 12) { h = 0; }\n"
1360                 + "} else { if (h < 12) { h += 12; }}",
1361             s:"(AM|PM)"};
1362     case "g":
1363     case "G":
1364         return {g:1,
1365             c:"h = parseInt(results[" + currentGroup + "], 10);\n",
1366             s:"(\\d{1,2})"}; // 12/24-hr format  format of an hour without leading zeroes
1367     case "h":
1368     case "H":
1369         return {g:1,
1370             c:"h = parseInt(results[" + currentGroup + "], 10);\n",
1371             s:"(\\d{2})"}; //  12/24-hr format  format of an hour with leading zeroes
1372     case "i":
1373         return {g:1,
1374             c:"i = parseInt(results[" + currentGroup + "], 10);\n",
1375             s:"(\\d{2})"};
1376     case "s":
1377         return {g:1,
1378             c:"s = parseInt(results[" + currentGroup + "], 10);\n",
1379             s:"(\\d{2})"};
1380     case "O":
1381         return {g:1,
1382             c:[
1383                 "o = results[", currentGroup, "];\n",
1384                 "var sn = o.substring(0,1);\n", // get + / - sign
1385                 "var hr = o.substring(1,3)*1 + Math.floor(o.substring(3,5) / 60);\n", // get hours (performs minutes-to-hour conversion also)
1386                 "var mn = o.substring(3,5) % 60;\n", // get minutes
1387                 "o = ((-12 <= (hr*60 + mn)/60) && ((hr*60 + mn)/60 <= 14))?\n", // -12hrs <= GMT offset <= 14hrs
1388                 "    (sn + String.leftPad(hr, 2, 0) + String.leftPad(mn, 2, 0)) : null;\n"
1389             ].join(""),
1390             s:"([+\-]\\d{4})"};
1391     case "P":
1392         return {g:1,
1393                 c:[
1394                    "o = results[", currentGroup, "];\n",
1395                    "var sn = o.substring(0,1);\n",
1396                    "var hr = o.substring(1,3)*1 + Math.floor(o.substring(4,6) / 60);\n",
1397                    "var mn = o.substring(4,6) % 60;\n",
1398                    "o = ((-12 <= (hr*60 + mn)/60) && ((hr*60 + mn)/60 <= 14))?\n",
1399                         "    (sn + String.leftPad(hr, 2, 0) + String.leftPad(mn, 2, 0)) : null;\n"
1400             ].join(""),
1401             s:"([+\-]\\d{4})"};
1402     case "T":
1403         return {g:0,
1404             c:null,
1405             s:"[A-Z]{1,4}"}; // timezone abbrev. may be between 1 - 4 chars
1406     case "Z":
1407         return {g:1,
1408             c:"z = results[" + currentGroup + "];\n" // -43200 <= UTC offset <= 50400
1409                   + "z = (-43200 <= z*1 && z*1 <= 50400)? z : null;\n",
1410             s:"([+\-]?\\d{1,5})"}; // leading '+' sign is optional for UTC offset
1411     default:
1412         return {g:0,
1413             c:null,
1414             s:String.escape(character)};
1415     }
1416 };
1417
1418 /**
1419  * Get the timezone abbreviation of the current date (equivalent to the format specifier 'T').
1420  * @return {String} The abbreviated timezone name (e.g. 'CST')
1421  */
1422 Date.prototype.getTimezone = function() {
1423     return this.toString().replace(/^.*? ([A-Z]{1,4})[\-+][0-9]{4} .*$/, "$1");
1424 };
1425
1426 /**
1427  * Get the offset from GMT of the current date (equivalent to the format specifier 'O').
1428  * @return {String} The 4-character offset string prefixed with + or - (e.g. '-0600')
1429  */
1430 Date.prototype.getGMTOffset = function() {
1431     return (this.getTimezoneOffset() > 0 ? "-" : "+")
1432         + String.leftPad(Math.abs(Math.floor(this.getTimezoneOffset() / 60)), 2, "0")
1433         + String.leftPad(this.getTimezoneOffset() % 60, 2, "0");
1434 };
1435
1436 /**
1437  * Get the offset from GMT of the current date (equivalent to the format specifier 'P').
1438  * @return {String} 2-characters representing hours and 2-characters representing minutes
1439  * seperated by a colon and prefixed with + or - (e.g. '-06:00')
1440  */
1441 Date.prototype.getGMTColonOffset = function() {
1442         return (this.getTimezoneOffset() > 0 ? "-" : "+")
1443                 + String.leftPad(Math.abs(Math.floor(this.getTimezoneOffset() / 60)), 2, "0")
1444                 + ":"
1445                 + String.leftPad(this.getTimezoneOffset() %60, 2, "0");
1446 }
1447
1448 /**
1449  * Get the numeric day number of the year, adjusted for leap year.
1450  * @return {Number} 0 through 364 (365 in leap years)
1451  */
1452 Date.prototype.getDayOfYear = function() {
1453     var num = 0;
1454     Date.daysInMonth[1] = this.isLeapYear() ? 29 : 28;
1455     for (var i = 0; i < this.getMonth(); ++i) {
1456         num += Date.daysInMonth[i];
1457     }
1458     return num + this.getDate() - 1;
1459 };
1460
1461 /**
1462  * Get the string representation of the numeric week number of the year
1463  * (equivalent to the format specifier 'W').
1464  * @return {String} '00' through '52'
1465  */
1466 Date.prototype.getWeekOfYear = function() {
1467     // Skip to Thursday of this week
1468     var now = this.getDayOfYear() + (4 - this.getDay());
1469     // Find the first Thursday of the year
1470     var jan1 = new Date(this.getFullYear(), 0, 1);
1471     var then = (7 - jan1.getDay() + 4);
1472     return String.leftPad(((now - then) / 7) + 1, 2, "0");
1473 };
1474
1475 /**
1476  * Whether or not the current date is in a leap year.
1477  * @return {Boolean} True if the current date is in a leap year, else false
1478  */
1479 Date.prototype.isLeapYear = function() {
1480     var year = this.getFullYear();
1481     return ((year & 3) == 0 && (year % 100 || (year % 400 == 0 && year)));
1482 };
1483
1484 /**
1485  * Get the first day of the current month, adjusted for leap year.  The returned value
1486  * is the numeric day index within the week (0-6) which can be used in conjunction with
1487  * the {@link #monthNames} array to retrieve the textual day name.
1488  * Example:
1489  *<pre><code>
1490 var dt = new Date('1/10/2007');
1491 document.write(Date.dayNames[dt.getFirstDayOfMonth()]); //output: 'Monday'
1492 </code></pre>
1493  * @return {Number} The day number (0-6)
1494  */
1495 Date.prototype.getFirstDayOfMonth = function() {
1496     var day = (this.getDay() - (this.getDate() - 1)) % 7;
1497     return (day < 0) ? (day + 7) : day;
1498 };
1499
1500 /**
1501  * Get the last day of the current month, adjusted for leap year.  The returned value
1502  * is the numeric day index within the week (0-6) which can be used in conjunction with
1503  * the {@link #monthNames} array to retrieve the textual day name.
1504  * Example:
1505  *<pre><code>
1506 var dt = new Date('1/10/2007');
1507 document.write(Date.dayNames[dt.getLastDayOfMonth()]); //output: 'Wednesday'
1508 </code></pre>
1509  * @return {Number} The day number (0-6)
1510  */
1511 Date.prototype.getLastDayOfMonth = function() {
1512     var day = (this.getDay() + (Date.daysInMonth[this.getMonth()] - this.getDate())) % 7;
1513     return (day < 0) ? (day + 7) : day;
1514 };
1515
1516
1517 /**
1518  * Get the first date of this date's month
1519  * @return {Date}
1520  */
1521 Date.prototype.getFirstDateOfMonth = function() {
1522     return new Date(this.getFullYear(), this.getMonth(), 1);
1523 };
1524
1525 /**
1526  * Get the last date of this date's month
1527  * @return {Date}
1528  */
1529 Date.prototype.getLastDateOfMonth = function() {
1530     return new Date(this.getFullYear(), this.getMonth(), this.getDaysInMonth());
1531 };
1532 /**
1533  * Get the number of days in the current month, adjusted for leap year.
1534  * @return {Number} The number of days in the month
1535  */
1536 Date.prototype.getDaysInMonth = function() {
1537     Date.daysInMonth[1] = this.isLeapYear() ? 29 : 28;
1538     return Date.daysInMonth[this.getMonth()];
1539 };
1540
1541 /**
1542  * Get the English ordinal suffix of the current day (equivalent to the format specifier 'S').
1543  * @return {String} 'st, 'nd', 'rd' or 'th'
1544  */
1545 Date.prototype.getSuffix = function() {
1546     switch (this.getDate()) {
1547         case 1:
1548         case 21:
1549         case 31:
1550             return "st";
1551         case 2:
1552         case 22:
1553             return "nd";
1554         case 3:
1555         case 23:
1556             return "rd";
1557         default:
1558             return "th";
1559     }
1560 };
1561
1562 // private
1563 Date.daysInMonth = [31,28,31,30,31,30,31,31,30,31,30,31];
1564
1565 /**
1566  * An array of textual month names.
1567  * Override these values for international dates, for example...
1568  * Date.monthNames = ['JanInYourLang', 'FebInYourLang', ...];
1569  * @type Array
1570  * @static
1571  */
1572 Date.monthNames =
1573    ["January",
1574     "February",
1575     "March",
1576     "April",
1577     "May",
1578     "June",
1579     "July",
1580     "August",
1581     "September",
1582     "October",
1583     "November",
1584     "December"];
1585
1586 /**
1587  * An array of textual day names.
1588  * Override these values for international dates, for example...
1589  * Date.dayNames = ['SundayInYourLang', 'MondayInYourLang', ...];
1590  * @type Array
1591  * @static
1592  */
1593 Date.dayNames =
1594    ["Sunday",
1595     "Monday",
1596     "Tuesday",
1597     "Wednesday",
1598     "Thursday",
1599     "Friday",
1600     "Saturday"];
1601
1602 // private
1603 Date.y2kYear = 50;
1604 // private
1605 Date.monthNumbers = {
1606     Jan:0,
1607     Feb:1,
1608     Mar:2,
1609     Apr:3,
1610     May:4,
1611     Jun:5,
1612     Jul:6,
1613     Aug:7,
1614     Sep:8,
1615     Oct:9,
1616     Nov:10,
1617     Dec:11};
1618
1619 /**
1620  * Creates and returns a new Date instance with the exact same date value as the called instance.
1621  * Dates are copied and passed by reference, so if a copied date variable is modified later, the original
1622  * variable will also be changed.  When the intention is to create a new variable that will not
1623  * modify the original instance, you should create a clone.
1624  *
1625  * Example of correctly cloning a date:
1626  * <pre><code>
1627 //wrong way:
1628 var orig = new Date('10/1/2006');
1629 var copy = orig;
1630 copy.setDate(5);
1631 document.write(orig);  //returns 'Thu Oct 05 2006'!
1632
1633 //correct way:
1634 var orig = new Date('10/1/2006');
1635 var copy = orig.clone();
1636 copy.setDate(5);
1637 document.write(orig);  //returns 'Thu Oct 01 2006'
1638 </code></pre>
1639  * @return {Date} The new Date instance
1640  */
1641 Date.prototype.clone = function() {
1642         return new Date(this.getTime());
1643 };
1644
1645 /**
1646  * Clears any time information from this date
1647  @param {Boolean} clone true to create a clone of this date, clear the time and return it
1648  @return {Date} this or the clone
1649  */
1650 Date.prototype.clearTime = function(clone){
1651     if(clone){
1652         return this.clone().clearTime();
1653     }
1654     this.setHours(0);
1655     this.setMinutes(0);
1656     this.setSeconds(0);
1657     this.setMilliseconds(0);
1658     return this;
1659 };
1660
1661 // private
1662 // safari setMonth is broken
1663 if(Roo.isSafari){
1664     Date.brokenSetMonth = Date.prototype.setMonth;
1665         Date.prototype.setMonth = function(num){
1666                 if(num <= -1){
1667                         var n = Math.ceil(-num);
1668                         var back_year = Math.ceil(n/12);
1669                         var month = (n % 12) ? 12 - n % 12 : 0 ;
1670                         this.setFullYear(this.getFullYear() - back_year);
1671                         return Date.brokenSetMonth.call(this, month);
1672                 } else {
1673                         return Date.brokenSetMonth.apply(this, arguments);
1674                 }
1675         };
1676 }
1677
1678 /** Date interval constant 
1679 * @static 
1680 * @type String */
1681 Date.MILLI = "ms";
1682 /** Date interval constant 
1683 * @static 
1684 * @type String */
1685 Date.SECOND = "s";
1686 /** Date interval constant 
1687 * @static 
1688 * @type String */
1689 Date.MINUTE = "mi";
1690 /** Date interval constant 
1691 * @static 
1692 * @type String */
1693 Date.HOUR = "h";
1694 /** Date interval constant 
1695 * @static 
1696 * @type String */
1697 Date.DAY = "d";
1698 /** Date interval constant 
1699 * @static 
1700 * @type String */
1701 Date.MONTH = "mo";
1702 /** Date interval constant 
1703 * @static 
1704 * @type String */
1705 Date.YEAR = "y";
1706
1707 /**
1708  * Provides a convenient method of performing basic date arithmetic.  This method
1709  * does not modify the Date instance being called - it creates and returns
1710  * a new Date instance containing the resulting date value.
1711  *
1712  * Examples:
1713  * <pre><code>
1714 //Basic usage:
1715 var dt = new Date('10/29/2006').add(Date.DAY, 5);
1716 document.write(dt); //returns 'Fri Oct 06 2006 00:00:00'
1717
1718 //Negative values will subtract correctly:
1719 var dt2 = new Date('10/1/2006').add(Date.DAY, -5);
1720 document.write(dt2); //returns 'Tue Sep 26 2006 00:00:00'
1721
1722 //You can even chain several calls together in one line!
1723 var dt3 = new Date('10/1/2006').add(Date.DAY, 5).add(Date.HOUR, 8).add(Date.MINUTE, -30);
1724 document.write(dt3); //returns 'Fri Oct 06 2006 07:30:00'
1725  </code></pre>
1726  *
1727  * @param {String} interval   A valid date interval enum value
1728  * @param {Number} value      The amount to add to the current date
1729  * @return {Date} The new Date instance
1730  */
1731 Date.prototype.add = function(interval, value){
1732   var d = this.clone();
1733   if (!interval || value === 0) return d;
1734   switch(interval.toLowerCase()){
1735     case Date.MILLI:
1736       d.setMilliseconds(this.getMilliseconds() + value);
1737       break;
1738     case Date.SECOND:
1739       d.setSeconds(this.getSeconds() + value);
1740       break;
1741     case Date.MINUTE:
1742       d.setMinutes(this.getMinutes() + value);
1743       break;
1744     case Date.HOUR:
1745       d.setHours(this.getHours() + value);
1746       break;
1747     case Date.DAY:
1748       d.setDate(this.getDate() + value);
1749       break;
1750     case Date.MONTH:
1751       var day = this.getDate();
1752       if(day > 28){
1753           day = Math.min(day, this.getFirstDateOfMonth().add('mo', value).getLastDateOfMonth().getDate());
1754       }
1755       d.setDate(day);
1756       d.setMonth(this.getMonth() + value);
1757       break;
1758     case Date.YEAR:
1759       d.setFullYear(this.getFullYear() + value);
1760       break;
1761   }
1762   return d;
1763 };
1764 /*
1765  * Based on:
1766  * Ext JS Library 1.1.1
1767  * Copyright(c) 2006-2007, Ext JS, LLC.
1768  *
1769  * Originally Released Under LGPL - original licence link has changed is not relivant.
1770  *
1771  * Fork - LGPL
1772  * <script type="text/javascript">
1773  */
1774
1775 Roo.lib.Dom = {
1776     getViewWidth : function(full) {
1777         return full ? this.getDocumentWidth() : this.getViewportWidth();
1778     },
1779
1780     getViewHeight : function(full) {
1781         return full ? this.getDocumentHeight() : this.getViewportHeight();
1782     },
1783
1784     getDocumentHeight: function() {
1785         var scrollHeight = (document.compatMode != "CSS1Compat") ? document.body.scrollHeight : document.documentElement.scrollHeight;
1786         return Math.max(scrollHeight, this.getViewportHeight());
1787     },
1788
1789     getDocumentWidth: function() {
1790         var scrollWidth = (document.compatMode != "CSS1Compat") ? document.body.scrollWidth : document.documentElement.scrollWidth;
1791         return Math.max(scrollWidth, this.getViewportWidth());
1792     },
1793
1794     getViewportHeight: function() {
1795         var height = self.innerHeight;
1796         var mode = document.compatMode;
1797
1798         if ((mode || Roo.isIE) && !Roo.isOpera) {
1799             height = (mode == "CSS1Compat") ?
1800                      document.documentElement.clientHeight :
1801                      document.body.clientHeight;
1802         }
1803
1804         return height;
1805     },
1806
1807     getViewportWidth: function() {
1808         var width = self.innerWidth;
1809         var mode = document.compatMode;
1810
1811         if (mode || Roo.isIE) {
1812             width = (mode == "CSS1Compat") ?
1813                     document.documentElement.clientWidth :
1814                     document.body.clientWidth;
1815         }
1816         return width;
1817     },
1818
1819     isAncestor : function(p, c) {
1820         p = Roo.getDom(p);
1821         c = Roo.getDom(c);
1822         if (!p || !c) {
1823             return false;
1824         }
1825
1826         if (p.contains && !Roo.isSafari) {
1827             return p.contains(c);
1828         } else if (p.compareDocumentPosition) {
1829             return !!(p.compareDocumentPosition(c) & 16);
1830         } else {
1831             var parent = c.parentNode;
1832             while (parent) {
1833                 if (parent == p) {
1834                     return true;
1835                 }
1836                 else if (!parent.tagName || parent.tagName.toUpperCase() == "HTML") {
1837                     return false;
1838                 }
1839                 parent = parent.parentNode;
1840             }
1841             return false;
1842         }
1843     },
1844
1845     getRegion : function(el) {
1846         return Roo.lib.Region.getRegion(el);
1847     },
1848
1849     getY : function(el) {
1850         return this.getXY(el)[1];
1851     },
1852
1853     getX : function(el) {
1854         return this.getXY(el)[0];
1855     },
1856
1857     getXY : function(el) {
1858         var p, pe, b, scroll, bd = document.body;
1859         el = Roo.getDom(el);
1860         var fly = Roo.lib.AnimBase.fly;
1861         if (el.getBoundingClientRect) {
1862             b = el.getBoundingClientRect();
1863             scroll = fly(document).getScroll();
1864             return [b.left + scroll.left, b.top + scroll.top];
1865         }
1866         var x = 0, y = 0;
1867
1868         p = el;
1869
1870         var hasAbsolute = fly(el).getStyle("position") == "absolute";
1871
1872         while (p) {
1873
1874             x += p.offsetLeft;
1875             y += p.offsetTop;
1876
1877             if (!hasAbsolute && fly(p).getStyle("position") == "absolute") {
1878                 hasAbsolute = true;
1879             }
1880
1881             if (Roo.isGecko) {
1882                 pe = fly(p);
1883
1884                 var bt = parseInt(pe.getStyle("borderTopWidth"), 10) || 0;
1885                 var bl = parseInt(pe.getStyle("borderLeftWidth"), 10) || 0;
1886
1887
1888                 x += bl;
1889                 y += bt;
1890
1891
1892                 if (p != el && pe.getStyle('overflow') != 'visible') {
1893                     x += bl;
1894                     y += bt;
1895                 }
1896             }
1897             p = p.offsetParent;
1898         }
1899
1900         if (Roo.isSafari && hasAbsolute) {
1901             x -= bd.offsetLeft;
1902             y -= bd.offsetTop;
1903         }
1904
1905         if (Roo.isGecko && !hasAbsolute) {
1906             var dbd = fly(bd);
1907             x += parseInt(dbd.getStyle("borderLeftWidth"), 10) || 0;
1908             y += parseInt(dbd.getStyle("borderTopWidth"), 10) || 0;
1909         }
1910
1911         p = el.parentNode;
1912         while (p && p != bd) {
1913             if (!Roo.isOpera || (p.tagName != 'TR' && fly(p).getStyle("display") != "inline")) {
1914                 x -= p.scrollLeft;
1915                 y -= p.scrollTop;
1916             }
1917             p = p.parentNode;
1918         }
1919         return [x, y];
1920     },
1921  
1922   
1923
1924
1925     setXY : function(el, xy) {
1926         el = Roo.fly(el, '_setXY');
1927         el.position();
1928         var pts = el.translatePoints(xy);
1929         if (xy[0] !== false) {
1930             el.dom.style.left = pts.left + "px";
1931         }
1932         if (xy[1] !== false) {
1933             el.dom.style.top = pts.top + "px";
1934         }
1935     },
1936
1937     setX : function(el, x) {
1938         this.setXY(el, [x, false]);
1939     },
1940
1941     setY : function(el, y) {
1942         this.setXY(el, [false, y]);
1943     }
1944 };
1945 /*
1946  * Portions of this file are based on pieces of Yahoo User Interface Library
1947  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
1948  * YUI licensed under the BSD License:
1949  * http://developer.yahoo.net/yui/license.txt
1950  * <script type="text/javascript">
1951  *
1952  */
1953
1954 Roo.lib.Event = function() {
1955     var loadComplete = false;
1956     var listeners = [];
1957     var unloadListeners = [];
1958     var retryCount = 0;
1959     var onAvailStack = [];
1960     var counter = 0;
1961     var lastError = null;
1962
1963     return {
1964         POLL_RETRYS: 200,
1965         POLL_INTERVAL: 20,
1966         EL: 0,
1967         TYPE: 1,
1968         FN: 2,
1969         WFN: 3,
1970         OBJ: 3,
1971         ADJ_SCOPE: 4,
1972         _interval: null,
1973
1974         startInterval: function() {
1975             if (!this._interval) {
1976                 var self = this;
1977                 var callback = function() {
1978                     self._tryPreloadAttach();
1979                 };
1980                 this._interval = setInterval(callback, this.POLL_INTERVAL);
1981
1982             }
1983         },
1984
1985         onAvailable: function(p_id, p_fn, p_obj, p_override) {
1986             onAvailStack.push({ id:         p_id,
1987                 fn:         p_fn,
1988                 obj:        p_obj,
1989                 override:   p_override,
1990                 checkReady: false    });
1991
1992             retryCount = this.POLL_RETRYS;
1993             this.startInterval();
1994         },
1995
1996
1997         addListener: function(el, eventName, fn) {
1998             el = Roo.getDom(el);
1999             if (!el || !fn) {
2000                 return false;
2001             }
2002
2003             if ("unload" == eventName) {
2004                 unloadListeners[unloadListeners.length] =
2005                 [el, eventName, fn];
2006                 return true;
2007             }
2008
2009             var wrappedFn = function(e) {
2010                 return fn(Roo.lib.Event.getEvent(e));
2011             };
2012
2013             var li = [el, eventName, fn, wrappedFn];
2014
2015             var index = listeners.length;
2016             listeners[index] = li;
2017
2018             this.doAdd(el, eventName, wrappedFn, false);
2019             return true;
2020
2021         },
2022
2023
2024         removeListener: function(el, eventName, fn) {
2025             var i, len;
2026
2027             el = Roo.getDom(el);
2028
2029             if(!fn) {
2030                 return this.purgeElement(el, false, eventName);
2031             }
2032
2033
2034             if ("unload" == eventName) {
2035
2036                 for (i = 0,len = unloadListeners.length; i < len; i++) {
2037                     var li = unloadListeners[i];
2038                     if (li &&
2039                         li[0] == el &&
2040                         li[1] == eventName &&
2041                         li[2] == fn) {
2042                         unloadListeners.splice(i, 1);
2043                         return true;
2044                     }
2045                 }
2046
2047                 return false;
2048             }
2049
2050             var cacheItem = null;
2051
2052
2053             var index = arguments[3];
2054
2055             if ("undefined" == typeof index) {
2056                 index = this._getCacheIndex(el, eventName, fn);
2057             }
2058
2059             if (index >= 0) {
2060                 cacheItem = listeners[index];
2061             }
2062
2063             if (!el || !cacheItem) {
2064                 return false;
2065             }
2066
2067             this.doRemove(el, eventName, cacheItem[this.WFN], false);
2068
2069             delete listeners[index][this.WFN];
2070             delete listeners[index][this.FN];
2071             listeners.splice(index, 1);
2072
2073             return true;
2074
2075         },
2076
2077
2078         getTarget: function(ev, resolveTextNode) {
2079             ev = ev.browserEvent || ev;
2080             var t = ev.target || ev.srcElement;
2081             return this.resolveTextNode(t);
2082         },
2083
2084
2085         resolveTextNode: function(node) {
2086             if (Roo.isSafari && node && 3 == node.nodeType) {
2087                 return node.parentNode;
2088             } else {
2089                 return node;
2090             }
2091         },
2092
2093
2094         getPageX: function(ev) {
2095             ev = ev.browserEvent || ev;
2096             var x = ev.pageX;
2097             if (!x && 0 !== x) {
2098                 x = ev.clientX || 0;
2099
2100                 if (Roo.isIE) {
2101                     x += this.getScroll()[1];
2102                 }
2103             }
2104
2105             return x;
2106         },
2107
2108
2109         getPageY: function(ev) {
2110             ev = ev.browserEvent || ev;
2111             var y = ev.pageY;
2112             if (!y && 0 !== y) {
2113                 y = ev.clientY || 0;
2114
2115                 if (Roo.isIE) {
2116                     y += this.getScroll()[0];
2117                 }
2118             }
2119
2120
2121             return y;
2122         },
2123
2124
2125         getXY: function(ev) {
2126             ev = ev.browserEvent || ev;
2127             return [this.getPageX(ev), this.getPageY(ev)];
2128         },
2129
2130
2131         getRelatedTarget: function(ev) {
2132             ev = ev.browserEvent || ev;
2133             var t = ev.relatedTarget;
2134             if (!t) {
2135                 if (ev.type == "mouseout") {
2136                     t = ev.toElement;
2137                 } else if (ev.type == "mouseover") {
2138                     t = ev.fromElement;
2139                 }
2140             }
2141
2142             return this.resolveTextNode(t);
2143         },
2144
2145
2146         getTime: function(ev) {
2147             ev = ev.browserEvent || ev;
2148             if (!ev.time) {
2149                 var t = new Date().getTime();
2150                 try {
2151                     ev.time = t;
2152                 } catch(ex) {
2153                     this.lastError = ex;
2154                     return t;
2155                 }
2156             }
2157
2158             return ev.time;
2159         },
2160
2161
2162         stopEvent: function(ev) {
2163             this.stopPropagation(ev);
2164             this.preventDefault(ev);
2165         },
2166
2167
2168         stopPropagation: function(ev) {
2169             ev = ev.browserEvent || ev;
2170             if (ev.stopPropagation) {
2171                 ev.stopPropagation();
2172             } else {
2173                 ev.cancelBubble = true;
2174             }
2175         },
2176
2177
2178         preventDefault: function(ev) {
2179             ev = ev.browserEvent || ev;
2180             if(ev.preventDefault) {
2181                 ev.preventDefault();
2182             } else {
2183                 ev.returnValue = false;
2184             }
2185         },
2186
2187
2188         getEvent: function(e) {
2189             var ev = e || window.event;
2190             if (!ev) {
2191                 var c = this.getEvent.caller;
2192                 while (c) {
2193                     ev = c.arguments[0];
2194                     if (ev && Event == ev.constructor) {
2195                         break;
2196                     }
2197                     c = c.caller;
2198                 }
2199             }
2200             return ev;
2201         },
2202
2203
2204         getCharCode: function(ev) {
2205             ev = ev.browserEvent || ev;
2206             return ev.charCode || ev.keyCode || 0;
2207         },
2208
2209
2210         _getCacheIndex: function(el, eventName, fn) {
2211             for (var i = 0,len = listeners.length; i < len; ++i) {
2212                 var li = listeners[i];
2213                 if (li &&
2214                     li[this.FN] == fn &&
2215                     li[this.EL] == el &&
2216                     li[this.TYPE] == eventName) {
2217                     return i;
2218                 }
2219             }
2220
2221             return -1;
2222         },
2223
2224
2225         elCache: {},
2226
2227
2228         getEl: function(id) {
2229             return document.getElementById(id);
2230         },
2231
2232
2233         clearCache: function() {
2234         },
2235
2236
2237         _load: function(e) {
2238             loadComplete = true;
2239             var EU = Roo.lib.Event;
2240
2241
2242             if (Roo.isIE) {
2243                 EU.doRemove(window, "load", EU._load);
2244             }
2245         },
2246
2247
2248         _tryPreloadAttach: function() {
2249
2250             if (this.locked) {
2251                 return false;
2252             }
2253
2254             this.locked = true;
2255
2256
2257             var tryAgain = !loadComplete;
2258             if (!tryAgain) {
2259                 tryAgain = (retryCount > 0);
2260             }
2261
2262
2263             var notAvail = [];
2264             for (var i = 0,len = onAvailStack.length; i < len; ++i) {
2265                 var item = onAvailStack[i];
2266                 if (item) {
2267                     var el = this.getEl(item.id);
2268
2269                     if (el) {
2270                         if (!item.checkReady ||
2271                             loadComplete ||
2272                             el.nextSibling ||
2273                             (document && document.body)) {
2274
2275                             var scope = el;
2276                             if (item.override) {
2277                                 if (item.override === true) {
2278                                     scope = item.obj;
2279                                 } else {
2280                                     scope = item.override;
2281                                 }
2282                             }
2283                             item.fn.call(scope, item.obj);
2284                             onAvailStack[i] = null;
2285                         }
2286                     } else {
2287                         notAvail.push(item);
2288                     }
2289                 }
2290             }
2291
2292             retryCount = (notAvail.length === 0) ? 0 : retryCount - 1;
2293
2294             if (tryAgain) {
2295
2296                 this.startInterval();
2297             } else {
2298                 clearInterval(this._interval);
2299                 this._interval = null;
2300             }
2301
2302             this.locked = false;
2303
2304             return true;
2305
2306         },
2307
2308
2309         purgeElement: function(el, recurse, eventName) {
2310             var elListeners = this.getListeners(el, eventName);
2311             if (elListeners) {
2312                 for (var i = 0,len = elListeners.length; i < len; ++i) {
2313                     var l = elListeners[i];
2314                     this.removeListener(el, l.type, l.fn);
2315                 }
2316             }
2317
2318             if (recurse && el && el.childNodes) {
2319                 for (i = 0,len = el.childNodes.length; i < len; ++i) {
2320                     this.purgeElement(el.childNodes[i], recurse, eventName);
2321                 }
2322             }
2323         },
2324
2325
2326         getListeners: function(el, eventName) {
2327             var results = [], searchLists;
2328             if (!eventName) {
2329                 searchLists = [listeners, unloadListeners];
2330             } else if (eventName == "unload") {
2331                 searchLists = [unloadListeners];
2332             } else {
2333                 searchLists = [listeners];
2334             }
2335
2336             for (var j = 0; j < searchLists.length; ++j) {
2337                 var searchList = searchLists[j];
2338                 if (searchList && searchList.length > 0) {
2339                     for (var i = 0,len = searchList.length; i < len; ++i) {
2340                         var l = searchList[i];
2341                         if (l && l[this.EL] === el &&
2342                             (!eventName || eventName === l[this.TYPE])) {
2343                             results.push({
2344                                 type:   l[this.TYPE],
2345                                 fn:     l[this.FN],
2346                                 obj:    l[this.OBJ],
2347                                 adjust: l[this.ADJ_SCOPE],
2348                                 index:  i
2349                             });
2350                         }
2351                     }
2352                 }
2353             }
2354
2355             return (results.length) ? results : null;
2356         },
2357
2358
2359         _unload: function(e) {
2360
2361             var EU = Roo.lib.Event, i, j, l, len, index;
2362
2363             for (i = 0,len = unloadListeners.length; i < len; ++i) {
2364                 l = unloadListeners[i];
2365                 if (l) {
2366                     var scope = window;
2367                     if (l[EU.ADJ_SCOPE]) {
2368                         if (l[EU.ADJ_SCOPE] === true) {
2369                             scope = l[EU.OBJ];
2370                         } else {
2371                             scope = l[EU.ADJ_SCOPE];
2372                         }
2373                     }
2374                     l[EU.FN].call(scope, EU.getEvent(e), l[EU.OBJ]);
2375                     unloadListeners[i] = null;
2376                     l = null;
2377                     scope = null;
2378                 }
2379             }
2380
2381             unloadListeners = null;
2382
2383             if (listeners && listeners.length > 0) {
2384                 j = listeners.length;
2385                 while (j) {
2386                     index = j - 1;
2387                     l = listeners[index];
2388                     if (l) {
2389                         EU.removeListener(l[EU.EL], l[EU.TYPE],
2390                                 l[EU.FN], index);
2391                     }
2392                     j = j - 1;
2393                 }
2394                 l = null;
2395
2396                 EU.clearCache();
2397             }
2398
2399             EU.doRemove(window, "unload", EU._unload);
2400
2401         },
2402
2403
2404         getScroll: function() {
2405             var dd = document.documentElement, db = document.body;
2406             if (dd && (dd.scrollTop || dd.scrollLeft)) {
2407                 return [dd.scrollTop, dd.scrollLeft];
2408             } else if (db) {
2409                 return [db.scrollTop, db.scrollLeft];
2410             } else {
2411                 return [0, 0];
2412             }
2413         },
2414
2415
2416         doAdd: function () {
2417             if (window.addEventListener) {
2418                 return function(el, eventName, fn, capture) {
2419                     el.addEventListener(eventName, fn, (capture));
2420                 };
2421             } else if (window.attachEvent) {
2422                 return function(el, eventName, fn, capture) {
2423                     el.attachEvent("on" + eventName, fn);
2424                 };
2425             } else {
2426                 return function() {
2427                 };
2428             }
2429         }(),
2430
2431
2432         doRemove: function() {
2433             if (window.removeEventListener) {
2434                 return function (el, eventName, fn, capture) {
2435                     el.removeEventListener(eventName, fn, (capture));
2436                 };
2437             } else if (window.detachEvent) {
2438                 return function (el, eventName, fn) {
2439                     el.detachEvent("on" + eventName, fn);
2440                 };
2441             } else {
2442                 return function() {
2443                 };
2444             }
2445         }()
2446     };
2447     
2448 }();
2449 (function() {     
2450    
2451     var E = Roo.lib.Event;
2452     E.on = E.addListener;
2453     E.un = E.removeListener;
2454
2455     if (document && document.body) {
2456         E._load();
2457     } else {
2458         E.doAdd(window, "load", E._load);
2459     }
2460     E.doAdd(window, "unload", E._unload);
2461     E._tryPreloadAttach();
2462 })();
2463
2464 /*
2465  * Portions of this file are based on pieces of Yahoo User Interface Library
2466  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
2467  * YUI licensed under the BSD License:
2468  * http://developer.yahoo.net/yui/license.txt
2469  * <script type="text/javascript">
2470  *
2471  */
2472
2473 (function() {
2474     
2475     Roo.lib.Ajax = {
2476         request : function(method, uri, cb, data, options) {
2477             if(options){
2478                 var hs = options.headers;
2479                 if(hs){
2480                     for(var h in hs){
2481                         if(hs.hasOwnProperty(h)){
2482                             this.initHeader(h, hs[h], false);
2483                         }
2484                     }
2485                 }
2486                 if(options.xmlData){
2487                     this.initHeader('Content-Type', 'text/xml', false);
2488                     method = 'POST';
2489                     data = options.xmlData;
2490                 }
2491             }
2492
2493             return this.asyncRequest(method, uri, cb, data);
2494         },
2495
2496         serializeForm : function(form) {
2497             if(typeof form == 'string') {
2498                 form = (document.getElementById(form) || document.forms[form]);
2499             }
2500
2501             var el, name, val, disabled, data = '', hasSubmit = false;
2502             for (var i = 0; i < form.elements.length; i++) {
2503                 el = form.elements[i];
2504                 disabled = form.elements[i].disabled;
2505                 name = form.elements[i].name;
2506                 val = form.elements[i].value;
2507
2508                 if (!disabled && name){
2509                     switch (el.type)
2510                             {
2511                         case 'select-one':
2512                         case 'select-multiple':
2513                             for (var j = 0; j < el.options.length; j++) {
2514                                 if (el.options[j].selected) {
2515                                     if (Roo.isIE) {
2516                                         data += Roo.encodeURIComponent(name) + '=' + Roo.encodeURIComponent(el.options[j].attributes['value'].specified ? el.options[j].value : el.options[j].text) + '&';
2517                                     }
2518                                     else {
2519                                         data += Roo.encodeURIComponent(name) + '=' + Roo.encodeURIComponent(el.options[j].hasAttribute('value') ? el.options[j].value : el.options[j].text) + '&';
2520                                     }
2521                                 }
2522                             }
2523                             break;
2524                         case 'radio':
2525                         case 'checkbox':
2526                             if (el.checked) {
2527                                 data += Roo.encodeURIComponent(name) + '=' + Roo.encodeURIComponent(val) + '&';
2528                             }
2529                             break;
2530                         case 'file':
2531
2532                         case undefined:
2533
2534                         case 'reset':
2535
2536                         case 'button':
2537
2538                             break;
2539                         case 'submit':
2540                             if(hasSubmit == false) {
2541                                 data += Roo.encodeURIComponent(name) + '=' + Roo.encodeURIComponent(val) + '&';
2542                                 hasSubmit = true;
2543                             }
2544                             break;
2545                         default:
2546                             data += Roo.encodeURIComponent(name) + '=' + Roo.encodeURIComponent(val) + '&';
2547                             break;
2548                     }
2549                 }
2550             }
2551             data = data.substr(0, data.length - 1);
2552             return data;
2553         },
2554
2555         headers:{},
2556
2557         hasHeaders:false,
2558
2559         useDefaultHeader:true,
2560
2561         defaultPostHeader:'application/x-www-form-urlencoded',
2562
2563         useDefaultXhrHeader:true,
2564
2565         defaultXhrHeader:'XMLHttpRequest',
2566
2567         hasDefaultHeaders:true,
2568
2569         defaultHeaders:{},
2570
2571         poll:{},
2572
2573         timeout:{},
2574
2575         pollInterval:50,
2576
2577         transactionId:0,
2578
2579         setProgId:function(id)
2580         {
2581             this.activeX.unshift(id);
2582         },
2583
2584         setDefaultPostHeader:function(b)
2585         {
2586             this.useDefaultHeader = b;
2587         },
2588
2589         setDefaultXhrHeader:function(b)
2590         {
2591             this.useDefaultXhrHeader = b;
2592         },
2593
2594         setPollingInterval:function(i)
2595         {
2596             if (typeof i == 'number' && isFinite(i)) {
2597                 this.pollInterval = i;
2598             }
2599         },
2600
2601         createXhrObject:function(transactionId)
2602         {
2603             var obj,http;
2604             try
2605             {
2606
2607                 http = new XMLHttpRequest();
2608
2609                 obj = { conn:http, tId:transactionId };
2610             }
2611             catch(e)
2612             {
2613                 for (var i = 0; i < this.activeX.length; ++i) {
2614                     try
2615                     {
2616
2617                         http = new ActiveXObject(this.activeX[i]);
2618
2619                         obj = { conn:http, tId:transactionId };
2620                         break;
2621                     }
2622                     catch(e) {
2623                     }
2624                 }
2625             }
2626             finally
2627             {
2628                 return obj;
2629             }
2630         },
2631
2632         getConnectionObject:function()
2633         {
2634             var o;
2635             var tId = this.transactionId;
2636
2637             try
2638             {
2639                 o = this.createXhrObject(tId);
2640                 if (o) {
2641                     this.transactionId++;
2642                 }
2643             }
2644             catch(e) {
2645             }
2646             finally
2647             {
2648                 return o;
2649             }
2650         },
2651
2652         asyncRequest:function(method, uri, callback, postData)
2653         {
2654             var o = this.getConnectionObject();
2655
2656             if (!o) {
2657                 return null;
2658             }
2659             else {
2660                 o.conn.open(method, uri, true);
2661
2662                 if (this.useDefaultXhrHeader) {
2663                     if (!this.defaultHeaders['X-Requested-With']) {
2664                         this.initHeader('X-Requested-With', this.defaultXhrHeader, true);
2665                     }
2666                 }
2667
2668                 if(postData && this.useDefaultHeader){
2669                     this.initHeader('Content-Type', this.defaultPostHeader);
2670                 }
2671
2672                  if (this.hasDefaultHeaders || this.hasHeaders) {
2673                     this.setHeader(o);
2674                 }
2675
2676                 this.handleReadyState(o, callback);
2677                 o.conn.send(postData || null);
2678
2679                 return o;
2680             }
2681         },
2682
2683         handleReadyState:function(o, callback)
2684         {
2685             var oConn = this;
2686
2687             if (callback && callback.timeout) {
2688                 this.timeout[o.tId] = window.setTimeout(function() {
2689                     oConn.abort(o, callback, true);
2690                 }, callback.timeout);
2691             }
2692
2693             this.poll[o.tId] = window.setInterval(
2694                     function() {
2695                         if (o.conn && o.conn.readyState == 4) {
2696                             window.clearInterval(oConn.poll[o.tId]);
2697                             delete oConn.poll[o.tId];
2698
2699                             if(callback && callback.timeout) {
2700                                 window.clearTimeout(oConn.timeout[o.tId]);
2701                                 delete oConn.timeout[o.tId];
2702                             }
2703
2704                             oConn.handleTransactionResponse(o, callback);
2705                         }
2706                     }
2707                     , this.pollInterval);
2708         },
2709
2710         handleTransactionResponse:function(o, callback, isAbort)
2711         {
2712
2713             if (!callback) {
2714                 this.releaseObject(o);
2715                 return;
2716             }
2717
2718             var httpStatus, responseObject;
2719
2720             try
2721             {
2722                 if (o.conn.status !== undefined && o.conn.status != 0) {
2723                     httpStatus = o.conn.status;
2724                 }
2725                 else {
2726                     httpStatus = 13030;
2727                 }
2728             }
2729             catch(e) {
2730
2731
2732                 httpStatus = 13030;
2733             }
2734
2735             if (httpStatus >= 200 && httpStatus < 300) {
2736                 responseObject = this.createResponseObject(o, callback.argument);
2737                 if (callback.success) {
2738                     if (!callback.scope) {
2739                         callback.success(responseObject);
2740                     }
2741                     else {
2742
2743
2744                         callback.success.apply(callback.scope, [responseObject]);
2745                     }
2746                 }
2747             }
2748             else {
2749                 switch (httpStatus) {
2750
2751                     case 12002:
2752                     case 12029:
2753                     case 12030:
2754                     case 12031:
2755                     case 12152:
2756                     case 13030:
2757                         responseObject = this.createExceptionObject(o.tId, callback.argument, (isAbort ? isAbort : false));
2758                         if (callback.failure) {
2759                             if (!callback.scope) {
2760                                 callback.failure(responseObject);
2761                             }
2762                             else {
2763                                 callback.failure.apply(callback.scope, [responseObject]);
2764                             }
2765                         }
2766                         break;
2767                     default:
2768                         responseObject = this.createResponseObject(o, callback.argument);
2769                         if (callback.failure) {
2770                             if (!callback.scope) {
2771                                 callback.failure(responseObject);
2772                             }
2773                             else {
2774                                 callback.failure.apply(callback.scope, [responseObject]);
2775                             }
2776                         }
2777                 }
2778             }
2779
2780             this.releaseObject(o);
2781             responseObject = null;
2782         },
2783
2784         createResponseObject:function(o, callbackArg)
2785         {
2786             var obj = {};
2787             var headerObj = {};
2788
2789             try
2790             {
2791                 var headerStr = o.conn.getAllResponseHeaders();
2792                 var header = headerStr.split('\n');
2793                 for (var i = 0; i < header.length; i++) {
2794                     var delimitPos = header[i].indexOf(':');
2795                     if (delimitPos != -1) {
2796                         headerObj[header[i].substring(0, delimitPos)] = header[i].substring(delimitPos + 2);
2797                     }
2798                 }
2799             }
2800             catch(e) {
2801             }
2802
2803             obj.tId = o.tId;
2804             obj.status = o.conn.status;
2805             obj.statusText = o.conn.statusText;
2806             obj.getResponseHeader = headerObj;
2807             obj.getAllResponseHeaders = headerStr;
2808             obj.responseText = o.conn.responseText;
2809             obj.responseXML = o.conn.responseXML;
2810
2811             if (typeof callbackArg !== undefined) {
2812                 obj.argument = callbackArg;
2813             }
2814
2815             return obj;
2816         },
2817
2818         createExceptionObject:function(tId, callbackArg, isAbort)
2819         {
2820             var COMM_CODE = 0;
2821             var COMM_ERROR = 'communication failure';
2822             var ABORT_CODE = -1;
2823             var ABORT_ERROR = 'transaction aborted';
2824
2825             var obj = {};
2826
2827             obj.tId = tId;
2828             if (isAbort) {
2829                 obj.status = ABORT_CODE;
2830                 obj.statusText = ABORT_ERROR;
2831             }
2832             else {
2833                 obj.status = COMM_CODE;
2834                 obj.statusText = COMM_ERROR;
2835             }
2836
2837             if (callbackArg) {
2838                 obj.argument = callbackArg;
2839             }
2840
2841             return obj;
2842         },
2843
2844         initHeader:function(label, value, isDefault)
2845         {
2846             var headerObj = (isDefault) ? this.defaultHeaders : this.headers;
2847
2848             if (headerObj[label] === undefined) {
2849                 headerObj[label] = value;
2850             }
2851             else {
2852
2853
2854                 headerObj[label] = value + "," + headerObj[label];
2855             }
2856
2857             if (isDefault) {
2858                 this.hasDefaultHeaders = true;
2859             }
2860             else {
2861                 this.hasHeaders = true;
2862             }
2863         },
2864
2865
2866         setHeader:function(o)
2867         {
2868             if (this.hasDefaultHeaders) {
2869                 for (var prop in this.defaultHeaders) {
2870                     if (this.defaultHeaders.hasOwnProperty(prop)) {
2871                         o.conn.setRequestHeader(prop, this.defaultHeaders[prop]);
2872                     }
2873                 }
2874             }
2875
2876             if (this.hasHeaders) {
2877                 for (var prop in this.headers) {
2878                     if (this.headers.hasOwnProperty(prop)) {
2879                         o.conn.setRequestHeader(prop, this.headers[prop]);
2880                     }
2881                 }
2882                 this.headers = {};
2883                 this.hasHeaders = false;
2884             }
2885         },
2886
2887         resetDefaultHeaders:function() {
2888             delete this.defaultHeaders;
2889             this.defaultHeaders = {};
2890             this.hasDefaultHeaders = false;
2891         },
2892
2893         abort:function(o, callback, isTimeout)
2894         {
2895             if(this.isCallInProgress(o)) {
2896                 o.conn.abort();
2897                 window.clearInterval(this.poll[o.tId]);
2898                 delete this.poll[o.tId];
2899                 if (isTimeout) {
2900                     delete this.timeout[o.tId];
2901                 }
2902
2903                 this.handleTransactionResponse(o, callback, true);
2904
2905                 return true;
2906             }
2907             else {
2908                 return false;
2909             }
2910         },
2911
2912
2913         isCallInProgress:function(o)
2914         {
2915             if (o && o.conn) {
2916                 return o.conn.readyState != 4 && o.conn.readyState != 0;
2917             }
2918             else {
2919
2920                 return false;
2921             }
2922         },
2923
2924
2925         releaseObject:function(o)
2926         {
2927
2928             o.conn = null;
2929
2930             o = null;
2931         },
2932
2933         activeX:[
2934         'MSXML2.XMLHTTP.3.0',
2935         'MSXML2.XMLHTTP',
2936         'Microsoft.XMLHTTP'
2937         ]
2938
2939
2940     };
2941 })();/*
2942  * Portions of this file are based on pieces of Yahoo User Interface Library
2943  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
2944  * YUI licensed under the BSD License:
2945  * http://developer.yahoo.net/yui/license.txt
2946  * <script type="text/javascript">
2947  *
2948  */
2949
2950 Roo.lib.Region = function(t, r, b, l) {
2951     this.top = t;
2952     this[1] = t;
2953     this.right = r;
2954     this.bottom = b;
2955     this.left = l;
2956     this[0] = l;
2957 };
2958
2959
2960 Roo.lib.Region.prototype = {
2961     contains : function(region) {
2962         return ( region.left >= this.left &&
2963                  region.right <= this.right &&
2964                  region.top >= this.top &&
2965                  region.bottom <= this.bottom    );
2966
2967     },
2968
2969     getArea : function() {
2970         return ( (this.bottom - this.top) * (this.right - this.left) );
2971     },
2972
2973     intersect : function(region) {
2974         var t = Math.max(this.top, region.top);
2975         var r = Math.min(this.right, region.right);
2976         var b = Math.min(this.bottom, region.bottom);
2977         var l = Math.max(this.left, region.left);
2978
2979         if (b >= t && r >= l) {
2980             return new Roo.lib.Region(t, r, b, l);
2981         } else {
2982             return null;
2983         }
2984     },
2985     union : function(region) {
2986         var t = Math.min(this.top, region.top);
2987         var r = Math.max(this.right, region.right);
2988         var b = Math.max(this.bottom, region.bottom);
2989         var l = Math.min(this.left, region.left);
2990
2991         return new Roo.lib.Region(t, r, b, l);
2992     },
2993
2994     adjust : function(t, l, b, r) {
2995         this.top += t;
2996         this.left += l;
2997         this.right += r;
2998         this.bottom += b;
2999         return this;
3000     }
3001 };
3002
3003 Roo.lib.Region.getRegion = function(el) {
3004     var p = Roo.lib.Dom.getXY(el);
3005
3006     var t = p[1];
3007     var r = p[0] + el.offsetWidth;
3008     var b = p[1] + el.offsetHeight;
3009     var l = p[0];
3010
3011     return new Roo.lib.Region(t, r, b, l);
3012 };
3013 /*
3014  * Portions of this file are based on pieces of Yahoo User Interface Library
3015  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3016  * YUI licensed under the BSD License:
3017  * http://developer.yahoo.net/yui/license.txt
3018  * <script type="text/javascript">
3019  *
3020  */
3021 //@@dep Roo.lib.Region
3022
3023
3024 Roo.lib.Point = function(x, y) {
3025     if (x instanceof Array) {
3026         y = x[1];
3027         x = x[0];
3028     }
3029     this.x = this.right = this.left = this[0] = x;
3030     this.y = this.top = this.bottom = this[1] = y;
3031 };
3032
3033 Roo.lib.Point.prototype = new Roo.lib.Region();
3034 /*
3035  * Portions of this file are based on pieces of Yahoo User Interface Library
3036  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3037  * YUI licensed under the BSD License:
3038  * http://developer.yahoo.net/yui/license.txt
3039  * <script type="text/javascript">
3040  *
3041  */
3042  
3043 (function() {   
3044
3045     Roo.lib.Anim = {
3046         scroll : function(el, args, duration, easing, cb, scope) {
3047             this.run(el, args, duration, easing, cb, scope, Roo.lib.Scroll);
3048         },
3049
3050         motion : function(el, args, duration, easing, cb, scope) {
3051             this.run(el, args, duration, easing, cb, scope, Roo.lib.Motion);
3052         },
3053
3054         color : function(el, args, duration, easing, cb, scope) {
3055             this.run(el, args, duration, easing, cb, scope, Roo.lib.ColorAnim);
3056         },
3057
3058         run : function(el, args, duration, easing, cb, scope, type) {
3059             type = type || Roo.lib.AnimBase;
3060             if (typeof easing == "string") {
3061                 easing = Roo.lib.Easing[easing];
3062             }
3063             var anim = new type(el, args, duration, easing);
3064             anim.animateX(function() {
3065                 Roo.callback(cb, scope);
3066             });
3067             return anim;
3068         }
3069     };
3070 })();/*
3071  * Portions of this file are based on pieces of Yahoo User Interface Library
3072  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3073  * YUI licensed under the BSD License:
3074  * http://developer.yahoo.net/yui/license.txt
3075  * <script type="text/javascript">
3076  *
3077  */
3078
3079 (function() {    
3080     var libFlyweight;
3081     
3082     function fly(el) {
3083         if (!libFlyweight) {
3084             libFlyweight = new Roo.Element.Flyweight();
3085         }
3086         libFlyweight.dom = el;
3087         return libFlyweight;
3088     }
3089
3090     // since this uses fly! - it cant be in DOM (which does not have fly yet..)
3091     
3092    
3093     
3094     Roo.lib.AnimBase = function(el, attributes, duration, method) {
3095         if (el) {
3096             this.init(el, attributes, duration, method);
3097         }
3098     };
3099
3100     Roo.lib.AnimBase.fly = fly;
3101     
3102     
3103     
3104     Roo.lib.AnimBase.prototype = {
3105
3106         toString: function() {
3107             var el = this.getEl();
3108             var id = el.id || el.tagName;
3109             return ("Anim " + id);
3110         },
3111
3112         patterns: {
3113             noNegatives:        /width|height|opacity|padding/i,
3114             offsetAttribute:  /^((width|height)|(top|left))$/,
3115             defaultUnit:        /width|height|top$|bottom$|left$|right$/i,
3116             offsetUnit:         /\d+(em|%|en|ex|pt|in|cm|mm|pc)$/i
3117         },
3118
3119
3120         doMethod: function(attr, start, end) {
3121             return this.method(this.currentFrame, start, end - start, this.totalFrames);
3122         },
3123
3124
3125         setAttribute: function(attr, val, unit) {
3126             if (this.patterns.noNegatives.test(attr)) {
3127                 val = (val > 0) ? val : 0;
3128             }
3129
3130             Roo.fly(this.getEl(), '_anim').setStyle(attr, val + unit);
3131         },
3132
3133
3134         getAttribute: function(attr) {
3135             var el = this.getEl();
3136             var val = fly(el).getStyle(attr);
3137
3138             if (val !== 'auto' && !this.patterns.offsetUnit.test(val)) {
3139                 return parseFloat(val);
3140             }
3141
3142             var a = this.patterns.offsetAttribute.exec(attr) || [];
3143             var pos = !!( a[3] );
3144             var box = !!( a[2] );
3145
3146
3147             if (box || (fly(el).getStyle('position') == 'absolute' && pos)) {
3148                 val = el['offset' + a[0].charAt(0).toUpperCase() + a[0].substr(1)];
3149             } else {
3150                 val = 0;
3151             }
3152
3153             return val;
3154         },
3155
3156
3157         getDefaultUnit: function(attr) {
3158             if (this.patterns.defaultUnit.test(attr)) {
3159                 return 'px';
3160             }
3161
3162             return '';
3163         },
3164
3165         animateX : function(callback, scope) {
3166             var f = function() {
3167                 this.onComplete.removeListener(f);
3168                 if (typeof callback == "function") {
3169                     callback.call(scope || this, this);
3170                 }
3171             };
3172             this.onComplete.addListener(f, this);
3173             this.animate();
3174         },
3175
3176
3177         setRuntimeAttribute: function(attr) {
3178             var start;
3179             var end;
3180             var attributes = this.attributes;
3181
3182             this.runtimeAttributes[attr] = {};
3183
3184             var isset = function(prop) {
3185                 return (typeof prop !== 'undefined');
3186             };
3187
3188             if (!isset(attributes[attr]['to']) && !isset(attributes[attr]['by'])) {
3189                 return false;
3190             }
3191
3192             start = ( isset(attributes[attr]['from']) ) ? attributes[attr]['from'] : this.getAttribute(attr);
3193
3194
3195             if (isset(attributes[attr]['to'])) {
3196                 end = attributes[attr]['to'];
3197             } else if (isset(attributes[attr]['by'])) {
3198                 if (start.constructor == Array) {
3199                     end = [];
3200                     for (var i = 0, len = start.length; i < len; ++i) {
3201                         end[i] = start[i] + attributes[attr]['by'][i];
3202                     }
3203                 } else {
3204                     end = start + attributes[attr]['by'];
3205                 }
3206             }
3207
3208             this.runtimeAttributes[attr].start = start;
3209             this.runtimeAttributes[attr].end = end;
3210
3211
3212             this.runtimeAttributes[attr].unit = ( isset(attributes[attr].unit) ) ? attributes[attr]['unit'] : this.getDefaultUnit(attr);
3213         },
3214
3215
3216         init: function(el, attributes, duration, method) {
3217
3218             var isAnimated = false;
3219
3220
3221             var startTime = null;
3222
3223
3224             var actualFrames = 0;
3225
3226
3227             el = Roo.getDom(el);
3228
3229
3230             this.attributes = attributes || {};
3231
3232
3233             this.duration = duration || 1;
3234
3235
3236             this.method = method || Roo.lib.Easing.easeNone;
3237
3238
3239             this.useSeconds = true;
3240
3241
3242             this.currentFrame = 0;
3243
3244
3245             this.totalFrames = Roo.lib.AnimMgr.fps;
3246
3247
3248             this.getEl = function() {
3249                 return el;
3250             };
3251
3252
3253             this.isAnimated = function() {
3254                 return isAnimated;
3255             };
3256
3257
3258             this.getStartTime = function() {
3259                 return startTime;
3260             };
3261
3262             this.runtimeAttributes = {};
3263
3264
3265             this.animate = function() {
3266                 if (this.isAnimated()) {
3267                     return false;
3268                 }
3269
3270                 this.currentFrame = 0;
3271
3272                 this.totalFrames = ( this.useSeconds ) ? Math.ceil(Roo.lib.AnimMgr.fps * this.duration) : this.duration;
3273
3274                 Roo.lib.AnimMgr.registerElement(this);
3275             };
3276
3277
3278             this.stop = function(finish) {
3279                 if (finish) {
3280                     this.currentFrame = this.totalFrames;
3281                     this._onTween.fire();
3282                 }
3283                 Roo.lib.AnimMgr.stop(this);
3284             };
3285
3286             var onStart = function() {
3287                 this.onStart.fire();
3288
3289                 this.runtimeAttributes = {};
3290                 for (var attr in this.attributes) {
3291                     this.setRuntimeAttribute(attr);
3292                 }
3293
3294                 isAnimated = true;
3295                 actualFrames = 0;
3296                 startTime = new Date();
3297             };
3298
3299
3300             var onTween = function() {
3301                 var data = {
3302                     duration: new Date() - this.getStartTime(),
3303                     currentFrame: this.currentFrame
3304                 };
3305
3306                 data.toString = function() {
3307                     return (
3308                             'duration: ' + data.duration +
3309                             ', currentFrame: ' + data.currentFrame
3310                             );
3311                 };
3312
3313                 this.onTween.fire(data);
3314
3315                 var runtimeAttributes = this.runtimeAttributes;
3316
3317                 for (var attr in runtimeAttributes) {
3318                     this.setAttribute(attr, this.doMethod(attr, runtimeAttributes[attr].start, runtimeAttributes[attr].end), runtimeAttributes[attr].unit);
3319                 }
3320
3321                 actualFrames += 1;
3322             };
3323
3324             var onComplete = function() {
3325                 var actual_duration = (new Date() - startTime) / 1000 ;
3326
3327                 var data = {
3328                     duration: actual_duration,
3329                     frames: actualFrames,
3330                     fps: actualFrames / actual_duration
3331                 };
3332
3333                 data.toString = function() {
3334                     return (
3335                             'duration: ' + data.duration +
3336                             ', frames: ' + data.frames +
3337                             ', fps: ' + data.fps
3338                             );
3339                 };
3340
3341                 isAnimated = false;
3342                 actualFrames = 0;
3343                 this.onComplete.fire(data);
3344             };
3345
3346
3347             this._onStart = new Roo.util.Event(this);
3348             this.onStart = new Roo.util.Event(this);
3349             this.onTween = new Roo.util.Event(this);
3350             this._onTween = new Roo.util.Event(this);
3351             this.onComplete = new Roo.util.Event(this);
3352             this._onComplete = new Roo.util.Event(this);
3353             this._onStart.addListener(onStart);
3354             this._onTween.addListener(onTween);
3355             this._onComplete.addListener(onComplete);
3356         }
3357     };
3358 })();
3359 /*
3360  * Portions of this file are based on pieces of Yahoo User Interface Library
3361  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3362  * YUI licensed under the BSD License:
3363  * http://developer.yahoo.net/yui/license.txt
3364  * <script type="text/javascript">
3365  *
3366  */
3367
3368 Roo.lib.AnimMgr = new function() {
3369
3370         var thread = null;
3371
3372
3373         var queue = [];
3374
3375
3376         var tweenCount = 0;
3377
3378
3379         this.fps = 1000;
3380
3381
3382         this.delay = 1;
3383
3384
3385         this.registerElement = function(tween) {
3386             queue[queue.length] = tween;
3387             tweenCount += 1;
3388             tween._onStart.fire();
3389             this.start();
3390         };
3391
3392
3393         this.unRegister = function(tween, index) {
3394             tween._onComplete.fire();
3395             index = index || getIndex(tween);
3396             if (index != -1) {
3397                 queue.splice(index, 1);
3398             }
3399
3400             tweenCount -= 1;
3401             if (tweenCount <= 0) {
3402                 this.stop();
3403             }
3404         };
3405
3406
3407         this.start = function() {
3408             if (thread === null) {
3409                 thread = setInterval(this.run, this.delay);
3410             }
3411         };
3412
3413
3414         this.stop = function(tween) {
3415             if (!tween) {
3416                 clearInterval(thread);
3417
3418                 for (var i = 0, len = queue.length; i < len; ++i) {
3419                     if (queue[0].isAnimated()) {
3420                         this.unRegister(queue[0], 0);
3421                     }
3422                 }
3423
3424                 queue = [];
3425                 thread = null;
3426                 tweenCount = 0;
3427             }
3428             else {
3429                 this.unRegister(tween);
3430             }
3431         };
3432
3433
3434         this.run = function() {
3435             for (var i = 0, len = queue.length; i < len; ++i) {
3436                 var tween = queue[i];
3437                 if (!tween || !tween.isAnimated()) {
3438                     continue;
3439                 }
3440
3441                 if (tween.currentFrame < tween.totalFrames || tween.totalFrames === null)
3442                 {
3443                     tween.currentFrame += 1;
3444
3445                     if (tween.useSeconds) {
3446                         correctFrame(tween);
3447                     }
3448                     tween._onTween.fire();
3449                 }
3450                 else {
3451                     Roo.lib.AnimMgr.stop(tween, i);
3452                 }
3453             }
3454         };
3455
3456         var getIndex = function(anim) {
3457             for (var i = 0, len = queue.length; i < len; ++i) {
3458                 if (queue[i] == anim) {
3459                     return i;
3460                 }
3461             }
3462             return -1;
3463         };
3464
3465
3466         var correctFrame = function(tween) {
3467             var frames = tween.totalFrames;
3468             var frame = tween.currentFrame;
3469             var expected = (tween.currentFrame * tween.duration * 1000 / tween.totalFrames);
3470             var elapsed = (new Date() - tween.getStartTime());
3471             var tweak = 0;
3472
3473             if (elapsed < tween.duration * 1000) {
3474                 tweak = Math.round((elapsed / expected - 1) * tween.currentFrame);
3475             } else {
3476                 tweak = frames - (frame + 1);
3477             }
3478             if (tweak > 0 && isFinite(tweak)) {
3479                 if (tween.currentFrame + tweak >= frames) {
3480                     tweak = frames - (frame + 1);
3481                 }
3482
3483                 tween.currentFrame += tweak;
3484             }
3485         };
3486     };/*
3487  * Portions of this file are based on pieces of Yahoo User Interface Library
3488  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3489  * YUI licensed under the BSD License:
3490  * http://developer.yahoo.net/yui/license.txt
3491  * <script type="text/javascript">
3492  *
3493  */
3494 Roo.lib.Bezier = new function() {
3495
3496         this.getPosition = function(points, t) {
3497             var n = points.length;
3498             var tmp = [];
3499
3500             for (var i = 0; i < n; ++i) {
3501                 tmp[i] = [points[i][0], points[i][1]];
3502             }
3503
3504             for (var j = 1; j < n; ++j) {
3505                 for (i = 0; i < n - j; ++i) {
3506                     tmp[i][0] = (1 - t) * tmp[i][0] + t * tmp[parseInt(i + 1, 10)][0];
3507                     tmp[i][1] = (1 - t) * tmp[i][1] + t * tmp[parseInt(i + 1, 10)][1];
3508                 }
3509             }
3510
3511             return [ tmp[0][0], tmp[0][1] ];
3512
3513         };
3514     };/*
3515  * Portions of this file are based on pieces of Yahoo User Interface Library
3516  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3517  * YUI licensed under the BSD License:
3518  * http://developer.yahoo.net/yui/license.txt
3519  * <script type="text/javascript">
3520  *
3521  */
3522 (function() {
3523
3524     Roo.lib.ColorAnim = function(el, attributes, duration, method) {
3525         Roo.lib.ColorAnim.superclass.constructor.call(this, el, attributes, duration, method);
3526     };
3527
3528     Roo.extend(Roo.lib.ColorAnim, Roo.lib.AnimBase);
3529
3530     var fly = Roo.lib.AnimBase.fly;
3531     var Y = Roo.lib;
3532     var superclass = Y.ColorAnim.superclass;
3533     var proto = Y.ColorAnim.prototype;
3534
3535     proto.toString = function() {
3536         var el = this.getEl();
3537         var id = el.id || el.tagName;
3538         return ("ColorAnim " + id);
3539     };
3540
3541     proto.patterns.color = /color$/i;
3542     proto.patterns.rgb = /^rgb\(([0-9]+)\s*,\s*([0-9]+)\s*,\s*([0-9]+)\)$/i;
3543     proto.patterns.hex = /^#?([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i;
3544     proto.patterns.hex3 = /^#?([0-9A-F]{1})([0-9A-F]{1})([0-9A-F]{1})$/i;
3545     proto.patterns.transparent = /^transparent|rgba\(0, 0, 0, 0\)$/;
3546
3547
3548     proto.parseColor = function(s) {
3549         if (s.length == 3) {
3550             return s;
3551         }
3552
3553         var c = this.patterns.hex.exec(s);
3554         if (c && c.length == 4) {
3555             return [ parseInt(c[1], 16), parseInt(c[2], 16), parseInt(c[3], 16) ];
3556         }
3557
3558         c = this.patterns.rgb.exec(s);
3559         if (c && c.length == 4) {
3560             return [ parseInt(c[1], 10), parseInt(c[2], 10), parseInt(c[3], 10) ];
3561         }
3562
3563         c = this.patterns.hex3.exec(s);
3564         if (c && c.length == 4) {
3565             return [ parseInt(c[1] + c[1], 16), parseInt(c[2] + c[2], 16), parseInt(c[3] + c[3], 16) ];
3566         }
3567
3568         return null;
3569     };
3570     // since this uses fly! - it cant be in ColorAnim (which does not have fly yet..)
3571     proto.getAttribute = function(attr) {
3572         var el = this.getEl();
3573         if (this.patterns.color.test(attr)) {
3574             var val = fly(el).getStyle(attr);
3575
3576             if (this.patterns.transparent.test(val)) {
3577                 var parent = el.parentNode;
3578                 val = fly(parent).getStyle(attr);
3579
3580                 while (parent && this.patterns.transparent.test(val)) {
3581                     parent = parent.parentNode;
3582                     val = fly(parent).getStyle(attr);
3583                     if (parent.tagName.toUpperCase() == 'HTML') {
3584                         val = '#fff';
3585                     }
3586                 }
3587             }
3588         } else {
3589             val = superclass.getAttribute.call(this, attr);
3590         }
3591
3592         return val;
3593     };
3594     proto.getAttribute = function(attr) {
3595         var el = this.getEl();
3596         if (this.patterns.color.test(attr)) {
3597             var val = fly(el).getStyle(attr);
3598
3599             if (this.patterns.transparent.test(val)) {
3600                 var parent = el.parentNode;
3601                 val = fly(parent).getStyle(attr);
3602
3603                 while (parent && this.patterns.transparent.test(val)) {
3604                     parent = parent.parentNode;
3605                     val = fly(parent).getStyle(attr);
3606                     if (parent.tagName.toUpperCase() == 'HTML') {
3607                         val = '#fff';
3608                     }
3609                 }
3610             }
3611         } else {
3612             val = superclass.getAttribute.call(this, attr);
3613         }
3614
3615         return val;
3616     };
3617
3618     proto.doMethod = function(attr, start, end) {
3619         var val;
3620
3621         if (this.patterns.color.test(attr)) {
3622             val = [];
3623             for (var i = 0, len = start.length; i < len; ++i) {
3624                 val[i] = superclass.doMethod.call(this, attr, start[i], end[i]);
3625             }
3626
3627             val = 'rgb(' + Math.floor(val[0]) + ',' + Math.floor(val[1]) + ',' + Math.floor(val[2]) + ')';
3628         }
3629         else {
3630             val = superclass.doMethod.call(this, attr, start, end);
3631         }
3632
3633         return val;
3634     };
3635
3636     proto.setRuntimeAttribute = function(attr) {
3637         superclass.setRuntimeAttribute.call(this, attr);
3638
3639         if (this.patterns.color.test(attr)) {
3640             var attributes = this.attributes;
3641             var start = this.parseColor(this.runtimeAttributes[attr].start);
3642             var end = this.parseColor(this.runtimeAttributes[attr].end);
3643
3644             if (typeof attributes[attr]['to'] === 'undefined' && typeof attributes[attr]['by'] !== 'undefined') {
3645                 end = this.parseColor(attributes[attr].by);
3646
3647                 for (var i = 0, len = start.length; i < len; ++i) {
3648                     end[i] = start[i] + end[i];
3649                 }
3650             }
3651
3652             this.runtimeAttributes[attr].start = start;
3653             this.runtimeAttributes[attr].end = end;
3654         }
3655     };
3656 })();
3657
3658 /*
3659  * Portions of this file are based on pieces of Yahoo User Interface Library
3660  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3661  * YUI licensed under the BSD License:
3662  * http://developer.yahoo.net/yui/license.txt
3663  * <script type="text/javascript">
3664  *
3665  */
3666 Roo.lib.Easing = {
3667
3668
3669     easeNone: function (t, b, c, d) {
3670         return c * t / d + b;
3671     },
3672
3673
3674     easeIn: function (t, b, c, d) {
3675         return c * (t /= d) * t + b;
3676     },
3677
3678
3679     easeOut: function (t, b, c, d) {
3680         return -c * (t /= d) * (t - 2) + b;
3681     },
3682
3683
3684     easeBoth: function (t, b, c, d) {
3685         if ((t /= d / 2) < 1) {
3686             return c / 2 * t * t + b;
3687         }
3688
3689         return -c / 2 * ((--t) * (t - 2) - 1) + b;
3690     },
3691
3692
3693     easeInStrong: function (t, b, c, d) {
3694         return c * (t /= d) * t * t * t + b;
3695     },
3696
3697
3698     easeOutStrong: function (t, b, c, d) {
3699         return -c * ((t = t / d - 1) * t * t * t - 1) + b;
3700     },
3701
3702
3703     easeBothStrong: function (t, b, c, d) {
3704         if ((t /= d / 2) < 1) {
3705             return c / 2 * t * t * t * t + b;
3706         }
3707
3708         return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
3709     },
3710
3711
3712
3713     elasticIn: function (t, b, c, d, a, p) {
3714         if (t == 0) {
3715             return b;
3716         }
3717         if ((t /= d) == 1) {
3718             return b + c;
3719         }
3720         if (!p) {
3721             p = d * .3;
3722         }
3723
3724         if (!a || a < Math.abs(c)) {
3725             a = c;
3726             var s = p / 4;
3727         }
3728         else {
3729             var s = p / (2 * Math.PI) * Math.asin(c / a);
3730         }
3731
3732         return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
3733     },
3734
3735
3736     elasticOut: function (t, b, c, d, a, p) {
3737         if (t == 0) {
3738             return b;
3739         }
3740         if ((t /= d) == 1) {
3741             return b + c;
3742         }
3743         if (!p) {
3744             p = d * .3;
3745         }
3746
3747         if (!a || a < Math.abs(c)) {
3748             a = c;
3749             var s = p / 4;
3750         }
3751         else {
3752             var s = p / (2 * Math.PI) * Math.asin(c / a);
3753         }
3754
3755         return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
3756     },
3757
3758
3759     elasticBoth: function (t, b, c, d, a, p) {
3760         if (t == 0) {
3761             return b;
3762         }
3763
3764         if ((t /= d / 2) == 2) {
3765             return b + c;
3766         }
3767
3768         if (!p) {
3769             p = d * (.3 * 1.5);
3770         }
3771
3772         if (!a || a < Math.abs(c)) {
3773             a = c;
3774             var s = p / 4;
3775         }
3776         else {
3777             var s = p / (2 * Math.PI) * Math.asin(c / a);
3778         }
3779
3780         if (t < 1) {
3781             return -.5 * (a * Math.pow(2, 10 * (t -= 1)) *
3782                           Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
3783         }
3784         return a * Math.pow(2, -10 * (t -= 1)) *
3785                Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
3786     },
3787
3788
3789
3790     backIn: function (t, b, c, d, s) {
3791         if (typeof s == 'undefined') {
3792             s = 1.70158;
3793         }
3794         return c * (t /= d) * t * ((s + 1) * t - s) + b;
3795     },
3796
3797
3798     backOut: function (t, b, c, d, s) {
3799         if (typeof s == 'undefined') {
3800             s = 1.70158;
3801         }
3802         return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
3803     },
3804
3805
3806     backBoth: function (t, b, c, d, s) {
3807         if (typeof s == 'undefined') {
3808             s = 1.70158;
3809         }
3810
3811         if ((t /= d / 2 ) < 1) {
3812             return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
3813         }
3814         return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
3815     },
3816
3817
3818     bounceIn: function (t, b, c, d) {
3819         return c - Roo.lib.Easing.bounceOut(d - t, 0, c, d) + b;
3820     },
3821
3822
3823     bounceOut: function (t, b, c, d) {
3824         if ((t /= d) < (1 / 2.75)) {
3825             return c * (7.5625 * t * t) + b;
3826         } else if (t < (2 / 2.75)) {
3827             return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
3828         } else if (t < (2.5 / 2.75)) {
3829             return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
3830         }
3831         return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
3832     },
3833
3834
3835     bounceBoth: function (t, b, c, d) {
3836         if (t < d / 2) {
3837             return Roo.lib.Easing.bounceIn(t * 2, 0, c, d) * .5 + b;
3838         }
3839         return Roo.lib.Easing.bounceOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
3840     }
3841 };/*
3842  * Portions of this file are based on pieces of Yahoo User Interface Library
3843  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3844  * YUI licensed under the BSD License:
3845  * http://developer.yahoo.net/yui/license.txt
3846  * <script type="text/javascript">
3847  *
3848  */
3849     (function() {
3850         Roo.lib.Motion = function(el, attributes, duration, method) {
3851             if (el) {
3852                 Roo.lib.Motion.superclass.constructor.call(this, el, attributes, duration, method);
3853             }
3854         };
3855
3856         Roo.extend(Roo.lib.Motion, Roo.lib.ColorAnim);
3857
3858
3859         var Y = Roo.lib;
3860         var superclass = Y.Motion.superclass;
3861         var proto = Y.Motion.prototype;
3862
3863         proto.toString = function() {
3864             var el = this.getEl();
3865             var id = el.id || el.tagName;
3866             return ("Motion " + id);
3867         };
3868
3869         proto.patterns.points = /^points$/i;
3870
3871         proto.setAttribute = function(attr, val, unit) {
3872             if (this.patterns.points.test(attr)) {
3873                 unit = unit || 'px';
3874                 superclass.setAttribute.call(this, 'left', val[0], unit);
3875                 superclass.setAttribute.call(this, 'top', val[1], unit);
3876             } else {
3877                 superclass.setAttribute.call(this, attr, val, unit);
3878             }
3879         };
3880
3881         proto.getAttribute = function(attr) {
3882             if (this.patterns.points.test(attr)) {
3883                 var val = [
3884                         superclass.getAttribute.call(this, 'left'),
3885                         superclass.getAttribute.call(this, 'top')
3886                         ];
3887             } else {
3888                 val = superclass.getAttribute.call(this, attr);
3889             }
3890
3891             return val;
3892         };
3893
3894         proto.doMethod = function(attr, start, end) {
3895             var val = null;
3896
3897             if (this.patterns.points.test(attr)) {
3898                 var t = this.method(this.currentFrame, 0, 100, this.totalFrames) / 100;
3899                 val = Y.Bezier.getPosition(this.runtimeAttributes[attr], t);
3900             } else {
3901                 val = superclass.doMethod.call(this, attr, start, end);
3902             }
3903             return val;
3904         };
3905
3906         proto.setRuntimeAttribute = function(attr) {
3907             if (this.patterns.points.test(attr)) {
3908                 var el = this.getEl();
3909                 var attributes = this.attributes;
3910                 var start;
3911                 var control = attributes['points']['control'] || [];
3912                 var end;
3913                 var i, len;
3914
3915                 if (control.length > 0 && !(control[0] instanceof Array)) {
3916                     control = [control];
3917                 } else {
3918                     var tmp = [];
3919                     for (i = 0,len = control.length; i < len; ++i) {
3920                         tmp[i] = control[i];
3921                     }
3922                     control = tmp;
3923                 }
3924
3925                 Roo.fly(el).position();
3926
3927                 if (isset(attributes['points']['from'])) {
3928                     Roo.lib.Dom.setXY(el, attributes['points']['from']);
3929                 }
3930                 else {
3931                     Roo.lib.Dom.setXY(el, Roo.lib.Dom.getXY(el));
3932                 }
3933
3934                 start = this.getAttribute('points');
3935
3936
3937                 if (isset(attributes['points']['to'])) {
3938                     end = translateValues.call(this, attributes['points']['to'], start);
3939
3940                     var pageXY = Roo.lib.Dom.getXY(this.getEl());
3941                     for (i = 0,len = control.length; i < len; ++i) {
3942                         control[i] = translateValues.call(this, control[i], start);
3943                     }
3944
3945
3946                 } else if (isset(attributes['points']['by'])) {
3947                     end = [ start[0] + attributes['points']['by'][0], start[1] + attributes['points']['by'][1] ];
3948
3949                     for (i = 0,len = control.length; i < len; ++i) {
3950                         control[i] = [ start[0] + control[i][0], start[1] + control[i][1] ];
3951                     }
3952                 }
3953
3954                 this.runtimeAttributes[attr] = [start];
3955
3956                 if (control.length > 0) {
3957                     this.runtimeAttributes[attr] = this.runtimeAttributes[attr].concat(control);
3958                 }
3959
3960                 this.runtimeAttributes[attr][this.runtimeAttributes[attr].length] = end;
3961             }
3962             else {
3963                 superclass.setRuntimeAttribute.call(this, attr);
3964             }
3965         };
3966
3967         var translateValues = function(val, start) {
3968             var pageXY = Roo.lib.Dom.getXY(this.getEl());
3969             val = [ val[0] - pageXY[0] + start[0], val[1] - pageXY[1] + start[1] ];
3970
3971             return val;
3972         };
3973
3974         var isset = function(prop) {
3975             return (typeof prop !== 'undefined');
3976         };
3977     })();
3978 /*
3979  * Portions of this file are based on pieces of Yahoo User Interface Library
3980  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3981  * YUI licensed under the BSD License:
3982  * http://developer.yahoo.net/yui/license.txt
3983  * <script type="text/javascript">
3984  *
3985  */
3986     (function() {
3987         Roo.lib.Scroll = function(el, attributes, duration, method) {
3988             if (el) {
3989                 Roo.lib.Scroll.superclass.constructor.call(this, el, attributes, duration, method);
3990             }
3991         };
3992
3993         Roo.extend(Roo.lib.Scroll, Roo.lib.ColorAnim);
3994
3995
3996         var Y = Roo.lib;
3997         var superclass = Y.Scroll.superclass;
3998         var proto = Y.Scroll.prototype;
3999
4000         proto.toString = function() {
4001             var el = this.getEl();
4002             var id = el.id || el.tagName;
4003             return ("Scroll " + id);
4004         };
4005
4006         proto.doMethod = function(attr, start, end) {
4007             var val = null;
4008
4009             if (attr == 'scroll') {
4010                 val = [
4011                         this.method(this.currentFrame, start[0], end[0] - start[0], this.totalFrames),
4012                         this.method(this.currentFrame, start[1], end[1] - start[1], this.totalFrames)
4013                         ];
4014
4015             } else {
4016                 val = superclass.doMethod.call(this, attr, start, end);
4017             }
4018             return val;
4019         };
4020
4021         proto.getAttribute = function(attr) {
4022             var val = null;
4023             var el = this.getEl();
4024
4025             if (attr == 'scroll') {
4026                 val = [ el.scrollLeft, el.scrollTop ];
4027             } else {
4028                 val = superclass.getAttribute.call(this, attr);
4029             }
4030
4031             return val;
4032         };
4033
4034         proto.setAttribute = function(attr, val, unit) {
4035             var el = this.getEl();
4036
4037             if (attr == 'scroll') {
4038                 el.scrollLeft = val[0];
4039                 el.scrollTop = val[1];
4040             } else {
4041                 superclass.setAttribute.call(this, attr, val, unit);
4042             }
4043         };
4044     })();
4045 /*
4046  * Based on:
4047  * Ext JS Library 1.1.1
4048  * Copyright(c) 2006-2007, Ext JS, LLC.
4049  *
4050  * Originally Released Under LGPL - original licence link has changed is not relivant.
4051  *
4052  * Fork - LGPL
4053  * <script type="text/javascript">
4054  */
4055
4056
4057 // nasty IE9 hack - what a pile of crap that is..
4058
4059  if (typeof Range != "undefined" && typeof Range.prototype.createContextualFragment == "undefined") {
4060     Range.prototype.createContextualFragment = function (html) {
4061         var doc = window.document;
4062         var container = doc.createElement("div");
4063         container.innerHTML = html;
4064         var frag = doc.createDocumentFragment(), n;
4065         while ((n = container.firstChild)) {
4066             frag.appendChild(n);
4067         }
4068         return frag;
4069     };
4070 }
4071
4072 /**
4073  * @class Roo.DomHelper
4074  * Utility class for working with DOM and/or Templates. It transparently supports using HTML fragments or DOM.
4075  * For more information see <a href="http://www.jackslocum.com/yui/2006/10/06/domhelper-create-elements-using-dom-html-fragments-or-templates/">this blog post with examples</a>.
4076  * @singleton
4077  */
4078 Roo.DomHelper = function(){
4079     var tempTableEl = null;
4080     var emptyTags = /^(?:br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i;
4081     var tableRe = /^table|tbody|tr|td$/i;
4082     var xmlns = {};
4083     // build as innerHTML where available
4084     /** @ignore */
4085     var createHtml = function(o){
4086         if(typeof o == 'string'){
4087             return o;
4088         }
4089         var b = "";
4090         if(!o.tag){
4091             o.tag = "div";
4092         }
4093         b += "<" + o.tag;
4094         for(var attr in o){
4095             if(attr == "tag" || attr == "children" || attr == "cn" || attr == "html" || typeof o[attr] == "function") continue;
4096             if(attr == "style"){
4097                 var s = o["style"];
4098                 if(typeof s == "function"){
4099                     s = s.call();
4100                 }
4101                 if(typeof s == "string"){
4102                     b += ' style="' + s + '"';
4103                 }else if(typeof s == "object"){
4104                     b += ' style="';
4105                     for(var key in s){
4106                         if(typeof s[key] != "function"){
4107                             b += key + ":" + s[key] + ";";
4108                         }
4109                     }
4110                     b += '"';
4111                 }
4112             }else{
4113                 if(attr == "cls"){
4114                     b += ' class="' + o["cls"] + '"';
4115                 }else if(attr == "htmlFor"){
4116                     b += ' for="' + o["htmlFor"] + '"';
4117                 }else{
4118                     b += " " + attr + '="' + o[attr] + '"';
4119                 }
4120             }
4121         }
4122         if(emptyTags.test(o.tag)){
4123             b += "/>";
4124         }else{
4125             b += ">";
4126             var cn = o.children || o.cn;
4127             if(cn){
4128                 //http://bugs.kde.org/show_bug.cgi?id=71506
4129                 if((cn instanceof Array) || (Roo.isSafari && typeof(cn.join) == "function")){
4130                     for(var i = 0, len = cn.length; i < len; i++) {
4131                         b += createHtml(cn[i], b);
4132                     }
4133                 }else{
4134                     b += createHtml(cn, b);
4135                 }
4136             }
4137             if(o.html){
4138                 b += o.html;
4139             }
4140             b += "</" + o.tag + ">";
4141         }
4142         return b;
4143     };
4144
4145     // build as dom
4146     /** @ignore */
4147     var createDom = function(o, parentNode){
4148          
4149         // defininition craeted..
4150         var ns = false;
4151         if (o.ns && o.ns != 'html') {
4152                
4153             if (o.xmlns && typeof(xmlns[o.ns]) == 'undefined') {
4154                 xmlns[o.ns] = o.xmlns;
4155                 ns = o.xmlns;
4156             }
4157             if (typeof(xmlns[o.ns]) == 'undefined') {
4158                 console.log("Trying to create namespace element " + o.ns + ", however no xmlns was sent to builder previously");
4159             }
4160             ns = xmlns[o.ns];
4161         }
4162         
4163         
4164         if (typeof(o) == 'string') {
4165             return parentNode.appendChild(document.createTextNode(o));
4166         }
4167         o.tag = o.tag || div;
4168         if (o.ns && Roo.isIE) {
4169             ns = false;
4170             o.tag = o.ns + ':' + o.tag;
4171             
4172         }
4173         var el = ns ? document.createElementNS( ns, o.tag||'div') :  document.createElement(o.tag||'div');
4174         var useSet = el.setAttribute ? true : false; // In IE some elements don't have setAttribute
4175         for(var attr in o){
4176             
4177             if(attr == "tag" || attr == "ns" ||attr == "xmlns" ||attr == "children" || attr == "cn" || attr == "html" || 
4178                     attr == "style" || typeof o[attr] == "function") continue;
4179                     
4180             if(attr=="cls" && Roo.isIE){
4181                 el.className = o["cls"];
4182             }else{
4183                 if(useSet) el.setAttribute(attr=="cls" ? 'class' : attr, o[attr]);
4184                 else el[attr] = o[attr];
4185             }
4186         }
4187         Roo.DomHelper.applyStyles(el, o.style);
4188         var cn = o.children || o.cn;
4189         if(cn){
4190             //http://bugs.kde.org/show_bug.cgi?id=71506
4191              if((cn instanceof Array) || (Roo.isSafari && typeof(cn.join) == "function")){
4192                 for(var i = 0, len = cn.length; i < len; i++) {
4193                     createDom(cn[i], el);
4194                 }
4195             }else{
4196                 createDom(cn, el);
4197             }
4198         }
4199         if(o.html){
4200             el.innerHTML = o.html;
4201         }
4202         if(parentNode){
4203            parentNode.appendChild(el);
4204         }
4205         return el;
4206     };
4207
4208     var ieTable = function(depth, s, h, e){
4209         tempTableEl.innerHTML = [s, h, e].join('');
4210         var i = -1, el = tempTableEl;
4211         while(++i < depth){
4212             el = el.firstChild;
4213         }
4214         return el;
4215     };
4216
4217     // kill repeat to save bytes
4218     var ts = '<table>',
4219         te = '</table>',
4220         tbs = ts+'<tbody>',
4221         tbe = '</tbody>'+te,
4222         trs = tbs + '<tr>',
4223         tre = '</tr>'+tbe;
4224
4225     /**
4226      * @ignore
4227      * Nasty code for IE's broken table implementation
4228      */
4229     var insertIntoTable = function(tag, where, el, html){
4230         if(!tempTableEl){
4231             tempTableEl = document.createElement('div');
4232         }
4233         var node;
4234         var before = null;
4235         if(tag == 'td'){
4236             if(where == 'afterbegin' || where == 'beforeend'){ // INTO a TD
4237                 return;
4238             }
4239             if(where == 'beforebegin'){
4240                 before = el;
4241                 el = el.parentNode;
4242             } else{
4243                 before = el.nextSibling;
4244                 el = el.parentNode;
4245             }
4246             node = ieTable(4, trs, html, tre);
4247         }
4248         else if(tag == 'tr'){
4249             if(where == 'beforebegin'){
4250                 before = el;
4251                 el = el.parentNode;
4252                 node = ieTable(3, tbs, html, tbe);
4253             } else if(where == 'afterend'){
4254                 before = el.nextSibling;
4255                 el = el.parentNode;
4256                 node = ieTable(3, tbs, html, tbe);
4257             } else{ // INTO a TR
4258                 if(where == 'afterbegin'){
4259                     before = el.firstChild;
4260                 }
4261                 node = ieTable(4, trs, html, tre);
4262             }
4263         } else if(tag == 'tbody'){
4264             if(where == 'beforebegin'){
4265                 before = el;
4266                 el = el.parentNode;
4267                 node = ieTable(2, ts, html, te);
4268             } else if(where == 'afterend'){
4269                 before = el.nextSibling;
4270                 el = el.parentNode;
4271                 node = ieTable(2, ts, html, te);
4272             } else{
4273                 if(where == 'afterbegin'){
4274                     before = el.firstChild;
4275                 }
4276                 node = ieTable(3, tbs, html, tbe);
4277             }
4278         } else{ // TABLE
4279             if(where == 'beforebegin' || where == 'afterend'){ // OUTSIDE the table
4280                 return;
4281             }
4282             if(where == 'afterbegin'){
4283                 before = el.firstChild;
4284             }
4285             node = ieTable(2, ts, html, te);
4286         }
4287         el.insertBefore(node, before);
4288         return node;
4289     };
4290
4291     return {
4292     /** True to force the use of DOM instead of html fragments @type Boolean */
4293     useDom : false,
4294
4295     /**
4296      * Returns the markup for the passed Element(s) config
4297      * @param {Object} o The Dom object spec (and children)
4298      * @return {String}
4299      */
4300     markup : function(o){
4301         return createHtml(o);
4302     },
4303
4304     /**
4305      * Applies a style specification to an element
4306      * @param {String/HTMLElement} el The element to apply styles to
4307      * @param {String/Object/Function} styles A style specification string eg "width:100px", or object in the form {width:"100px"}, or
4308      * a function which returns such a specification.
4309      */
4310     applyStyles : function(el, styles){
4311         if(styles){
4312            el = Roo.fly(el);
4313            if(typeof styles == "string"){
4314                var re = /\s?([a-z\-]*)\:\s?([^;]*);?/gi;
4315                var matches;
4316                while ((matches = re.exec(styles)) != null){
4317                    el.setStyle(matches[1], matches[2]);
4318                }
4319            }else if (typeof styles == "object"){
4320                for (var style in styles){
4321                   el.setStyle(style, styles[style]);
4322                }
4323            }else if (typeof styles == "function"){
4324                 Roo.DomHelper.applyStyles(el, styles.call());
4325            }
4326         }
4327     },
4328
4329     /**
4330      * Inserts an HTML fragment into the Dom
4331      * @param {String} where Where to insert the html in relation to el - beforeBegin, afterBegin, beforeEnd, afterEnd.
4332      * @param {HTMLElement} el The context element
4333      * @param {String} html The HTML fragmenet
4334      * @return {HTMLElement} The new node
4335      */
4336     insertHtml : function(where, el, html){
4337         where = where.toLowerCase();
4338         if(el.insertAdjacentHTML){
4339             if(tableRe.test(el.tagName)){
4340                 var rs;
4341                 if(rs = insertIntoTable(el.tagName.toLowerCase(), where, el, html)){
4342                     return rs;
4343                 }
4344             }
4345             switch(where){
4346                 case "beforebegin":
4347                     el.insertAdjacentHTML('BeforeBegin', html);
4348                     return el.previousSibling;
4349                 case "afterbegin":
4350                     el.insertAdjacentHTML('AfterBegin', html);
4351                     return el.firstChild;
4352                 case "beforeend":
4353                     el.insertAdjacentHTML('BeforeEnd', html);
4354                     return el.lastChild;
4355                 case "afterend":
4356                     el.insertAdjacentHTML('AfterEnd', html);
4357                     return el.nextSibling;
4358             }
4359             throw 'Illegal insertion point -> "' + where + '"';
4360         }
4361         var range = el.ownerDocument.createRange();
4362         var frag;
4363         switch(where){
4364              case "beforebegin":
4365                 range.setStartBefore(el);
4366                 frag = range.createContextualFragment(html);
4367                 el.parentNode.insertBefore(frag, el);
4368                 return el.previousSibling;
4369              case "afterbegin":
4370                 if(el.firstChild){
4371                     range.setStartBefore(el.firstChild);
4372                     frag = range.createContextualFragment(html);
4373                     el.insertBefore(frag, el.firstChild);
4374                     return el.firstChild;
4375                 }else{
4376                     el.innerHTML = html;
4377                     return el.firstChild;
4378                 }
4379             case "beforeend":
4380                 if(el.lastChild){
4381                     range.setStartAfter(el.lastChild);
4382                     frag = range.createContextualFragment(html);
4383                     el.appendChild(frag);
4384                     return el.lastChild;
4385                 }else{
4386                     el.innerHTML = html;
4387                     return el.lastChild;
4388                 }
4389             case "afterend":
4390                 range.setStartAfter(el);
4391                 frag = range.createContextualFragment(html);
4392                 el.parentNode.insertBefore(frag, el.nextSibling);
4393                 return el.nextSibling;
4394             }
4395             throw 'Illegal insertion point -> "' + where + '"';
4396     },
4397
4398     /**
4399      * Creates new Dom element(s) and inserts them before el
4400      * @param {String/HTMLElement/Element} el The context element
4401      * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
4402      * @param {Boolean} returnElement (optional) true to return a Roo.Element
4403      * @return {HTMLElement/Roo.Element} The new node
4404      */
4405     insertBefore : function(el, o, returnElement){
4406         return this.doInsert(el, o, returnElement, "beforeBegin");
4407     },
4408
4409     /**
4410      * Creates new Dom element(s) and inserts them after el
4411      * @param {String/HTMLElement/Element} el The context element
4412      * @param {Object} o The Dom object spec (and children)
4413      * @param {Boolean} returnElement (optional) true to return a Roo.Element
4414      * @return {HTMLElement/Roo.Element} The new node
4415      */
4416     insertAfter : function(el, o, returnElement){
4417         return this.doInsert(el, o, returnElement, "afterEnd", "nextSibling");
4418     },
4419
4420     /**
4421      * Creates new Dom element(s) and inserts them as the first child of el
4422      * @param {String/HTMLElement/Element} el The context element
4423      * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
4424      * @param {Boolean} returnElement (optional) true to return a Roo.Element
4425      * @return {HTMLElement/Roo.Element} The new node
4426      */
4427     insertFirst : function(el, o, returnElement){
4428         return this.doInsert(el, o, returnElement, "afterBegin");
4429     },
4430
4431     // private
4432     doInsert : function(el, o, returnElement, pos, sibling){
4433         el = Roo.getDom(el);
4434         var newNode;
4435         if(this.useDom || o.ns){
4436             newNode = createDom(o, null);
4437             el.parentNode.insertBefore(newNode, sibling ? el[sibling] : el);
4438         }else{
4439             var html = createHtml(o);
4440             newNode = this.insertHtml(pos, el, html);
4441         }
4442         return returnElement ? Roo.get(newNode, true) : newNode;
4443     },
4444
4445     /**
4446      * Creates new Dom element(s) and appends them to el
4447      * @param {String/HTMLElement/Element} el The context element
4448      * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
4449      * @param {Boolean} returnElement (optional) true to return a Roo.Element
4450      * @return {HTMLElement/Roo.Element} The new node
4451      */
4452     append : function(el, o, returnElement){
4453         el = Roo.getDom(el);
4454         var newNode;
4455         if(this.useDom || o.ns){
4456             newNode = createDom(o, null);
4457             el.appendChild(newNode);
4458         }else{
4459             var html = createHtml(o);
4460             newNode = this.insertHtml("beforeEnd", el, html);
4461         }
4462         return returnElement ? Roo.get(newNode, true) : newNode;
4463     },
4464
4465     /**
4466      * Creates new Dom element(s) and overwrites the contents of el with them
4467      * @param {String/HTMLElement/Element} el The context element
4468      * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
4469      * @param {Boolean} returnElement (optional) true to return a Roo.Element
4470      * @return {HTMLElement/Roo.Element} The new node
4471      */
4472     overwrite : function(el, o, returnElement){
4473         el = Roo.getDom(el);
4474         if (o.ns) {
4475           
4476             while (el.childNodes.length) {
4477                 el.removeChild(el.firstChild);
4478             }
4479             createDom(o, el);
4480         } else {
4481             el.innerHTML = createHtml(o);   
4482         }
4483         
4484         return returnElement ? Roo.get(el.firstChild, true) : el.firstChild;
4485     },
4486
4487     /**
4488      * Creates a new Roo.DomHelper.Template from the Dom object spec
4489      * @param {Object} o The Dom object spec (and children)
4490      * @return {Roo.DomHelper.Template} The new template
4491      */
4492     createTemplate : function(o){
4493         var html = createHtml(o);
4494         return new Roo.Template(html);
4495     }
4496     };
4497 }();
4498 /*
4499  * Based on:
4500  * Ext JS Library 1.1.1
4501  * Copyright(c) 2006-2007, Ext JS, LLC.
4502  *
4503  * Originally Released Under LGPL - original licence link has changed is not relivant.
4504  *
4505  * Fork - LGPL
4506  * <script type="text/javascript">
4507  */
4508  
4509 /**
4510 * @class Roo.Template
4511 * Represents an HTML fragment template. Templates can be precompiled for greater performance.
4512 * For a list of available format functions, see {@link Roo.util.Format}.<br />
4513 * Usage:
4514 <pre><code>
4515 var t = new Roo.Template({
4516     html :  '&lt;div name="{id}"&gt;' + 
4517         '&lt;span class="{cls}"&gt;{name:trim} {someval:this.myformat}{value:ellipsis(10)}&lt;/span&gt;' +
4518         '&lt;/div&gt;',
4519     myformat: function (value, allValues) {
4520         return 'XX' + value;
4521     }
4522 });
4523 t.append('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});
4524 </code></pre>
4525 * For more information see this blog post with examples: <a href="http://www.jackslocum.com/yui/2006/10/06/domhelper-create-elements-using-dom-html-fragments-or-templates/">DomHelper - Create Elements using DOM, HTML fragments and Templates</a>. 
4526 * @constructor
4527 * @param {Object} cfg - Configuration object.
4528 */
4529 Roo.Template = function(cfg){
4530     // BC!
4531     if(cfg instanceof Array){
4532         cfg = cfg.join("");
4533     }else if(arguments.length > 1){
4534         cfg = Array.prototype.join.call(arguments, "");
4535     }
4536     
4537     
4538     if (typeof(cfg) == 'object') {
4539         Roo.apply(this,cfg)
4540     } else {
4541         // bc
4542         this.html = cfg;
4543     }
4544     
4545     
4546 };
4547 Roo.Template.prototype = {
4548     
4549     /**
4550      * @cfg {String} html  The HTML fragment or an array of fragments to join("") or multiple arguments to join("")
4551      */
4552     html : '',
4553     /**
4554      * Returns an HTML fragment of this template with the specified values applied.
4555      * @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'})
4556      * @return {String} The HTML fragment
4557      */
4558     applyTemplate : function(values){
4559         try {
4560             
4561             if(this.compiled){
4562                 return this.compiled(values);
4563             }
4564             var useF = this.disableFormats !== true;
4565             var fm = Roo.util.Format, tpl = this;
4566             var fn = function(m, name, format, args){
4567                 if(format && useF){
4568                     if(format.substr(0, 5) == "this."){
4569                         return tpl.call(format.substr(5), values[name], values);
4570                     }else{
4571                         if(args){
4572                             // quoted values are required for strings in compiled templates, 
4573                             // but for non compiled we need to strip them
4574                             // quoted reversed for jsmin
4575                             var re = /^\s*['"](.*)["']\s*$/;
4576                             args = args.split(',');
4577                             for(var i = 0, len = args.length; i < len; i++){
4578                                 args[i] = args[i].replace(re, "$1");
4579                             }
4580                             args = [values[name]].concat(args);
4581                         }else{
4582                             args = [values[name]];
4583                         }
4584                         return fm[format].apply(fm, args);
4585                     }
4586                 }else{
4587                     return values[name] !== undefined ? values[name] : "";
4588                 }
4589             };
4590             return this.html.replace(this.re, fn);
4591         } catch (e) {
4592             Roo.log(e);
4593             throw e;
4594         }
4595          
4596     },
4597     
4598     /**
4599      * Sets the HTML used as the template and optionally compiles it.
4600      * @param {String} html
4601      * @param {Boolean} compile (optional) True to compile the template (defaults to undefined)
4602      * @return {Roo.Template} this
4603      */
4604     set : function(html, compile){
4605         this.html = html;
4606         this.compiled = null;
4607         if(compile){
4608             this.compile();
4609         }
4610         return this;
4611     },
4612     
4613     /**
4614      * True to disable format functions (defaults to false)
4615      * @type Boolean
4616      */
4617     disableFormats : false,
4618     
4619     /**
4620     * The regular expression used to match template variables 
4621     * @type RegExp
4622     * @property 
4623     */
4624     re : /\{([\w-]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
4625     
4626     /**
4627      * Compiles the template into an internal function, eliminating the RegEx overhead.
4628      * @return {Roo.Template} this
4629      */
4630     compile : function(){
4631         var fm = Roo.util.Format;
4632         var useF = this.disableFormats !== true;
4633         var sep = Roo.isGecko ? "+" : ",";
4634         var fn = function(m, name, format, args){
4635             if(format && useF){
4636                 args = args ? ',' + args : "";
4637                 if(format.substr(0, 5) != "this."){
4638                     format = "fm." + format + '(';
4639                 }else{
4640                     format = 'this.call("'+ format.substr(5) + '", ';
4641                     args = ", values";
4642                 }
4643             }else{
4644                 args= ''; format = "(values['" + name + "'] == undefined ? '' : ";
4645             }
4646             return "'"+ sep + format + "values['" + name + "']" + args + ")"+sep+"'";
4647         };
4648         var body;
4649         // branched to use + in gecko and [].join() in others
4650         if(Roo.isGecko){
4651             body = "this.compiled = function(values){ return '" +
4652                    this.html.replace(/\\/g, '\\\\').replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn) +
4653                     "';};";
4654         }else{
4655             body = ["this.compiled = function(values){ return ['"];
4656             body.push(this.html.replace(/\\/g, '\\\\').replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn));
4657             body.push("'].join('');};");
4658             body = body.join('');
4659         }
4660         /**
4661          * eval:var:values
4662          * eval:var:fm
4663          */
4664         eval(body);
4665         return this;
4666     },
4667     
4668     // private function used to call members
4669     call : function(fnName, value, allValues){
4670         return this[fnName](value, allValues);
4671     },
4672     
4673     /**
4674      * Applies the supplied values to the template and inserts the new node(s) as the first child of el.
4675      * @param {String/HTMLElement/Roo.Element} el The context element
4676      * @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'})
4677      * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
4678      * @return {HTMLElement/Roo.Element} The new node or Element
4679      */
4680     insertFirst: function(el, values, returnElement){
4681         return this.doInsert('afterBegin', el, values, returnElement);
4682     },
4683
4684     /**
4685      * Applies the supplied values to the template and inserts the new node(s) before el.
4686      * @param {String/HTMLElement/Roo.Element} el The context element
4687      * @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'})
4688      * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
4689      * @return {HTMLElement/Roo.Element} The new node or Element
4690      */
4691     insertBefore: function(el, values, returnElement){
4692         return this.doInsert('beforeBegin', el, values, returnElement);
4693     },
4694
4695     /**
4696      * Applies the supplied values to the template and inserts the new node(s) after el.
4697      * @param {String/HTMLElement/Roo.Element} el The context element
4698      * @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'})
4699      * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
4700      * @return {HTMLElement/Roo.Element} The new node or Element
4701      */
4702     insertAfter : function(el, values, returnElement){
4703         return this.doInsert('afterEnd', el, values, returnElement);
4704     },
4705     
4706     /**
4707      * Applies the supplied values to the template and appends the new node(s) to el.
4708      * @param {String/HTMLElement/Roo.Element} el The context element
4709      * @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'})
4710      * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
4711      * @return {HTMLElement/Roo.Element} The new node or Element
4712      */
4713     append : function(el, values, returnElement){
4714         return this.doInsert('beforeEnd', el, values, returnElement);
4715     },
4716
4717     doInsert : function(where, el, values, returnEl){
4718         el = Roo.getDom(el);
4719         var newNode = Roo.DomHelper.insertHtml(where, el, this.applyTemplate(values));
4720         return returnEl ? Roo.get(newNode, true) : newNode;
4721     },
4722
4723     /**
4724      * Applies the supplied values to the template and overwrites the content of el with the new node(s).
4725      * @param {String/HTMLElement/Roo.Element} el The context element
4726      * @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'})
4727      * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
4728      * @return {HTMLElement/Roo.Element} The new node or Element
4729      */
4730     overwrite : function(el, values, returnElement){
4731         el = Roo.getDom(el);
4732         el.innerHTML = this.applyTemplate(values);
4733         return returnElement ? Roo.get(el.firstChild, true) : el.firstChild;
4734     }
4735 };
4736 /**
4737  * Alias for {@link #applyTemplate}
4738  * @method
4739  */
4740 Roo.Template.prototype.apply = Roo.Template.prototype.applyTemplate;
4741
4742 // backwards compat
4743 Roo.DomHelper.Template = Roo.Template;
4744
4745 /**
4746  * Creates a template from the passed element's value (<i>display:none</i> textarea, preferred) or innerHTML.
4747  * @param {String/HTMLElement} el A DOM element or its id
4748  * @returns {Roo.Template} The created template
4749  * @static
4750  */
4751 Roo.Template.from = function(el){
4752     el = Roo.getDom(el);
4753     return new Roo.Template(el.value || el.innerHTML);
4754 };/*
4755  * Based on:
4756  * Ext JS Library 1.1.1
4757  * Copyright(c) 2006-2007, Ext JS, LLC.
4758  *
4759  * Originally Released Under LGPL - original licence link has changed is not relivant.
4760  *
4761  * Fork - LGPL
4762  * <script type="text/javascript">
4763  */
4764  
4765
4766 /*
4767  * This is code is also distributed under MIT license for use
4768  * with jQuery and prototype JavaScript libraries.
4769  */
4770 /**
4771  * @class Roo.DomQuery
4772 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).
4773 <p>
4774 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>
4775
4776 <p>
4777 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.
4778 </p>
4779 <h4>Element Selectors:</h4>
4780 <ul class="list">
4781     <li> <b>*</b> any element</li>
4782     <li> <b>E</b> an element with the tag E</li>
4783     <li> <b>E F</b> All descendent elements of E that have the tag F</li>
4784     <li> <b>E > F</b> or <b>E/F</b> all direct children elements of E that have the tag F</li>
4785     <li> <b>E + F</b> all elements with the tag F that are immediately preceded by an element with the tag E</li>
4786     <li> <b>E ~ F</b> all elements with the tag F that are preceded by a sibling element with the tag E</li>
4787 </ul>
4788 <h4>Attribute Selectors:</h4>
4789 <p>The use of @ and quotes are optional. For example, div[@foo='bar'] is also a valid attribute selector.</p>
4790 <ul class="list">
4791     <li> <b>E[foo]</b> has an attribute "foo"</li>
4792     <li> <b>E[foo=bar]</b> has an attribute "foo" that equals "bar"</li>
4793     <li> <b>E[foo^=bar]</b> has an attribute "foo" that starts with "bar"</li>
4794     <li> <b>E[foo$=bar]</b> has an attribute "foo" that ends with "bar"</li>
4795     <li> <b>E[foo*=bar]</b> has an attribute "foo" that contains the substring "bar"</li>
4796     <li> <b>E[foo%=2]</b> has an attribute "foo" that is evenly divisible by 2</li>
4797     <li> <b>E[foo!=bar]</b> has an attribute "foo" that does not equal "bar"</li>
4798 </ul>
4799 <h4>Pseudo Classes:</h4>
4800 <ul class="list">
4801     <li> <b>E:first-child</b> E is the first child of its parent</li>
4802     <li> <b>E:last-child</b> E is the last child of its parent</li>
4803     <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>
4804     <li> <b>E:nth-child(odd)</b> E is an odd child of its parent</li>
4805     <li> <b>E:nth-child(even)</b> E is an even child of its parent</li>
4806     <li> <b>E:only-child</b> E is the only child of its parent</li>
4807     <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>
4808     <li> <b>E:first</b> the first E in the resultset</li>
4809     <li> <b>E:last</b> the last E in the resultset</li>
4810     <li> <b>E:nth(<i>n</i>)</b> the <i>n</i>th E in the resultset (1 based)</li>
4811     <li> <b>E:odd</b> shortcut for :nth-child(odd)</li>
4812     <li> <b>E:even</b> shortcut for :nth-child(even)</li>
4813     <li> <b>E:contains(foo)</b> E's innerHTML contains the substring "foo"</li>
4814     <li> <b>E:nodeValue(foo)</b> E contains a textNode with a nodeValue that equals "foo"</li>
4815     <li> <b>E:not(S)</b> an E element that does not match simple selector S</li>
4816     <li> <b>E:has(S)</b> an E element that has a descendent that matches simple selector S</li>
4817     <li> <b>E:next(S)</b> an E element whose next sibling matches simple selector S</li>
4818     <li> <b>E:prev(S)</b> an E element whose previous sibling matches simple selector S</li>
4819 </ul>
4820 <h4>CSS Value Selectors:</h4>
4821 <ul class="list">
4822     <li> <b>E{display=none}</b> css value "display" that equals "none"</li>
4823     <li> <b>E{display^=none}</b> css value "display" that starts with "none"</li>
4824     <li> <b>E{display$=none}</b> css value "display" that ends with "none"</li>
4825     <li> <b>E{display*=none}</b> css value "display" that contains the substring "none"</li>
4826     <li> <b>E{display%=2}</b> css value "display" that is evenly divisible by 2</li>
4827     <li> <b>E{display!=none}</b> css value "display" that does not equal "none"</li>
4828 </ul>
4829  * @singleton
4830  */
4831 Roo.DomQuery = function(){
4832     var cache = {}, simpleCache = {}, valueCache = {};
4833     var nonSpace = /\S/;
4834     var trimRe = /^\s+|\s+$/g;
4835     var tplRe = /\{(\d+)\}/g;
4836     var modeRe = /^(\s?[\/>+~]\s?|\s|$)/;
4837     var tagTokenRe = /^(#)?([\w-\*]+)/;
4838     var nthRe = /(\d*)n\+?(\d*)/, nthRe2 = /\D/;
4839
4840     function child(p, index){
4841         var i = 0;
4842         var n = p.firstChild;
4843         while(n){
4844             if(n.nodeType == 1){
4845                if(++i == index){
4846                    return n;
4847                }
4848             }
4849             n = n.nextSibling;
4850         }
4851         return null;
4852     };
4853
4854     function next(n){
4855         while((n = n.nextSibling) && n.nodeType != 1);
4856         return n;
4857     };
4858
4859     function prev(n){
4860         while((n = n.previousSibling) && n.nodeType != 1);
4861         return n;
4862     };
4863
4864     function children(d){
4865         var n = d.firstChild, ni = -1;
4866             while(n){
4867                 var nx = n.nextSibling;
4868                 if(n.nodeType == 3 && !nonSpace.test(n.nodeValue)){
4869                     d.removeChild(n);
4870                 }else{
4871                     n.nodeIndex = ++ni;
4872                 }
4873                 n = nx;
4874             }
4875             return this;
4876         };
4877
4878     function byClassName(c, a, v){
4879         if(!v){
4880             return c;
4881         }
4882         var r = [], ri = -1, cn;
4883         for(var i = 0, ci; ci = c[i]; i++){
4884             if((' '+ci.className+' ').indexOf(v) != -1){
4885                 r[++ri] = ci;
4886             }
4887         }
4888         return r;
4889     };
4890
4891     function attrValue(n, attr){
4892         if(!n.tagName && typeof n.length != "undefined"){
4893             n = n[0];
4894         }
4895         if(!n){
4896             return null;
4897         }
4898         if(attr == "for"){
4899             return n.htmlFor;
4900         }
4901         if(attr == "class" || attr == "className"){
4902             return n.className;
4903         }
4904         return n.getAttribute(attr) || n[attr];
4905
4906     };
4907
4908     function getNodes(ns, mode, tagName){
4909         var result = [], ri = -1, cs;
4910         if(!ns){
4911             return result;
4912         }
4913         tagName = tagName || "*";
4914         if(typeof ns.getElementsByTagName != "undefined"){
4915             ns = [ns];
4916         }
4917         if(!mode){
4918             for(var i = 0, ni; ni = ns[i]; i++){
4919                 cs = ni.getElementsByTagName(tagName);
4920                 for(var j = 0, ci; ci = cs[j]; j++){
4921                     result[++ri] = ci;
4922                 }
4923             }
4924         }else if(mode == "/" || mode == ">"){
4925             var utag = tagName.toUpperCase();
4926             for(var i = 0, ni, cn; ni = ns[i]; i++){
4927                 cn = ni.children || ni.childNodes;
4928                 for(var j = 0, cj; cj = cn[j]; j++){
4929                     if(cj.nodeName == utag || cj.nodeName == tagName  || tagName == '*'){
4930                         result[++ri] = cj;
4931                     }
4932                 }
4933             }
4934         }else if(mode == "+"){
4935             var utag = tagName.toUpperCase();
4936             for(var i = 0, n; n = ns[i]; i++){
4937                 while((n = n.nextSibling) && n.nodeType != 1);
4938                 if(n && (n.nodeName == utag || n.nodeName == tagName || tagName == '*')){
4939                     result[++ri] = n;
4940                 }
4941             }
4942         }else if(mode == "~"){
4943             for(var i = 0, n; n = ns[i]; i++){
4944                 while((n = n.nextSibling) && (n.nodeType != 1 || (tagName == '*' || n.tagName.toLowerCase()!=tagName)));
4945                 if(n){
4946                     result[++ri] = n;
4947                 }
4948             }
4949         }
4950         return result;
4951     };
4952
4953     function concat(a, b){
4954         if(b.slice){
4955             return a.concat(b);
4956         }
4957         for(var i = 0, l = b.length; i < l; i++){
4958             a[a.length] = b[i];
4959         }
4960         return a;
4961     }
4962
4963     function byTag(cs, tagName){
4964         if(cs.tagName || cs == document){
4965             cs = [cs];
4966         }
4967         if(!tagName){
4968             return cs;
4969         }
4970         var r = [], ri = -1;
4971         tagName = tagName.toLowerCase();
4972         for(var i = 0, ci; ci = cs[i]; i++){
4973             if(ci.nodeType == 1 && ci.tagName.toLowerCase()==tagName){
4974                 r[++ri] = ci;
4975             }
4976         }
4977         return r;
4978     };
4979
4980     function byId(cs, attr, id){
4981         if(cs.tagName || cs == document){
4982             cs = [cs];
4983         }
4984         if(!id){
4985             return cs;
4986         }
4987         var r = [], ri = -1;
4988         for(var i = 0,ci; ci = cs[i]; i++){
4989             if(ci && ci.id == id){
4990                 r[++ri] = ci;
4991                 return r;
4992             }
4993         }
4994         return r;
4995     };
4996
4997     function byAttribute(cs, attr, value, op, custom){
4998         var r = [], ri = -1, st = custom=="{";
4999         var f = Roo.DomQuery.operators[op];
5000         for(var i = 0, ci; ci = cs[i]; i++){
5001             var a;
5002             if(st){
5003                 a = Roo.DomQuery.getStyle(ci, attr);
5004             }
5005             else if(attr == "class" || attr == "className"){
5006                 a = ci.className;
5007             }else if(attr == "for"){
5008                 a = ci.htmlFor;
5009             }else if(attr == "href"){
5010                 a = ci.getAttribute("href", 2);
5011             }else{
5012                 a = ci.getAttribute(attr);
5013             }
5014             if((f && f(a, value)) || (!f && a)){
5015                 r[++ri] = ci;
5016             }
5017         }
5018         return r;
5019     };
5020
5021     function byPseudo(cs, name, value){
5022         return Roo.DomQuery.pseudos[name](cs, value);
5023     };
5024
5025     // This is for IE MSXML which does not support expandos.
5026     // IE runs the same speed using setAttribute, however FF slows way down
5027     // and Safari completely fails so they need to continue to use expandos.
5028     var isIE = window.ActiveXObject ? true : false;
5029
5030     // this eval is stop the compressor from
5031     // renaming the variable to something shorter
5032     
5033     /** eval:var:batch */
5034     var batch = 30803; 
5035
5036     var key = 30803;
5037
5038     function nodupIEXml(cs){
5039         var d = ++key;
5040         cs[0].setAttribute("_nodup", d);
5041         var r = [cs[0]];
5042         for(var i = 1, len = cs.length; i < len; i++){
5043             var c = cs[i];
5044             if(!c.getAttribute("_nodup") != d){
5045                 c.setAttribute("_nodup", d);
5046                 r[r.length] = c;
5047             }
5048         }
5049         for(var i = 0, len = cs.length; i < len; i++){
5050             cs[i].removeAttribute("_nodup");
5051         }
5052         return r;
5053     }
5054
5055     function nodup(cs){
5056         if(!cs){
5057             return [];
5058         }
5059         var len = cs.length, c, i, r = cs, cj, ri = -1;
5060         if(!len || typeof cs.nodeType != "undefined" || len == 1){
5061             return cs;
5062         }
5063         if(isIE && typeof cs[0].selectSingleNode != "undefined"){
5064             return nodupIEXml(cs);
5065         }
5066         var d = ++key;
5067         cs[0]._nodup = d;
5068         for(i = 1; c = cs[i]; i++){
5069             if(c._nodup != d){
5070                 c._nodup = d;
5071             }else{
5072                 r = [];
5073                 for(var j = 0; j < i; j++){
5074                     r[++ri] = cs[j];
5075                 }
5076                 for(j = i+1; cj = cs[j]; j++){
5077                     if(cj._nodup != d){
5078                         cj._nodup = d;
5079                         r[++ri] = cj;
5080                     }
5081                 }
5082                 return r;
5083             }
5084         }
5085         return r;
5086     }
5087
5088     function quickDiffIEXml(c1, c2){
5089         var d = ++key;
5090         for(var i = 0, len = c1.length; i < len; i++){
5091             c1[i].setAttribute("_qdiff", d);
5092         }
5093         var r = [];
5094         for(var i = 0, len = c2.length; i < len; i++){
5095             if(c2[i].getAttribute("_qdiff") != d){
5096                 r[r.length] = c2[i];
5097             }
5098         }
5099         for(var i = 0, len = c1.length; i < len; i++){
5100            c1[i].removeAttribute("_qdiff");
5101         }
5102         return r;
5103     }
5104
5105     function quickDiff(c1, c2){
5106         var len1 = c1.length;
5107         if(!len1){
5108             return c2;
5109         }
5110         if(isIE && c1[0].selectSingleNode){
5111             return quickDiffIEXml(c1, c2);
5112         }
5113         var d = ++key;
5114         for(var i = 0; i < len1; i++){
5115             c1[i]._qdiff = d;
5116         }
5117         var r = [];
5118         for(var i = 0, len = c2.length; i < len; i++){
5119             if(c2[i]._qdiff != d){
5120                 r[r.length] = c2[i];
5121             }
5122         }
5123         return r;
5124     }
5125
5126     function quickId(ns, mode, root, id){
5127         if(ns == root){
5128            var d = root.ownerDocument || root;
5129            return d.getElementById(id);
5130         }
5131         ns = getNodes(ns, mode, "*");
5132         return byId(ns, null, id);
5133     }
5134
5135     return {
5136         getStyle : function(el, name){
5137             return Roo.fly(el).getStyle(name);
5138         },
5139         /**
5140          * Compiles a selector/xpath query into a reusable function. The returned function
5141          * takes one parameter "root" (optional), which is the context node from where the query should start.
5142          * @param {String} selector The selector/xpath query
5143          * @param {String} type (optional) Either "select" (the default) or "simple" for a simple selector match
5144          * @return {Function}
5145          */
5146         compile : function(path, type){
5147             type = type || "select";
5148             
5149             var fn = ["var f = function(root){\n var mode; ++batch; var n = root || document;\n"];
5150             var q = path, mode, lq;
5151             var tk = Roo.DomQuery.matchers;
5152             var tklen = tk.length;
5153             var mm;
5154
5155             // accept leading mode switch
5156             var lmode = q.match(modeRe);
5157             if(lmode && lmode[1]){
5158                 fn[fn.length] = 'mode="'+lmode[1].replace(trimRe, "")+'";';
5159                 q = q.replace(lmode[1], "");
5160             }
5161             // strip leading slashes
5162             while(path.substr(0, 1)=="/"){
5163                 path = path.substr(1);
5164             }
5165
5166             while(q && lq != q){
5167                 lq = q;
5168                 var tm = q.match(tagTokenRe);
5169                 if(type == "select"){
5170                     if(tm){
5171                         if(tm[1] == "#"){
5172                             fn[fn.length] = 'n = quickId(n, mode, root, "'+tm[2]+'");';
5173                         }else{
5174                             fn[fn.length] = 'n = getNodes(n, mode, "'+tm[2]+'");';
5175                         }
5176                         q = q.replace(tm[0], "");
5177                     }else if(q.substr(0, 1) != '@'){
5178                         fn[fn.length] = 'n = getNodes(n, mode, "*");';
5179                     }
5180                 }else{
5181                     if(tm){
5182                         if(tm[1] == "#"){
5183                             fn[fn.length] = 'n = byId(n, null, "'+tm[2]+'");';
5184                         }else{
5185                             fn[fn.length] = 'n = byTag(n, "'+tm[2]+'");';
5186                         }
5187                         q = q.replace(tm[0], "");
5188                     }
5189                 }
5190                 while(!(mm = q.match(modeRe))){
5191                     var matched = false;
5192                     for(var j = 0; j < tklen; j++){
5193                         var t = tk[j];
5194                         var m = q.match(t.re);
5195                         if(m){
5196                             fn[fn.length] = t.select.replace(tplRe, function(x, i){
5197                                                     return m[i];
5198                                                 });
5199                             q = q.replace(m[0], "");
5200                             matched = true;
5201                             break;
5202                         }
5203                     }
5204                     // prevent infinite loop on bad selector
5205                     if(!matched){
5206                         throw 'Error parsing selector, parsing failed at "' + q + '"';
5207                     }
5208                 }
5209                 if(mm[1]){
5210                     fn[fn.length] = 'mode="'+mm[1].replace(trimRe, "")+'";';
5211                     q = q.replace(mm[1], "");
5212                 }
5213             }
5214             fn[fn.length] = "return nodup(n);\n}";
5215             
5216              /** 
5217               * list of variables that need from compression as they are used by eval.
5218              *  eval:var:batch 
5219              *  eval:var:nodup
5220              *  eval:var:byTag
5221              *  eval:var:ById
5222              *  eval:var:getNodes
5223              *  eval:var:quickId
5224              *  eval:var:mode
5225              *  eval:var:root
5226              *  eval:var:n
5227              *  eval:var:byClassName
5228              *  eval:var:byPseudo
5229              *  eval:var:byAttribute
5230              *  eval:var:attrValue
5231              * 
5232              **/ 
5233             eval(fn.join(""));
5234             return f;
5235         },
5236
5237         /**
5238          * Selects a group of elements.
5239          * @param {String} selector The selector/xpath query (can be a comma separated list of selectors)
5240          * @param {Node} root (optional) The start of the query (defaults to document).
5241          * @return {Array}
5242          */
5243         select : function(path, root, type){
5244             if(!root || root == document){
5245                 root = document;
5246             }
5247             if(typeof root == "string"){
5248                 root = document.getElementById(root);
5249             }
5250             var paths = path.split(",");
5251             var results = [];
5252             for(var i = 0, len = paths.length; i < len; i++){
5253                 var p = paths[i].replace(trimRe, "");
5254                 if(!cache[p]){
5255                     cache[p] = Roo.DomQuery.compile(p);
5256                     if(!cache[p]){
5257                         throw p + " is not a valid selector";
5258                     }
5259                 }
5260                 var result = cache[p](root);
5261                 if(result && result != document){
5262                     results = results.concat(result);
5263                 }
5264             }
5265             if(paths.length > 1){
5266                 return nodup(results);
5267             }
5268             return results;
5269         },
5270
5271         /**
5272          * Selects a single element.
5273          * @param {String} selector The selector/xpath query
5274          * @param {Node} root (optional) The start of the query (defaults to document).
5275          * @return {Element}
5276          */
5277         selectNode : function(path, root){
5278             return Roo.DomQuery.select(path, root)[0];
5279         },
5280
5281         /**
5282          * Selects the value of a node, optionally replacing null with the defaultValue.
5283          * @param {String} selector The selector/xpath query
5284          * @param {Node} root (optional) The start of the query (defaults to document).
5285          * @param {String} defaultValue
5286          */
5287         selectValue : function(path, root, defaultValue){
5288             path = path.replace(trimRe, "");
5289             if(!valueCache[path]){
5290                 valueCache[path] = Roo.DomQuery.compile(path, "select");
5291             }
5292             var n = valueCache[path](root);
5293             n = n[0] ? n[0] : n;
5294             var v = (n && n.firstChild ? n.firstChild.nodeValue : null);
5295             return ((v === null||v === undefined||v==='') ? defaultValue : v);
5296         },
5297
5298         /**
5299          * Selects the value of a node, parsing integers and floats.
5300          * @param {String} selector The selector/xpath query
5301          * @param {Node} root (optional) The start of the query (defaults to document).
5302          * @param {Number} defaultValue
5303          * @return {Number}
5304          */
5305         selectNumber : function(path, root, defaultValue){
5306             var v = Roo.DomQuery.selectValue(path, root, defaultValue || 0);
5307             return parseFloat(v);
5308         },
5309
5310         /**
5311          * Returns true if the passed element(s) match the passed simple selector (e.g. div.some-class or span:first-child)
5312          * @param {String/HTMLElement/Array} el An element id, element or array of elements
5313          * @param {String} selector The simple selector to test
5314          * @return {Boolean}
5315          */
5316         is : function(el, ss){
5317             if(typeof el == "string"){
5318                 el = document.getElementById(el);
5319             }
5320             var isArray = (el instanceof Array);
5321             var result = Roo.DomQuery.filter(isArray ? el : [el], ss);
5322             return isArray ? (result.length == el.length) : (result.length > 0);
5323         },
5324
5325         /**
5326          * Filters an array of elements to only include matches of a simple selector (e.g. div.some-class or span:first-child)
5327          * @param {Array} el An array of elements to filter
5328          * @param {String} selector The simple selector to test
5329          * @param {Boolean} nonMatches If true, it returns the elements that DON'T match
5330          * the selector instead of the ones that match
5331          * @return {Array}
5332          */
5333         filter : function(els, ss, nonMatches){
5334             ss = ss.replace(trimRe, "");
5335             if(!simpleCache[ss]){
5336                 simpleCache[ss] = Roo.DomQuery.compile(ss, "simple");
5337             }
5338             var result = simpleCache[ss](els);
5339             return nonMatches ? quickDiff(result, els) : result;
5340         },
5341
5342         /**
5343          * Collection of matching regular expressions and code snippets.
5344          */
5345         matchers : [{
5346                 re: /^\.([\w-]+)/,
5347                 select: 'n = byClassName(n, null, " {1} ");'
5348             }, {
5349                 re: /^\:([\w-]+)(?:\(((?:[^\s>\/]*|.*?))\))?/,
5350                 select: 'n = byPseudo(n, "{1}", "{2}");'
5351             },{
5352                 re: /^(?:([\[\{])(?:@)?([\w-]+)\s?(?:(=|.=)\s?['"]?(.*?)["']?)?[\]\}])/,
5353                 select: 'n = byAttribute(n, "{2}", "{4}", "{3}", "{1}");'
5354             }, {
5355                 re: /^#([\w-]+)/,
5356                 select: 'n = byId(n, null, "{1}");'
5357             },{
5358                 re: /^@([\w-]+)/,
5359                 select: 'return {firstChild:{nodeValue:attrValue(n, "{1}")}};'
5360             }
5361         ],
5362
5363         /**
5364          * Collection of operator comparison functions. The default operators are =, !=, ^=, $=, *=, %=, |= and ~=.
5365          * 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;.
5366          */
5367         operators : {
5368             "=" : function(a, v){
5369                 return a == v;
5370             },
5371             "!=" : function(a, v){
5372                 return a != v;
5373             },
5374             "^=" : function(a, v){
5375                 return a && a.substr(0, v.length) == v;
5376             },
5377             "$=" : function(a, v){
5378                 return a && a.substr(a.length-v.length) == v;
5379             },
5380             "*=" : function(a, v){
5381                 return a && a.indexOf(v) !== -1;
5382             },
5383             "%=" : function(a, v){
5384                 return (a % v) == 0;
5385             },
5386             "|=" : function(a, v){
5387                 return a && (a == v || a.substr(0, v.length+1) == v+'-');
5388             },
5389             "~=" : function(a, v){
5390                 return a && (' '+a+' ').indexOf(' '+v+' ') != -1;
5391             }
5392         },
5393
5394         /**
5395          * Collection of "pseudo class" processors. Each processor is passed the current nodeset (array)
5396          * and the argument (if any) supplied in the selector.
5397          */
5398         pseudos : {
5399             "first-child" : function(c){
5400                 var r = [], ri = -1, n;
5401                 for(var i = 0, ci; ci = n = c[i]; i++){
5402                     while((n = n.previousSibling) && n.nodeType != 1);
5403                     if(!n){
5404                         r[++ri] = ci;
5405                     }
5406                 }
5407                 return r;
5408             },
5409
5410             "last-child" : function(c){
5411                 var r = [], ri = -1, n;
5412                 for(var i = 0, ci; ci = n = c[i]; i++){
5413                     while((n = n.nextSibling) && n.nodeType != 1);
5414                     if(!n){
5415                         r[++ri] = ci;
5416                     }
5417                 }
5418                 return r;
5419             },
5420
5421             "nth-child" : function(c, a) {
5422                 var r = [], ri = -1;
5423                 var m = nthRe.exec(a == "even" && "2n" || a == "odd" && "2n+1" || !nthRe2.test(a) && "n+" + a || a);
5424                 var f = (m[1] || 1) - 0, l = m[2] - 0;
5425                 for(var i = 0, n; n = c[i]; i++){
5426                     var pn = n.parentNode;
5427                     if (batch != pn._batch) {
5428                         var j = 0;
5429                         for(var cn = pn.firstChild; cn; cn = cn.nextSibling){
5430                             if(cn.nodeType == 1){
5431                                cn.nodeIndex = ++j;
5432                             }
5433                         }
5434                         pn._batch = batch;
5435                     }
5436                     if (f == 1) {
5437                         if (l == 0 || n.nodeIndex == l){
5438                             r[++ri] = n;
5439                         }
5440                     } else if ((n.nodeIndex + l) % f == 0){
5441                         r[++ri] = n;
5442                     }
5443                 }
5444
5445                 return r;
5446             },
5447
5448             "only-child" : function(c){
5449                 var r = [], ri = -1;;
5450                 for(var i = 0, ci; ci = c[i]; i++){
5451                     if(!prev(ci) && !next(ci)){
5452                         r[++ri] = ci;
5453                     }
5454                 }
5455                 return r;
5456             },
5457
5458             "empty" : function(c){
5459                 var r = [], ri = -1;
5460                 for(var i = 0, ci; ci = c[i]; i++){
5461                     var cns = ci.childNodes, j = 0, cn, empty = true;
5462                     while(cn = cns[j]){
5463                         ++j;
5464                         if(cn.nodeType == 1 || cn.nodeType == 3){
5465                             empty = false;
5466                             break;
5467                         }
5468                     }
5469                     if(empty){
5470                         r[++ri] = ci;
5471                     }
5472                 }
5473                 return r;
5474             },
5475
5476             "contains" : function(c, v){
5477                 var r = [], ri = -1;
5478                 for(var i = 0, ci; ci = c[i]; i++){
5479                     if((ci.textContent||ci.innerText||'').indexOf(v) != -1){
5480                         r[++ri] = ci;
5481                     }
5482                 }
5483                 return r;
5484             },
5485
5486             "nodeValue" : function(c, v){
5487                 var r = [], ri = -1;
5488                 for(var i = 0, ci; ci = c[i]; i++){
5489                     if(ci.firstChild && ci.firstChild.nodeValue == v){
5490                         r[++ri] = ci;
5491                     }
5492                 }
5493                 return r;
5494             },
5495
5496             "checked" : function(c){
5497                 var r = [], ri = -1;
5498                 for(var i = 0, ci; ci = c[i]; i++){
5499                     if(ci.checked == true){
5500                         r[++ri] = ci;
5501                     }
5502                 }
5503                 return r;
5504             },
5505
5506             "not" : function(c, ss){
5507                 return Roo.DomQuery.filter(c, ss, true);
5508             },
5509
5510             "odd" : function(c){
5511                 return this["nth-child"](c, "odd");
5512             },
5513
5514             "even" : function(c){
5515                 return this["nth-child"](c, "even");
5516             },
5517
5518             "nth" : function(c, a){
5519                 return c[a-1] || [];
5520             },
5521
5522             "first" : function(c){
5523                 return c[0] || [];
5524             },
5525
5526             "last" : function(c){
5527                 return c[c.length-1] || [];
5528             },
5529
5530             "has" : function(c, ss){
5531                 var s = Roo.DomQuery.select;
5532                 var r = [], ri = -1;
5533                 for(var i = 0, ci; ci = c[i]; i++){
5534                     if(s(ss, ci).length > 0){
5535                         r[++ri] = ci;
5536                     }
5537                 }
5538                 return r;
5539             },
5540
5541             "next" : function(c, ss){
5542                 var is = Roo.DomQuery.is;
5543                 var r = [], ri = -1;
5544                 for(var i = 0, ci; ci = c[i]; i++){
5545                     var n = next(ci);
5546                     if(n && is(n, ss)){
5547                         r[++ri] = ci;
5548                     }
5549                 }
5550                 return r;
5551             },
5552
5553             "prev" : function(c, ss){
5554                 var is = Roo.DomQuery.is;
5555                 var r = [], ri = -1;
5556                 for(var i = 0, ci; ci = c[i]; i++){
5557                     var n = prev(ci);
5558                     if(n && is(n, ss)){
5559                         r[++ri] = ci;
5560                     }
5561                 }
5562                 return r;
5563             }
5564         }
5565     };
5566 }();
5567
5568 /**
5569  * Selects an array of DOM nodes by CSS/XPath selector. Shorthand of {@link Roo.DomQuery#select}
5570  * @param {String} path The selector/xpath query
5571  * @param {Node} root (optional) The start of the query (defaults to document).
5572  * @return {Array}
5573  * @member Roo
5574  * @method query
5575  */
5576 Roo.query = Roo.DomQuery.select;
5577 /*
5578  * Based on:
5579  * Ext JS Library 1.1.1
5580  * Copyright(c) 2006-2007, Ext JS, LLC.
5581  *
5582  * Originally Released Under LGPL - original licence link has changed is not relivant.
5583  *
5584  * Fork - LGPL
5585  * <script type="text/javascript">
5586  */
5587
5588 /**
5589  * @class Roo.util.Observable
5590  * Base class that provides a common interface for publishing events. Subclasses are expected to
5591  * to have a property "events" with all the events defined.<br>
5592  * For example:
5593  * <pre><code>
5594  Employee = function(name){
5595     this.name = name;
5596     this.addEvents({
5597         "fired" : true,
5598         "quit" : true
5599     });
5600  }
5601  Roo.extend(Employee, Roo.util.Observable);
5602 </code></pre>
5603  * @param {Object} config properties to use (incuding events / listeners)
5604  */
5605
5606 Roo.util.Observable = function(cfg){
5607     
5608     cfg = cfg|| {};
5609     this.addEvents(cfg.events || {});
5610     if (cfg.events) {
5611         delete cfg.events; // make sure
5612     }
5613      
5614     Roo.apply(this, cfg);
5615     
5616     if(this.listeners){
5617         this.on(this.listeners);
5618         delete this.listeners;
5619     }
5620 };
5621 Roo.util.Observable.prototype = {
5622     /** 
5623  * @cfg {Object} listeners  list of events and functions to call for this object, 
5624  * For example :
5625  * <pre><code>
5626     listeners :  { 
5627        'click' : function(e) {
5628            ..... 
5629         } ,
5630         .... 
5631     } 
5632   </code></pre>
5633  */
5634     
5635     
5636     /**
5637      * Fires the specified event with the passed parameters (minus the event name).
5638      * @param {String} eventName
5639      * @param {Object...} args Variable number of parameters are passed to handlers
5640      * @return {Boolean} returns false if any of the handlers return false otherwise it returns true
5641      */
5642     fireEvent : function(){
5643         var ce = this.events[arguments[0].toLowerCase()];
5644         if(typeof ce == "object"){
5645             return ce.fire.apply(ce, Array.prototype.slice.call(arguments, 1));
5646         }else{
5647             return true;
5648         }
5649     },
5650
5651     // private
5652     filterOptRe : /^(?:scope|delay|buffer|single)$/,
5653
5654     /**
5655      * Appends an event handler to this component
5656      * @param {String}   eventName The type of event to listen for
5657      * @param {Function} handler The method the event invokes
5658      * @param {Object}   scope (optional) The scope in which to execute the handler
5659      * function. The handler function's "this" context.
5660      * @param {Object}   options (optional) An object containing handler configuration
5661      * properties. This may contain any of the following properties:<ul>
5662      * <li>scope {Object} The scope in which to execute the handler function. The handler function's "this" context.</li>
5663      * <li>delay {Number} The number of milliseconds to delay the invocation of the handler after te event fires.</li>
5664      * <li>single {Boolean} True to add a handler to handle just the next firing of the event, and then remove itself.</li>
5665      * <li>buffer {Number} Causes the handler to be scheduled to run in an {@link Roo.util.DelayedTask} delayed
5666      * by the specified number of milliseconds. If the event fires again within that time, the original
5667      * handler is <em>not</em> invoked, but the new handler is scheduled in its place.</li>
5668      * </ul><br>
5669      * <p>
5670      * <b>Combining Options</b><br>
5671      * Using the options argument, it is possible to combine different types of listeners:<br>
5672      * <br>
5673      * A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)
5674                 <pre><code>
5675                 el.on('click', this.onClick, this, {
5676                         single: true,
5677                 delay: 100,
5678                 forumId: 4
5679                 });
5680                 </code></pre>
5681      * <p>
5682      * <b>Attaching multiple handlers in 1 call</b><br>
5683      * The method also allows for a single argument to be passed which is a config object containing properties
5684      * which specify multiple handlers.
5685      * <pre><code>
5686                 el.on({
5687                         'click': {
5688                         fn: this.onClick,
5689                         scope: this,
5690                         delay: 100
5691                 }, 
5692                 'mouseover': {
5693                         fn: this.onMouseOver,
5694                         scope: this
5695                 },
5696                 'mouseout': {
5697                         fn: this.onMouseOut,
5698                         scope: this
5699                 }
5700                 });
5701                 </code></pre>
5702      * <p>
5703      * Or a shorthand syntax which passes the same scope object to all handlers:
5704         <pre><code>
5705                 el.on({
5706                         'click': this.onClick,
5707                 'mouseover': this.onMouseOver,
5708                 'mouseout': this.onMouseOut,
5709                 scope: this
5710                 });
5711                 </code></pre>
5712      */
5713     addListener : function(eventName, fn, scope, o){
5714         if(typeof eventName == "object"){
5715             o = eventName;
5716             for(var e in o){
5717                 if(this.filterOptRe.test(e)){
5718                     continue;
5719                 }
5720                 if(typeof o[e] == "function"){
5721                     // shared options
5722                     this.addListener(e, o[e], o.scope,  o);
5723                 }else{
5724                     // individual options
5725                     this.addListener(e, o[e].fn, o[e].scope, o[e]);
5726                 }
5727             }
5728             return;
5729         }
5730         o = (!o || typeof o == "boolean") ? {} : o;
5731         eventName = eventName.toLowerCase();
5732         var ce = this.events[eventName] || true;
5733         if(typeof ce == "boolean"){
5734             ce = new Roo.util.Event(this, eventName);
5735             this.events[eventName] = ce;
5736         }
5737         ce.addListener(fn, scope, o);
5738     },
5739
5740     /**
5741      * Removes a listener
5742      * @param {String}   eventName     The type of event to listen for
5743      * @param {Function} handler        The handler to remove
5744      * @param {Object}   scope  (optional) The scope (this object) for the handler
5745      */
5746     removeListener : function(eventName, fn, scope){
5747         var ce = this.events[eventName.toLowerCase()];
5748         if(typeof ce == "object"){
5749             ce.removeListener(fn, scope);
5750         }
5751     },
5752
5753     /**
5754      * Removes all listeners for this object
5755      */
5756     purgeListeners : function(){
5757         for(var evt in this.events){
5758             if(typeof this.events[evt] == "object"){
5759                  this.events[evt].clearListeners();
5760             }
5761         }
5762     },
5763
5764     relayEvents : function(o, events){
5765         var createHandler = function(ename){
5766             return function(){
5767                 return this.fireEvent.apply(this, Roo.combine(ename, Array.prototype.slice.call(arguments, 0)));
5768             };
5769         };
5770         for(var i = 0, len = events.length; i < len; i++){
5771             var ename = events[i];
5772             if(!this.events[ename]){ this.events[ename] = true; };
5773             o.on(ename, createHandler(ename), this);
5774         }
5775     },
5776
5777     /**
5778      * Used to define events on this Observable
5779      * @param {Object} object The object with the events defined
5780      */
5781     addEvents : function(o){
5782         if(!this.events){
5783             this.events = {};
5784         }
5785         Roo.applyIf(this.events, o);
5786     },
5787
5788     /**
5789      * Checks to see if this object has any listeners for a specified event
5790      * @param {String} eventName The name of the event to check for
5791      * @return {Boolean} True if the event is being listened for, else false
5792      */
5793     hasListener : function(eventName){
5794         var e = this.events[eventName];
5795         return typeof e == "object" && e.listeners.length > 0;
5796     }
5797 };
5798 /**
5799  * Appends an event handler to this element (shorthand for addListener)
5800  * @param {String}   eventName     The type of event to listen for
5801  * @param {Function} handler        The method the event invokes
5802  * @param {Object}   scope (optional) The scope in which to execute the handler
5803  * function. The handler function's "this" context.
5804  * @param {Object}   options  (optional)
5805  * @method
5806  */
5807 Roo.util.Observable.prototype.on = Roo.util.Observable.prototype.addListener;
5808 /**
5809  * Removes a listener (shorthand for removeListener)
5810  * @param {String}   eventName     The type of event to listen for
5811  * @param {Function} handler        The handler to remove
5812  * @param {Object}   scope  (optional) The scope (this object) for the handler
5813  * @method
5814  */
5815 Roo.util.Observable.prototype.un = Roo.util.Observable.prototype.removeListener;
5816
5817 /**
5818  * Starts capture on the specified Observable. All events will be passed
5819  * to the supplied function with the event name + standard signature of the event
5820  * <b>before</b> the event is fired. If the supplied function returns false,
5821  * the event will not fire.
5822  * @param {Observable} o The Observable to capture
5823  * @param {Function} fn The function to call
5824  * @param {Object} scope (optional) The scope (this object) for the fn
5825  * @static
5826  */
5827 Roo.util.Observable.capture = function(o, fn, scope){
5828     o.fireEvent = o.fireEvent.createInterceptor(fn, scope);
5829 };
5830
5831 /**
5832  * Removes <b>all</b> added captures from the Observable.
5833  * @param {Observable} o The Observable to release
5834  * @static
5835  */
5836 Roo.util.Observable.releaseCapture = function(o){
5837     o.fireEvent = Roo.util.Observable.prototype.fireEvent;
5838 };
5839
5840 (function(){
5841
5842     var createBuffered = function(h, o, scope){
5843         var task = new Roo.util.DelayedTask();
5844         return function(){
5845             task.delay(o.buffer, h, scope, Array.prototype.slice.call(arguments, 0));
5846         };
5847     };
5848
5849     var createSingle = function(h, e, fn, scope){
5850         return function(){
5851             e.removeListener(fn, scope);
5852             return h.apply(scope, arguments);
5853         };
5854     };
5855
5856     var createDelayed = function(h, o, scope){
5857         return function(){
5858             var args = Array.prototype.slice.call(arguments, 0);
5859             setTimeout(function(){
5860                 h.apply(scope, args);
5861             }, o.delay || 10);
5862         };
5863     };
5864
5865     Roo.util.Event = function(obj, name){
5866         this.name = name;
5867         this.obj = obj;
5868         this.listeners = [];
5869     };
5870
5871     Roo.util.Event.prototype = {
5872         addListener : function(fn, scope, options){
5873             var o = options || {};
5874             scope = scope || this.obj;
5875             if(!this.isListening(fn, scope)){
5876                 var l = {fn: fn, scope: scope, options: o};
5877                 var h = fn;
5878                 if(o.delay){
5879                     h = createDelayed(h, o, scope);
5880                 }
5881                 if(o.single){
5882                     h = createSingle(h, this, fn, scope);
5883                 }
5884                 if(o.buffer){
5885                     h = createBuffered(h, o, scope);
5886                 }
5887                 l.fireFn = h;
5888                 if(!this.firing){ // if we are currently firing this event, don't disturb the listener loop
5889                     this.listeners.push(l);
5890                 }else{
5891                     this.listeners = this.listeners.slice(0);
5892                     this.listeners.push(l);
5893                 }
5894             }
5895         },
5896
5897         findListener : function(fn, scope){
5898             scope = scope || this.obj;
5899             var ls = this.listeners;
5900             for(var i = 0, len = ls.length; i < len; i++){
5901                 var l = ls[i];
5902                 if(l.fn == fn && l.scope == scope){
5903                     return i;
5904                 }
5905             }
5906             return -1;
5907         },
5908
5909         isListening : function(fn, scope){
5910             return this.findListener(fn, scope) != -1;
5911         },
5912
5913         removeListener : function(fn, scope){
5914             var index;
5915             if((index = this.findListener(fn, scope)) != -1){
5916                 if(!this.firing){
5917                     this.listeners.splice(index, 1);
5918                 }else{
5919                     this.listeners = this.listeners.slice(0);
5920                     this.listeners.splice(index, 1);
5921                 }
5922                 return true;
5923             }
5924             return false;
5925         },
5926
5927         clearListeners : function(){
5928             this.listeners = [];
5929         },
5930
5931         fire : function(){
5932             var ls = this.listeners, scope, len = ls.length;
5933             if(len > 0){
5934                 this.firing = true;
5935                 var args = Array.prototype.slice.call(arguments, 0);
5936                 for(var i = 0; i < len; i++){
5937                     var l = ls[i];
5938                     if(l.fireFn.apply(l.scope||this.obj||window, arguments) === false){
5939                         this.firing = false;
5940                         return false;
5941                     }
5942                 }
5943                 this.firing = false;
5944             }
5945             return true;
5946         }
5947     };
5948 })();/*
5949  * Based on:
5950  * Ext JS Library 1.1.1
5951  * Copyright(c) 2006-2007, Ext JS, LLC.
5952  *
5953  * Originally Released Under LGPL - original licence link has changed is not relivant.
5954  *
5955  * Fork - LGPL
5956  * <script type="text/javascript">
5957  */
5958
5959 /**
5960  * @class Roo.EventManager
5961  * Registers event handlers that want to receive a normalized EventObject instead of the standard browser event and provides 
5962  * several useful events directly.
5963  * See {@link Roo.EventObject} for more details on normalized event objects.
5964  * @singleton
5965  */
5966 Roo.EventManager = function(){
5967     var docReadyEvent, docReadyProcId, docReadyState = false;
5968     var resizeEvent, resizeTask, textEvent, textSize;
5969     var E = Roo.lib.Event;
5970     var D = Roo.lib.Dom;
5971
5972
5973     var fireDocReady = function(){
5974         if(!docReadyState){
5975             docReadyState = true;
5976             Roo.isReady = true;
5977             if(docReadyProcId){
5978                 clearInterval(docReadyProcId);
5979             }
5980             if(Roo.isGecko || Roo.isOpera) {
5981                 document.removeEventListener("DOMContentLoaded", fireDocReady, false);
5982             }
5983             if(Roo.isIE){
5984                 var defer = document.getElementById("ie-deferred-loader");
5985                 if(defer){
5986                     defer.onreadystatechange = null;
5987                     defer.parentNode.removeChild(defer);
5988                 }
5989             }
5990             if(docReadyEvent){
5991                 docReadyEvent.fire();
5992                 docReadyEvent.clearListeners();
5993             }
5994         }
5995     };
5996     
5997     var initDocReady = function(){
5998         docReadyEvent = new Roo.util.Event();
5999         if(Roo.isGecko || Roo.isOpera) {
6000             document.addEventListener("DOMContentLoaded", fireDocReady, false);
6001         }else if(Roo.isIE){
6002             document.write("<s"+'cript id="ie-deferred-loader" defer="defer" src="/'+'/:"></s'+"cript>");
6003             var defer = document.getElementById("ie-deferred-loader");
6004             defer.onreadystatechange = function(){
6005                 if(this.readyState == "complete"){
6006                     fireDocReady();
6007                 }
6008             };
6009         }else if(Roo.isSafari){ 
6010             docReadyProcId = setInterval(function(){
6011                 var rs = document.readyState;
6012                 if(rs == "complete") {
6013                     fireDocReady();     
6014                  }
6015             }, 10);
6016         }
6017         // no matter what, make sure it fires on load
6018         E.on(window, "load", fireDocReady);
6019     };
6020
6021     var createBuffered = function(h, o){
6022         var task = new Roo.util.DelayedTask(h);
6023         return function(e){
6024             // create new event object impl so new events don't wipe out properties
6025             e = new Roo.EventObjectImpl(e);
6026             task.delay(o.buffer, h, null, [e]);
6027         };
6028     };
6029
6030     var createSingle = function(h, el, ename, fn){
6031         return function(e){
6032             Roo.EventManager.removeListener(el, ename, fn);
6033             h(e);
6034         };
6035     };
6036
6037     var createDelayed = function(h, o){
6038         return function(e){
6039             // create new event object impl so new events don't wipe out properties
6040             e = new Roo.EventObjectImpl(e);
6041             setTimeout(function(){
6042                 h(e);
6043             }, o.delay || 10);
6044         };
6045     };
6046
6047     var listen = function(element, ename, opt, fn, scope){
6048         var o = (!opt || typeof opt == "boolean") ? {} : opt;
6049         fn = fn || o.fn; scope = scope || o.scope;
6050         var el = Roo.getDom(element);
6051         if(!el){
6052             throw "Error listening for \"" + ename + '\". Element "' + element + '" doesn\'t exist.';
6053         }
6054         var h = function(e){
6055             e = Roo.EventObject.setEvent(e);
6056             var t;
6057             if(o.delegate){
6058                 t = e.getTarget(o.delegate, el);
6059                 if(!t){
6060                     return;
6061                 }
6062             }else{
6063                 t = e.target;
6064             }
6065             if(o.stopEvent === true){
6066                 e.stopEvent();
6067             }
6068             if(o.preventDefault === true){
6069                e.preventDefault();
6070             }
6071             if(o.stopPropagation === true){
6072                 e.stopPropagation();
6073             }
6074
6075             if(o.normalized === false){
6076                 e = e.browserEvent;
6077             }
6078
6079             fn.call(scope || el, e, t, o);
6080         };
6081         if(o.delay){
6082             h = createDelayed(h, o);
6083         }
6084         if(o.single){
6085             h = createSingle(h, el, ename, fn);
6086         }
6087         if(o.buffer){
6088             h = createBuffered(h, o);
6089         }
6090         fn._handlers = fn._handlers || [];
6091         fn._handlers.push([Roo.id(el), ename, h]);
6092
6093         E.on(el, ename, h);
6094         if(ename == "mousewheel" && el.addEventListener){ // workaround for jQuery
6095             el.addEventListener("DOMMouseScroll", h, false);
6096             E.on(window, 'unload', function(){
6097                 el.removeEventListener("DOMMouseScroll", h, false);
6098             });
6099         }
6100         if(ename == "mousedown" && el == document){ // fix stopped mousedowns on the document
6101             Roo.EventManager.stoppedMouseDownEvent.addListener(h);
6102         }
6103         return h;
6104     };
6105
6106     var stopListening = function(el, ename, fn){
6107         var id = Roo.id(el), hds = fn._handlers, hd = fn;
6108         if(hds){
6109             for(var i = 0, len = hds.length; i < len; i++){
6110                 var h = hds[i];
6111                 if(h[0] == id && h[1] == ename){
6112                     hd = h[2];
6113                     hds.splice(i, 1);
6114                     break;
6115                 }
6116             }
6117         }
6118         E.un(el, ename, hd);
6119         el = Roo.getDom(el);
6120         if(ename == "mousewheel" && el.addEventListener){
6121             el.removeEventListener("DOMMouseScroll", hd, false);
6122         }
6123         if(ename == "mousedown" && el == document){ // fix stopped mousedowns on the document
6124             Roo.EventManager.stoppedMouseDownEvent.removeListener(hd);
6125         }
6126     };
6127
6128     var propRe = /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/;
6129     
6130     var pub = {
6131         
6132         
6133         /** 
6134          * Fix for doc tools
6135          * @scope Roo.EventManager
6136          */
6137         
6138         
6139         /** 
6140          * This is no longer needed and is deprecated. Places a simple wrapper around an event handler to override the browser event
6141          * object with a Roo.EventObject
6142          * @param {Function} fn        The method the event invokes
6143          * @param {Object}   scope    An object that becomes the scope of the handler
6144          * @param {boolean}  override If true, the obj passed in becomes
6145          *                             the execution scope of the listener
6146          * @return {Function} The wrapped function
6147          * @deprecated
6148          */
6149         wrap : function(fn, scope, override){
6150             return function(e){
6151                 Roo.EventObject.setEvent(e);
6152                 fn.call(override ? scope || window : window, Roo.EventObject, scope);
6153             };
6154         },
6155         
6156         /**
6157      * Appends an event handler to an element (shorthand for addListener)
6158      * @param {String/HTMLElement}   element        The html element or id to assign the
6159      * @param {String}   eventName The type of event to listen for
6160      * @param {Function} handler The method the event invokes
6161      * @param {Object}   scope (optional) The scope in which to execute the handler
6162      * function. The handler function's "this" context.
6163      * @param {Object}   options (optional) An object containing handler configuration
6164      * properties. This may contain any of the following properties:<ul>
6165      * <li>scope {Object} The scope in which to execute the handler function. The handler function's "this" context.</li>
6166      * <li>delegate {String} A simple selector to filter the target or look for a descendant of the target</li>
6167      * <li>stopEvent {Boolean} True to stop the event. That is stop propagation, and prevent the default action.</li>
6168      * <li>preventDefault {Boolean} True to prevent the default action</li>
6169      * <li>stopPropagation {Boolean} True to prevent event propagation</li>
6170      * <li>normalized {Boolean} False to pass a browser event to the handler function instead of an Roo.EventObject</li>
6171      * <li>delay {Number} The number of milliseconds to delay the invocation of the handler after te event fires.</li>
6172      * <li>single {Boolean} True to add a handler to handle just the next firing of the event, and then remove itself.</li>
6173      * <li>buffer {Number} Causes the handler to be scheduled to run in an {@link Roo.util.DelayedTask} delayed
6174      * by the specified number of milliseconds. If the event fires again within that time, the original
6175      * handler is <em>not</em> invoked, but the new handler is scheduled in its place.</li>
6176      * </ul><br>
6177      * <p>
6178      * <b>Combining Options</b><br>
6179      * Using the options argument, it is possible to combine different types of listeners:<br>
6180      * <br>
6181      * A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)<div style="margin: 5px 20px 20px;">
6182      * Code:<pre><code>
6183 el.on('click', this.onClick, this, {
6184     single: true,
6185     delay: 100,
6186     stopEvent : true,
6187     forumId: 4
6188 });</code></pre>
6189      * <p>
6190      * <b>Attaching multiple handlers in 1 call</b><br>
6191       * The method also allows for a single argument to be passed which is a config object containing properties
6192      * which specify multiple handlers.
6193      * <p>
6194      * Code:<pre><code>
6195 el.on({
6196     'click' : {
6197         fn: this.onClick
6198         scope: this,
6199         delay: 100
6200     },
6201     'mouseover' : {
6202         fn: this.onMouseOver
6203         scope: this
6204     },
6205     'mouseout' : {
6206         fn: this.onMouseOut
6207         scope: this
6208     }
6209 });</code></pre>
6210      * <p>
6211      * Or a shorthand syntax:<br>
6212      * Code:<pre><code>
6213 el.on({
6214     'click' : this.onClick,
6215     'mouseover' : this.onMouseOver,
6216     'mouseout' : this.onMouseOut
6217     scope: this
6218 });</code></pre>
6219      */
6220         addListener : function(element, eventName, fn, scope, options){
6221             if(typeof eventName == "object"){
6222                 var o = eventName;
6223                 for(var e in o){
6224                     if(propRe.test(e)){
6225                         continue;
6226                     }
6227                     if(typeof o[e] == "function"){
6228                         // shared options
6229                         listen(element, e, o, o[e], o.scope);
6230                     }else{
6231                         // individual options
6232                         listen(element, e, o[e]);
6233                     }
6234                 }
6235                 return;
6236             }
6237             return listen(element, eventName, options, fn, scope);
6238         },
6239         
6240         /**
6241          * Removes an event handler
6242          *
6243          * @param {String/HTMLElement}   element        The id or html element to remove the 
6244          *                             event from
6245          * @param {String}   eventName     The type of event
6246          * @param {Function} fn
6247          * @return {Boolean} True if a listener was actually removed
6248          */
6249         removeListener : function(element, eventName, fn){
6250             return stopListening(element, eventName, fn);
6251         },
6252         
6253         /**
6254          * Fires when the document is ready (before onload and before images are loaded). Can be 
6255          * accessed shorthanded Roo.onReady().
6256          * @param {Function} fn        The method the event invokes
6257          * @param {Object}   scope    An  object that becomes the scope of the handler
6258          * @param {boolean}  options
6259          */
6260         onDocumentReady : function(fn, scope, options){
6261             if(docReadyState){ // if it already fired
6262                 docReadyEvent.addListener(fn, scope, options);
6263                 docReadyEvent.fire();
6264                 docReadyEvent.clearListeners();
6265                 return;
6266             }
6267             if(!docReadyEvent){
6268                 initDocReady();
6269             }
6270             docReadyEvent.addListener(fn, scope, options);
6271         },
6272         
6273         /**
6274          * Fires when the window is resized and provides resize event buffering (50 milliseconds), passes new viewport width and height to handlers.
6275          * @param {Function} fn        The method the event invokes
6276          * @param {Object}   scope    An object that becomes the scope of the handler
6277          * @param {boolean}  options
6278          */
6279         onWindowResize : function(fn, scope, options){
6280             if(!resizeEvent){
6281                 resizeEvent = new Roo.util.Event();
6282                 resizeTask = new Roo.util.DelayedTask(function(){
6283                     resizeEvent.fire(D.getViewWidth(), D.getViewHeight());
6284                 });
6285                 E.on(window, "resize", function(){
6286                     if(Roo.isIE){
6287                         resizeTask.delay(50);
6288                     }else{
6289                         resizeEvent.fire(D.getViewWidth(), D.getViewHeight());
6290                     }
6291                 });
6292             }
6293             resizeEvent.addListener(fn, scope, options);
6294         },
6295
6296         /**
6297          * Fires when the user changes the active text size. Handler gets called with 2 params, the old size and the new size.
6298          * @param {Function} fn        The method the event invokes
6299          * @param {Object}   scope    An object that becomes the scope of the handler
6300          * @param {boolean}  options
6301          */
6302         onTextResize : function(fn, scope, options){
6303             if(!textEvent){
6304                 textEvent = new Roo.util.Event();
6305                 var textEl = new Roo.Element(document.createElement('div'));
6306                 textEl.dom.className = 'x-text-resize';
6307                 textEl.dom.innerHTML = 'X';
6308                 textEl.appendTo(document.body);
6309                 textSize = textEl.dom.offsetHeight;
6310                 setInterval(function(){
6311                     if(textEl.dom.offsetHeight != textSize){
6312                         textEvent.fire(textSize, textSize = textEl.dom.offsetHeight);
6313                     }
6314                 }, this.textResizeInterval);
6315             }
6316             textEvent.addListener(fn, scope, options);
6317         },
6318
6319         /**
6320          * Removes the passed window resize listener.
6321          * @param {Function} fn        The method the event invokes
6322          * @param {Object}   scope    The scope of handler
6323          */
6324         removeResizeListener : function(fn, scope){
6325             if(resizeEvent){
6326                 resizeEvent.removeListener(fn, scope);
6327             }
6328         },
6329
6330         // private
6331         fireResize : function(){
6332             if(resizeEvent){
6333                 resizeEvent.fire(D.getViewWidth(), D.getViewHeight());
6334             }   
6335         },
6336         /**
6337          * Url used for onDocumentReady with using SSL (defaults to Roo.SSL_SECURE_URL)
6338          */
6339         ieDeferSrc : false,
6340         /**
6341          * The frequency, in milliseconds, to check for text resize events (defaults to 50)
6342          */
6343         textResizeInterval : 50
6344     };
6345     
6346     /**
6347      * Fix for doc tools
6348      * @scopeAlias pub=Roo.EventManager
6349      */
6350     
6351      /**
6352      * Appends an event handler to an element (shorthand for addListener)
6353      * @param {String/HTMLElement}   element        The html element or id to assign the
6354      * @param {String}   eventName The type of event to listen for
6355      * @param {Function} handler The method the event invokes
6356      * @param {Object}   scope (optional) The scope in which to execute the handler
6357      * function. The handler function's "this" context.
6358      * @param {Object}   options (optional) An object containing handler configuration
6359      * properties. This may contain any of the following properties:<ul>
6360      * <li>scope {Object} The scope in which to execute the handler function. The handler function's "this" context.</li>
6361      * <li>delegate {String} A simple selector to filter the target or look for a descendant of the target</li>
6362      * <li>stopEvent {Boolean} True to stop the event. That is stop propagation, and prevent the default action.</li>
6363      * <li>preventDefault {Boolean} True to prevent the default action</li>
6364      * <li>stopPropagation {Boolean} True to prevent event propagation</li>
6365      * <li>normalized {Boolean} False to pass a browser event to the handler function instead of an Roo.EventObject</li>
6366      * <li>delay {Number} The number of milliseconds to delay the invocation of the handler after te event fires.</li>
6367      * <li>single {Boolean} True to add a handler to handle just the next firing of the event, and then remove itself.</li>
6368      * <li>buffer {Number} Causes the handler to be scheduled to run in an {@link Roo.util.DelayedTask} delayed
6369      * by the specified number of milliseconds. If the event fires again within that time, the original
6370      * handler is <em>not</em> invoked, but the new handler is scheduled in its place.</li>
6371      * </ul><br>
6372      * <p>
6373      * <b>Combining Options</b><br>
6374      * Using the options argument, it is possible to combine different types of listeners:<br>
6375      * <br>
6376      * A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)<div style="margin: 5px 20px 20px;">
6377      * Code:<pre><code>
6378 el.on('click', this.onClick, this, {
6379     single: true,
6380     delay: 100,
6381     stopEvent : true,
6382     forumId: 4
6383 });</code></pre>
6384      * <p>
6385      * <b>Attaching multiple handlers in 1 call</b><br>
6386       * The method also allows for a single argument to be passed which is a config object containing properties
6387      * which specify multiple handlers.
6388      * <p>
6389      * Code:<pre><code>
6390 el.on({
6391     'click' : {
6392         fn: this.onClick
6393         scope: this,
6394         delay: 100
6395     },
6396     'mouseover' : {
6397         fn: this.onMouseOver
6398         scope: this
6399     },
6400     'mouseout' : {
6401         fn: this.onMouseOut
6402         scope: this
6403     }
6404 });</code></pre>
6405      * <p>
6406      * Or a shorthand syntax:<br>
6407      * Code:<pre><code>
6408 el.on({
6409     'click' : this.onClick,
6410     'mouseover' : this.onMouseOver,
6411     'mouseout' : this.onMouseOut
6412     scope: this
6413 });</code></pre>
6414      */
6415     pub.on = pub.addListener;
6416     pub.un = pub.removeListener;
6417
6418     pub.stoppedMouseDownEvent = new Roo.util.Event();
6419     return pub;
6420 }();
6421 /**
6422   * Fires when the document is ready (before onload and before images are loaded).  Shorthand of {@link Roo.EventManager#onDocumentReady}.
6423   * @param {Function} fn        The method the event invokes
6424   * @param {Object}   scope    An  object that becomes the scope of the handler
6425   * @param {boolean}  override If true, the obj passed in becomes
6426   *                             the execution scope of the listener
6427   * @member Roo
6428   * @method onReady
6429  */
6430 Roo.onReady = Roo.EventManager.onDocumentReady;
6431
6432 Roo.onReady(function(){
6433     var bd = Roo.get(document.body);
6434     if(!bd){ return; }
6435
6436     var cls = [
6437             Roo.isIE ? "roo-ie"
6438             : Roo.isGecko ? "roo-gecko"
6439             : Roo.isOpera ? "roo-opera"
6440             : Roo.isSafari ? "roo-safari" : ""];
6441
6442     if(Roo.isMac){
6443         cls.push("roo-mac");
6444     }
6445     if(Roo.isLinux){
6446         cls.push("roo-linux");
6447     }
6448     if(Roo.isBorderBox){
6449         cls.push('roo-border-box');
6450     }
6451     if(Roo.isStrict){ // add to the parent to allow for selectors like ".ext-strict .ext-ie"
6452         var p = bd.dom.parentNode;
6453         if(p){
6454             p.className += ' roo-strict';
6455         }
6456     }
6457     bd.addClass(cls.join(' '));
6458 });
6459
6460 /**
6461  * @class Roo.EventObject
6462  * EventObject exposes the Yahoo! UI Event functionality directly on the object
6463  * passed to your event handler. It exists mostly for convenience. It also fixes the annoying null checks automatically to cleanup your code 
6464  * Example:
6465  * <pre><code>
6466  function handleClick(e){ // e is not a standard event object, it is a Roo.EventObject
6467     e.preventDefault();
6468     var target = e.getTarget();
6469     ...
6470  }
6471  var myDiv = Roo.get("myDiv");
6472  myDiv.on("click", handleClick);
6473  //or
6474  Roo.EventManager.on("myDiv", 'click', handleClick);
6475  Roo.EventManager.addListener("myDiv", 'click', handleClick);
6476  </code></pre>
6477  * @singleton
6478  */
6479 Roo.EventObject = function(){
6480     
6481     var E = Roo.lib.Event;
6482     
6483     // safari keypress events for special keys return bad keycodes
6484     var safariKeys = {
6485         63234 : 37, // left
6486         63235 : 39, // right
6487         63232 : 38, // up
6488         63233 : 40, // down
6489         63276 : 33, // page up
6490         63277 : 34, // page down
6491         63272 : 46, // delete
6492         63273 : 36, // home
6493         63275 : 35  // end
6494     };
6495
6496     // normalize button clicks
6497     var btnMap = Roo.isIE ? {1:0,4:1,2:2} :
6498                 (Roo.isSafari ? {1:0,2:1,3:2} : {0:0,1:1,2:2});
6499
6500     Roo.EventObjectImpl = function(e){
6501         if(e){
6502             this.setEvent(e.browserEvent || e);
6503         }
6504     };
6505     Roo.EventObjectImpl.prototype = {
6506         /**
6507          * Used to fix doc tools.
6508          * @scope Roo.EventObject.prototype
6509          */
6510             
6511
6512         
6513         
6514         /** The normal browser event */
6515         browserEvent : null,
6516         /** The button pressed in a mouse event */
6517         button : -1,
6518         /** True if the shift key was down during the event */
6519         shiftKey : false,
6520         /** True if the control key was down during the event */
6521         ctrlKey : false,
6522         /** True if the alt key was down during the event */
6523         altKey : false,
6524
6525         /** Key constant 
6526         * @type Number */
6527         BACKSPACE : 8,
6528         /** Key constant 
6529         * @type Number */
6530         TAB : 9,
6531         /** Key constant 
6532         * @type Number */
6533         RETURN : 13,
6534         /** Key constant 
6535         * @type Number */
6536         ENTER : 13,
6537         /** Key constant 
6538         * @type Number */
6539         SHIFT : 16,
6540         /** Key constant 
6541         * @type Number */
6542         CONTROL : 17,
6543         /** Key constant 
6544         * @type Number */
6545         ESC : 27,
6546         /** Key constant 
6547         * @type Number */
6548         SPACE : 32,
6549         /** Key constant 
6550         * @type Number */
6551         PAGEUP : 33,
6552         /** Key constant 
6553         * @type Number */
6554         PAGEDOWN : 34,
6555         /** Key constant 
6556         * @type Number */
6557         END : 35,
6558         /** Key constant 
6559         * @type Number */
6560         HOME : 36,
6561         /** Key constant 
6562         * @type Number */
6563         LEFT : 37,
6564         /** Key constant 
6565         * @type Number */
6566         UP : 38,
6567         /** Key constant 
6568         * @type Number */
6569         RIGHT : 39,
6570         /** Key constant 
6571         * @type Number */
6572         DOWN : 40,
6573         /** Key constant 
6574         * @type Number */
6575         DELETE : 46,
6576         /** Key constant 
6577         * @type Number */
6578         F5 : 116,
6579
6580            /** @private */
6581         setEvent : function(e){
6582             if(e == this || (e && e.browserEvent)){ // already wrapped
6583                 return e;
6584             }
6585             this.browserEvent = e;
6586             if(e){
6587                 // normalize buttons
6588                 this.button = e.button ? btnMap[e.button] : (e.which ? e.which-1 : -1);
6589                 if(e.type == 'click' && this.button == -1){
6590                     this.button = 0;
6591                 }
6592                 this.type = e.type;
6593                 this.shiftKey = e.shiftKey;
6594                 // mac metaKey behaves like ctrlKey
6595                 this.ctrlKey = e.ctrlKey || e.metaKey;
6596                 this.altKey = e.altKey;
6597                 // in getKey these will be normalized for the mac
6598                 this.keyCode = e.keyCode;
6599                 // keyup warnings on firefox.
6600                 this.charCode = (e.type == 'keyup' || e.type == 'keydown') ? 0 : e.charCode;
6601                 // cache the target for the delayed and or buffered events
6602                 this.target = E.getTarget(e);
6603                 // same for XY
6604                 this.xy = E.getXY(e);
6605             }else{
6606                 this.button = -1;
6607                 this.shiftKey = false;
6608                 this.ctrlKey = false;
6609                 this.altKey = false;
6610                 this.keyCode = 0;
6611                 this.charCode =0;
6612                 this.target = null;
6613                 this.xy = [0, 0];
6614             }
6615             return this;
6616         },
6617
6618         /**
6619          * Stop the event (preventDefault and stopPropagation)
6620          */
6621         stopEvent : function(){
6622             if(this.browserEvent){
6623                 if(this.browserEvent.type == 'mousedown'){
6624                     Roo.EventManager.stoppedMouseDownEvent.fire(this);
6625                 }
6626                 E.stopEvent(this.browserEvent);
6627             }
6628         },
6629
6630         /**
6631          * Prevents the browsers default handling of the event.
6632          */
6633         preventDefault : function(){
6634             if(this.browserEvent){
6635                 E.preventDefault(this.browserEvent);
6636             }
6637         },
6638
6639         /** @private */
6640         isNavKeyPress : function(){
6641             var k = this.keyCode;
6642             k = Roo.isSafari ? (safariKeys[k] || k) : k;
6643             return (k >= 33 && k <= 40) || k == this.RETURN || k == this.TAB || k == this.ESC;
6644         },
6645
6646         isSpecialKey : function(){
6647             var k = this.keyCode;
6648             return (this.type == 'keypress' && this.ctrlKey) || k == 9 || k == 13  || k == 40 || k == 27 ||
6649             (k == 16) || (k == 17) ||
6650             (k >= 18 && k <= 20) ||
6651             (k >= 33 && k <= 35) ||
6652             (k >= 36 && k <= 39) ||
6653             (k >= 44 && k <= 45);
6654         },
6655         /**
6656          * Cancels bubbling of the event.
6657          */
6658         stopPropagation : function(){
6659             if(this.browserEvent){
6660                 if(this.type == 'mousedown'){
6661                     Roo.EventManager.stoppedMouseDownEvent.fire(this);
6662                 }
6663                 E.stopPropagation(this.browserEvent);
6664             }
6665         },
6666
6667         /**
6668          * Gets the key code for the event.
6669          * @return {Number}
6670          */
6671         getCharCode : function(){
6672             return this.charCode || this.keyCode;
6673         },
6674
6675         /**
6676          * Returns a normalized keyCode for the event.
6677          * @return {Number} The key code
6678          */
6679         getKey : function(){
6680             var k = this.keyCode || this.charCode;
6681             return Roo.isSafari ? (safariKeys[k] || k) : k;
6682         },
6683
6684         /**
6685          * Gets the x coordinate of the event.
6686          * @return {Number}
6687          */
6688         getPageX : function(){
6689             return this.xy[0];
6690         },
6691
6692         /**
6693          * Gets the y coordinate of the event.
6694          * @return {Number}
6695          */
6696         getPageY : function(){
6697             return this.xy[1];
6698         },
6699
6700         /**
6701          * Gets the time of the event.
6702          * @return {Number}
6703          */
6704         getTime : function(){
6705             if(this.browserEvent){
6706                 return E.getTime(this.browserEvent);
6707             }
6708             return null;
6709         },
6710
6711         /**
6712          * Gets the page coordinates of the event.
6713          * @return {Array} The xy values like [x, y]
6714          */
6715         getXY : function(){
6716             return this.xy;
6717         },
6718
6719         /**
6720          * Gets the target for the event.
6721          * @param {String} selector (optional) A simple selector to filter the target or look for an ancestor of the target
6722          * @param {Number/String/HTMLElement/Element} maxDepth (optional) The max depth to
6723                 search as a number or element (defaults to 10 || document.body)
6724          * @param {Boolean} returnEl (optional) True to return a Roo.Element object instead of DOM node
6725          * @return {HTMLelement}
6726          */
6727         getTarget : function(selector, maxDepth, returnEl){
6728             return selector ? Roo.fly(this.target).findParent(selector, maxDepth, returnEl) : this.target;
6729         },
6730         /**
6731          * Gets the related target.
6732          * @return {HTMLElement}
6733          */
6734         getRelatedTarget : function(){
6735             if(this.browserEvent){
6736                 return E.getRelatedTarget(this.browserEvent);
6737             }
6738             return null;
6739         },
6740
6741         /**
6742          * Normalizes mouse wheel delta across browsers
6743          * @return {Number} The delta
6744          */
6745         getWheelDelta : function(){
6746             var e = this.browserEvent;
6747             var delta = 0;
6748             if(e.wheelDelta){ /* IE/Opera. */
6749                 delta = e.wheelDelta/120;
6750             }else if(e.detail){ /* Mozilla case. */
6751                 delta = -e.detail/3;
6752             }
6753             return delta;
6754         },
6755
6756         /**
6757          * Returns true if the control, meta, shift or alt key was pressed during this event.
6758          * @return {Boolean}
6759          */
6760         hasModifier : function(){
6761             return !!((this.ctrlKey || this.altKey) || this.shiftKey);
6762         },
6763
6764         /**
6765          * Returns true if the target of this event equals el or is a child of el
6766          * @param {String/HTMLElement/Element} el
6767          * @param {Boolean} related (optional) true to test if the related target is within el instead of the target
6768          * @return {Boolean}
6769          */
6770         within : function(el, related){
6771             var t = this[related ? "getRelatedTarget" : "getTarget"]();
6772             return t && Roo.fly(el).contains(t);
6773         },
6774
6775         getPoint : function(){
6776             return new Roo.lib.Point(this.xy[0], this.xy[1]);
6777         }
6778     };
6779
6780     return new Roo.EventObjectImpl();
6781 }();
6782             
6783     /*
6784  * Based on:
6785  * Ext JS Library 1.1.1
6786  * Copyright(c) 2006-2007, Ext JS, LLC.
6787  *
6788  * Originally Released Under LGPL - original licence link has changed is not relivant.
6789  *
6790  * Fork - LGPL
6791  * <script type="text/javascript">
6792  */
6793
6794  
6795 // was in Composite Element!??!?!
6796  
6797 (function(){
6798     var D = Roo.lib.Dom;
6799     var E = Roo.lib.Event;
6800     var A = Roo.lib.Anim;
6801
6802     // local style camelizing for speed
6803     var propCache = {};
6804     var camelRe = /(-[a-z])/gi;
6805     var camelFn = function(m, a){ return a.charAt(1).toUpperCase(); };
6806     var view = document.defaultView;
6807
6808 /**
6809  * @class Roo.Element
6810  * Represents an Element in the DOM.<br><br>
6811  * Usage:<br>
6812 <pre><code>
6813 var el = Roo.get("my-div");
6814
6815 // or with getEl
6816 var el = getEl("my-div");
6817
6818 // or with a DOM element
6819 var el = Roo.get(myDivElement);
6820 </code></pre>
6821  * Using Roo.get() or getEl() instead of calling the constructor directly ensures you get the same object
6822  * each call instead of constructing a new one.<br><br>
6823  * <b>Animations</b><br />
6824  * Many of the functions for manipulating an element have an optional "animate" parameter. The animate parameter
6825  * should either be a boolean (true) or an object literal with animation options. The animation options are:
6826 <pre>
6827 Option    Default   Description
6828 --------- --------  ---------------------------------------------
6829 duration  .35       The duration of the animation in seconds
6830 easing    easeOut   The YUI easing method
6831 callback  none      A function to execute when the anim completes
6832 scope     this      The scope (this) of the callback function
6833 </pre>
6834 * Also, the Anim object being used for the animation will be set on your options object as "anim", which allows you to stop or
6835 * manipulate the animation. Here's an example:
6836 <pre><code>
6837 var el = Roo.get("my-div");
6838
6839 // no animation
6840 el.setWidth(100);
6841
6842 // default animation
6843 el.setWidth(100, true);
6844
6845 // animation with some options set
6846 el.setWidth(100, {
6847     duration: 1,
6848     callback: this.foo,
6849     scope: this
6850 });
6851
6852 // using the "anim" property to get the Anim object
6853 var opt = {
6854     duration: 1,
6855     callback: this.foo,
6856     scope: this
6857 };
6858 el.setWidth(100, opt);
6859 ...
6860 if(opt.anim.isAnimated()){
6861     opt.anim.stop();
6862 }
6863 </code></pre>
6864 * <b> Composite (Collections of) Elements</b><br />
6865  * For working with collections of Elements, see <a href="Roo.CompositeElement.html">Roo.CompositeElement</a>
6866  * @constructor Create a new Element directly.
6867  * @param {String/HTMLElement} element
6868  * @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).
6869  */
6870     Roo.Element = function(element, forceNew){
6871         var dom = typeof element == "string" ?
6872                 document.getElementById(element) : element;
6873         if(!dom){ // invalid id/element
6874             return null;
6875         }
6876         var id = dom.id;
6877         if(forceNew !== true && id && Roo.Element.cache[id]){ // element object already exists
6878             return Roo.Element.cache[id];
6879         }
6880
6881         /**
6882          * The DOM element
6883          * @type HTMLElement
6884          */
6885         this.dom = dom;
6886
6887         /**
6888          * The DOM element ID
6889          * @type String
6890          */
6891         this.id = id || Roo.id(dom);
6892     };
6893
6894     var El = Roo.Element;
6895
6896     El.prototype = {
6897         /**
6898          * The element's default display mode  (defaults to "")
6899          * @type String
6900          */
6901         originalDisplay : "",
6902
6903         visibilityMode : 1,
6904         /**
6905          * The default unit to append to CSS values where a unit isn't provided (defaults to px).
6906          * @type String
6907          */
6908         defaultUnit : "px",
6909         /**
6910          * Sets the element's visibility mode. When setVisible() is called it
6911          * will use this to determine whether to set the visibility or the display property.
6912          * @param visMode Element.VISIBILITY or Element.DISPLAY
6913          * @return {Roo.Element} this
6914          */
6915         setVisibilityMode : function(visMode){
6916             this.visibilityMode = visMode;
6917             return this;
6918         },
6919         /**
6920          * Convenience method for setVisibilityMode(Element.DISPLAY)
6921          * @param {String} display (optional) What to set display to when visible
6922          * @return {Roo.Element} this
6923          */
6924         enableDisplayMode : function(display){
6925             this.setVisibilityMode(El.DISPLAY);
6926             if(typeof display != "undefined") this.originalDisplay = display;
6927             return this;
6928         },
6929
6930         /**
6931          * 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)
6932          * @param {String} selector The simple selector to test
6933          * @param {Number/String/HTMLElement/Element} maxDepth (optional) The max depth to
6934                 search as a number or element (defaults to 10 || document.body)
6935          * @param {Boolean} returnEl (optional) True to return a Roo.Element object instead of DOM node
6936          * @return {HTMLElement} The matching DOM node (or null if no match was found)
6937          */
6938         findParent : function(simpleSelector, maxDepth, returnEl){
6939             var p = this.dom, b = document.body, depth = 0, dq = Roo.DomQuery, stopEl;
6940             maxDepth = maxDepth || 50;
6941             if(typeof maxDepth != "number"){
6942                 stopEl = Roo.getDom(maxDepth);
6943                 maxDepth = 10;
6944             }
6945             while(p && p.nodeType == 1 && depth < maxDepth && p != b && p != stopEl){
6946                 if(dq.is(p, simpleSelector)){
6947                     return returnEl ? Roo.get(p) : p;
6948                 }
6949                 depth++;
6950                 p = p.parentNode;
6951             }
6952             return null;
6953         },
6954
6955
6956         /**
6957          * Looks at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child)
6958          * @param {String} selector The simple selector to test
6959          * @param {Number/String/HTMLElement/Element} maxDepth (optional) The max depth to
6960                 search as a number or element (defaults to 10 || document.body)
6961          * @param {Boolean} returnEl (optional) True to return a Roo.Element object instead of DOM node
6962          * @return {HTMLElement} The matching DOM node (or null if no match was found)
6963          */
6964         findParentNode : function(simpleSelector, maxDepth, returnEl){
6965             var p = Roo.fly(this.dom.parentNode, '_internal');
6966             return p ? p.findParent(simpleSelector, maxDepth, returnEl) : null;
6967         },
6968
6969         /**
6970          * Walks up the dom looking for a parent node that matches the passed simple selector (e.g. div.some-class or span:first-child).
6971          * This is a shortcut for findParentNode() that always returns an Roo.Element.
6972          * @param {String} selector The simple selector to test
6973          * @param {Number/String/HTMLElement/Element} maxDepth (optional) The max depth to
6974                 search as a number or element (defaults to 10 || document.body)
6975          * @return {Roo.Element} The matching DOM node (or null if no match was found)
6976          */
6977         up : function(simpleSelector, maxDepth){
6978             return this.findParentNode(simpleSelector, maxDepth, true);
6979         },
6980
6981
6982
6983         /**
6984          * Returns true if this element matches the passed simple selector (e.g. div.some-class or span:first-child)
6985          * @param {String} selector The simple selector to test
6986          * @return {Boolean} True if this element matches the selector, else false
6987          */
6988         is : function(simpleSelector){
6989             return Roo.DomQuery.is(this.dom, simpleSelector);
6990         },
6991
6992         /**
6993          * Perform animation on this element.
6994          * @param {Object} args The YUI animation control args
6995          * @param {Float} duration (optional) How long the animation lasts in seconds (defaults to .35)
6996          * @param {Function} onComplete (optional) Function to call when animation completes
6997          * @param {String} easing (optional) Easing method to use (defaults to 'easeOut')
6998          * @param {String} animType (optional) 'run' is the default. Can also be 'color', 'motion', or 'scroll'
6999          * @return {Roo.Element} this
7000          */
7001         animate : function(args, duration, onComplete, easing, animType){
7002             this.anim(args, {duration: duration, callback: onComplete, easing: easing}, animType);
7003             return this;
7004         },
7005
7006         /*
7007          * @private Internal animation call
7008          */
7009         anim : function(args, opt, animType, defaultDur, defaultEase, cb){
7010             animType = animType || 'run';
7011             opt = opt || {};
7012             var anim = Roo.lib.Anim[animType](
7013                 this.dom, args,
7014                 (opt.duration || defaultDur) || .35,
7015                 (opt.easing || defaultEase) || 'easeOut',
7016                 function(){
7017                     Roo.callback(cb, this);
7018                     Roo.callback(opt.callback, opt.scope || this, [this, opt]);
7019                 },
7020                 this
7021             );
7022             opt.anim = anim;
7023             return anim;
7024         },
7025
7026         // private legacy anim prep
7027         preanim : function(a, i){
7028             return !a[i] ? false : (typeof a[i] == "object" ? a[i]: {duration: a[i+1], callback: a[i+2], easing: a[i+3]});
7029         },
7030
7031         /**
7032          * Removes worthless text nodes
7033          * @param {Boolean} forceReclean (optional) By default the element
7034          * keeps track if it has been cleaned already so
7035          * you can call this over and over. However, if you update the element and
7036          * need to force a reclean, you can pass true.
7037          */
7038         clean : function(forceReclean){
7039             if(this.isCleaned && forceReclean !== true){
7040                 return this;
7041             }
7042             var ns = /\S/;
7043             var d = this.dom, n = d.firstChild, ni = -1;
7044             while(n){
7045                 var nx = n.nextSibling;
7046                 if(n.nodeType == 3 && !ns.test(n.nodeValue)){
7047                     d.removeChild(n);
7048                 }else{
7049                     n.nodeIndex = ++ni;
7050                 }
7051                 n = nx;
7052             }
7053             this.isCleaned = true;
7054             return this;
7055         },
7056
7057         // private
7058         calcOffsetsTo : function(el){
7059             el = Roo.get(el);
7060             var d = el.dom;
7061             var restorePos = false;
7062             if(el.getStyle('position') == 'static'){
7063                 el.position('relative');
7064                 restorePos = true;
7065             }
7066             var x = 0, y =0;
7067             var op = this.dom;
7068             while(op && op != d && op.tagName != 'HTML'){
7069                 x+= op.offsetLeft;
7070                 y+= op.offsetTop;
7071                 op = op.offsetParent;
7072             }
7073             if(restorePos){
7074                 el.position('static');
7075             }
7076             return [x, y];
7077         },
7078
7079         /**
7080          * Scrolls this element into view within the passed container.
7081          * @param {String/HTMLElement/Element} container (optional) The container element to scroll (defaults to document.body)
7082          * @param {Boolean} hscroll (optional) False to disable horizontal scroll (defaults to true)
7083          * @return {Roo.Element} this
7084          */
7085         scrollIntoView : function(container, hscroll){
7086             var c = Roo.getDom(container) || document.body;
7087             var el = this.dom;
7088
7089             var o = this.calcOffsetsTo(c),
7090                 l = o[0],
7091                 t = o[1],
7092                 b = t+el.offsetHeight,
7093                 r = l+el.offsetWidth;
7094
7095             var ch = c.clientHeight;
7096             var ct = parseInt(c.scrollTop, 10);
7097             var cl = parseInt(c.scrollLeft, 10);
7098             var cb = ct + ch;
7099             var cr = cl + c.clientWidth;
7100
7101             if(t < ct){
7102                 c.scrollTop = t;
7103             }else if(b > cb){
7104                 c.scrollTop = b-ch;
7105             }
7106
7107             if(hscroll !== false){
7108                 if(l < cl){
7109                     c.scrollLeft = l;
7110                 }else if(r > cr){
7111                     c.scrollLeft = r-c.clientWidth;
7112                 }
7113             }
7114             return this;
7115         },
7116
7117         // private
7118         scrollChildIntoView : function(child, hscroll){
7119             Roo.fly(child, '_scrollChildIntoView').scrollIntoView(this, hscroll);
7120         },
7121
7122         /**
7123          * Measures the element's content height and updates height to match. Note: this function uses setTimeout so
7124          * the new height may not be available immediately.
7125          * @param {Boolean} animate (optional) Animate the transition (defaults to false)
7126          * @param {Float} duration (optional) Length of the animation in seconds (defaults to .35)
7127          * @param {Function} onComplete (optional) Function to call when animation completes
7128          * @param {String} easing (optional) Easing method to use (defaults to easeOut)
7129          * @return {Roo.Element} this
7130          */
7131         autoHeight : function(animate, duration, onComplete, easing){
7132             var oldHeight = this.getHeight();
7133             this.clip();
7134             this.setHeight(1); // force clipping
7135             setTimeout(function(){
7136                 var height = parseInt(this.dom.scrollHeight, 10); // parseInt for Safari
7137                 if(!animate){
7138                     this.setHeight(height);
7139                     this.unclip();
7140                     if(typeof onComplete == "function"){
7141                         onComplete();
7142                     }
7143                 }else{
7144                     this.setHeight(oldHeight); // restore original height
7145                     this.setHeight(height, animate, duration, function(){
7146                         this.unclip();
7147                         if(typeof onComplete == "function") onComplete();
7148                     }.createDelegate(this), easing);
7149                 }
7150             }.createDelegate(this), 0);
7151             return this;
7152         },
7153
7154         /**
7155          * Returns true if this element is an ancestor of the passed element
7156          * @param {HTMLElement/String} el The element to check
7157          * @return {Boolean} True if this element is an ancestor of el, else false
7158          */
7159         contains : function(el){
7160             if(!el){return false;}
7161             return D.isAncestor(this.dom, el.dom ? el.dom : el);
7162         },
7163
7164         /**
7165          * Checks whether the element is currently visible using both visibility and display properties.
7166          * @param {Boolean} deep (optional) True to walk the dom and see if parent elements are hidden (defaults to false)
7167          * @return {Boolean} True if the element is currently visible, else false
7168          */
7169         isVisible : function(deep) {
7170             var vis = !(this.getStyle("visibility") == "hidden" || this.getStyle("display") == "none");
7171             if(deep !== true || !vis){
7172                 return vis;
7173             }
7174             var p = this.dom.parentNode;
7175             while(p && p.tagName.toLowerCase() != "body"){
7176                 if(!Roo.fly(p, '_isVisible').isVisible()){
7177                     return false;
7178                 }
7179                 p = p.parentNode;
7180             }
7181             return true;
7182         },
7183
7184         /**
7185          * Creates a {@link Roo.CompositeElement} for child nodes based on the passed CSS selector (the selector should not contain an id).
7186          * @param {String} selector The CSS selector
7187          * @param {Boolean} unique (optional) True to create a unique Roo.Element for each child (defaults to false, which creates a single shared flyweight object)
7188          * @return {CompositeElement/CompositeElementLite} The composite element
7189          */
7190         select : function(selector, unique){
7191             return El.select(selector, unique, this.dom);
7192         },
7193
7194         /**
7195          * Selects child nodes based on the passed CSS selector (the selector should not contain an id).
7196          * @param {String} selector The CSS selector
7197          * @return {Array} An array of the matched nodes
7198          */
7199         query : function(selector, unique){
7200             return Roo.DomQuery.select(selector, this.dom);
7201         },
7202
7203         /**
7204          * Selects a single child at any depth below this element based on the passed CSS selector (the selector should not contain an id).
7205          * @param {String} selector The CSS selector
7206          * @param {Boolean} returnDom (optional) True to return the DOM node instead of Roo.Element (defaults to false)
7207          * @return {HTMLElement/Roo.Element} The child Roo.Element (or DOM node if returnDom = true)
7208          */
7209         child : function(selector, returnDom){
7210             var n = Roo.DomQuery.selectNode(selector, this.dom);
7211             return returnDom ? n : Roo.get(n);
7212         },
7213
7214         /**
7215          * Selects a single *direct* child based on the passed CSS selector (the selector should not contain an id).
7216          * @param {String} selector The CSS selector
7217          * @param {Boolean} returnDom (optional) True to return the DOM node instead of Roo.Element (defaults to false)
7218          * @return {HTMLElement/Roo.Element} The child Roo.Element (or DOM node if returnDom = true)
7219          */
7220         down : function(selector, returnDom){
7221             var n = Roo.DomQuery.selectNode(" > " + selector, this.dom);
7222             return returnDom ? n : Roo.get(n);
7223         },
7224
7225         /**
7226          * Initializes a {@link Roo.dd.DD} drag drop object for this element.
7227          * @param {String} group The group the DD object is member of
7228          * @param {Object} config The DD config object
7229          * @param {Object} overrides An object containing methods to override/implement on the DD object
7230          * @return {Roo.dd.DD} The DD object
7231          */
7232         initDD : function(group, config, overrides){
7233             var dd = new Roo.dd.DD(Roo.id(this.dom), group, config);
7234             return Roo.apply(dd, overrides);
7235         },
7236
7237         /**
7238          * Initializes a {@link Roo.dd.DDProxy} object for this element.
7239          * @param {String} group The group the DDProxy object is member of
7240          * @param {Object} config The DDProxy config object
7241          * @param {Object} overrides An object containing methods to override/implement on the DDProxy object
7242          * @return {Roo.dd.DDProxy} The DDProxy object
7243          */
7244         initDDProxy : function(group, config, overrides){
7245             var dd = new Roo.dd.DDProxy(Roo.id(this.dom), group, config);
7246             return Roo.apply(dd, overrides);
7247         },
7248
7249         /**
7250          * Initializes a {@link Roo.dd.DDTarget} object for this element.
7251          * @param {String} group The group the DDTarget object is member of
7252          * @param {Object} config The DDTarget config object
7253          * @param {Object} overrides An object containing methods to override/implement on the DDTarget object
7254          * @return {Roo.dd.DDTarget} The DDTarget object
7255          */
7256         initDDTarget : function(group, config, overrides){
7257             var dd = new Roo.dd.DDTarget(Roo.id(this.dom), group, config);
7258             return Roo.apply(dd, overrides);
7259         },
7260
7261         /**
7262          * Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use
7263          * the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property.
7264          * @param {Boolean} visible Whether the element is visible
7265          * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
7266          * @return {Roo.Element} this
7267          */
7268          setVisible : function(visible, animate){
7269             if(!animate || !A){
7270                 if(this.visibilityMode == El.DISPLAY){
7271                     this.setDisplayed(visible);
7272                 }else{
7273                     this.fixDisplay();
7274                     this.dom.style.visibility = visible ? "visible" : "hidden";
7275                 }
7276             }else{
7277                 // closure for composites
7278                 var dom = this.dom;
7279                 var visMode = this.visibilityMode;
7280                 if(visible){
7281                     this.setOpacity(.01);
7282                     this.setVisible(true);
7283                 }
7284                 this.anim({opacity: { to: (visible?1:0) }},
7285                       this.preanim(arguments, 1),
7286                       null, .35, 'easeIn', function(){
7287                          if(!visible){
7288                              if(visMode == El.DISPLAY){
7289                                  dom.style.display = "none";
7290                              }else{
7291                                  dom.style.visibility = "hidden";
7292                              }
7293                              Roo.get(dom).setOpacity(1);
7294                          }
7295                      });
7296             }
7297             return this;
7298         },
7299
7300         /**
7301          * Returns true if display is not "none"
7302          * @return {Boolean}
7303          */
7304         isDisplayed : function() {
7305             return this.getStyle("display") != "none";
7306         },
7307
7308         /**
7309          * Toggles the element's visibility or display, depending on visibility mode.
7310          * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
7311          * @return {Roo.Element} this
7312          */
7313         toggle : function(animate){
7314             this.setVisible(!this.isVisible(), this.preanim(arguments, 0));
7315             return this;
7316         },
7317
7318         /**
7319          * Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true.
7320          * @param {Boolean} value Boolean value to display the element using its default display, or a string to set the display directly
7321          * @return {Roo.Element} this
7322          */
7323         setDisplayed : function(value) {
7324             if(typeof value == "boolean"){
7325                value = value ? this.originalDisplay : "none";
7326             }
7327             this.setStyle("display", value);
7328             return this;
7329         },
7330
7331         /**
7332          * Tries to focus the element. Any exceptions are caught and ignored.
7333          * @return {Roo.Element} this
7334          */
7335         focus : function() {
7336             try{
7337                 this.dom.focus();
7338             }catch(e){}
7339             return this;
7340         },
7341
7342         /**
7343          * Tries to blur the element. Any exceptions are caught and ignored.
7344          * @return {Roo.Element} this
7345          */
7346         blur : function() {
7347             try{
7348                 this.dom.blur();
7349             }catch(e){}
7350             return this;
7351         },
7352
7353         /**
7354          * Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.
7355          * @param {String/Array} className The CSS class to add, or an array of classes
7356          * @return {Roo.Element} this
7357          */
7358         addClass : function(className){
7359             if(className instanceof Array){
7360                 for(var i = 0, len = className.length; i < len; i++) {
7361                     this.addClass(className[i]);
7362                 }
7363             }else{
7364                 if(className && !this.hasClass(className)){
7365                     this.dom.className = this.dom.className + " " + className;
7366                 }
7367             }
7368             return this;
7369         },
7370
7371         /**
7372          * Adds one or more CSS classes to this element and removes the same class(es) from all siblings.
7373          * @param {String/Array} className The CSS class to add, or an array of classes
7374          * @return {Roo.Element} this
7375          */
7376         radioClass : function(className){
7377             var siblings = this.dom.parentNode.childNodes;
7378             for(var i = 0; i < siblings.length; i++) {
7379                 var s = siblings[i];
7380                 if(s.nodeType == 1){
7381                     Roo.get(s).removeClass(className);
7382                 }
7383             }
7384             this.addClass(className);
7385             return this;
7386         },
7387
7388         /**
7389          * Removes one or more CSS classes from the element.
7390          * @param {String/Array} className The CSS class to remove, or an array of classes
7391          * @return {Roo.Element} this
7392          */
7393         removeClass : function(className){
7394             if(!className || !this.dom.className){
7395                 return this;
7396             }
7397             if(className instanceof Array){
7398                 for(var i = 0, len = className.length; i < len; i++) {
7399                     this.removeClass(className[i]);
7400                 }
7401             }else{
7402                 if(this.hasClass(className)){
7403                     var re = this.classReCache[className];
7404                     if (!re) {
7405                        re = new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)', "g");
7406                        this.classReCache[className] = re;
7407                     }
7408                     this.dom.className =
7409                         this.dom.className.replace(re, " ");
7410                 }
7411             }
7412             return this;
7413         },
7414
7415         // private
7416         classReCache: {},
7417
7418         /**
7419          * Toggles the specified CSS class on this element (removes it if it already exists, otherwise adds it).
7420          * @param {String} className The CSS class to toggle
7421          * @return {Roo.Element} this
7422          */
7423         toggleClass : function(className){
7424             if(this.hasClass(className)){
7425                 this.removeClass(className);
7426             }else{
7427                 this.addClass(className);
7428             }
7429             return this;
7430         },
7431
7432         /**
7433          * Checks if the specified CSS class exists on this element's DOM node.
7434          * @param {String} className The CSS class to check for
7435          * @return {Boolean} True if the class exists, else false
7436          */
7437         hasClass : function(className){
7438             return className && (' '+this.dom.className+' ').indexOf(' '+className+' ') != -1;
7439         },
7440
7441         /**
7442          * Replaces a CSS class on the element with another.  If the old name does not exist, the new name will simply be added.
7443          * @param {String} oldClassName The CSS class to replace
7444          * @param {String} newClassName The replacement CSS class
7445          * @return {Roo.Element} this
7446          */
7447         replaceClass : function(oldClassName, newClassName){
7448             this.removeClass(oldClassName);
7449             this.addClass(newClassName);
7450             return this;
7451         },
7452
7453         /**
7454          * Returns an object with properties matching the styles requested.
7455          * For example, el.getStyles('color', 'font-size', 'width') might return
7456          * {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}.
7457          * @param {String} style1 A style name
7458          * @param {String} style2 A style name
7459          * @param {String} etc.
7460          * @return {Object} The style object
7461          */
7462         getStyles : function(){
7463             var a = arguments, len = a.length, r = {};
7464             for(var i = 0; i < len; i++){
7465                 r[a[i]] = this.getStyle(a[i]);
7466             }
7467             return r;
7468         },
7469
7470         /**
7471          * Normalizes currentStyle and computedStyle. This is not YUI getStyle, it is an optimised version.
7472          * @param {String} property The style property whose value is returned.
7473          * @return {String} The current value of the style property for this element.
7474          */
7475         getStyle : function(){
7476             return view && view.getComputedStyle ?
7477                 function(prop){
7478                     var el = this.dom, v, cs, camel;
7479                     if(prop == 'float'){
7480                         prop = "cssFloat";
7481                     }
7482                     if(el.style && (v = el.style[prop])){
7483                         return v;
7484                     }
7485                     if(cs = view.getComputedStyle(el, "")){
7486                         if(!(camel = propCache[prop])){
7487                             camel = propCache[prop] = prop.replace(camelRe, camelFn);
7488                         }
7489                         return cs[camel];
7490                     }
7491                     return null;
7492                 } :
7493                 function(prop){
7494                     var el = this.dom, v, cs, camel;
7495                     if(prop == 'opacity'){
7496                         if(typeof el.style.filter == 'string'){
7497                             var m = el.style.filter.match(/alpha\(opacity=(.*)\)/i);
7498                             if(m){
7499                                 var fv = parseFloat(m[1]);
7500                                 if(!isNaN(fv)){
7501                                     return fv ? fv / 100 : 0;
7502                                 }
7503                             }
7504                         }
7505                         return 1;
7506                     }else if(prop == 'float'){
7507                         prop = "styleFloat";
7508                     }
7509                     if(!(camel = propCache[prop])){
7510                         camel = propCache[prop] = prop.replace(camelRe, camelFn);
7511                     }
7512                     if(v = el.style[camel]){
7513                         return v;
7514                     }
7515                     if(cs = el.currentStyle){
7516                         return cs[camel];
7517                     }
7518                     return null;
7519                 };
7520         }(),
7521
7522         /**
7523          * Wrapper for setting style properties, also takes single object parameter of multiple styles.
7524          * @param {String/Object} property The style property to be set, or an object of multiple styles.
7525          * @param {String} value (optional) The value to apply to the given property, or null if an object was passed.
7526          * @return {Roo.Element} this
7527          */
7528         setStyle : function(prop, value){
7529             if(typeof prop == "string"){
7530                 
7531                 if (prop == 'float') {
7532                     this.setStyle(Roo.isIE ? 'styleFloat'  : 'cssFloat', value);
7533                     return this;
7534                 }
7535                 
7536                 var camel;
7537                 if(!(camel = propCache[prop])){
7538                     camel = propCache[prop] = prop.replace(camelRe, camelFn);
7539                 }
7540                 
7541                 if(camel == 'opacity') {
7542                     this.setOpacity(value);
7543                 }else{
7544                     this.dom.style[camel] = value;
7545                 }
7546             }else{
7547                 for(var style in prop){
7548                     if(typeof prop[style] != "function"){
7549                        this.setStyle(style, prop[style]);
7550                     }
7551                 }
7552             }
7553             return this;
7554         },
7555
7556         /**
7557          * More flexible version of {@link #setStyle} for setting style properties.
7558          * @param {String/Object/Function} styles A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or
7559          * a function which returns such a specification.
7560          * @return {Roo.Element} this
7561          */
7562         applyStyles : function(style){
7563             Roo.DomHelper.applyStyles(this.dom, style);
7564             return this;
7565         },
7566
7567         /**
7568           * 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).
7569           * @return {Number} The X position of the element
7570           */
7571         getX : function(){
7572             return D.getX(this.dom);
7573         },
7574
7575         /**
7576           * 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).
7577           * @return {Number} The Y position of the element
7578           */
7579         getY : function(){
7580             return D.getY(this.dom);
7581         },
7582
7583         /**
7584           * 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).
7585           * @return {Array} The XY position of the element
7586           */
7587         getXY : function(){
7588             return D.getXY(this.dom);
7589         },
7590
7591         /**
7592          * 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).
7593          * @param {Number} The X position of the element
7594          * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
7595          * @return {Roo.Element} this
7596          */
7597         setX : function(x, animate){
7598             if(!animate || !A){
7599                 D.setX(this.dom, x);
7600             }else{
7601                 this.setXY([x, this.getY()], this.preanim(arguments, 1));
7602             }
7603             return this;
7604         },
7605
7606         /**
7607          * 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).
7608          * @param {Number} The Y position of the element
7609          * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
7610          * @return {Roo.Element} this
7611          */
7612         setY : function(y, animate){
7613             if(!animate || !A){
7614                 D.setY(this.dom, y);
7615             }else{
7616                 this.setXY([this.getX(), y], this.preanim(arguments, 1));
7617             }
7618             return this;
7619         },
7620
7621         /**
7622          * Sets the element's left position directly using CSS style (instead of {@link #setX}).
7623          * @param {String} left The left CSS property value
7624          * @return {Roo.Element} this
7625          */
7626         setLeft : function(left){
7627             this.setStyle("left", this.addUnits(left));
7628             return this;
7629         },
7630
7631         /**
7632          * Sets the element's top position directly using CSS style (instead of {@link #setY}).
7633          * @param {String} top The top CSS property value
7634          * @return {Roo.Element} this
7635          */
7636         setTop : function(top){
7637             this.setStyle("top", this.addUnits(top));
7638             return this;
7639         },
7640
7641         /**
7642          * Sets the element's CSS right style.
7643          * @param {String} right The right CSS property value
7644          * @return {Roo.Element} this
7645          */
7646         setRight : function(right){
7647             this.setStyle("right", this.addUnits(right));
7648             return this;
7649         },
7650
7651         /**
7652          * Sets the element's CSS bottom style.
7653          * @param {String} bottom The bottom CSS property value
7654          * @return {Roo.Element} this
7655          */
7656         setBottom : function(bottom){
7657             this.setStyle("bottom", this.addUnits(bottom));
7658             return this;
7659         },
7660
7661         /**
7662          * Sets the position of the element in page coordinates, regardless of how the element is positioned.
7663          * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
7664          * @param {Array} pos Contains X & Y [x, y] values for new position (coordinates are page-based)
7665          * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
7666          * @return {Roo.Element} this
7667          */
7668         setXY : function(pos, animate){
7669             if(!animate || !A){
7670                 D.setXY(this.dom, pos);
7671             }else{
7672                 this.anim({points: {to: pos}}, this.preanim(arguments, 1), 'motion');
7673             }
7674             return this;
7675         },
7676
7677         /**
7678          * Sets the position of the element in page coordinates, regardless of how the element is positioned.
7679          * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
7680          * @param {Number} x X value for new position (coordinates are page-based)
7681          * @param {Number} y Y value for new position (coordinates are page-based)
7682          * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
7683          * @return {Roo.Element} this
7684          */
7685         setLocation : function(x, y, animate){
7686             this.setXY([x, y], this.preanim(arguments, 2));
7687             return this;
7688         },
7689
7690         /**
7691          * Sets the position of the element in page coordinates, regardless of how the element is positioned.
7692          * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
7693          * @param {Number} x X value for new position (coordinates are page-based)
7694          * @param {Number} y Y value for new position (coordinates are page-based)
7695          * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
7696          * @return {Roo.Element} this
7697          */
7698         moveTo : function(x, y, animate){
7699             this.setXY([x, y], this.preanim(arguments, 2));
7700             return this;
7701         },
7702
7703         /**
7704          * Returns the region of the given element.
7705          * The element must be part of the DOM tree to have a region (display:none or elements not appended return false).
7706          * @return {Region} A Roo.lib.Region containing "top, left, bottom, right" member data.
7707          */
7708         getRegion : function(){
7709             return D.getRegion(this.dom);
7710         },
7711
7712         /**
7713          * Returns the offset height of the element
7714          * @param {Boolean} contentHeight (optional) true to get the height minus borders and padding
7715          * @return {Number} The element's height
7716          */
7717         getHeight : function(contentHeight){
7718             var h = this.dom.offsetHeight || 0;
7719             return contentHeight !== true ? h : h-this.getBorderWidth("tb")-this.getPadding("tb");
7720         },
7721
7722         /**
7723          * Returns the offset width of the element
7724          * @param {Boolean} contentWidth (optional) true to get the width minus borders and padding
7725          * @return {Number} The element's width
7726          */
7727         getWidth : function(contentWidth){
7728             var w = this.dom.offsetWidth || 0;
7729             return contentWidth !== true ? w : w-this.getBorderWidth("lr")-this.getPadding("lr");
7730         },
7731
7732         /**
7733          * Returns either the offsetHeight or the height of this element based on CSS height adjusted by padding or borders
7734          * when needed to simulate offsetHeight when offsets aren't available. This may not work on display:none elements
7735          * if a height has not been set using CSS.
7736          * @return {Number}
7737          */
7738         getComputedHeight : function(){
7739             var h = Math.max(this.dom.offsetHeight, this.dom.clientHeight);
7740             if(!h){
7741                 h = parseInt(this.getStyle('height'), 10) || 0;
7742                 if(!this.isBorderBox()){
7743                     h += this.getFrameWidth('tb');
7744                 }
7745             }
7746             return h;
7747         },
7748
7749         /**
7750          * Returns either the offsetWidth or the width of this element based on CSS width adjusted by padding or borders
7751          * when needed to simulate offsetWidth when offsets aren't available. This may not work on display:none elements
7752          * if a width has not been set using CSS.
7753          * @return {Number}
7754          */
7755         getComputedWidth : function(){
7756             var w = Math.max(this.dom.offsetWidth, this.dom.clientWidth);
7757             if(!w){
7758                 w = parseInt(this.getStyle('width'), 10) || 0;
7759                 if(!this.isBorderBox()){
7760                     w += this.getFrameWidth('lr');
7761                 }
7762             }
7763             return w;
7764         },
7765
7766         /**
7767          * Returns the size of the element.
7768          * @param {Boolean} contentSize (optional) true to get the width/size minus borders and padding
7769          * @return {Object} An object containing the element's size {width: (element width), height: (element height)}
7770          */
7771         getSize : function(contentSize){
7772             return {width: this.getWidth(contentSize), height: this.getHeight(contentSize)};
7773         },
7774
7775         /**
7776          * Returns the width and height of the viewport.
7777          * @return {Object} An object containing the viewport's size {width: (viewport width), height: (viewport height)}
7778          */
7779         getViewSize : function(){
7780             var d = this.dom, doc = document, aw = 0, ah = 0;
7781             if(d == doc || d == doc.body){
7782                 return {width : D.getViewWidth(), height: D.getViewHeight()};
7783             }else{
7784                 return {
7785                     width : d.clientWidth,
7786                     height: d.clientHeight
7787                 };
7788             }
7789         },
7790
7791         /**
7792          * Returns the value of the "value" attribute
7793          * @param {Boolean} asNumber true to parse the value as a number
7794          * @return {String/Number}
7795          */
7796         getValue : function(asNumber){
7797             return asNumber ? parseInt(this.dom.value, 10) : this.dom.value;
7798         },
7799
7800         // private
7801         adjustWidth : function(width){
7802             if(typeof width == "number"){
7803                 if(this.autoBoxAdjust && !this.isBorderBox()){
7804                    width -= (this.getBorderWidth("lr") + this.getPadding("lr"));
7805                 }
7806                 if(width < 0){
7807                     width = 0;
7808                 }
7809             }
7810             return width;
7811         },
7812
7813         // private
7814         adjustHeight : function(height){
7815             if(typeof height == "number"){
7816                if(this.autoBoxAdjust && !this.isBorderBox()){
7817                    height -= (this.getBorderWidth("tb") + this.getPadding("tb"));
7818                }
7819                if(height < 0){
7820                    height = 0;
7821                }
7822             }
7823             return height;
7824         },
7825
7826         /**
7827          * Set the width of the element
7828          * @param {Number} width The new width
7829          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
7830          * @return {Roo.Element} this
7831          */
7832         setWidth : function(width, animate){
7833             width = this.adjustWidth(width);
7834             if(!animate || !A){
7835                 this.dom.style.width = this.addUnits(width);
7836             }else{
7837                 this.anim({width: {to: width}}, this.preanim(arguments, 1));
7838             }
7839             return this;
7840         },
7841
7842         /**
7843          * Set the height of the element
7844          * @param {Number} height The new height
7845          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
7846          * @return {Roo.Element} this
7847          */
7848          setHeight : function(height, animate){
7849             height = this.adjustHeight(height);
7850             if(!animate || !A){
7851                 this.dom.style.height = this.addUnits(height);
7852             }else{
7853                 this.anim({height: {to: height}}, this.preanim(arguments, 1));
7854             }
7855             return this;
7856         },
7857
7858         /**
7859          * Set the size of the element. If animation is true, both width an height will be animated concurrently.
7860          * @param {Number} width The new width
7861          * @param {Number} height The new height
7862          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
7863          * @return {Roo.Element} this
7864          */
7865          setSize : function(width, height, animate){
7866             if(typeof width == "object"){ // in case of object from getSize()
7867                 height = width.height; width = width.width;
7868             }
7869             width = this.adjustWidth(width); height = this.adjustHeight(height);
7870             if(!animate || !A){
7871                 this.dom.style.width = this.addUnits(width);
7872                 this.dom.style.height = this.addUnits(height);
7873             }else{
7874                 this.anim({width: {to: width}, height: {to: height}}, this.preanim(arguments, 2));
7875             }
7876             return this;
7877         },
7878
7879         /**
7880          * Sets the element's position and size in one shot. If animation is true then width, height, x and y will be animated concurrently.
7881          * @param {Number} x X value for new position (coordinates are page-based)
7882          * @param {Number} y Y value for new position (coordinates are page-based)
7883          * @param {Number} width The new width
7884          * @param {Number} height The new height
7885          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
7886          * @return {Roo.Element} this
7887          */
7888         setBounds : function(x, y, width, height, animate){
7889             if(!animate || !A){
7890                 this.setSize(width, height);
7891                 this.setLocation(x, y);
7892             }else{
7893                 width = this.adjustWidth(width); height = this.adjustHeight(height);
7894                 this.anim({points: {to: [x, y]}, width: {to: width}, height: {to: height}},
7895                               this.preanim(arguments, 4), 'motion');
7896             }
7897             return this;
7898         },
7899
7900         /**
7901          * 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.
7902          * @param {Roo.lib.Region} region The region to fill
7903          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
7904          * @return {Roo.Element} this
7905          */
7906         setRegion : function(region, animate){
7907             this.setBounds(region.left, region.top, region.right-region.left, region.bottom-region.top, this.preanim(arguments, 1));
7908             return this;
7909         },
7910
7911         /**
7912          * Appends an event handler
7913          *
7914          * @param {String}   eventName     The type of event to append
7915          * @param {Function} fn        The method the event invokes
7916          * @param {Object} scope       (optional) The scope (this object) of the fn
7917          * @param {Object}   options   (optional)An object with standard {@link Roo.EventManager#addListener} options
7918          */
7919         addListener : function(eventName, fn, scope, options){
7920             if (this.dom) {
7921                 Roo.EventManager.on(this.dom,  eventName, fn, scope || this, options);
7922             }
7923         },
7924
7925         /**
7926          * Removes an event handler from this element
7927          * @param {String} eventName the type of event to remove
7928          * @param {Function} fn the method the event invokes
7929          * @return {Roo.Element} this
7930          */
7931         removeListener : function(eventName, fn){
7932             Roo.EventManager.removeListener(this.dom,  eventName, fn);
7933             return this;
7934         },
7935
7936         /**
7937          * Removes all previous added listeners from this element
7938          * @return {Roo.Element} this
7939          */
7940         removeAllListeners : function(){
7941             E.purgeElement(this.dom);
7942             return this;
7943         },
7944
7945         relayEvent : function(eventName, observable){
7946             this.on(eventName, function(e){
7947                 observable.fireEvent(eventName, e);
7948             });
7949         },
7950
7951         /**
7952          * Set the opacity of the element
7953          * @param {Float} opacity The new opacity. 0 = transparent, .5 = 50% visibile, 1 = fully visible, etc
7954          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
7955          * @return {Roo.Element} this
7956          */
7957          setOpacity : function(opacity, animate){
7958             if(!animate || !A){
7959                 var s = this.dom.style;
7960                 if(Roo.isIE){
7961                     s.zoom = 1;
7962                     s.filter = (s.filter || '').replace(/alpha\([^\)]*\)/gi,"") +
7963                                (opacity == 1 ? "" : "alpha(opacity=" + opacity * 100 + ")");
7964                 }else{
7965                     s.opacity = opacity;
7966                 }
7967             }else{
7968                 this.anim({opacity: {to: opacity}}, this.preanim(arguments, 1), null, .35, 'easeIn');
7969             }
7970             return this;
7971         },
7972
7973         /**
7974          * Gets the left X coordinate
7975          * @param {Boolean} local True to get the local css position instead of page coordinate
7976          * @return {Number}
7977          */
7978         getLeft : function(local){
7979             if(!local){
7980                 return this.getX();
7981             }else{
7982                 return parseInt(this.getStyle("left"), 10) || 0;
7983             }
7984         },
7985
7986         /**
7987          * Gets the right X coordinate of the element (element X position + element width)
7988          * @param {Boolean} local True to get the local css position instead of page coordinate
7989          * @return {Number}
7990          */
7991         getRight : function(local){
7992             if(!local){
7993                 return this.getX() + this.getWidth();
7994             }else{
7995                 return (this.getLeft(true) + this.getWidth()) || 0;
7996             }
7997         },
7998
7999         /**
8000          * Gets the top Y coordinate
8001          * @param {Boolean} local True to get the local css position instead of page coordinate
8002          * @return {Number}
8003          */
8004         getTop : function(local) {
8005             if(!local){
8006                 return this.getY();
8007             }else{
8008                 return parseInt(this.getStyle("top"), 10) || 0;
8009             }
8010         },
8011
8012         /**
8013          * Gets the bottom Y coordinate of the element (element Y position + element height)
8014          * @param {Boolean} local True to get the local css position instead of page coordinate
8015          * @return {Number}
8016          */
8017         getBottom : function(local){
8018             if(!local){
8019                 return this.getY() + this.getHeight();
8020             }else{
8021                 return (this.getTop(true) + this.getHeight()) || 0;
8022             }
8023         },
8024
8025         /**
8026         * Initializes positioning on this element. If a desired position is not passed, it will make the
8027         * the element positioned relative IF it is not already positioned.
8028         * @param {String} pos (optional) Positioning to use "relative", "absolute" or "fixed"
8029         * @param {Number} zIndex (optional) The zIndex to apply
8030         * @param {Number} x (optional) Set the page X position
8031         * @param {Number} y (optional) Set the page Y position
8032         */
8033         position : function(pos, zIndex, x, y){
8034             if(!pos){
8035                if(this.getStyle('position') == 'static'){
8036                    this.setStyle('position', 'relative');
8037                }
8038             }else{
8039                 this.setStyle("position", pos);
8040             }
8041             if(zIndex){
8042                 this.setStyle("z-index", zIndex);
8043             }
8044             if(x !== undefined && y !== undefined){
8045                 this.setXY([x, y]);
8046             }else if(x !== undefined){
8047                 this.setX(x);
8048             }else if(y !== undefined){
8049                 this.setY(y);
8050             }
8051         },
8052
8053         /**
8054         * Clear positioning back to the default when the document was loaded
8055         * @param {String} value (optional) The value to use for the left,right,top,bottom, defaults to '' (empty string). You could use 'auto'.
8056         * @return {Roo.Element} this
8057          */
8058         clearPositioning : function(value){
8059             value = value ||'';
8060             this.setStyle({
8061                 "left": value,
8062                 "right": value,
8063                 "top": value,
8064                 "bottom": value,
8065                 "z-index": "",
8066                 "position" : "static"
8067             });
8068             return this;
8069         },
8070
8071         /**
8072         * Gets an object with all CSS positioning properties. Useful along with setPostioning to get
8073         * snapshot before performing an update and then restoring the element.
8074         * @return {Object}
8075         */
8076         getPositioning : function(){
8077             var l = this.getStyle("left");
8078             var t = this.getStyle("top");
8079             return {
8080                 "position" : this.getStyle("position"),
8081                 "left" : l,
8082                 "right" : l ? "" : this.getStyle("right"),
8083                 "top" : t,
8084                 "bottom" : t ? "" : this.getStyle("bottom"),
8085                 "z-index" : this.getStyle("z-index")
8086             };
8087         },
8088
8089         /**
8090          * Gets the width of the border(s) for the specified side(s)
8091          * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
8092          * passing lr would get the border (l)eft width + the border (r)ight width.
8093          * @return {Number} The width of the sides passed added together
8094          */
8095         getBorderWidth : function(side){
8096             return this.addStyles(side, El.borders);
8097         },
8098
8099         /**
8100          * Gets the width of the padding(s) for the specified side(s)
8101          * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
8102          * passing lr would get the padding (l)eft + the padding (r)ight.
8103          * @return {Number} The padding of the sides passed added together
8104          */
8105         getPadding : function(side){
8106             return this.addStyles(side, El.paddings);
8107         },
8108
8109         /**
8110         * Set positioning with an object returned by getPositioning().
8111         * @param {Object} posCfg
8112         * @return {Roo.Element} this
8113          */
8114         setPositioning : function(pc){
8115             this.applyStyles(pc);
8116             if(pc.right == "auto"){
8117                 this.dom.style.right = "";
8118             }
8119             if(pc.bottom == "auto"){
8120                 this.dom.style.bottom = "";
8121             }
8122             return this;
8123         },
8124
8125         // private
8126         fixDisplay : function(){
8127             if(this.getStyle("display") == "none"){
8128                 this.setStyle("visibility", "hidden");
8129                 this.setStyle("display", this.originalDisplay); // first try reverting to default
8130                 if(this.getStyle("display") == "none"){ // if that fails, default to block
8131                     this.setStyle("display", "block");
8132                 }
8133             }
8134         },
8135
8136         /**
8137          * Quick set left and top adding default units
8138          * @param {String} left The left CSS property value
8139          * @param {String} top The top CSS property value
8140          * @return {Roo.Element} this
8141          */
8142          setLeftTop : function(left, top){
8143             this.dom.style.left = this.addUnits(left);
8144             this.dom.style.top = this.addUnits(top);
8145             return this;
8146         },
8147
8148         /**
8149          * Move this element relative to its current position.
8150          * @param {String} direction Possible values are: "l","left" - "r","right" - "t","top","up" - "b","bottom","down".
8151          * @param {Number} distance How far to move the element in pixels
8152          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
8153          * @return {Roo.Element} this
8154          */
8155          move : function(direction, distance, animate){
8156             var xy = this.getXY();
8157             direction = direction.toLowerCase();
8158             switch(direction){
8159                 case "l":
8160                 case "left":
8161                     this.moveTo(xy[0]-distance, xy[1], this.preanim(arguments, 2));
8162                     break;
8163                case "r":
8164                case "right":
8165                     this.moveTo(xy[0]+distance, xy[1], this.preanim(arguments, 2));
8166                     break;
8167                case "t":
8168                case "top":
8169                case "up":
8170                     this.moveTo(xy[0], xy[1]-distance, this.preanim(arguments, 2));
8171                     break;
8172                case "b":
8173                case "bottom":
8174                case "down":
8175                     this.moveTo(xy[0], xy[1]+distance, this.preanim(arguments, 2));
8176                     break;
8177             }
8178             return this;
8179         },
8180
8181         /**
8182          *  Store the current overflow setting and clip overflow on the element - use {@link #unclip} to remove
8183          * @return {Roo.Element} this
8184          */
8185         clip : function(){
8186             if(!this.isClipped){
8187                this.isClipped = true;
8188                this.originalClip = {
8189                    "o": this.getStyle("overflow"),
8190                    "x": this.getStyle("overflow-x"),
8191                    "y": this.getStyle("overflow-y")
8192                };
8193                this.setStyle("overflow", "hidden");
8194                this.setStyle("overflow-x", "hidden");
8195                this.setStyle("overflow-y", "hidden");
8196             }
8197             return this;
8198         },
8199
8200         /**
8201          *  Return clipping (overflow) to original clipping before clip() was called
8202          * @return {Roo.Element} this
8203          */
8204         unclip : function(){
8205             if(this.isClipped){
8206                 this.isClipped = false;
8207                 var o = this.originalClip;
8208                 if(o.o){this.setStyle("overflow", o.o);}
8209                 if(o.x){this.setStyle("overflow-x", o.x);}
8210                 if(o.y){this.setStyle("overflow-y", o.y);}
8211             }
8212             return this;
8213         },
8214
8215
8216         /**
8217          * Gets the x,y coordinates specified by the anchor position on the element.
8218          * @param {String} anchor (optional) The specified anchor position (defaults to "c").  See {@link #alignTo} for details on supported anchor positions.
8219          * @param {Object} size (optional) An object containing the size to use for calculating anchor position
8220          *                       {width: (target width), height: (target height)} (defaults to the element's current size)
8221          * @param {Boolean} local (optional) True to get the local (element top/left-relative) anchor position instead of page coordinates
8222          * @return {Array} [x, y] An array containing the element's x and y coordinates
8223          */
8224         getAnchorXY : function(anchor, local, s){
8225             //Passing a different size is useful for pre-calculating anchors,
8226             //especially for anchored animations that change the el size.
8227
8228             var w, h, vp = false;
8229             if(!s){
8230                 var d = this.dom;
8231                 if(d == document.body || d == document){
8232                     vp = true;
8233                     w = D.getViewWidth(); h = D.getViewHeight();
8234                 }else{
8235                     w = this.getWidth(); h = this.getHeight();
8236                 }
8237             }else{
8238                 w = s.width;  h = s.height;
8239             }
8240             var x = 0, y = 0, r = Math.round;
8241             switch((anchor || "tl").toLowerCase()){
8242                 case "c":
8243                     x = r(w*.5);
8244                     y = r(h*.5);
8245                 break;
8246                 case "t":
8247                     x = r(w*.5);
8248                     y = 0;
8249                 break;
8250                 case "l":
8251                     x = 0;
8252                     y = r(h*.5);
8253                 break;
8254                 case "r":
8255                     x = w;
8256                     y = r(h*.5);
8257                 break;
8258                 case "b":
8259                     x = r(w*.5);
8260                     y = h;
8261                 break;
8262                 case "tl":
8263                     x = 0;
8264                     y = 0;
8265                 break;
8266                 case "bl":
8267                     x = 0;
8268                     y = h;
8269                 break;
8270                 case "br":
8271                     x = w;
8272                     y = h;
8273                 break;
8274                 case "tr":
8275                     x = w;
8276                     y = 0;
8277                 break;
8278             }
8279             if(local === true){
8280                 return [x, y];
8281             }
8282             if(vp){
8283                 var sc = this.getScroll();
8284                 return [x + sc.left, y + sc.top];
8285             }
8286             //Add the element's offset xy
8287             var o = this.getXY();
8288             return [x+o[0], y+o[1]];
8289         },
8290
8291         /**
8292          * Gets the x,y coordinates to align this element with another element. See {@link #alignTo} for more info on the
8293          * supported position values.
8294          * @param {String/HTMLElement/Roo.Element} element The element to align to.
8295          * @param {String} position The position to align to.
8296          * @param {Array} offsets (optional) Offset the positioning by [x, y]
8297          * @return {Array} [x, y]
8298          */
8299         getAlignToXY : function(el, p, o){
8300             el = Roo.get(el);
8301             var d = this.dom;
8302             if(!el.dom){
8303                 throw "Element.alignTo with an element that doesn't exist";
8304             }
8305             var c = false; //constrain to viewport
8306             var p1 = "", p2 = "";
8307             o = o || [0,0];
8308
8309             if(!p){
8310                 p = "tl-bl";
8311             }else if(p == "?"){
8312                 p = "tl-bl?";
8313             }else if(p.indexOf("-") == -1){
8314                 p = "tl-" + p;
8315             }
8316             p = p.toLowerCase();
8317             var m = p.match(/^([a-z]+)-([a-z]+)(\?)?$/);
8318             if(!m){
8319                throw "Element.alignTo with an invalid alignment " + p;
8320             }
8321             p1 = m[1]; p2 = m[2]; c = !!m[3];
8322
8323             //Subtract the aligned el's internal xy from the target's offset xy
8324             //plus custom offset to get the aligned el's new offset xy
8325             var a1 = this.getAnchorXY(p1, true);
8326             var a2 = el.getAnchorXY(p2, false);
8327             var x = a2[0] - a1[0] + o[0];
8328             var y = a2[1] - a1[1] + o[1];
8329             if(c){
8330                 //constrain the aligned el to viewport if necessary
8331                 var w = this.getWidth(), h = this.getHeight(), r = el.getRegion();
8332                 // 5px of margin for ie
8333                 var dw = D.getViewWidth()-5, dh = D.getViewHeight()-5;
8334
8335                 //If we are at a viewport boundary and the aligned el is anchored on a target border that is
8336                 //perpendicular to the vp border, allow the aligned el to slide on that border,
8337                 //otherwise swap the aligned el to the opposite border of the target.
8338                 var p1y = p1.charAt(0), p1x = p1.charAt(p1.length-1);
8339                var p2y = p2.charAt(0), p2x = p2.charAt(p2.length-1);
8340                var swapY = ((p1y=="t" && p2y=="b") || (p1y=="b" && p2y=="t"));
8341                var swapX = ((p1x=="r" && p2x=="l") || (p1x=="l" && p2x=="r"));
8342
8343                var doc = document;
8344                var scrollX = (doc.documentElement.scrollLeft || doc.body.scrollLeft || 0)+5;
8345                var scrollY = (doc.documentElement.scrollTop || doc.body.scrollTop || 0)+5;
8346
8347                if((x+w) > dw + scrollX){
8348                     x = swapX ? r.left-w : dw+scrollX-w;
8349                 }
8350                if(x < scrollX){
8351                    x = swapX ? r.right : scrollX;
8352                }
8353                if((y+h) > dh + scrollY){
8354                     y = swapY ? r.top-h : dh+scrollY-h;
8355                 }
8356                if (y < scrollY){
8357                    y = swapY ? r.bottom : scrollY;
8358                }
8359             }
8360             return [x,y];
8361         },
8362
8363         // private
8364         getConstrainToXY : function(){
8365             var os = {top:0, left:0, bottom:0, right: 0};
8366
8367             return function(el, local, offsets, proposedXY){
8368                 el = Roo.get(el);
8369                 offsets = offsets ? Roo.applyIf(offsets, os) : os;
8370
8371                 var vw, vh, vx = 0, vy = 0;
8372                 if(el.dom == document.body || el.dom == document){
8373                     vw = Roo.lib.Dom.getViewWidth();
8374                     vh = Roo.lib.Dom.getViewHeight();
8375                 }else{
8376                     vw = el.dom.clientWidth;
8377                     vh = el.dom.clientHeight;
8378                     if(!local){
8379                         var vxy = el.getXY();
8380                         vx = vxy[0];
8381                         vy = vxy[1];
8382                     }
8383                 }
8384
8385                 var s = el.getScroll();
8386
8387                 vx += offsets.left + s.left;
8388                 vy += offsets.top + s.top;
8389
8390                 vw -= offsets.right;
8391                 vh -= offsets.bottom;
8392
8393                 var vr = vx+vw;
8394                 var vb = vy+vh;
8395
8396                 var xy = proposedXY || (!local ? this.getXY() : [this.getLeft(true), this.getTop(true)]);
8397                 var x = xy[0], y = xy[1];
8398                 var w = this.dom.offsetWidth, h = this.dom.offsetHeight;
8399
8400                 // only move it if it needs it
8401                 var moved = false;
8402
8403                 // first validate right/bottom
8404                 if((x + w) > vr){
8405                     x = vr - w;
8406                     moved = true;
8407                 }
8408                 if((y + h) > vb){
8409                     y = vb - h;
8410                     moved = true;
8411                 }
8412                 // then make sure top/left isn't negative
8413                 if(x < vx){
8414                     x = vx;
8415                     moved = true;
8416                 }
8417                 if(y < vy){
8418                     y = vy;
8419                     moved = true;
8420                 }
8421                 return moved ? [x, y] : false;
8422             };
8423         }(),
8424
8425         // private
8426         adjustForConstraints : function(xy, parent, offsets){
8427             return this.getConstrainToXY(parent || document, false, offsets, xy) ||  xy;
8428         },
8429
8430         /**
8431          * Aligns this element with another element relative to the specified anchor points. If the other element is the
8432          * document it aligns it to the viewport.
8433          * The position parameter is optional, and can be specified in any one of the following formats:
8434          * <ul>
8435          *   <li><b>Blank</b>: Defaults to aligning the element's top-left corner to the target's bottom-left corner ("tl-bl").</li>
8436          *   <li><b>One anchor (deprecated)</b>: The passed anchor position is used as the target element's anchor point.
8437          *       The element being aligned will position its top-left corner (tl) to that point.  <i>This method has been
8438          *       deprecated in favor of the newer two anchor syntax below</i>.</li>
8439          *   <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
8440          *       element's anchor point, and the second value is used as the target's anchor point.</li>
8441          * </ul>
8442          * In addition to the anchor points, the position parameter also supports the "?" character.  If "?" is passed at the end of
8443          * the position string, the element will attempt to align as specified, but the position will be adjusted to constrain to
8444          * the viewport if necessary.  Note that the element being aligned might be swapped to align to a different position than
8445          * that specified in order to enforce the viewport constraints.
8446          * Following are all of the supported anchor positions:
8447     <pre>
8448     Value  Description
8449     -----  -----------------------------
8450     tl     The top left corner (default)
8451     t      The center of the top edge
8452     tr     The top right corner
8453     l      The center of the left edge
8454     c      In the center of the element
8455     r      The center of the right edge
8456     bl     The bottom left corner
8457     b      The center of the bottom edge
8458     br     The bottom right corner
8459     </pre>
8460     Example Usage:
8461     <pre><code>
8462     // align el to other-el using the default positioning ("tl-bl", non-constrained)
8463     el.alignTo("other-el");
8464
8465     // align the top left corner of el with the top right corner of other-el (constrained to viewport)
8466     el.alignTo("other-el", "tr?");
8467
8468     // align the bottom right corner of el with the center left edge of other-el
8469     el.alignTo("other-el", "br-l?");
8470
8471     // align the center of el with the bottom left corner of other-el and
8472     // adjust the x position by -6 pixels (and the y position by 0)
8473     el.alignTo("other-el", "c-bl", [-6, 0]);
8474     </code></pre>
8475          * @param {String/HTMLElement/Roo.Element} element The element to align to.
8476          * @param {String} position The position to align to.
8477          * @param {Array} offsets (optional) Offset the positioning by [x, y]
8478          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
8479          * @return {Roo.Element} this
8480          */
8481         alignTo : function(element, position, offsets, animate){
8482             var xy = this.getAlignToXY(element, position, offsets);
8483             this.setXY(xy, this.preanim(arguments, 3));
8484             return this;
8485         },
8486
8487         /**
8488          * Anchors an element to another element and realigns it when the window is resized.
8489          * @param {String/HTMLElement/Roo.Element} element The element to align to.
8490          * @param {String} position The position to align to.
8491          * @param {Array} offsets (optional) Offset the positioning by [x, y]
8492          * @param {Boolean/Object} animate (optional) True for the default animation or a standard Element animation config object
8493          * @param {Boolean/Number} monitorScroll (optional) True to monitor body scroll and reposition. If this parameter
8494          * is a number, it is used as the buffer delay (defaults to 50ms).
8495          * @param {Function} callback The function to call after the animation finishes
8496          * @return {Roo.Element} this
8497          */
8498         anchorTo : function(el, alignment, offsets, animate, monitorScroll, callback){
8499             var action = function(){
8500                 this.alignTo(el, alignment, offsets, animate);
8501                 Roo.callback(callback, this);
8502             };
8503             Roo.EventManager.onWindowResize(action, this);
8504             var tm = typeof monitorScroll;
8505             if(tm != 'undefined'){
8506                 Roo.EventManager.on(window, 'scroll', action, this,
8507                     {buffer: tm == 'number' ? monitorScroll : 50});
8508             }
8509             action.call(this); // align immediately
8510             return this;
8511         },
8512         /**
8513          * Clears any opacity settings from this element. Required in some cases for IE.
8514          * @return {Roo.Element} this
8515          */
8516         clearOpacity : function(){
8517             if (window.ActiveXObject) {
8518                 if(typeof this.dom.style.filter == 'string' && (/alpha/i).test(this.dom.style.filter)){
8519                     this.dom.style.filter = "";
8520                 }
8521             } else {
8522                 this.dom.style.opacity = "";
8523                 this.dom.style["-moz-opacity"] = "";
8524                 this.dom.style["-khtml-opacity"] = "";
8525             }
8526             return this;
8527         },
8528
8529         /**
8530          * Hide this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
8531          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
8532          * @return {Roo.Element} this
8533          */
8534         hide : function(animate){
8535             this.setVisible(false, this.preanim(arguments, 0));
8536             return this;
8537         },
8538
8539         /**
8540         * Show this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
8541         * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
8542          * @return {Roo.Element} this
8543          */
8544         show : function(animate){
8545             this.setVisible(true, this.preanim(arguments, 0));
8546             return this;
8547         },
8548
8549         /**
8550          * @private Test if size has a unit, otherwise appends the default
8551          */
8552         addUnits : function(size){
8553             return Roo.Element.addUnits(size, this.defaultUnit);
8554         },
8555
8556         /**
8557          * Temporarily enables offsets (width,height,x,y) for an element with display:none, use endMeasure() when done.
8558          * @return {Roo.Element} this
8559          */
8560         beginMeasure : function(){
8561             var el = this.dom;
8562             if(el.offsetWidth || el.offsetHeight){
8563                 return this; // offsets work already
8564             }
8565             var changed = [];
8566             var p = this.dom, b = document.body; // start with this element
8567             while((!el.offsetWidth && !el.offsetHeight) && p && p.tagName && p != b){
8568                 var pe = Roo.get(p);
8569                 if(pe.getStyle('display') == 'none'){
8570                     changed.push({el: p, visibility: pe.getStyle("visibility")});
8571                     p.style.visibility = "hidden";
8572                     p.style.display = "block";
8573                 }
8574                 p = p.parentNode;
8575             }
8576             this._measureChanged = changed;
8577             return this;
8578
8579         },
8580
8581         /**
8582          * Restores displays to before beginMeasure was called
8583          * @return {Roo.Element} this
8584          */
8585         endMeasure : function(){
8586             var changed = this._measureChanged;
8587             if(changed){
8588                 for(var i = 0, len = changed.length; i < len; i++) {
8589                     var r = changed[i];
8590                     r.el.style.visibility = r.visibility;
8591                     r.el.style.display = "none";
8592                 }
8593                 this._measureChanged = null;
8594             }
8595             return this;
8596         },
8597
8598         /**
8599         * Update the innerHTML of this element, optionally searching for and processing scripts
8600         * @param {String} html The new HTML
8601         * @param {Boolean} loadScripts (optional) true to look for and process scripts
8602         * @param {Function} callback For async script loading you can be noticed when the update completes
8603         * @return {Roo.Element} this
8604          */
8605         update : function(html, loadScripts, callback){
8606             if(typeof html == "undefined"){
8607                 html = "";
8608             }
8609             if(loadScripts !== true){
8610                 this.dom.innerHTML = html;
8611                 if(typeof callback == "function"){
8612                     callback();
8613                 }
8614                 return this;
8615             }
8616             var id = Roo.id();
8617             var dom = this.dom;
8618
8619             html += '<span id="' + id + '"></span>';
8620
8621             E.onAvailable(id, function(){
8622                 var hd = document.getElementsByTagName("head")[0];
8623                 var re = /(?:<script([^>]*)?>)((\n|\r|.)*?)(?:<\/script>)/ig;
8624                 var srcRe = /\ssrc=([\'\"])(.*?)\1/i;
8625                 var typeRe = /\stype=([\'\"])(.*?)\1/i;
8626
8627                 var match;
8628                 while(match = re.exec(html)){
8629                     var attrs = match[1];
8630                     var srcMatch = attrs ? attrs.match(srcRe) : false;
8631                     if(srcMatch && srcMatch[2]){
8632                        var s = document.createElement("script");
8633                        s.src = srcMatch[2];
8634                        var typeMatch = attrs.match(typeRe);
8635                        if(typeMatch && typeMatch[2]){
8636                            s.type = typeMatch[2];
8637                        }
8638                        hd.appendChild(s);
8639                     }else if(match[2] && match[2].length > 0){
8640                         if(window.execScript) {
8641                            window.execScript(match[2]);
8642                         } else {
8643                             /**
8644                              * eval:var:id
8645                              * eval:var:dom
8646                              * eval:var:html
8647                              * 
8648                              */
8649                            window.eval(match[2]);
8650                         }
8651                     }
8652                 }
8653                 var el = document.getElementById(id);
8654                 if(el){el.parentNode.removeChild(el);}
8655                 if(typeof callback == "function"){
8656                     callback();
8657                 }
8658             });
8659             dom.innerHTML = html.replace(/(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)/ig, "");
8660             return this;
8661         },
8662
8663         /**
8664          * Direct access to the UpdateManager update() method (takes the same parameters).
8665          * @param {String/Function} url The url for this request or a function to call to get the url
8666          * @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}
8667          * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
8668          * @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.
8669          * @return {Roo.Element} this
8670          */
8671         load : function(){
8672             var um = this.getUpdateManager();
8673             um.update.apply(um, arguments);
8674             return this;
8675         },
8676
8677         /**
8678         * Gets this element's UpdateManager
8679         * @return {Roo.UpdateManager} The UpdateManager
8680         */
8681         getUpdateManager : function(){
8682             if(!this.updateManager){
8683                 this.updateManager = new Roo.UpdateManager(this);
8684             }
8685             return this.updateManager;
8686         },
8687
8688         /**
8689          * Disables text selection for this element (normalized across browsers)
8690          * @return {Roo.Element} this
8691          */
8692         unselectable : function(){
8693             this.dom.unselectable = "on";
8694             this.swallowEvent("selectstart", true);
8695             this.applyStyles("-moz-user-select:none;-khtml-user-select:none;");
8696             this.addClass("x-unselectable");
8697             return this;
8698         },
8699
8700         /**
8701         * Calculates the x, y to center this element on the screen
8702         * @return {Array} The x, y values [x, y]
8703         */
8704         getCenterXY : function(){
8705             return this.getAlignToXY(document, 'c-c');
8706         },
8707
8708         /**
8709         * Centers the Element in either the viewport, or another Element.
8710         * @param {String/HTMLElement/Roo.Element} centerIn (optional) The element in which to center the element.
8711         */
8712         center : function(centerIn){
8713             this.alignTo(centerIn || document, 'c-c');
8714             return this;
8715         },
8716
8717         /**
8718          * Tests various css rules/browsers to determine if this element uses a border box
8719          * @return {Boolean}
8720          */
8721         isBorderBox : function(){
8722             return noBoxAdjust[this.dom.tagName.toLowerCase()] || Roo.isBorderBox;
8723         },
8724
8725         /**
8726          * Return a box {x, y, width, height} that can be used to set another elements
8727          * size/location to match this element.
8728          * @param {Boolean} contentBox (optional) If true a box for the content of the element is returned.
8729          * @param {Boolean} local (optional) If true the element's left and top are returned instead of page x/y.
8730          * @return {Object} box An object in the format {x, y, width, height}
8731          */
8732         getBox : function(contentBox, local){
8733             var xy;
8734             if(!local){
8735                 xy = this.getXY();
8736             }else{
8737                 var left = parseInt(this.getStyle("left"), 10) || 0;
8738                 var top = parseInt(this.getStyle("top"), 10) || 0;
8739                 xy = [left, top];
8740             }
8741             var el = this.dom, w = el.offsetWidth, h = el.offsetHeight, bx;
8742             if(!contentBox){
8743                 bx = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: w, height: h};
8744             }else{
8745                 var l = this.getBorderWidth("l")+this.getPadding("l");
8746                 var r = this.getBorderWidth("r")+this.getPadding("r");
8747                 var t = this.getBorderWidth("t")+this.getPadding("t");
8748                 var b = this.getBorderWidth("b")+this.getPadding("b");
8749                 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)};
8750             }
8751             bx.right = bx.x + bx.width;
8752             bx.bottom = bx.y + bx.height;
8753             return bx;
8754         },
8755
8756         /**
8757          * Returns the sum width of the padding and borders for the passed "sides". See getBorderWidth()
8758          for more information about the sides.
8759          * @param {String} sides
8760          * @return {Number}
8761          */
8762         getFrameWidth : function(sides, onlyContentBox){
8763             return onlyContentBox && Roo.isBorderBox ? 0 : (this.getPadding(sides) + this.getBorderWidth(sides));
8764         },
8765
8766         /**
8767          * 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.
8768          * @param {Object} box The box to fill {x, y, width, height}
8769          * @param {Boolean} adjust (optional) Whether to adjust for box-model issues automatically
8770          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
8771          * @return {Roo.Element} this
8772          */
8773         setBox : function(box, adjust, animate){
8774             var w = box.width, h = box.height;
8775             if((adjust && !this.autoBoxAdjust) && !this.isBorderBox()){
8776                w -= (this.getBorderWidth("lr") + this.getPadding("lr"));
8777                h -= (this.getBorderWidth("tb") + this.getPadding("tb"));
8778             }
8779             this.setBounds(box.x, box.y, w, h, this.preanim(arguments, 2));
8780             return this;
8781         },
8782
8783         /**
8784          * Forces the browser to repaint this element
8785          * @return {Roo.Element} this
8786          */
8787          repaint : function(){
8788             var dom = this.dom;
8789             this.addClass("x-repaint");
8790             setTimeout(function(){
8791                 Roo.get(dom).removeClass("x-repaint");
8792             }, 1);
8793             return this;
8794         },
8795
8796         /**
8797          * Returns an object with properties top, left, right and bottom representing the margins of this element unless sides is passed,
8798          * then it returns the calculated width of the sides (see getPadding)
8799          * @param {String} sides (optional) Any combination of l, r, t, b to get the sum of those sides
8800          * @return {Object/Number}
8801          */
8802         getMargins : function(side){
8803             if(!side){
8804                 return {
8805                     top: parseInt(this.getStyle("margin-top"), 10) || 0,
8806                     left: parseInt(this.getStyle("margin-left"), 10) || 0,
8807                     bottom: parseInt(this.getStyle("margin-bottom"), 10) || 0,
8808                     right: parseInt(this.getStyle("margin-right"), 10) || 0
8809                 };
8810             }else{
8811                 return this.addStyles(side, El.margins);
8812              }
8813         },
8814
8815         // private
8816         addStyles : function(sides, styles){
8817             var val = 0, v, w;
8818             for(var i = 0, len = sides.length; i < len; i++){
8819                 v = this.getStyle(styles[sides.charAt(i)]);
8820                 if(v){
8821                      w = parseInt(v, 10);
8822                      if(w){ val += w; }
8823                 }
8824             }
8825             return val;
8826         },
8827
8828         /**
8829          * Creates a proxy element of this element
8830          * @param {String/Object} config The class name of the proxy element or a DomHelper config object
8831          * @param {String/HTMLElement} renderTo (optional) The element or element id to render the proxy to (defaults to document.body)
8832          * @param {Boolean} matchBox (optional) True to align and size the proxy to this element now (defaults to false)
8833          * @return {Roo.Element} The new proxy element
8834          */
8835         createProxy : function(config, renderTo, matchBox){
8836             if(renderTo){
8837                 renderTo = Roo.getDom(renderTo);
8838             }else{
8839                 renderTo = document.body;
8840             }
8841             config = typeof config == "object" ?
8842                 config : {tag : "div", cls: config};
8843             var proxy = Roo.DomHelper.append(renderTo, config, true);
8844             if(matchBox){
8845                proxy.setBox(this.getBox());
8846             }
8847             return proxy;
8848         },
8849
8850         /**
8851          * Puts a mask over this element to disable user interaction. Requires core.css.
8852          * This method can only be applied to elements which accept child nodes.
8853          * @param {String} msg (optional) A message to display in the mask
8854          * @param {String} msgCls (optional) A css class to apply to the msg element
8855          * @return {Element} The mask  element
8856          */
8857         mask : function(msg, msgCls){
8858             if(this.getStyle("position") == "static"){
8859                 this.setStyle("position", "relative");
8860             }
8861             if(!this._mask){
8862                 this._mask = Roo.DomHelper.append(this.dom, {cls:"roo-el-mask"}, true);
8863             }
8864             this.addClass("x-masked");
8865             this._mask.setDisplayed(true);
8866             if(typeof msg == 'string'){
8867                 if(!this._maskMsg){
8868                     this._maskMsg = Roo.DomHelper.append(this.dom, {cls:"roo-el-mask-msg", cn:{tag:'div'}}, true);
8869                 }
8870                 var mm = this._maskMsg;
8871                 mm.dom.className = msgCls ? "roo-el-mask-msg " + msgCls : "roo-el-mask-msg";
8872                 mm.dom.firstChild.innerHTML = msg;
8873                 mm.setDisplayed(true);
8874                 mm.center(this);
8875             }
8876             if(Roo.isIE && !(Roo.isIE7 && Roo.isStrict) && this.getStyle('height') == 'auto'){ // ie will not expand full height automatically
8877                 this._mask.setHeight(this.getHeight());
8878             }
8879             return this._mask;
8880         },
8881
8882         /**
8883          * Removes a previously applied mask. If removeEl is true the mask overlay is destroyed, otherwise
8884          * it is cached for reuse.
8885          */
8886         unmask : function(removeEl){
8887             if(this._mask){
8888                 if(removeEl === true){
8889                     this._mask.remove();
8890                     delete this._mask;
8891                     if(this._maskMsg){
8892                         this._maskMsg.remove();
8893                         delete this._maskMsg;
8894                     }
8895                 }else{
8896                     this._mask.setDisplayed(false);
8897                     if(this._maskMsg){
8898                         this._maskMsg.setDisplayed(false);
8899                     }
8900                 }
8901             }
8902             this.removeClass("x-masked");
8903         },
8904
8905         /**
8906          * Returns true if this element is masked
8907          * @return {Boolean}
8908          */
8909         isMasked : function(){
8910             return this._mask && this._mask.isVisible();
8911         },
8912
8913         /**
8914          * Creates an iframe shim for this element to keep selects and other windowed objects from
8915          * showing through.
8916          * @return {Roo.Element} The new shim element
8917          */
8918         createShim : function(){
8919             var el = document.createElement('iframe');
8920             el.frameBorder = 'no';
8921             el.className = 'roo-shim';
8922             if(Roo.isIE && Roo.isSecure){
8923                 el.src = Roo.SSL_SECURE_URL;
8924             }
8925             var shim = Roo.get(this.dom.parentNode.insertBefore(el, this.dom));
8926             shim.autoBoxAdjust = false;
8927             return shim;
8928         },
8929
8930         /**
8931          * Removes this element from the DOM and deletes it from the cache
8932          */
8933         remove : function(){
8934             if(this.dom.parentNode){
8935                 this.dom.parentNode.removeChild(this.dom);
8936             }
8937             delete El.cache[this.dom.id];
8938         },
8939
8940         /**
8941          * Sets up event handlers to add and remove a css class when the mouse is over this element
8942          * @param {String} className
8943          * @param {Boolean} preventFlicker (optional) If set to true, it prevents flickering by filtering
8944          * mouseout events for children elements
8945          * @return {Roo.Element} this
8946          */
8947         addClassOnOver : function(className, preventFlicker){
8948             this.on("mouseover", function(){
8949                 Roo.fly(this, '_internal').addClass(className);
8950             }, this.dom);
8951             var removeFn = function(e){
8952                 if(preventFlicker !== true || !e.within(this, true)){
8953                     Roo.fly(this, '_internal').removeClass(className);
8954                 }
8955             };
8956             this.on("mouseout", removeFn, this.dom);
8957             return this;
8958         },
8959
8960         /**
8961          * Sets up event handlers to add and remove a css class when this element has the focus
8962          * @param {String} className
8963          * @return {Roo.Element} this
8964          */
8965         addClassOnFocus : function(className){
8966             this.on("focus", function(){
8967                 Roo.fly(this, '_internal').addClass(className);
8968             }, this.dom);
8969             this.on("blur", function(){
8970                 Roo.fly(this, '_internal').removeClass(className);
8971             }, this.dom);
8972             return this;
8973         },
8974         /**
8975          * 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)
8976          * @param {String} className
8977          * @return {Roo.Element} this
8978          */
8979         addClassOnClick : function(className){
8980             var dom = this.dom;
8981             this.on("mousedown", function(){
8982                 Roo.fly(dom, '_internal').addClass(className);
8983                 var d = Roo.get(document);
8984                 var fn = function(){
8985                     Roo.fly(dom, '_internal').removeClass(className);
8986                     d.removeListener("mouseup", fn);
8987                 };
8988                 d.on("mouseup", fn);
8989             });
8990             return this;
8991         },
8992
8993         /**
8994          * Stops the specified event from bubbling and optionally prevents the default action
8995          * @param {String} eventName
8996          * @param {Boolean} preventDefault (optional) true to prevent the default action too
8997          * @return {Roo.Element} this
8998          */
8999         swallowEvent : function(eventName, preventDefault){
9000             var fn = function(e){
9001                 e.stopPropagation();
9002                 if(preventDefault){
9003                     e.preventDefault();
9004                 }
9005             };
9006             if(eventName instanceof Array){
9007                 for(var i = 0, len = eventName.length; i < len; i++){
9008                      this.on(eventName[i], fn);
9009                 }
9010                 return this;
9011             }
9012             this.on(eventName, fn);
9013             return this;
9014         },
9015
9016         /**
9017          * @private
9018          */
9019       fitToParentDelegate : Roo.emptyFn, // keep a reference to the fitToParent delegate
9020
9021         /**
9022          * Sizes this element to its parent element's dimensions performing
9023          * neccessary box adjustments.
9024          * @param {Boolean} monitorResize (optional) If true maintains the fit when the browser window is resized.
9025          * @param {String/HTMLElment/Element} targetParent (optional) The target parent, default to the parentNode.
9026          * @return {Roo.Element} this
9027          */
9028         fitToParent : function(monitorResize, targetParent) {
9029           Roo.EventManager.removeResizeListener(this.fitToParentDelegate); // always remove previous fitToParent delegate from onWindowResize
9030           this.fitToParentDelegate = Roo.emptyFn; // remove reference to previous delegate
9031           if (monitorResize === true && !this.dom.parentNode) { // check if this Element still exists
9032             return;
9033           }
9034           var p = Roo.get(targetParent || this.dom.parentNode);
9035           this.setSize(p.getComputedWidth() - p.getFrameWidth('lr'), p.getComputedHeight() - p.getFrameWidth('tb'));
9036           if (monitorResize === true) {
9037             this.fitToParentDelegate = this.fitToParent.createDelegate(this, [true, targetParent]);
9038             Roo.EventManager.onWindowResize(this.fitToParentDelegate);
9039           }
9040           return this;
9041         },
9042
9043         /**
9044          * Gets the next sibling, skipping text nodes
9045          * @return {HTMLElement} The next sibling or null
9046          */
9047         getNextSibling : function(){
9048             var n = this.dom.nextSibling;
9049             while(n && n.nodeType != 1){
9050                 n = n.nextSibling;
9051             }
9052             return n;
9053         },
9054
9055         /**
9056          * Gets the previous sibling, skipping text nodes
9057          * @return {HTMLElement} The previous sibling or null
9058          */
9059         getPrevSibling : function(){
9060             var n = this.dom.previousSibling;
9061             while(n && n.nodeType != 1){
9062                 n = n.previousSibling;
9063             }
9064             return n;
9065         },
9066
9067
9068         /**
9069          * Appends the passed element(s) to this element
9070          * @param {String/HTMLElement/Array/Element/CompositeElement} el
9071          * @return {Roo.Element} this
9072          */
9073         appendChild: function(el){
9074             el = Roo.get(el);
9075             el.appendTo(this);
9076             return this;
9077         },
9078
9079         /**
9080          * Creates the passed DomHelper config and appends it to this element or optionally inserts it before the passed child element.
9081          * @param {Object} config DomHelper element config object.  If no tag is specified (e.g., {tag:'input'}) then a div will be
9082          * automatically generated with the specified attributes.
9083          * @param {HTMLElement} insertBefore (optional) a child element of this element
9084          * @param {Boolean} returnDom (optional) true to return the dom node instead of creating an Element
9085          * @return {Roo.Element} The new child element
9086          */
9087         createChild: function(config, insertBefore, returnDom){
9088             config = config || {tag:'div'};
9089             if(insertBefore){
9090                 return Roo.DomHelper.insertBefore(insertBefore, config, returnDom !== true);
9091             }
9092             return Roo.DomHelper[!this.dom.firstChild ? 'overwrite' : 'append'](this.dom, config,  returnDom !== true);
9093         },
9094
9095         /**
9096          * Appends this element to the passed element
9097          * @param {String/HTMLElement/Element} el The new parent element
9098          * @return {Roo.Element} this
9099          */
9100         appendTo: function(el){
9101             el = Roo.getDom(el);
9102             el.appendChild(this.dom);
9103             return this;
9104         },
9105
9106         /**
9107          * Inserts this element before the passed element in the DOM
9108          * @param {String/HTMLElement/Element} el The element to insert before
9109          * @return {Roo.Element} this
9110          */
9111         insertBefore: function(el){
9112             el = Roo.getDom(el);
9113             el.parentNode.insertBefore(this.dom, el);
9114             return this;
9115         },
9116
9117         /**
9118          * Inserts this element after the passed element in the DOM
9119          * @param {String/HTMLElement/Element} el The element to insert after
9120          * @return {Roo.Element} this
9121          */
9122         insertAfter: function(el){
9123             el = Roo.getDom(el);
9124             el.parentNode.insertBefore(this.dom, el.nextSibling);
9125             return this;
9126         },
9127
9128         /**
9129          * Inserts (or creates) an element (or DomHelper config) as the first child of the this element
9130          * @param {String/HTMLElement/Element/Object} el The id or element to insert or a DomHelper config to create and insert
9131          * @return {Roo.Element} The new child
9132          */
9133         insertFirst: function(el, returnDom){
9134             el = el || {};
9135             if(typeof el == 'object' && !el.nodeType){ // dh config
9136                 return this.createChild(el, this.dom.firstChild, returnDom);
9137             }else{
9138                 el = Roo.getDom(el);
9139                 this.dom.insertBefore(el, this.dom.firstChild);
9140                 return !returnDom ? Roo.get(el) : el;
9141             }
9142         },
9143
9144         /**
9145          * Inserts (or creates) the passed element (or DomHelper config) as a sibling of this element
9146          * @param {String/HTMLElement/Element/Object} el The id or element to insert or a DomHelper config to create and insert
9147          * @param {String} where (optional) 'before' or 'after' defaults to before
9148          * @param {Boolean} returnDom (optional) True to return the raw DOM element instead of Roo.Element
9149          * @return {Roo.Element} the inserted Element
9150          */
9151         insertSibling: function(el, where, returnDom){
9152             where = where ? where.toLowerCase() : 'before';
9153             el = el || {};
9154             var rt, refNode = where == 'before' ? this.dom : this.dom.nextSibling;
9155
9156             if(typeof el == 'object' && !el.nodeType){ // dh config
9157                 if(where == 'after' && !this.dom.nextSibling){
9158                     rt = Roo.DomHelper.append(this.dom.parentNode, el, !returnDom);
9159                 }else{
9160                     rt = Roo.DomHelper[where == 'after' ? 'insertAfter' : 'insertBefore'](this.dom, el, !returnDom);
9161                 }
9162
9163             }else{
9164                 rt = this.dom.parentNode.insertBefore(Roo.getDom(el),
9165                             where == 'before' ? this.dom : this.dom.nextSibling);
9166                 if(!returnDom){
9167                     rt = Roo.get(rt);
9168                 }
9169             }
9170             return rt;
9171         },
9172
9173         /**
9174          * Creates and wraps this element with another element
9175          * @param {Object} config (optional) DomHelper element config object for the wrapper element or null for an empty div
9176          * @param {Boolean} returnDom (optional) True to return the raw DOM element instead of Roo.Element
9177          * @return {HTMLElement/Element} The newly created wrapper element
9178          */
9179         wrap: function(config, returnDom){
9180             if(!config){
9181                 config = {tag: "div"};
9182             }
9183             var newEl = Roo.DomHelper.insertBefore(this.dom, config, !returnDom);
9184             newEl.dom ? newEl.dom.appendChild(this.dom) : newEl.appendChild(this.dom);
9185             return newEl;
9186         },
9187
9188         /**
9189          * Replaces the passed element with this element
9190          * @param {String/HTMLElement/Element} el The element to replace
9191          * @return {Roo.Element} this
9192          */
9193         replace: function(el){
9194             el = Roo.get(el);
9195             this.insertBefore(el);
9196             el.remove();
9197             return this;
9198         },
9199
9200         /**
9201          * Inserts an html fragment into this element
9202          * @param {String} where Where to insert the html in relation to the this element - beforeBegin, afterBegin, beforeEnd, afterEnd.
9203          * @param {String} html The HTML fragment
9204          * @param {Boolean} returnEl True to return an Roo.Element
9205          * @return {HTMLElement/Roo.Element} The inserted node (or nearest related if more than 1 inserted)
9206          */
9207         insertHtml : function(where, html, returnEl){
9208             var el = Roo.DomHelper.insertHtml(where, this.dom, html);
9209             return returnEl ? Roo.get(el) : el;
9210         },
9211
9212         /**
9213          * Sets the passed attributes as attributes of this element (a style attribute can be a string, object or function)
9214          * @param {Object} o The object with the attributes
9215          * @param {Boolean} useSet (optional) false to override the default setAttribute to use expandos.
9216          * @return {Roo.Element} this
9217          */
9218         set : function(o, useSet){
9219             var el = this.dom;
9220             useSet = typeof useSet == 'undefined' ? (el.setAttribute ? true : false) : useSet;
9221             for(var attr in o){
9222                 if(attr == "style" || typeof o[attr] == "function") continue;
9223                 if(attr=="cls"){
9224                     el.className = o["cls"];
9225                 }else{
9226                     if(useSet) el.setAttribute(attr, o[attr]);
9227                     else el[attr] = o[attr];
9228                 }
9229             }
9230             if(o.style){
9231                 Roo.DomHelper.applyStyles(el, o.style);
9232             }
9233             return this;
9234         },
9235
9236         /**
9237          * Convenience method for constructing a KeyMap
9238          * @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:
9239          *                                  {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
9240          * @param {Function} fn The function to call
9241          * @param {Object} scope (optional) The scope of the function
9242          * @return {Roo.KeyMap} The KeyMap created
9243          */
9244         addKeyListener : function(key, fn, scope){
9245             var config;
9246             if(typeof key != "object" || key instanceof Array){
9247                 config = {
9248                     key: key,
9249                     fn: fn,
9250                     scope: scope
9251                 };
9252             }else{
9253                 config = {
9254                     key : key.key,
9255                     shift : key.shift,
9256                     ctrl : key.ctrl,
9257                     alt : key.alt,
9258                     fn: fn,
9259                     scope: scope
9260                 };
9261             }
9262             return new Roo.KeyMap(this, config);
9263         },
9264
9265         /**
9266          * Creates a KeyMap for this element
9267          * @param {Object} config The KeyMap config. See {@link Roo.KeyMap} for more details
9268          * @return {Roo.KeyMap} The KeyMap created
9269          */
9270         addKeyMap : function(config){
9271             return new Roo.KeyMap(this, config);
9272         },
9273
9274         /**
9275          * Returns true if this element is scrollable.
9276          * @return {Boolean}
9277          */
9278          isScrollable : function(){
9279             var dom = this.dom;
9280             return dom.scrollHeight > dom.clientHeight || dom.scrollWidth > dom.clientWidth;
9281         },
9282
9283         /**
9284          * 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().
9285          * @param {String} side Either "left" for scrollLeft values or "top" for scrollTop values.
9286          * @param {Number} value The new scroll value
9287          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
9288          * @return {Element} this
9289          */
9290
9291         scrollTo : function(side, value, animate){
9292             var prop = side.toLowerCase() == "left" ? "scrollLeft" : "scrollTop";
9293             if(!animate || !A){
9294                 this.dom[prop] = value;
9295             }else{
9296                 var to = prop == "scrollLeft" ? [value, this.dom.scrollTop] : [this.dom.scrollLeft, value];
9297                 this.anim({scroll: {"to": to}}, this.preanim(arguments, 2), 'scroll');
9298             }
9299             return this;
9300         },
9301
9302         /**
9303          * Scrolls this element the specified direction. Does bounds checking to make sure the scroll is
9304          * within this element's scrollable range.
9305          * @param {String} direction Possible values are: "l","left" - "r","right" - "t","top","up" - "b","bottom","down".
9306          * @param {Number} distance How far to scroll the element in pixels
9307          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
9308          * @return {Boolean} Returns true if a scroll was triggered or false if the element
9309          * was scrolled as far as it could go.
9310          */
9311          scroll : function(direction, distance, animate){
9312              if(!this.isScrollable()){
9313                  return;
9314              }
9315              var el = this.dom;
9316              var l = el.scrollLeft, t = el.scrollTop;
9317              var w = el.scrollWidth, h = el.scrollHeight;
9318              var cw = el.clientWidth, ch = el.clientHeight;
9319              direction = direction.toLowerCase();
9320              var scrolled = false;
9321              var a = this.preanim(arguments, 2);
9322              switch(direction){
9323                  case "l":
9324                  case "left":
9325                      if(w - l > cw){
9326                          var v = Math.min(l + distance, w-cw);
9327                          this.scrollTo("left", v, a);
9328                          scrolled = true;
9329                      }
9330                      break;
9331                 case "r":
9332                 case "right":
9333                      if(l > 0){
9334                          var v = Math.max(l - distance, 0);
9335                          this.scrollTo("left", v, a);
9336                          scrolled = true;
9337                      }
9338                      break;
9339                 case "t":
9340                 case "top":
9341                 case "up":
9342                      if(t > 0){
9343                          var v = Math.max(t - distance, 0);
9344                          this.scrollTo("top", v, a);
9345                          scrolled = true;
9346                      }
9347                      break;
9348                 case "b":
9349                 case "bottom":
9350                 case "down":
9351                      if(h - t > ch){
9352                          var v = Math.min(t + distance, h-ch);
9353                          this.scrollTo("top", v, a);
9354                          scrolled = true;
9355                      }
9356                      break;
9357              }
9358              return scrolled;
9359         },
9360
9361         /**
9362          * Translates the passed page coordinates into left/top css values for this element
9363          * @param {Number/Array} x The page x or an array containing [x, y]
9364          * @param {Number} y The page y
9365          * @return {Object} An object with left and top properties. e.g. {left: (value), top: (value)}
9366          */
9367         translatePoints : function(x, y){
9368             if(typeof x == 'object' || x instanceof Array){
9369                 y = x[1]; x = x[0];
9370             }
9371             var p = this.getStyle('position');
9372             var o = this.getXY();
9373
9374             var l = parseInt(this.getStyle('left'), 10);
9375             var t = parseInt(this.getStyle('top'), 10);
9376
9377             if(isNaN(l)){
9378                 l = (p == "relative") ? 0 : this.dom.offsetLeft;
9379             }
9380             if(isNaN(t)){
9381                 t = (p == "relative") ? 0 : this.dom.offsetTop;
9382             }
9383
9384             return {left: (x - o[0] + l), top: (y - o[1] + t)};
9385         },
9386
9387         /**
9388          * Returns the current scroll position of the element.
9389          * @return {Object} An object containing the scroll position in the format {left: (scrollLeft), top: (scrollTop)}
9390          */
9391         getScroll : function(){
9392             var d = this.dom, doc = document;
9393             if(d == doc || d == doc.body){
9394                 var l = window.pageXOffset || doc.documentElement.scrollLeft || doc.body.scrollLeft || 0;
9395                 var t = window.pageYOffset || doc.documentElement.scrollTop || doc.body.scrollTop || 0;
9396                 return {left: l, top: t};
9397             }else{
9398                 return {left: d.scrollLeft, top: d.scrollTop};
9399             }
9400         },
9401
9402         /**
9403          * Return the CSS color for the specified CSS attribute. rgb, 3 digit (like #fff) and valid values
9404          * are convert to standard 6 digit hex color.
9405          * @param {String} attr The css attribute
9406          * @param {String} defaultValue The default value to use when a valid color isn't found
9407          * @param {String} prefix (optional) defaults to #. Use an empty string when working with
9408          * YUI color anims.
9409          */
9410         getColor : function(attr, defaultValue, prefix){
9411             var v = this.getStyle(attr);
9412             if(!v || v == "transparent" || v == "inherit") {
9413                 return defaultValue;
9414             }
9415             var color = typeof prefix == "undefined" ? "#" : prefix;
9416             if(v.substr(0, 4) == "rgb("){
9417                 var rvs = v.slice(4, v.length -1).split(",");
9418                 for(var i = 0; i < 3; i++){
9419                     var h = parseInt(rvs[i]).toString(16);
9420                     if(h < 16){
9421                         h = "0" + h;
9422                     }
9423                     color += h;
9424                 }
9425             } else {
9426                 if(v.substr(0, 1) == "#"){
9427                     if(v.length == 4) {
9428                         for(var i = 1; i < 4; i++){
9429                             var c = v.charAt(i);
9430                             color +=  c + c;
9431                         }
9432                     }else if(v.length == 7){
9433                         color += v.substr(1);
9434                     }
9435                 }
9436             }
9437             return(color.length > 5 ? color.toLowerCase() : defaultValue);
9438         },
9439
9440         /**
9441          * Wraps the specified element with a special markup/CSS block that renders by default as a gray container with a
9442          * gradient background, rounded corners and a 4-way shadow.
9443          * @param {String} class (optional) A base CSS class to apply to the containing wrapper element (defaults to 'x-box').
9444          * Note that there are a number of CSS rules that are dependent on this name to make the overall effect work,
9445          * so if you supply an alternate base class, make sure you also supply all of the necessary rules.
9446          * @return {Roo.Element} this
9447          */
9448         boxWrap : function(cls){
9449             cls = cls || 'x-box';
9450             var el = Roo.get(this.insertHtml('beforeBegin', String.format('<div class="{0}">'+El.boxMarkup+'</div>', cls)));
9451             el.child('.'+cls+'-mc').dom.appendChild(this.dom);
9452             return el;
9453         },
9454
9455         /**
9456          * Returns the value of a namespaced attribute from the element's underlying DOM node.
9457          * @param {String} namespace The namespace in which to look for the attribute
9458          * @param {String} name The attribute name
9459          * @return {String} The attribute value
9460          */
9461         getAttributeNS : Roo.isIE ? function(ns, name){
9462             var d = this.dom;
9463             var type = typeof d[ns+":"+name];
9464             if(type != 'undefined' && type != 'unknown'){
9465                 return d[ns+":"+name];
9466             }
9467             return d[name];
9468         } : function(ns, name){
9469             var d = this.dom;
9470             return d.getAttributeNS(ns, name) || d.getAttribute(ns+":"+name) || d.getAttribute(name) || d[name];
9471         }
9472     };
9473
9474     var ep = El.prototype;
9475
9476     /**
9477      * Appends an event handler (Shorthand for addListener)
9478      * @param {String}   eventName     The type of event to append
9479      * @param {Function} fn        The method the event invokes
9480      * @param {Object} scope       (optional) The scope (this object) of the fn
9481      * @param {Object}   options   (optional)An object with standard {@link Roo.EventManager#addListener} options
9482      * @method
9483      */
9484     ep.on = ep.addListener;
9485         // backwards compat
9486     ep.mon = ep.addListener;
9487
9488     /**
9489      * Removes an event handler from this element (shorthand for removeListener)
9490      * @param {String} eventName the type of event to remove
9491      * @param {Function} fn the method the event invokes
9492      * @return {Roo.Element} this
9493      * @method
9494      */
9495     ep.un = ep.removeListener;
9496
9497     /**
9498      * true to automatically adjust width and height settings for box-model issues (default to true)
9499      */
9500     ep.autoBoxAdjust = true;
9501
9502     // private
9503     El.unitPattern = /\d+(px|em|%|en|ex|pt|in|cm|mm|pc)$/i;
9504
9505     // private
9506     El.addUnits = function(v, defaultUnit){
9507         if(v === "" || v == "auto"){
9508             return v;
9509         }
9510         if(v === undefined){
9511             return '';
9512         }
9513         if(typeof v == "number" || !El.unitPattern.test(v)){
9514             return v + (defaultUnit || 'px');
9515         }
9516         return v;
9517     };
9518
9519     // special markup used throughout Roo when box wrapping elements
9520     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>';
9521     /**
9522      * Visibility mode constant - Use visibility to hide element
9523      * @static
9524      * @type Number
9525      */
9526     El.VISIBILITY = 1;
9527     /**
9528      * Visibility mode constant - Use display to hide element
9529      * @static
9530      * @type Number
9531      */
9532     El.DISPLAY = 2;
9533
9534     El.borders = {l: "border-left-width", r: "border-right-width", t: "border-top-width", b: "border-bottom-width"};
9535     El.paddings = {l: "padding-left", r: "padding-right", t: "padding-top", b: "padding-bottom"};
9536     El.margins = {l: "margin-left", r: "margin-right", t: "margin-top", b: "margin-bottom"};
9537
9538
9539
9540     /**
9541      * @private
9542      */
9543     El.cache = {};
9544
9545     var docEl;
9546
9547     /**
9548      * Static method to retrieve Element objects. Uses simple caching to consistently return the same object.
9549      * Automatically fixes if an object was recreated with the same id via AJAX or DOM.
9550      * @param {String/HTMLElement/Element} el The id of the node, a DOM Node or an existing Element.
9551      * @return {Element} The Element object
9552      * @static
9553      */
9554     El.get = function(el){
9555         var ex, elm, id;
9556         if(!el){ return null; }
9557         if(typeof el == "string"){ // element id
9558             if(!(elm = document.getElementById(el))){
9559                 return null;
9560             }
9561             if(ex = El.cache[el]){
9562                 ex.dom = elm;
9563             }else{
9564                 ex = El.cache[el] = new El(elm);
9565             }
9566             return ex;
9567         }else if(el.tagName){ // dom element
9568             if(!(id = el.id)){
9569                 id = Roo.id(el);
9570             }
9571             if(ex = El.cache[id]){
9572                 ex.dom = el;
9573             }else{
9574                 ex = El.cache[id] = new El(el);
9575             }
9576             return ex;
9577         }else if(el instanceof El){
9578             if(el != docEl){
9579                 el.dom = document.getElementById(el.id) || el.dom; // refresh dom element in case no longer valid,
9580                                                               // catch case where it hasn't been appended
9581                 El.cache[el.id] = el; // in case it was created directly with Element(), let's cache it
9582             }
9583             return el;
9584         }else if(el.isComposite){
9585             return el;
9586         }else if(el instanceof Array){
9587             return El.select(el);
9588         }else if(el == document){
9589             // create a bogus element object representing the document object
9590             if(!docEl){
9591                 var f = function(){};
9592                 f.prototype = El.prototype;
9593                 docEl = new f();
9594                 docEl.dom = document;
9595             }
9596             return docEl;
9597         }
9598         return null;
9599     };
9600
9601     // private
9602     El.uncache = function(el){
9603         for(var i = 0, a = arguments, len = a.length; i < len; i++) {
9604             if(a[i]){
9605                 delete El.cache[a[i].id || a[i]];
9606             }
9607         }
9608     };
9609
9610     // private
9611     // Garbage collection - uncache elements/purge listeners on orphaned elements
9612     // so we don't hold a reference and cause the browser to retain them
9613     El.garbageCollect = function(){
9614         if(!Roo.enableGarbageCollector){
9615             clearInterval(El.collectorThread);
9616             return;
9617         }
9618         for(var eid in El.cache){
9619             var el = El.cache[eid], d = el.dom;
9620             // -------------------------------------------------------
9621             // Determining what is garbage:
9622             // -------------------------------------------------------
9623             // !d
9624             // dom node is null, definitely garbage
9625             // -------------------------------------------------------
9626             // !d.parentNode
9627             // no parentNode == direct orphan, definitely garbage
9628             // -------------------------------------------------------
9629             // !d.offsetParent && !document.getElementById(eid)
9630             // display none elements have no offsetParent so we will
9631             // also try to look it up by it's id. However, check
9632             // offsetParent first so we don't do unneeded lookups.
9633             // This enables collection of elements that are not orphans
9634             // directly, but somewhere up the line they have an orphan
9635             // parent.
9636             // -------------------------------------------------------
9637             if(!d || !d.parentNode || (!d.offsetParent && !document.getElementById(eid))){
9638                 delete El.cache[eid];
9639                 if(d && Roo.enableListenerCollection){
9640                     E.purgeElement(d);
9641                 }
9642             }
9643         }
9644     }
9645     El.collectorThreadId = setInterval(El.garbageCollect, 30000);
9646
9647
9648     // dom is optional
9649     El.Flyweight = function(dom){
9650         this.dom = dom;
9651     };
9652     El.Flyweight.prototype = El.prototype;
9653
9654     El._flyweights = {};
9655     /**
9656      * Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element -
9657      * the dom node can be overwritten by other code.
9658      * @param {String/HTMLElement} el The dom node or id
9659      * @param {String} named (optional) Allows for creation of named reusable flyweights to
9660      *                                  prevent conflicts (e.g. internally Roo uses "_internal")
9661      * @static
9662      * @return {Element} The shared Element object
9663      */
9664     El.fly = function(el, named){
9665         named = named || '_global';
9666         el = Roo.getDom(el);
9667         if(!el){
9668             return null;
9669         }
9670         if(!El._flyweights[named]){
9671             El._flyweights[named] = new El.Flyweight();
9672         }
9673         El._flyweights[named].dom = el;
9674         return El._flyweights[named];
9675     };
9676
9677     /**
9678      * Static method to retrieve Element objects. Uses simple caching to consistently return the same object.
9679      * Automatically fixes if an object was recreated with the same id via AJAX or DOM.
9680      * Shorthand of {@link Roo.Element#get}
9681      * @param {String/HTMLElement/Element} el The id of the node, a DOM Node or an existing Element.
9682      * @return {Element} The Element object
9683      * @member Roo
9684      * @method get
9685      */
9686     Roo.get = El.get;
9687     /**
9688      * Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element -
9689      * the dom node can be overwritten by other code.
9690      * Shorthand of {@link Roo.Element#fly}
9691      * @param {String/HTMLElement} el The dom node or id
9692      * @param {String} named (optional) Allows for creation of named reusable flyweights to
9693      *                                  prevent conflicts (e.g. internally Roo uses "_internal")
9694      * @static
9695      * @return {Element} The shared Element object
9696      * @member Roo
9697      * @method fly
9698      */
9699     Roo.fly = El.fly;
9700
9701     // speedy lookup for elements never to box adjust
9702     var noBoxAdjust = Roo.isStrict ? {
9703         select:1
9704     } : {
9705         input:1, select:1, textarea:1
9706     };
9707     if(Roo.isIE || Roo.isGecko){
9708         noBoxAdjust['button'] = 1;
9709     }
9710
9711
9712     Roo.EventManager.on(window, 'unload', function(){
9713         delete El.cache;
9714         delete El._flyweights;
9715     });
9716 })();
9717
9718
9719
9720
9721 if(Roo.DomQuery){
9722     Roo.Element.selectorFunction = Roo.DomQuery.select;
9723 }
9724
9725 Roo.Element.select = function(selector, unique, root){
9726     var els;
9727     if(typeof selector == "string"){
9728         els = Roo.Element.selectorFunction(selector, root);
9729     }else if(selector.length !== undefined){
9730         els = selector;
9731     }else{
9732         throw "Invalid selector";
9733     }
9734     if(unique === true){
9735         return new Roo.CompositeElement(els);
9736     }else{
9737         return new Roo.CompositeElementLite(els);
9738     }
9739 };
9740 /**
9741  * Selects elements based on the passed CSS selector to enable working on them as 1.
9742  * @param {String/Array} selector The CSS selector or an array of elements
9743  * @param {Boolean} unique (optional) true to create a unique Roo.Element for each element (defaults to a shared flyweight object)
9744  * @param {HTMLElement/String} root (optional) The root element of the query or id of the root
9745  * @return {CompositeElementLite/CompositeElement}
9746  * @member Roo
9747  * @method select
9748  */
9749 Roo.select = Roo.Element.select;
9750
9751
9752
9753
9754
9755
9756
9757
9758
9759
9760
9761
9762
9763
9764 /*
9765  * Based on:
9766  * Ext JS Library 1.1.1
9767  * Copyright(c) 2006-2007, Ext JS, LLC.
9768  *
9769  * Originally Released Under LGPL - original licence link has changed is not relivant.
9770  *
9771  * Fork - LGPL
9772  * <script type="text/javascript">
9773  */
9774
9775
9776
9777 //Notifies Element that fx methods are available
9778 Roo.enableFx = true;
9779
9780 /**
9781  * @class Roo.Fx
9782  * <p>A class to provide basic animation and visual effects support.  <b>Note:</b> This class is automatically applied
9783  * to the {@link Roo.Element} interface when included, so all effects calls should be performed via Element.
9784  * Conversely, since the effects are not actually defined in Element, Roo.Fx <b>must</b> be included in order for the 
9785  * Element effects to work.</p><br/>
9786  *
9787  * <p>It is important to note that although the Fx methods and many non-Fx Element methods support "method chaining" in that
9788  * they return the Element object itself as the method return value, it is not always possible to mix the two in a single
9789  * method chain.  The Fx methods use an internal effects queue so that each effect can be properly timed and sequenced.
9790  * Non-Fx methods, on the other hand, have no such internal queueing and will always execute immediately.  For this reason,
9791  * while it may be possible to mix certain Fx and non-Fx method calls in a single chain, it may not always provide the
9792  * expected results and should be done with care.</p><br/>
9793  *
9794  * <p>Motion effects support 8-way anchoring, meaning that you can choose one of 8 different anchor points on the Element
9795  * that will serve as either the start or end point of the animation.  Following are all of the supported anchor positions:</p>
9796 <pre>
9797 Value  Description
9798 -----  -----------------------------
9799 tl     The top left corner
9800 t      The center of the top edge
9801 tr     The top right corner
9802 l      The center of the left edge
9803 r      The center of the right edge
9804 bl     The bottom left corner
9805 b      The center of the bottom edge
9806 br     The bottom right corner
9807 </pre>
9808  * <b>Although some Fx methods accept specific custom config parameters, the ones shown in the Config Options section
9809  * below are common options that can be passed to any Fx method.</b>
9810  * @cfg {Function} callback A function called when the effect is finished
9811  * @cfg {Object} scope The scope of the effect function
9812  * @cfg {String} easing A valid Easing value for the effect
9813  * @cfg {String} afterCls A css class to apply after the effect
9814  * @cfg {Number} duration The length of time (in seconds) that the effect should last
9815  * @cfg {Boolean} remove Whether the Element should be removed from the DOM and destroyed after the effect finishes
9816  * @cfg {Boolean} useDisplay Whether to use the <i>display</i> CSS property instead of <i>visibility</i> when hiding Elements (only applies to 
9817  * effects that end with the element being visually hidden, ignored otherwise)
9818  * @cfg {String/Object/Function} afterStyle A style specification string, e.g. "width:100px", or an object in the form {width:"100px"}, or
9819  * a function which returns such a specification that will be applied to the Element after the effect finishes
9820  * @cfg {Boolean} block Whether the effect should block other effects from queueing while it runs
9821  * @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
9822  * @cfg {Boolean} stopFx Whether subsequent effects should be stopped and removed after the current effect finishes
9823  */
9824 Roo.Fx = {
9825         /**
9826          * Slides the element into view.  An anchor point can be optionally passed to set the point of
9827          * origin for the slide effect.  This function automatically handles wrapping the element with
9828          * a fixed-size container if needed.  See the Fx class overview for valid anchor point options.
9829          * Usage:
9830          *<pre><code>
9831 // default: slide the element in from the top
9832 el.slideIn();
9833
9834 // custom: slide the element in from the right with a 2-second duration
9835 el.slideIn('r', { duration: 2 });
9836
9837 // common config options shown with default values
9838 el.slideIn('t', {
9839     easing: 'easeOut',
9840     duration: .5
9841 });
9842 </code></pre>
9843          * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
9844          * @param {Object} options (optional) Object literal with any of the Fx config options
9845          * @return {Roo.Element} The Element
9846          */
9847     slideIn : function(anchor, o){
9848         var el = this.getFxEl();
9849         o = o || {};
9850
9851         el.queueFx(o, function(){
9852
9853             anchor = anchor || "t";
9854
9855             // fix display to visibility
9856             this.fixDisplay();
9857
9858             // restore values after effect
9859             var r = this.getFxRestore();
9860             var b = this.getBox();
9861             // fixed size for slide
9862             this.setSize(b);
9863
9864             // wrap if needed
9865             var wrap = this.fxWrap(r.pos, o, "hidden");
9866
9867             var st = this.dom.style;
9868             st.visibility = "visible";
9869             st.position = "absolute";
9870
9871             // clear out temp styles after slide and unwrap
9872             var after = function(){
9873                 el.fxUnwrap(wrap, r.pos, o);
9874                 st.width = r.width;
9875                 st.height = r.height;
9876                 el.afterFx(o);
9877             };
9878             // time to calc the positions
9879             var a, pt = {to: [b.x, b.y]}, bw = {to: b.width}, bh = {to: b.height};
9880
9881             switch(anchor.toLowerCase()){
9882                 case "t":
9883                     wrap.setSize(b.width, 0);
9884                     st.left = st.bottom = "0";
9885                     a = {height: bh};
9886                 break;
9887                 case "l":
9888                     wrap.setSize(0, b.height);
9889                     st.right = st.top = "0";
9890                     a = {width: bw};
9891                 break;
9892                 case "r":
9893                     wrap.setSize(0, b.height);
9894                     wrap.setX(b.right);
9895                     st.left = st.top = "0";
9896                     a = {width: bw, points: pt};
9897                 break;
9898                 case "b":
9899                     wrap.setSize(b.width, 0);
9900                     wrap.setY(b.bottom);
9901                     st.left = st.top = "0";
9902                     a = {height: bh, points: pt};
9903                 break;
9904                 case "tl":
9905                     wrap.setSize(0, 0);
9906                     st.right = st.bottom = "0";
9907                     a = {width: bw, height: bh};
9908                 break;
9909                 case "bl":
9910                     wrap.setSize(0, 0);
9911                     wrap.setY(b.y+b.height);
9912                     st.right = st.top = "0";
9913                     a = {width: bw, height: bh, points: pt};
9914                 break;
9915                 case "br":
9916                     wrap.setSize(0, 0);
9917                     wrap.setXY([b.right, b.bottom]);
9918                     st.left = st.top = "0";
9919                     a = {width: bw, height: bh, points: pt};
9920                 break;
9921                 case "tr":
9922                     wrap.setSize(0, 0);
9923                     wrap.setX(b.x+b.width);
9924                     st.left = st.bottom = "0";
9925                     a = {width: bw, height: bh, points: pt};
9926                 break;
9927             }
9928             this.dom.style.visibility = "visible";
9929             wrap.show();
9930
9931             arguments.callee.anim = wrap.fxanim(a,
9932                 o,
9933                 'motion',
9934                 .5,
9935                 'easeOut', after);
9936         });
9937         return this;
9938     },
9939     
9940         /**
9941          * Slides the element out of view.  An anchor point can be optionally passed to set the end point
9942          * for the slide effect.  When the effect is completed, the element will be hidden (visibility = 
9943          * 'hidden') but block elements will still take up space in the document.  The element must be removed
9944          * from the DOM using the 'remove' config option if desired.  This function automatically handles 
9945          * wrapping the element with a fixed-size container if needed.  See the Fx class overview for valid anchor point options.
9946          * Usage:
9947          *<pre><code>
9948 // default: slide the element out to the top
9949 el.slideOut();
9950
9951 // custom: slide the element out to the right with a 2-second duration
9952 el.slideOut('r', { duration: 2 });
9953
9954 // common config options shown with default values
9955 el.slideOut('t', {
9956     easing: 'easeOut',
9957     duration: .5,
9958     remove: false,
9959     useDisplay: false
9960 });
9961 </code></pre>
9962          * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
9963          * @param {Object} options (optional) Object literal with any of the Fx config options
9964          * @return {Roo.Element} The Element
9965          */
9966     slideOut : function(anchor, o){
9967         var el = this.getFxEl();
9968         o = o || {};
9969
9970         el.queueFx(o, function(){
9971
9972             anchor = anchor || "t";
9973
9974             // restore values after effect
9975             var r = this.getFxRestore();
9976             
9977             var b = this.getBox();
9978             // fixed size for slide
9979             this.setSize(b);
9980
9981             // wrap if needed
9982             var wrap = this.fxWrap(r.pos, o, "visible");
9983
9984             var st = this.dom.style;
9985             st.visibility = "visible";
9986             st.position = "absolute";
9987
9988             wrap.setSize(b);
9989
9990             var after = function(){
9991                 if(o.useDisplay){
9992                     el.setDisplayed(false);
9993                 }else{
9994                     el.hide();
9995                 }
9996
9997                 el.fxUnwrap(wrap, r.pos, o);
9998
9999                 st.width = r.width;
10000                 st.height = r.height;
10001
10002                 el.afterFx(o);
10003             };
10004
10005             var a, zero = {to: 0};
10006             switch(anchor.toLowerCase()){
10007                 case "t":
10008                     st.left = st.bottom = "0";
10009                     a = {height: zero};
10010                 break;
10011                 case "l":
10012                     st.right = st.top = "0";
10013                     a = {width: zero};
10014                 break;
10015                 case "r":
10016                     st.left = st.top = "0";
10017                     a = {width: zero, points: {to:[b.right, b.y]}};
10018                 break;
10019                 case "b":
10020                     st.left = st.top = "0";
10021                     a = {height: zero, points: {to:[b.x, b.bottom]}};
10022                 break;
10023                 case "tl":
10024                     st.right = st.bottom = "0";
10025                     a = {width: zero, height: zero};
10026                 break;
10027                 case "bl":
10028                     st.right = st.top = "0";
10029                     a = {width: zero, height: zero, points: {to:[b.x, b.bottom]}};
10030                 break;
10031                 case "br":
10032                     st.left = st.top = "0";
10033                     a = {width: zero, height: zero, points: {to:[b.x+b.width, b.bottom]}};
10034                 break;
10035                 case "tr":
10036                     st.left = st.bottom = "0";
10037                     a = {width: zero, height: zero, points: {to:[b.right, b.y]}};
10038                 break;
10039             }
10040
10041             arguments.callee.anim = wrap.fxanim(a,
10042                 o,
10043                 'motion',
10044                 .5,
10045                 "easeOut", after);
10046         });
10047         return this;
10048     },
10049
10050         /**
10051          * Fades the element out while slowly expanding it in all directions.  When the effect is completed, the 
10052          * element will be hidden (visibility = 'hidden') but block elements will still take up space in the document. 
10053          * The element must be removed from the DOM using the 'remove' config option if desired.
10054          * Usage:
10055          *<pre><code>
10056 // default
10057 el.puff();
10058
10059 // common config options shown with default values
10060 el.puff({
10061     easing: 'easeOut',
10062     duration: .5,
10063     remove: false,
10064     useDisplay: false
10065 });
10066 </code></pre>
10067          * @param {Object} options (optional) Object literal with any of the Fx config options
10068          * @return {Roo.Element} The Element
10069          */
10070     puff : function(o){
10071         var el = this.getFxEl();
10072         o = o || {};
10073
10074         el.queueFx(o, function(){
10075             this.clearOpacity();
10076             this.show();
10077
10078             // restore values after effect
10079             var r = this.getFxRestore();
10080             var st = this.dom.style;
10081
10082             var after = function(){
10083                 if(o.useDisplay){
10084                     el.setDisplayed(false);
10085                 }else{
10086                     el.hide();
10087                 }
10088
10089                 el.clearOpacity();
10090
10091                 el.setPositioning(r.pos);
10092                 st.width = r.width;
10093                 st.height = r.height;
10094                 st.fontSize = '';
10095                 el.afterFx(o);
10096             };
10097
10098             var width = this.getWidth();
10099             var height = this.getHeight();
10100
10101             arguments.callee.anim = this.fxanim({
10102                     width : {to: this.adjustWidth(width * 2)},
10103                     height : {to: this.adjustHeight(height * 2)},
10104                     points : {by: [-(width * .5), -(height * .5)]},
10105                     opacity : {to: 0},
10106                     fontSize: {to:200, unit: "%"}
10107                 },
10108                 o,
10109                 'motion',
10110                 .5,
10111                 "easeOut", after);
10112         });
10113         return this;
10114     },
10115
10116         /**
10117          * Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television).
10118          * When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still 
10119          * take up space in the document. The element must be removed from the DOM using the 'remove' config option if desired.
10120          * Usage:
10121          *<pre><code>
10122 // default
10123 el.switchOff();
10124
10125 // all config options shown with default values
10126 el.switchOff({
10127     easing: 'easeIn',
10128     duration: .3,
10129     remove: false,
10130     useDisplay: false
10131 });
10132 </code></pre>
10133          * @param {Object} options (optional) Object literal with any of the Fx config options
10134          * @return {Roo.Element} The Element
10135          */
10136     switchOff : function(o){
10137         var el = this.getFxEl();
10138         o = o || {};
10139
10140         el.queueFx(o, function(){
10141             this.clearOpacity();
10142             this.clip();
10143
10144             // restore values after effect
10145             var r = this.getFxRestore();
10146             var st = this.dom.style;
10147
10148             var after = function(){
10149                 if(o.useDisplay){
10150                     el.setDisplayed(false);
10151                 }else{
10152                     el.hide();
10153                 }
10154
10155                 el.clearOpacity();
10156                 el.setPositioning(r.pos);
10157                 st.width = r.width;
10158                 st.height = r.height;
10159
10160                 el.afterFx(o);
10161             };
10162
10163             this.fxanim({opacity:{to:0.3}}, null, null, .1, null, function(){
10164                 this.clearOpacity();
10165                 (function(){
10166                     this.fxanim({
10167                         height:{to:1},
10168                         points:{by:[0, this.getHeight() * .5]}
10169                     }, o, 'motion', 0.3, 'easeIn', after);
10170                 }).defer(100, this);
10171             });
10172         });
10173         return this;
10174     },
10175
10176     /**
10177      * Highlights the Element by setting a color (applies to the background-color by default, but can be
10178      * changed using the "attr" config option) and then fading back to the original color. If no original
10179      * color is available, you should provide the "endColor" config option which will be cleared after the animation.
10180      * Usage:
10181 <pre><code>
10182 // default: highlight background to yellow
10183 el.highlight();
10184
10185 // custom: highlight foreground text to blue for 2 seconds
10186 el.highlight("0000ff", { attr: 'color', duration: 2 });
10187
10188 // common config options shown with default values
10189 el.highlight("ffff9c", {
10190     attr: "background-color", //can be any valid CSS property (attribute) that supports a color value
10191     endColor: (current color) or "ffffff",
10192     easing: 'easeIn',
10193     duration: 1
10194 });
10195 </code></pre>
10196      * @param {String} color (optional) The highlight color. Should be a 6 char hex color without the leading # (defaults to yellow: 'ffff9c')
10197      * @param {Object} options (optional) Object literal with any of the Fx config options
10198      * @return {Roo.Element} The Element
10199      */ 
10200     highlight : function(color, o){
10201         var el = this.getFxEl();
10202         o = o || {};
10203
10204         el.queueFx(o, function(){
10205             color = color || "ffff9c";
10206             attr = o.attr || "backgroundColor";
10207
10208             this.clearOpacity();
10209             this.show();
10210
10211             var origColor = this.getColor(attr);
10212             var restoreColor = this.dom.style[attr];
10213             endColor = (o.endColor || origColor) || "ffffff";
10214
10215             var after = function(){
10216                 el.dom.style[attr] = restoreColor;
10217                 el.afterFx(o);
10218             };
10219
10220             var a = {};
10221             a[attr] = {from: color, to: endColor};
10222             arguments.callee.anim = this.fxanim(a,
10223                 o,
10224                 'color',
10225                 1,
10226                 'easeIn', after);
10227         });
10228         return this;
10229     },
10230
10231    /**
10232     * Shows a ripple of exploding, attenuating borders to draw attention to an Element.
10233     * Usage:
10234 <pre><code>
10235 // default: a single light blue ripple
10236 el.frame();
10237
10238 // custom: 3 red ripples lasting 3 seconds total
10239 el.frame("ff0000", 3, { duration: 3 });
10240
10241 // common config options shown with default values
10242 el.frame("C3DAF9", 1, {
10243     duration: 1 //duration of entire animation (not each individual ripple)
10244     // Note: Easing is not configurable and will be ignored if included
10245 });
10246 </code></pre>
10247     * @param {String} color (optional) The color of the border.  Should be a 6 char hex color without the leading # (defaults to light blue: 'C3DAF9').
10248     * @param {Number} count (optional) The number of ripples to display (defaults to 1)
10249     * @param {Object} options (optional) Object literal with any of the Fx config options
10250     * @return {Roo.Element} The Element
10251     */
10252     frame : function(color, count, o){
10253         var el = this.getFxEl();
10254         o = o || {};
10255
10256         el.queueFx(o, function(){
10257             color = color || "#C3DAF9";
10258             if(color.length == 6){
10259                 color = "#" + color;
10260             }
10261             count = count || 1;
10262             duration = o.duration || 1;
10263             this.show();
10264
10265             var b = this.getBox();
10266             var animFn = function(){
10267                 var proxy = this.createProxy({
10268
10269                      style:{
10270                         visbility:"hidden",
10271                         position:"absolute",
10272                         "z-index":"35000", // yee haw
10273                         border:"0px solid " + color
10274                      }
10275                   });
10276                 var scale = Roo.isBorderBox ? 2 : 1;
10277                 proxy.animate({
10278                     top:{from:b.y, to:b.y - 20},
10279                     left:{from:b.x, to:b.x - 20},
10280                     borderWidth:{from:0, to:10},
10281                     opacity:{from:1, to:0},
10282                     height:{from:b.height, to:(b.height + (20*scale))},
10283                     width:{from:b.width, to:(b.width + (20*scale))}
10284                 }, duration, function(){
10285                     proxy.remove();
10286                 });
10287                 if(--count > 0){
10288                      animFn.defer((duration/2)*1000, this);
10289                 }else{
10290                     el.afterFx(o);
10291                 }
10292             };
10293             animFn.call(this);
10294         });
10295         return this;
10296     },
10297
10298    /**
10299     * Creates a pause before any subsequent queued effects begin.  If there are
10300     * no effects queued after the pause it will have no effect.
10301     * Usage:
10302 <pre><code>
10303 el.pause(1);
10304 </code></pre>
10305     * @param {Number} seconds The length of time to pause (in seconds)
10306     * @return {Roo.Element} The Element
10307     */
10308     pause : function(seconds){
10309         var el = this.getFxEl();
10310         var o = {};
10311
10312         el.queueFx(o, function(){
10313             setTimeout(function(){
10314                 el.afterFx(o);
10315             }, seconds * 1000);
10316         });
10317         return this;
10318     },
10319
10320    /**
10321     * Fade an element in (from transparent to opaque).  The ending opacity can be specified
10322     * using the "endOpacity" config option.
10323     * Usage:
10324 <pre><code>
10325 // default: fade in from opacity 0 to 100%
10326 el.fadeIn();
10327
10328 // custom: fade in from opacity 0 to 75% over 2 seconds
10329 el.fadeIn({ endOpacity: .75, duration: 2});
10330
10331 // common config options shown with default values
10332 el.fadeIn({
10333     endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)
10334     easing: 'easeOut',
10335     duration: .5
10336 });
10337 </code></pre>
10338     * @param {Object} options (optional) Object literal with any of the Fx config options
10339     * @return {Roo.Element} The Element
10340     */
10341     fadeIn : function(o){
10342         var el = this.getFxEl();
10343         o = o || {};
10344         el.queueFx(o, function(){
10345             this.setOpacity(0);
10346             this.fixDisplay();
10347             this.dom.style.visibility = 'visible';
10348             var to = o.endOpacity || 1;
10349             arguments.callee.anim = this.fxanim({opacity:{to:to}},
10350                 o, null, .5, "easeOut", function(){
10351                 if(to == 1){
10352                     this.clearOpacity();
10353                 }
10354                 el.afterFx(o);
10355             });
10356         });
10357         return this;
10358     },
10359
10360    /**
10361     * Fade an element out (from opaque to transparent).  The ending opacity can be specified
10362     * using the "endOpacity" config option.
10363     * Usage:
10364 <pre><code>
10365 // default: fade out from the element's current opacity to 0
10366 el.fadeOut();
10367
10368 // custom: fade out from the element's current opacity to 25% over 2 seconds
10369 el.fadeOut({ endOpacity: .25, duration: 2});
10370
10371 // common config options shown with default values
10372 el.fadeOut({
10373     endOpacity: 0, //can be any value between 0 and 1 (e.g. .5)
10374     easing: 'easeOut',
10375     duration: .5
10376     remove: false,
10377     useDisplay: false
10378 });
10379 </code></pre>
10380     * @param {Object} options (optional) Object literal with any of the Fx config options
10381     * @return {Roo.Element} The Element
10382     */
10383     fadeOut : function(o){
10384         var el = this.getFxEl();
10385         o = o || {};
10386         el.queueFx(o, function(){
10387             arguments.callee.anim = this.fxanim({opacity:{to:o.endOpacity || 0}},
10388                 o, null, .5, "easeOut", function(){
10389                 if(this.visibilityMode == Roo.Element.DISPLAY || o.useDisplay){
10390                      this.dom.style.display = "none";
10391                 }else{
10392                      this.dom.style.visibility = "hidden";
10393                 }
10394                 this.clearOpacity();
10395                 el.afterFx(o);
10396             });
10397         });
10398         return this;
10399     },
10400
10401    /**
10402     * Animates the transition of an element's dimensions from a starting height/width
10403     * to an ending height/width.
10404     * Usage:
10405 <pre><code>
10406 // change height and width to 100x100 pixels
10407 el.scale(100, 100);
10408
10409 // common config options shown with default values.  The height and width will default to
10410 // the element's existing values if passed as null.
10411 el.scale(
10412     [element's width],
10413     [element's height], {
10414     easing: 'easeOut',
10415     duration: .35
10416 });
10417 </code></pre>
10418     * @param {Number} width  The new width (pass undefined to keep the original width)
10419     * @param {Number} height  The new height (pass undefined to keep the original height)
10420     * @param {Object} options (optional) Object literal with any of the Fx config options
10421     * @return {Roo.Element} The Element
10422     */
10423     scale : function(w, h, o){
10424         this.shift(Roo.apply({}, o, {
10425             width: w,
10426             height: h
10427         }));
10428         return this;
10429     },
10430
10431    /**
10432     * Animates the transition of any combination of an element's dimensions, xy position and/or opacity.
10433     * Any of these properties not specified in the config object will not be changed.  This effect 
10434     * requires that at least one new dimension, position or opacity setting must be passed in on
10435     * the config object in order for the function to have any effect.
10436     * Usage:
10437 <pre><code>
10438 // slide the element horizontally to x position 200 while changing the height and opacity
10439 el.shift({ x: 200, height: 50, opacity: .8 });
10440
10441 // common config options shown with default values.
10442 el.shift({
10443     width: [element's width],
10444     height: [element's height],
10445     x: [element's x position],
10446     y: [element's y position],
10447     opacity: [element's opacity],
10448     easing: 'easeOut',
10449     duration: .35
10450 });
10451 </code></pre>
10452     * @param {Object} options  Object literal with any of the Fx config options
10453     * @return {Roo.Element} The Element
10454     */
10455     shift : function(o){
10456         var el = this.getFxEl();
10457         o = o || {};
10458         el.queueFx(o, function(){
10459             var a = {}, w = o.width, h = o.height, x = o.x, y = o.y,  op = o.opacity;
10460             if(w !== undefined){
10461                 a.width = {to: this.adjustWidth(w)};
10462             }
10463             if(h !== undefined){
10464                 a.height = {to: this.adjustHeight(h)};
10465             }
10466             if(x !== undefined || y !== undefined){
10467                 a.points = {to: [
10468                     x !== undefined ? x : this.getX(),
10469                     y !== undefined ? y : this.getY()
10470                 ]};
10471             }
10472             if(op !== undefined){
10473                 a.opacity = {to: op};
10474             }
10475             if(o.xy !== undefined){
10476                 a.points = {to: o.xy};
10477             }
10478             arguments.callee.anim = this.fxanim(a,
10479                 o, 'motion', .35, "easeOut", function(){
10480                 el.afterFx(o);
10481             });
10482         });
10483         return this;
10484     },
10485
10486         /**
10487          * Slides the element while fading it out of view.  An anchor point can be optionally passed to set the 
10488          * ending point of the effect.
10489          * Usage:
10490          *<pre><code>
10491 // default: slide the element downward while fading out
10492 el.ghost();
10493
10494 // custom: slide the element out to the right with a 2-second duration
10495 el.ghost('r', { duration: 2 });
10496
10497 // common config options shown with default values
10498 el.ghost('b', {
10499     easing: 'easeOut',
10500     duration: .5
10501     remove: false,
10502     useDisplay: false
10503 });
10504 </code></pre>
10505          * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to bottom: 'b')
10506          * @param {Object} options (optional) Object literal with any of the Fx config options
10507          * @return {Roo.Element} The Element
10508          */
10509     ghost : function(anchor, o){
10510         var el = this.getFxEl();
10511         o = o || {};
10512
10513         el.queueFx(o, function(){
10514             anchor = anchor || "b";
10515
10516             // restore values after effect
10517             var r = this.getFxRestore();
10518             var w = this.getWidth(),
10519                 h = this.getHeight();
10520
10521             var st = this.dom.style;
10522
10523             var after = function(){
10524                 if(o.useDisplay){
10525                     el.setDisplayed(false);
10526                 }else{
10527                     el.hide();
10528                 }
10529
10530                 el.clearOpacity();
10531                 el.setPositioning(r.pos);
10532                 st.width = r.width;
10533                 st.height = r.height;
10534
10535                 el.afterFx(o);
10536             };
10537
10538             var a = {opacity: {to: 0}, points: {}}, pt = a.points;
10539             switch(anchor.toLowerCase()){
10540                 case "t":
10541                     pt.by = [0, -h];
10542                 break;
10543                 case "l":
10544                     pt.by = [-w, 0];
10545                 break;
10546                 case "r":
10547                     pt.by = [w, 0];
10548                 break;
10549                 case "b":
10550                     pt.by = [0, h];
10551                 break;
10552                 case "tl":
10553                     pt.by = [-w, -h];
10554                 break;
10555                 case "bl":
10556                     pt.by = [-w, h];
10557                 break;
10558                 case "br":
10559                     pt.by = [w, h];
10560                 break;
10561                 case "tr":
10562                     pt.by = [w, -h];
10563                 break;
10564             }
10565
10566             arguments.callee.anim = this.fxanim(a,
10567                 o,
10568                 'motion',
10569                 .5,
10570                 "easeOut", after);
10571         });
10572         return this;
10573     },
10574
10575         /**
10576          * Ensures that all effects queued after syncFx is called on the element are
10577          * run concurrently.  This is the opposite of {@link #sequenceFx}.
10578          * @return {Roo.Element} The Element
10579          */
10580     syncFx : function(){
10581         this.fxDefaults = Roo.apply(this.fxDefaults || {}, {
10582             block : false,
10583             concurrent : true,
10584             stopFx : false
10585         });
10586         return this;
10587     },
10588
10589         /**
10590          * Ensures that all effects queued after sequenceFx is called on the element are
10591          * run in sequence.  This is the opposite of {@link #syncFx}.
10592          * @return {Roo.Element} The Element
10593          */
10594     sequenceFx : function(){
10595         this.fxDefaults = Roo.apply(this.fxDefaults || {}, {
10596             block : false,
10597             concurrent : false,
10598             stopFx : false
10599         });
10600         return this;
10601     },
10602
10603         /* @private */
10604     nextFx : function(){
10605         var ef = this.fxQueue[0];
10606         if(ef){
10607             ef.call(this);
10608         }
10609     },
10610
10611         /**
10612          * Returns true if the element has any effects actively running or queued, else returns false.
10613          * @return {Boolean} True if element has active effects, else false
10614          */
10615     hasActiveFx : function(){
10616         return this.fxQueue && this.fxQueue[0];
10617     },
10618
10619         /**
10620          * Stops any running effects and clears the element's internal effects queue if it contains
10621          * any additional effects that haven't started yet.
10622          * @return {Roo.Element} The Element
10623          */
10624     stopFx : function(){
10625         if(this.hasActiveFx()){
10626             var cur = this.fxQueue[0];
10627             if(cur && cur.anim && cur.anim.isAnimated()){
10628                 this.fxQueue = [cur]; // clear out others
10629                 cur.anim.stop(true);
10630             }
10631         }
10632         return this;
10633     },
10634
10635         /* @private */
10636     beforeFx : function(o){
10637         if(this.hasActiveFx() && !o.concurrent){
10638            if(o.stopFx){
10639                this.stopFx();
10640                return true;
10641            }
10642            return false;
10643         }
10644         return true;
10645     },
10646
10647         /**
10648          * Returns true if the element is currently blocking so that no other effect can be queued
10649          * until this effect is finished, else returns false if blocking is not set.  This is commonly
10650          * used to ensure that an effect initiated by a user action runs to completion prior to the
10651          * same effect being restarted (e.g., firing only one effect even if the user clicks several times).
10652          * @return {Boolean} True if blocking, else false
10653          */
10654     hasFxBlock : function(){
10655         var q = this.fxQueue;
10656         return q && q[0] && q[0].block;
10657     },
10658
10659         /* @private */
10660     queueFx : function(o, fn){
10661         if(!this.fxQueue){
10662             this.fxQueue = [];
10663         }
10664         if(!this.hasFxBlock()){
10665             Roo.applyIf(o, this.fxDefaults);
10666             if(!o.concurrent){
10667                 var run = this.beforeFx(o);
10668                 fn.block = o.block;
10669                 this.fxQueue.push(fn);
10670                 if(run){
10671                     this.nextFx();
10672                 }
10673             }else{
10674                 fn.call(this);
10675             }
10676         }
10677         return this;
10678     },
10679
10680         /* @private */
10681     fxWrap : function(pos, o, vis){
10682         var wrap;
10683         if(!o.wrap || !(wrap = Roo.get(o.wrap))){
10684             var wrapXY;
10685             if(o.fixPosition){
10686                 wrapXY = this.getXY();
10687             }
10688             var div = document.createElement("div");
10689             div.style.visibility = vis;
10690             wrap = Roo.get(this.dom.parentNode.insertBefore(div, this.dom));
10691             wrap.setPositioning(pos);
10692             if(wrap.getStyle("position") == "static"){
10693                 wrap.position("relative");
10694             }
10695             this.clearPositioning('auto');
10696             wrap.clip();
10697             wrap.dom.appendChild(this.dom);
10698             if(wrapXY){
10699                 wrap.setXY(wrapXY);
10700             }
10701         }
10702         return wrap;
10703     },
10704
10705         /* @private */
10706     fxUnwrap : function(wrap, pos, o){
10707         this.clearPositioning();
10708         this.setPositioning(pos);
10709         if(!o.wrap){
10710             wrap.dom.parentNode.insertBefore(this.dom, wrap.dom);
10711             wrap.remove();
10712         }
10713     },
10714
10715         /* @private */
10716     getFxRestore : function(){
10717         var st = this.dom.style;
10718         return {pos: this.getPositioning(), width: st.width, height : st.height};
10719     },
10720
10721         /* @private */
10722     afterFx : function(o){
10723         if(o.afterStyle){
10724             this.applyStyles(o.afterStyle);
10725         }
10726         if(o.afterCls){
10727             this.addClass(o.afterCls);
10728         }
10729         if(o.remove === true){
10730             this.remove();
10731         }
10732         Roo.callback(o.callback, o.scope, [this]);
10733         if(!o.concurrent){
10734             this.fxQueue.shift();
10735             this.nextFx();
10736         }
10737     },
10738
10739         /* @private */
10740     getFxEl : function(){ // support for composite element fx
10741         return Roo.get(this.dom);
10742     },
10743
10744         /* @private */
10745     fxanim : function(args, opt, animType, defaultDur, defaultEase, cb){
10746         animType = animType || 'run';
10747         opt = opt || {};
10748         var anim = Roo.lib.Anim[animType](
10749             this.dom, args,
10750             (opt.duration || defaultDur) || .35,
10751             (opt.easing || defaultEase) || 'easeOut',
10752             function(){
10753                 Roo.callback(cb, this);
10754             },
10755             this
10756         );
10757         opt.anim = anim;
10758         return anim;
10759     }
10760 };
10761
10762 // backwords compat
10763 Roo.Fx.resize = Roo.Fx.scale;
10764
10765 //When included, Roo.Fx is automatically applied to Element so that all basic
10766 //effects are available directly via the Element API
10767 Roo.apply(Roo.Element.prototype, Roo.Fx);/*
10768  * Based on:
10769  * Ext JS Library 1.1.1
10770  * Copyright(c) 2006-2007, Ext JS, LLC.
10771  *
10772  * Originally Released Under LGPL - original licence link has changed is not relivant.
10773  *
10774  * Fork - LGPL
10775  * <script type="text/javascript">
10776  */
10777
10778
10779 /**
10780  * @class Roo.CompositeElement
10781  * Standard composite class. Creates a Roo.Element for every element in the collection.
10782  * <br><br>
10783  * <b>NOTE: Although they are not listed, this class supports all of the set/update methods of Roo.Element. All Roo.Element
10784  * actions will be performed on all the elements in this collection.</b>
10785  * <br><br>
10786  * All methods return <i>this</i> and can be chained.
10787  <pre><code>
10788  var els = Roo.select("#some-el div.some-class", true);
10789  // or select directly from an existing element
10790  var el = Roo.get('some-el');
10791  el.select('div.some-class', true);
10792
10793  els.setWidth(100); // all elements become 100 width
10794  els.hide(true); // all elements fade out and hide
10795  // or
10796  els.setWidth(100).hide(true);
10797  </code></pre>
10798  */
10799 Roo.CompositeElement = function(els){
10800     this.elements = [];
10801     this.addElements(els);
10802 };
10803 Roo.CompositeElement.prototype = {
10804     isComposite: true,
10805     addElements : function(els){
10806         if(!els) return this;
10807         if(typeof els == "string"){
10808             els = Roo.Element.selectorFunction(els);
10809         }
10810         var yels = this.elements;
10811         var index = yels.length-1;
10812         for(var i = 0, len = els.length; i < len; i++) {
10813                 yels[++index] = Roo.get(els[i]);
10814         }
10815         return this;
10816     },
10817
10818     /**
10819     * Clears this composite and adds the elements returned by the passed selector.
10820     * @param {String/Array} els A string CSS selector, an array of elements or an element
10821     * @return {CompositeElement} this
10822     */
10823     fill : function(els){
10824         this.elements = [];
10825         this.add(els);
10826         return this;
10827     },
10828
10829     /**
10830     * Filters this composite to only elements that match the passed selector.
10831     * @param {String} selector A string CSS selector
10832     * @return {CompositeElement} this
10833     */
10834     filter : function(selector){
10835         var els = [];
10836         this.each(function(el){
10837             if(el.is(selector)){
10838                 els[els.length] = el.dom;
10839             }
10840         });
10841         this.fill(els);
10842         return this;
10843     },
10844
10845     invoke : function(fn, args){
10846         var els = this.elements;
10847         for(var i = 0, len = els.length; i < len; i++) {
10848                 Roo.Element.prototype[fn].apply(els[i], args);
10849         }
10850         return this;
10851     },
10852     /**
10853     * Adds elements to this composite.
10854     * @param {String/Array} els A string CSS selector, an array of elements or an element
10855     * @return {CompositeElement} this
10856     */
10857     add : function(els){
10858         if(typeof els == "string"){
10859             this.addElements(Roo.Element.selectorFunction(els));
10860         }else if(els.length !== undefined){
10861             this.addElements(els);
10862         }else{
10863             this.addElements([els]);
10864         }
10865         return this;
10866     },
10867     /**
10868     * Calls the passed function passing (el, this, index) for each element in this composite.
10869     * @param {Function} fn The function to call
10870     * @param {Object} scope (optional) The <i>this</i> object (defaults to the element)
10871     * @return {CompositeElement} this
10872     */
10873     each : function(fn, scope){
10874         var els = this.elements;
10875         for(var i = 0, len = els.length; i < len; i++){
10876             if(fn.call(scope || els[i], els[i], this, i) === false) {
10877                 break;
10878             }
10879         }
10880         return this;
10881     },
10882
10883     /**
10884      * Returns the Element object at the specified index
10885      * @param {Number} index
10886      * @return {Roo.Element}
10887      */
10888     item : function(index){
10889         return this.elements[index] || null;
10890     },
10891
10892     /**
10893      * Returns the first Element
10894      * @return {Roo.Element}
10895      */
10896     first : function(){
10897         return this.item(0);
10898     },
10899
10900     /**
10901      * Returns the last Element
10902      * @return {Roo.Element}
10903      */
10904     last : function(){
10905         return this.item(this.elements.length-1);
10906     },
10907
10908     /**
10909      * Returns the number of elements in this composite
10910      * @return Number
10911      */
10912     getCount : function(){
10913         return this.elements.length;
10914     },
10915
10916     /**
10917      * Returns true if this composite contains the passed element
10918      * @return Boolean
10919      */
10920     contains : function(el){
10921         return this.indexOf(el) !== -1;
10922     },
10923
10924     /**
10925      * Returns true if this composite contains the passed element
10926      * @return Boolean
10927      */
10928     indexOf : function(el){
10929         return this.elements.indexOf(Roo.get(el));
10930     },
10931
10932
10933     /**
10934     * Removes the specified element(s).
10935     * @param {Mixed} el The id of an element, the Element itself, the index of the element in this composite
10936     * or an array of any of those.
10937     * @param {Boolean} removeDom (optional) True to also remove the element from the document
10938     * @return {CompositeElement} this
10939     */
10940     removeElement : function(el, removeDom){
10941         if(el instanceof Array){
10942             for(var i = 0, len = el.length; i < len; i++){
10943                 this.removeElement(el[i]);
10944             }
10945             return this;
10946         }
10947         var index = typeof el == 'number' ? el : this.indexOf(el);
10948         if(index !== -1){
10949             if(removeDom){
10950                 var d = this.elements[index];
10951                 if(d.dom){
10952                     d.remove();
10953                 }else{
10954                     d.parentNode.removeChild(d);
10955                 }
10956             }
10957             this.elements.splice(index, 1);
10958         }
10959         return this;
10960     },
10961
10962     /**
10963     * Replaces the specified element with the passed element.
10964     * @param {String/HTMLElement/Element/Number} el The id of an element, the Element itself, the index of the element in this composite
10965     * to replace.
10966     * @param {String/HTMLElement/Element} replacement The id of an element or the Element itself.
10967     * @param {Boolean} domReplace (Optional) True to remove and replace the element in the document too.
10968     * @return {CompositeElement} this
10969     */
10970     replaceElement : function(el, replacement, domReplace){
10971         var index = typeof el == 'number' ? el : this.indexOf(el);
10972         if(index !== -1){
10973             if(domReplace){
10974                 this.elements[index].replaceWith(replacement);
10975             }else{
10976                 this.elements.splice(index, 1, Roo.get(replacement))
10977             }
10978         }
10979         return this;
10980     },
10981
10982     /**
10983      * Removes all elements.
10984      */
10985     clear : function(){
10986         this.elements = [];
10987     }
10988 };
10989 (function(){
10990     Roo.CompositeElement.createCall = function(proto, fnName){
10991         if(!proto[fnName]){
10992             proto[fnName] = function(){
10993                 return this.invoke(fnName, arguments);
10994             };
10995         }
10996     };
10997     for(var fnName in Roo.Element.prototype){
10998         if(typeof Roo.Element.prototype[fnName] == "function"){
10999             Roo.CompositeElement.createCall(Roo.CompositeElement.prototype, fnName);
11000         }
11001     };
11002 })();
11003 /*
11004  * Based on:
11005  * Ext JS Library 1.1.1
11006  * Copyright(c) 2006-2007, Ext JS, LLC.
11007  *
11008  * Originally Released Under LGPL - original licence link has changed is not relivant.
11009  *
11010  * Fork - LGPL
11011  * <script type="text/javascript">
11012  */
11013
11014 /**
11015  * @class Roo.CompositeElementLite
11016  * @extends Roo.CompositeElement
11017  * Flyweight composite class. Reuses the same Roo.Element for element operations.
11018  <pre><code>
11019  var els = Roo.select("#some-el div.some-class");
11020  // or select directly from an existing element
11021  var el = Roo.get('some-el');
11022  el.select('div.some-class');
11023
11024  els.setWidth(100); // all elements become 100 width
11025  els.hide(true); // all elements fade out and hide
11026  // or
11027  els.setWidth(100).hide(true);
11028  </code></pre><br><br>
11029  * <b>NOTE: Although they are not listed, this class supports all of the set/update methods of Roo.Element. All Roo.Element
11030  * actions will be performed on all the elements in this collection.</b>
11031  */
11032 Roo.CompositeElementLite = function(els){
11033     Roo.CompositeElementLite.superclass.constructor.call(this, els);
11034     this.el = new Roo.Element.Flyweight();
11035 };
11036 Roo.extend(Roo.CompositeElementLite, Roo.CompositeElement, {
11037     addElements : function(els){
11038         if(els){
11039             if(els instanceof Array){
11040                 this.elements = this.elements.concat(els);
11041             }else{
11042                 var yels = this.elements;
11043                 var index = yels.length-1;
11044                 for(var i = 0, len = els.length; i < len; i++) {
11045                     yels[++index] = els[i];
11046                 }
11047             }
11048         }
11049         return this;
11050     },
11051     invoke : function(fn, args){
11052         var els = this.elements;
11053         var el = this.el;
11054         for(var i = 0, len = els.length; i < len; i++) {
11055             el.dom = els[i];
11056                 Roo.Element.prototype[fn].apply(el, args);
11057         }
11058         return this;
11059     },
11060     /**
11061      * Returns a flyweight Element of the dom element object at the specified index
11062      * @param {Number} index
11063      * @return {Roo.Element}
11064      */
11065     item : function(index){
11066         if(!this.elements[index]){
11067             return null;
11068         }
11069         this.el.dom = this.elements[index];
11070         return this.el;
11071     },
11072
11073     // fixes scope with flyweight
11074     addListener : function(eventName, handler, scope, opt){
11075         var els = this.elements;
11076         for(var i = 0, len = els.length; i < len; i++) {
11077             Roo.EventManager.on(els[i], eventName, handler, scope || els[i], opt);
11078         }
11079         return this;
11080     },
11081
11082     /**
11083     * Calls the passed function passing (el, this, index) for each element in this composite. <b>The element
11084     * passed is the flyweight (shared) Roo.Element instance, so if you require a
11085     * a reference to the dom node, use el.dom.</b>
11086     * @param {Function} fn The function to call
11087     * @param {Object} scope (optional) The <i>this</i> object (defaults to the element)
11088     * @return {CompositeElement} this
11089     */
11090     each : function(fn, scope){
11091         var els = this.elements;
11092         var el = this.el;
11093         for(var i = 0, len = els.length; i < len; i++){
11094             el.dom = els[i];
11095                 if(fn.call(scope || el, el, this, i) === false){
11096                 break;
11097             }
11098         }
11099         return this;
11100     },
11101
11102     indexOf : function(el){
11103         return this.elements.indexOf(Roo.getDom(el));
11104     },
11105
11106     replaceElement : function(el, replacement, domReplace){
11107         var index = typeof el == 'number' ? el : this.indexOf(el);
11108         if(index !== -1){
11109             replacement = Roo.getDom(replacement);
11110             if(domReplace){
11111                 var d = this.elements[index];
11112                 d.parentNode.insertBefore(replacement, d);
11113                 d.parentNode.removeChild(d);
11114             }
11115             this.elements.splice(index, 1, replacement);
11116         }
11117         return this;
11118     }
11119 });
11120 Roo.CompositeElementLite.prototype.on = Roo.CompositeElementLite.prototype.addListener;
11121
11122 /*
11123  * Based on:
11124  * Ext JS Library 1.1.1
11125  * Copyright(c) 2006-2007, Ext JS, LLC.
11126  *
11127  * Originally Released Under LGPL - original licence link has changed is not relivant.
11128  *
11129  * Fork - LGPL
11130  * <script type="text/javascript">
11131  */
11132
11133  
11134
11135 /**
11136  * @class Roo.data.Connection
11137  * @extends Roo.util.Observable
11138  * The class encapsulates a connection to the page's originating domain, allowing requests to be made
11139  * either to a configured URL, or to a URL specified at request time.<br><br>
11140  * <p>
11141  * Requests made by this class are asynchronous, and will return immediately. No data from
11142  * the server will be available to the statement immediately following the {@link #request} call.
11143  * To process returned data, use a callback in the request options object, or an event listener.</p><br>
11144  * <p>
11145  * Note: If you are doing a file upload, you will not get a normal response object sent back to
11146  * your callback or event handler.  Since the upload is handled via in IFRAME, there is no XMLHttpRequest.
11147  * The response object is created using the innerHTML of the IFRAME's document as the responseText
11148  * property and, if present, the IFRAME's XML document as the responseXML property.</p><br>
11149  * This means that a valid XML or HTML document must be returned. If JSON data is required, it is suggested
11150  * that it be placed either inside a &lt;textarea> in an HTML document and retrieved from the responseText
11151  * using a regex, or inside a CDATA section in an XML document and retrieved from the responseXML using
11152  * standard DOM methods.
11153  * @constructor
11154  * @param {Object} config a configuration object.
11155  */
11156 Roo.data.Connection = function(config){
11157     Roo.apply(this, config);
11158     this.addEvents({
11159         /**
11160          * @event beforerequest
11161          * Fires before a network request is made to retrieve a data object.
11162          * @param {Connection} conn This Connection object.
11163          * @param {Object} options The options config object passed to the {@link #request} method.
11164          */
11165         "beforerequest" : true,
11166         /**
11167          * @event requestcomplete
11168          * Fires if the request was successfully completed.
11169          * @param {Connection} conn This Connection object.
11170          * @param {Object} response The XHR object containing the response data.
11171          * See {@link http://www.w3.org/TR/XMLHttpRequest/} for details.
11172          * @param {Object} options The options config object passed to the {@link #request} method.
11173          */
11174         "requestcomplete" : true,
11175         /**
11176          * @event requestexception
11177          * Fires if an error HTTP status was returned from the server.
11178          * See {@link http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html} for details of HTTP status codes.
11179          * @param {Connection} conn This Connection object.
11180          * @param {Object} response The XHR object containing the response data.
11181          * See {@link http://www.w3.org/TR/XMLHttpRequest/} for details.
11182          * @param {Object} options The options config object passed to the {@link #request} method.
11183          */
11184         "requestexception" : true
11185     });
11186     Roo.data.Connection.superclass.constructor.call(this);
11187 };
11188
11189 Roo.extend(Roo.data.Connection, Roo.util.Observable, {
11190     /**
11191      * @cfg {String} url (Optional) The default URL to be used for requests to the server. (defaults to undefined)
11192      */
11193     /**
11194      * @cfg {Object} extraParams (Optional) An object containing properties which are used as
11195      * extra parameters to each request made by this object. (defaults to undefined)
11196      */
11197     /**
11198      * @cfg {Object} defaultHeaders (Optional) An object containing request headers which are added
11199      *  to each request made by this object. (defaults to undefined)
11200      */
11201     /**
11202      * @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)
11203      */
11204     /**
11205      * @cfg {Number} timeout (Optional) The timeout in milliseconds to be used for requests. (defaults to 30000)
11206      */
11207     timeout : 30000,
11208     /**
11209      * @cfg {Boolean} autoAbort (Optional) Whether this request should abort any pending requests. (defaults to false)
11210      * @type Boolean
11211      */
11212     autoAbort:false,
11213
11214     /**
11215      * @cfg {Boolean} disableCaching (Optional) True to add a unique cache-buster param to GET requests. (defaults to true)
11216      * @type Boolean
11217      */
11218     disableCaching: true,
11219
11220     /**
11221      * Sends an HTTP request to a remote server.
11222      * @param {Object} options An object which may contain the following properties:<ul>
11223      * <li><b>url</b> {String} (Optional) The URL to which to send the request. Defaults to configured URL</li>
11224      * <li><b>params</b> {Object/String/Function} (Optional) An object containing properties which are used as parameters to the
11225      * request, a url encoded string or a function to call to get either.</li>
11226      * <li><b>method</b> {String} (Optional) The HTTP method to use for the request. Defaults to the configured method, or
11227      * if no method was configured, "GET" if no parameters are being sent, and "POST" if parameters are being sent.</li>
11228      * <li><b>callback</b> {Function} (Optional) The function to be called upon receipt of the HTTP response.
11229      * The callback is called regardless of success or failure and is passed the following parameters:<ul>
11230      * <li>options {Object} The parameter to the request call.</li>
11231      * <li>success {Boolean} True if the request succeeded.</li>
11232      * <li>response {Object} The XMLHttpRequest object containing the response data.</li>
11233      * </ul></li>
11234      * <li><b>success</b> {Function} (Optional) The function to be called upon success of the request.
11235      * The callback is passed the following parameters:<ul>
11236      * <li>response {Object} The XMLHttpRequest object containing the response data.</li>
11237      * <li>options {Object} The parameter to the request call.</li>
11238      * </ul></li>
11239      * <li><b>failure</b> {Function} (Optional) The function to be called upon failure of the request.
11240      * The callback is passed the following parameters:<ul>
11241      * <li>response {Object} The XMLHttpRequest object containing the response data.</li>
11242      * <li>options {Object} The parameter to the request call.</li>
11243      * </ul></li>
11244      * <li><b>scope</b> {Object} (Optional) The scope in which to execute the callbacks: The "this" object
11245      * for the callback function. Defaults to the browser window.</li>
11246      * <li><b>form</b> {Object/String} (Optional) A form object or id to pull parameters from.</li>
11247      * <li><b>isUpload</b> {Boolean} (Optional) True if the form object is a file upload (will usually be automatically detected).</li>
11248      * <li><b>headers</b> {Object} (Optional) Request headers to set for the request.</li>
11249      * <li><b>xmlData</b> {Object} (Optional) XML document to use for the post. Note: This will be used instead of
11250      * params for the post data. Any params will be appended to the URL.</li>
11251      * <li><b>disableCaching</b> {Boolean} (Optional) True to add a unique cache-buster param to GET requests.</li>
11252      * </ul>
11253      * @return {Number} transactionId
11254      */
11255     request : function(o){
11256         if(this.fireEvent("beforerequest", this, o) !== false){
11257             var p = o.params;
11258
11259             if(typeof p == "function"){
11260                 p = p.call(o.scope||window, o);
11261             }
11262             if(typeof p == "object"){
11263                 p = Roo.urlEncode(o.params);
11264             }
11265             if(this.extraParams){
11266                 var extras = Roo.urlEncode(this.extraParams);
11267                 p = p ? (p + '&' + extras) : extras;
11268             }
11269
11270             var url = o.url || this.url;
11271             if(typeof url == 'function'){
11272                 url = url.call(o.scope||window, o);
11273             }
11274
11275             if(o.form){
11276                 var form = Roo.getDom(o.form);
11277                 url = url || form.action;
11278
11279                 var enctype = form.getAttribute("enctype");
11280                 if(o.isUpload || (enctype && enctype.toLowerCase() == 'multipart/form-data')){
11281                     return this.doFormUpload(o, p, url);
11282                 }
11283                 var f = Roo.lib.Ajax.serializeForm(form);
11284                 p = p ? (p + '&' + f) : f;
11285             }
11286
11287             var hs = o.headers;
11288             if(this.defaultHeaders){
11289                 hs = Roo.apply(hs || {}, this.defaultHeaders);
11290                 if(!o.headers){
11291                     o.headers = hs;
11292                 }
11293             }
11294
11295             var cb = {
11296                 success: this.handleResponse,
11297                 failure: this.handleFailure,
11298                 scope: this,
11299                 argument: {options: o},
11300                 timeout : this.timeout
11301             };
11302
11303             var method = o.method||this.method||(p ? "POST" : "GET");
11304
11305             if(method == 'GET' && (this.disableCaching && o.disableCaching !== false) || o.disableCaching === true){
11306                 url += (url.indexOf('?') != -1 ? '&' : '?') + '_dc=' + (new Date().getTime());
11307             }
11308
11309             if(typeof o.autoAbort == 'boolean'){ // options gets top priority
11310                 if(o.autoAbort){
11311                     this.abort();
11312                 }
11313             }else if(this.autoAbort !== false){
11314                 this.abort();
11315             }
11316
11317             if((method == 'GET' && p) || o.xmlData){
11318                 url += (url.indexOf('?') != -1 ? '&' : '?') + p;
11319                 p = '';
11320             }
11321             this.transId = Roo.lib.Ajax.request(method, url, cb, p, o);
11322             return this.transId;
11323         }else{
11324             Roo.callback(o.callback, o.scope, [o, null, null]);
11325             return null;
11326         }
11327     },
11328
11329     /**
11330      * Determine whether this object has a request outstanding.
11331      * @param {Number} transactionId (Optional) defaults to the last transaction
11332      * @return {Boolean} True if there is an outstanding request.
11333      */
11334     isLoading : function(transId){
11335         if(transId){
11336             return Roo.lib.Ajax.isCallInProgress(transId);
11337         }else{
11338             return this.transId ? true : false;
11339         }
11340     },
11341
11342     /**
11343      * Aborts any outstanding request.
11344      * @param {Number} transactionId (Optional) defaults to the last transaction
11345      */
11346     abort : function(transId){
11347         if(transId || this.isLoading()){
11348             Roo.lib.Ajax.abort(transId || this.transId);
11349         }
11350     },
11351
11352     // private
11353     handleResponse : function(response){
11354         this.transId = false;
11355         var options = response.argument.options;
11356         response.argument = options ? options.argument : null;
11357         this.fireEvent("requestcomplete", this, response, options);
11358         Roo.callback(options.success, options.scope, [response, options]);
11359         Roo.callback(options.callback, options.scope, [options, true, response]);
11360     },
11361
11362     // private
11363     handleFailure : function(response, e){
11364         this.transId = false;
11365         var options = response.argument.options;
11366         response.argument = options ? options.argument : null;
11367         this.fireEvent("requestexception", this, response, options, e);
11368         Roo.callback(options.failure, options.scope, [response, options]);
11369         Roo.callback(options.callback, options.scope, [options, false, response]);
11370     },
11371
11372     // private
11373     doFormUpload : function(o, ps, url){
11374         var id = Roo.id();
11375         var frame = document.createElement('iframe');
11376         frame.id = id;
11377         frame.name = id;
11378         frame.className = 'x-hidden';
11379         if(Roo.isIE){
11380             frame.src = Roo.SSL_SECURE_URL;
11381         }
11382         document.body.appendChild(frame);
11383
11384         if(Roo.isIE){
11385            document.frames[id].name = id;
11386         }
11387
11388         var form = Roo.getDom(o.form);
11389         form.target = id;
11390         form.method = 'POST';
11391         form.enctype = form.encoding = 'multipart/form-data';
11392         if(url){
11393             form.action = url;
11394         }
11395
11396         var hiddens, hd;
11397         if(ps){ // add dynamic params
11398             hiddens = [];
11399             ps = Roo.urlDecode(ps, false);
11400             for(var k in ps){
11401                 if(ps.hasOwnProperty(k)){
11402                     hd = document.createElement('input');
11403                     hd.type = 'hidden';
11404                     hd.name = k;
11405                     hd.value = ps[k];
11406                     form.appendChild(hd);
11407                     hiddens.push(hd);
11408                 }
11409             }
11410         }
11411
11412         function cb(){
11413             var r = {  // bogus response object
11414                 responseText : '',
11415                 responseXML : null
11416             };
11417
11418             r.argument = o ? o.argument : null;
11419
11420             try { //
11421                 var doc;
11422                 if(Roo.isIE){
11423                     doc = frame.contentWindow.document;
11424                 }else {
11425                     doc = (frame.contentDocument || window.frames[id].document);
11426                 }
11427                 if(doc && doc.body){
11428                     r.responseText = doc.body.innerHTML;
11429                 }
11430                 if(doc && doc.XMLDocument){
11431                     r.responseXML = doc.XMLDocument;
11432                 }else {
11433                     r.responseXML = doc;
11434                 }
11435             }
11436             catch(e) {
11437                 // ignore
11438             }
11439
11440             Roo.EventManager.removeListener(frame, 'load', cb, this);
11441
11442             this.fireEvent("requestcomplete", this, r, o);
11443             Roo.callback(o.success, o.scope, [r, o]);
11444             Roo.callback(o.callback, o.scope, [o, true, r]);
11445
11446             setTimeout(function(){document.body.removeChild(frame);}, 100);
11447         }
11448
11449         Roo.EventManager.on(frame, 'load', cb, this);
11450         form.submit();
11451
11452         if(hiddens){ // remove dynamic params
11453             for(var i = 0, len = hiddens.length; i < len; i++){
11454                 form.removeChild(hiddens[i]);
11455             }
11456         }
11457     }
11458 });
11459
11460 /**
11461  * @class Roo.Ajax
11462  * @extends Roo.data.Connection
11463  * Global Ajax request class.
11464  *
11465  * @singleton
11466  */
11467 Roo.Ajax = new Roo.data.Connection({
11468     // fix up the docs
11469    /**
11470      * @cfg {String} url @hide
11471      */
11472     /**
11473      * @cfg {Object} extraParams @hide
11474      */
11475     /**
11476      * @cfg {Object} defaultHeaders @hide
11477      */
11478     /**
11479      * @cfg {String} method (Optional) @hide
11480      */
11481     /**
11482      * @cfg {Number} timeout (Optional) @hide
11483      */
11484     /**
11485      * @cfg {Boolean} autoAbort (Optional) @hide
11486      */
11487
11488     /**
11489      * @cfg {Boolean} disableCaching (Optional) @hide
11490      */
11491
11492     /**
11493      * @property  disableCaching
11494      * True to add a unique cache-buster param to GET requests. (defaults to true)
11495      * @type Boolean
11496      */
11497     /**
11498      * @property  url
11499      * The default URL to be used for requests to the server. (defaults to undefined)
11500      * @type String
11501      */
11502     /**
11503      * @property  extraParams
11504      * An object containing properties which are used as
11505      * extra parameters to each request made by this object. (defaults to undefined)
11506      * @type Object
11507      */
11508     /**
11509      * @property  defaultHeaders
11510      * An object containing request headers which are added to each request made by this object. (defaults to undefined)
11511      * @type Object
11512      */
11513     /**
11514      * @property  method
11515      * The default HTTP method to be used for requests. (defaults to undefined; if not set but parms are present will use POST, otherwise GET)
11516      * @type String
11517      */
11518     /**
11519      * @property  timeout
11520      * The timeout in milliseconds to be used for requests. (defaults to 30000)
11521      * @type Number
11522      */
11523
11524     /**
11525      * @property  autoAbort
11526      * Whether a new request should abort any pending requests. (defaults to false)
11527      * @type Boolean
11528      */
11529     autoAbort : false,
11530
11531     /**
11532      * Serialize the passed form into a url encoded string
11533      * @param {String/HTMLElement} form
11534      * @return {String}
11535      */
11536     serializeForm : function(form){
11537         return Roo.lib.Ajax.serializeForm(form);
11538     }
11539 });/*
11540  * Based on:
11541  * Ext JS Library 1.1.1
11542  * Copyright(c) 2006-2007, Ext JS, LLC.
11543  *
11544  * Originally Released Under LGPL - original licence link has changed is not relivant.
11545  *
11546  * Fork - LGPL
11547  * <script type="text/javascript">
11548  */
11549  
11550 /**
11551  * @class Roo.Ajax
11552  * @extends Roo.data.Connection
11553  * Global Ajax request class.
11554  *
11555  * @instanceOf  Roo.data.Connection
11556  */
11557 Roo.Ajax = new Roo.data.Connection({
11558     // fix up the docs
11559     
11560     /**
11561      * fix up scoping
11562      * @scope Roo.Ajax
11563      */
11564     
11565    /**
11566      * @cfg {String} url @hide
11567      */
11568     /**
11569      * @cfg {Object} extraParams @hide
11570      */
11571     /**
11572      * @cfg {Object} defaultHeaders @hide
11573      */
11574     /**
11575      * @cfg {String} method (Optional) @hide
11576      */
11577     /**
11578      * @cfg {Number} timeout (Optional) @hide
11579      */
11580     /**
11581      * @cfg {Boolean} autoAbort (Optional) @hide
11582      */
11583
11584     /**
11585      * @cfg {Boolean} disableCaching (Optional) @hide
11586      */
11587
11588     /**
11589      * @property  disableCaching
11590      * True to add a unique cache-buster param to GET requests. (defaults to true)
11591      * @type Boolean
11592      */
11593     /**
11594      * @property  url
11595      * The default URL to be used for requests to the server. (defaults to undefined)
11596      * @type String
11597      */
11598     /**
11599      * @property  extraParams
11600      * An object containing properties which are used as
11601      * extra parameters to each request made by this object. (defaults to undefined)
11602      * @type Object
11603      */
11604     /**
11605      * @property  defaultHeaders
11606      * An object containing request headers which are added to each request made by this object. (defaults to undefined)
11607      * @type Object
11608      */
11609     /**
11610      * @property  method
11611      * The default HTTP method to be used for requests. (defaults to undefined; if not set but parms are present will use POST, otherwise GET)
11612      * @type String
11613      */
11614     /**
11615      * @property  timeout
11616      * The timeout in milliseconds to be used for requests. (defaults to 30000)
11617      * @type Number
11618      */
11619
11620     /**
11621      * @property  autoAbort
11622      * Whether a new request should abort any pending requests. (defaults to false)
11623      * @type Boolean
11624      */
11625     autoAbort : false,
11626
11627     /**
11628      * Serialize the passed form into a url encoded string
11629      * @param {String/HTMLElement} form
11630      * @return {String}
11631      */
11632     serializeForm : function(form){
11633         return Roo.lib.Ajax.serializeForm(form);
11634     }
11635 });/*
11636  * Based on:
11637  * Ext JS Library 1.1.1
11638  * Copyright(c) 2006-2007, Ext JS, LLC.
11639  *
11640  * Originally Released Under LGPL - original licence link has changed is not relivant.
11641  *
11642  * Fork - LGPL
11643  * <script type="text/javascript">
11644  */
11645
11646  
11647 /**
11648  * @class Roo.UpdateManager
11649  * @extends Roo.util.Observable
11650  * Provides AJAX-style update for Element object.<br><br>
11651  * Usage:<br>
11652  * <pre><code>
11653  * // Get it from a Roo.Element object
11654  * var el = Roo.get("foo");
11655  * var mgr = el.getUpdateManager();
11656  * mgr.update("http://myserver.com/index.php", "param1=1&amp;param2=2");
11657  * ...
11658  * mgr.formUpdate("myFormId", "http://myserver.com/index.php");
11659  * <br>
11660  * // or directly (returns the same UpdateManager instance)
11661  * var mgr = new Roo.UpdateManager("myElementId");
11662  * mgr.startAutoRefresh(60, "http://myserver.com/index.php");
11663  * mgr.on("update", myFcnNeedsToKnow);
11664  * <br>
11665    // short handed call directly from the element object
11666    Roo.get("foo").load({
11667         url: "bar.php",
11668         scripts:true,
11669         params: "for=bar",
11670         text: "Loading Foo..."
11671    });
11672  * </code></pre>
11673  * @constructor
11674  * Create new UpdateManager directly.
11675  * @param {String/HTMLElement/Roo.Element} el The element to update
11676  * @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).
11677  */
11678 Roo.UpdateManager = function(el, forceNew){
11679     el = Roo.get(el);
11680     if(!forceNew && el.updateManager){
11681         return el.updateManager;
11682     }
11683     /**
11684      * The Element object
11685      * @type Roo.Element
11686      */
11687     this.el = el;
11688     /**
11689      * Cached url to use for refreshes. Overwritten every time update() is called unless "discardUrl" param is set to true.
11690      * @type String
11691      */
11692     this.defaultUrl = null;
11693
11694     this.addEvents({
11695         /**
11696          * @event beforeupdate
11697          * Fired before an update is made, return false from your handler and the update is cancelled.
11698          * @param {Roo.Element} el
11699          * @param {String/Object/Function} url
11700          * @param {String/Object} params
11701          */
11702         "beforeupdate": true,
11703         /**
11704          * @event update
11705          * Fired after successful update is made.
11706          * @param {Roo.Element} el
11707          * @param {Object} oResponseObject The response Object
11708          */
11709         "update": true,
11710         /**
11711          * @event failure
11712          * Fired on update failure.
11713          * @param {Roo.Element} el
11714          * @param {Object} oResponseObject The response Object
11715          */
11716         "failure": true
11717     });
11718     var d = Roo.UpdateManager.defaults;
11719     /**
11720      * Blank page URL to use with SSL file uploads (Defaults to Roo.UpdateManager.defaults.sslBlankUrl or "about:blank").
11721      * @type String
11722      */
11723     this.sslBlankUrl = d.sslBlankUrl;
11724     /**
11725      * Whether to append unique parameter on get request to disable caching (Defaults to Roo.UpdateManager.defaults.disableCaching or false).
11726      * @type Boolean
11727      */
11728     this.disableCaching = d.disableCaching;
11729     /**
11730      * Text for loading indicator (Defaults to Roo.UpdateManager.defaults.indicatorText or '&lt;div class="loading-indicator"&gt;Loading...&lt;/div&gt;').
11731      * @type String
11732      */
11733     this.indicatorText = d.indicatorText;
11734     /**
11735      * Whether to show indicatorText when loading (Defaults to Roo.UpdateManager.defaults.showLoadIndicator or true).
11736      * @type String
11737      */
11738     this.showLoadIndicator = d.showLoadIndicator;
11739     /**
11740      * Timeout for requests or form posts in seconds (Defaults to Roo.UpdateManager.defaults.timeout or 30 seconds).
11741      * @type Number
11742      */
11743     this.timeout = d.timeout;
11744
11745     /**
11746      * True to process scripts in the output (Defaults to Roo.UpdateManager.defaults.loadScripts (false)).
11747      * @type Boolean
11748      */
11749     this.loadScripts = d.loadScripts;
11750
11751     /**
11752      * Transaction object of current executing transaction
11753      */
11754     this.transaction = null;
11755
11756     /**
11757      * @private
11758      */
11759     this.autoRefreshProcId = null;
11760     /**
11761      * Delegate for refresh() prebound to "this", use myUpdater.refreshDelegate.createCallback(arg1, arg2) to bind arguments
11762      * @type Function
11763      */
11764     this.refreshDelegate = this.refresh.createDelegate(this);
11765     /**
11766      * Delegate for update() prebound to "this", use myUpdater.updateDelegate.createCallback(arg1, arg2) to bind arguments
11767      * @type Function
11768      */
11769     this.updateDelegate = this.update.createDelegate(this);
11770     /**
11771      * Delegate for formUpdate() prebound to "this", use myUpdater.formUpdateDelegate.createCallback(arg1, arg2) to bind arguments
11772      * @type Function
11773      */
11774     this.formUpdateDelegate = this.formUpdate.createDelegate(this);
11775     /**
11776      * @private
11777      */
11778     this.successDelegate = this.processSuccess.createDelegate(this);
11779     /**
11780      * @private
11781      */
11782     this.failureDelegate = this.processFailure.createDelegate(this);
11783
11784     if(!this.renderer){
11785      /**
11786       * The renderer for this UpdateManager. Defaults to {@link Roo.UpdateManager.BasicRenderer}.
11787       */
11788     this.renderer = new Roo.UpdateManager.BasicRenderer();
11789     }
11790     
11791     Roo.UpdateManager.superclass.constructor.call(this);
11792 };
11793
11794 Roo.extend(Roo.UpdateManager, Roo.util.Observable, {
11795     /**
11796      * Get the Element this UpdateManager is bound to
11797      * @return {Roo.Element} The element
11798      */
11799     getEl : function(){
11800         return this.el;
11801     },
11802     /**
11803      * Performs an async request, updating this element with the response. If params are specified it uses POST, otherwise it uses GET.
11804      * @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:
11805 <pre><code>
11806 um.update({<br/>
11807     url: "your-url.php",<br/>
11808     params: {param1: "foo", param2: "bar"}, // or a URL encoded string<br/>
11809     callback: yourFunction,<br/>
11810     scope: yourObject, //(optional scope)  <br/>
11811     discardUrl: false, <br/>
11812     nocache: false,<br/>
11813     text: "Loading...",<br/>
11814     timeout: 30,<br/>
11815     scripts: false<br/>
11816 });
11817 </code></pre>
11818      * The only required property is url. The optional properties nocache, text and scripts
11819      * are shorthand for disableCaching, indicatorText and loadScripts and are used to set their associated property on this UpdateManager instance.
11820      * @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}
11821      * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess, oResponse)
11822      * @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.
11823      */
11824     update : function(url, params, callback, discardUrl){
11825         if(this.fireEvent("beforeupdate", this.el, url, params) !== false){
11826             var method = this.method, cfg;
11827             if(typeof url == "object"){ // must be config object
11828                 cfg = url;
11829                 url = cfg.url;
11830                 params = params || cfg.params;
11831                 callback = callback || cfg.callback;
11832                 discardUrl = discardUrl || cfg.discardUrl;
11833                 if(callback && cfg.scope){
11834                     callback = callback.createDelegate(cfg.scope);
11835                 }
11836                 if(typeof cfg.method != "undefined"){method = cfg.method;};
11837                 if(typeof cfg.nocache != "undefined"){this.disableCaching = cfg.nocache;};
11838                 if(typeof cfg.text != "undefined"){this.indicatorText = '<div class="loading-indicator">'+cfg.text+"</div>";};
11839                 if(typeof cfg.scripts != "undefined"){this.loadScripts = cfg.scripts;};
11840                 if(typeof cfg.timeout != "undefined"){this.timeout = cfg.timeout;};
11841             }
11842             this.showLoading();
11843             if(!discardUrl){
11844                 this.defaultUrl = url;
11845             }
11846             if(typeof url == "function"){
11847                 url = url.call(this);
11848             }
11849
11850             method = method || (params ? "POST" : "GET");
11851             if(method == "GET"){
11852                 url = this.prepareUrl(url);
11853             }
11854
11855             var o = Roo.apply(cfg ||{}, {
11856                 url : url,
11857                 params: params,
11858                 success: this.successDelegate,
11859                 failure: this.failureDelegate,
11860                 callback: undefined,
11861                 timeout: (this.timeout*1000),
11862                 argument: {"url": url, "form": null, "callback": callback, "params": params}
11863             });
11864
11865             this.transaction = Roo.Ajax.request(o);
11866         }
11867     },
11868
11869     /**
11870      * 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.
11871      * Uses this.sslBlankUrl for SSL file uploads to prevent IE security warning.
11872      * @param {String/HTMLElement} form The form Id or form element
11873      * @param {String} url (optional) The url to pass the form to. If omitted the action attribute on the form will be used.
11874      * @param {Boolean} reset (optional) Whether to try to reset the form after the update
11875      * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess, oResponse)
11876      */
11877     formUpdate : function(form, url, reset, callback){
11878         if(this.fireEvent("beforeupdate", this.el, form, url) !== false){
11879             if(typeof url == "function"){
11880                 url = url.call(this);
11881             }
11882             form = Roo.getDom(form);
11883             this.transaction = Roo.Ajax.request({
11884                 form: form,
11885                 url:url,
11886                 success: this.successDelegate,
11887                 failure: this.failureDelegate,
11888                 timeout: (this.timeout*1000),
11889                 argument: {"url": url, "form": form, "callback": callback, "reset": reset}
11890             });
11891             this.showLoading.defer(1, this);
11892         }
11893     },
11894
11895     /**
11896      * Refresh the element with the last used url or defaultUrl. If there is no url, it returns immediately
11897      * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
11898      */
11899     refresh : function(callback){
11900         if(this.defaultUrl == null){
11901             return;
11902         }
11903         this.update(this.defaultUrl, null, callback, true);
11904     },
11905
11906     /**
11907      * Set this element to auto refresh.
11908      * @param {Number} interval How often to update (in seconds).
11909      * @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)
11910      * @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}
11911      * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
11912      * @param {Boolean} refreshNow (optional) Whether to execute the refresh now, or wait the interval
11913      */
11914     startAutoRefresh : function(interval, url, params, callback, refreshNow){
11915         if(refreshNow){
11916             this.update(url || this.defaultUrl, params, callback, true);
11917         }
11918         if(this.autoRefreshProcId){
11919             clearInterval(this.autoRefreshProcId);
11920         }
11921         this.autoRefreshProcId = setInterval(this.update.createDelegate(this, [url || this.defaultUrl, params, callback, true]), interval*1000);
11922     },
11923
11924     /**
11925      * Stop auto refresh on this element.
11926      */
11927      stopAutoRefresh : function(){
11928         if(this.autoRefreshProcId){
11929             clearInterval(this.autoRefreshProcId);
11930             delete this.autoRefreshProcId;
11931         }
11932     },
11933
11934     isAutoRefreshing : function(){
11935        return this.autoRefreshProcId ? true : false;
11936     },
11937     /**
11938      * Called to update the element to "Loading" state. Override to perform custom action.
11939      */
11940     showLoading : function(){
11941         if(this.showLoadIndicator){
11942             this.el.update(this.indicatorText);
11943         }
11944     },
11945
11946     /**
11947      * Adds unique parameter to query string if disableCaching = true
11948      * @private
11949      */
11950     prepareUrl : function(url){
11951         if(this.disableCaching){
11952             var append = "_dc=" + (new Date().getTime());
11953             if(url.indexOf("?") !== -1){
11954                 url += "&" + append;
11955             }else{
11956                 url += "?" + append;
11957             }
11958         }
11959         return url;
11960     },
11961
11962     /**
11963      * @private
11964      */
11965     processSuccess : function(response){
11966         this.transaction = null;
11967         if(response.argument.form && response.argument.reset){
11968             try{ // put in try/catch since some older FF releases had problems with this
11969                 response.argument.form.reset();
11970             }catch(e){}
11971         }
11972         if(this.loadScripts){
11973             this.renderer.render(this.el, response, this,
11974                 this.updateComplete.createDelegate(this, [response]));
11975         }else{
11976             this.renderer.render(this.el, response, this);
11977             this.updateComplete(response);
11978         }
11979     },
11980
11981     updateComplete : function(response){
11982         this.fireEvent("update", this.el, response);
11983         if(typeof response.argument.callback == "function"){
11984             response.argument.callback(this.el, true, response);
11985         }
11986     },
11987
11988     /**
11989      * @private
11990      */
11991     processFailure : function(response){
11992         this.transaction = null;
11993         this.fireEvent("failure", this.el, response);
11994         if(typeof response.argument.callback == "function"){
11995             response.argument.callback(this.el, false, response);
11996         }
11997     },
11998
11999     /**
12000      * Set the content renderer for this UpdateManager. See {@link Roo.UpdateManager.BasicRenderer#render} for more details.
12001      * @param {Object} renderer The object implementing the render() method
12002      */
12003     setRenderer : function(renderer){
12004         this.renderer = renderer;
12005     },
12006
12007     getRenderer : function(){
12008        return this.renderer;
12009     },
12010
12011     /**
12012      * Set the defaultUrl used for updates
12013      * @param {String/Function} defaultUrl The url or a function to call to get the url
12014      */
12015     setDefaultUrl : function(defaultUrl){
12016         this.defaultUrl = defaultUrl;
12017     },
12018
12019     /**
12020      * Aborts the executing transaction
12021      */
12022     abort : function(){
12023         if(this.transaction){
12024             Roo.Ajax.abort(this.transaction);
12025         }
12026     },
12027
12028     /**
12029      * Returns true if an update is in progress
12030      * @return {Boolean}
12031      */
12032     isUpdating : function(){
12033         if(this.transaction){
12034             return Roo.Ajax.isLoading(this.transaction);
12035         }
12036         return false;
12037     }
12038 });
12039
12040 /**
12041  * @class Roo.UpdateManager.defaults
12042  * @static (not really - but it helps the doc tool)
12043  * The defaults collection enables customizing the default properties of UpdateManager
12044  */
12045    Roo.UpdateManager.defaults = {
12046        /**
12047          * Timeout for requests or form posts in seconds (Defaults 30 seconds).
12048          * @type Number
12049          */
12050          timeout : 30,
12051
12052          /**
12053          * True to process scripts by default (Defaults to false).
12054          * @type Boolean
12055          */
12056         loadScripts : false,
12057
12058         /**
12059         * Blank page URL to use with SSL file uploads (Defaults to "javascript:false").
12060         * @type String
12061         */
12062         sslBlankUrl : (Roo.SSL_SECURE_URL || "javascript:false"),
12063         /**
12064          * Whether to append unique parameter on get request to disable caching (Defaults to false).
12065          * @type Boolean
12066          */
12067         disableCaching : false,
12068         /**
12069          * Whether to show indicatorText when loading (Defaults to true).
12070          * @type Boolean
12071          */
12072         showLoadIndicator : true,
12073         /**
12074          * Text for loading indicator (Defaults to '&lt;div class="loading-indicator"&gt;Loading...&lt;/div&gt;').
12075          * @type String
12076          */
12077         indicatorText : '<div class="loading-indicator">Loading...</div>'
12078    };
12079
12080 /**
12081  * Static convenience method. This method is deprecated in favor of el.load({url:'foo.php', ...}).
12082  *Usage:
12083  * <pre><code>Roo.UpdateManager.updateElement("my-div", "stuff.php");</code></pre>
12084  * @param {String/HTMLElement/Roo.Element} el The element to update
12085  * @param {String} url The url
12086  * @param {String/Object} params (optional) Url encoded param string or an object of name/value pairs
12087  * @param {Object} options (optional) A config object with any of the UpdateManager properties you want to set - for example: {disableCaching:true, indicatorText: "Loading data..."}
12088  * @static
12089  * @deprecated
12090  * @member Roo.UpdateManager
12091  */
12092 Roo.UpdateManager.updateElement = function(el, url, params, options){
12093     var um = Roo.get(el, true).getUpdateManager();
12094     Roo.apply(um, options);
12095     um.update(url, params, options ? options.callback : null);
12096 };
12097 // alias for backwards compat
12098 Roo.UpdateManager.update = Roo.UpdateManager.updateElement;
12099 /**
12100  * @class Roo.UpdateManager.BasicRenderer
12101  * Default Content renderer. Updates the elements innerHTML with the responseText.
12102  */
12103 Roo.UpdateManager.BasicRenderer = function(){};
12104
12105 Roo.UpdateManager.BasicRenderer.prototype = {
12106     /**
12107      * This is called when the transaction is completed and it's time to update the element - The BasicRenderer
12108      * updates the elements innerHTML with the responseText - To perform a custom render (i.e. XML or JSON processing),
12109      * create an object with a "render(el, response)" method and pass it to setRenderer on the UpdateManager.
12110      * @param {Roo.Element} el The element being rendered
12111      * @param {Object} response The YUI Connect response object
12112      * @param {UpdateManager} updateManager The calling update manager
12113      * @param {Function} callback A callback that will need to be called if loadScripts is true on the UpdateManager
12114      */
12115      render : function(el, response, updateManager, callback){
12116         el.update(response.responseText, updateManager.loadScripts, callback);
12117     }
12118 };
12119 /*
12120  * Based on:
12121  * Ext JS Library 1.1.1
12122  * Copyright(c) 2006-2007, Ext JS, LLC.
12123  *
12124  * Originally Released Under LGPL - original licence link has changed is not relivant.
12125  *
12126  * Fork - LGPL
12127  * <script type="text/javascript">
12128  */
12129
12130 /**
12131  * @class Roo.util.DelayedTask
12132  * Provides a convenient method of performing setTimeout where a new
12133  * timeout cancels the old timeout. An example would be performing validation on a keypress.
12134  * You can use this class to buffer
12135  * the keypress events for a certain number of milliseconds, and perform only if they stop
12136  * for that amount of time.
12137  * @constructor The parameters to this constructor serve as defaults and are not required.
12138  * @param {Function} fn (optional) The default function to timeout
12139  * @param {Object} scope (optional) The default scope of that timeout
12140  * @param {Array} args (optional) The default Array of arguments
12141  */
12142 Roo.util.DelayedTask = function(fn, scope, args){
12143     var id = null, d, t;
12144
12145     var call = function(){
12146         var now = new Date().getTime();
12147         if(now - t >= d){
12148             clearInterval(id);
12149             id = null;
12150             fn.apply(scope, args || []);
12151         }
12152     };
12153     /**
12154      * Cancels any pending timeout and queues a new one
12155      * @param {Number} delay The milliseconds to delay
12156      * @param {Function} newFn (optional) Overrides function passed to constructor
12157      * @param {Object} newScope (optional) Overrides scope passed to constructor
12158      * @param {Array} newArgs (optional) Overrides args passed to constructor
12159      */
12160     this.delay = function(delay, newFn, newScope, newArgs){
12161         if(id && delay != d){
12162             this.cancel();
12163         }
12164         d = delay;
12165         t = new Date().getTime();
12166         fn = newFn || fn;
12167         scope = newScope || scope;
12168         args = newArgs || args;
12169         if(!id){
12170             id = setInterval(call, d);
12171         }
12172     };
12173
12174     /**
12175      * Cancel the last queued timeout
12176      */
12177     this.cancel = function(){
12178         if(id){
12179             clearInterval(id);
12180             id = null;
12181         }
12182     };
12183 };/*
12184  * Based on:
12185  * Ext JS Library 1.1.1
12186  * Copyright(c) 2006-2007, Ext JS, LLC.
12187  *
12188  * Originally Released Under LGPL - original licence link has changed is not relivant.
12189  *
12190  * Fork - LGPL
12191  * <script type="text/javascript">
12192  */
12193  
12194  
12195 Roo.util.TaskRunner = function(interval){
12196     interval = interval || 10;
12197     var tasks = [], removeQueue = [];
12198     var id = 0;
12199     var running = false;
12200
12201     var stopThread = function(){
12202         running = false;
12203         clearInterval(id);
12204         id = 0;
12205     };
12206
12207     var startThread = function(){
12208         if(!running){
12209             running = true;
12210             id = setInterval(runTasks, interval);
12211         }
12212     };
12213
12214     var removeTask = function(task){
12215         removeQueue.push(task);
12216         if(task.onStop){
12217             task.onStop();
12218         }
12219     };
12220
12221     var runTasks = function(){
12222         if(removeQueue.length > 0){
12223             for(var i = 0, len = removeQueue.length; i < len; i++){
12224                 tasks.remove(removeQueue[i]);
12225             }
12226             removeQueue = [];
12227             if(tasks.length < 1){
12228                 stopThread();
12229                 return;
12230             }
12231         }
12232         var now = new Date().getTime();
12233         for(var i = 0, len = tasks.length; i < len; ++i){
12234             var t = tasks[i];
12235             var itime = now - t.taskRunTime;
12236             if(t.interval <= itime){
12237                 var rt = t.run.apply(t.scope || t, t.args || [++t.taskRunCount]);
12238                 t.taskRunTime = now;
12239                 if(rt === false || t.taskRunCount === t.repeat){
12240                     removeTask(t);
12241                     return;
12242                 }
12243             }
12244             if(t.duration && t.duration <= (now - t.taskStartTime)){
12245                 removeTask(t);
12246             }
12247         }
12248     };
12249
12250     /**
12251      * Queues a new task.
12252      * @param {Object} task
12253      */
12254     this.start = function(task){
12255         tasks.push(task);
12256         task.taskStartTime = new Date().getTime();
12257         task.taskRunTime = 0;
12258         task.taskRunCount = 0;
12259         startThread();
12260         return task;
12261     };
12262
12263     this.stop = function(task){
12264         removeTask(task);
12265         return task;
12266     };
12267
12268     this.stopAll = function(){
12269         stopThread();
12270         for(var i = 0, len = tasks.length; i < len; i++){
12271             if(tasks[i].onStop){
12272                 tasks[i].onStop();
12273             }
12274         }
12275         tasks = [];
12276         removeQueue = [];
12277     };
12278 };
12279
12280 Roo.TaskMgr = new Roo.util.TaskRunner();/*
12281  * Based on:
12282  * Ext JS Library 1.1.1
12283  * Copyright(c) 2006-2007, Ext JS, LLC.
12284  *
12285  * Originally Released Under LGPL - original licence link has changed is not relivant.
12286  *
12287  * Fork - LGPL
12288  * <script type="text/javascript">
12289  */
12290
12291  
12292 /**
12293  * @class Roo.util.MixedCollection
12294  * @extends Roo.util.Observable
12295  * A Collection class that maintains both numeric indexes and keys and exposes events.
12296  * @constructor
12297  * @param {Boolean} allowFunctions True if the addAll function should add function references to the
12298  * collection (defaults to false)
12299  * @param {Function} keyFn A function that can accept an item of the type(s) stored in this MixedCollection
12300  * and return the key value for that item.  This is used when available to look up the key on items that
12301  * were passed without an explicit key parameter to a MixedCollection method.  Passing this parameter is
12302  * equivalent to providing an implementation for the {@link #getKey} method.
12303  */
12304 Roo.util.MixedCollection = function(allowFunctions, keyFn){
12305     this.items = [];
12306     this.map = {};
12307     this.keys = [];
12308     this.length = 0;
12309     this.addEvents({
12310         /**
12311          * @event clear
12312          * Fires when the collection is cleared.
12313          */
12314         "clear" : true,
12315         /**
12316          * @event add
12317          * Fires when an item is added to the collection.
12318          * @param {Number} index The index at which the item was added.
12319          * @param {Object} o The item added.
12320          * @param {String} key The key associated with the added item.
12321          */
12322         "add" : true,
12323         /**
12324          * @event replace
12325          * Fires when an item is replaced in the collection.
12326          * @param {String} key he key associated with the new added.
12327          * @param {Object} old The item being replaced.
12328          * @param {Object} new The new item.
12329          */
12330         "replace" : true,
12331         /**
12332          * @event remove
12333          * Fires when an item is removed from the collection.
12334          * @param {Object} o The item being removed.
12335          * @param {String} key (optional) The key associated with the removed item.
12336          */
12337         "remove" : true,
12338         "sort" : true
12339     });
12340     this.allowFunctions = allowFunctions === true;
12341     if(keyFn){
12342         this.getKey = keyFn;
12343     }
12344     Roo.util.MixedCollection.superclass.constructor.call(this);
12345 };
12346
12347 Roo.extend(Roo.util.MixedCollection, Roo.util.Observable, {
12348     allowFunctions : false,
12349     
12350 /**
12351  * Adds an item to the collection.
12352  * @param {String} key The key to associate with the item
12353  * @param {Object} o The item to add.
12354  * @return {Object} The item added.
12355  */
12356     add : function(key, o){
12357         if(arguments.length == 1){
12358             o = arguments[0];
12359             key = this.getKey(o);
12360         }
12361         if(typeof key == "undefined" || key === null){
12362             this.length++;
12363             this.items.push(o);
12364             this.keys.push(null);
12365         }else{
12366             var old = this.map[key];
12367             if(old){
12368                 return this.replace(key, o);
12369             }
12370             this.length++;
12371             this.items.push(o);
12372             this.map[key] = o;
12373             this.keys.push(key);
12374         }
12375         this.fireEvent("add", this.length-1, o, key);
12376         return o;
12377     },
12378        
12379 /**
12380   * MixedCollection has a generic way to fetch keys if you implement getKey.
12381 <pre><code>
12382 // normal way
12383 var mc = new Roo.util.MixedCollection();
12384 mc.add(someEl.dom.id, someEl);
12385 mc.add(otherEl.dom.id, otherEl);
12386 //and so on
12387
12388 // using getKey
12389 var mc = new Roo.util.MixedCollection();
12390 mc.getKey = function(el){
12391    return el.dom.id;
12392 };
12393 mc.add(someEl);
12394 mc.add(otherEl);
12395
12396 // or via the constructor
12397 var mc = new Roo.util.MixedCollection(false, function(el){
12398    return el.dom.id;
12399 });
12400 mc.add(someEl);
12401 mc.add(otherEl);
12402 </code></pre>
12403  * @param o {Object} The item for which to find the key.
12404  * @return {Object} The key for the passed item.
12405  */
12406     getKey : function(o){
12407          return o.id; 
12408     },
12409    
12410 /**
12411  * Replaces an item in the collection.
12412  * @param {String} key The key associated with the item to replace, or the item to replace.
12413  * @param o {Object} o (optional) If the first parameter passed was a key, the item to associate with that key.
12414  * @return {Object}  The new item.
12415  */
12416     replace : function(key, o){
12417         if(arguments.length == 1){
12418             o = arguments[0];
12419             key = this.getKey(o);
12420         }
12421         var old = this.item(key);
12422         if(typeof key == "undefined" || key === null || typeof old == "undefined"){
12423              return this.add(key, o);
12424         }
12425         var index = this.indexOfKey(key);
12426         this.items[index] = o;
12427         this.map[key] = o;
12428         this.fireEvent("replace", key, old, o);
12429         return o;
12430     },
12431    
12432 /**
12433  * Adds all elements of an Array or an Object to the collection.
12434  * @param {Object/Array} objs An Object containing properties which will be added to the collection, or
12435  * an Array of values, each of which are added to the collection.
12436  */
12437     addAll : function(objs){
12438         if(arguments.length > 1 || objs instanceof Array){
12439             var args = arguments.length > 1 ? arguments : objs;
12440             for(var i = 0, len = args.length; i < len; i++){
12441                 this.add(args[i]);
12442             }
12443         }else{
12444             for(var key in objs){
12445                 if(this.allowFunctions || typeof objs[key] != "function"){
12446                     this.add(key, objs[key]);
12447                 }
12448             }
12449         }
12450     },
12451    
12452 /**
12453  * Executes the specified function once for every item in the collection, passing each
12454  * item as the first and only parameter. returning false from the function will stop the iteration.
12455  * @param {Function} fn The function to execute for each item.
12456  * @param {Object} scope (optional) The scope in which to execute the function.
12457  */
12458     each : function(fn, scope){
12459         var items = [].concat(this.items); // each safe for removal
12460         for(var i = 0, len = items.length; i < len; i++){
12461             if(fn.call(scope || items[i], items[i], i, len) === false){
12462                 break;
12463             }
12464         }
12465     },
12466    
12467 /**
12468  * Executes the specified function once for every key in the collection, passing each
12469  * key, and its associated item as the first two parameters.
12470  * @param {Function} fn The function to execute for each item.
12471  * @param {Object} scope (optional) The scope in which to execute the function.
12472  */
12473     eachKey : function(fn, scope){
12474         for(var i = 0, len = this.keys.length; i < len; i++){
12475             fn.call(scope || window, this.keys[i], this.items[i], i, len);
12476         }
12477     },
12478    
12479 /**
12480  * Returns the first item in the collection which elicits a true return value from the
12481  * passed selection function.
12482  * @param {Function} fn The selection function to execute for each item.
12483  * @param {Object} scope (optional) The scope in which to execute the function.
12484  * @return {Object} The first item in the collection which returned true from the selection function.
12485  */
12486     find : function(fn, scope){
12487         for(var i = 0, len = this.items.length; i < len; i++){
12488             if(fn.call(scope || window, this.items[i], this.keys[i])){
12489                 return this.items[i];
12490             }
12491         }
12492         return null;
12493     },
12494    
12495 /**
12496  * Inserts an item at the specified index in the collection.
12497  * @param {Number} index The index to insert the item at.
12498  * @param {String} key The key to associate with the new item, or the item itself.
12499  * @param {Object} o  (optional) If the second parameter was a key, the new item.
12500  * @return {Object} The item inserted.
12501  */
12502     insert : function(index, key, o){
12503         if(arguments.length == 2){
12504             o = arguments[1];
12505             key = this.getKey(o);
12506         }
12507         if(index >= this.length){
12508             return this.add(key, o);
12509         }
12510         this.length++;
12511         this.items.splice(index, 0, o);
12512         if(typeof key != "undefined" && key != null){
12513             this.map[key] = o;
12514         }
12515         this.keys.splice(index, 0, key);
12516         this.fireEvent("add", index, o, key);
12517         return o;
12518     },
12519    
12520 /**
12521  * Removed an item from the collection.
12522  * @param {Object} o The item to remove.
12523  * @return {Object} The item removed.
12524  */
12525     remove : function(o){
12526         return this.removeAt(this.indexOf(o));
12527     },
12528    
12529 /**
12530  * Remove an item from a specified index in the collection.
12531  * @param {Number} index The index within the collection of the item to remove.
12532  */
12533     removeAt : function(index){
12534         if(index < this.length && index >= 0){
12535             this.length--;
12536             var o = this.items[index];
12537             this.items.splice(index, 1);
12538             var key = this.keys[index];
12539             if(typeof key != "undefined"){
12540                 delete this.map[key];
12541             }
12542             this.keys.splice(index, 1);
12543             this.fireEvent("remove", o, key);
12544         }
12545     },
12546    
12547 /**
12548  * Removed an item associated with the passed key fom the collection.
12549  * @param {String} key The key of the item to remove.
12550  */
12551     removeKey : function(key){
12552         return this.removeAt(this.indexOfKey(key));
12553     },
12554    
12555 /**
12556  * Returns the number of items in the collection.
12557  * @return {Number} the number of items in the collection.
12558  */
12559     getCount : function(){
12560         return this.length; 
12561     },
12562    
12563 /**
12564  * Returns index within the collection of the passed Object.
12565  * @param {Object} o The item to find the index of.
12566  * @return {Number} index of the item.
12567  */
12568     indexOf : function(o){
12569         if(!this.items.indexOf){
12570             for(var i = 0, len = this.items.length; i < len; i++){
12571                 if(this.items[i] == o) return i;
12572             }
12573             return -1;
12574         }else{
12575             return this.items.indexOf(o);
12576         }
12577     },
12578    
12579 /**
12580  * Returns index within the collection of the passed key.
12581  * @param {String} key The key to find the index of.
12582  * @return {Number} index of the key.
12583  */
12584     indexOfKey : function(key){
12585         if(!this.keys.indexOf){
12586             for(var i = 0, len = this.keys.length; i < len; i++){
12587                 if(this.keys[i] == key) return i;
12588             }
12589             return -1;
12590         }else{
12591             return this.keys.indexOf(key);
12592         }
12593     },
12594    
12595 /**
12596  * Returns the item associated with the passed key OR index. Key has priority over index.
12597  * @param {String/Number} key The key or index of the item.
12598  * @return {Object} The item associated with the passed key.
12599  */
12600     item : function(key){
12601         var item = typeof this.map[key] != "undefined" ? this.map[key] : this.items[key];
12602         return typeof item != 'function' || this.allowFunctions ? item : null; // for prototype!
12603     },
12604     
12605 /**
12606  * Returns the item at the specified index.
12607  * @param {Number} index The index of the item.
12608  * @return {Object}
12609  */
12610     itemAt : function(index){
12611         return this.items[index];
12612     },
12613     
12614 /**
12615  * Returns the item associated with the passed key.
12616  * @param {String/Number} key The key of the item.
12617  * @return {Object} The item associated with the passed key.
12618  */
12619     key : function(key){
12620         return this.map[key];
12621     },
12622    
12623 /**
12624  * Returns true if the collection contains the passed Object as an item.
12625  * @param {Object} o  The Object to look for in the collection.
12626  * @return {Boolean} True if the collection contains the Object as an item.
12627  */
12628     contains : function(o){
12629         return this.indexOf(o) != -1;
12630     },
12631    
12632 /**
12633  * Returns true if the collection contains the passed Object as a key.
12634  * @param {String} key The key to look for in the collection.
12635  * @return {Boolean} True if the collection contains the Object as a key.
12636  */
12637     containsKey : function(key){
12638         return typeof this.map[key] != "undefined";
12639     },
12640    
12641 /**
12642  * Removes all items from the collection.
12643  */
12644     clear : function(){
12645         this.length = 0;
12646         this.items = [];
12647         this.keys = [];
12648         this.map = {};
12649         this.fireEvent("clear");
12650     },
12651    
12652 /**
12653  * Returns the first item in the collection.
12654  * @return {Object} the first item in the collection..
12655  */
12656     first : function(){
12657         return this.items[0]; 
12658     },
12659    
12660 /**
12661  * Returns the last item in the collection.
12662  * @return {Object} the last item in the collection..
12663  */
12664     last : function(){
12665         return this.items[this.length-1];   
12666     },
12667     
12668     _sort : function(property, dir, fn){
12669         var dsc = String(dir).toUpperCase() == "DESC" ? -1 : 1;
12670         fn = fn || function(a, b){
12671             return a-b;
12672         };
12673         var c = [], k = this.keys, items = this.items;
12674         for(var i = 0, len = items.length; i < len; i++){
12675             c[c.length] = {key: k[i], value: items[i], index: i};
12676         }
12677         c.sort(function(a, b){
12678             var v = fn(a[property], b[property]) * dsc;
12679             if(v == 0){
12680                 v = (a.index < b.index ? -1 : 1);
12681             }
12682             return v;
12683         });
12684         for(var i = 0, len = c.length; i < len; i++){
12685             items[i] = c[i].value;
12686             k[i] = c[i].key;
12687         }
12688         this.fireEvent("sort", this);
12689     },
12690     
12691     /**
12692      * Sorts this collection with the passed comparison function
12693      * @param {String} direction (optional) "ASC" or "DESC"
12694      * @param {Function} fn (optional) comparison function
12695      */
12696     sort : function(dir, fn){
12697         this._sort("value", dir, fn);
12698     },
12699     
12700     /**
12701      * Sorts this collection by keys
12702      * @param {String} direction (optional) "ASC" or "DESC"
12703      * @param {Function} fn (optional) a comparison function (defaults to case insensitive string)
12704      */
12705     keySort : function(dir, fn){
12706         this._sort("key", dir, fn || function(a, b){
12707             return String(a).toUpperCase()-String(b).toUpperCase();
12708         });
12709     },
12710     
12711     /**
12712      * Returns a range of items in this collection
12713      * @param {Number} startIndex (optional) defaults to 0
12714      * @param {Number} endIndex (optional) default to the last item
12715      * @return {Array} An array of items
12716      */
12717     getRange : function(start, end){
12718         var items = this.items;
12719         if(items.length < 1){
12720             return [];
12721         }
12722         start = start || 0;
12723         end = Math.min(typeof end == "undefined" ? this.length-1 : end, this.length-1);
12724         var r = [];
12725         if(start <= end){
12726             for(var i = start; i <= end; i++) {
12727                     r[r.length] = items[i];
12728             }
12729         }else{
12730             for(var i = start; i >= end; i--) {
12731                     r[r.length] = items[i];
12732             }
12733         }
12734         return r;
12735     },
12736         
12737     /**
12738      * Filter the <i>objects</i> in this collection by a specific property. 
12739      * Returns a new collection that has been filtered.
12740      * @param {String} property A property on your objects
12741      * @param {String/RegExp} value Either string that the property values 
12742      * should start with or a RegExp to test against the property
12743      * @return {MixedCollection} The new filtered collection
12744      */
12745     filter : function(property, value){
12746         if(!value.exec){ // not a regex
12747             value = String(value);
12748             if(value.length == 0){
12749                 return this.clone();
12750             }
12751             value = new RegExp("^" + Roo.escapeRe(value), "i");
12752         }
12753         return this.filterBy(function(o){
12754             return o && value.test(o[property]);
12755         });
12756         },
12757     
12758     /**
12759      * Filter by a function. * Returns a new collection that has been filtered.
12760      * The passed function will be called with each 
12761      * object in the collection. If the function returns true, the value is included 
12762      * otherwise it is filtered.
12763      * @param {Function} fn The function to be called, it will receive the args o (the object), k (the key)
12764      * @param {Object} scope (optional) The scope of the function (defaults to this) 
12765      * @return {MixedCollection} The new filtered collection
12766      */
12767     filterBy : function(fn, scope){
12768         var r = new Roo.util.MixedCollection();
12769         r.getKey = this.getKey;
12770         var k = this.keys, it = this.items;
12771         for(var i = 0, len = it.length; i < len; i++){
12772             if(fn.call(scope||this, it[i], k[i])){
12773                                 r.add(k[i], it[i]);
12774                         }
12775         }
12776         return r;
12777     },
12778     
12779     /**
12780      * Creates a duplicate of this collection
12781      * @return {MixedCollection}
12782      */
12783     clone : function(){
12784         var r = new Roo.util.MixedCollection();
12785         var k = this.keys, it = this.items;
12786         for(var i = 0, len = it.length; i < len; i++){
12787             r.add(k[i], it[i]);
12788         }
12789         r.getKey = this.getKey;
12790         return r;
12791     }
12792 });
12793 /**
12794  * Returns the item associated with the passed key or index.
12795  * @method
12796  * @param {String/Number} key The key or index of the item.
12797  * @return {Object} The item associated with the passed key.
12798  */
12799 Roo.util.MixedCollection.prototype.get = Roo.util.MixedCollection.prototype.item;/*
12800  * Based on:
12801  * Ext JS Library 1.1.1
12802  * Copyright(c) 2006-2007, Ext JS, LLC.
12803  *
12804  * Originally Released Under LGPL - original licence link has changed is not relivant.
12805  *
12806  * Fork - LGPL
12807  * <script type="text/javascript">
12808  */
12809 /**
12810  * @class Roo.util.JSON
12811  * Modified version of Douglas Crockford"s json.js that doesn"t
12812  * mess with the Object prototype 
12813  * http://www.json.org/js.html
12814  * @singleton
12815  */
12816 Roo.util.JSON = new (function(){
12817     var useHasOwn = {}.hasOwnProperty ? true : false;
12818     
12819     // crashes Safari in some instances
12820     //var validRE = /^("(\\.|[^"\\\n\r])*?"|[,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t])+?$/;
12821     
12822     var pad = function(n) {
12823         return n < 10 ? "0" + n : n;
12824     };
12825     
12826     var m = {
12827         "\b": '\\b',
12828         "\t": '\\t',
12829         "\n": '\\n',
12830         "\f": '\\f',
12831         "\r": '\\r',
12832         '"' : '\\"',
12833         "\\": '\\\\'
12834     };
12835
12836     var encodeString = function(s){
12837         if (/["\\\x00-\x1f]/.test(s)) {
12838             return '"' + s.replace(/([\x00-\x1f\\"])/g, function(a, b) {
12839                 var c = m[b];
12840                 if(c){
12841                     return c;
12842                 }
12843                 c = b.charCodeAt();
12844                 return "\\u00" +
12845                     Math.floor(c / 16).toString(16) +
12846                     (c % 16).toString(16);
12847             }) + '"';
12848         }
12849         return '"' + s + '"';
12850     };
12851     
12852     var encodeArray = function(o){
12853         var a = ["["], b, i, l = o.length, v;
12854             for (i = 0; i < l; i += 1) {
12855                 v = o[i];
12856                 switch (typeof v) {
12857                     case "undefined":
12858                     case "function":
12859                     case "unknown":
12860                         break;
12861                     default:
12862                         if (b) {
12863                             a.push(',');
12864                         }
12865                         a.push(v === null ? "null" : Roo.util.JSON.encode(v));
12866                         b = true;
12867                 }
12868             }
12869             a.push("]");
12870             return a.join("");
12871     };
12872     
12873     var encodeDate = function(o){
12874         return '"' + o.getFullYear() + "-" +
12875                 pad(o.getMonth() + 1) + "-" +
12876                 pad(o.getDate()) + "T" +
12877                 pad(o.getHours()) + ":" +
12878                 pad(o.getMinutes()) + ":" +
12879                 pad(o.getSeconds()) + '"';
12880     };
12881     
12882     /**
12883      * Encodes an Object, Array or other value
12884      * @param {Mixed} o The variable to encode
12885      * @return {String} The JSON string
12886      */
12887     this.encode = function(o)
12888     {
12889         // should this be extended to fully wrap stringify..
12890         
12891         if(typeof o == "undefined" || o === null){
12892             return "null";
12893         }else if(o instanceof Array){
12894             return encodeArray(o);
12895         }else if(o instanceof Date){
12896             return encodeDate(o);
12897         }else if(typeof o == "string"){
12898             return encodeString(o);
12899         }else if(typeof o == "number"){
12900             return isFinite(o) ? String(o) : "null";
12901         }else if(typeof o == "boolean"){
12902             return String(o);
12903         }else {
12904             var a = ["{"], b, i, v;
12905             for (i in o) {
12906                 if(!useHasOwn || o.hasOwnProperty(i)) {
12907                     v = o[i];
12908                     switch (typeof v) {
12909                     case "undefined":
12910                     case "function":
12911                     case "unknown":
12912                         break;
12913                     default:
12914                         if(b){
12915                             a.push(',');
12916                         }
12917                         a.push(this.encode(i), ":",
12918                                 v === null ? "null" : this.encode(v));
12919                         b = true;
12920                     }
12921                 }
12922             }
12923             a.push("}");
12924             return a.join("");
12925         }
12926     };
12927     
12928     /**
12929      * Decodes (parses) a JSON string to an object. If the JSON is invalid, this function throws a SyntaxError.
12930      * @param {String} json The JSON string
12931      * @return {Object} The resulting object
12932      */
12933     this.decode = function(json){
12934         
12935         return  /** eval:var:json */ eval("(" + json + ')');
12936     };
12937 })();
12938 /** 
12939  * Shorthand for {@link Roo.util.JSON#encode}
12940  * @member Roo encode 
12941  * @method */
12942 Roo.encode = typeof(JSON) != 'undefined' && JSON.stringify ? JSON.stringify : Roo.util.JSON.encode;
12943 /** 
12944  * Shorthand for {@link Roo.util.JSON#decode}
12945  * @member Roo decode 
12946  * @method */
12947 Roo.decode = typeof(JSON) != 'undefined' && JSON.parse ? JSON.parse : Roo.util.JSON.decode;
12948 /*
12949  * Based on:
12950  * Ext JS Library 1.1.1
12951  * Copyright(c) 2006-2007, Ext JS, LLC.
12952  *
12953  * Originally Released Under LGPL - original licence link has changed is not relivant.
12954  *
12955  * Fork - LGPL
12956  * <script type="text/javascript">
12957  */
12958  
12959 /**
12960  * @class Roo.util.Format
12961  * Reusable data formatting functions
12962  * @singleton
12963  */
12964 Roo.util.Format = function(){
12965     var trimRe = /^\s+|\s+$/g;
12966     return {
12967         /**
12968          * Truncate a string and add an ellipsis ('...') to the end if it exceeds the specified length
12969          * @param {String} value The string to truncate
12970          * @param {Number} length The maximum length to allow before truncating
12971          * @return {String} The converted text
12972          */
12973         ellipsis : function(value, len){
12974             if(value && value.length > len){
12975                 return value.substr(0, len-3)+"...";
12976             }
12977             return value;
12978         },
12979
12980         /**
12981          * Checks a reference and converts it to empty string if it is undefined
12982          * @param {Mixed} value Reference to check
12983          * @return {Mixed} Empty string if converted, otherwise the original value
12984          */
12985         undef : function(value){
12986             return typeof value != "undefined" ? value : "";
12987         },
12988
12989         /**
12990          * Convert certain characters (&, <, >, and ') to their HTML character equivalents for literal display in web pages.
12991          * @param {String} value The string to encode
12992          * @return {String} The encoded text
12993          */
12994         htmlEncode : function(value){
12995             return !value ? value : String(value).replace(/&/g, "&amp;").replace(/>/g, "&gt;").replace(/</g, "&lt;").replace(/"/g, "&quot;");
12996         },
12997
12998         /**
12999          * Convert certain characters (&, <, >, and ') from their HTML character equivalents.
13000          * @param {String} value The string to decode
13001          * @return {String} The decoded text
13002          */
13003         htmlDecode : function(value){
13004             return !value ? value : String(value).replace(/&amp;/g, "&").replace(/&gt;/g, ">").replace(/&lt;/g, "<").replace(/&quot;/g, '"');
13005         },
13006
13007         /**
13008          * Trims any whitespace from either side of a string
13009          * @param {String} value The text to trim
13010          * @return {String} The trimmed text
13011          */
13012         trim : function(value){
13013             return String(value).replace(trimRe, "");
13014         },
13015
13016         /**
13017          * Returns a substring from within an original string
13018          * @param {String} value The original text
13019          * @param {Number} start The start index of the substring
13020          * @param {Number} length The length of the substring
13021          * @return {String} The substring
13022          */
13023         substr : function(value, start, length){
13024             return String(value).substr(start, length);
13025         },
13026
13027         /**
13028          * Converts a string to all lower case letters
13029          * @param {String} value The text to convert
13030          * @return {String} The converted text
13031          */
13032         lowercase : function(value){
13033             return String(value).toLowerCase();
13034         },
13035
13036         /**
13037          * Converts a string to all upper case letters
13038          * @param {String} value The text to convert
13039          * @return {String} The converted text
13040          */
13041         uppercase : function(value){
13042             return String(value).toUpperCase();
13043         },
13044
13045         /**
13046          * Converts the first character only of a string to upper case
13047          * @param {String} value The text to convert
13048          * @return {String} The converted text
13049          */
13050         capitalize : function(value){
13051             return !value ? value : value.charAt(0).toUpperCase() + value.substr(1).toLowerCase();
13052         },
13053
13054         // private
13055         call : function(value, fn){
13056             if(arguments.length > 2){
13057                 var args = Array.prototype.slice.call(arguments, 2);
13058                 args.unshift(value);
13059                  
13060                 return /** eval:var:value */  eval(fn).apply(window, args);
13061             }else{
13062                 /** eval:var:value */
13063                 return /** eval:var:value */ eval(fn).call(window, value);
13064             }
13065         },
13066
13067        
13068         /**
13069          * safer version of Math.toFixed..??/
13070          * @param {Number/String} value The numeric value to format
13071          * @param {Number/String} value Decimal places 
13072          * @return {String} The formatted currency string
13073          */
13074         toFixed : function(v, n)
13075         {
13076             // why not use to fixed - precision is buggered???
13077             if (!n) {
13078                 return Math.round(v-0);
13079             }
13080             var fact = Math.pow(10,n+1);
13081             v = (Math.round((v-0)*fact))/fact;
13082             var z = (''+fact).substring(2);
13083             if (v == Math.floor(v)) {
13084                 return Math.floor(v) + '.' + z;
13085             }
13086             
13087             // now just padd decimals..
13088             var ps = String(v).split('.');
13089             var fd = (ps[1] + z);
13090             var r = fd.substring(0,n); 
13091             var rm = fd.substring(n); 
13092             if (rm < 5) {
13093                 return ps[0] + '.' + r;
13094             }
13095             r*=1; // turn it into a number;
13096             r++;
13097             if (String(r).length != n) {
13098                 ps[0]*=1;
13099                 ps[0]++;
13100                 r = String(r).substring(1); // chop the end off.
13101             }
13102             
13103             return ps[0] + '.' + r;
13104              
13105         },
13106         
13107         /**
13108          * Format a number as US currency
13109          * @param {Number/String} value The numeric value to format
13110          * @return {String} The formatted currency string
13111          */
13112         usMoney : function(v){
13113             v = (Math.round((v-0)*100))/100;
13114             v = (v == Math.floor(v)) ? v + ".00" : ((v*10 == Math.floor(v*10)) ? v + "0" : v);
13115             v = String(v);
13116             var ps = v.split('.');
13117             var whole = ps[0];
13118             var sub = ps[1] ? '.'+ ps[1] : '.00';
13119             var r = /(\d+)(\d{3})/;
13120             while (r.test(whole)) {
13121                 whole = whole.replace(r, '$1' + ',' + '$2');
13122             }
13123             return "$" + whole + sub ;
13124         },
13125         
13126         /**
13127          * Parse a value into a formatted date using the specified format pattern.
13128          * @param {Mixed} value The value to format
13129          * @param {String} format (optional) Any valid date format string (defaults to 'm/d/Y')
13130          * @return {String} The formatted date string
13131          */
13132         date : function(v, format){
13133             if(!v){
13134                 return "";
13135             }
13136             if(!(v instanceof Date)){
13137                 v = new Date(Date.parse(v));
13138             }
13139             return v.dateFormat(format || "m/d/Y");
13140         },
13141
13142         /**
13143          * Returns a date rendering function that can be reused to apply a date format multiple times efficiently
13144          * @param {String} format Any valid date format string
13145          * @return {Function} The date formatting function
13146          */
13147         dateRenderer : function(format){
13148             return function(v){
13149                 return Roo.util.Format.date(v, format);  
13150             };
13151         },
13152
13153         // private
13154         stripTagsRE : /<\/?[^>]+>/gi,
13155         
13156         /**
13157          * Strips all HTML tags
13158          * @param {Mixed} value The text from which to strip tags
13159          * @return {String} The stripped text
13160          */
13161         stripTags : function(v){
13162             return !v ? v : String(v).replace(this.stripTagsRE, "");
13163         }
13164     };
13165 }();/*
13166  * Based on:
13167  * Ext JS Library 1.1.1
13168  * Copyright(c) 2006-2007, Ext JS, LLC.
13169  *
13170  * Originally Released Under LGPL - original licence link has changed is not relivant.
13171  *
13172  * Fork - LGPL
13173  * <script type="text/javascript">
13174  */
13175
13176
13177  
13178
13179 /**
13180  * @class Roo.MasterTemplate
13181  * @extends Roo.Template
13182  * Provides a template that can have child templates. The syntax is:
13183 <pre><code>
13184 var t = new Roo.MasterTemplate(
13185         '&lt;select name="{name}"&gt;',
13186                 '&lt;tpl name="options"&gt;&lt;option value="{value:trim}"&gt;{text:ellipsis(10)}&lt;/option&gt;&lt;/tpl&gt;',
13187         '&lt;/select&gt;'
13188 );
13189 t.add('options', {value: 'foo', text: 'bar'});
13190 // or you can add multiple child elements in one shot
13191 t.addAll('options', [
13192     {value: 'foo', text: 'bar'},
13193     {value: 'foo2', text: 'bar2'},
13194     {value: 'foo3', text: 'bar3'}
13195 ]);
13196 // then append, applying the master template values
13197 t.append('my-form', {name: 'my-select'});
13198 </code></pre>
13199 * A name attribute for the child template is not required if you have only one child
13200 * template or you want to refer to them by index.
13201  */
13202 Roo.MasterTemplate = function(){
13203     Roo.MasterTemplate.superclass.constructor.apply(this, arguments);
13204     this.originalHtml = this.html;
13205     var st = {};
13206     var m, re = this.subTemplateRe;
13207     re.lastIndex = 0;
13208     var subIndex = 0;
13209     while(m = re.exec(this.html)){
13210         var name = m[1], content = m[2];
13211         st[subIndex] = {
13212             name: name,
13213             index: subIndex,
13214             buffer: [],
13215             tpl : new Roo.Template(content)
13216         };
13217         if(name){
13218             st[name] = st[subIndex];
13219         }
13220         st[subIndex].tpl.compile();
13221         st[subIndex].tpl.call = this.call.createDelegate(this);
13222         subIndex++;
13223     }
13224     this.subCount = subIndex;
13225     this.subs = st;
13226 };
13227 Roo.extend(Roo.MasterTemplate, Roo.Template, {
13228     /**
13229     * The regular expression used to match sub templates
13230     * @type RegExp
13231     * @property
13232     */
13233     subTemplateRe : /<tpl(?:\sname="([\w-]+)")?>((?:.|\n)*?)<\/tpl>/gi,
13234
13235     /**
13236      * Applies the passed values to a child template.
13237      * @param {String/Number} name (optional) The name or index of the child template
13238      * @param {Array/Object} values The values to be applied to the template
13239      * @return {MasterTemplate} this
13240      */
13241      add : function(name, values){
13242         if(arguments.length == 1){
13243             values = arguments[0];
13244             name = 0;
13245         }
13246         var s = this.subs[name];
13247         s.buffer[s.buffer.length] = s.tpl.apply(values);
13248         return this;
13249     },
13250
13251     /**
13252      * Applies all the passed values to a child template.
13253      * @param {String/Number} name (optional) The name or index of the child template
13254      * @param {Array} values The values to be applied to the template, this should be an array of objects.
13255      * @param {Boolean} reset (optional) True to reset the template first
13256      * @return {MasterTemplate} this
13257      */
13258     fill : function(name, values, reset){
13259         var a = arguments;
13260         if(a.length == 1 || (a.length == 2 && typeof a[1] == "boolean")){
13261             values = a[0];
13262             name = 0;
13263             reset = a[1];
13264         }
13265         if(reset){
13266             this.reset();
13267         }
13268         for(var i = 0, len = values.length; i < len; i++){
13269             this.add(name, values[i]);
13270         }
13271         return this;
13272     },
13273
13274     /**
13275      * Resets the template for reuse
13276      * @return {MasterTemplate} this
13277      */
13278      reset : function(){
13279         var s = this.subs;
13280         for(var i = 0; i < this.subCount; i++){
13281             s[i].buffer = [];
13282         }
13283         return this;
13284     },
13285
13286     applyTemplate : function(values){
13287         var s = this.subs;
13288         var replaceIndex = -1;
13289         this.html = this.originalHtml.replace(this.subTemplateRe, function(m, name){
13290             return s[++replaceIndex].buffer.join("");
13291         });
13292         return Roo.MasterTemplate.superclass.applyTemplate.call(this, values);
13293     },
13294
13295     apply : function(){
13296         return this.applyTemplate.apply(this, arguments);
13297     },
13298
13299     compile : function(){return this;}
13300 });
13301
13302 /**
13303  * Alias for fill().
13304  * @method
13305  */
13306 Roo.MasterTemplate.prototype.addAll = Roo.MasterTemplate.prototype.fill;
13307  /**
13308  * Creates a template from the passed element's value (display:none textarea, preferred) or innerHTML. e.g.
13309  * var tpl = Roo.MasterTemplate.from('element-id');
13310  * @param {String/HTMLElement} el
13311  * @param {Object} config
13312  * @static
13313  */
13314 Roo.MasterTemplate.from = function(el, config){
13315     el = Roo.getDom(el);
13316     return new Roo.MasterTemplate(el.value || el.innerHTML, config || '');
13317 };/*
13318  * Based on:
13319  * Ext JS Library 1.1.1
13320  * Copyright(c) 2006-2007, Ext JS, LLC.
13321  *
13322  * Originally Released Under LGPL - original licence link has changed is not relivant.
13323  *
13324  * Fork - LGPL
13325  * <script type="text/javascript">
13326  */
13327
13328  
13329 /**
13330  * @class Roo.util.CSS
13331  * Utility class for manipulating CSS rules
13332  * @singleton
13333  */
13334 Roo.util.CSS = function(){
13335         var rules = null;
13336         var doc = document;
13337
13338     var camelRe = /(-[a-z])/gi;
13339     var camelFn = function(m, a){ return a.charAt(1).toUpperCase(); };
13340
13341    return {
13342    /**
13343     * Very simple dynamic creation of stylesheets from a text blob of rules.  The text will wrapped in a style
13344     * tag and appended to the HEAD of the document.
13345     * @param {String|Object} cssText The text containing the css rules
13346     * @param {String} id An id to add to the stylesheet for later removal
13347     * @return {StyleSheet}
13348     */
13349     createStyleSheet : function(cssText, id){
13350         var ss;
13351         var head = doc.getElementsByTagName("head")[0];
13352         var nrules = doc.createElement("style");
13353         nrules.setAttribute("type", "text/css");
13354         if(id){
13355             nrules.setAttribute("id", id);
13356         }
13357         if (typeof(cssText) != 'string') {
13358             // support object maps..
13359             // not sure if this a good idea.. 
13360             // perhaps it should be merged with the general css handling
13361             // and handle js style props.
13362             var cssTextNew = [];
13363             for(var n in cssText) {
13364                 var citems = [];
13365                 for(var k in cssText[n]) {
13366                     citems.push( k + ' : ' +cssText[n][k] + ';' );
13367                 }
13368                 cssTextNew.push( n + ' { ' + citems.join(' ') + '} ');
13369                 
13370             }
13371             cssText = cssTextNew.join("\n");
13372             
13373         }
13374        
13375        
13376        if(Roo.isIE){
13377            head.appendChild(nrules);
13378            ss = nrules.styleSheet;
13379            ss.cssText = cssText;
13380        }else{
13381            try{
13382                 nrules.appendChild(doc.createTextNode(cssText));
13383            }catch(e){
13384                nrules.cssText = cssText; 
13385            }
13386            head.appendChild(nrules);
13387            ss = nrules.styleSheet ? nrules.styleSheet : (nrules.sheet || doc.styleSheets[doc.styleSheets.length-1]);
13388        }
13389        this.cacheStyleSheet(ss);
13390        return ss;
13391    },
13392
13393    /**
13394     * Removes a style or link tag by id
13395     * @param {String} id The id of the tag
13396     */
13397    removeStyleSheet : function(id){
13398        var existing = doc.getElementById(id);
13399        if(existing){
13400            existing.parentNode.removeChild(existing);
13401        }
13402    },
13403
13404    /**
13405     * Dynamically swaps an existing stylesheet reference for a new one
13406     * @param {String} id The id of an existing link tag to remove
13407     * @param {String} url The href of the new stylesheet to include
13408     */
13409    swapStyleSheet : function(id, url){
13410        this.removeStyleSheet(id);
13411        var ss = doc.createElement("link");
13412        ss.setAttribute("rel", "stylesheet");
13413        ss.setAttribute("type", "text/css");
13414        ss.setAttribute("id", id);
13415        ss.setAttribute("href", url);
13416        doc.getElementsByTagName("head")[0].appendChild(ss);
13417    },
13418    
13419    /**
13420     * Refresh the rule cache if you have dynamically added stylesheets
13421     * @return {Object} An object (hash) of rules indexed by selector
13422     */
13423    refreshCache : function(){
13424        return this.getRules(true);
13425    },
13426
13427    // private
13428    cacheStyleSheet : function(stylesheet){
13429        if(!rules){
13430            rules = {};
13431        }
13432        try{// try catch for cross domain access issue
13433            var ssRules = stylesheet.cssRules || stylesheet.rules;
13434            for(var j = ssRules.length-1; j >= 0; --j){
13435                rules[ssRules[j].selectorText] = ssRules[j];
13436            }
13437        }catch(e){}
13438    },
13439    
13440    /**
13441     * Gets all css rules for the document
13442     * @param {Boolean} refreshCache true to refresh the internal cache
13443     * @return {Object} An object (hash) of rules indexed by selector
13444     */
13445    getRules : function(refreshCache){
13446                 if(rules == null || refreshCache){
13447                         rules = {};
13448                         var ds = doc.styleSheets;
13449                         for(var i =0, len = ds.length; i < len; i++){
13450                             try{
13451                         this.cacheStyleSheet(ds[i]);
13452                     }catch(e){} 
13453                 }
13454                 }
13455                 return rules;
13456         },
13457         
13458         /**
13459     * Gets an an individual CSS rule by selector(s)
13460     * @param {String/Array} selector The CSS selector or an array of selectors to try. The first selector that is found is returned.
13461     * @param {Boolean} refreshCache true to refresh the internal cache if you have recently updated any rules or added styles dynamically
13462     * @return {CSSRule} The CSS rule or null if one is not found
13463     */
13464    getRule : function(selector, refreshCache){
13465                 var rs = this.getRules(refreshCache);
13466                 if(!(selector instanceof Array)){
13467                     return rs[selector];
13468                 }
13469                 for(var i = 0; i < selector.length; i++){
13470                         if(rs[selector[i]]){
13471                                 return rs[selector[i]];
13472                         }
13473                 }
13474                 return null;
13475         },
13476         
13477         
13478         /**
13479     * Updates a rule property
13480     * @param {String/Array} selector If it's an array it tries each selector until it finds one. Stops immediately once one is found.
13481     * @param {String} property The css property
13482     * @param {String} value The new value for the property
13483     * @return {Boolean} true If a rule was found and updated
13484     */
13485    updateRule : function(selector, property, value){
13486                 if(!(selector instanceof Array)){
13487                         var rule = this.getRule(selector);
13488                         if(rule){
13489                                 rule.style[property.replace(camelRe, camelFn)] = value;
13490                                 return true;
13491                         }
13492                 }else{
13493                         for(var i = 0; i < selector.length; i++){
13494                                 if(this.updateRule(selector[i], property, value)){
13495                                         return true;
13496                                 }
13497                         }
13498                 }
13499                 return false;
13500         }
13501    };   
13502 }();/*
13503  * Based on:
13504  * Ext JS Library 1.1.1
13505  * Copyright(c) 2006-2007, Ext JS, LLC.
13506  *
13507  * Originally Released Under LGPL - original licence link has changed is not relivant.
13508  *
13509  * Fork - LGPL
13510  * <script type="text/javascript">
13511  */
13512
13513  
13514
13515 /**
13516  * @class Roo.util.ClickRepeater
13517  * @extends Roo.util.Observable
13518  * 
13519  * A wrapper class which can be applied to any element. Fires a "click" event while the
13520  * mouse is pressed. The interval between firings may be specified in the config but
13521  * defaults to 10 milliseconds.
13522  * 
13523  * Optionally, a CSS class may be applied to the element during the time it is pressed.
13524  * 
13525  * @cfg {String/HTMLElement/Element} el The element to act as a button.
13526  * @cfg {Number} delay The initial delay before the repeating event begins firing.
13527  * Similar to an autorepeat key delay.
13528  * @cfg {Number} interval The interval between firings of the "click" event. Default 10 ms.
13529  * @cfg {String} pressClass A CSS class name to be applied to the element while pressed.
13530  * @cfg {Boolean} accelerate True if autorepeating should start slowly and accelerate.
13531  *           "interval" and "delay" are ignored. "immediate" is honored.
13532  * @cfg {Boolean} preventDefault True to prevent the default click event
13533  * @cfg {Boolean} stopDefault True to stop the default click event
13534  * 
13535  * @history
13536  *     2007-02-02 jvs Original code contributed by Nige "Animal" White
13537  *     2007-02-02 jvs Renamed to ClickRepeater
13538  *   2007-02-03 jvs Modifications for FF Mac and Safari 
13539  *
13540  *  @constructor
13541  * @param {String/HTMLElement/Element} el The element to listen on
13542  * @param {Object} config
13543  **/
13544 Roo.util.ClickRepeater = function(el, config)
13545 {
13546     this.el = Roo.get(el);
13547     this.el.unselectable();
13548
13549     Roo.apply(this, config);
13550
13551     this.addEvents({
13552     /**
13553      * @event mousedown
13554      * Fires when the mouse button is depressed.
13555      * @param {Roo.util.ClickRepeater} this
13556      */
13557         "mousedown" : true,
13558     /**
13559      * @event click
13560      * Fires on a specified interval during the time the element is pressed.
13561      * @param {Roo.util.ClickRepeater} this
13562      */
13563         "click" : true,
13564     /**
13565      * @event mouseup
13566      * Fires when the mouse key is released.
13567      * @param {Roo.util.ClickRepeater} this
13568      */
13569         "mouseup" : true
13570     });
13571
13572     this.el.on("mousedown", this.handleMouseDown, this);
13573     if(this.preventDefault || this.stopDefault){
13574         this.el.on("click", function(e){
13575             if(this.preventDefault){
13576                 e.preventDefault();
13577             }
13578             if(this.stopDefault){
13579                 e.stopEvent();
13580             }
13581         }, this);
13582     }
13583
13584     // allow inline handler
13585     if(this.handler){
13586         this.on("click", this.handler,  this.scope || this);
13587     }
13588
13589     Roo.util.ClickRepeater.superclass.constructor.call(this);
13590 };
13591
13592 Roo.extend(Roo.util.ClickRepeater, Roo.util.Observable, {
13593     interval : 20,
13594     delay: 250,
13595     preventDefault : true,
13596     stopDefault : false,
13597     timer : 0,
13598
13599     // private
13600     handleMouseDown : function(){
13601         clearTimeout(this.timer);
13602         this.el.blur();
13603         if(this.pressClass){
13604             this.el.addClass(this.pressClass);
13605         }
13606         this.mousedownTime = new Date();
13607
13608         Roo.get(document).on("mouseup", this.handleMouseUp, this);
13609         this.el.on("mouseout", this.handleMouseOut, this);
13610
13611         this.fireEvent("mousedown", this);
13612         this.fireEvent("click", this);
13613         
13614         this.timer = this.click.defer(this.delay || this.interval, this);
13615     },
13616
13617     // private
13618     click : function(){
13619         this.fireEvent("click", this);
13620         this.timer = this.click.defer(this.getInterval(), this);
13621     },
13622
13623     // private
13624     getInterval: function(){
13625         if(!this.accelerate){
13626             return this.interval;
13627         }
13628         var pressTime = this.mousedownTime.getElapsed();
13629         if(pressTime < 500){
13630             return 400;
13631         }else if(pressTime < 1700){
13632             return 320;
13633         }else if(pressTime < 2600){
13634             return 250;
13635         }else if(pressTime < 3500){
13636             return 180;
13637         }else if(pressTime < 4400){
13638             return 140;
13639         }else if(pressTime < 5300){
13640             return 80;
13641         }else if(pressTime < 6200){
13642             return 50;
13643         }else{
13644             return 10;
13645         }
13646     },
13647
13648     // private
13649     handleMouseOut : function(){
13650         clearTimeout(this.timer);
13651         if(this.pressClass){
13652             this.el.removeClass(this.pressClass);
13653         }
13654         this.el.on("mouseover", this.handleMouseReturn, this);
13655     },
13656
13657     // private
13658     handleMouseReturn : function(){
13659         this.el.un("mouseover", this.handleMouseReturn);
13660         if(this.pressClass){
13661             this.el.addClass(this.pressClass);
13662         }
13663         this.click();
13664     },
13665
13666     // private
13667     handleMouseUp : function(){
13668         clearTimeout(this.timer);
13669         this.el.un("mouseover", this.handleMouseReturn);
13670         this.el.un("mouseout", this.handleMouseOut);
13671         Roo.get(document).un("mouseup", this.handleMouseUp);
13672         this.el.removeClass(this.pressClass);
13673         this.fireEvent("mouseup", this);
13674     }
13675 });/*
13676  * Based on:
13677  * Ext JS Library 1.1.1
13678  * Copyright(c) 2006-2007, Ext JS, LLC.
13679  *
13680  * Originally Released Under LGPL - original licence link has changed is not relivant.
13681  *
13682  * Fork - LGPL
13683  * <script type="text/javascript">
13684  */
13685
13686  
13687 /**
13688  * @class Roo.KeyNav
13689  * <p>Provides a convenient wrapper for normalized keyboard navigation.  KeyNav allows you to bind
13690  * navigation keys to function calls that will get called when the keys are pressed, providing an easy
13691  * way to implement custom navigation schemes for any UI component.</p>
13692  * <p>The following are all of the possible keys that can be implemented: enter, left, right, up, down, tab, esc,
13693  * pageUp, pageDown, del, home, end.  Usage:</p>
13694  <pre><code>
13695 var nav = new Roo.KeyNav("my-element", {
13696     "left" : function(e){
13697         this.moveLeft(e.ctrlKey);
13698     },
13699     "right" : function(e){
13700         this.moveRight(e.ctrlKey);
13701     },
13702     "enter" : function(e){
13703         this.save();
13704     },
13705     scope : this
13706 });
13707 </code></pre>
13708  * @constructor
13709  * @param {String/HTMLElement/Roo.Element} el The element to bind to
13710  * @param {Object} config The config
13711  */
13712 Roo.KeyNav = function(el, config){
13713     this.el = Roo.get(el);
13714     Roo.apply(this, config);
13715     if(!this.disabled){
13716         this.disabled = true;
13717         this.enable();
13718     }
13719 };
13720
13721 Roo.KeyNav.prototype = {
13722     /**
13723      * @cfg {Boolean} disabled
13724      * True to disable this KeyNav instance (defaults to false)
13725      */
13726     disabled : false,
13727     /**
13728      * @cfg {String} defaultEventAction
13729      * The method to call on the {@link Roo.EventObject} after this KeyNav intercepts a key.  Valid values are
13730      * {@link Roo.EventObject#stopEvent}, {@link Roo.EventObject#preventDefault} and
13731      * {@link Roo.EventObject#stopPropagation} (defaults to 'stopEvent')
13732      */
13733     defaultEventAction: "stopEvent",
13734     /**
13735      * @cfg {Boolean} forceKeyDown
13736      * Handle the keydown event instead of keypress (defaults to false).  KeyNav automatically does this for IE since
13737      * IE does not propagate special keys on keypress, but setting this to true will force other browsers to also
13738      * handle keydown instead of keypress.
13739      */
13740     forceKeyDown : false,
13741
13742     // private
13743     prepareEvent : function(e){
13744         var k = e.getKey();
13745         var h = this.keyToHandler[k];
13746         //if(h && this[h]){
13747         //    e.stopPropagation();
13748         //}
13749         if(Roo.isSafari && h && k >= 37 && k <= 40){
13750             e.stopEvent();
13751         }
13752     },
13753
13754     // private
13755     relay : function(e){
13756         var k = e.getKey();
13757         var h = this.keyToHandler[k];
13758         if(h && this[h]){
13759             if(this.doRelay(e, this[h], h) !== true){
13760                 e[this.defaultEventAction]();
13761             }
13762         }
13763     },
13764
13765     // private
13766     doRelay : function(e, h, hname){
13767         return h.call(this.scope || this, e);
13768     },
13769
13770     // possible handlers
13771     enter : false,
13772     left : false,
13773     right : false,
13774     up : false,
13775     down : false,
13776     tab : false,
13777     esc : false,
13778     pageUp : false,
13779     pageDown : false,
13780     del : false,
13781     home : false,
13782     end : false,
13783
13784     // quick lookup hash
13785     keyToHandler : {
13786         37 : "left",
13787         39 : "right",
13788         38 : "up",
13789         40 : "down",
13790         33 : "pageUp",
13791         34 : "pageDown",
13792         46 : "del",
13793         36 : "home",
13794         35 : "end",
13795         13 : "enter",
13796         27 : "esc",
13797         9  : "tab"
13798     },
13799
13800         /**
13801          * Enable this KeyNav
13802          */
13803         enable: function(){
13804                 if(this.disabled){
13805             // ie won't do special keys on keypress, no one else will repeat keys with keydown
13806             // the EventObject will normalize Safari automatically
13807             if(this.forceKeyDown || Roo.isIE || Roo.isAir){
13808                 this.el.on("keydown", this.relay,  this);
13809             }else{
13810                 this.el.on("keydown", this.prepareEvent,  this);
13811                 this.el.on("keypress", this.relay,  this);
13812             }
13813                     this.disabled = false;
13814                 }
13815         },
13816
13817         /**
13818          * Disable this KeyNav
13819          */
13820         disable: function(){
13821                 if(!this.disabled){
13822                     if(this.forceKeyDown || Roo.isIE || Roo.isAir){
13823                 this.el.un("keydown", this.relay);
13824             }else{
13825                 this.el.un("keydown", this.prepareEvent);
13826                 this.el.un("keypress", this.relay);
13827             }
13828                     this.disabled = true;
13829                 }
13830         }
13831 };/*
13832  * Based on:
13833  * Ext JS Library 1.1.1
13834  * Copyright(c) 2006-2007, Ext JS, LLC.
13835  *
13836  * Originally Released Under LGPL - original licence link has changed is not relivant.
13837  *
13838  * Fork - LGPL
13839  * <script type="text/javascript">
13840  */
13841
13842  
13843 /**
13844  * @class Roo.KeyMap
13845  * Handles mapping keys to actions for an element. One key map can be used for multiple actions.
13846  * The constructor accepts the same config object as defined by {@link #addBinding}.
13847  * If you bind a callback function to a KeyMap, anytime the KeyMap handles an expected key
13848  * combination it will call the function with this signature (if the match is a multi-key
13849  * combination the callback will still be called only once): (String key, Roo.EventObject e)
13850  * A KeyMap can also handle a string representation of keys.<br />
13851  * Usage:
13852  <pre><code>
13853 // map one key by key code
13854 var map = new Roo.KeyMap("my-element", {
13855     key: 13, // or Roo.EventObject.ENTER
13856     fn: myHandler,
13857     scope: myObject
13858 });
13859
13860 // map multiple keys to one action by string
13861 var map = new Roo.KeyMap("my-element", {
13862     key: "a\r\n\t",
13863     fn: myHandler,
13864     scope: myObject
13865 });
13866
13867 // map multiple keys to multiple actions by strings and array of codes
13868 var map = new Roo.KeyMap("my-element", [
13869     {
13870         key: [10,13],
13871         fn: function(){ alert("Return was pressed"); }
13872     }, {
13873         key: "abc",
13874         fn: function(){ alert('a, b or c was pressed'); }
13875     }, {
13876         key: "\t",
13877         ctrl:true,
13878         shift:true,
13879         fn: function(){ alert('Control + shift + tab was pressed.'); }
13880     }
13881 ]);
13882 </code></pre>
13883  * <b>Note: A KeyMap starts enabled</b>
13884  * @constructor
13885  * @param {String/HTMLElement/Roo.Element} el The element to bind to
13886  * @param {Object} config The config (see {@link #addBinding})
13887  * @param {String} eventName (optional) The event to bind to (defaults to "keydown")
13888  */
13889 Roo.KeyMap = function(el, config, eventName){
13890     this.el  = Roo.get(el);
13891     this.eventName = eventName || "keydown";
13892     this.bindings = [];
13893     if(config){
13894         this.addBinding(config);
13895     }
13896     this.enable();
13897 };
13898
13899 Roo.KeyMap.prototype = {
13900     /**
13901      * True to stop the event from bubbling and prevent the default browser action if the
13902      * key was handled by the KeyMap (defaults to false)
13903      * @type Boolean
13904      */
13905     stopEvent : false,
13906
13907     /**
13908      * Add a new binding to this KeyMap. The following config object properties are supported:
13909      * <pre>
13910 Property    Type             Description
13911 ----------  ---------------  ----------------------------------------------------------------------
13912 key         String/Array     A single keycode or an array of keycodes to handle
13913 shift       Boolean          True to handle key only when shift is pressed (defaults to false)
13914 ctrl        Boolean          True to handle key only when ctrl is pressed (defaults to false)
13915 alt         Boolean          True to handle key only when alt is pressed (defaults to false)
13916 fn          Function         The function to call when KeyMap finds the expected key combination
13917 scope       Object           The scope of the callback function
13918 </pre>
13919      *
13920      * Usage:
13921      * <pre><code>
13922 // Create a KeyMap
13923 var map = new Roo.KeyMap(document, {
13924     key: Roo.EventObject.ENTER,
13925     fn: handleKey,
13926     scope: this
13927 });
13928
13929 //Add a new binding to the existing KeyMap later
13930 map.addBinding({
13931     key: 'abc',
13932     shift: true,
13933     fn: handleKey,
13934     scope: this
13935 });
13936 </code></pre>
13937      * @param {Object/Array} config A single KeyMap config or an array of configs
13938      */
13939         addBinding : function(config){
13940         if(config instanceof Array){
13941             for(var i = 0, len = config.length; i < len; i++){
13942                 this.addBinding(config[i]);
13943             }
13944             return;
13945         }
13946         var keyCode = config.key,
13947             shift = config.shift, 
13948             ctrl = config.ctrl, 
13949             alt = config.alt,
13950             fn = config.fn,
13951             scope = config.scope;
13952         if(typeof keyCode == "string"){
13953             var ks = [];
13954             var keyString = keyCode.toUpperCase();
13955             for(var j = 0, len = keyString.length; j < len; j++){
13956                 ks.push(keyString.charCodeAt(j));
13957             }
13958             keyCode = ks;
13959         }
13960         var keyArray = keyCode instanceof Array;
13961         var handler = function(e){
13962             if((!shift || e.shiftKey) && (!ctrl || e.ctrlKey) &&  (!alt || e.altKey)){
13963                 var k = e.getKey();
13964                 if(keyArray){
13965                     for(var i = 0, len = keyCode.length; i < len; i++){
13966                         if(keyCode[i] == k){
13967                           if(this.stopEvent){
13968                               e.stopEvent();
13969                           }
13970                           fn.call(scope || window, k, e);
13971                           return;
13972                         }
13973                     }
13974                 }else{
13975                     if(k == keyCode){
13976                         if(this.stopEvent){
13977                            e.stopEvent();
13978                         }
13979                         fn.call(scope || window, k, e);
13980                     }
13981                 }
13982             }
13983         };
13984         this.bindings.push(handler);  
13985         },
13986
13987     /**
13988      * Shorthand for adding a single key listener
13989      * @param {Number/Array/Object} key Either the numeric key code, array of key codes or an object with the
13990      * following options:
13991      * {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
13992      * @param {Function} fn The function to call
13993      * @param {Object} scope (optional) The scope of the function
13994      */
13995     on : function(key, fn, scope){
13996         var keyCode, shift, ctrl, alt;
13997         if(typeof key == "object" && !(key instanceof Array)){
13998             keyCode = key.key;
13999             shift = key.shift;
14000             ctrl = key.ctrl;
14001             alt = key.alt;
14002         }else{
14003             keyCode = key;
14004         }
14005         this.addBinding({
14006             key: keyCode,
14007             shift: shift,
14008             ctrl: ctrl,
14009             alt: alt,
14010             fn: fn,
14011             scope: scope
14012         })
14013     },
14014
14015     // private
14016     handleKeyDown : function(e){
14017             if(this.enabled){ //just in case
14018             var b = this.bindings;
14019             for(var i = 0, len = b.length; i < len; i++){
14020                 b[i].call(this, e);
14021             }
14022             }
14023         },
14024         
14025         /**
14026          * Returns true if this KeyMap is enabled
14027          * @return {Boolean} 
14028          */
14029         isEnabled : function(){
14030             return this.enabled;  
14031         },
14032         
14033         /**
14034          * Enables this KeyMap
14035          */
14036         enable: function(){
14037                 if(!this.enabled){
14038                     this.el.on(this.eventName, this.handleKeyDown, this);
14039                     this.enabled = true;
14040                 }
14041         },
14042
14043         /**
14044          * Disable this KeyMap
14045          */
14046         disable: function(){
14047                 if(this.enabled){
14048                     this.el.removeListener(this.eventName, this.handleKeyDown, this);
14049                     this.enabled = false;
14050                 }
14051         }
14052 };/*
14053  * Based on:
14054  * Ext JS Library 1.1.1
14055  * Copyright(c) 2006-2007, Ext JS, LLC.
14056  *
14057  * Originally Released Under LGPL - original licence link has changed is not relivant.
14058  *
14059  * Fork - LGPL
14060  * <script type="text/javascript">
14061  */
14062
14063  
14064 /**
14065  * @class Roo.util.TextMetrics
14066  * Provides precise pixel measurements for blocks of text so that you can determine exactly how high and
14067  * wide, in pixels, a given block of text will be.
14068  * @singleton
14069  */
14070 Roo.util.TextMetrics = function(){
14071     var shared;
14072     return {
14073         /**
14074          * Measures the size of the specified text
14075          * @param {String/HTMLElement} el The element, dom node or id from which to copy existing CSS styles
14076          * that can affect the size of the rendered text
14077          * @param {String} text The text to measure
14078          * @param {Number} fixedWidth (optional) If the text will be multiline, you have to set a fixed width
14079          * in order to accurately measure the text height
14080          * @return {Object} An object containing the text's size {width: (width), height: (height)}
14081          */
14082         measure : function(el, text, fixedWidth){
14083             if(!shared){
14084                 shared = Roo.util.TextMetrics.Instance(el, fixedWidth);
14085             }
14086             shared.bind(el);
14087             shared.setFixedWidth(fixedWidth || 'auto');
14088             return shared.getSize(text);
14089         },
14090
14091         /**
14092          * Return a unique TextMetrics instance that can be bound directly to an element and reused.  This reduces
14093          * the overhead of multiple calls to initialize the style properties on each measurement.
14094          * @param {String/HTMLElement} el The element, dom node or id that the instance will be bound to
14095          * @param {Number} fixedWidth (optional) If the text will be multiline, you have to set a fixed width
14096          * in order to accurately measure the text height
14097          * @return {Roo.util.TextMetrics.Instance} instance The new instance
14098          */
14099         createInstance : function(el, fixedWidth){
14100             return Roo.util.TextMetrics.Instance(el, fixedWidth);
14101         }
14102     };
14103 }();
14104
14105  
14106
14107 Roo.util.TextMetrics.Instance = function(bindTo, fixedWidth){
14108     var ml = new Roo.Element(document.createElement('div'));
14109     document.body.appendChild(ml.dom);
14110     ml.position('absolute');
14111     ml.setLeftTop(-1000, -1000);
14112     ml.hide();
14113
14114     if(fixedWidth){
14115         ml.setWidth(fixedWidth);
14116     }
14117      
14118     var instance = {
14119         /**
14120          * Returns the size of the specified text based on the internal element's style and width properties
14121          * @memberOf Roo.util.TextMetrics.Instance#
14122          * @param {String} text The text to measure
14123          * @return {Object} An object containing the text's size {width: (width), height: (height)}
14124          */
14125         getSize : function(text){
14126             ml.update(text);
14127             var s = ml.getSize();
14128             ml.update('');
14129             return s;
14130         },
14131
14132         /**
14133          * Binds this TextMetrics instance to an element from which to copy existing CSS styles
14134          * that can affect the size of the rendered text
14135          * @memberOf Roo.util.TextMetrics.Instance#
14136          * @param {String/HTMLElement} el The element, dom node or id
14137          */
14138         bind : function(el){
14139             ml.setStyle(
14140                 Roo.fly(el).getStyles('font-size','font-style', 'font-weight', 'font-family','line-height')
14141             );
14142         },
14143
14144         /**
14145          * Sets a fixed width on the internal measurement element.  If the text will be multiline, you have
14146          * to set a fixed width in order to accurately measure the text height.
14147          * @memberOf Roo.util.TextMetrics.Instance#
14148          * @param {Number} width The width to set on the element
14149          */
14150         setFixedWidth : function(width){
14151             ml.setWidth(width);
14152         },
14153
14154         /**
14155          * Returns the measured width of the specified text
14156          * @memberOf Roo.util.TextMetrics.Instance#
14157          * @param {String} text The text to measure
14158          * @return {Number} width The width in pixels
14159          */
14160         getWidth : function(text){
14161             ml.dom.style.width = 'auto';
14162             return this.getSize(text).width;
14163         },
14164
14165         /**
14166          * Returns the measured height of the specified text.  For multiline text, be sure to call
14167          * {@link #setFixedWidth} if necessary.
14168          * @memberOf Roo.util.TextMetrics.Instance#
14169          * @param {String} text The text to measure
14170          * @return {Number} height The height in pixels
14171          */
14172         getHeight : function(text){
14173             return this.getSize(text).height;
14174         }
14175     };
14176
14177     instance.bind(bindTo);
14178
14179     return instance;
14180 };
14181
14182 // backwards compat
14183 Roo.Element.measureText = Roo.util.TextMetrics.measure;/*
14184  * Based on:
14185  * Ext JS Library 1.1.1
14186  * Copyright(c) 2006-2007, Ext JS, LLC.
14187  *
14188  * Originally Released Under LGPL - original licence link has changed is not relivant.
14189  *
14190  * Fork - LGPL
14191  * <script type="text/javascript">
14192  */
14193
14194 /**
14195  * @class Roo.state.Provider
14196  * Abstract base class for state provider implementations. This class provides methods
14197  * for encoding and decoding <b>typed</b> variables including dates and defines the 
14198  * Provider interface.
14199  */
14200 Roo.state.Provider = function(){
14201     /**
14202      * @event statechange
14203      * Fires when a state change occurs.
14204      * @param {Provider} this This state provider
14205      * @param {String} key The state key which was changed
14206      * @param {String} value The encoded value for the state
14207      */
14208     this.addEvents({
14209         "statechange": true
14210     });
14211     this.state = {};
14212     Roo.state.Provider.superclass.constructor.call(this);
14213 };
14214 Roo.extend(Roo.state.Provider, Roo.util.Observable, {
14215     /**
14216      * Returns the current value for a key
14217      * @param {String} name The key name
14218      * @param {Mixed} defaultValue A default value to return if the key's value is not found
14219      * @return {Mixed} The state data
14220      */
14221     get : function(name, defaultValue){
14222         return typeof this.state[name] == "undefined" ?
14223             defaultValue : this.state[name];
14224     },
14225     
14226     /**
14227      * Clears a value from the state
14228      * @param {String} name The key name
14229      */
14230     clear : function(name){
14231         delete this.state[name];
14232         this.fireEvent("statechange", this, name, null);
14233     },
14234     
14235     /**
14236      * Sets the value for a key
14237      * @param {String} name The key name
14238      * @param {Mixed} value The value to set
14239      */
14240     set : function(name, value){
14241         this.state[name] = value;
14242         this.fireEvent("statechange", this, name, value);
14243     },
14244     
14245     /**
14246      * Decodes a string previously encoded with {@link #encodeValue}.
14247      * @param {String} value The value to decode
14248      * @return {Mixed} The decoded value
14249      */
14250     decodeValue : function(cookie){
14251         var re = /^(a|n|d|b|s|o)\:(.*)$/;
14252         var matches = re.exec(unescape(cookie));
14253         if(!matches || !matches[1]) return; // non state cookie
14254         var type = matches[1];
14255         var v = matches[2];
14256         switch(type){
14257             case "n":
14258                 return parseFloat(v);
14259             case "d":
14260                 return new Date(Date.parse(v));
14261             case "b":
14262                 return (v == "1");
14263             case "a":
14264                 var all = [];
14265                 var values = v.split("^");
14266                 for(var i = 0, len = values.length; i < len; i++){
14267                     all.push(this.decodeValue(values[i]));
14268                 }
14269                 return all;
14270            case "o":
14271                 var all = {};
14272                 var values = v.split("^");
14273                 for(var i = 0, len = values.length; i < len; i++){
14274                     var kv = values[i].split("=");
14275                     all[kv[0]] = this.decodeValue(kv[1]);
14276                 }
14277                 return all;
14278            default:
14279                 return v;
14280         }
14281     },
14282     
14283     /**
14284      * Encodes a value including type information.  Decode with {@link #decodeValue}.
14285      * @param {Mixed} value The value to encode
14286      * @return {String} The encoded value
14287      */
14288     encodeValue : function(v){
14289         var enc;
14290         if(typeof v == "number"){
14291             enc = "n:" + v;
14292         }else if(typeof v == "boolean"){
14293             enc = "b:" + (v ? "1" : "0");
14294         }else if(v instanceof Date){
14295             enc = "d:" + v.toGMTString();
14296         }else if(v instanceof Array){
14297             var flat = "";
14298             for(var i = 0, len = v.length; i < len; i++){
14299                 flat += this.encodeValue(v[i]);
14300                 if(i != len-1) flat += "^";
14301             }
14302             enc = "a:" + flat;
14303         }else if(typeof v == "object"){
14304             var flat = "";
14305             for(var key in v){
14306                 if(typeof v[key] != "function"){
14307                     flat += key + "=" + this.encodeValue(v[key]) + "^";
14308                 }
14309             }
14310             enc = "o:" + flat.substring(0, flat.length-1);
14311         }else{
14312             enc = "s:" + v;
14313         }
14314         return escape(enc);        
14315     }
14316 });
14317
14318 /*
14319  * Based on:
14320  * Ext JS Library 1.1.1
14321  * Copyright(c) 2006-2007, Ext JS, LLC.
14322  *
14323  * Originally Released Under LGPL - original licence link has changed is not relivant.
14324  *
14325  * Fork - LGPL
14326  * <script type="text/javascript">
14327  */
14328 /**
14329  * @class Roo.state.Manager
14330  * This is the global state manager. By default all components that are "state aware" check this class
14331  * for state information if you don't pass them a custom state provider. In order for this class
14332  * to be useful, it must be initialized with a provider when your application initializes.
14333  <pre><code>
14334 // in your initialization function
14335 init : function(){
14336    Roo.state.Manager.setProvider(new Roo.state.CookieProvider());
14337    ...
14338    // supposed you have a {@link Roo.BorderLayout}
14339    var layout = new Roo.BorderLayout(...);
14340    layout.restoreState();
14341    // or a {Roo.BasicDialog}
14342    var dialog = new Roo.BasicDialog(...);
14343    dialog.restoreState();
14344  </code></pre>
14345  * @singleton
14346  */
14347 Roo.state.Manager = function(){
14348     var provider = new Roo.state.Provider();
14349     
14350     return {
14351         /**
14352          * Configures the default state provider for your application
14353          * @param {Provider} stateProvider The state provider to set
14354          */
14355         setProvider : function(stateProvider){
14356             provider = stateProvider;
14357         },
14358         
14359         /**
14360          * Returns the current value for a key
14361          * @param {String} name The key name
14362          * @param {Mixed} defaultValue The default value to return if the key lookup does not match
14363          * @return {Mixed} The state data
14364          */
14365         get : function(key, defaultValue){
14366             return provider.get(key, defaultValue);
14367         },
14368         
14369         /**
14370          * Sets the value for a key
14371          * @param {String} name The key name
14372          * @param {Mixed} value The state data
14373          */
14374          set : function(key, value){
14375             provider.set(key, value);
14376         },
14377         
14378         /**
14379          * Clears a value from the state
14380          * @param {String} name The key name
14381          */
14382         clear : function(key){
14383             provider.clear(key);
14384         },
14385         
14386         /**
14387          * Gets the currently configured state provider
14388          * @return {Provider} The state provider
14389          */
14390         getProvider : function(){
14391             return provider;
14392         }
14393     };
14394 }();
14395 /*
14396  * Based on:
14397  * Ext JS Library 1.1.1
14398  * Copyright(c) 2006-2007, Ext JS, LLC.
14399  *
14400  * Originally Released Under LGPL - original licence link has changed is not relivant.
14401  *
14402  * Fork - LGPL
14403  * <script type="text/javascript">
14404  */
14405 /**
14406  * @class Roo.state.CookieProvider
14407  * @extends Roo.state.Provider
14408  * The default Provider implementation which saves state via cookies.
14409  * <br />Usage:
14410  <pre><code>
14411    var cp = new Roo.state.CookieProvider({
14412        path: "/cgi-bin/",
14413        expires: new Date(new Date().getTime()+(1000*60*60*24*30)); //30 days
14414        domain: "roojs.com"
14415    })
14416    Roo.state.Manager.setProvider(cp);
14417  </code></pre>
14418  * @cfg {String} path The path for which the cookie is active (defaults to root '/' which makes it active for all pages in the site)
14419  * @cfg {Date} expires The cookie expiration date (defaults to 7 days from now)
14420  * @cfg {String} domain The domain to save the cookie for.  Note that you cannot specify a different domain than
14421  * your page is on, but you can specify a sub-domain, or simply the domain itself like 'roojs.com' to include
14422  * all sub-domains if you need to access cookies across different sub-domains (defaults to null which uses the same
14423  * domain the page is running on including the 'www' like 'www.roojs.com')
14424  * @cfg {Boolean} secure True if the site is using SSL (defaults to false)
14425  * @constructor
14426  * Create a new CookieProvider
14427  * @param {Object} config The configuration object
14428  */
14429 Roo.state.CookieProvider = function(config){
14430     Roo.state.CookieProvider.superclass.constructor.call(this);
14431     this.path = "/";
14432     this.expires = new Date(new Date().getTime()+(1000*60*60*24*7)); //7 days
14433     this.domain = null;
14434     this.secure = false;
14435     Roo.apply(this, config);
14436     this.state = this.readCookies();
14437 };
14438
14439 Roo.extend(Roo.state.CookieProvider, Roo.state.Provider, {
14440     // private
14441     set : function(name, value){
14442         if(typeof value == "undefined" || value === null){
14443             this.clear(name);
14444             return;
14445         }
14446         this.setCookie(name, value);
14447         Roo.state.CookieProvider.superclass.set.call(this, name, value);
14448     },
14449
14450     // private
14451     clear : function(name){
14452         this.clearCookie(name);
14453         Roo.state.CookieProvider.superclass.clear.call(this, name);
14454     },
14455
14456     // private
14457     readCookies : function(){
14458         var cookies = {};
14459         var c = document.cookie + ";";
14460         var re = /\s?(.*?)=(.*?);/g;
14461         var matches;
14462         while((matches = re.exec(c)) != null){
14463             var name = matches[1];
14464             var value = matches[2];
14465             if(name && name.substring(0,3) == "ys-"){
14466                 cookies[name.substr(3)] = this.decodeValue(value);
14467             }
14468         }
14469         return cookies;
14470     },
14471
14472     // private
14473     setCookie : function(name, value){
14474         document.cookie = "ys-"+ name + "=" + this.encodeValue(value) +
14475            ((this.expires == null) ? "" : ("; expires=" + this.expires.toGMTString())) +
14476            ((this.path == null) ? "" : ("; path=" + this.path)) +
14477            ((this.domain == null) ? "" : ("; domain=" + this.domain)) +
14478            ((this.secure == true) ? "; secure" : "");
14479     },
14480
14481     // private
14482     clearCookie : function(name){
14483         document.cookie = "ys-" + name + "=null; expires=Thu, 01-Jan-70 00:00:01 GMT" +
14484            ((this.path == null) ? "" : ("; path=" + this.path)) +
14485            ((this.domain == null) ? "" : ("; domain=" + this.domain)) +
14486            ((this.secure == true) ? "; secure" : "");
14487     }
14488 });/*
14489  * Based on:
14490  * Ext JS Library 1.1.1
14491  * Copyright(c) 2006-2007, Ext JS, LLC.
14492  *
14493  * Originally Released Under LGPL - original licence link has changed is not relivant.
14494  *
14495  * Fork - LGPL
14496  * <script type="text/javascript">
14497  */
14498
14499
14500
14501 /*
14502  * These classes are derivatives of the similarly named classes in the YUI Library.
14503  * The original license:
14504  * Copyright (c) 2006, Yahoo! Inc. All rights reserved.
14505  * Code licensed under the BSD License:
14506  * http://developer.yahoo.net/yui/license.txt
14507  */
14508
14509 (function() {
14510
14511 var Event=Roo.EventManager;
14512 var Dom=Roo.lib.Dom;
14513
14514 /**
14515  * @class Roo.dd.DragDrop
14516  * @extends Roo.util.Observable
14517  * Defines the interface and base operation of items that that can be
14518  * dragged or can be drop targets.  It was designed to be extended, overriding
14519  * the event handlers for startDrag, onDrag, onDragOver and onDragOut.
14520  * Up to three html elements can be associated with a DragDrop instance:
14521  * <ul>
14522  * <li>linked element: the element that is passed into the constructor.
14523  * This is the element which defines the boundaries for interaction with
14524  * other DragDrop objects.</li>
14525  * <li>handle element(s): The drag operation only occurs if the element that
14526  * was clicked matches a handle element.  By default this is the linked
14527  * element, but there are times that you will want only a portion of the
14528  * linked element to initiate the drag operation, and the setHandleElId()
14529  * method provides a way to define this.</li>
14530  * <li>drag element: this represents the element that would be moved along
14531  * with the cursor during a drag operation.  By default, this is the linked
14532  * element itself as in {@link Roo.dd.DD}.  setDragElId() lets you define
14533  * a separate element that would be moved, as in {@link Roo.dd.DDProxy}.
14534  * </li>
14535  * </ul>
14536  * This class should not be instantiated until the onload event to ensure that
14537  * the associated elements are available.
14538  * The following would define a DragDrop obj that would interact with any
14539  * other DragDrop obj in the "group1" group:
14540  * <pre>
14541  *  dd = new Roo.dd.DragDrop("div1", "group1");
14542  * </pre>
14543  * Since none of the event handlers have been implemented, nothing would
14544  * actually happen if you were to run the code above.  Normally you would
14545  * override this class or one of the default implementations, but you can
14546  * also override the methods you want on an instance of the class...
14547  * <pre>
14548  *  dd.onDragDrop = function(e, id) {
14549  *  &nbsp;&nbsp;alert("dd was dropped on " + id);
14550  *  }
14551  * </pre>
14552  * @constructor
14553  * @param {String} id of the element that is linked to this instance
14554  * @param {String} sGroup the group of related DragDrop objects
14555  * @param {object} config an object containing configurable attributes
14556  *                Valid properties for DragDrop:
14557  *                    padding, isTarget, maintainOffset, primaryButtonOnly
14558  */
14559 Roo.dd.DragDrop = function(id, sGroup, config) {
14560     if (id) {
14561         this.init(id, sGroup, config);
14562     }
14563     
14564 };
14565
14566 Roo.extend(Roo.dd.DragDrop, Roo.util.Observable , {
14567
14568     /**
14569      * The id of the element associated with this object.  This is what we
14570      * refer to as the "linked element" because the size and position of
14571      * this element is used to determine when the drag and drop objects have
14572      * interacted.
14573      * @property id
14574      * @type String
14575      */
14576     id: null,
14577
14578     /**
14579      * Configuration attributes passed into the constructor
14580      * @property config
14581      * @type object
14582      */
14583     config: null,
14584
14585     /**
14586      * The id of the element that will be dragged.  By default this is same
14587      * as the linked element , but could be changed to another element. Ex:
14588      * Roo.dd.DDProxy
14589      * @property dragElId
14590      * @type String
14591      * @private
14592      */
14593     dragElId: null,
14594
14595     /**
14596      * the id of the element that initiates the drag operation.  By default
14597      * this is the linked element, but could be changed to be a child of this
14598      * element.  This lets us do things like only starting the drag when the
14599      * header element within the linked html element is clicked.
14600      * @property handleElId
14601      * @type String
14602      * @private
14603      */
14604     handleElId: null,
14605
14606     /**
14607      * An associative array of HTML tags that will be ignored if clicked.
14608      * @property invalidHandleTypes
14609      * @type {string: string}
14610      */
14611     invalidHandleTypes: null,
14612
14613     /**
14614      * An associative array of ids for elements that will be ignored if clicked
14615      * @property invalidHandleIds
14616      * @type {string: string}
14617      */
14618     invalidHandleIds: null,
14619
14620     /**
14621      * An indexted array of css class names for elements that will be ignored
14622      * if clicked.
14623      * @property invalidHandleClasses
14624      * @type string[]
14625      */
14626     invalidHandleClasses: null,
14627
14628     /**
14629      * The linked element's absolute X position at the time the drag was
14630      * started
14631      * @property startPageX
14632      * @type int
14633      * @private
14634      */
14635     startPageX: 0,
14636
14637     /**
14638      * The linked element's absolute X position at the time the drag was
14639      * started
14640      * @property startPageY
14641      * @type int
14642      * @private
14643      */
14644     startPageY: 0,
14645
14646     /**
14647      * The group defines a logical collection of DragDrop objects that are
14648      * related.  Instances only get events when interacting with other
14649      * DragDrop object in the same group.  This lets us define multiple
14650      * groups using a single DragDrop subclass if we want.
14651      * @property groups
14652      * @type {string: string}
14653      */
14654     groups: null,
14655
14656     /**
14657      * Individual drag/drop instances can be locked.  This will prevent
14658      * onmousedown start drag.
14659      * @property locked
14660      * @type boolean
14661      * @private
14662      */
14663     locked: false,
14664
14665     /**
14666      * Lock this instance
14667      * @method lock
14668      */
14669     lock: function() { this.locked = true; },
14670
14671     /**
14672      * Unlock this instace
14673      * @method unlock
14674      */
14675     unlock: function() { this.locked = false; },
14676
14677     /**
14678      * By default, all insances can be a drop target.  This can be disabled by
14679      * setting isTarget to false.
14680      * @method isTarget
14681      * @type boolean
14682      */
14683     isTarget: true,
14684
14685     /**
14686      * The padding configured for this drag and drop object for calculating
14687      * the drop zone intersection with this object.
14688      * @method padding
14689      * @type int[]
14690      */
14691     padding: null,
14692
14693     /**
14694      * Cached reference to the linked element
14695      * @property _domRef
14696      * @private
14697      */
14698     _domRef: null,
14699
14700     /**
14701      * Internal typeof flag
14702      * @property __ygDragDrop
14703      * @private
14704      */
14705     __ygDragDrop: true,
14706
14707     /**
14708      * Set to true when horizontal contraints are applied
14709      * @property constrainX
14710      * @type boolean
14711      * @private
14712      */
14713     constrainX: false,
14714
14715     /**
14716      * Set to true when vertical contraints are applied
14717      * @property constrainY
14718      * @type boolean
14719      * @private
14720      */
14721     constrainY: false,
14722
14723     /**
14724      * The left constraint
14725      * @property minX
14726      * @type int
14727      * @private
14728      */
14729     minX: 0,
14730
14731     /**
14732      * The right constraint
14733      * @property maxX
14734      * @type int
14735      * @private
14736      */
14737     maxX: 0,
14738
14739     /**
14740      * The up constraint
14741      * @property minY
14742      * @type int
14743      * @type int
14744      * @private
14745      */
14746     minY: 0,
14747
14748     /**
14749      * The down constraint
14750      * @property maxY
14751      * @type int
14752      * @private
14753      */
14754     maxY: 0,
14755
14756     /**
14757      * Maintain offsets when we resetconstraints.  Set to true when you want
14758      * the position of the element relative to its parent to stay the same
14759      * when the page changes
14760      *
14761      * @property maintainOffset
14762      * @type boolean
14763      */
14764     maintainOffset: false,
14765
14766     /**
14767      * Array of pixel locations the element will snap to if we specified a
14768      * horizontal graduation/interval.  This array is generated automatically
14769      * when you define a tick interval.
14770      * @property xTicks
14771      * @type int[]
14772      */
14773     xTicks: null,
14774
14775     /**
14776      * Array of pixel locations the element will snap to if we specified a
14777      * vertical graduation/interval.  This array is generated automatically
14778      * when you define a tick interval.
14779      * @property yTicks
14780      * @type int[]
14781      */
14782     yTicks: null,
14783
14784     /**
14785      * By default the drag and drop instance will only respond to the primary
14786      * button click (left button for a right-handed mouse).  Set to true to
14787      * allow drag and drop to start with any mouse click that is propogated
14788      * by the browser
14789      * @property primaryButtonOnly
14790      * @type boolean
14791      */
14792     primaryButtonOnly: true,
14793
14794     /**
14795      * The availabe property is false until the linked dom element is accessible.
14796      * @property available
14797      * @type boolean
14798      */
14799     available: false,
14800
14801     /**
14802      * By default, drags can only be initiated if the mousedown occurs in the
14803      * region the linked element is.  This is done in part to work around a
14804      * bug in some browsers that mis-report the mousedown if the previous
14805      * mouseup happened outside of the window.  This property is set to true
14806      * if outer handles are defined.
14807      *
14808      * @property hasOuterHandles
14809      * @type boolean
14810      * @default false
14811      */
14812     hasOuterHandles: false,
14813
14814     /**
14815      * Code that executes immediately before the startDrag event
14816      * @method b4StartDrag
14817      * @private
14818      */
14819     b4StartDrag: function(x, y) { },
14820
14821     /**
14822      * Abstract method called after a drag/drop object is clicked
14823      * and the drag or mousedown time thresholds have beeen met.
14824      * @method startDrag
14825      * @param {int} X click location
14826      * @param {int} Y click location
14827      */
14828     startDrag: function(x, y) { /* override this */ },
14829
14830     /**
14831      * Code that executes immediately before the onDrag event
14832      * @method b4Drag
14833      * @private
14834      */
14835     b4Drag: function(e) { },
14836
14837     /**
14838      * Abstract method called during the onMouseMove event while dragging an
14839      * object.
14840      * @method onDrag
14841      * @param {Event} e the mousemove event
14842      */
14843     onDrag: function(e) { /* override this */ },
14844
14845     /**
14846      * Abstract method called when this element fist begins hovering over
14847      * another DragDrop obj
14848      * @method onDragEnter
14849      * @param {Event} e the mousemove event
14850      * @param {String|DragDrop[]} id In POINT mode, the element
14851      * id this is hovering over.  In INTERSECT mode, an array of one or more
14852      * dragdrop items being hovered over.
14853      */
14854     onDragEnter: function(e, id) { /* override this */ },
14855
14856     /**
14857      * Code that executes immediately before the onDragOver event
14858      * @method b4DragOver
14859      * @private
14860      */
14861     b4DragOver: function(e) { },
14862
14863     /**
14864      * Abstract method called when this element is hovering over another
14865      * DragDrop obj
14866      * @method onDragOver
14867      * @param {Event} e the mousemove event
14868      * @param {String|DragDrop[]} id In POINT mode, the element
14869      * id this is hovering over.  In INTERSECT mode, an array of dd items
14870      * being hovered over.
14871      */
14872     onDragOver: function(e, id) { /* override this */ },
14873
14874     /**
14875      * Code that executes immediately before the onDragOut event
14876      * @method b4DragOut
14877      * @private
14878      */
14879     b4DragOut: function(e) { },
14880
14881     /**
14882      * Abstract method called when we are no longer hovering over an element
14883      * @method onDragOut
14884      * @param {Event} e the mousemove event
14885      * @param {String|DragDrop[]} id In POINT mode, the element
14886      * id this was hovering over.  In INTERSECT mode, an array of dd items
14887      * that the mouse is no longer over.
14888      */
14889     onDragOut: function(e, id) { /* override this */ },
14890
14891     /**
14892      * Code that executes immediately before the onDragDrop event
14893      * @method b4DragDrop
14894      * @private
14895      */
14896     b4DragDrop: function(e) { },
14897
14898     /**
14899      * Abstract method called when this item is dropped on another DragDrop
14900      * obj
14901      * @method onDragDrop
14902      * @param {Event} e the mouseup event
14903      * @param {String|DragDrop[]} id In POINT mode, the element
14904      * id this was dropped on.  In INTERSECT mode, an array of dd items this
14905      * was dropped on.
14906      */
14907     onDragDrop: function(e, id) { /* override this */ },
14908
14909     /**
14910      * Abstract method called when this item is dropped on an area with no
14911      * drop target
14912      * @method onInvalidDrop
14913      * @param {Event} e the mouseup event
14914      */
14915     onInvalidDrop: function(e) { /* override this */ },
14916
14917     /**
14918      * Code that executes immediately before the endDrag event
14919      * @method b4EndDrag
14920      * @private
14921      */
14922     b4EndDrag: function(e) { },
14923
14924     /**
14925      * Fired when we are done dragging the object
14926      * @method endDrag
14927      * @param {Event} e the mouseup event
14928      */
14929     endDrag: function(e) { /* override this */ },
14930
14931     /**
14932      * Code executed immediately before the onMouseDown event
14933      * @method b4MouseDown
14934      * @param {Event} e the mousedown event
14935      * @private
14936      */
14937     b4MouseDown: function(e) {  },
14938
14939     /**
14940      * Event handler that fires when a drag/drop obj gets a mousedown
14941      * @method onMouseDown
14942      * @param {Event} e the mousedown event
14943      */
14944     onMouseDown: function(e) { /* override this */ },
14945
14946     /**
14947      * Event handler that fires when a drag/drop obj gets a mouseup
14948      * @method onMouseUp
14949      * @param {Event} e the mouseup event
14950      */
14951     onMouseUp: function(e) { /* override this */ },
14952
14953     /**
14954      * Override the onAvailable method to do what is needed after the initial
14955      * position was determined.
14956      * @method onAvailable
14957      */
14958     onAvailable: function () {
14959     },
14960
14961     /*
14962      * Provides default constraint padding to "constrainTo" elements (defaults to {left: 0, right:0, top:0, bottom:0}).
14963      * @type Object
14964      */
14965     defaultPadding : {left:0, right:0, top:0, bottom:0},
14966
14967     /*
14968      * Initializes the drag drop object's constraints to restrict movement to a certain element.
14969  *
14970  * Usage:
14971  <pre><code>
14972  var dd = new Roo.dd.DDProxy("dragDiv1", "proxytest",
14973                 { dragElId: "existingProxyDiv" });
14974  dd.startDrag = function(){
14975      this.constrainTo("parent-id");
14976  };
14977  </code></pre>
14978  * Or you can initalize it using the {@link Roo.Element} object:
14979  <pre><code>
14980  Roo.get("dragDiv1").initDDProxy("proxytest", {dragElId: "existingProxyDiv"}, {
14981      startDrag : function(){
14982          this.constrainTo("parent-id");
14983      }
14984  });
14985  </code></pre>
14986      * @param {String/HTMLElement/Element} constrainTo The element to constrain to.
14987      * @param {Object/Number} pad (optional) Pad provides a way to specify "padding" of the constraints,
14988      * and can be either a number for symmetrical padding (4 would be equal to {left:4, right:4, top:4, bottom:4}) or
14989      * an object containing the sides to pad. For example: {right:10, bottom:10}
14990      * @param {Boolean} inContent (optional) Constrain the draggable in the content box of the element (inside padding and borders)
14991      */
14992     constrainTo : function(constrainTo, pad, inContent){
14993         if(typeof pad == "number"){
14994             pad = {left: pad, right:pad, top:pad, bottom:pad};
14995         }
14996         pad = pad || this.defaultPadding;
14997         var b = Roo.get(this.getEl()).getBox();
14998         var ce = Roo.get(constrainTo);
14999         var s = ce.getScroll();
15000         var c, cd = ce.dom;
15001         if(cd == document.body){
15002             c = { x: s.left, y: s.top, width: Roo.lib.Dom.getViewWidth(), height: Roo.lib.Dom.getViewHeight()};
15003         }else{
15004             xy = ce.getXY();
15005             c = {x : xy[0]+s.left, y: xy[1]+s.top, width: cd.clientWidth, height: cd.clientHeight};
15006         }
15007
15008
15009         var topSpace = b.y - c.y;
15010         var leftSpace = b.x - c.x;
15011
15012         this.resetConstraints();
15013         this.setXConstraint(leftSpace - (pad.left||0), // left
15014                 c.width - leftSpace - b.width - (pad.right||0) //right
15015         );
15016         this.setYConstraint(topSpace - (pad.top||0), //top
15017                 c.height - topSpace - b.height - (pad.bottom||0) //bottom
15018         );
15019     },
15020
15021     /**
15022      * Returns a reference to the linked element
15023      * @method getEl
15024      * @return {HTMLElement} the html element
15025      */
15026     getEl: function() {
15027         if (!this._domRef) {
15028             this._domRef = Roo.getDom(this.id);
15029         }
15030
15031         return this._domRef;
15032     },
15033
15034     /**
15035      * Returns a reference to the actual element to drag.  By default this is
15036      * the same as the html element, but it can be assigned to another
15037      * element. An example of this can be found in Roo.dd.DDProxy
15038      * @method getDragEl
15039      * @return {HTMLElement} the html element
15040      */
15041     getDragEl: function() {
15042         return Roo.getDom(this.dragElId);
15043     },
15044
15045     /**
15046      * Sets up the DragDrop object.  Must be called in the constructor of any
15047      * Roo.dd.DragDrop subclass
15048      * @method init
15049      * @param id the id of the linked element
15050      * @param {String} sGroup the group of related items
15051      * @param {object} config configuration attributes
15052      */
15053     init: function(id, sGroup, config) {
15054         this.initTarget(id, sGroup, config);
15055         Event.on(this.id, "mousedown", this.handleMouseDown, this);
15056         // Event.on(this.id, "selectstart", Event.preventDefault);
15057     },
15058
15059     /**
15060      * Initializes Targeting functionality only... the object does not
15061      * get a mousedown handler.
15062      * @method initTarget
15063      * @param id the id of the linked element
15064      * @param {String} sGroup the group of related items
15065      * @param {object} config configuration attributes
15066      */
15067     initTarget: function(id, sGroup, config) {
15068
15069         // configuration attributes
15070         this.config = config || {};
15071
15072         // create a local reference to the drag and drop manager
15073         this.DDM = Roo.dd.DDM;
15074         // initialize the groups array
15075         this.groups = {};
15076
15077         // assume that we have an element reference instead of an id if the
15078         // parameter is not a string
15079         if (typeof id !== "string") {
15080             id = Roo.id(id);
15081         }
15082
15083         // set the id
15084         this.id = id;
15085
15086         // add to an interaction group
15087         this.addToGroup((sGroup) ? sGroup : "default");
15088
15089         // We don't want to register this as the handle with the manager
15090         // so we just set the id rather than calling the setter.
15091         this.handleElId = id;
15092
15093         // the linked element is the element that gets dragged by default
15094         this.setDragElId(id);
15095
15096         // by default, clicked anchors will not start drag operations.
15097         this.invalidHandleTypes = { A: "A" };
15098         this.invalidHandleIds = {};
15099         this.invalidHandleClasses = [];
15100
15101         this.applyConfig();
15102
15103         this.handleOnAvailable();
15104     },
15105
15106     /**
15107      * Applies the configuration parameters that were passed into the constructor.
15108      * This is supposed to happen at each level through the inheritance chain.  So
15109      * a DDProxy implentation will execute apply config on DDProxy, DD, and
15110      * DragDrop in order to get all of the parameters that are available in
15111      * each object.
15112      * @method applyConfig
15113      */
15114     applyConfig: function() {
15115
15116         // configurable properties:
15117         //    padding, isTarget, maintainOffset, primaryButtonOnly
15118         this.padding           = this.config.padding || [0, 0, 0, 0];
15119         this.isTarget          = (this.config.isTarget !== false);
15120         this.maintainOffset    = (this.config.maintainOffset);
15121         this.primaryButtonOnly = (this.config.primaryButtonOnly !== false);
15122
15123     },
15124
15125     /**
15126      * Executed when the linked element is available
15127      * @method handleOnAvailable
15128      * @private
15129      */
15130     handleOnAvailable: function() {
15131         this.available = true;
15132         this.resetConstraints();
15133         this.onAvailable();
15134     },
15135
15136      /**
15137      * Configures the padding for the target zone in px.  Effectively expands
15138      * (or reduces) the virtual object size for targeting calculations.
15139      * Supports css-style shorthand; if only one parameter is passed, all sides
15140      * will have that padding, and if only two are passed, the top and bottom
15141      * will have the first param, the left and right the second.
15142      * @method setPadding
15143      * @param {int} iTop    Top pad
15144      * @param {int} iRight  Right pad
15145      * @param {int} iBot    Bot pad
15146      * @param {int} iLeft   Left pad
15147      */
15148     setPadding: function(iTop, iRight, iBot, iLeft) {
15149         // this.padding = [iLeft, iRight, iTop, iBot];
15150         if (!iRight && 0 !== iRight) {
15151             this.padding = [iTop, iTop, iTop, iTop];
15152         } else if (!iBot && 0 !== iBot) {
15153             this.padding = [iTop, iRight, iTop, iRight];
15154         } else {
15155             this.padding = [iTop, iRight, iBot, iLeft];
15156         }
15157     },
15158
15159     /**
15160      * Stores the initial placement of the linked element.
15161      * @method setInitialPosition
15162      * @param {int} diffX   the X offset, default 0
15163      * @param {int} diffY   the Y offset, default 0
15164      */
15165     setInitPosition: function(diffX, diffY) {
15166         var el = this.getEl();
15167
15168         if (!this.DDM.verifyEl(el)) {
15169             return;
15170         }
15171
15172         var dx = diffX || 0;
15173         var dy = diffY || 0;
15174
15175         var p = Dom.getXY( el );
15176
15177         this.initPageX = p[0] - dx;
15178         this.initPageY = p[1] - dy;
15179
15180         this.lastPageX = p[0];
15181         this.lastPageY = p[1];
15182
15183
15184         this.setStartPosition(p);
15185     },
15186
15187     /**
15188      * Sets the start position of the element.  This is set when the obj
15189      * is initialized, the reset when a drag is started.
15190      * @method setStartPosition
15191      * @param pos current position (from previous lookup)
15192      * @private
15193      */
15194     setStartPosition: function(pos) {
15195         var p = pos || Dom.getXY( this.getEl() );
15196         this.deltaSetXY = null;
15197
15198         this.startPageX = p[0];
15199         this.startPageY = p[1];
15200     },
15201
15202     /**
15203      * Add this instance to a group of related drag/drop objects.  All
15204      * instances belong to at least one group, and can belong to as many
15205      * groups as needed.
15206      * @method addToGroup
15207      * @param sGroup {string} the name of the group
15208      */
15209     addToGroup: function(sGroup) {
15210         this.groups[sGroup] = true;
15211         this.DDM.regDragDrop(this, sGroup);
15212     },
15213
15214     /**
15215      * Remove's this instance from the supplied interaction group
15216      * @method removeFromGroup
15217      * @param {string}  sGroup  The group to drop
15218      */
15219     removeFromGroup: function(sGroup) {
15220         if (this.groups[sGroup]) {
15221             delete this.groups[sGroup];
15222         }
15223
15224         this.DDM.removeDDFromGroup(this, sGroup);
15225     },
15226
15227     /**
15228      * Allows you to specify that an element other than the linked element
15229      * will be moved with the cursor during a drag
15230      * @method setDragElId
15231      * @param id {string} the id of the element that will be used to initiate the drag
15232      */
15233     setDragElId: function(id) {
15234         this.dragElId = id;
15235     },
15236
15237     /**
15238      * Allows you to specify a child of the linked element that should be
15239      * used to initiate the drag operation.  An example of this would be if
15240      * you have a content div with text and links.  Clicking anywhere in the
15241      * content area would normally start the drag operation.  Use this method
15242      * to specify that an element inside of the content div is the element
15243      * that starts the drag operation.
15244      * @method setHandleElId
15245      * @param id {string} the id of the element that will be used to
15246      * initiate the drag.
15247      */
15248     setHandleElId: function(id) {
15249         if (typeof id !== "string") {
15250             id = Roo.id(id);
15251         }
15252         this.handleElId = id;
15253         this.DDM.regHandle(this.id, id);
15254     },
15255
15256     /**
15257      * Allows you to set an element outside of the linked element as a drag
15258      * handle
15259      * @method setOuterHandleElId
15260      * @param id the id of the element that will be used to initiate the drag
15261      */
15262     setOuterHandleElId: function(id) {
15263         if (typeof id !== "string") {
15264             id = Roo.id(id);
15265         }
15266         Event.on(id, "mousedown",
15267                 this.handleMouseDown, this);
15268         this.setHandleElId(id);
15269
15270         this.hasOuterHandles = true;
15271     },
15272
15273     /**
15274      * Remove all drag and drop hooks for this element
15275      * @method unreg
15276      */
15277     unreg: function() {
15278         Event.un(this.id, "mousedown",
15279                 this.handleMouseDown);
15280         this._domRef = null;
15281         this.DDM._remove(this);
15282     },
15283
15284     destroy : function(){
15285         this.unreg();
15286     },
15287
15288     /**
15289      * Returns true if this instance is locked, or the drag drop mgr is locked
15290      * (meaning that all drag/drop is disabled on the page.)
15291      * @method isLocked
15292      * @return {boolean} true if this obj or all drag/drop is locked, else
15293      * false
15294      */
15295     isLocked: function() {
15296         return (this.DDM.isLocked() || this.locked);
15297     },
15298
15299     /**
15300      * Fired when this object is clicked
15301      * @method handleMouseDown
15302      * @param {Event} e
15303      * @param {Roo.dd.DragDrop} oDD the clicked dd object (this dd obj)
15304      * @private
15305      */
15306     handleMouseDown: function(e, oDD){
15307         if (this.primaryButtonOnly && e.button != 0) {
15308             return;
15309         }
15310
15311         if (this.isLocked()) {
15312             return;
15313         }
15314
15315         this.DDM.refreshCache(this.groups);
15316
15317         var pt = new Roo.lib.Point(Roo.lib.Event.getPageX(e), Roo.lib.Event.getPageY(e));
15318         if (!this.hasOuterHandles && !this.DDM.isOverTarget(pt, this) )  {
15319         } else {
15320             if (this.clickValidator(e)) {
15321
15322                 // set the initial element position
15323                 this.setStartPosition();
15324
15325
15326                 this.b4MouseDown(e);
15327                 this.onMouseDown(e);
15328
15329                 this.DDM.handleMouseDown(e, this);
15330
15331                 this.DDM.stopEvent(e);
15332             } else {
15333
15334
15335             }
15336         }
15337     },
15338
15339     clickValidator: function(e) {
15340         var target = e.getTarget();
15341         return ( this.isValidHandleChild(target) &&
15342                     (this.id == this.handleElId ||
15343                         this.DDM.handleWasClicked(target, this.id)) );
15344     },
15345
15346     /**
15347      * Allows you to specify a tag name that should not start a drag operation
15348      * when clicked.  This is designed to facilitate embedding links within a
15349      * drag handle that do something other than start the drag.
15350      * @method addInvalidHandleType
15351      * @param {string} tagName the type of element to exclude
15352      */
15353     addInvalidHandleType: function(tagName) {
15354         var type = tagName.toUpperCase();
15355         this.invalidHandleTypes[type] = type;
15356     },
15357
15358     /**
15359      * Lets you to specify an element id for a child of a drag handle
15360      * that should not initiate a drag
15361      * @method addInvalidHandleId
15362      * @param {string} id the element id of the element you wish to ignore
15363      */
15364     addInvalidHandleId: function(id) {
15365         if (typeof id !== "string") {
15366             id = Roo.id(id);
15367         }
15368         this.invalidHandleIds[id] = id;
15369     },
15370
15371     /**
15372      * Lets you specify a css class of elements that will not initiate a drag
15373      * @method addInvalidHandleClass
15374      * @param {string} cssClass the class of the elements you wish to ignore
15375      */
15376     addInvalidHandleClass: function(cssClass) {
15377         this.invalidHandleClasses.push(cssClass);
15378     },
15379
15380     /**
15381      * Unsets an excluded tag name set by addInvalidHandleType
15382      * @method removeInvalidHandleType
15383      * @param {string} tagName the type of element to unexclude
15384      */
15385     removeInvalidHandleType: function(tagName) {
15386         var type = tagName.toUpperCase();
15387         // this.invalidHandleTypes[type] = null;
15388         delete this.invalidHandleTypes[type];
15389     },
15390
15391     /**
15392      * Unsets an invalid handle id
15393      * @method removeInvalidHandleId
15394      * @param {string} id the id of the element to re-enable
15395      */
15396     removeInvalidHandleId: function(id) {
15397         if (typeof id !== "string") {
15398             id = Roo.id(id);
15399         }
15400         delete this.invalidHandleIds[id];
15401     },
15402
15403     /**
15404      * Unsets an invalid css class
15405      * @method removeInvalidHandleClass
15406      * @param {string} cssClass the class of the element(s) you wish to
15407      * re-enable
15408      */
15409     removeInvalidHandleClass: function(cssClass) {
15410         for (var i=0, len=this.invalidHandleClasses.length; i<len; ++i) {
15411             if (this.invalidHandleClasses[i] == cssClass) {
15412                 delete this.invalidHandleClasses[i];
15413             }
15414         }
15415     },
15416
15417     /**
15418      * Checks the tag exclusion list to see if this click should be ignored
15419      * @method isValidHandleChild
15420      * @param {HTMLElement} node the HTMLElement to evaluate
15421      * @return {boolean} true if this is a valid tag type, false if not
15422      */
15423     isValidHandleChild: function(node) {
15424
15425         var valid = true;
15426         // var n = (node.nodeName == "#text") ? node.parentNode : node;
15427         var nodeName;
15428         try {
15429             nodeName = node.nodeName.toUpperCase();
15430         } catch(e) {
15431             nodeName = node.nodeName;
15432         }
15433         valid = valid && !this.invalidHandleTypes[nodeName];
15434         valid = valid && !this.invalidHandleIds[node.id];
15435
15436         for (var i=0, len=this.invalidHandleClasses.length; valid && i<len; ++i) {
15437             valid = !Dom.hasClass(node, this.invalidHandleClasses[i]);
15438         }
15439
15440
15441         return valid;
15442
15443     },
15444
15445     /**
15446      * Create the array of horizontal tick marks if an interval was specified
15447      * in setXConstraint().
15448      * @method setXTicks
15449      * @private
15450      */
15451     setXTicks: function(iStartX, iTickSize) {
15452         this.xTicks = [];
15453         this.xTickSize = iTickSize;
15454
15455         var tickMap = {};
15456
15457         for (var i = this.initPageX; i >= this.minX; i = i - iTickSize) {
15458             if (!tickMap[i]) {
15459                 this.xTicks[this.xTicks.length] = i;
15460                 tickMap[i] = true;
15461             }
15462         }
15463
15464         for (i = this.initPageX; i <= this.maxX; i = i + iTickSize) {
15465             if (!tickMap[i]) {
15466                 this.xTicks[this.xTicks.length] = i;
15467                 tickMap[i] = true;
15468             }
15469         }
15470
15471         this.xTicks.sort(this.DDM.numericSort) ;
15472     },
15473
15474     /**
15475      * Create the array of vertical tick marks if an interval was specified in
15476      * setYConstraint().
15477      * @method setYTicks
15478      * @private
15479      */
15480     setYTicks: function(iStartY, iTickSize) {
15481         this.yTicks = [];
15482         this.yTickSize = iTickSize;
15483
15484         var tickMap = {};
15485
15486         for (var i = this.initPageY; i >= this.minY; i = i - iTickSize) {
15487             if (!tickMap[i]) {
15488                 this.yTicks[this.yTicks.length] = i;
15489                 tickMap[i] = true;
15490             }
15491         }
15492
15493         for (i = this.initPageY; i <= this.maxY; i = i + iTickSize) {
15494             if (!tickMap[i]) {
15495                 this.yTicks[this.yTicks.length] = i;
15496                 tickMap[i] = true;
15497             }
15498         }
15499
15500         this.yTicks.sort(this.DDM.numericSort) ;
15501     },
15502
15503     /**
15504      * By default, the element can be dragged any place on the screen.  Use
15505      * this method to limit the horizontal travel of the element.  Pass in
15506      * 0,0 for the parameters if you want to lock the drag to the y axis.
15507      * @method setXConstraint
15508      * @param {int} iLeft the number of pixels the element can move to the left
15509      * @param {int} iRight the number of pixels the element can move to the
15510      * right
15511      * @param {int} iTickSize optional parameter for specifying that the
15512      * element
15513      * should move iTickSize pixels at a time.
15514      */
15515     setXConstraint: function(iLeft, iRight, iTickSize) {
15516         this.leftConstraint = iLeft;
15517         this.rightConstraint = iRight;
15518
15519         this.minX = this.initPageX - iLeft;
15520         this.maxX = this.initPageX + iRight;
15521         if (iTickSize) { this.setXTicks(this.initPageX, iTickSize); }
15522
15523         this.constrainX = true;
15524     },
15525
15526     /**
15527      * Clears any constraints applied to this instance.  Also clears ticks
15528      * since they can't exist independent of a constraint at this time.
15529      * @method clearConstraints
15530      */
15531     clearConstraints: function() {
15532         this.constrainX = false;
15533         this.constrainY = false;
15534         this.clearTicks();
15535     },
15536
15537     /**
15538      * Clears any tick interval defined for this instance
15539      * @method clearTicks
15540      */
15541     clearTicks: function() {
15542         this.xTicks = null;
15543         this.yTicks = null;
15544         this.xTickSize = 0;
15545         this.yTickSize = 0;
15546     },
15547
15548     /**
15549      * By default, the element can be dragged any place on the screen.  Set
15550      * this to limit the vertical travel of the element.  Pass in 0,0 for the
15551      * parameters if you want to lock the drag to the x axis.
15552      * @method setYConstraint
15553      * @param {int} iUp the number of pixels the element can move up
15554      * @param {int} iDown the number of pixels the element can move down
15555      * @param {int} iTickSize optional parameter for specifying that the
15556      * element should move iTickSize pixels at a time.
15557      */
15558     setYConstraint: function(iUp, iDown, iTickSize) {
15559         this.topConstraint = iUp;
15560         this.bottomConstraint = iDown;
15561
15562         this.minY = this.initPageY - iUp;
15563         this.maxY = this.initPageY + iDown;
15564         if (iTickSize) { this.setYTicks(this.initPageY, iTickSize); }
15565
15566         this.constrainY = true;
15567
15568     },
15569
15570     /**
15571      * resetConstraints must be called if you manually reposition a dd element.
15572      * @method resetConstraints
15573      * @param {boolean} maintainOffset
15574      */
15575     resetConstraints: function() {
15576
15577
15578         // Maintain offsets if necessary
15579         if (this.initPageX || this.initPageX === 0) {
15580             // figure out how much this thing has moved
15581             var dx = (this.maintainOffset) ? this.lastPageX - this.initPageX : 0;
15582             var dy = (this.maintainOffset) ? this.lastPageY - this.initPageY : 0;
15583
15584             this.setInitPosition(dx, dy);
15585
15586         // This is the first time we have detected the element's position
15587         } else {
15588             this.setInitPosition();
15589         }
15590
15591         if (this.constrainX) {
15592             this.setXConstraint( this.leftConstraint,
15593                                  this.rightConstraint,
15594                                  this.xTickSize        );
15595         }
15596
15597         if (this.constrainY) {
15598             this.setYConstraint( this.topConstraint,
15599                                  this.bottomConstraint,
15600                                  this.yTickSize         );
15601         }
15602     },
15603
15604     /**
15605      * Normally the drag element is moved pixel by pixel, but we can specify
15606      * that it move a number of pixels at a time.  This method resolves the
15607      * location when we have it set up like this.
15608      * @method getTick
15609      * @param {int} val where we want to place the object
15610      * @param {int[]} tickArray sorted array of valid points
15611      * @return {int} the closest tick
15612      * @private
15613      */
15614     getTick: function(val, tickArray) {
15615
15616         if (!tickArray) {
15617             // If tick interval is not defined, it is effectively 1 pixel,
15618             // so we return the value passed to us.
15619             return val;
15620         } else if (tickArray[0] >= val) {
15621             // The value is lower than the first tick, so we return the first
15622             // tick.
15623             return tickArray[0];
15624         } else {
15625             for (var i=0, len=tickArray.length; i<len; ++i) {
15626                 var next = i + 1;
15627                 if (tickArray[next] && tickArray[next] >= val) {
15628                     var diff1 = val - tickArray[i];
15629                     var diff2 = tickArray[next] - val;
15630                     return (diff2 > diff1) ? tickArray[i] : tickArray[next];
15631                 }
15632             }
15633
15634             // The value is larger than the last tick, so we return the last
15635             // tick.
15636             return tickArray[tickArray.length - 1];
15637         }
15638     },
15639
15640     /**
15641      * toString method
15642      * @method toString
15643      * @return {string} string representation of the dd obj
15644      */
15645     toString: function() {
15646         return ("DragDrop " + this.id);
15647     }
15648
15649 });
15650
15651 })();
15652 /*
15653  * Based on:
15654  * Ext JS Library 1.1.1
15655  * Copyright(c) 2006-2007, Ext JS, LLC.
15656  *
15657  * Originally Released Under LGPL - original licence link has changed is not relivant.
15658  *
15659  * Fork - LGPL
15660  * <script type="text/javascript">
15661  */
15662
15663
15664 /**
15665  * The drag and drop utility provides a framework for building drag and drop
15666  * applications.  In addition to enabling drag and drop for specific elements,
15667  * the drag and drop elements are tracked by the manager class, and the
15668  * interactions between the various elements are tracked during the drag and
15669  * the implementing code is notified about these important moments.
15670  */
15671
15672 // Only load the library once.  Rewriting the manager class would orphan
15673 // existing drag and drop instances.
15674 if (!Roo.dd.DragDropMgr) {
15675
15676 /**
15677  * @class Roo.dd.DragDropMgr
15678  * DragDropMgr is a singleton that tracks the element interaction for
15679  * all DragDrop items in the window.  Generally, you will not call
15680  * this class directly, but it does have helper methods that could
15681  * be useful in your DragDrop implementations.
15682  * @singleton
15683  */
15684 Roo.dd.DragDropMgr = function() {
15685
15686     var Event = Roo.EventManager;
15687
15688     return {
15689
15690         /**
15691          * Two dimensional Array of registered DragDrop objects.  The first
15692          * dimension is the DragDrop item group, the second the DragDrop
15693          * object.
15694          * @property ids
15695          * @type {string: string}
15696          * @private
15697          * @static
15698          */
15699         ids: {},
15700
15701         /**
15702          * Array of element ids defined as drag handles.  Used to determine
15703          * if the element that generated the mousedown event is actually the
15704          * handle and not the html element itself.
15705          * @property handleIds
15706          * @type {string: string}
15707          * @private
15708          * @static
15709          */
15710         handleIds: {},
15711
15712         /**
15713          * the DragDrop object that is currently being dragged
15714          * @property dragCurrent
15715          * @type DragDrop
15716          * @private
15717          * @static
15718          **/
15719         dragCurrent: null,
15720
15721         /**
15722          * the DragDrop object(s) that are being hovered over
15723          * @property dragOvers
15724          * @type Array
15725          * @private
15726          * @static
15727          */
15728         dragOvers: {},
15729
15730         /**
15731          * the X distance between the cursor and the object being dragged
15732          * @property deltaX
15733          * @type int
15734          * @private
15735          * @static
15736          */
15737         deltaX: 0,
15738
15739         /**
15740          * the Y distance between the cursor and the object being dragged
15741          * @property deltaY
15742          * @type int
15743          * @private
15744          * @static
15745          */
15746         deltaY: 0,
15747
15748         /**
15749          * Flag to determine if we should prevent the default behavior of the
15750          * events we define. By default this is true, but this can be set to
15751          * false if you need the default behavior (not recommended)
15752          * @property preventDefault
15753          * @type boolean
15754          * @static
15755          */
15756         preventDefault: true,
15757
15758         /**
15759          * Flag to determine if we should stop the propagation of the events
15760          * we generate. This is true by default but you may want to set it to
15761          * false if the html element contains other features that require the
15762          * mouse click.
15763          * @property stopPropagation
15764          * @type boolean
15765          * @static
15766          */
15767         stopPropagation: true,
15768
15769         /**
15770          * Internal flag that is set to true when drag and drop has been
15771          * intialized
15772          * @property initialized
15773          * @private
15774          * @static
15775          */
15776         initalized: false,
15777
15778         /**
15779          * All drag and drop can be disabled.
15780          * @property locked
15781          * @private
15782          * @static
15783          */
15784         locked: false,
15785
15786         /**
15787          * Called the first time an element is registered.
15788          * @method init
15789          * @private
15790          * @static
15791          */
15792         init: function() {
15793             this.initialized = true;
15794         },
15795
15796         /**
15797          * In point mode, drag and drop interaction is defined by the
15798          * location of the cursor during the drag/drop
15799          * @property POINT
15800          * @type int
15801          * @static
15802          */
15803         POINT: 0,
15804
15805         /**
15806          * In intersect mode, drag and drop interactio nis defined by the
15807          * overlap of two or more drag and drop objects.
15808          * @property INTERSECT
15809          * @type int
15810          * @static
15811          */
15812         INTERSECT: 1,
15813
15814         /**
15815          * The current drag and drop mode.  Default: POINT
15816          * @property mode
15817          * @type int
15818          * @static
15819          */
15820         mode: 0,
15821
15822         /**
15823          * Runs method on all drag and drop objects
15824          * @method _execOnAll
15825          * @private
15826          * @static
15827          */
15828         _execOnAll: function(sMethod, args) {
15829             for (var i in this.ids) {
15830                 for (var j in this.ids[i]) {
15831                     var oDD = this.ids[i][j];
15832                     if (! this.isTypeOfDD(oDD)) {
15833                         continue;
15834                     }
15835                     oDD[sMethod].apply(oDD, args);
15836                 }
15837             }
15838         },
15839
15840         /**
15841          * Drag and drop initialization.  Sets up the global event handlers
15842          * @method _onLoad
15843          * @private
15844          * @static
15845          */
15846         _onLoad: function() {
15847
15848             this.init();
15849
15850
15851             Event.on(document, "mouseup",   this.handleMouseUp, this, true);
15852             Event.on(document, "mousemove", this.handleMouseMove, this, true);
15853             Event.on(window,   "unload",    this._onUnload, this, true);
15854             Event.on(window,   "resize",    this._onResize, this, true);
15855             // Event.on(window,   "mouseout",    this._test);
15856
15857         },
15858
15859         /**
15860          * Reset constraints on all drag and drop objs
15861          * @method _onResize
15862          * @private
15863          * @static
15864          */
15865         _onResize: function(e) {
15866             this._execOnAll("resetConstraints", []);
15867         },
15868
15869         /**
15870          * Lock all drag and drop functionality
15871          * @method lock
15872          * @static
15873          */
15874         lock: function() { this.locked = true; },
15875
15876         /**
15877          * Unlock all drag and drop functionality
15878          * @method unlock
15879          * @static
15880          */
15881         unlock: function() { this.locked = false; },
15882
15883         /**
15884          * Is drag and drop locked?
15885          * @method isLocked
15886          * @return {boolean} True if drag and drop is locked, false otherwise.
15887          * @static
15888          */
15889         isLocked: function() { return this.locked; },
15890
15891         /**
15892          * Location cache that is set for all drag drop objects when a drag is
15893          * initiated, cleared when the drag is finished.
15894          * @property locationCache
15895          * @private
15896          * @static
15897          */
15898         locationCache: {},
15899
15900         /**
15901          * Set useCache to false if you want to force object the lookup of each
15902          * drag and drop linked element constantly during a drag.
15903          * @property useCache
15904          * @type boolean
15905          * @static
15906          */
15907         useCache: true,
15908
15909         /**
15910          * The number of pixels that the mouse needs to move after the
15911          * mousedown before the drag is initiated.  Default=3;
15912          * @property clickPixelThresh
15913          * @type int
15914          * @static
15915          */
15916         clickPixelThresh: 3,
15917
15918         /**
15919          * The number of milliseconds after the mousedown event to initiate the
15920          * drag if we don't get a mouseup event. Default=1000
15921          * @property clickTimeThresh
15922          * @type int
15923          * @static
15924          */
15925         clickTimeThresh: 350,
15926
15927         /**
15928          * Flag that indicates that either the drag pixel threshold or the
15929          * mousdown time threshold has been met
15930          * @property dragThreshMet
15931          * @type boolean
15932          * @private
15933          * @static
15934          */
15935         dragThreshMet: false,
15936
15937         /**
15938          * Timeout used for the click time threshold
15939          * @property clickTimeout
15940          * @type Object
15941          * @private
15942          * @static
15943          */
15944         clickTimeout: null,
15945
15946         /**
15947          * The X position of the mousedown event stored for later use when a
15948          * drag threshold is met.
15949          * @property startX
15950          * @type int
15951          * @private
15952          * @static
15953          */
15954         startX: 0,
15955
15956         /**
15957          * The Y position of the mousedown event stored for later use when a
15958          * drag threshold is met.
15959          * @property startY
15960          * @type int
15961          * @private
15962          * @static
15963          */
15964         startY: 0,
15965
15966         /**
15967          * Each DragDrop instance must be registered with the DragDropMgr.
15968          * This is executed in DragDrop.init()
15969          * @method regDragDrop
15970          * @param {DragDrop} oDD the DragDrop object to register
15971          * @param {String} sGroup the name of the group this element belongs to
15972          * @static
15973          */
15974         regDragDrop: function(oDD, sGroup) {
15975             if (!this.initialized) { this.init(); }
15976
15977             if (!this.ids[sGroup]) {
15978                 this.ids[sGroup] = {};
15979             }
15980             this.ids[sGroup][oDD.id] = oDD;
15981         },
15982
15983         /**
15984          * Removes the supplied dd instance from the supplied group. Executed
15985          * by DragDrop.removeFromGroup, so don't call this function directly.
15986          * @method removeDDFromGroup
15987          * @private
15988          * @static
15989          */
15990         removeDDFromGroup: function(oDD, sGroup) {
15991             if (!this.ids[sGroup]) {
15992                 this.ids[sGroup] = {};
15993             }
15994
15995             var obj = this.ids[sGroup];
15996             if (obj && obj[oDD.id]) {
15997                 delete obj[oDD.id];
15998             }
15999         },
16000
16001         /**
16002          * Unregisters a drag and drop item.  This is executed in
16003          * DragDrop.unreg, use that method instead of calling this directly.
16004          * @method _remove
16005          * @private
16006          * @static
16007          */
16008         _remove: function(oDD) {
16009             for (var g in oDD.groups) {
16010                 if (g && this.ids[g][oDD.id]) {
16011                     delete this.ids[g][oDD.id];
16012                 }
16013             }
16014             delete this.handleIds[oDD.id];
16015         },
16016
16017         /**
16018          * Each DragDrop handle element must be registered.  This is done
16019          * automatically when executing DragDrop.setHandleElId()
16020          * @method regHandle
16021          * @param {String} sDDId the DragDrop id this element is a handle for
16022          * @param {String} sHandleId the id of the element that is the drag
16023          * handle
16024          * @static
16025          */
16026         regHandle: function(sDDId, sHandleId) {
16027             if (!this.handleIds[sDDId]) {
16028                 this.handleIds[sDDId] = {};
16029             }
16030             this.handleIds[sDDId][sHandleId] = sHandleId;
16031         },
16032
16033         /**
16034          * Utility function to determine if a given element has been
16035          * registered as a drag drop item.
16036          * @method isDragDrop
16037          * @param {String} id the element id to check
16038          * @return {boolean} true if this element is a DragDrop item,
16039          * false otherwise
16040          * @static
16041          */
16042         isDragDrop: function(id) {
16043             return ( this.getDDById(id) ) ? true : false;
16044         },
16045
16046         /**
16047          * Returns the drag and drop instances that are in all groups the
16048          * passed in instance belongs to.
16049          * @method getRelated
16050          * @param {DragDrop} p_oDD the obj to get related data for
16051          * @param {boolean} bTargetsOnly if true, only return targetable objs
16052          * @return {DragDrop[]} the related instances
16053          * @static
16054          */
16055         getRelated: function(p_oDD, bTargetsOnly) {
16056             var oDDs = [];
16057             for (var i in p_oDD.groups) {
16058                 for (j in this.ids[i]) {
16059                     var dd = this.ids[i][j];
16060                     if (! this.isTypeOfDD(dd)) {
16061                         continue;
16062                     }
16063                     if (!bTargetsOnly || dd.isTarget) {
16064                         oDDs[oDDs.length] = dd;
16065                     }
16066                 }
16067             }
16068
16069             return oDDs;
16070         },
16071
16072         /**
16073          * Returns true if the specified dd target is a legal target for
16074          * the specifice drag obj
16075          * @method isLegalTarget
16076          * @param {DragDrop} the drag obj
16077          * @param {DragDrop} the target
16078          * @return {boolean} true if the target is a legal target for the
16079          * dd obj
16080          * @static
16081          */
16082         isLegalTarget: function (oDD, oTargetDD) {
16083             var targets = this.getRelated(oDD, true);
16084             for (var i=0, len=targets.length;i<len;++i) {
16085                 if (targets[i].id == oTargetDD.id) {
16086                     return true;
16087                 }
16088             }
16089
16090             return false;
16091         },
16092
16093         /**
16094          * My goal is to be able to transparently determine if an object is
16095          * typeof DragDrop, and the exact subclass of DragDrop.  typeof
16096          * returns "object", oDD.constructor.toString() always returns
16097          * "DragDrop" and not the name of the subclass.  So for now it just
16098          * evaluates a well-known variable in DragDrop.
16099          * @method isTypeOfDD
16100          * @param {Object} the object to evaluate
16101          * @return {boolean} true if typeof oDD = DragDrop
16102          * @static
16103          */
16104         isTypeOfDD: function (oDD) {
16105             return (oDD && oDD.__ygDragDrop);
16106         },
16107
16108         /**
16109          * Utility function to determine if a given element has been
16110          * registered as a drag drop handle for the given Drag Drop object.
16111          * @method isHandle
16112          * @param {String} id the element id to check
16113          * @return {boolean} true if this element is a DragDrop handle, false
16114          * otherwise
16115          * @static
16116          */
16117         isHandle: function(sDDId, sHandleId) {
16118             return ( this.handleIds[sDDId] &&
16119                             this.handleIds[sDDId][sHandleId] );
16120         },
16121
16122         /**
16123          * Returns the DragDrop instance for a given id
16124          * @method getDDById
16125          * @param {String} id the id of the DragDrop object
16126          * @return {DragDrop} the drag drop object, null if it is not found
16127          * @static
16128          */
16129         getDDById: function(id) {
16130             for (var i in this.ids) {
16131                 if (this.ids[i][id]) {
16132                     return this.ids[i][id];
16133                 }
16134             }
16135             return null;
16136         },
16137
16138         /**
16139          * Fired after a registered DragDrop object gets the mousedown event.
16140          * Sets up the events required to track the object being dragged
16141          * @method handleMouseDown
16142          * @param {Event} e the event
16143          * @param oDD the DragDrop object being dragged
16144          * @private
16145          * @static
16146          */
16147         handleMouseDown: function(e, oDD) {
16148             if(Roo.QuickTips){
16149                 Roo.QuickTips.disable();
16150             }
16151             this.currentTarget = e.getTarget();
16152
16153             this.dragCurrent = oDD;
16154
16155             var el = oDD.getEl();
16156
16157             // track start position
16158             this.startX = e.getPageX();
16159             this.startY = e.getPageY();
16160
16161             this.deltaX = this.startX - el.offsetLeft;
16162             this.deltaY = this.startY - el.offsetTop;
16163
16164             this.dragThreshMet = false;
16165
16166             this.clickTimeout = setTimeout(
16167                     function() {
16168                         var DDM = Roo.dd.DDM;
16169                         DDM.startDrag(DDM.startX, DDM.startY);
16170                     },
16171                     this.clickTimeThresh );
16172         },
16173
16174         /**
16175          * Fired when either the drag pixel threshol or the mousedown hold
16176          * time threshold has been met.
16177          * @method startDrag
16178          * @param x {int} the X position of the original mousedown
16179          * @param y {int} the Y position of the original mousedown
16180          * @static
16181          */
16182         startDrag: function(x, y) {
16183             clearTimeout(this.clickTimeout);
16184             if (this.dragCurrent) {
16185                 this.dragCurrent.b4StartDrag(x, y);
16186                 this.dragCurrent.startDrag(x, y);
16187             }
16188             this.dragThreshMet = true;
16189         },
16190
16191         /**
16192          * Internal function to handle the mouseup event.  Will be invoked
16193          * from the context of the document.
16194          * @method handleMouseUp
16195          * @param {Event} e the event
16196          * @private
16197          * @static
16198          */
16199         handleMouseUp: function(e) {
16200
16201             if(Roo.QuickTips){
16202                 Roo.QuickTips.enable();
16203             }
16204             if (! this.dragCurrent) {
16205                 return;
16206             }
16207
16208             clearTimeout(this.clickTimeout);
16209
16210             if (this.dragThreshMet) {
16211                 this.fireEvents(e, true);
16212             } else {
16213             }
16214
16215             this.stopDrag(e);
16216
16217             this.stopEvent(e);
16218         },
16219
16220         /**
16221          * Utility to stop event propagation and event default, if these
16222          * features are turned on.
16223          * @method stopEvent
16224          * @param {Event} e the event as returned by this.getEvent()
16225          * @static
16226          */
16227         stopEvent: function(e){
16228             if(this.stopPropagation) {
16229                 e.stopPropagation();
16230             }
16231
16232             if (this.preventDefault) {
16233                 e.preventDefault();
16234             }
16235         },
16236
16237         /**
16238          * Internal function to clean up event handlers after the drag
16239          * operation is complete
16240          * @method stopDrag
16241          * @param {Event} e the event
16242          * @private
16243          * @static
16244          */
16245         stopDrag: function(e) {
16246             // Fire the drag end event for the item that was dragged
16247             if (this.dragCurrent) {
16248                 if (this.dragThreshMet) {
16249                     this.dragCurrent.b4EndDrag(e);
16250                     this.dragCurrent.endDrag(e);
16251                 }
16252
16253                 this.dragCurrent.onMouseUp(e);
16254             }
16255
16256             this.dragCurrent = null;
16257             this.dragOvers = {};
16258         },
16259
16260         /**
16261          * Internal function to handle the mousemove event.  Will be invoked
16262          * from the context of the html element.
16263          *
16264          * @TODO figure out what we can do about mouse events lost when the
16265          * user drags objects beyond the window boundary.  Currently we can
16266          * detect this in internet explorer by verifying that the mouse is
16267          * down during the mousemove event.  Firefox doesn't give us the
16268          * button state on the mousemove event.
16269          * @method handleMouseMove
16270          * @param {Event} e the event
16271          * @private
16272          * @static
16273          */
16274         handleMouseMove: function(e) {
16275             if (! this.dragCurrent) {
16276                 return true;
16277             }
16278
16279             // var button = e.which || e.button;
16280
16281             // check for IE mouseup outside of page boundary
16282             if (Roo.isIE && (e.button !== 0 && e.button !== 1 && e.button !== 2)) {
16283                 this.stopEvent(e);
16284                 return this.handleMouseUp(e);
16285             }
16286
16287             if (!this.dragThreshMet) {
16288                 var diffX = Math.abs(this.startX - e.getPageX());
16289                 var diffY = Math.abs(this.startY - e.getPageY());
16290                 if (diffX > this.clickPixelThresh ||
16291                             diffY > this.clickPixelThresh) {
16292                     this.startDrag(this.startX, this.startY);
16293                 }
16294             }
16295
16296             if (this.dragThreshMet) {
16297                 this.dragCurrent.b4Drag(e);
16298                 this.dragCurrent.onDrag(e);
16299                 if(!this.dragCurrent.moveOnly){
16300                     this.fireEvents(e, false);
16301                 }
16302             }
16303
16304             this.stopEvent(e);
16305
16306             return true;
16307         },
16308
16309         /**
16310          * Iterates over all of the DragDrop elements to find ones we are
16311          * hovering over or dropping on
16312          * @method fireEvents
16313          * @param {Event} e the event
16314          * @param {boolean} isDrop is this a drop op or a mouseover op?
16315          * @private
16316          * @static
16317          */
16318         fireEvents: function(e, isDrop) {
16319             var dc = this.dragCurrent;
16320
16321             // If the user did the mouse up outside of the window, we could
16322             // get here even though we have ended the drag.
16323             if (!dc || dc.isLocked()) {
16324                 return;
16325             }
16326
16327             var pt = e.getPoint();
16328
16329             // cache the previous dragOver array
16330             var oldOvers = [];
16331
16332             var outEvts   = [];
16333             var overEvts  = [];
16334             var dropEvts  = [];
16335             var enterEvts = [];
16336
16337             // Check to see if the object(s) we were hovering over is no longer
16338             // being hovered over so we can fire the onDragOut event
16339             for (var i in this.dragOvers) {
16340
16341                 var ddo = this.dragOvers[i];
16342
16343                 if (! this.isTypeOfDD(ddo)) {
16344                     continue;
16345                 }
16346
16347                 if (! this.isOverTarget(pt, ddo, this.mode)) {
16348                     outEvts.push( ddo );
16349                 }
16350
16351                 oldOvers[i] = true;
16352                 delete this.dragOvers[i];
16353             }
16354
16355             for (var sGroup in dc.groups) {
16356
16357                 if ("string" != typeof sGroup) {
16358                     continue;
16359                 }
16360
16361                 for (i in this.ids[sGroup]) {
16362                     var oDD = this.ids[sGroup][i];
16363                     if (! this.isTypeOfDD(oDD)) {
16364                         continue;
16365                     }
16366
16367                     if (oDD.isTarget && !oDD.isLocked() && oDD != dc) {
16368                         if (this.isOverTarget(pt, oDD, this.mode)) {
16369                             // look for drop interactions
16370                             if (isDrop) {
16371                                 dropEvts.push( oDD );
16372                             // look for drag enter and drag over interactions
16373                             } else {
16374
16375                                 // initial drag over: dragEnter fires
16376                                 if (!oldOvers[oDD.id]) {
16377                                     enterEvts.push( oDD );
16378                                 // subsequent drag overs: dragOver fires
16379                                 } else {
16380                                     overEvts.push( oDD );
16381                                 }
16382
16383                                 this.dragOvers[oDD.id] = oDD;
16384                             }
16385                         }
16386                     }
16387                 }
16388             }
16389
16390             if (this.mode) {
16391                 if (outEvts.length) {
16392                     dc.b4DragOut(e, outEvts);
16393                     dc.onDragOut(e, outEvts);
16394                 }
16395
16396                 if (enterEvts.length) {
16397                     dc.onDragEnter(e, enterEvts);
16398                 }
16399
16400                 if (overEvts.length) {
16401                     dc.b4DragOver(e, overEvts);
16402                     dc.onDragOver(e, overEvts);
16403                 }
16404
16405                 if (dropEvts.length) {
16406                     dc.b4DragDrop(e, dropEvts);
16407                     dc.onDragDrop(e, dropEvts);
16408                 }
16409
16410             } else {
16411                 // fire dragout events
16412                 var len = 0;
16413                 for (i=0, len=outEvts.length; i<len; ++i) {
16414                     dc.b4DragOut(e, outEvts[i].id);
16415                     dc.onDragOut(e, outEvts[i].id);
16416                 }
16417
16418                 // fire enter events
16419                 for (i=0,len=enterEvts.length; i<len; ++i) {
16420                     // dc.b4DragEnter(e, oDD.id);
16421                     dc.onDragEnter(e, enterEvts[i].id);
16422                 }
16423
16424                 // fire over events
16425                 for (i=0,len=overEvts.length; i<len; ++i) {
16426                     dc.b4DragOver(e, overEvts[i].id);
16427                     dc.onDragOver(e, overEvts[i].id);
16428                 }
16429
16430                 // fire drop events
16431                 for (i=0, len=dropEvts.length; i<len; ++i) {
16432                     dc.b4DragDrop(e, dropEvts[i].id);
16433                     dc.onDragDrop(e, dropEvts[i].id);
16434                 }
16435
16436             }
16437
16438             // notify about a drop that did not find a target
16439             if (isDrop && !dropEvts.length) {
16440                 dc.onInvalidDrop(e);
16441             }
16442
16443         },
16444
16445         /**
16446          * Helper function for getting the best match from the list of drag
16447          * and drop objects returned by the drag and drop events when we are
16448          * in INTERSECT mode.  It returns either the first object that the
16449          * cursor is over, or the object that has the greatest overlap with
16450          * the dragged element.
16451          * @method getBestMatch
16452          * @param  {DragDrop[]} dds The array of drag and drop objects
16453          * targeted
16454          * @return {DragDrop}       The best single match
16455          * @static
16456          */
16457         getBestMatch: function(dds) {
16458             var winner = null;
16459             // Return null if the input is not what we expect
16460             //if (!dds || !dds.length || dds.length == 0) {
16461                // winner = null;
16462             // If there is only one item, it wins
16463             //} else if (dds.length == 1) {
16464
16465             var len = dds.length;
16466
16467             if (len == 1) {
16468                 winner = dds[0];
16469             } else {
16470                 // Loop through the targeted items
16471                 for (var i=0; i<len; ++i) {
16472                     var dd = dds[i];
16473                     // If the cursor is over the object, it wins.  If the
16474                     // cursor is over multiple matches, the first one we come
16475                     // to wins.
16476                     if (dd.cursorIsOver) {
16477                         winner = dd;
16478                         break;
16479                     // Otherwise the object with the most overlap wins
16480                     } else {
16481                         if (!winner ||
16482                             winner.overlap.getArea() < dd.overlap.getArea()) {
16483                             winner = dd;
16484                         }
16485                     }
16486                 }
16487             }
16488
16489             return winner;
16490         },
16491
16492         /**
16493          * Refreshes the cache of the top-left and bottom-right points of the
16494          * drag and drop objects in the specified group(s).  This is in the
16495          * format that is stored in the drag and drop instance, so typical
16496          * usage is:
16497          * <code>
16498          * Roo.dd.DragDropMgr.refreshCache(ddinstance.groups);
16499          * </code>
16500          * Alternatively:
16501          * <code>
16502          * Roo.dd.DragDropMgr.refreshCache({group1:true, group2:true});
16503          * </code>
16504          * @TODO this really should be an indexed array.  Alternatively this
16505          * method could accept both.
16506          * @method refreshCache
16507          * @param {Object} groups an associative array of groups to refresh
16508          * @static
16509          */
16510         refreshCache: function(groups) {
16511             for (var sGroup in groups) {
16512                 if ("string" != typeof sGroup) {
16513                     continue;
16514                 }
16515                 for (var i in this.ids[sGroup]) {
16516                     var oDD = this.ids[sGroup][i];
16517
16518                     if (this.isTypeOfDD(oDD)) {
16519                     // if (this.isTypeOfDD(oDD) && oDD.isTarget) {
16520                         var loc = this.getLocation(oDD);
16521                         if (loc) {
16522                             this.locationCache[oDD.id] = loc;
16523                         } else {
16524                             delete this.locationCache[oDD.id];
16525                             // this will unregister the drag and drop object if
16526                             // the element is not in a usable state
16527                             // oDD.unreg();
16528                         }
16529                     }
16530                 }
16531             }
16532         },
16533
16534         /**
16535          * This checks to make sure an element exists and is in the DOM.  The
16536          * main purpose is to handle cases where innerHTML is used to remove
16537          * drag and drop objects from the DOM.  IE provides an 'unspecified
16538          * error' when trying to access the offsetParent of such an element
16539          * @method verifyEl
16540          * @param {HTMLElement} el the element to check
16541          * @return {boolean} true if the element looks usable
16542          * @static
16543          */
16544         verifyEl: function(el) {
16545             if (el) {
16546                 var parent;
16547                 if(Roo.isIE){
16548                     try{
16549                         parent = el.offsetParent;
16550                     }catch(e){}
16551                 }else{
16552                     parent = el.offsetParent;
16553                 }
16554                 if (parent) {
16555                     return true;
16556                 }
16557             }
16558
16559             return false;
16560         },
16561
16562         /**
16563          * Returns a Region object containing the drag and drop element's position
16564          * and size, including the padding configured for it
16565          * @method getLocation
16566          * @param {DragDrop} oDD the drag and drop object to get the
16567          *                       location for
16568          * @return {Roo.lib.Region} a Region object representing the total area
16569          *                             the element occupies, including any padding
16570          *                             the instance is configured for.
16571          * @static
16572          */
16573         getLocation: function(oDD) {
16574             if (! this.isTypeOfDD(oDD)) {
16575                 return null;
16576             }
16577
16578             var el = oDD.getEl(), pos, x1, x2, y1, y2, t, r, b, l;
16579
16580             try {
16581                 pos= Roo.lib.Dom.getXY(el);
16582             } catch (e) { }
16583
16584             if (!pos) {
16585                 return null;
16586             }
16587
16588             x1 = pos[0];
16589             x2 = x1 + el.offsetWidth;
16590             y1 = pos[1];
16591             y2 = y1 + el.offsetHeight;
16592
16593             t = y1 - oDD.padding[0];
16594             r = x2 + oDD.padding[1];
16595             b = y2 + oDD.padding[2];
16596             l = x1 - oDD.padding[3];
16597
16598             return new Roo.lib.Region( t, r, b, l );
16599         },
16600
16601         /**
16602          * Checks the cursor location to see if it over the target
16603          * @method isOverTarget
16604          * @param {Roo.lib.Point} pt The point to evaluate
16605          * @param {DragDrop} oTarget the DragDrop object we are inspecting
16606          * @return {boolean} true if the mouse is over the target
16607          * @private
16608          * @static
16609          */
16610         isOverTarget: function(pt, oTarget, intersect) {
16611             // use cache if available
16612             var loc = this.locationCache[oTarget.id];
16613             if (!loc || !this.useCache) {
16614                 loc = this.getLocation(oTarget);
16615                 this.locationCache[oTarget.id] = loc;
16616
16617             }
16618
16619             if (!loc) {
16620                 return false;
16621             }
16622
16623             oTarget.cursorIsOver = loc.contains( pt );
16624
16625             // DragDrop is using this as a sanity check for the initial mousedown
16626             // in this case we are done.  In POINT mode, if the drag obj has no
16627             // contraints, we are also done. Otherwise we need to evaluate the
16628             // location of the target as related to the actual location of the
16629             // dragged element.
16630             var dc = this.dragCurrent;
16631             if (!dc || !dc.getTargetCoord ||
16632                     (!intersect && !dc.constrainX && !dc.constrainY)) {
16633                 return oTarget.cursorIsOver;
16634             }
16635
16636             oTarget.overlap = null;
16637
16638             // Get the current location of the drag element, this is the
16639             // location of the mouse event less the delta that represents
16640             // where the original mousedown happened on the element.  We
16641             // need to consider constraints and ticks as well.
16642             var pos = dc.getTargetCoord(pt.x, pt.y);
16643
16644             var el = dc.getDragEl();
16645             var curRegion = new Roo.lib.Region( pos.y,
16646                                                    pos.x + el.offsetWidth,
16647                                                    pos.y + el.offsetHeight,
16648                                                    pos.x );
16649
16650             var overlap = curRegion.intersect(loc);
16651
16652             if (overlap) {
16653                 oTarget.overlap = overlap;
16654                 return (intersect) ? true : oTarget.cursorIsOver;
16655             } else {
16656                 return false;
16657             }
16658         },
16659
16660         /**
16661          * unload event handler
16662          * @method _onUnload
16663          * @private
16664          * @static
16665          */
16666         _onUnload: function(e, me) {
16667             Roo.dd.DragDropMgr.unregAll();
16668         },
16669
16670         /**
16671          * Cleans up the drag and drop events and objects.
16672          * @method unregAll
16673          * @private
16674          * @static
16675          */
16676         unregAll: function() {
16677
16678             if (this.dragCurrent) {
16679                 this.stopDrag();
16680                 this.dragCurrent = null;
16681             }
16682
16683             this._execOnAll("unreg", []);
16684
16685             for (i in this.elementCache) {
16686                 delete this.elementCache[i];
16687             }
16688
16689             this.elementCache = {};
16690             this.ids = {};
16691         },
16692
16693         /**
16694          * A cache of DOM elements
16695          * @property elementCache
16696          * @private
16697          * @static
16698          */
16699         elementCache: {},
16700
16701         /**
16702          * Get the wrapper for the DOM element specified
16703          * @method getElWrapper
16704          * @param {String} id the id of the element to get
16705          * @return {Roo.dd.DDM.ElementWrapper} the wrapped element
16706          * @private
16707          * @deprecated This wrapper isn't that useful
16708          * @static
16709          */
16710         getElWrapper: function(id) {
16711             var oWrapper = this.elementCache[id];
16712             if (!oWrapper || !oWrapper.el) {
16713                 oWrapper = this.elementCache[id] =
16714                     new this.ElementWrapper(Roo.getDom(id));
16715             }
16716             return oWrapper;
16717         },
16718
16719         /**
16720          * Returns the actual DOM element
16721          * @method getElement
16722          * @param {String} id the id of the elment to get
16723          * @return {Object} The element
16724          * @deprecated use Roo.getDom instead
16725          * @static
16726          */
16727         getElement: function(id) {
16728             return Roo.getDom(id);
16729         },
16730
16731         /**
16732          * Returns the style property for the DOM element (i.e.,
16733          * document.getElById(id).style)
16734          * @method getCss
16735          * @param {String} id the id of the elment to get
16736          * @return {Object} The style property of the element
16737          * @deprecated use Roo.getDom instead
16738          * @static
16739          */
16740         getCss: function(id) {
16741             var el = Roo.getDom(id);
16742             return (el) ? el.style : null;
16743         },
16744
16745         /**
16746          * Inner class for cached elements
16747          * @class DragDropMgr.ElementWrapper
16748          * @for DragDropMgr
16749          * @private
16750          * @deprecated
16751          */
16752         ElementWrapper: function(el) {
16753                 /**
16754                  * The element
16755                  * @property el
16756                  */
16757                 this.el = el || null;
16758                 /**
16759                  * The element id
16760                  * @property id
16761                  */
16762                 this.id = this.el && el.id;
16763                 /**
16764                  * A reference to the style property
16765                  * @property css
16766                  */
16767                 this.css = this.el && el.style;
16768             },
16769
16770         /**
16771          * Returns the X position of an html element
16772          * @method getPosX
16773          * @param el the element for which to get the position
16774          * @return {int} the X coordinate
16775          * @for DragDropMgr
16776          * @deprecated use Roo.lib.Dom.getX instead
16777          * @static
16778          */
16779         getPosX: function(el) {
16780             return Roo.lib.Dom.getX(el);
16781         },
16782
16783         /**
16784          * Returns the Y position of an html element
16785          * @method getPosY
16786          * @param el the element for which to get the position
16787          * @return {int} the Y coordinate
16788          * @deprecated use Roo.lib.Dom.getY instead
16789          * @static
16790          */
16791         getPosY: function(el) {
16792             return Roo.lib.Dom.getY(el);
16793         },
16794
16795         /**
16796          * Swap two nodes.  In IE, we use the native method, for others we
16797          * emulate the IE behavior
16798          * @method swapNode
16799          * @param n1 the first node to swap
16800          * @param n2 the other node to swap
16801          * @static
16802          */
16803         swapNode: function(n1, n2) {
16804             if (n1.swapNode) {
16805                 n1.swapNode(n2);
16806             } else {
16807                 var p = n2.parentNode;
16808                 var s = n2.nextSibling;
16809
16810                 if (s == n1) {
16811                     p.insertBefore(n1, n2);
16812                 } else if (n2 == n1.nextSibling) {
16813                     p.insertBefore(n2, n1);
16814                 } else {
16815                     n1.parentNode.replaceChild(n2, n1);
16816                     p.insertBefore(n1, s);
16817                 }
16818             }
16819         },
16820
16821         /**
16822          * Returns the current scroll position
16823          * @method getScroll
16824          * @private
16825          * @static
16826          */
16827         getScroll: function () {
16828             var t, l, dde=document.documentElement, db=document.body;
16829             if (dde && (dde.scrollTop || dde.scrollLeft)) {
16830                 t = dde.scrollTop;
16831                 l = dde.scrollLeft;
16832             } else if (db) {
16833                 t = db.scrollTop;
16834                 l = db.scrollLeft;
16835             } else {
16836
16837             }
16838             return { top: t, left: l };
16839         },
16840
16841         /**
16842          * Returns the specified element style property
16843          * @method getStyle
16844          * @param {HTMLElement} el          the element
16845          * @param {string}      styleProp   the style property
16846          * @return {string} The value of the style property
16847          * @deprecated use Roo.lib.Dom.getStyle
16848          * @static
16849          */
16850         getStyle: function(el, styleProp) {
16851             return Roo.fly(el).getStyle(styleProp);
16852         },
16853
16854         /**
16855          * Gets the scrollTop
16856          * @method getScrollTop
16857          * @return {int} the document's scrollTop
16858          * @static
16859          */
16860         getScrollTop: function () { return this.getScroll().top; },
16861
16862         /**
16863          * Gets the scrollLeft
16864          * @method getScrollLeft
16865          * @return {int} the document's scrollTop
16866          * @static
16867          */
16868         getScrollLeft: function () { return this.getScroll().left; },
16869
16870         /**
16871          * Sets the x/y position of an element to the location of the
16872          * target element.
16873          * @method moveToEl
16874          * @param {HTMLElement} moveEl      The element to move
16875          * @param {HTMLElement} targetEl    The position reference element
16876          * @static
16877          */
16878         moveToEl: function (moveEl, targetEl) {
16879             var aCoord = Roo.lib.Dom.getXY(targetEl);
16880             Roo.lib.Dom.setXY(moveEl, aCoord);
16881         },
16882
16883         /**
16884          * Numeric array sort function
16885          * @method numericSort
16886          * @static
16887          */
16888         numericSort: function(a, b) { return (a - b); },
16889
16890         /**
16891          * Internal counter
16892          * @property _timeoutCount
16893          * @private
16894          * @static
16895          */
16896         _timeoutCount: 0,
16897
16898         /**
16899          * Trying to make the load order less important.  Without this we get
16900          * an error if this file is loaded before the Event Utility.
16901          * @method _addListeners
16902          * @private
16903          * @static
16904          */
16905         _addListeners: function() {
16906             var DDM = Roo.dd.DDM;
16907             if ( Roo.lib.Event && document ) {
16908                 DDM._onLoad();
16909             } else {
16910                 if (DDM._timeoutCount > 2000) {
16911                 } else {
16912                     setTimeout(DDM._addListeners, 10);
16913                     if (document && document.body) {
16914                         DDM._timeoutCount += 1;
16915                     }
16916                 }
16917             }
16918         },
16919
16920         /**
16921          * Recursively searches the immediate parent and all child nodes for
16922          * the handle element in order to determine wheter or not it was
16923          * clicked.
16924          * @method handleWasClicked
16925          * @param node the html element to inspect
16926          * @static
16927          */
16928         handleWasClicked: function(node, id) {
16929             if (this.isHandle(id, node.id)) {
16930                 return true;
16931             } else {
16932                 // check to see if this is a text node child of the one we want
16933                 var p = node.parentNode;
16934
16935                 while (p) {
16936                     if (this.isHandle(id, p.id)) {
16937                         return true;
16938                     } else {
16939                         p = p.parentNode;
16940                     }
16941                 }
16942             }
16943
16944             return false;
16945         }
16946
16947     };
16948
16949 }();
16950
16951 // shorter alias, save a few bytes
16952 Roo.dd.DDM = Roo.dd.DragDropMgr;
16953 Roo.dd.DDM._addListeners();
16954
16955 }/*
16956  * Based on:
16957  * Ext JS Library 1.1.1
16958  * Copyright(c) 2006-2007, Ext JS, LLC.
16959  *
16960  * Originally Released Under LGPL - original licence link has changed is not relivant.
16961  *
16962  * Fork - LGPL
16963  * <script type="text/javascript">
16964  */
16965
16966 /**
16967  * @class Roo.dd.DD
16968  * A DragDrop implementation where the linked element follows the
16969  * mouse cursor during a drag.
16970  * @extends Roo.dd.DragDrop
16971  * @constructor
16972  * @param {String} id the id of the linked element
16973  * @param {String} sGroup the group of related DragDrop items
16974  * @param {object} config an object containing configurable attributes
16975  *                Valid properties for DD:
16976  *                    scroll
16977  */
16978 Roo.dd.DD = function(id, sGroup, config) {
16979     if (id) {
16980         this.init(id, sGroup, config);
16981     }
16982 };
16983
16984 Roo.extend(Roo.dd.DD, Roo.dd.DragDrop, {
16985
16986     /**
16987      * When set to true, the utility automatically tries to scroll the browser
16988      * window wehn a drag and drop element is dragged near the viewport boundary.
16989      * Defaults to true.
16990      * @property scroll
16991      * @type boolean
16992      */
16993     scroll: true,
16994
16995     /**
16996      * Sets the pointer offset to the distance between the linked element's top
16997      * left corner and the location the element was clicked
16998      * @method autoOffset
16999      * @param {int} iPageX the X coordinate of the click
17000      * @param {int} iPageY the Y coordinate of the click
17001      */
17002     autoOffset: function(iPageX, iPageY) {
17003         var x = iPageX - this.startPageX;
17004         var y = iPageY - this.startPageY;
17005         this.setDelta(x, y);
17006     },
17007
17008     /**
17009      * Sets the pointer offset.  You can call this directly to force the
17010      * offset to be in a particular location (e.g., pass in 0,0 to set it
17011      * to the center of the object)
17012      * @method setDelta
17013      * @param {int} iDeltaX the distance from the left
17014      * @param {int} iDeltaY the distance from the top
17015      */
17016     setDelta: function(iDeltaX, iDeltaY) {
17017         this.deltaX = iDeltaX;
17018         this.deltaY = iDeltaY;
17019     },
17020
17021     /**
17022      * Sets the drag element to the location of the mousedown or click event,
17023      * maintaining the cursor location relative to the location on the element
17024      * that was clicked.  Override this if you want to place the element in a
17025      * location other than where the cursor is.
17026      * @method setDragElPos
17027      * @param {int} iPageX the X coordinate of the mousedown or drag event
17028      * @param {int} iPageY the Y coordinate of the mousedown or drag event
17029      */
17030     setDragElPos: function(iPageX, iPageY) {
17031         // the first time we do this, we are going to check to make sure
17032         // the element has css positioning
17033
17034         var el = this.getDragEl();
17035         this.alignElWithMouse(el, iPageX, iPageY);
17036     },
17037
17038     /**
17039      * Sets the element to the location of the mousedown or click event,
17040      * maintaining the cursor location relative to the location on the element
17041      * that was clicked.  Override this if you want to place the element in a
17042      * location other than where the cursor is.
17043      * @method alignElWithMouse
17044      * @param {HTMLElement} el the element to move
17045      * @param {int} iPageX the X coordinate of the mousedown or drag event
17046      * @param {int} iPageY the Y coordinate of the mousedown or drag event
17047      */
17048     alignElWithMouse: function(el, iPageX, iPageY) {
17049         var oCoord = this.getTargetCoord(iPageX, iPageY);
17050         var fly = el.dom ? el : Roo.fly(el);
17051         if (!this.deltaSetXY) {
17052             var aCoord = [oCoord.x, oCoord.y];
17053             fly.setXY(aCoord);
17054             var newLeft = fly.getLeft(true);
17055             var newTop  = fly.getTop(true);
17056             this.deltaSetXY = [ newLeft - oCoord.x, newTop - oCoord.y ];
17057         } else {
17058             fly.setLeftTop(oCoord.x + this.deltaSetXY[0], oCoord.y + this.deltaSetXY[1]);
17059         }
17060
17061         this.cachePosition(oCoord.x, oCoord.y);
17062         this.autoScroll(oCoord.x, oCoord.y, el.offsetHeight, el.offsetWidth);
17063         return oCoord;
17064     },
17065
17066     /**
17067      * Saves the most recent position so that we can reset the constraints and
17068      * tick marks on-demand.  We need to know this so that we can calculate the
17069      * number of pixels the element is offset from its original position.
17070      * @method cachePosition
17071      * @param iPageX the current x position (optional, this just makes it so we
17072      * don't have to look it up again)
17073      * @param iPageY the current y position (optional, this just makes it so we
17074      * don't have to look it up again)
17075      */
17076     cachePosition: function(iPageX, iPageY) {
17077         if (iPageX) {
17078             this.lastPageX = iPageX;
17079             this.lastPageY = iPageY;
17080         } else {
17081             var aCoord = Roo.lib.Dom.getXY(this.getEl());
17082             this.lastPageX = aCoord[0];
17083             this.lastPageY = aCoord[1];
17084         }
17085     },
17086
17087     /**
17088      * Auto-scroll the window if the dragged object has been moved beyond the
17089      * visible window boundary.
17090      * @method autoScroll
17091      * @param {int} x the drag element's x position
17092      * @param {int} y the drag element's y position
17093      * @param {int} h the height of the drag element
17094      * @param {int} w the width of the drag element
17095      * @private
17096      */
17097     autoScroll: function(x, y, h, w) {
17098
17099         if (this.scroll) {
17100             // The client height
17101             var clientH = Roo.lib.Dom.getViewWidth();
17102
17103             // The client width
17104             var clientW = Roo.lib.Dom.getViewHeight();
17105
17106             // The amt scrolled down
17107             var st = this.DDM.getScrollTop();
17108
17109             // The amt scrolled right
17110             var sl = this.DDM.getScrollLeft();
17111
17112             // Location of the bottom of the element
17113             var bot = h + y;
17114
17115             // Location of the right of the element
17116             var right = w + x;
17117
17118             // The distance from the cursor to the bottom of the visible area,
17119             // adjusted so that we don't scroll if the cursor is beyond the
17120             // element drag constraints
17121             var toBot = (clientH + st - y - this.deltaY);
17122
17123             // The distance from the cursor to the right of the visible area
17124             var toRight = (clientW + sl - x - this.deltaX);
17125
17126
17127             // How close to the edge the cursor must be before we scroll
17128             // var thresh = (document.all) ? 100 : 40;
17129             var thresh = 40;
17130
17131             // How many pixels to scroll per autoscroll op.  This helps to reduce
17132             // clunky scrolling. IE is more sensitive about this ... it needs this
17133             // value to be higher.
17134             var scrAmt = (document.all) ? 80 : 30;
17135
17136             // Scroll down if we are near the bottom of the visible page and the
17137             // obj extends below the crease
17138             if ( bot > clientH && toBot < thresh ) {
17139                 window.scrollTo(sl, st + scrAmt);
17140             }
17141
17142             // Scroll up if the window is scrolled down and the top of the object
17143             // goes above the top border
17144             if ( y < st && st > 0 && y - st < thresh ) {
17145                 window.scrollTo(sl, st - scrAmt);
17146             }
17147
17148             // Scroll right if the obj is beyond the right border and the cursor is
17149             // near the border.
17150             if ( right > clientW && toRight < thresh ) {
17151                 window.scrollTo(sl + scrAmt, st);
17152             }
17153
17154             // Scroll left if the window has been scrolled to the right and the obj
17155             // extends past the left border
17156             if ( x < sl && sl > 0 && x - sl < thresh ) {
17157                 window.scrollTo(sl - scrAmt, st);
17158             }
17159         }
17160     },
17161
17162     /**
17163      * Finds the location the element should be placed if we want to move
17164      * it to where the mouse location less the click offset would place us.
17165      * @method getTargetCoord
17166      * @param {int} iPageX the X coordinate of the click
17167      * @param {int} iPageY the Y coordinate of the click
17168      * @return an object that contains the coordinates (Object.x and Object.y)
17169      * @private
17170      */
17171     getTargetCoord: function(iPageX, iPageY) {
17172
17173
17174         var x = iPageX - this.deltaX;
17175         var y = iPageY - this.deltaY;
17176
17177         if (this.constrainX) {
17178             if (x < this.minX) { x = this.minX; }
17179             if (x > this.maxX) { x = this.maxX; }
17180         }
17181
17182         if (this.constrainY) {
17183             if (y < this.minY) { y = this.minY; }
17184             if (y > this.maxY) { y = this.maxY; }
17185         }
17186
17187         x = this.getTick(x, this.xTicks);
17188         y = this.getTick(y, this.yTicks);
17189
17190
17191         return {x:x, y:y};
17192     },
17193
17194     /*
17195      * Sets up config options specific to this class. Overrides
17196      * Roo.dd.DragDrop, but all versions of this method through the
17197      * inheritance chain are called
17198      */
17199     applyConfig: function() {
17200         Roo.dd.DD.superclass.applyConfig.call(this);
17201         this.scroll = (this.config.scroll !== false);
17202     },
17203
17204     /*
17205      * Event that fires prior to the onMouseDown event.  Overrides
17206      * Roo.dd.DragDrop.
17207      */
17208     b4MouseDown: function(e) {
17209         // this.resetConstraints();
17210         this.autoOffset(e.getPageX(),
17211                             e.getPageY());
17212     },
17213
17214     /*
17215      * Event that fires prior to the onDrag event.  Overrides
17216      * Roo.dd.DragDrop.
17217      */
17218     b4Drag: function(e) {
17219         this.setDragElPos(e.getPageX(),
17220                             e.getPageY());
17221     },
17222
17223     toString: function() {
17224         return ("DD " + this.id);
17225     }
17226
17227     //////////////////////////////////////////////////////////////////////////
17228     // Debugging ygDragDrop events that can be overridden
17229     //////////////////////////////////////////////////////////////////////////
17230     /*
17231     startDrag: function(x, y) {
17232     },
17233
17234     onDrag: function(e) {
17235     },
17236
17237     onDragEnter: function(e, id) {
17238     },
17239
17240     onDragOver: function(e, id) {
17241     },
17242
17243     onDragOut: function(e, id) {
17244     },
17245
17246     onDragDrop: function(e, id) {
17247     },
17248
17249     endDrag: function(e) {
17250     }
17251
17252     */
17253
17254 });/*
17255  * Based on:
17256  * Ext JS Library 1.1.1
17257  * Copyright(c) 2006-2007, Ext JS, LLC.
17258  *
17259  * Originally Released Under LGPL - original licence link has changed is not relivant.
17260  *
17261  * Fork - LGPL
17262  * <script type="text/javascript">
17263  */
17264
17265 /**
17266  * @class Roo.dd.DDProxy
17267  * A DragDrop implementation that inserts an empty, bordered div into
17268  * the document that follows the cursor during drag operations.  At the time of
17269  * the click, the frame div is resized to the dimensions of the linked html
17270  * element, and moved to the exact location of the linked element.
17271  *
17272  * References to the "frame" element refer to the single proxy element that
17273  * was created to be dragged in place of all DDProxy elements on the
17274  * page.
17275  *
17276  * @extends Roo.dd.DD
17277  * @constructor
17278  * @param {String} id the id of the linked html element
17279  * @param {String} sGroup the group of related DragDrop objects
17280  * @param {object} config an object containing configurable attributes
17281  *                Valid properties for DDProxy in addition to those in DragDrop:
17282  *                   resizeFrame, centerFrame, dragElId
17283  */
17284 Roo.dd.DDProxy = function(id, sGroup, config) {
17285     if (id) {
17286         this.init(id, sGroup, config);
17287         this.initFrame();
17288     }
17289 };
17290
17291 /**
17292  * The default drag frame div id
17293  * @property Roo.dd.DDProxy.dragElId
17294  * @type String
17295  * @static
17296  */
17297 Roo.dd.DDProxy.dragElId = "ygddfdiv";
17298
17299 Roo.extend(Roo.dd.DDProxy, Roo.dd.DD, {
17300
17301     /**
17302      * By default we resize the drag frame to be the same size as the element
17303      * we want to drag (this is to get the frame effect).  We can turn it off
17304      * if we want a different behavior.
17305      * @property resizeFrame
17306      * @type boolean
17307      */
17308     resizeFrame: true,
17309
17310     /**
17311      * By default the frame is positioned exactly where the drag element is, so
17312      * we use the cursor offset provided by Roo.dd.DD.  Another option that works only if
17313      * you do not have constraints on the obj is to have the drag frame centered
17314      * around the cursor.  Set centerFrame to true for this effect.
17315      * @property centerFrame
17316      * @type boolean
17317      */
17318     centerFrame: false,
17319
17320     /**
17321      * Creates the proxy element if it does not yet exist
17322      * @method createFrame
17323      */
17324     createFrame: function() {
17325         var self = this;
17326         var body = document.body;
17327
17328         if (!body || !body.firstChild) {
17329             setTimeout( function() { self.createFrame(); }, 50 );
17330             return;
17331         }
17332
17333         var div = this.getDragEl();
17334
17335         if (!div) {
17336             div    = document.createElement("div");
17337             div.id = this.dragElId;
17338             var s  = div.style;
17339
17340             s.position   = "absolute";
17341             s.visibility = "hidden";
17342             s.cursor     = "move";
17343             s.border     = "2px solid #aaa";
17344             s.zIndex     = 999;
17345
17346             // appendChild can blow up IE if invoked prior to the window load event
17347             // while rendering a table.  It is possible there are other scenarios
17348             // that would cause this to happen as well.
17349             body.insertBefore(div, body.firstChild);
17350         }
17351     },
17352
17353     /**
17354      * Initialization for the drag frame element.  Must be called in the
17355      * constructor of all subclasses
17356      * @method initFrame
17357      */
17358     initFrame: function() {
17359         this.createFrame();
17360     },
17361
17362     applyConfig: function() {
17363         Roo.dd.DDProxy.superclass.applyConfig.call(this);
17364
17365         this.resizeFrame = (this.config.resizeFrame !== false);
17366         this.centerFrame = (this.config.centerFrame);
17367         this.setDragElId(this.config.dragElId || Roo.dd.DDProxy.dragElId);
17368     },
17369
17370     /**
17371      * Resizes the drag frame to the dimensions of the clicked object, positions
17372      * it over the object, and finally displays it
17373      * @method showFrame
17374      * @param {int} iPageX X click position
17375      * @param {int} iPageY Y click position
17376      * @private
17377      */
17378     showFrame: function(iPageX, iPageY) {
17379         var el = this.getEl();
17380         var dragEl = this.getDragEl();
17381         var s = dragEl.style;
17382
17383         this._resizeProxy();
17384
17385         if (this.centerFrame) {
17386             this.setDelta( Math.round(parseInt(s.width,  10)/2),
17387                            Math.round(parseInt(s.height, 10)/2) );
17388         }
17389
17390         this.setDragElPos(iPageX, iPageY);
17391
17392         Roo.fly(dragEl).show();
17393     },
17394
17395     /**
17396      * The proxy is automatically resized to the dimensions of the linked
17397      * element when a drag is initiated, unless resizeFrame is set to false
17398      * @method _resizeProxy
17399      * @private
17400      */
17401     _resizeProxy: function() {
17402         if (this.resizeFrame) {
17403             var el = this.getEl();
17404             Roo.fly(this.getDragEl()).setSize(el.offsetWidth, el.offsetHeight);
17405         }
17406     },
17407
17408     // overrides Roo.dd.DragDrop
17409     b4MouseDown: function(e) {
17410         var x = e.getPageX();
17411         var y = e.getPageY();
17412         this.autoOffset(x, y);
17413         this.setDragElPos(x, y);
17414     },
17415
17416     // overrides Roo.dd.DragDrop
17417     b4StartDrag: function(x, y) {
17418         // show the drag frame
17419         this.showFrame(x, y);
17420     },
17421
17422     // overrides Roo.dd.DragDrop
17423     b4EndDrag: function(e) {
17424         Roo.fly(this.getDragEl()).hide();
17425     },
17426
17427     // overrides Roo.dd.DragDrop
17428     // By default we try to move the element to the last location of the frame.
17429     // This is so that the default behavior mirrors that of Roo.dd.DD.
17430     endDrag: function(e) {
17431
17432         var lel = this.getEl();
17433         var del = this.getDragEl();
17434
17435         // Show the drag frame briefly so we can get its position
17436         del.style.visibility = "";
17437
17438         this.beforeMove();
17439         // Hide the linked element before the move to get around a Safari
17440         // rendering bug.
17441         lel.style.visibility = "hidden";
17442         Roo.dd.DDM.moveToEl(lel, del);
17443         del.style.visibility = "hidden";
17444         lel.style.visibility = "";
17445
17446         this.afterDrag();
17447     },
17448
17449     beforeMove : function(){
17450
17451     },
17452
17453     afterDrag : function(){
17454
17455     },
17456
17457     toString: function() {
17458         return ("DDProxy " + this.id);
17459     }
17460
17461 });
17462 /*
17463  * Based on:
17464  * Ext JS Library 1.1.1
17465  * Copyright(c) 2006-2007, Ext JS, LLC.
17466  *
17467  * Originally Released Under LGPL - original licence link has changed is not relivant.
17468  *
17469  * Fork - LGPL
17470  * <script type="text/javascript">
17471  */
17472
17473  /**
17474  * @class Roo.dd.DDTarget
17475  * A DragDrop implementation that does not move, but can be a drop
17476  * target.  You would get the same result by simply omitting implementation
17477  * for the event callbacks, but this way we reduce the processing cost of the
17478  * event listener and the callbacks.
17479  * @extends Roo.dd.DragDrop
17480  * @constructor
17481  * @param {String} id the id of the element that is a drop target
17482  * @param {String} sGroup the group of related DragDrop objects
17483  * @param {object} config an object containing configurable attributes
17484  *                 Valid properties for DDTarget in addition to those in
17485  *                 DragDrop:
17486  *                    none
17487  */
17488 Roo.dd.DDTarget = function(id, sGroup, config) {
17489     if (id) {
17490         this.initTarget(id, sGroup, config);
17491     }
17492     if (config.listeners || config.events) { 
17493        Roo.dd.DragDrop.superclass.constructor.call(this,  { 
17494             listeners : config.listeners || {}, 
17495             events : config.events || {} 
17496         });    
17497     }
17498 };
17499
17500 // Roo.dd.DDTarget.prototype = new Roo.dd.DragDrop();
17501 Roo.extend(Roo.dd.DDTarget, Roo.dd.DragDrop, {
17502     toString: function() {
17503         return ("DDTarget " + this.id);
17504     }
17505 });
17506 /*
17507  * Based on:
17508  * Ext JS Library 1.1.1
17509  * Copyright(c) 2006-2007, Ext JS, LLC.
17510  *
17511  * Originally Released Under LGPL - original licence link has changed is not relivant.
17512  *
17513  * Fork - LGPL
17514  * <script type="text/javascript">
17515  */
17516  
17517
17518 /**
17519  * @class Roo.dd.ScrollManager
17520  * Provides automatic scrolling of overflow regions in the page during drag operations.<br><br>
17521  * <b>Note: This class uses "Point Mode" and is untested in "Intersect Mode".</b>
17522  * @singleton
17523  */
17524 Roo.dd.ScrollManager = function(){
17525     var ddm = Roo.dd.DragDropMgr;
17526     var els = {};
17527     var dragEl = null;
17528     var proc = {};
17529     
17530     var onStop = function(e){
17531         dragEl = null;
17532         clearProc();
17533     };
17534     
17535     var triggerRefresh = function(){
17536         if(ddm.dragCurrent){
17537              ddm.refreshCache(ddm.dragCurrent.groups);
17538         }
17539     };
17540     
17541     var doScroll = function(){
17542         if(ddm.dragCurrent){
17543             var dds = Roo.dd.ScrollManager;
17544             if(!dds.animate){
17545                 if(proc.el.scroll(proc.dir, dds.increment)){
17546                     triggerRefresh();
17547                 }
17548             }else{
17549                 proc.el.scroll(proc.dir, dds.increment, true, dds.animDuration, triggerRefresh);
17550             }
17551         }
17552     };
17553     
17554     var clearProc = function(){
17555         if(proc.id){
17556             clearInterval(proc.id);
17557         }
17558         proc.id = 0;
17559         proc.el = null;
17560         proc.dir = "";
17561     };
17562     
17563     var startProc = function(el, dir){
17564         clearProc();
17565         proc.el = el;
17566         proc.dir = dir;
17567         proc.id = setInterval(doScroll, Roo.dd.ScrollManager.frequency);
17568     };
17569     
17570     var onFire = function(e, isDrop){
17571         if(isDrop || !ddm.dragCurrent){ return; }
17572         var dds = Roo.dd.ScrollManager;
17573         if(!dragEl || dragEl != ddm.dragCurrent){
17574             dragEl = ddm.dragCurrent;
17575             // refresh regions on drag start
17576             dds.refreshCache();
17577         }
17578         
17579         var xy = Roo.lib.Event.getXY(e);
17580         var pt = new Roo.lib.Point(xy[0], xy[1]);
17581         for(var id in els){
17582             var el = els[id], r = el._region;
17583             if(r && r.contains(pt) && el.isScrollable()){
17584                 if(r.bottom - pt.y <= dds.thresh){
17585                     if(proc.el != el){
17586                         startProc(el, "down");
17587                     }
17588                     return;
17589                 }else if(r.right - pt.x <= dds.thresh){
17590                     if(proc.el != el){
17591                         startProc(el, "left");
17592                     }
17593                     return;
17594                 }else if(pt.y - r.top <= dds.thresh){
17595                     if(proc.el != el){
17596                         startProc(el, "up");
17597                     }
17598                     return;
17599                 }else if(pt.x - r.left <= dds.thresh){
17600                     if(proc.el != el){
17601                         startProc(el, "right");
17602                     }
17603                     return;
17604                 }
17605             }
17606         }
17607         clearProc();
17608     };
17609     
17610     ddm.fireEvents = ddm.fireEvents.createSequence(onFire, ddm);
17611     ddm.stopDrag = ddm.stopDrag.createSequence(onStop, ddm);
17612     
17613     return {
17614         /**
17615          * Registers new overflow element(s) to auto scroll
17616          * @param {String/HTMLElement/Element/Array} el The id of or the element to be scrolled or an array of either
17617          */
17618         register : function(el){
17619             if(el instanceof Array){
17620                 for(var i = 0, len = el.length; i < len; i++) {
17621                         this.register(el[i]);
17622                 }
17623             }else{
17624                 el = Roo.get(el);
17625                 els[el.id] = el;
17626             }
17627         },
17628         
17629         /**
17630          * Unregisters overflow element(s) so they are no longer scrolled
17631          * @param {String/HTMLElement/Element/Array} el The id of or the element to be removed or an array of either
17632          */
17633         unregister : function(el){
17634             if(el instanceof Array){
17635                 for(var i = 0, len = el.length; i < len; i++) {
17636                         this.unregister(el[i]);
17637                 }
17638             }else{
17639                 el = Roo.get(el);
17640                 delete els[el.id];
17641             }
17642         },
17643         
17644         /**
17645          * The number of pixels from the edge of a container the pointer needs to be to 
17646          * trigger scrolling (defaults to 25)
17647          * @type Number
17648          */
17649         thresh : 25,
17650         
17651         /**
17652          * The number of pixels to scroll in each scroll increment (defaults to 50)
17653          * @type Number
17654          */
17655         increment : 100,
17656         
17657         /**
17658          * The frequency of scrolls in milliseconds (defaults to 500)
17659          * @type Number
17660          */
17661         frequency : 500,
17662         
17663         /**
17664          * True to animate the scroll (defaults to true)
17665          * @type Boolean
17666          */
17667         animate: true,
17668         
17669         /**
17670          * The animation duration in seconds - 
17671          * MUST BE less than Roo.dd.ScrollManager.frequency! (defaults to .4)
17672          * @type Number
17673          */
17674         animDuration: .4,
17675         
17676         /**
17677          * Manually trigger a cache refresh.
17678          */
17679         refreshCache : function(){
17680             for(var id in els){
17681                 if(typeof els[id] == 'object'){ // for people extending the object prototype
17682                     els[id]._region = els[id].getRegion();
17683                 }
17684             }
17685         }
17686     };
17687 }();/*
17688  * Based on:
17689  * Ext JS Library 1.1.1
17690  * Copyright(c) 2006-2007, Ext JS, LLC.
17691  *
17692  * Originally Released Under LGPL - original licence link has changed is not relivant.
17693  *
17694  * Fork - LGPL
17695  * <script type="text/javascript">
17696  */
17697  
17698
17699 /**
17700  * @class Roo.dd.Registry
17701  * Provides easy access to all drag drop components that are registered on a page.  Items can be retrieved either
17702  * directly by DOM node id, or by passing in the drag drop event that occurred and looking up the event target.
17703  * @singleton
17704  */
17705 Roo.dd.Registry = function(){
17706     var elements = {}; 
17707     var handles = {}; 
17708     var autoIdSeed = 0;
17709
17710     var getId = function(el, autogen){
17711         if(typeof el == "string"){
17712             return el;
17713         }
17714         var id = el.id;
17715         if(!id && autogen !== false){
17716             id = "roodd-" + (++autoIdSeed);
17717             el.id = id;
17718         }
17719         return id;
17720     };
17721     
17722     return {
17723     /**
17724      * Register a drag drop element
17725      * @param {String|HTMLElement} element The id or DOM node to register
17726      * @param {Object} data (optional) A custom data object that will be passed between the elements that are involved
17727      * in drag drop operations.  You can populate this object with any arbitrary properties that your own code
17728      * knows how to interpret, plus there are some specific properties known to the Registry that should be
17729      * populated in the data object (if applicable):
17730      * <pre>
17731 Value      Description<br />
17732 ---------  ------------------------------------------<br />
17733 handles    Array of DOM nodes that trigger dragging<br />
17734            for the element being registered<br />
17735 isHandle   True if the element passed in triggers<br />
17736            dragging itself, else false
17737 </pre>
17738      */
17739         register : function(el, data){
17740             data = data || {};
17741             if(typeof el == "string"){
17742                 el = document.getElementById(el);
17743             }
17744             data.ddel = el;
17745             elements[getId(el)] = data;
17746             if(data.isHandle !== false){
17747                 handles[data.ddel.id] = data;
17748             }
17749             if(data.handles){
17750                 var hs = data.handles;
17751                 for(var i = 0, len = hs.length; i < len; i++){
17752                         handles[getId(hs[i])] = data;
17753                 }
17754             }
17755         },
17756
17757     /**
17758      * Unregister a drag drop element
17759      * @param {String|HTMLElement}  element The id or DOM node to unregister
17760      */
17761         unregister : function(el){
17762             var id = getId(el, false);
17763             var data = elements[id];
17764             if(data){
17765                 delete elements[id];
17766                 if(data.handles){
17767                     var hs = data.handles;
17768                     for(var i = 0, len = hs.length; i < len; i++){
17769                         delete handles[getId(hs[i], false)];
17770                     }
17771                 }
17772             }
17773         },
17774
17775     /**
17776      * Returns the handle registered for a DOM Node by id
17777      * @param {String|HTMLElement} id The DOM node or id to look up
17778      * @return {Object} handle The custom handle data
17779      */
17780         getHandle : function(id){
17781             if(typeof id != "string"){ // must be element?
17782                 id = id.id;
17783             }
17784             return handles[id];
17785         },
17786
17787     /**
17788      * Returns the handle that is registered for the DOM node that is the target of the event
17789      * @param {Event} e The event
17790      * @return {Object} handle The custom handle data
17791      */
17792         getHandleFromEvent : function(e){
17793             var t = Roo.lib.Event.getTarget(e);
17794             return t ? handles[t.id] : null;
17795         },
17796
17797     /**
17798      * Returns a custom data object that is registered for a DOM node by id
17799      * @param {String|HTMLElement} id The DOM node or id to look up
17800      * @return {Object} data The custom data
17801      */
17802         getTarget : function(id){
17803             if(typeof id != "string"){ // must be element?
17804                 id = id.id;
17805             }
17806             return elements[id];
17807         },
17808
17809     /**
17810      * Returns a custom data object that is registered for the DOM node that is the target of the event
17811      * @param {Event} e The event
17812      * @return {Object} data The custom data
17813      */
17814         getTargetFromEvent : function(e){
17815             var t = Roo.lib.Event.getTarget(e);
17816             return t ? elements[t.id] || handles[t.id] : null;
17817         }
17818     };
17819 }();/*
17820  * Based on:
17821  * Ext JS Library 1.1.1
17822  * Copyright(c) 2006-2007, Ext JS, LLC.
17823  *
17824  * Originally Released Under LGPL - original licence link has changed is not relivant.
17825  *
17826  * Fork - LGPL
17827  * <script type="text/javascript">
17828  */
17829  
17830
17831 /**
17832  * @class Roo.dd.StatusProxy
17833  * A specialized drag proxy that supports a drop status icon, {@link Roo.Layer} styles and auto-repair.  This is the
17834  * default drag proxy used by all Roo.dd components.
17835  * @constructor
17836  * @param {Object} config
17837  */
17838 Roo.dd.StatusProxy = function(config){
17839     Roo.apply(this, config);
17840     this.id = this.id || Roo.id();
17841     this.el = new Roo.Layer({
17842         dh: {
17843             id: this.id, tag: "div", cls: "x-dd-drag-proxy "+this.dropNotAllowed, children: [
17844                 {tag: "div", cls: "x-dd-drop-icon"},
17845                 {tag: "div", cls: "x-dd-drag-ghost"}
17846             ]
17847         }, 
17848         shadow: !config || config.shadow !== false
17849     });
17850     this.ghost = Roo.get(this.el.dom.childNodes[1]);
17851     this.dropStatus = this.dropNotAllowed;
17852 };
17853
17854 Roo.dd.StatusProxy.prototype = {
17855     /**
17856      * @cfg {String} dropAllowed
17857      * The CSS class to apply to the status element when drop is allowed (defaults to "x-dd-drop-ok").
17858      */
17859     dropAllowed : "x-dd-drop-ok",
17860     /**
17861      * @cfg {String} dropNotAllowed
17862      * The CSS class to apply to the status element when drop is not allowed (defaults to "x-dd-drop-nodrop").
17863      */
17864     dropNotAllowed : "x-dd-drop-nodrop",
17865
17866     /**
17867      * Updates the proxy's visual element to indicate the status of whether or not drop is allowed
17868      * over the current target element.
17869      * @param {String} cssClass The css class for the new drop status indicator image
17870      */
17871     setStatus : function(cssClass){
17872         cssClass = cssClass || this.dropNotAllowed;
17873         if(this.dropStatus != cssClass){
17874             this.el.replaceClass(this.dropStatus, cssClass);
17875             this.dropStatus = cssClass;
17876         }
17877     },
17878
17879     /**
17880      * Resets the status indicator to the default dropNotAllowed value
17881      * @param {Boolean} clearGhost True to also remove all content from the ghost, false to preserve it
17882      */
17883     reset : function(clearGhost){
17884         this.el.dom.className = "x-dd-drag-proxy " + this.dropNotAllowed;
17885         this.dropStatus = this.dropNotAllowed;
17886         if(clearGhost){
17887             this.ghost.update("");
17888         }
17889     },
17890
17891     /**
17892      * Updates the contents of the ghost element
17893      * @param {String} html The html that will replace the current innerHTML of the ghost element
17894      */
17895     update : function(html){
17896         if(typeof html == "string"){
17897             this.ghost.update(html);
17898         }else{
17899             this.ghost.update("");
17900             html.style.margin = "0";
17901             this.ghost.dom.appendChild(html);
17902         }
17903         // ensure float = none set?? cant remember why though.
17904         var el = this.ghost.dom.firstChild;
17905                 if(el){
17906                         Roo.fly(el).setStyle('float', 'none');
17907                 }
17908     },
17909     
17910     /**
17911      * Returns the underlying proxy {@link Roo.Layer}
17912      * @return {Roo.Layer} el
17913     */
17914     getEl : function(){
17915         return this.el;
17916     },
17917
17918     /**
17919      * Returns the ghost element
17920      * @return {Roo.Element} el
17921      */
17922     getGhost : function(){
17923         return this.ghost;
17924     },
17925
17926     /**
17927      * Hides the proxy
17928      * @param {Boolean} clear True to reset the status and clear the ghost contents, false to preserve them
17929      */
17930     hide : function(clear){
17931         this.el.hide();
17932         if(clear){
17933             this.reset(true);
17934         }
17935     },
17936
17937     /**
17938      * Stops the repair animation if it's currently running
17939      */
17940     stop : function(){
17941         if(this.anim && this.anim.isAnimated && this.anim.isAnimated()){
17942             this.anim.stop();
17943         }
17944     },
17945
17946     /**
17947      * Displays this proxy
17948      */
17949     show : function(){
17950         this.el.show();
17951     },
17952
17953     /**
17954      * Force the Layer to sync its shadow and shim positions to the element
17955      */
17956     sync : function(){
17957         this.el.sync();
17958     },
17959
17960     /**
17961      * Causes the proxy to return to its position of origin via an animation.  Should be called after an
17962      * invalid drop operation by the item being dragged.
17963      * @param {Array} xy The XY position of the element ([x, y])
17964      * @param {Function} callback The function to call after the repair is complete
17965      * @param {Object} scope The scope in which to execute the callback
17966      */
17967     repair : function(xy, callback, scope){
17968         this.callback = callback;
17969         this.scope = scope;
17970         if(xy && this.animRepair !== false){
17971             this.el.addClass("x-dd-drag-repair");
17972             this.el.hideUnders(true);
17973             this.anim = this.el.shift({
17974                 duration: this.repairDuration || .5,
17975                 easing: 'easeOut',
17976                 xy: xy,
17977                 stopFx: true,
17978                 callback: this.afterRepair,
17979                 scope: this
17980             });
17981         }else{
17982             this.afterRepair();
17983         }
17984     },
17985
17986     // private
17987     afterRepair : function(){
17988         this.hide(true);
17989         if(typeof this.callback == "function"){
17990             this.callback.call(this.scope || this);
17991         }
17992         this.callback = null;
17993         this.scope = null;
17994     }
17995 };/*
17996  * Based on:
17997  * Ext JS Library 1.1.1
17998  * Copyright(c) 2006-2007, Ext JS, LLC.
17999  *
18000  * Originally Released Under LGPL - original licence link has changed is not relivant.
18001  *
18002  * Fork - LGPL
18003  * <script type="text/javascript">
18004  */
18005
18006 /**
18007  * @class Roo.dd.DragSource
18008  * @extends Roo.dd.DDProxy
18009  * A simple class that provides the basic implementation needed to make any element draggable.
18010  * @constructor
18011  * @param {String/HTMLElement/Element} el The container element
18012  * @param {Object} config
18013  */
18014 Roo.dd.DragSource = function(el, config){
18015     this.el = Roo.get(el);
18016     this.dragData = {};
18017     
18018     Roo.apply(this, config);
18019     
18020     if(!this.proxy){
18021         this.proxy = new Roo.dd.StatusProxy();
18022     }
18023
18024     Roo.dd.DragSource.superclass.constructor.call(this, this.el.dom, this.ddGroup || this.group,
18025           {dragElId : this.proxy.id, resizeFrame: false, isTarget: false, scroll: this.scroll === true});
18026     
18027     this.dragging = false;
18028 };
18029
18030 Roo.extend(Roo.dd.DragSource, Roo.dd.DDProxy, {
18031     /**
18032      * @cfg {String} dropAllowed
18033      * The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").
18034      */
18035     dropAllowed : "x-dd-drop-ok",
18036     /**
18037      * @cfg {String} dropNotAllowed
18038      * The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").
18039      */
18040     dropNotAllowed : "x-dd-drop-nodrop",
18041
18042     /**
18043      * Returns the data object associated with this drag source
18044      * @return {Object} data An object containing arbitrary data
18045      */
18046     getDragData : function(e){
18047         return this.dragData;
18048     },
18049
18050     // private
18051     onDragEnter : function(e, id){
18052         var target = Roo.dd.DragDropMgr.getDDById(id);
18053         this.cachedTarget = target;
18054         if(this.beforeDragEnter(target, e, id) !== false){
18055             if(target.isNotifyTarget){
18056                 var status = target.notifyEnter(this, e, this.dragData);
18057                 this.proxy.setStatus(status);
18058             }else{
18059                 this.proxy.setStatus(this.dropAllowed);
18060             }
18061             
18062             if(this.afterDragEnter){
18063                 /**
18064                  * An empty function by default, but provided so that you can perform a custom action
18065                  * when the dragged item enters the drop target by providing an implementation.
18066                  * @param {Roo.dd.DragDrop} target The drop target
18067                  * @param {Event} e The event object
18068                  * @param {String} id The id of the dragged element
18069                  * @method afterDragEnter
18070                  */
18071                 this.afterDragEnter(target, e, id);
18072             }
18073         }
18074     },
18075
18076     /**
18077      * An empty function by default, but provided so that you can perform a custom action
18078      * before the dragged item enters the drop target and optionally cancel the onDragEnter.
18079      * @param {Roo.dd.DragDrop} target The drop target
18080      * @param {Event} e The event object
18081      * @param {String} id The id of the dragged element
18082      * @return {Boolean} isValid True if the drag event is valid, else false to cancel
18083      */
18084     beforeDragEnter : function(target, e, id){
18085         return true;
18086     },
18087
18088     // private
18089     alignElWithMouse: function() {
18090         Roo.dd.DragSource.superclass.alignElWithMouse.apply(this, arguments);
18091         this.proxy.sync();
18092     },
18093
18094     // private
18095     onDragOver : function(e, id){
18096         var target = this.cachedTarget || Roo.dd.DragDropMgr.getDDById(id);
18097         if(this.beforeDragOver(target, e, id) !== false){
18098             if(target.isNotifyTarget){
18099                 var status = target.notifyOver(this, e, this.dragData);
18100                 this.proxy.setStatus(status);
18101             }
18102
18103             if(this.afterDragOver){
18104                 /**
18105                  * An empty function by default, but provided so that you can perform a custom action
18106                  * while the dragged item is over the drop target by providing an implementation.
18107                  * @param {Roo.dd.DragDrop} target The drop target
18108                  * @param {Event} e The event object
18109                  * @param {String} id The id of the dragged element
18110                  * @method afterDragOver
18111                  */
18112                 this.afterDragOver(target, e, id);
18113             }
18114         }
18115     },
18116
18117     /**
18118      * An empty function by default, but provided so that you can perform a custom action
18119      * while the dragged item is over the drop target and optionally cancel the onDragOver.
18120      * @param {Roo.dd.DragDrop} target The drop target
18121      * @param {Event} e The event object
18122      * @param {String} id The id of the dragged element
18123      * @return {Boolean} isValid True if the drag event is valid, else false to cancel
18124      */
18125     beforeDragOver : function(target, e, id){
18126         return true;
18127     },
18128
18129     // private
18130     onDragOut : function(e, id){
18131         var target = this.cachedTarget || Roo.dd.DragDropMgr.getDDById(id);
18132         if(this.beforeDragOut(target, e, id) !== false){
18133             if(target.isNotifyTarget){
18134                 target.notifyOut(this, e, this.dragData);
18135             }
18136             this.proxy.reset();
18137             if(this.afterDragOut){
18138                 /**
18139                  * An empty function by default, but provided so that you can perform a custom action
18140                  * after the dragged item is dragged out of the target without dropping.
18141                  * @param {Roo.dd.DragDrop} target The drop target
18142                  * @param {Event} e The event object
18143                  * @param {String} id The id of the dragged element
18144                  * @method afterDragOut
18145                  */
18146                 this.afterDragOut(target, e, id);
18147             }
18148         }
18149         this.cachedTarget = null;
18150     },
18151
18152     /**
18153      * An empty function by default, but provided so that you can perform a custom action before the dragged
18154      * item is dragged out of the target without dropping, and optionally cancel the onDragOut.
18155      * @param {Roo.dd.DragDrop} target The drop target
18156      * @param {Event} e The event object
18157      * @param {String} id The id of the dragged element
18158      * @return {Boolean} isValid True if the drag event is valid, else false to cancel
18159      */
18160     beforeDragOut : function(target, e, id){
18161         return true;
18162     },
18163     
18164     // private
18165     onDragDrop : function(e, id){
18166         var target = this.cachedTarget || Roo.dd.DragDropMgr.getDDById(id);
18167         if(this.beforeDragDrop(target, e, id) !== false){
18168             if(target.isNotifyTarget){
18169                 if(target.notifyDrop(this, e, this.dragData)){ // valid drop?
18170                     this.onValidDrop(target, e, id);
18171                 }else{
18172                     this.onInvalidDrop(target, e, id);
18173                 }
18174             }else{
18175                 this.onValidDrop(target, e, id);
18176             }
18177             
18178             if(this.afterDragDrop){
18179                 /**
18180                  * An empty function by default, but provided so that you can perform a custom action
18181                  * after a valid drag drop has occurred by providing an implementation.
18182                  * @param {Roo.dd.DragDrop} target The drop target
18183                  * @param {Event} e The event object
18184                  * @param {String} id The id of the dropped element
18185                  * @method afterDragDrop
18186                  */
18187                 this.afterDragDrop(target, e, id);
18188             }
18189         }
18190         delete this.cachedTarget;
18191     },
18192
18193     /**
18194      * An empty function by default, but provided so that you can perform a custom action before the dragged
18195      * item is dropped onto the target and optionally cancel the onDragDrop.
18196      * @param {Roo.dd.DragDrop} target The drop target
18197      * @param {Event} e The event object
18198      * @param {String} id The id of the dragged element
18199      * @return {Boolean} isValid True if the drag drop event is valid, else false to cancel
18200      */
18201     beforeDragDrop : function(target, e, id){
18202         return true;
18203     },
18204
18205     // private
18206     onValidDrop : function(target, e, id){
18207         this.hideProxy();
18208         if(this.afterValidDrop){
18209             /**
18210              * An empty function by default, but provided so that you can perform a custom action
18211              * after a valid drop has occurred by providing an implementation.
18212              * @param {Object} target The target DD 
18213              * @param {Event} e The event object
18214              * @param {String} id The id of the dropped element
18215              * @method afterInvalidDrop
18216              */
18217             this.afterValidDrop(target, e, id);
18218         }
18219     },
18220
18221     // private
18222     getRepairXY : function(e, data){
18223         return this.el.getXY();  
18224     },
18225
18226     // private
18227     onInvalidDrop : function(target, e, id){
18228         this.beforeInvalidDrop(target, e, id);
18229         if(this.cachedTarget){
18230             if(this.cachedTarget.isNotifyTarget){
18231                 this.cachedTarget.notifyOut(this, e, this.dragData);
18232             }
18233             this.cacheTarget = null;
18234         }
18235         this.proxy.repair(this.getRepairXY(e, this.dragData), this.afterRepair, this);
18236
18237         if(this.afterInvalidDrop){
18238             /**
18239              * An empty function by default, but provided so that you can perform a custom action
18240              * after an invalid drop has occurred by providing an implementation.
18241              * @param {Event} e The event object
18242              * @param {String} id The id of the dropped element
18243              * @method afterInvalidDrop
18244              */
18245             this.afterInvalidDrop(e, id);
18246         }
18247     },
18248
18249     // private
18250     afterRepair : function(){
18251         if(Roo.enableFx){
18252             this.el.highlight(this.hlColor || "c3daf9");
18253         }
18254         this.dragging = false;
18255     },
18256
18257     /**
18258      * An empty function by default, but provided so that you can perform a custom action after an invalid
18259      * drop has occurred.
18260      * @param {Roo.dd.DragDrop} target The drop target
18261      * @param {Event} e The event object
18262      * @param {String} id The id of the dragged element
18263      * @return {Boolean} isValid True if the invalid drop should proceed, else false to cancel
18264      */
18265     beforeInvalidDrop : function(target, e, id){
18266         return true;
18267     },
18268
18269     // private
18270     handleMouseDown : function(e){
18271         if(this.dragging) {
18272             return;
18273         }
18274         var data = this.getDragData(e);
18275         if(data && this.onBeforeDrag(data, e) !== false){
18276             this.dragData = data;
18277             this.proxy.stop();
18278             Roo.dd.DragSource.superclass.handleMouseDown.apply(this, arguments);
18279         } 
18280     },
18281
18282     /**
18283      * An empty function by default, but provided so that you can perform a custom action before the initial
18284      * drag event begins and optionally cancel it.
18285      * @param {Object} data An object containing arbitrary data to be shared with drop targets
18286      * @param {Event} e The event object
18287      * @return {Boolean} isValid True if the drag event is valid, else false to cancel
18288      */
18289     onBeforeDrag : function(data, e){
18290         return true;
18291     },
18292
18293     /**
18294      * An empty function by default, but provided so that you can perform a custom action once the initial
18295      * drag event has begun.  The drag cannot be canceled from this function.
18296      * @param {Number} x The x position of the click on the dragged object
18297      * @param {Number} y The y position of the click on the dragged object
18298      */
18299     onStartDrag : Roo.emptyFn,
18300
18301     // private - YUI override
18302     startDrag : function(x, y){
18303         this.proxy.reset();
18304         this.dragging = true;
18305         this.proxy.update("");
18306         this.onInitDrag(x, y);
18307         this.proxy.show();
18308     },
18309
18310     // private
18311     onInitDrag : function(x, y){
18312         var clone = this.el.dom.cloneNode(true);
18313         clone.id = Roo.id(); // prevent duplicate ids
18314         this.proxy.update(clone);
18315         this.onStartDrag(x, y);
18316         return true;
18317     },
18318
18319     /**
18320      * Returns the drag source's underlying {@link Roo.dd.StatusProxy}
18321      * @return {Roo.dd.StatusProxy} proxy The StatusProxy
18322      */
18323     getProxy : function(){
18324         return this.proxy;  
18325     },
18326
18327     /**
18328      * Hides the drag source's {@link Roo.dd.StatusProxy}
18329      */
18330     hideProxy : function(){
18331         this.proxy.hide();  
18332         this.proxy.reset(true);
18333         this.dragging = false;
18334     },
18335
18336     // private
18337     triggerCacheRefresh : function(){
18338         Roo.dd.DDM.refreshCache(this.groups);
18339     },
18340
18341     // private - override to prevent hiding
18342     b4EndDrag: function(e) {
18343     },
18344
18345     // private - override to prevent moving
18346     endDrag : function(e){
18347         this.onEndDrag(this.dragData, e);
18348     },
18349
18350     // private
18351     onEndDrag : function(data, e){
18352     },
18353     
18354     // private - pin to cursor
18355     autoOffset : function(x, y) {
18356         this.setDelta(-12, -20);
18357     }    
18358 });/*
18359  * Based on:
18360  * Ext JS Library 1.1.1
18361  * Copyright(c) 2006-2007, Ext JS, LLC.
18362  *
18363  * Originally Released Under LGPL - original licence link has changed is not relivant.
18364  *
18365  * Fork - LGPL
18366  * <script type="text/javascript">
18367  */
18368
18369
18370 /**
18371  * @class Roo.dd.DropTarget
18372  * @extends Roo.dd.DDTarget
18373  * A simple class that provides the basic implementation needed to make any element a drop target that can have
18374  * draggable items dropped onto it.  The drop has no effect until an implementation of notifyDrop is provided.
18375  * @constructor
18376  * @param {String/HTMLElement/Element} el The container element
18377  * @param {Object} config
18378  */
18379 Roo.dd.DropTarget = function(el, config){
18380     this.el = Roo.get(el);
18381     
18382     var listeners = false; ;
18383     if (config && config.listeners) {
18384         listeners= config.listeners;
18385         delete config.listeners;
18386     }
18387     Roo.apply(this, config);
18388     
18389     if(this.containerScroll){
18390         Roo.dd.ScrollManager.register(this.el);
18391     }
18392     this.addEvents( {
18393          /**
18394          * @scope Roo.dd.DropTarget
18395          */
18396          
18397          /**
18398          * @event enter
18399          * The function a {@link Roo.dd.DragSource} calls once to notify this drop target that the source is now over the
18400          * target.  This default implementation adds the CSS class specified by overClass (if any) to the drop element
18401          * and returns the dropAllowed config value.  This method should be overridden if drop validation is required.
18402          * 
18403          * IMPORTANT : it should set this.overClass and this.dropAllowed
18404          * 
18405          * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
18406          * @param {Event} e The event
18407          * @param {Object} data An object containing arbitrary data supplied by the drag source
18408          */
18409         "enter" : true,
18410         
18411          /**
18412          * @event over
18413          * The function a {@link Roo.dd.DragSource} calls continuously while it is being dragged over the target.
18414          * This method will be called on every mouse movement while the drag source is over the drop target.
18415          * This default implementation simply returns the dropAllowed config value.
18416          * 
18417          * IMPORTANT : it should set this.dropAllowed
18418          * 
18419          * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
18420          * @param {Event} e The event
18421          * @param {Object} data An object containing arbitrary data supplied by the drag source
18422          
18423          */
18424         "over" : true,
18425         /**
18426          * @event out
18427          * The function a {@link Roo.dd.DragSource} calls once to notify this drop target that the source has been dragged
18428          * out of the target without dropping.  This default implementation simply removes the CSS class specified by
18429          * overClass (if any) from the drop element.
18430          * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
18431          * @param {Event} e The event
18432          * @param {Object} data An object containing arbitrary data supplied by the drag source
18433          */
18434          "out" : true,
18435          
18436         /**
18437          * @event drop
18438          * The function a {@link Roo.dd.DragSource} calls once to notify this drop target that the dragged item has
18439          * been dropped on it.  This method has no default implementation and returns false, so you must provide an
18440          * implementation that does something to process the drop event and returns true so that the drag source's
18441          * repair action does not run.
18442          * 
18443          * IMPORTANT : it should set this.success
18444          * 
18445          * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
18446          * @param {Event} e The event
18447          * @param {Object} data An object containing arbitrary data supplied by the drag source
18448         */
18449          "drop" : true
18450     });
18451             
18452      
18453     Roo.dd.DropTarget.superclass.constructor.call(  this, 
18454         this.el.dom, 
18455         this.ddGroup || this.group,
18456         {
18457             isTarget: true,
18458             listeners : listeners || {} 
18459            
18460         
18461         }
18462     );
18463
18464 };
18465
18466 Roo.extend(Roo.dd.DropTarget, Roo.dd.DDTarget, {
18467     /**
18468      * @cfg {String} overClass
18469      * The CSS class applied to the drop target element while the drag source is over it (defaults to "").
18470      */
18471      /**
18472      * @cfg {String} ddGroup
18473      * The drag drop group to handle drop events for
18474      */
18475      
18476     /**
18477      * @cfg {String} dropAllowed
18478      * The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").
18479      */
18480     dropAllowed : "x-dd-drop-ok",
18481     /**
18482      * @cfg {String} dropNotAllowed
18483      * The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").
18484      */
18485     dropNotAllowed : "x-dd-drop-nodrop",
18486     /**
18487      * @cfg {boolean} success
18488      * set this after drop listener.. 
18489      */
18490     success : false,
18491     /**
18492      * @cfg {boolean|String} valid true/false or string (ok-add/ok-sub/ok/nodrop)
18493      * if the drop point is valid for over/enter..
18494      */
18495     valid : false,
18496     // private
18497     isTarget : true,
18498
18499     // private
18500     isNotifyTarget : true,
18501     
18502     /**
18503      * @hide
18504      */
18505     notifyEnter : function(dd, e, data)
18506     {
18507         this.valid = true;
18508         this.fireEvent('enter', dd, e, data);
18509         if(this.overClass){
18510             this.el.addClass(this.overClass);
18511         }
18512         return typeof(this.valid) == 'string' ? 'x-dd-drop-' + this.valid : (
18513             this.valid ? this.dropAllowed : this.dropNotAllowed
18514         );
18515     },
18516
18517     /**
18518      * @hide
18519      */
18520     notifyOver : function(dd, e, data)
18521     {
18522         this.valid = true;
18523         this.fireEvent('over', dd, e, data);
18524         return typeof(this.valid) == 'string' ? 'x-dd-drop-' + this.valid : (
18525             this.valid ? this.dropAllowed : this.dropNotAllowed
18526         );
18527     },
18528
18529     /**
18530      * @hide
18531      */
18532     notifyOut : function(dd, e, data)
18533     {
18534         this.fireEvent('out', dd, e, data);
18535         if(this.overClass){
18536             this.el.removeClass(this.overClass);
18537         }
18538     },
18539
18540     /**
18541      * @hide
18542      */
18543     notifyDrop : function(dd, e, data)
18544     {
18545         this.success = false;
18546         this.fireEvent('drop', dd, e, data);
18547         return this.success;
18548     }
18549 });/*
18550  * Based on:
18551  * Ext JS Library 1.1.1
18552  * Copyright(c) 2006-2007, Ext JS, LLC.
18553  *
18554  * Originally Released Under LGPL - original licence link has changed is not relivant.
18555  *
18556  * Fork - LGPL
18557  * <script type="text/javascript">
18558  */
18559
18560
18561 /**
18562  * @class Roo.dd.DragZone
18563  * @extends Roo.dd.DragSource
18564  * This class provides a container DD instance that proxies for multiple child node sources.<br />
18565  * By default, this class requires that draggable child nodes are registered with {@link Roo.dd.Registry}.
18566  * @constructor
18567  * @param {String/HTMLElement/Element} el The container element
18568  * @param {Object} config
18569  */
18570 Roo.dd.DragZone = function(el, config){
18571     Roo.dd.DragZone.superclass.constructor.call(this, el, config);
18572     if(this.containerScroll){
18573         Roo.dd.ScrollManager.register(this.el);
18574     }
18575 };
18576
18577 Roo.extend(Roo.dd.DragZone, Roo.dd.DragSource, {
18578     /**
18579      * @cfg {Boolean} containerScroll True to register this container with the Scrollmanager
18580      * for auto scrolling during drag operations.
18581      */
18582     /**
18583      * @cfg {String} hlColor The color to use when visually highlighting the drag source in the afterRepair
18584      * method after a failed drop (defaults to "c3daf9" - light blue)
18585      */
18586
18587     /**
18588      * Called when a mousedown occurs in this container. Looks in {@link Roo.dd.Registry}
18589      * for a valid target to drag based on the mouse down. Override this method
18590      * to provide your own lookup logic (e.g. finding a child by class name). Make sure your returned
18591      * object has a "ddel" attribute (with an HTML Element) for other functions to work.
18592      * @param {EventObject} e The mouse down event
18593      * @return {Object} The dragData
18594      */
18595     getDragData : function(e){
18596         return Roo.dd.Registry.getHandleFromEvent(e);
18597     },
18598     
18599     /**
18600      * Called once drag threshold has been reached to initialize the proxy element. By default, it clones the
18601      * this.dragData.ddel
18602      * @param {Number} x The x position of the click on the dragged object
18603      * @param {Number} y The y position of the click on the dragged object
18604      * @return {Boolean} true to continue the drag, false to cancel
18605      */
18606     onInitDrag : function(x, y){
18607         this.proxy.update(this.dragData.ddel.cloneNode(true));
18608         this.onStartDrag(x, y);
18609         return true;
18610     },
18611     
18612     /**
18613      * Called after a repair of an invalid drop. By default, highlights this.dragData.ddel 
18614      */
18615     afterRepair : function(){
18616         if(Roo.enableFx){
18617             Roo.Element.fly(this.dragData.ddel).highlight(this.hlColor || "c3daf9");
18618         }
18619         this.dragging = false;
18620     },
18621
18622     /**
18623      * Called before a repair of an invalid drop to get the XY to animate to. By default returns
18624      * the XY of this.dragData.ddel
18625      * @param {EventObject} e The mouse up event
18626      * @return {Array} The xy location (e.g. [100, 200])
18627      */
18628     getRepairXY : function(e){
18629         return Roo.Element.fly(this.dragData.ddel).getXY();  
18630     }
18631 });/*
18632  * Based on:
18633  * Ext JS Library 1.1.1
18634  * Copyright(c) 2006-2007, Ext JS, LLC.
18635  *
18636  * Originally Released Under LGPL - original licence link has changed is not relivant.
18637  *
18638  * Fork - LGPL
18639  * <script type="text/javascript">
18640  */
18641 /**
18642  * @class Roo.dd.DropZone
18643  * @extends Roo.dd.DropTarget
18644  * This class provides a container DD instance that proxies for multiple child node targets.<br />
18645  * By default, this class requires that child nodes accepting drop are registered with {@link Roo.dd.Registry}.
18646  * @constructor
18647  * @param {String/HTMLElement/Element} el The container element
18648  * @param {Object} config
18649  */
18650 Roo.dd.DropZone = function(el, config){
18651     Roo.dd.DropZone.superclass.constructor.call(this, el, config);
18652 };
18653
18654 Roo.extend(Roo.dd.DropZone, Roo.dd.DropTarget, {
18655     /**
18656      * Returns a custom data object associated with the DOM node that is the target of the event.  By default
18657      * this looks up the event target in the {@link Roo.dd.Registry}, although you can override this method to
18658      * provide your own custom lookup.
18659      * @param {Event} e The event
18660      * @return {Object} data The custom data
18661      */
18662     getTargetFromEvent : function(e){
18663         return Roo.dd.Registry.getTargetFromEvent(e);
18664     },
18665
18666     /**
18667      * Called internally when the DropZone determines that a {@link Roo.dd.DragSource} has entered a drop node
18668      * that it has registered.  This method has no default implementation and should be overridden to provide
18669      * node-specific processing if necessary.
18670      * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from 
18671      * {@link #getTargetFromEvent} for this node)
18672      * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
18673      * @param {Event} e The event
18674      * @param {Object} data An object containing arbitrary data supplied by the drag source
18675      */
18676     onNodeEnter : function(n, dd, e, data){
18677         
18678     },
18679
18680     /**
18681      * Called internally while the DropZone determines that a {@link Roo.dd.DragSource} is over a drop node
18682      * that it has registered.  The default implementation returns this.dropNotAllowed, so it should be
18683      * overridden to provide the proper feedback.
18684      * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
18685      * {@link #getTargetFromEvent} for this node)
18686      * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
18687      * @param {Event} e The event
18688      * @param {Object} data An object containing arbitrary data supplied by the drag source
18689      * @return {String} status The CSS class that communicates the drop status back to the source so that the
18690      * underlying {@link Roo.dd.StatusProxy} can be updated
18691      */
18692     onNodeOver : function(n, dd, e, data){
18693         return this.dropAllowed;
18694     },
18695
18696     /**
18697      * Called internally when the DropZone determines that a {@link Roo.dd.DragSource} has been dragged out of
18698      * the drop node without dropping.  This method has no default implementation and should be overridden to provide
18699      * node-specific processing if necessary.
18700      * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
18701      * {@link #getTargetFromEvent} for this node)
18702      * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
18703      * @param {Event} e The event
18704      * @param {Object} data An object containing arbitrary data supplied by the drag source
18705      */
18706     onNodeOut : function(n, dd, e, data){
18707         
18708     },
18709
18710     /**
18711      * Called internally when the DropZone determines that a {@link Roo.dd.DragSource} has been dropped onto
18712      * the drop node.  The default implementation returns false, so it should be overridden to provide the
18713      * appropriate processing of the drop event and return true so that the drag source's repair action does not run.
18714      * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
18715      * {@link #getTargetFromEvent} for this node)
18716      * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
18717      * @param {Event} e The event
18718      * @param {Object} data An object containing arbitrary data supplied by the drag source
18719      * @return {Boolean} True if the drop was valid, else false
18720      */
18721     onNodeDrop : function(n, dd, e, data){
18722         return false;
18723     },
18724
18725     /**
18726      * Called internally while the DropZone determines that a {@link Roo.dd.DragSource} is being dragged over it,
18727      * but not over any of its registered drop nodes.  The default implementation returns this.dropNotAllowed, so
18728      * it should be overridden to provide the proper feedback if necessary.
18729      * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
18730      * @param {Event} e The event
18731      * @param {Object} data An object containing arbitrary data supplied by the drag source
18732      * @return {String} status The CSS class that communicates the drop status back to the source so that the
18733      * underlying {@link Roo.dd.StatusProxy} can be updated
18734      */
18735     onContainerOver : function(dd, e, data){
18736         return this.dropNotAllowed;
18737     },
18738
18739     /**
18740      * Called internally when the DropZone determines that a {@link Roo.dd.DragSource} has been dropped on it,
18741      * but not on any of its registered drop nodes.  The default implementation returns false, so it should be
18742      * overridden to provide the appropriate processing of the drop event if you need the drop zone itself to
18743      * be able to accept drops.  It should return true when valid so that the drag source's repair action does not run.
18744      * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
18745      * @param {Event} e The event
18746      * @param {Object} data An object containing arbitrary data supplied by the drag source
18747      * @return {Boolean} True if the drop was valid, else false
18748      */
18749     onContainerDrop : function(dd, e, data){
18750         return false;
18751     },
18752
18753     /**
18754      * The function a {@link Roo.dd.DragSource} calls once to notify this drop zone that the source is now over
18755      * the zone.  The default implementation returns this.dropNotAllowed and expects that only registered drop
18756      * nodes can process drag drop operations, so if you need the drop zone itself to be able to process drops
18757      * you should override this method and provide a custom implementation.
18758      * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
18759      * @param {Event} e The event
18760      * @param {Object} data An object containing arbitrary data supplied by the drag source
18761      * @return {String} status The CSS class that communicates the drop status back to the source so that the
18762      * underlying {@link Roo.dd.StatusProxy} can be updated
18763      */
18764     notifyEnter : function(dd, e, data){
18765         return this.dropNotAllowed;
18766     },
18767
18768     /**
18769      * The function a {@link Roo.dd.DragSource} calls continuously while it is being dragged over the drop zone.
18770      * This method will be called on every mouse movement while the drag source is over the drop zone.
18771      * It will call {@link #onNodeOver} while the drag source is over a registered node, and will also automatically
18772      * delegate to the appropriate node-specific methods as necessary when the drag source enters and exits
18773      * registered nodes ({@link #onNodeEnter}, {@link #onNodeOut}). If the drag source is not currently over a
18774      * registered node, it will call {@link #onContainerOver}.
18775      * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
18776      * @param {Event} e The event
18777      * @param {Object} data An object containing arbitrary data supplied by the drag source
18778      * @return {String} status The CSS class that communicates the drop status back to the source so that the
18779      * underlying {@link Roo.dd.StatusProxy} can be updated
18780      */
18781     notifyOver : function(dd, e, data){
18782         var n = this.getTargetFromEvent(e);
18783         if(!n){ // not over valid drop target
18784             if(this.lastOverNode){
18785                 this.onNodeOut(this.lastOverNode, dd, e, data);
18786                 this.lastOverNode = null;
18787             }
18788             return this.onContainerOver(dd, e, data);
18789         }
18790         if(this.lastOverNode != n){
18791             if(this.lastOverNode){
18792                 this.onNodeOut(this.lastOverNode, dd, e, data);
18793             }
18794             this.onNodeEnter(n, dd, e, data);
18795             this.lastOverNode = n;
18796         }
18797         return this.onNodeOver(n, dd, e, data);
18798     },
18799
18800     /**
18801      * The function a {@link Roo.dd.DragSource} calls once to notify this drop zone that the source has been dragged
18802      * out of the zone without dropping.  If the drag source is currently over a registered node, the notification
18803      * will be delegated to {@link #onNodeOut} for node-specific handling, otherwise it will be ignored.
18804      * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
18805      * @param {Event} e The event
18806      * @param {Object} data An object containing arbitrary data supplied by the drag zone
18807      */
18808     notifyOut : function(dd, e, data){
18809         if(this.lastOverNode){
18810             this.onNodeOut(this.lastOverNode, dd, e, data);
18811             this.lastOverNode = null;
18812         }
18813     },
18814
18815     /**
18816      * The function a {@link Roo.dd.DragSource} calls once to notify this drop zone that the dragged item has
18817      * been dropped on it.  The drag zone will look up the target node based on the event passed in, and if there
18818      * is a node registered for that event, it will delegate to {@link #onNodeDrop} for node-specific handling,
18819      * otherwise it will call {@link #onContainerDrop}.
18820      * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
18821      * @param {Event} e The event
18822      * @param {Object} data An object containing arbitrary data supplied by the drag source
18823      * @return {Boolean} True if the drop was valid, else false
18824      */
18825     notifyDrop : function(dd, e, data){
18826         if(this.lastOverNode){
18827             this.onNodeOut(this.lastOverNode, dd, e, data);
18828             this.lastOverNode = null;
18829         }
18830         var n = this.getTargetFromEvent(e);
18831         return n ?
18832             this.onNodeDrop(n, dd, e, data) :
18833             this.onContainerDrop(dd, e, data);
18834     },
18835
18836     // private
18837     triggerCacheRefresh : function(){
18838         Roo.dd.DDM.refreshCache(this.groups);
18839     }  
18840 });/*
18841  * Based on:
18842  * Ext JS Library 1.1.1
18843  * Copyright(c) 2006-2007, Ext JS, LLC.
18844  *
18845  * Originally Released Under LGPL - original licence link has changed is not relivant.
18846  *
18847  * Fork - LGPL
18848  * <script type="text/javascript">
18849  */
18850
18851
18852 /**
18853  * @class Roo.data.SortTypes
18854  * @singleton
18855  * Defines the default sorting (casting?) comparison functions used when sorting data.
18856  */
18857 Roo.data.SortTypes = {
18858     /**
18859      * Default sort that does nothing
18860      * @param {Mixed} s The value being converted
18861      * @return {Mixed} The comparison value
18862      */
18863     none : function(s){
18864         return s;
18865     },
18866     
18867     /**
18868      * The regular expression used to strip tags
18869      * @type {RegExp}
18870      * @property
18871      */
18872     stripTagsRE : /<\/?[^>]+>/gi,
18873     
18874     /**
18875      * Strips all HTML tags to sort on text only
18876      * @param {Mixed} s The value being converted
18877      * @return {String} The comparison value
18878      */
18879     asText : function(s){
18880         return String(s).replace(this.stripTagsRE, "");
18881     },
18882     
18883     /**
18884      * Strips all HTML tags to sort on text only - Case insensitive
18885      * @param {Mixed} s The value being converted
18886      * @return {String} The comparison value
18887      */
18888     asUCText : function(s){
18889         return String(s).toUpperCase().replace(this.stripTagsRE, "");
18890     },
18891     
18892     /**
18893      * Case insensitive string
18894      * @param {Mixed} s The value being converted
18895      * @return {String} The comparison value
18896      */
18897     asUCString : function(s) {
18898         return String(s).toUpperCase();
18899     },
18900     
18901     /**
18902      * Date sorting
18903      * @param {Mixed} s The value being converted
18904      * @return {Number} The comparison value
18905      */
18906     asDate : function(s) {
18907         if(!s){
18908             return 0;
18909         }
18910         if(s instanceof Date){
18911             return s.getTime();
18912         }
18913         return Date.parse(String(s));
18914     },
18915     
18916     /**
18917      * Float sorting
18918      * @param {Mixed} s The value being converted
18919      * @return {Float} The comparison value
18920      */
18921     asFloat : function(s) {
18922         var val = parseFloat(String(s).replace(/,/g, ""));
18923         if(isNaN(val)) val = 0;
18924         return val;
18925     },
18926     
18927     /**
18928      * Integer sorting
18929      * @param {Mixed} s The value being converted
18930      * @return {Number} The comparison value
18931      */
18932     asInt : function(s) {
18933         var val = parseInt(String(s).replace(/,/g, ""));
18934         if(isNaN(val)) val = 0;
18935         return val;
18936     }
18937 };/*
18938  * Based on:
18939  * Ext JS Library 1.1.1
18940  * Copyright(c) 2006-2007, Ext JS, LLC.
18941  *
18942  * Originally Released Under LGPL - original licence link has changed is not relivant.
18943  *
18944  * Fork - LGPL
18945  * <script type="text/javascript">
18946  */
18947
18948 /**
18949 * @class Roo.data.Record
18950  * Instances of this class encapsulate both record <em>definition</em> information, and record
18951  * <em>value</em> information for use in {@link Roo.data.Store} objects, or any code which needs
18952  * to access Records cached in an {@link Roo.data.Store} object.<br>
18953  * <p>
18954  * Constructors for this class are generated by passing an Array of field definition objects to {@link #create}.
18955  * Instances are usually only created by {@link Roo.data.Reader} implementations when processing unformatted data
18956  * objects.<br>
18957  * <p>
18958  * Record objects generated by this constructor inherit all the methods of Roo.data.Record listed below.
18959  * @constructor
18960  * This constructor should not be used to create Record objects. Instead, use the constructor generated by
18961  * {@link #create}. The parameters are the same.
18962  * @param {Array} data An associative Array of data values keyed by the field name.
18963  * @param {Object} id (Optional) The id of the record. This id should be unique, and is used by the
18964  * {@link Roo.data.Store} object which owns the Record to index its collection of Records. If
18965  * not specified an integer id is generated.
18966  */
18967 Roo.data.Record = function(data, id){
18968     this.id = (id || id === 0) ? id : ++Roo.data.Record.AUTO_ID;
18969     this.data = data;
18970 };
18971
18972 /**
18973  * Generate a constructor for a specific record layout.
18974  * @param {Array} o An Array of field definition objects which specify field names, and optionally,
18975  * data types, and a mapping for an {@link Roo.data.Reader} to extract the field's value from a data object.
18976  * Each field definition object may contain the following properties: <ul>
18977  * <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,
18978  * for example the <em>dataIndex</em> property in column definition objects passed to {@link Roo.grid.ColumnModel}</p></li>
18979  * <li><b>mapping</b> : String<p style="margin-left:1em">(Optional) A path specification for use by the {@link Roo.data.Reader} implementation
18980  * that is creating the Record to access the data value from the data object. If an {@link Roo.data.JsonReader}
18981  * is being used, then this is a string containing the javascript expression to reference the data relative to 
18982  * the record item's root. If an {@link Roo.data.XmlReader} is being used, this is an {@link Roo.DomQuery} path
18983  * to the data item relative to the record element. If the mapping expression is the same as the field name,
18984  * this may be omitted.</p></li>
18985  * <li><b>type</b> : String<p style="margin-left:1em">(Optional) The data type for conversion to displayable value. Possible values are
18986  * <ul><li>auto (Default, implies no conversion)</li>
18987  * <li>string</li>
18988  * <li>int</li>
18989  * <li>float</li>
18990  * <li>boolean</li>
18991  * <li>date</li></ul></p></li>
18992  * <li><b>sortType</b> : Mixed<p style="margin-left:1em">(Optional) A member of {@link Roo.data.SortTypes}.</p></li>
18993  * <li><b>sortDir</b> : String<p style="margin-left:1em">(Optional) Initial direction to sort. "ASC" or "DESC"</p></li>
18994  * <li><b>convert</b> : Function<p style="margin-left:1em">(Optional) A function which converts the value provided
18995  * by the Reader into an object that will be stored in the Record. It is passed the
18996  * following parameters:<ul>
18997  * <li><b>v</b> : Mixed<p style="margin-left:1em">The data value as read by the Reader.</p></li>
18998  * </ul></p></li>
18999  * <li><b>dateFormat</b> : String<p style="margin-left:1em">(Optional) A format String for the Date.parseDate function.</p></li>
19000  * </ul>
19001  * <br>usage:<br><pre><code>
19002 var TopicRecord = Roo.data.Record.create(
19003     {name: 'title', mapping: 'topic_title'},
19004     {name: 'author', mapping: 'username'},
19005     {name: 'totalPosts', mapping: 'topic_replies', type: 'int'},
19006     {name: 'lastPost', mapping: 'post_time', type: 'date'},
19007     {name: 'lastPoster', mapping: 'user2'},
19008     {name: 'excerpt', mapping: 'post_text'}
19009 );
19010
19011 var myNewRecord = new TopicRecord({
19012     title: 'Do my job please',
19013     author: 'noobie',
19014     totalPosts: 1,
19015     lastPost: new Date(),
19016     lastPoster: 'Animal',
19017     excerpt: 'No way dude!'
19018 });
19019 myStore.add(myNewRecord);
19020 </code></pre>
19021  * @method create
19022  * @static
19023  */
19024 Roo.data.Record.create = function(o){
19025     var f = function(){
19026         f.superclass.constructor.apply(this, arguments);
19027     };
19028     Roo.extend(f, Roo.data.Record);
19029     var p = f.prototype;
19030     p.fields = new Roo.util.MixedCollection(false, function(field){
19031         return field.name;
19032     });
19033     for(var i = 0, len = o.length; i < len; i++){
19034         p.fields.add(new Roo.data.Field(o[i]));
19035     }
19036     f.getField = function(name){
19037         return p.fields.get(name);  
19038     };
19039     return f;
19040 };
19041
19042 Roo.data.Record.AUTO_ID = 1000;
19043 Roo.data.Record.EDIT = 'edit';
19044 Roo.data.Record.REJECT = 'reject';
19045 Roo.data.Record.COMMIT = 'commit';
19046
19047 Roo.data.Record.prototype = {
19048     /**
19049      * Readonly flag - true if this record has been modified.
19050      * @type Boolean
19051      */
19052     dirty : false,
19053     editing : false,
19054     error: null,
19055     modified: null,
19056
19057     // private
19058     join : function(store){
19059         this.store = store;
19060     },
19061
19062     /**
19063      * Set the named field to the specified value.
19064      * @param {String} name The name of the field to set.
19065      * @param {Object} value The value to set the field to.
19066      */
19067     set : function(name, value){
19068         if(this.data[name] == value){
19069             return;
19070         }
19071         this.dirty = true;
19072         if(!this.modified){
19073             this.modified = {};
19074         }
19075         if(typeof this.modified[name] == 'undefined'){
19076             this.modified[name] = this.data[name];
19077         }
19078         this.data[name] = value;
19079         if(!this.editing && this.store){
19080             this.store.afterEdit(this);
19081         }       
19082     },
19083
19084     /**
19085      * Get the value of the named field.
19086      * @param {String} name The name of the field to get the value of.
19087      * @return {Object} The value of the field.
19088      */
19089     get : function(name){
19090         return this.data[name]; 
19091     },
19092
19093     // private
19094     beginEdit : function(){
19095         this.editing = true;
19096         this.modified = {}; 
19097     },
19098
19099     // private
19100     cancelEdit : function(){
19101         this.editing = false;
19102         delete this.modified;
19103     },
19104
19105     // private
19106     endEdit : function(){
19107         this.editing = false;
19108         if(this.dirty && this.store){
19109             this.store.afterEdit(this);
19110         }
19111     },
19112
19113     /**
19114      * Usually called by the {@link Roo.data.Store} which owns the Record.
19115      * Rejects all changes made to the Record since either creation, or the last commit operation.
19116      * Modified fields are reverted to their original values.
19117      * <p>
19118      * Developers should subscribe to the {@link Roo.data.Store#update} event to have their code notified
19119      * of reject operations.
19120      */
19121     reject : function(){
19122         var m = this.modified;
19123         for(var n in m){
19124             if(typeof m[n] != "function"){
19125                 this.data[n] = m[n];
19126             }
19127         }
19128         this.dirty = false;
19129         delete this.modified;
19130         this.editing = false;
19131         if(this.store){
19132             this.store.afterReject(this);
19133         }
19134     },
19135
19136     /**
19137      * Usually called by the {@link Roo.data.Store} which owns the Record.
19138      * Commits all changes made to the Record since either creation, or the last commit operation.
19139      * <p>
19140      * Developers should subscribe to the {@link Roo.data.Store#update} event to have their code notified
19141      * of commit operations.
19142      */
19143     commit : function(){
19144         this.dirty = false;
19145         delete this.modified;
19146         this.editing = false;
19147         if(this.store){
19148             this.store.afterCommit(this);
19149         }
19150     },
19151
19152     // private
19153     hasError : function(){
19154         return this.error != null;
19155     },
19156
19157     // private
19158     clearError : function(){
19159         this.error = null;
19160     },
19161
19162     /**
19163      * Creates a copy of this record.
19164      * @param {String} id (optional) A new record id if you don't want to use this record's id
19165      * @return {Record}
19166      */
19167     copy : function(newId) {
19168         return new this.constructor(Roo.apply({}, this.data), newId || this.id);
19169     }
19170 };/*
19171  * Based on:
19172  * Ext JS Library 1.1.1
19173  * Copyright(c) 2006-2007, Ext JS, LLC.
19174  *
19175  * Originally Released Under LGPL - original licence link has changed is not relivant.
19176  *
19177  * Fork - LGPL
19178  * <script type="text/javascript">
19179  */
19180
19181
19182
19183 /**
19184  * @class Roo.data.Store
19185  * @extends Roo.util.Observable
19186  * The Store class encapsulates a client side cache of {@link Roo.data.Record} objects which provide input data
19187  * for widgets such as the Roo.grid.Grid, or the Roo.form.ComboBox.<br>
19188  * <p>
19189  * 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
19190  * has no knowledge of the format of the data returned by the Proxy.<br>
19191  * <p>
19192  * A Store object uses its configured implementation of {@link Roo.data.DataReader} to create {@link Roo.data.Record}
19193  * instances from the data object. These records are cached and made available through accessor functions.
19194  * @constructor
19195  * Creates a new Store.
19196  * @param {Object} config A config object containing the objects needed for the Store to access data,
19197  * and read the data into Records.
19198  */
19199 Roo.data.Store = function(config){
19200     this.data = new Roo.util.MixedCollection(false);
19201     this.data.getKey = function(o){
19202         return o.id;
19203     };
19204     this.baseParams = {};
19205     // private
19206     this.paramNames = {
19207         "start" : "start",
19208         "limit" : "limit",
19209         "sort" : "sort",
19210         "dir" : "dir",
19211         "multisort" : "_multisort"
19212     };
19213
19214     if(config && config.data){
19215         this.inlineData = config.data;
19216         delete config.data;
19217     }
19218
19219     Roo.apply(this, config);
19220     
19221     if(this.reader){ // reader passed
19222         this.reader = Roo.factory(this.reader, Roo.data);
19223         this.reader.xmodule = this.xmodule || false;
19224         if(!this.recordType){
19225             this.recordType = this.reader.recordType;
19226         }
19227         if(this.reader.onMetaChange){
19228             this.reader.onMetaChange = this.onMetaChange.createDelegate(this);
19229         }
19230     }
19231
19232     if(this.recordType){
19233         this.fields = this.recordType.prototype.fields;
19234     }
19235     this.modified = [];
19236
19237     this.addEvents({
19238         /**
19239          * @event datachanged
19240          * Fires when the data cache has changed, and a widget which is using this Store
19241          * as a Record cache should refresh its view.
19242          * @param {Store} this
19243          */
19244         datachanged : true,
19245         /**
19246          * @event metachange
19247          * Fires when this store's reader provides new metadata (fields). This is currently only support for JsonReaders.
19248          * @param {Store} this
19249          * @param {Object} meta The JSON metadata
19250          */
19251         metachange : true,
19252         /**
19253          * @event add
19254          * Fires when Records have been added to the Store
19255          * @param {Store} this
19256          * @param {Roo.data.Record[]} records The array of Records added
19257          * @param {Number} index The index at which the record(s) were added
19258          */
19259         add : true,
19260         /**
19261          * @event remove
19262          * Fires when a Record has been removed from the Store
19263          * @param {Store} this
19264          * @param {Roo.data.Record} record The Record that was removed
19265          * @param {Number} index The index at which the record was removed
19266          */
19267         remove : true,
19268         /**
19269          * @event update
19270          * Fires when a Record has been updated
19271          * @param {Store} this
19272          * @param {Roo.data.Record} record The Record that was updated
19273          * @param {String} operation The update operation being performed.  Value may be one of:
19274          * <pre><code>
19275  Roo.data.Record.EDIT
19276  Roo.data.Record.REJECT
19277  Roo.data.Record.COMMIT
19278          * </code></pre>
19279          */
19280         update : true,
19281         /**
19282          * @event clear
19283          * Fires when the data cache has been cleared.
19284          * @param {Store} this
19285          */
19286         clear : true,
19287         /**
19288          * @event beforeload
19289          * Fires before a request is made for a new data object.  If the beforeload handler returns false
19290          * the load action will be canceled.
19291          * @param {Store} this
19292          * @param {Object} options The loading options that were specified (see {@link #load} for details)
19293          */
19294         beforeload : true,
19295         /**
19296          * @event load
19297          * Fires after a new set of Records has been loaded.
19298          * @param {Store} this
19299          * @param {Roo.data.Record[]} records The Records that were loaded
19300          * @param {Object} options The loading options that were specified (see {@link #load} for details)
19301          */
19302         load : true,
19303         /**
19304          * @event loadexception
19305          * Fires if an exception occurs in the Proxy during loading.
19306          * Called with the signature of the Proxy's "loadexception" event.
19307          * If you return Json { data: [] , success: false, .... } then this will be thrown with the following args
19308          * 
19309          * @param {Proxy} 
19310          * @param {Object} return from JsonData.reader() - success, totalRecords, records
19311          * @param {Object} load options 
19312          * @param {Object} jsonData from your request (normally this contains the Exception)
19313          */
19314         loadexception : true
19315     });
19316     
19317     if(this.proxy){
19318         this.proxy = Roo.factory(this.proxy, Roo.data);
19319         this.proxy.xmodule = this.xmodule || false;
19320         this.relayEvents(this.proxy,  ["loadexception"]);
19321     }
19322     this.sortToggle = {};
19323     this.sortOrder = []; // array of order of sorting - updated by grid if multisort is enabled.
19324
19325     Roo.data.Store.superclass.constructor.call(this);
19326
19327     if(this.inlineData){
19328         this.loadData(this.inlineData);
19329         delete this.inlineData;
19330     }
19331 };
19332 Roo.extend(Roo.data.Store, Roo.util.Observable, {
19333      /**
19334     * @cfg {boolean} isLocal   flag if data is locally available (and can be always looked up
19335     * without a remote query - used by combo/forms at present.
19336     */
19337     
19338     /**
19339     * @cfg {Roo.data.DataProxy} proxy The Proxy object which provides access to a data object.
19340     */
19341     /**
19342     * @cfg {Array} data Inline data to be loaded when the store is initialized.
19343     */
19344     /**
19345     * @cfg {Roo.data.Reader} reader The Reader object which processes the data object and returns
19346     * an Array of Roo.data.record objects which are cached keyed by their <em>id</em> property.
19347     */
19348     /**
19349     * @cfg {Object} baseParams An object containing properties which are to be sent as parameters
19350     * on any HTTP request
19351     */
19352     /**
19353     * @cfg {Object} sortInfo A config object in the format: {field: "fieldName", direction: "ASC|DESC"}
19354     */
19355     /**
19356     * @cfg {Boolean} multiSort enable multi column sorting (sort is based on the order of columns, remote only at present)
19357     */
19358     multiSort: false,
19359     /**
19360     * @cfg {boolean} remoteSort True if sorting is to be handled by requesting the Proxy to provide a refreshed
19361     * version of the data object in sorted order, as opposed to sorting the Record cache in place (defaults to false).
19362     */
19363     remoteSort : false,
19364
19365     /**
19366     * @cfg {boolean} pruneModifiedRecords True to clear all modified record information each time the store is
19367      * loaded or when a record is removed. (defaults to false).
19368     */
19369     pruneModifiedRecords : false,
19370
19371     // private
19372     lastOptions : null,
19373
19374     /**
19375      * Add Records to the Store and fires the add event.
19376      * @param {Roo.data.Record[]} records An Array of Roo.data.Record objects to add to the cache.
19377      */
19378     add : function(records){
19379         records = [].concat(records);
19380         for(var i = 0, len = records.length; i < len; i++){
19381             records[i].join(this);
19382         }
19383         var index = this.data.length;
19384         this.data.addAll(records);
19385         this.fireEvent("add", this, records, index);
19386     },
19387
19388     /**
19389      * Remove a Record from the Store and fires the remove event.
19390      * @param {Ext.data.Record} record The Roo.data.Record object to remove from the cache.
19391      */
19392     remove : function(record){
19393         var index = this.data.indexOf(record);
19394         this.data.removeAt(index);
19395         if(this.pruneModifiedRecords){
19396             this.modified.remove(record);
19397         }
19398         this.fireEvent("remove", this, record, index);
19399     },
19400
19401     /**
19402      * Remove all Records from the Store and fires the clear event.
19403      */
19404     removeAll : function(){
19405         this.data.clear();
19406         if(this.pruneModifiedRecords){
19407             this.modified = [];
19408         }
19409         this.fireEvent("clear", this);
19410     },
19411
19412     /**
19413      * Inserts Records to the Store at the given index and fires the add event.
19414      * @param {Number} index The start index at which to insert the passed Records.
19415      * @param {Roo.data.Record[]} records An Array of Roo.data.Record objects to add to the cache.
19416      */
19417     insert : function(index, records){
19418         records = [].concat(records);
19419         for(var i = 0, len = records.length; i < len; i++){
19420             this.data.insert(index, records[i]);
19421             records[i].join(this);
19422         }
19423         this.fireEvent("add", this, records, index);
19424     },
19425
19426     /**
19427      * Get the index within the cache of the passed Record.
19428      * @param {Roo.data.Record} record The Roo.data.Record object to to find.
19429      * @return {Number} The index of the passed Record. Returns -1 if not found.
19430      */
19431     indexOf : function(record){
19432         return this.data.indexOf(record);
19433     },
19434
19435     /**
19436      * Get the index within the cache of the Record with the passed id.
19437      * @param {String} id The id of the Record to find.
19438      * @return {Number} The index of the Record. Returns -1 if not found.
19439      */
19440     indexOfId : function(id){
19441         return this.data.indexOfKey(id);
19442     },
19443
19444     /**
19445      * Get the Record with the specified id.
19446      * @param {String} id The id of the Record to find.
19447      * @return {Roo.data.Record} The Record with the passed id. Returns undefined if not found.
19448      */
19449     getById : function(id){
19450         return this.data.key(id);
19451     },
19452
19453     /**
19454      * Get the Record at the specified index.
19455      * @param {Number} index The index of the Record to find.
19456      * @return {Roo.data.Record} The Record at the passed index. Returns undefined if not found.
19457      */
19458     getAt : function(index){
19459         return this.data.itemAt(index);
19460     },
19461
19462     /**
19463      * Returns a range of Records between specified indices.
19464      * @param {Number} startIndex (optional) The starting index (defaults to 0)
19465      * @param {Number} endIndex (optional) The ending index (defaults to the last Record in the Store)
19466      * @return {Roo.data.Record[]} An array of Records
19467      */
19468     getRange : function(start, end){
19469         return this.data.getRange(start, end);
19470     },
19471
19472     // private
19473     storeOptions : function(o){
19474         o = Roo.apply({}, o);
19475         delete o.callback;
19476         delete o.scope;
19477         this.lastOptions = o;
19478     },
19479
19480     /**
19481      * Loads the Record cache from the configured Proxy using the configured Reader.
19482      * <p>
19483      * If using remote paging, then the first load call must specify the <em>start</em>
19484      * and <em>limit</em> properties in the options.params property to establish the initial
19485      * position within the dataset, and the number of Records to cache on each read from the Proxy.
19486      * <p>
19487      * <strong>It is important to note that for remote data sources, loading is asynchronous,
19488      * and this call will return before the new data has been loaded. Perform any post-processing
19489      * in a callback function, or in a "load" event handler.</strong>
19490      * <p>
19491      * @param {Object} options An object containing properties which control loading options:<ul>
19492      * <li>params {Object} An object containing properties to pass as HTTP parameters to a remote data source.</li>
19493      * <li>callback {Function} A function to be called after the Records have been loaded. The callback is
19494      * passed the following arguments:<ul>
19495      * <li>r : Roo.data.Record[]</li>
19496      * <li>options: Options object from the load call</li>
19497      * <li>success: Boolean success indicator</li></ul></li>
19498      * <li>scope {Object} Scope with which to call the callback (defaults to the Store object)</li>
19499      * <li>add {Boolean} indicator to append loaded records rather than replace the current cache.</li>
19500      * </ul>
19501      */
19502     load : function(options){
19503         options = options || {};
19504         if(this.fireEvent("beforeload", this, options) !== false){
19505             this.storeOptions(options);
19506             var p = Roo.apply(options.params || {}, this.baseParams);
19507             // if meta was not loaded from remote source.. try requesting it.
19508             if (!this.reader.metaFromRemote) {
19509                 p._requestMeta = 1;
19510             }
19511             if(this.sortInfo && this.remoteSort){
19512                 var pn = this.paramNames;
19513                 p[pn["sort"]] = this.sortInfo.field;
19514                 p[pn["dir"]] = this.sortInfo.direction;
19515             }
19516             if (this.multiSort) {
19517                 var pn = this.paramNames;
19518                 p[pn["multisort"]] = Roo.encode( { sort : this.sortToggle, order: this.sortOrder });
19519             }
19520             
19521             this.proxy.load(p, this.reader, this.loadRecords, this, options);
19522         }
19523     },
19524
19525     /**
19526      * Reloads the Record cache from the configured Proxy using the configured Reader and
19527      * the options from the last load operation performed.
19528      * @param {Object} options (optional) An object containing properties which may override the options
19529      * used in the last load operation. See {@link #load} for details (defaults to null, in which case
19530      * the most recently used options are reused).
19531      */
19532     reload : function(options){
19533         this.load(Roo.applyIf(options||{}, this.lastOptions));
19534     },
19535
19536     // private
19537     // Called as a callback by the Reader during a load operation.
19538     loadRecords : function(o, options, success){
19539         if(!o || success === false){
19540             if(success !== false){
19541                 this.fireEvent("load", this, [], options);
19542             }
19543             if(options.callback){
19544                 options.callback.call(options.scope || this, [], options, false);
19545             }
19546             return;
19547         }
19548         // if data returned failure - throw an exception.
19549         if (o.success === false) {
19550             this.fireEvent("loadexception", this, o, options, this.reader.jsonData);
19551             return;
19552         }
19553         var r = o.records, t = o.totalRecords || r.length;
19554         if(!options || options.add !== true){
19555             if(this.pruneModifiedRecords){
19556                 this.modified = [];
19557             }
19558             for(var i = 0, len = r.length; i < len; i++){
19559                 r[i].join(this);
19560             }
19561             if(this.snapshot){
19562                 this.data = this.snapshot;
19563                 delete this.snapshot;
19564             }
19565             this.data.clear();
19566             this.data.addAll(r);
19567             this.totalLength = t;
19568             this.applySort();
19569             this.fireEvent("datachanged", this);
19570         }else{
19571             this.totalLength = Math.max(t, this.data.length+r.length);
19572             this.add(r);
19573         }
19574         this.fireEvent("load", this, r, options);
19575         if(options.callback){
19576             options.callback.call(options.scope || this, r, options, true);
19577         }
19578     },
19579
19580     /**
19581      * Loads data from a passed data block. A Reader which understands the format of the data
19582      * must have been configured in the constructor.
19583      * @param {Object} data The data block from which to read the Records.  The format of the data expected
19584      * is dependent on the type of Reader that is configured and should correspond to that Reader's readRecords parameter.
19585      * @param {Boolean} append (Optional) True to append the new Records rather than replace the existing cache.
19586      */
19587     loadData : function(o, append){
19588         var r = this.reader.readRecords(o);
19589         this.loadRecords(r, {add: append}, true);
19590     },
19591
19592     /**
19593      * Gets the number of cached records.
19594      * <p>
19595      * <em>If using paging, this may not be the total size of the dataset. If the data object
19596      * used by the Reader contains the dataset size, then the getTotalCount() function returns
19597      * the data set size</em>
19598      */
19599     getCount : function(){
19600         return this.data.length || 0;
19601     },
19602
19603     /**
19604      * Gets the total number of records in the dataset as returned by the server.
19605      * <p>
19606      * <em>If using paging, for this to be accurate, the data object used by the Reader must contain
19607      * the dataset size</em>
19608      */
19609     getTotalCount : function(){
19610         return this.totalLength || 0;
19611     },
19612
19613     /**
19614      * Returns the sort state of the Store as an object with two properties:
19615      * <pre><code>
19616  field {String} The name of the field by which the Records are sorted
19617  direction {String} The sort order, "ASC" or "DESC"
19618      * </code></pre>
19619      */
19620     getSortState : function(){
19621         return this.sortInfo;
19622     },
19623
19624     // private
19625     applySort : function(){
19626         if(this.sortInfo && !this.remoteSort){
19627             var s = this.sortInfo, f = s.field;
19628             var st = this.fields.get(f).sortType;
19629             var fn = function(r1, r2){
19630                 var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
19631                 return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
19632             };
19633             this.data.sort(s.direction, fn);
19634             if(this.snapshot && this.snapshot != this.data){
19635                 this.snapshot.sort(s.direction, fn);
19636             }
19637         }
19638     },
19639
19640     /**
19641      * Sets the default sort column and order to be used by the next load operation.
19642      * @param {String} fieldName The name of the field to sort by.
19643      * @param {String} dir (optional) The sort order, "ASC" or "DESC" (defaults to "ASC")
19644      */
19645     setDefaultSort : function(field, dir){
19646         this.sortInfo = {field: field, direction: dir ? dir.toUpperCase() : "ASC"};
19647     },
19648
19649     /**
19650      * Sort the Records.
19651      * If remote sorting is used, the sort is performed on the server, and the cache is
19652      * reloaded. If local sorting is used, the cache is sorted internally.
19653      * @param {String} fieldName The name of the field to sort by.
19654      * @param {String} dir (optional) The sort order, "ASC" or "DESC" (defaults to "ASC")
19655      */
19656     sort : function(fieldName, dir){
19657         var f = this.fields.get(fieldName);
19658         if(!dir){
19659             this.sortToggle[f.name] = this.sortToggle[f.name] || f.sortDir;
19660             
19661             if(this.multiSort || (this.sortInfo && this.sortInfo.field == f.name) ){ // toggle sort dir
19662                 dir = (this.sortToggle[f.name] || "ASC").toggle("ASC", "DESC");
19663             }else{
19664                 dir = f.sortDir;
19665             }
19666         }
19667         this.sortToggle[f.name] = dir;
19668         this.sortInfo = {field: f.name, direction: dir};
19669         if(!this.remoteSort){
19670             this.applySort();
19671             this.fireEvent("datachanged", this);
19672         }else{
19673             this.load(this.lastOptions);
19674         }
19675     },
19676
19677     /**
19678      * Calls the specified function for each of the Records in the cache.
19679      * @param {Function} fn The function to call. The Record is passed as the first parameter.
19680      * Returning <em>false</em> aborts and exits the iteration.
19681      * @param {Object} scope (optional) The scope in which to call the function (defaults to the Record).
19682      */
19683     each : function(fn, scope){
19684         this.data.each(fn, scope);
19685     },
19686
19687     /**
19688      * Gets all records modified since the last commit.  Modified records are persisted across load operations
19689      * (e.g., during paging).
19690      * @return {Roo.data.Record[]} An array of Records containing outstanding modifications.
19691      */
19692     getModifiedRecords : function(){
19693         return this.modified;
19694     },
19695
19696     // private
19697     createFilterFn : function(property, value, anyMatch){
19698         if(!value.exec){ // not a regex
19699             value = String(value);
19700             if(value.length == 0){
19701                 return false;
19702             }
19703             value = new RegExp((anyMatch === true ? '' : '^') + Roo.escapeRe(value), "i");
19704         }
19705         return function(r){
19706             return value.test(r.data[property]);
19707         };
19708     },
19709
19710     /**
19711      * Sums the value of <i>property</i> for each record between start and end and returns the result.
19712      * @param {String} property A field on your records
19713      * @param {Number} start The record index to start at (defaults to 0)
19714      * @param {Number} end The last record index to include (defaults to length - 1)
19715      * @return {Number} The sum
19716      */
19717     sum : function(property, start, end){
19718         var rs = this.data.items, v = 0;
19719         start = start || 0;
19720         end = (end || end === 0) ? end : rs.length-1;
19721
19722         for(var i = start; i <= end; i++){
19723             v += (rs[i].data[property] || 0);
19724         }
19725         return v;
19726     },
19727
19728     /**
19729      * Filter the records by a specified property.
19730      * @param {String} field A field on your records
19731      * @param {String/RegExp} value Either a string that the field
19732      * should start with or a RegExp to test against the field
19733      * @param {Boolean} anyMatch True to match any part not just the beginning
19734      */
19735     filter : function(property, value, anyMatch){
19736         var fn = this.createFilterFn(property, value, anyMatch);
19737         return fn ? this.filterBy(fn) : this.clearFilter();
19738     },
19739
19740     /**
19741      * Filter by a function. The specified function will be called with each
19742      * record in this data source. If the function returns true the record is included,
19743      * otherwise it is filtered.
19744      * @param {Function} fn The function to be called, it will receive 2 args (record, id)
19745      * @param {Object} scope (optional) The scope of the function (defaults to this)
19746      */
19747     filterBy : function(fn, scope){
19748         this.snapshot = this.snapshot || this.data;
19749         this.data = this.queryBy(fn, scope||this);
19750         this.fireEvent("datachanged", this);
19751     },
19752
19753     /**
19754      * Query the records by a specified property.
19755      * @param {String} field A field on your records
19756      * @param {String/RegExp} value Either a string that the field
19757      * should start with or a RegExp to test against the field
19758      * @param {Boolean} anyMatch True to match any part not just the beginning
19759      * @return {MixedCollection} Returns an Roo.util.MixedCollection of the matched records
19760      */
19761     query : function(property, value, anyMatch){
19762         var fn = this.createFilterFn(property, value, anyMatch);
19763         return fn ? this.queryBy(fn) : this.data.clone();
19764     },
19765
19766     /**
19767      * Query by a function. The specified function will be called with each
19768      * record in this data source. If the function returns true the record is included
19769      * in the results.
19770      * @param {Function} fn The function to be called, it will receive 2 args (record, id)
19771      * @param {Object} scope (optional) The scope of the function (defaults to this)
19772       @return {MixedCollection} Returns an Roo.util.MixedCollection of the matched records
19773      **/
19774     queryBy : function(fn, scope){
19775         var data = this.snapshot || this.data;
19776         return data.filterBy(fn, scope||this);
19777     },
19778
19779     /**
19780      * Collects unique values for a particular dataIndex from this store.
19781      * @param {String} dataIndex The property to collect
19782      * @param {Boolean} allowNull (optional) Pass true to allow null, undefined or empty string values
19783      * @param {Boolean} bypassFilter (optional) Pass true to collect from all records, even ones which are filtered
19784      * @return {Array} An array of the unique values
19785      **/
19786     collect : function(dataIndex, allowNull, bypassFilter){
19787         var d = (bypassFilter === true && this.snapshot) ?
19788                 this.snapshot.items : this.data.items;
19789         var v, sv, r = [], l = {};
19790         for(var i = 0, len = d.length; i < len; i++){
19791             v = d[i].data[dataIndex];
19792             sv = String(v);
19793             if((allowNull || !Roo.isEmpty(v)) && !l[sv]){
19794                 l[sv] = true;
19795                 r[r.length] = v;
19796             }
19797         }
19798         return r;
19799     },
19800
19801     /**
19802      * Revert to a view of the Record cache with no filtering applied.
19803      * @param {Boolean} suppressEvent If true the filter is cleared silently without notifying listeners
19804      */
19805     clearFilter : function(suppressEvent){
19806         if(this.snapshot && this.snapshot != this.data){
19807             this.data = this.snapshot;
19808             delete this.snapshot;
19809             if(suppressEvent !== true){
19810                 this.fireEvent("datachanged", this);
19811             }
19812         }
19813     },
19814
19815     // private
19816     afterEdit : function(record){
19817         if(this.modified.indexOf(record) == -1){
19818             this.modified.push(record);
19819         }
19820         this.fireEvent("update", this, record, Roo.data.Record.EDIT);
19821     },
19822
19823     // private
19824     afterReject : function(record){
19825         this.modified.remove(record);
19826         this.fireEvent("update", this, record, Roo.data.Record.REJECT);
19827     },
19828
19829     // private
19830     afterCommit : function(record){
19831         this.modified.remove(record);
19832         this.fireEvent("update", this, record, Roo.data.Record.COMMIT);
19833     },
19834
19835     /**
19836      * Commit all Records with outstanding changes. To handle updates for changes, subscribe to the
19837      * Store's "update" event, and perform updating when the third parameter is Roo.data.Record.COMMIT.
19838      */
19839     commitChanges : function(){
19840         var m = this.modified.slice(0);
19841         this.modified = [];
19842         for(var i = 0, len = m.length; i < len; i++){
19843             m[i].commit();
19844         }
19845     },
19846
19847     /**
19848      * Cancel outstanding changes on all changed records.
19849      */
19850     rejectChanges : function(){
19851         var m = this.modified.slice(0);
19852         this.modified = [];
19853         for(var i = 0, len = m.length; i < len; i++){
19854             m[i].reject();
19855         }
19856     },
19857
19858     onMetaChange : function(meta, rtype, o){
19859         this.recordType = rtype;
19860         this.fields = rtype.prototype.fields;
19861         delete this.snapshot;
19862         this.sortInfo = meta.sortInfo || this.sortInfo;
19863         this.modified = [];
19864         this.fireEvent('metachange', this, this.reader.meta);
19865     }
19866 });/*
19867  * Based on:
19868  * Ext JS Library 1.1.1
19869  * Copyright(c) 2006-2007, Ext JS, LLC.
19870  *
19871  * Originally Released Under LGPL - original licence link has changed is not relivant.
19872  *
19873  * Fork - LGPL
19874  * <script type="text/javascript">
19875  */
19876
19877 /**
19878  * @class Roo.data.SimpleStore
19879  * @extends Roo.data.Store
19880  * Small helper class to make creating Stores from Array data easier.
19881  * @cfg {Number} id The array index of the record id. Leave blank to auto generate ids.
19882  * @cfg {Array} fields An array of field definition objects, or field name strings.
19883  * @cfg {Array} data The multi-dimensional array of data
19884  * @constructor
19885  * @param {Object} config
19886  */
19887 Roo.data.SimpleStore = function(config){
19888     Roo.data.SimpleStore.superclass.constructor.call(this, {
19889         isLocal : true,
19890         reader: new Roo.data.ArrayReader({
19891                 id: config.id
19892             },
19893             Roo.data.Record.create(config.fields)
19894         ),
19895         proxy : new Roo.data.MemoryProxy(config.data)
19896     });
19897     this.load();
19898 };
19899 Roo.extend(Roo.data.SimpleStore, Roo.data.Store);/*
19900  * Based on:
19901  * Ext JS Library 1.1.1
19902  * Copyright(c) 2006-2007, Ext JS, LLC.
19903  *
19904  * Originally Released Under LGPL - original licence link has changed is not relivant.
19905  *
19906  * Fork - LGPL
19907  * <script type="text/javascript">
19908  */
19909
19910 /**
19911 /**
19912  * @extends Roo.data.Store
19913  * @class Roo.data.JsonStore
19914  * Small helper class to make creating Stores for JSON data easier. <br/>
19915 <pre><code>
19916 var store = new Roo.data.JsonStore({
19917     url: 'get-images.php',
19918     root: 'images',
19919     fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}]
19920 });
19921 </code></pre>
19922  * <b>Note: Although they are not listed, this class inherits all of the config options of Store,
19923  * JsonReader and HttpProxy (unless inline data is provided).</b>
19924  * @cfg {Array} fields An array of field definition objects, or field name strings.
19925  * @constructor
19926  * @param {Object} config
19927  */
19928 Roo.data.JsonStore = function(c){
19929     Roo.data.JsonStore.superclass.constructor.call(this, Roo.apply(c, {
19930         proxy: !c.data ? new Roo.data.HttpProxy({url: c.url}) : undefined,
19931         reader: new Roo.data.JsonReader(c, c.fields)
19932     }));
19933 };
19934 Roo.extend(Roo.data.JsonStore, Roo.data.Store);/*
19935  * Based on:
19936  * Ext JS Library 1.1.1
19937  * Copyright(c) 2006-2007, Ext JS, LLC.
19938  *
19939  * Originally Released Under LGPL - original licence link has changed is not relivant.
19940  *
19941  * Fork - LGPL
19942  * <script type="text/javascript">
19943  */
19944
19945  
19946 Roo.data.Field = function(config){
19947     if(typeof config == "string"){
19948         config = {name: config};
19949     }
19950     Roo.apply(this, config);
19951     
19952     if(!this.type){
19953         this.type = "auto";
19954     }
19955     
19956     var st = Roo.data.SortTypes;
19957     // named sortTypes are supported, here we look them up
19958     if(typeof this.sortType == "string"){
19959         this.sortType = st[this.sortType];
19960     }
19961     
19962     // set default sortType for strings and dates
19963     if(!this.sortType){
19964         switch(this.type){
19965             case "string":
19966                 this.sortType = st.asUCString;
19967                 break;
19968             case "date":
19969                 this.sortType = st.asDate;
19970                 break;
19971             default:
19972                 this.sortType = st.none;
19973         }
19974     }
19975
19976     // define once
19977     var stripRe = /[\$,%]/g;
19978
19979     // prebuilt conversion function for this field, instead of
19980     // switching every time we're reading a value
19981     if(!this.convert){
19982         var cv, dateFormat = this.dateFormat;
19983         switch(this.type){
19984             case "":
19985             case "auto":
19986             case undefined:
19987                 cv = function(v){ return v; };
19988                 break;
19989             case "string":
19990                 cv = function(v){ return (v === undefined || v === null) ? '' : String(v); };
19991                 break;
19992             case "int":
19993                 cv = function(v){
19994                     return v !== undefined && v !== null && v !== '' ?
19995                            parseInt(String(v).replace(stripRe, ""), 10) : '';
19996                     };
19997                 break;
19998             case "float":
19999                 cv = function(v){
20000                     return v !== undefined && v !== null && v !== '' ?
20001                            parseFloat(String(v).replace(stripRe, ""), 10) : ''; 
20002                     };
20003                 break;
20004             case "bool":
20005             case "boolean":
20006                 cv = function(v){ return v === true || v === "true" || v == 1; };
20007                 break;
20008             case "date":
20009                 cv = function(v){
20010                     if(!v){
20011                         return '';
20012                     }
20013                     if(v instanceof Date){
20014                         return v;
20015                     }
20016                     if(dateFormat){
20017                         if(dateFormat == "timestamp"){
20018                             return new Date(v*1000);
20019                         }
20020                         return Date.parseDate(v, dateFormat);
20021                     }
20022                     var parsed = Date.parse(v);
20023                     return parsed ? new Date(parsed) : null;
20024                 };
20025              break;
20026             
20027         }
20028         this.convert = cv;
20029     }
20030 };
20031
20032 Roo.data.Field.prototype = {
20033     dateFormat: null,
20034     defaultValue: "",
20035     mapping: null,
20036     sortType : null,
20037     sortDir : "ASC"
20038 };/*
20039  * Based on:
20040  * Ext JS Library 1.1.1
20041  * Copyright(c) 2006-2007, Ext JS, LLC.
20042  *
20043  * Originally Released Under LGPL - original licence link has changed is not relivant.
20044  *
20045  * Fork - LGPL
20046  * <script type="text/javascript">
20047  */
20048  
20049 // Base class for reading structured data from a data source.  This class is intended to be
20050 // extended (see ArrayReader, JsonReader and XmlReader) and should not be created directly.
20051
20052 /**
20053  * @class Roo.data.DataReader
20054  * Base class for reading structured data from a data source.  This class is intended to be
20055  * extended (see {Roo.data.ArrayReader}, {Roo.data.JsonReader} and {Roo.data.XmlReader}) and should not be created directly.
20056  */
20057
20058 Roo.data.DataReader = function(meta, recordType){
20059     
20060     this.meta = meta;
20061     
20062     this.recordType = recordType instanceof Array ? 
20063         Roo.data.Record.create(recordType) : recordType;
20064 };
20065
20066 Roo.data.DataReader.prototype = {
20067      /**
20068      * Create an empty record
20069      * @param {Object} data (optional) - overlay some values
20070      * @return {Roo.data.Record} record created.
20071      */
20072     newRow :  function(d) {
20073         var da =  {};
20074         this.recordType.prototype.fields.each(function(c) {
20075             switch( c.type) {
20076                 case 'int' : da[c.name] = 0; break;
20077                 case 'date' : da[c.name] = new Date(); break;
20078                 case 'float' : da[c.name] = 0.0; break;
20079                 case 'boolean' : da[c.name] = false; break;
20080                 default : da[c.name] = ""; break;
20081             }
20082             
20083         });
20084         return new this.recordType(Roo.apply(da, d));
20085     }
20086     
20087 };/*
20088  * Based on:
20089  * Ext JS Library 1.1.1
20090  * Copyright(c) 2006-2007, Ext JS, LLC.
20091  *
20092  * Originally Released Under LGPL - original licence link has changed is not relivant.
20093  *
20094  * Fork - LGPL
20095  * <script type="text/javascript">
20096  */
20097
20098 /**
20099  * @class Roo.data.DataProxy
20100  * @extends Roo.data.Observable
20101  * This class is an abstract base class for implementations which provide retrieval of
20102  * unformatted data objects.<br>
20103  * <p>
20104  * DataProxy implementations are usually used in conjunction with an implementation of Roo.data.DataReader
20105  * (of the appropriate type which knows how to parse the data object) to provide a block of
20106  * {@link Roo.data.Records} to an {@link Roo.data.Store}.<br>
20107  * <p>
20108  * Custom implementations must implement the load method as described in
20109  * {@link Roo.data.HttpProxy#load}.
20110  */
20111 Roo.data.DataProxy = function(){
20112     this.addEvents({
20113         /**
20114          * @event beforeload
20115          * Fires before a network request is made to retrieve a data object.
20116          * @param {Object} This DataProxy object.
20117          * @param {Object} params The params parameter to the load function.
20118          */
20119         beforeload : true,
20120         /**
20121          * @event load
20122          * Fires before the load method's callback is called.
20123          * @param {Object} This DataProxy object.
20124          * @param {Object} o The data object.
20125          * @param {Object} arg The callback argument object passed to the load function.
20126          */
20127         load : true,
20128         /**
20129          * @event loadexception
20130          * Fires if an Exception occurs during data retrieval.
20131          * @param {Object} This DataProxy object.
20132          * @param {Object} o The data object.
20133          * @param {Object} arg The callback argument object passed to the load function.
20134          * @param {Object} e The Exception.
20135          */
20136         loadexception : true
20137     });
20138     Roo.data.DataProxy.superclass.constructor.call(this);
20139 };
20140
20141 Roo.extend(Roo.data.DataProxy, Roo.util.Observable);
20142
20143     /**
20144      * @cfg {void} listeners (Not available) Constructor blocks listeners from being set
20145      */
20146 /*
20147  * Based on:
20148  * Ext JS Library 1.1.1
20149  * Copyright(c) 2006-2007, Ext JS, LLC.
20150  *
20151  * Originally Released Under LGPL - original licence link has changed is not relivant.
20152  *
20153  * Fork - LGPL
20154  * <script type="text/javascript">
20155  */
20156 /**
20157  * @class Roo.data.MemoryProxy
20158  * An implementation of Roo.data.DataProxy that simply passes the data specified in its constructor
20159  * to the Reader when its load method is called.
20160  * @constructor
20161  * @param {Object} data The data object which the Reader uses to construct a block of Roo.data.Records.
20162  */
20163 Roo.data.MemoryProxy = function(data){
20164     if (data.data) {
20165         data = data.data;
20166     }
20167     Roo.data.MemoryProxy.superclass.constructor.call(this);
20168     this.data = data;
20169 };
20170
20171 Roo.extend(Roo.data.MemoryProxy, Roo.data.DataProxy, {
20172     /**
20173      * Load data from the requested source (in this case an in-memory
20174      * data object passed to the constructor), read the data object into
20175      * a block of Roo.data.Records using the passed Roo.data.DataReader implementation, and
20176      * process that block using the passed callback.
20177      * @param {Object} params This parameter is not used by the MemoryProxy class.
20178      * @param {Roo.data.DataReader} reader The Reader object which converts the data
20179      * object into a block of Roo.data.Records.
20180      * @param {Function} callback The function into which to pass the block of Roo.data.records.
20181      * The function must be passed <ul>
20182      * <li>The Record block object</li>
20183      * <li>The "arg" argument from the load function</li>
20184      * <li>A boolean success indicator</li>
20185      * </ul>
20186      * @param {Object} scope The scope in which to call the callback
20187      * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
20188      */
20189     load : function(params, reader, callback, scope, arg){
20190         params = params || {};
20191         var result;
20192         try {
20193             result = reader.readRecords(this.data);
20194         }catch(e){
20195             this.fireEvent("loadexception", this, arg, null, e);
20196             callback.call(scope, null, arg, false);
20197             return;
20198         }
20199         callback.call(scope, result, arg, true);
20200     },
20201     
20202     // private
20203     update : function(params, records){
20204         
20205     }
20206 });/*
20207  * Based on:
20208  * Ext JS Library 1.1.1
20209  * Copyright(c) 2006-2007, Ext JS, LLC.
20210  *
20211  * Originally Released Under LGPL - original licence link has changed is not relivant.
20212  *
20213  * Fork - LGPL
20214  * <script type="text/javascript">
20215  */
20216 /**
20217  * @class Roo.data.HttpProxy
20218  * @extends Roo.data.DataProxy
20219  * An implementation of {@link Roo.data.DataProxy} that reads a data object from an {@link Roo.data.Connection} object
20220  * configured to reference a certain URL.<br><br>
20221  * <p>
20222  * <em>Note that this class cannot be used to retrieve data from a domain other than the domain
20223  * from which the running page was served.<br><br>
20224  * <p>
20225  * For cross-domain access to remote data, use an {@link Roo.data.ScriptTagProxy}.</em><br><br>
20226  * <p>
20227  * Be aware that to enable the browser to parse an XML document, the server must set
20228  * the Content-Type header in the HTTP response to "text/xml".
20229  * @constructor
20230  * @param {Object} conn Connection config options to add to each request (e.g. {url: 'foo.php'} or
20231  * an {@link Roo.data.Connection} object.  If a Connection config is passed, the singleton {@link Roo.Ajax} object
20232  * will be used to make the request.
20233  */
20234 Roo.data.HttpProxy = function(conn){
20235     Roo.data.HttpProxy.superclass.constructor.call(this);
20236     // is conn a conn config or a real conn?
20237     this.conn = conn;
20238     this.useAjax = !conn || !conn.events;
20239   
20240 };
20241
20242 Roo.extend(Roo.data.HttpProxy, Roo.data.DataProxy, {
20243     // thse are take from connection...
20244     
20245     /**
20246      * @cfg {String} url (Optional) The default URL to be used for requests to the server. (defaults to undefined)
20247      */
20248     /**
20249      * @cfg {Object} extraParams (Optional) An object containing properties which are used as
20250      * extra parameters to each request made by this object. (defaults to undefined)
20251      */
20252     /**
20253      * @cfg {Object} defaultHeaders (Optional) An object containing request headers which are added
20254      *  to each request made by this object. (defaults to undefined)
20255      */
20256     /**
20257      * @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)
20258      */
20259     /**
20260      * @cfg {Number} timeout (Optional) The timeout in milliseconds to be used for requests. (defaults to 30000)
20261      */
20262      /**
20263      * @cfg {Boolean} autoAbort (Optional) Whether this request should abort any pending requests. (defaults to false)
20264      * @type Boolean
20265      */
20266   
20267
20268     /**
20269      * @cfg {Boolean} disableCaching (Optional) True to add a unique cache-buster param to GET requests. (defaults to true)
20270      * @type Boolean
20271      */
20272     /**
20273      * Return the {@link Roo.data.Connection} object being used by this Proxy.
20274      * @return {Connection} The Connection object. This object may be used to subscribe to events on
20275      * a finer-grained basis than the DataProxy events.
20276      */
20277     getConnection : function(){
20278         return this.useAjax ? Roo.Ajax : this.conn;
20279     },
20280
20281     /**
20282      * Load data from the configured {@link Roo.data.Connection}, read the data object into
20283      * a block of Roo.data.Records using the passed {@link Roo.data.DataReader} implementation, and
20284      * process that block using the passed callback.
20285      * @param {Object} params An object containing properties which are to be used as HTTP parameters
20286      * for the request to the remote server.
20287      * @param {Roo.data.DataReader} reader The Reader object which converts the data
20288      * object into a block of Roo.data.Records.
20289      * @param {Function} callback The function into which to pass the block of Roo.data.Records.
20290      * The function must be passed <ul>
20291      * <li>The Record block object</li>
20292      * <li>The "arg" argument from the load function</li>
20293      * <li>A boolean success indicator</li>
20294      * </ul>
20295      * @param {Object} scope The scope in which to call the callback
20296      * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
20297      */
20298     load : function(params, reader, callback, scope, arg){
20299         if(this.fireEvent("beforeload", this, params) !== false){
20300             var  o = {
20301                 params : params || {},
20302                 request: {
20303                     callback : callback,
20304                     scope : scope,
20305                     arg : arg
20306                 },
20307                 reader: reader,
20308                 callback : this.loadResponse,
20309                 scope: this
20310             };
20311             if(this.useAjax){
20312                 Roo.applyIf(o, this.conn);
20313                 if(this.activeRequest){
20314                     Roo.Ajax.abort(this.activeRequest);
20315                 }
20316                 this.activeRequest = Roo.Ajax.request(o);
20317             }else{
20318                 this.conn.request(o);
20319             }
20320         }else{
20321             callback.call(scope||this, null, arg, false);
20322         }
20323     },
20324
20325     // private
20326     loadResponse : function(o, success, response){
20327         delete this.activeRequest;
20328         if(!success){
20329             this.fireEvent("loadexception", this, o, response);
20330             o.request.callback.call(o.request.scope, null, o.request.arg, false);
20331             return;
20332         }
20333         var result;
20334         try {
20335             result = o.reader.read(response);
20336         }catch(e){
20337             this.fireEvent("loadexception", this, o, response, e);
20338             o.request.callback.call(o.request.scope, null, o.request.arg, false);
20339             return;
20340         }
20341         
20342         this.fireEvent("load", this, o, o.request.arg);
20343         o.request.callback.call(o.request.scope, result, o.request.arg, true);
20344     },
20345
20346     // private
20347     update : function(dataSet){
20348
20349     },
20350
20351     // private
20352     updateResponse : function(dataSet){
20353
20354     }
20355 });/*
20356  * Based on:
20357  * Ext JS Library 1.1.1
20358  * Copyright(c) 2006-2007, Ext JS, LLC.
20359  *
20360  * Originally Released Under LGPL - original licence link has changed is not relivant.
20361  *
20362  * Fork - LGPL
20363  * <script type="text/javascript">
20364  */
20365
20366 /**
20367  * @class Roo.data.ScriptTagProxy
20368  * An implementation of Roo.data.DataProxy that reads a data object from a URL which may be in a domain
20369  * other than the originating domain of the running page.<br><br>
20370  * <p>
20371  * <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
20372  * of the running page, you must use this class, rather than DataProxy.</em><br><br>
20373  * <p>
20374  * The content passed back from a server resource requested by a ScriptTagProxy is executable JavaScript
20375  * source code that is used as the source inside a &lt;script> tag.<br><br>
20376  * <p>
20377  * In order for the browser to process the returned data, the server must wrap the data object
20378  * with a call to a callback function, the name of which is passed as a parameter by the ScriptTagProxy.
20379  * Below is a Java example for a servlet which returns data for either a ScriptTagProxy, or an HttpProxy
20380  * depending on whether the callback name was passed:
20381  * <p>
20382  * <pre><code>
20383 boolean scriptTag = false;
20384 String cb = request.getParameter("callback");
20385 if (cb != null) {
20386     scriptTag = true;
20387     response.setContentType("text/javascript");
20388 } else {
20389     response.setContentType("application/x-json");
20390 }
20391 Writer out = response.getWriter();
20392 if (scriptTag) {
20393     out.write(cb + "(");
20394 }
20395 out.print(dataBlock.toJsonString());
20396 if (scriptTag) {
20397     out.write(");");
20398 }
20399 </pre></code>
20400  *
20401  * @constructor
20402  * @param {Object} config A configuration object.
20403  */
20404 Roo.data.ScriptTagProxy = function(config){
20405     Roo.data.ScriptTagProxy.superclass.constructor.call(this);
20406     Roo.apply(this, config);
20407     this.head = document.getElementsByTagName("head")[0];
20408 };
20409
20410 Roo.data.ScriptTagProxy.TRANS_ID = 1000;
20411
20412 Roo.extend(Roo.data.ScriptTagProxy, Roo.data.DataProxy, {
20413     /**
20414      * @cfg {String} url The URL from which to request the data object.
20415      */
20416     /**
20417      * @cfg {Number} timeout (Optional) The number of milliseconds to wait for a response. Defaults to 30 seconds.
20418      */
20419     timeout : 30000,
20420     /**
20421      * @cfg {String} callbackParam (Optional) The name of the parameter to pass to the server which tells
20422      * the server the name of the callback function set up by the load call to process the returned data object.
20423      * Defaults to "callback".<p>The server-side processing must read this parameter value, and generate
20424      * javascript output which calls this named function passing the data object as its only parameter.
20425      */
20426     callbackParam : "callback",
20427     /**
20428      *  @cfg {Boolean} nocache (Optional) Defaults to true. Disable cacheing by adding a unique parameter
20429      * name to the request.
20430      */
20431     nocache : true,
20432
20433     /**
20434      * Load data from the configured URL, read the data object into
20435      * a block of Roo.data.Records using the passed Roo.data.DataReader implementation, and
20436      * process that block using the passed callback.
20437      * @param {Object} params An object containing properties which are to be used as HTTP parameters
20438      * for the request to the remote server.
20439      * @param {Roo.data.DataReader} reader The Reader object which converts the data
20440      * object into a block of Roo.data.Records.
20441      * @param {Function} callback The function into which to pass the block of Roo.data.Records.
20442      * The function must be passed <ul>
20443      * <li>The Record block object</li>
20444      * <li>The "arg" argument from the load function</li>
20445      * <li>A boolean success indicator</li>
20446      * </ul>
20447      * @param {Object} scope The scope in which to call the callback
20448      * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
20449      */
20450     load : function(params, reader, callback, scope, arg){
20451         if(this.fireEvent("beforeload", this, params) !== false){
20452
20453             var p = Roo.urlEncode(Roo.apply(params, this.extraParams));
20454
20455             var url = this.url;
20456             url += (url.indexOf("?") != -1 ? "&" : "?") + p;
20457             if(this.nocache){
20458                 url += "&_dc=" + (new Date().getTime());
20459             }
20460             var transId = ++Roo.data.ScriptTagProxy.TRANS_ID;
20461             var trans = {
20462                 id : transId,
20463                 cb : "stcCallback"+transId,
20464                 scriptId : "stcScript"+transId,
20465                 params : params,
20466                 arg : arg,
20467                 url : url,
20468                 callback : callback,
20469                 scope : scope,
20470                 reader : reader
20471             };
20472             var conn = this;
20473
20474             window[trans.cb] = function(o){
20475                 conn.handleResponse(o, trans);
20476             };
20477
20478             url += String.format("&{0}={1}", this.callbackParam, trans.cb);
20479
20480             if(this.autoAbort !== false){
20481                 this.abort();
20482             }
20483
20484             trans.timeoutId = this.handleFailure.defer(this.timeout, this, [trans]);
20485
20486             var script = document.createElement("script");
20487             script.setAttribute("src", url);
20488             script.setAttribute("type", "text/javascript");
20489             script.setAttribute("id", trans.scriptId);
20490             this.head.appendChild(script);
20491
20492             this.trans = trans;
20493         }else{
20494             callback.call(scope||this, null, arg, false);
20495         }
20496     },
20497
20498     // private
20499     isLoading : function(){
20500         return this.trans ? true : false;
20501     },
20502
20503     /**
20504      * Abort the current server request.
20505      */
20506     abort : function(){
20507         if(this.isLoading()){
20508             this.destroyTrans(this.trans);
20509         }
20510     },
20511
20512     // private
20513     destroyTrans : function(trans, isLoaded){
20514         this.head.removeChild(document.getElementById(trans.scriptId));
20515         clearTimeout(trans.timeoutId);
20516         if(isLoaded){
20517             window[trans.cb] = undefined;
20518             try{
20519                 delete window[trans.cb];
20520             }catch(e){}
20521         }else{
20522             // if hasn't been loaded, wait for load to remove it to prevent script error
20523             window[trans.cb] = function(){
20524                 window[trans.cb] = undefined;
20525                 try{
20526                     delete window[trans.cb];
20527                 }catch(e){}
20528             };
20529         }
20530     },
20531
20532     // private
20533     handleResponse : function(o, trans){
20534         this.trans = false;
20535         this.destroyTrans(trans, true);
20536         var result;
20537         try {
20538             result = trans.reader.readRecords(o);
20539         }catch(e){
20540             this.fireEvent("loadexception", this, o, trans.arg, e);
20541             trans.callback.call(trans.scope||window, null, trans.arg, false);
20542             return;
20543         }
20544         this.fireEvent("load", this, o, trans.arg);
20545         trans.callback.call(trans.scope||window, result, trans.arg, true);
20546     },
20547
20548     // private
20549     handleFailure : function(trans){
20550         this.trans = false;
20551         this.destroyTrans(trans, false);
20552         this.fireEvent("loadexception", this, null, trans.arg);
20553         trans.callback.call(trans.scope||window, null, trans.arg, false);
20554     }
20555 });/*
20556  * Based on:
20557  * Ext JS Library 1.1.1
20558  * Copyright(c) 2006-2007, Ext JS, LLC.
20559  *
20560  * Originally Released Under LGPL - original licence link has changed is not relivant.
20561  *
20562  * Fork - LGPL
20563  * <script type="text/javascript">
20564  */
20565
20566 /**
20567  * @class Roo.data.JsonReader
20568  * @extends Roo.data.DataReader
20569  * Data reader class to create an Array of Roo.data.Record objects from a JSON response
20570  * based on mappings in a provided Roo.data.Record constructor.
20571  * 
20572  * The default behaviour of a store is to send ?_requestMeta=1, unless the class has recieved 'metaData' property
20573  * in the reply previously. 
20574  * 
20575  * <p>
20576  * Example code:
20577  * <pre><code>
20578 var RecordDef = Roo.data.Record.create([
20579     {name: 'name', mapping: 'name'},     // "mapping" property not needed if it's the same as "name"
20580     {name: 'occupation'}                 // This field will use "occupation" as the mapping.
20581 ]);
20582 var myReader = new Roo.data.JsonReader({
20583     totalProperty: "results",    // The property which contains the total dataset size (optional)
20584     root: "rows",                // The property which contains an Array of row objects
20585     id: "id"                     // The property within each row object that provides an ID for the record (optional)
20586 }, RecordDef);
20587 </code></pre>
20588  * <p>
20589  * This would consume a JSON file like this:
20590  * <pre><code>
20591 { 'results': 2, 'rows': [
20592     { 'id': 1, 'name': 'Bill', occupation: 'Gardener' },
20593     { 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' } ]
20594 }
20595 </code></pre>
20596  * @cfg {String} totalProperty Name of the property from which to retrieve the total number of records
20597  * in the dataset. This is only needed if the whole dataset is not passed in one go, but is being
20598  * paged from the remote server.
20599  * @cfg {String} successProperty Name of the property from which to retrieve the success attribute used by forms.
20600  * @cfg {String} root name of the property which contains the Array of row objects.
20601  * @cfg {String} id Name of the property within a row object that contains a record identifier value.
20602  * @constructor
20603  * Create a new JsonReader
20604  * @param {Object} meta Metadata configuration options
20605  * @param {Object} recordType Either an Array of field definition objects,
20606  * or an {@link Roo.data.Record} object created using {@link Roo.data.Record#create}.
20607  */
20608 Roo.data.JsonReader = function(meta, recordType){
20609     
20610     meta = meta || {};
20611     // set some defaults:
20612     Roo.applyIf(meta, {
20613         totalProperty: 'total',
20614         successProperty : 'success',
20615         root : 'data',
20616         id : 'id'
20617     });
20618     
20619     Roo.data.JsonReader.superclass.constructor.call(this, meta, recordType||meta.fields);
20620 };
20621 Roo.extend(Roo.data.JsonReader, Roo.data.DataReader, {
20622     
20623     /**
20624      * @prop {Boolean} metaFromRemote  - if the meta data was loaded from the remote source.
20625      * Used by Store query builder to append _requestMeta to params.
20626      * 
20627      */
20628     metaFromRemote : false,
20629     /**
20630      * This method is only used by a DataProxy which has retrieved data from a remote server.
20631      * @param {Object} response The XHR object which contains the JSON data in its responseText.
20632      * @return {Object} data A data block which is used by an Roo.data.Store object as
20633      * a cache of Roo.data.Records.
20634      */
20635     read : function(response){
20636         var json = response.responseText;
20637        
20638         var o = /* eval:var:o */ eval("("+json+")");
20639         if(!o) {
20640             throw {message: "JsonReader.read: Json object not found"};
20641         }
20642         
20643         if(o.metaData){
20644             
20645             delete this.ef;
20646             this.metaFromRemote = true;
20647             this.meta = o.metaData;
20648             this.recordType = Roo.data.Record.create(o.metaData.fields);
20649             this.onMetaChange(this.meta, this.recordType, o);
20650         }
20651         return this.readRecords(o);
20652     },
20653
20654     // private function a store will implement
20655     onMetaChange : function(meta, recordType, o){
20656
20657     },
20658
20659     /**
20660          * @ignore
20661          */
20662     simpleAccess: function(obj, subsc) {
20663         return obj[subsc];
20664     },
20665
20666         /**
20667          * @ignore
20668          */
20669     getJsonAccessor: function(){
20670         var re = /[\[\.]/;
20671         return function(expr) {
20672             try {
20673                 return(re.test(expr))
20674                     ? new Function("obj", "return obj." + expr)
20675                     : function(obj){
20676                         return obj[expr];
20677                     };
20678             } catch(e){}
20679             return Roo.emptyFn;
20680         };
20681     }(),
20682
20683     /**
20684      * Create a data block containing Roo.data.Records from an XML document.
20685      * @param {Object} o An object which contains an Array of row objects in the property specified
20686      * in the config as 'root, and optionally a property, specified in the config as 'totalProperty'
20687      * which contains the total size of the dataset.
20688      * @return {Object} data A data block which is used by an Roo.data.Store object as
20689      * a cache of Roo.data.Records.
20690      */
20691     readRecords : function(o){
20692         /**
20693          * After any data loads, the raw JSON data is available for further custom processing.
20694          * @type Object
20695          */
20696         this.jsonData = o;
20697         var s = this.meta, Record = this.recordType,
20698             f = Record.prototype.fields, fi = f.items, fl = f.length;
20699
20700 //      Generate extraction functions for the totalProperty, the root, the id, and for each field
20701         if (!this.ef) {
20702             if(s.totalProperty) {
20703                     this.getTotal = this.getJsonAccessor(s.totalProperty);
20704                 }
20705                 if(s.successProperty) {
20706                     this.getSuccess = this.getJsonAccessor(s.successProperty);
20707                 }
20708                 this.getRoot = s.root ? this.getJsonAccessor(s.root) : function(p){return p;};
20709                 if (s.id) {
20710                         var g = this.getJsonAccessor(s.id);
20711                         this.getId = function(rec) {
20712                                 var r = g(rec);
20713                                 return (r === undefined || r === "") ? null : r;
20714                         };
20715                 } else {
20716                         this.getId = function(){return null;};
20717                 }
20718             this.ef = [];
20719             for(var jj = 0; jj < fl; jj++){
20720                 f = fi[jj];
20721                 var map = (f.mapping !== undefined && f.mapping !== null) ? f.mapping : f.name;
20722                 this.ef[jj] = this.getJsonAccessor(map);
20723             }
20724         }
20725
20726         var root = this.getRoot(o), c = root.length, totalRecords = c, success = true;
20727         if(s.totalProperty){
20728             var vt = parseInt(this.getTotal(o), 10);
20729             if(!isNaN(vt)){
20730                 totalRecords = vt;
20731             }
20732         }
20733         if(s.successProperty){
20734             var vs = this.getSuccess(o);
20735             if(vs === false || vs === 'false'){
20736                 success = false;
20737             }
20738         }
20739         var records = [];
20740             for(var i = 0; i < c; i++){
20741                     var n = root[i];
20742                 var values = {};
20743                 var id = this.getId(n);
20744                 for(var j = 0; j < fl; j++){
20745                     f = fi[j];
20746                 var v = this.ef[j](n);
20747                 if (!f.convert) {
20748                     Roo.log('missing convert for ' + f.name);
20749                     Roo.log(f);
20750                     continue;
20751                 }
20752                 values[f.name] = f.convert((v !== undefined) ? v : f.defaultValue);
20753                 }
20754                 var record = new Record(values, id);
20755                 record.json = n;
20756                 records[i] = record;
20757             }
20758             return {
20759                 success : success,
20760                 records : records,
20761                 totalRecords : totalRecords
20762             };
20763     }
20764 });/*
20765  * Based on:
20766  * Ext JS Library 1.1.1
20767  * Copyright(c) 2006-2007, Ext JS, LLC.
20768  *
20769  * Originally Released Under LGPL - original licence link has changed is not relivant.
20770  *
20771  * Fork - LGPL
20772  * <script type="text/javascript">
20773  */
20774
20775 /**
20776  * @class Roo.data.XmlReader
20777  * @extends Roo.data.DataReader
20778  * Data reader class to create an Array of {@link Roo.data.Record} objects from an XML document
20779  * based on mappings in a provided Roo.data.Record constructor.<br><br>
20780  * <p>
20781  * <em>Note that in order for the browser to parse a returned XML document, the Content-Type
20782  * header in the HTTP response must be set to "text/xml".</em>
20783  * <p>
20784  * Example code:
20785  * <pre><code>
20786 var RecordDef = Roo.data.Record.create([
20787    {name: 'name', mapping: 'name'},     // "mapping" property not needed if it's the same as "name"
20788    {name: 'occupation'}                 // This field will use "occupation" as the mapping.
20789 ]);
20790 var myReader = new Roo.data.XmlReader({
20791    totalRecords: "results", // The element which contains the total dataset size (optional)
20792    record: "row",           // The repeated element which contains row information
20793    id: "id"                 // The element within the row that provides an ID for the record (optional)
20794 }, RecordDef);
20795 </code></pre>
20796  * <p>
20797  * This would consume an XML file like this:
20798  * <pre><code>
20799 &lt;?xml?>
20800 &lt;dataset>
20801  &lt;results>2&lt;/results>
20802  &lt;row>
20803    &lt;id>1&lt;/id>
20804    &lt;name>Bill&lt;/name>
20805    &lt;occupation>Gardener&lt;/occupation>
20806  &lt;/row>
20807  &lt;row>
20808    &lt;id>2&lt;/id>
20809    &lt;name>Ben&lt;/name>
20810    &lt;occupation>Horticulturalist&lt;/occupation>
20811  &lt;/row>
20812 &lt;/dataset>
20813 </code></pre>
20814  * @cfg {String} totalRecords The DomQuery path from which to retrieve the total number of records
20815  * in the dataset. This is only needed if the whole dataset is not passed in one go, but is being
20816  * paged from the remote server.
20817  * @cfg {String} record The DomQuery path to the repeated element which contains record information.
20818  * @cfg {String} success The DomQuery path to the success attribute used by forms.
20819  * @cfg {String} id The DomQuery path relative from the record element to the element that contains
20820  * a record identifier value.
20821  * @constructor
20822  * Create a new XmlReader
20823  * @param {Object} meta Metadata configuration options
20824  * @param {Mixed} recordType The definition of the data record type to produce.  This can be either a valid
20825  * Record subclass created with {@link Roo.data.Record#create}, or an array of objects with which to call
20826  * Roo.data.Record.create.  See the {@link Roo.data.Record} class for more details.
20827  */
20828 Roo.data.XmlReader = function(meta, recordType){
20829     meta = meta || {};
20830     Roo.data.XmlReader.superclass.constructor.call(this, meta, recordType||meta.fields);
20831 };
20832 Roo.extend(Roo.data.XmlReader, Roo.data.DataReader, {
20833     /**
20834      * This method is only used by a DataProxy which has retrieved data from a remote server.
20835          * @param {Object} response The XHR object which contains the parsed XML document.  The response is expected
20836          * to contain a method called 'responseXML' that returns an XML document object.
20837      * @return {Object} records A data block which is used by an {@link Roo.data.Store} as
20838      * a cache of Roo.data.Records.
20839      */
20840     read : function(response){
20841         var doc = response.responseXML;
20842         if(!doc) {
20843             throw {message: "XmlReader.read: XML Document not available"};
20844         }
20845         return this.readRecords(doc);
20846     },
20847
20848     /**
20849      * Create a data block containing Roo.data.Records from an XML document.
20850          * @param {Object} doc A parsed XML document.
20851      * @return {Object} records A data block which is used by an {@link Roo.data.Store} as
20852      * a cache of Roo.data.Records.
20853      */
20854     readRecords : function(doc){
20855         /**
20856          * After any data loads/reads, the raw XML Document is available for further custom processing.
20857          * @type XMLDocument
20858          */
20859         this.xmlData = doc;
20860         var root = doc.documentElement || doc;
20861         var q = Roo.DomQuery;
20862         var recordType = this.recordType, fields = recordType.prototype.fields;
20863         var sid = this.meta.id;
20864         var totalRecords = 0, success = true;
20865         if(this.meta.totalRecords){
20866             totalRecords = q.selectNumber(this.meta.totalRecords, root, 0);
20867         }
20868         
20869         if(this.meta.success){
20870             var sv = q.selectValue(this.meta.success, root, true);
20871             success = sv !== false && sv !== 'false';
20872         }
20873         var records = [];
20874         var ns = q.select(this.meta.record, root);
20875         for(var i = 0, len = ns.length; i < len; i++) {
20876                 var n = ns[i];
20877                 var values = {};
20878                 var id = sid ? q.selectValue(sid, n) : undefined;
20879                 for(var j = 0, jlen = fields.length; j < jlen; j++){
20880                     var f = fields.items[j];
20881                 var v = q.selectValue(f.mapping || f.name, n, f.defaultValue);
20882                     v = f.convert(v);
20883                     values[f.name] = v;
20884                 }
20885                 var record = new recordType(values, id);
20886                 record.node = n;
20887                 records[records.length] = record;
20888             }
20889
20890             return {
20891                 success : success,
20892                 records : records,
20893                 totalRecords : totalRecords || records.length
20894             };
20895     }
20896 });/*
20897  * Based on:
20898  * Ext JS Library 1.1.1
20899  * Copyright(c) 2006-2007, Ext JS, LLC.
20900  *
20901  * Originally Released Under LGPL - original licence link has changed is not relivant.
20902  *
20903  * Fork - LGPL
20904  * <script type="text/javascript">
20905  */
20906
20907 /**
20908  * @class Roo.data.ArrayReader
20909  * @extends Roo.data.DataReader
20910  * Data reader class to create an Array of Roo.data.Record objects from an Array.
20911  * Each element of that Array represents a row of data fields. The
20912  * fields are pulled into a Record object using as a subscript, the <em>mapping</em> property
20913  * of the field definition if it exists, or the field's ordinal position in the definition.<br>
20914  * <p>
20915  * Example code:.
20916  * <pre><code>
20917 var RecordDef = Roo.data.Record.create([
20918     {name: 'name', mapping: 1},         // "mapping" only needed if an "id" field is present which
20919     {name: 'occupation', mapping: 2}    // precludes using the ordinal position as the index.
20920 ]);
20921 var myReader = new Roo.data.ArrayReader({
20922     id: 0                     // The subscript within row Array that provides an ID for the Record (optional)
20923 }, RecordDef);
20924 </code></pre>
20925  * <p>
20926  * This would consume an Array like this:
20927  * <pre><code>
20928 [ [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist'] ]
20929   </code></pre>
20930  * @cfg {String} id (optional) The subscript within row Array that provides an ID for the Record
20931  * @constructor
20932  * Create a new JsonReader
20933  * @param {Object} meta Metadata configuration options.
20934  * @param {Object} recordType Either an Array of field definition objects
20935  * as specified to {@link Roo.data.Record#create},
20936  * or an {@link Roo.data.Record} object
20937  * created using {@link Roo.data.Record#create}.
20938  */
20939 Roo.data.ArrayReader = function(meta, recordType){
20940     Roo.data.ArrayReader.superclass.constructor.call(this, meta, recordType);
20941 };
20942
20943 Roo.extend(Roo.data.ArrayReader, Roo.data.JsonReader, {
20944     /**
20945      * Create a data block containing Roo.data.Records from an XML document.
20946      * @param {Object} o An Array of row objects which represents the dataset.
20947      * @return {Object} data A data block which is used by an Roo.data.Store object as
20948      * a cache of Roo.data.Records.
20949      */
20950     readRecords : function(o){
20951         var sid = this.meta ? this.meta.id : null;
20952         var recordType = this.recordType, fields = recordType.prototype.fields;
20953         var records = [];
20954         var root = o;
20955             for(var i = 0; i < root.length; i++){
20956                     var n = root[i];
20957                 var values = {};
20958                 var id = ((sid || sid === 0) && n[sid] !== undefined && n[sid] !== "" ? n[sid] : null);
20959                 for(var j = 0, jlen = fields.length; j < jlen; j++){
20960                 var f = fields.items[j];
20961                 var k = f.mapping !== undefined && f.mapping !== null ? f.mapping : j;
20962                 var v = n[k] !== undefined ? n[k] : f.defaultValue;
20963                 v = f.convert(v);
20964                 values[f.name] = v;
20965             }
20966                 var record = new recordType(values, id);
20967                 record.json = n;
20968                 records[records.length] = record;
20969             }
20970             return {
20971                 records : records,
20972                 totalRecords : records.length
20973             };
20974     }
20975 });/*
20976  * Based on:
20977  * Ext JS Library 1.1.1
20978  * Copyright(c) 2006-2007, Ext JS, LLC.
20979  *
20980  * Originally Released Under LGPL - original licence link has changed is not relivant.
20981  *
20982  * Fork - LGPL
20983  * <script type="text/javascript">
20984  */
20985
20986
20987 /**
20988  * @class Roo.data.Tree
20989  * @extends Roo.util.Observable
20990  * Represents a tree data structure and bubbles all the events for its nodes. The nodes
20991  * in the tree have most standard DOM functionality.
20992  * @constructor
20993  * @param {Node} root (optional) The root node
20994  */
20995 Roo.data.Tree = function(root){
20996    this.nodeHash = {};
20997    /**
20998     * The root node for this tree
20999     * @type Node
21000     */
21001    this.root = null;
21002    if(root){
21003        this.setRootNode(root);
21004    }
21005    this.addEvents({
21006        /**
21007         * @event append
21008         * Fires when a new child node is appended to a node in this tree.
21009         * @param {Tree} tree The owner tree
21010         * @param {Node} parent The parent node
21011         * @param {Node} node The newly appended node
21012         * @param {Number} index The index of the newly appended node
21013         */
21014        "append" : true,
21015        /**
21016         * @event remove
21017         * Fires when a child node is removed from a node in this tree.
21018         * @param {Tree} tree The owner tree
21019         * @param {Node} parent The parent node
21020         * @param {Node} node The child node removed
21021         */
21022        "remove" : true,
21023        /**
21024         * @event move
21025         * Fires when a node is moved to a new location in the tree
21026         * @param {Tree} tree The owner tree
21027         * @param {Node} node The node moved
21028         * @param {Node} oldParent The old parent of this node
21029         * @param {Node} newParent The new parent of this node
21030         * @param {Number} index The index it was moved to
21031         */
21032        "move" : true,
21033        /**
21034         * @event insert
21035         * Fires when a new child node is inserted in a node in this tree.
21036         * @param {Tree} tree The owner tree
21037         * @param {Node} parent The parent node
21038         * @param {Node} node The child node inserted
21039         * @param {Node} refNode The child node the node was inserted before
21040         */
21041        "insert" : true,
21042        /**
21043         * @event beforeappend
21044         * Fires before a new child is appended to a node in this tree, return false to cancel the append.
21045         * @param {Tree} tree The owner tree
21046         * @param {Node} parent The parent node
21047         * @param {Node} node The child node to be appended
21048         */
21049        "beforeappend" : true,
21050        /**
21051         * @event beforeremove
21052         * Fires before a child is removed from a node in this tree, return false to cancel the remove.
21053         * @param {Tree} tree The owner tree
21054         * @param {Node} parent The parent node
21055         * @param {Node} node The child node to be removed
21056         */
21057        "beforeremove" : true,
21058        /**
21059         * @event beforemove
21060         * Fires before a node is moved to a new location in the tree. Return false to cancel the move.
21061         * @param {Tree} tree The owner tree
21062         * @param {Node} node The node being moved
21063         * @param {Node} oldParent The parent of the node
21064         * @param {Node} newParent The new parent the node is moving to
21065         * @param {Number} index The index it is being moved to
21066         */
21067        "beforemove" : true,
21068        /**
21069         * @event beforeinsert
21070         * Fires before a new child is inserted in a node in this tree, return false to cancel the insert.
21071         * @param {Tree} tree The owner tree
21072         * @param {Node} parent The parent node
21073         * @param {Node} node The child node to be inserted
21074         * @param {Node} refNode The child node the node is being inserted before
21075         */
21076        "beforeinsert" : true
21077    });
21078
21079     Roo.data.Tree.superclass.constructor.call(this);
21080 };
21081
21082 Roo.extend(Roo.data.Tree, Roo.util.Observable, {
21083     pathSeparator: "/",
21084
21085     proxyNodeEvent : function(){
21086         return this.fireEvent.apply(this, arguments);
21087     },
21088
21089     /**
21090      * Returns the root node for this tree.
21091      * @return {Node}
21092      */
21093     getRootNode : function(){
21094         return this.root;
21095     },
21096
21097     /**
21098      * Sets the root node for this tree.
21099      * @param {Node} node
21100      * @return {Node}
21101      */
21102     setRootNode : function(node){
21103         this.root = node;
21104         node.ownerTree = this;
21105         node.isRoot = true;
21106         this.registerNode(node);
21107         return node;
21108     },
21109
21110     /**
21111      * Gets a node in this tree by its id.
21112      * @param {String} id
21113      * @return {Node}
21114      */
21115     getNodeById : function(id){
21116         return this.nodeHash[id];
21117     },
21118
21119     registerNode : function(node){
21120         this.nodeHash[node.id] = node;
21121     },
21122
21123     unregisterNode : function(node){
21124         delete this.nodeHash[node.id];
21125     },
21126
21127     toString : function(){
21128         return "[Tree"+(this.id?" "+this.id:"")+"]";
21129     }
21130 });
21131
21132 /**
21133  * @class Roo.data.Node
21134  * @extends Roo.util.Observable
21135  * @cfg {Boolean} leaf true if this node is a leaf and does not have children
21136  * @cfg {String} id The id for this node. If one is not specified, one is generated.
21137  * @constructor
21138  * @param {Object} attributes The attributes/config for the node
21139  */
21140 Roo.data.Node = function(attributes){
21141     /**
21142      * The attributes supplied for the node. You can use this property to access any custom attributes you supplied.
21143      * @type {Object}
21144      */
21145     this.attributes = attributes || {};
21146     this.leaf = this.attributes.leaf;
21147     /**
21148      * The node id. @type String
21149      */
21150     this.id = this.attributes.id;
21151     if(!this.id){
21152         this.id = Roo.id(null, "ynode-");
21153         this.attributes.id = this.id;
21154     }
21155     /**
21156      * All child nodes of this node. @type Array
21157      */
21158     this.childNodes = [];
21159     if(!this.childNodes.indexOf){ // indexOf is a must
21160         this.childNodes.indexOf = function(o){
21161             for(var i = 0, len = this.length; i < len; i++){
21162                 if(this[i] == o) {
21163                     return i;
21164                 }
21165             }
21166             return -1;
21167         };
21168     }
21169     /**
21170      * The parent node for this node. @type Node
21171      */
21172     this.parentNode = null;
21173     /**
21174      * The first direct child node of this node, or null if this node has no child nodes. @type Node
21175      */
21176     this.firstChild = null;
21177     /**
21178      * The last direct child node of this node, or null if this node has no child nodes. @type Node
21179      */
21180     this.lastChild = null;
21181     /**
21182      * The node immediately preceding this node in the tree, or null if there is no sibling node. @type Node
21183      */
21184     this.previousSibling = null;
21185     /**
21186      * The node immediately following this node in the tree, or null if there is no sibling node. @type Node
21187      */
21188     this.nextSibling = null;
21189
21190     this.addEvents({
21191        /**
21192         * @event append
21193         * Fires when a new child node is appended
21194         * @param {Tree} tree The owner tree
21195         * @param {Node} this This node
21196         * @param {Node} node The newly appended node
21197         * @param {Number} index The index of the newly appended node
21198         */
21199        "append" : true,
21200        /**
21201         * @event remove
21202         * Fires when a child node is removed
21203         * @param {Tree} tree The owner tree
21204         * @param {Node} this This node
21205         * @param {Node} node The removed node
21206         */
21207        "remove" : true,
21208        /**
21209         * @event move
21210         * Fires when this node is moved to a new location in the tree
21211         * @param {Tree} tree The owner tree
21212         * @param {Node} this This node
21213         * @param {Node} oldParent The old parent of this node
21214         * @param {Node} newParent The new parent of this node
21215         * @param {Number} index The index it was moved to
21216         */
21217        "move" : true,
21218        /**
21219         * @event insert
21220         * Fires when a new child node is inserted.
21221         * @param {Tree} tree The owner tree
21222         * @param {Node} this This node
21223         * @param {Node} node The child node inserted
21224         * @param {Node} refNode The child node the node was inserted before
21225         */
21226        "insert" : true,
21227        /**
21228         * @event beforeappend
21229         * Fires before a new child is appended, return false to cancel the append.
21230         * @param {Tree} tree The owner tree
21231         * @param {Node} this This node
21232         * @param {Node} node The child node to be appended
21233         */
21234        "beforeappend" : true,
21235        /**
21236         * @event beforeremove
21237         * Fires before a child is removed, return false to cancel the remove.
21238         * @param {Tree} tree The owner tree
21239         * @param {Node} this This node
21240         * @param {Node} node The child node to be removed
21241         */
21242        "beforeremove" : true,
21243        /**
21244         * @event beforemove
21245         * Fires before this node is moved to a new location in the tree. Return false to cancel the move.
21246         * @param {Tree} tree The owner tree
21247         * @param {Node} this This node
21248         * @param {Node} oldParent The parent of this node
21249         * @param {Node} newParent The new parent this node is moving to
21250         * @param {Number} index The index it is being moved to
21251         */
21252        "beforemove" : true,
21253        /**
21254         * @event beforeinsert
21255         * Fires before a new child is inserted, return false to cancel the insert.
21256         * @param {Tree} tree The owner tree
21257         * @param {Node} this This node
21258         * @param {Node} node The child node to be inserted
21259         * @param {Node} refNode The child node the node is being inserted before
21260         */
21261        "beforeinsert" : true
21262    });
21263     this.listeners = this.attributes.listeners;
21264     Roo.data.Node.superclass.constructor.call(this);
21265 };
21266
21267 Roo.extend(Roo.data.Node, Roo.util.Observable, {
21268     fireEvent : function(evtName){
21269         // first do standard event for this node
21270         if(Roo.data.Node.superclass.fireEvent.apply(this, arguments) === false){
21271             return false;
21272         }
21273         // then bubble it up to the tree if the event wasn't cancelled
21274         var ot = this.getOwnerTree();
21275         if(ot){
21276             if(ot.proxyNodeEvent.apply(ot, arguments) === false){
21277                 return false;
21278             }
21279         }
21280         return true;
21281     },
21282
21283     /**
21284      * Returns true if this node is a leaf
21285      * @return {Boolean}
21286      */
21287     isLeaf : function(){
21288         return this.leaf === true;
21289     },
21290
21291     // private
21292     setFirstChild : function(node){
21293         this.firstChild = node;
21294     },
21295
21296     //private
21297     setLastChild : function(node){
21298         this.lastChild = node;
21299     },
21300
21301
21302     /**
21303      * Returns true if this node is the last child of its parent
21304      * @return {Boolean}
21305      */
21306     isLast : function(){
21307        return (!this.parentNode ? true : this.parentNode.lastChild == this);
21308     },
21309
21310     /**
21311      * Returns true if this node is the first child of its parent
21312      * @return {Boolean}
21313      */
21314     isFirst : function(){
21315        return (!this.parentNode ? true : this.parentNode.firstChild == this);
21316     },
21317
21318     hasChildNodes : function(){
21319         return !this.isLeaf() && this.childNodes.length > 0;
21320     },
21321
21322     /**
21323      * Insert node(s) as the last child node of this node.
21324      * @param {Node/Array} node The node or Array of nodes to append
21325      * @return {Node} The appended node if single append, or null if an array was passed
21326      */
21327     appendChild : function(node){
21328         var multi = false;
21329         if(node instanceof Array){
21330             multi = node;
21331         }else if(arguments.length > 1){
21332             multi = arguments;
21333         }
21334         // if passed an array or multiple args do them one by one
21335         if(multi){
21336             for(var i = 0, len = multi.length; i < len; i++) {
21337                 this.appendChild(multi[i]);
21338             }
21339         }else{
21340             if(this.fireEvent("beforeappend", this.ownerTree, this, node) === false){
21341                 return false;
21342             }
21343             var index = this.childNodes.length;
21344             var oldParent = node.parentNode;
21345             // it's a move, make sure we move it cleanly
21346             if(oldParent){
21347                 if(node.fireEvent("beforemove", node.getOwnerTree(), node, oldParent, this, index) === false){
21348                     return false;
21349                 }
21350                 oldParent.removeChild(node);
21351             }
21352             index = this.childNodes.length;
21353             if(index == 0){
21354                 this.setFirstChild(node);
21355             }
21356             this.childNodes.push(node);
21357             node.parentNode = this;
21358             var ps = this.childNodes[index-1];
21359             if(ps){
21360                 node.previousSibling = ps;
21361                 ps.nextSibling = node;
21362             }else{
21363                 node.previousSibling = null;
21364             }
21365             node.nextSibling = null;
21366             this.setLastChild(node);
21367             node.setOwnerTree(this.getOwnerTree());
21368             this.fireEvent("append", this.ownerTree, this, node, index);
21369             if(oldParent){
21370                 node.fireEvent("move", this.ownerTree, node, oldParent, this, index);
21371             }
21372             return node;
21373         }
21374     },
21375
21376     /**
21377      * Removes a child node from this node.
21378      * @param {Node} node The node to remove
21379      * @return {Node} The removed node
21380      */
21381     removeChild : function(node){
21382         var index = this.childNodes.indexOf(node);
21383         if(index == -1){
21384             return false;
21385         }
21386         if(this.fireEvent("beforeremove", this.ownerTree, this, node) === false){
21387             return false;
21388         }
21389
21390         // remove it from childNodes collection
21391         this.childNodes.splice(index, 1);
21392
21393         // update siblings
21394         if(node.previousSibling){
21395             node.previousSibling.nextSibling = node.nextSibling;
21396         }
21397         if(node.nextSibling){
21398             node.nextSibling.previousSibling = node.previousSibling;
21399         }
21400
21401         // update child refs
21402         if(this.firstChild == node){
21403             this.setFirstChild(node.nextSibling);
21404         }
21405         if(this.lastChild == node){
21406             this.setLastChild(node.previousSibling);
21407         }
21408
21409         node.setOwnerTree(null);
21410         // clear any references from the node
21411         node.parentNode = null;
21412         node.previousSibling = null;
21413         node.nextSibling = null;
21414         this.fireEvent("remove", this.ownerTree, this, node);
21415         return node;
21416     },
21417
21418     /**
21419      * Inserts the first node before the second node in this nodes childNodes collection.
21420      * @param {Node} node The node to insert
21421      * @param {Node} refNode The node to insert before (if null the node is appended)
21422      * @return {Node} The inserted node
21423      */
21424     insertBefore : function(node, refNode){
21425         if(!refNode){ // like standard Dom, refNode can be null for append
21426             return this.appendChild(node);
21427         }
21428         // nothing to do
21429         if(node == refNode){
21430             return false;
21431         }
21432
21433         if(this.fireEvent("beforeinsert", this.ownerTree, this, node, refNode) === false){
21434             return false;
21435         }
21436         var index = this.childNodes.indexOf(refNode);
21437         var oldParent = node.parentNode;
21438         var refIndex = index;
21439
21440         // when moving internally, indexes will change after remove
21441         if(oldParent == this && this.childNodes.indexOf(node) < index){
21442             refIndex--;
21443         }
21444
21445         // it's a move, make sure we move it cleanly
21446         if(oldParent){
21447             if(node.fireEvent("beforemove", node.getOwnerTree(), node, oldParent, this, index, refNode) === false){
21448                 return false;
21449             }
21450             oldParent.removeChild(node);
21451         }
21452         if(refIndex == 0){
21453             this.setFirstChild(node);
21454         }
21455         this.childNodes.splice(refIndex, 0, node);
21456         node.parentNode = this;
21457         var ps = this.childNodes[refIndex-1];
21458         if(ps){
21459             node.previousSibling = ps;
21460             ps.nextSibling = node;
21461         }else{
21462             node.previousSibling = null;
21463         }
21464         node.nextSibling = refNode;
21465         refNode.previousSibling = node;
21466         node.setOwnerTree(this.getOwnerTree());
21467         this.fireEvent("insert", this.ownerTree, this, node, refNode);
21468         if(oldParent){
21469             node.fireEvent("move", this.ownerTree, node, oldParent, this, refIndex, refNode);
21470         }
21471         return node;
21472     },
21473
21474     /**
21475      * Returns the child node at the specified index.
21476      * @param {Number} index
21477      * @return {Node}
21478      */
21479     item : function(index){
21480         return this.childNodes[index];
21481     },
21482
21483     /**
21484      * Replaces one child node in this node with another.
21485      * @param {Node} newChild The replacement node
21486      * @param {Node} oldChild The node to replace
21487      * @return {Node} The replaced node
21488      */
21489     replaceChild : function(newChild, oldChild){
21490         this.insertBefore(newChild, oldChild);
21491         this.removeChild(oldChild);
21492         return oldChild;
21493     },
21494
21495     /**
21496      * Returns the index of a child node
21497      * @param {Node} node
21498      * @return {Number} The index of the node or -1 if it was not found
21499      */
21500     indexOf : function(child){
21501         return this.childNodes.indexOf(child);
21502     },
21503
21504     /**
21505      * Returns the tree this node is in.
21506      * @return {Tree}
21507      */
21508     getOwnerTree : function(){
21509         // if it doesn't have one, look for one
21510         if(!this.ownerTree){
21511             var p = this;
21512             while(p){
21513                 if(p.ownerTree){
21514                     this.ownerTree = p.ownerTree;
21515                     break;
21516                 }
21517                 p = p.parentNode;
21518             }
21519         }
21520         return this.ownerTree;
21521     },
21522
21523     /**
21524      * Returns depth of this node (the root node has a depth of 0)
21525      * @return {Number}
21526      */
21527     getDepth : function(){
21528         var depth = 0;
21529         var p = this;
21530         while(p.parentNode){
21531             ++depth;
21532             p = p.parentNode;
21533         }
21534         return depth;
21535     },
21536
21537     // private
21538     setOwnerTree : function(tree){
21539         // if it's move, we need to update everyone
21540         if(tree != this.ownerTree){
21541             if(this.ownerTree){
21542                 this.ownerTree.unregisterNode(this);
21543             }
21544             this.ownerTree = tree;
21545             var cs = this.childNodes;
21546             for(var i = 0, len = cs.length; i < len; i++) {
21547                 cs[i].setOwnerTree(tree);
21548             }
21549             if(tree){
21550                 tree.registerNode(this);
21551             }
21552         }
21553     },
21554
21555     /**
21556      * Returns the path for this node. The path can be used to expand or select this node programmatically.
21557      * @param {String} attr (optional) The attr to use for the path (defaults to the node's id)
21558      * @return {String} The path
21559      */
21560     getPath : function(attr){
21561         attr = attr || "id";
21562         var p = this.parentNode;
21563         var b = [this.attributes[attr]];
21564         while(p){
21565             b.unshift(p.attributes[attr]);
21566             p = p.parentNode;
21567         }
21568         var sep = this.getOwnerTree().pathSeparator;
21569         return sep + b.join(sep);
21570     },
21571
21572     /**
21573      * Bubbles up the tree from this node, calling the specified function with each node. The scope (<i>this</i>) of
21574      * function call will be the scope provided or the current node. The arguments to the function
21575      * will be the args provided or the current node. If the function returns false at any point,
21576      * the bubble is stopped.
21577      * @param {Function} fn The function to call
21578      * @param {Object} scope (optional) The scope of the function (defaults to current node)
21579      * @param {Array} args (optional) The args to call the function with (default to passing the current node)
21580      */
21581     bubble : function(fn, scope, args){
21582         var p = this;
21583         while(p){
21584             if(fn.call(scope || p, args || p) === false){
21585                 break;
21586             }
21587             p = p.parentNode;
21588         }
21589     },
21590
21591     /**
21592      * Cascades down the tree from this node, calling the specified function with each node. The scope (<i>this</i>) of
21593      * function call will be the scope provided or the current node. The arguments to the function
21594      * will be the args provided or the current node. If the function returns false at any point,
21595      * the cascade is stopped on that branch.
21596      * @param {Function} fn The function to call
21597      * @param {Object} scope (optional) The scope of the function (defaults to current node)
21598      * @param {Array} args (optional) The args to call the function with (default to passing the current node)
21599      */
21600     cascade : function(fn, scope, args){
21601         if(fn.call(scope || this, args || this) !== false){
21602             var cs = this.childNodes;
21603             for(var i = 0, len = cs.length; i < len; i++) {
21604                 cs[i].cascade(fn, scope, args);
21605             }
21606         }
21607     },
21608
21609     /**
21610      * Interates the child nodes of this node, calling the specified function with each node. The scope (<i>this</i>) of
21611      * function call will be the scope provided or the current node. The arguments to the function
21612      * will be the args provided or the current node. If the function returns false at any point,
21613      * the iteration stops.
21614      * @param {Function} fn The function to call
21615      * @param {Object} scope (optional) The scope of the function (defaults to current node)
21616      * @param {Array} args (optional) The args to call the function with (default to passing the current node)
21617      */
21618     eachChild : function(fn, scope, args){
21619         var cs = this.childNodes;
21620         for(var i = 0, len = cs.length; i < len; i++) {
21621                 if(fn.call(scope || this, args || cs[i]) === false){
21622                     break;
21623                 }
21624         }
21625     },
21626
21627     /**
21628      * Finds the first child that has the attribute with the specified value.
21629      * @param {String} attribute The attribute name
21630      * @param {Mixed} value The value to search for
21631      * @return {Node} The found child or null if none was found
21632      */
21633     findChild : function(attribute, value){
21634         var cs = this.childNodes;
21635         for(var i = 0, len = cs.length; i < len; i++) {
21636                 if(cs[i].attributes[attribute] == value){
21637                     return cs[i];
21638                 }
21639         }
21640         return null;
21641     },
21642
21643     /**
21644      * Finds the first child by a custom function. The child matches if the function passed
21645      * returns true.
21646      * @param {Function} fn
21647      * @param {Object} scope (optional)
21648      * @return {Node} The found child or null if none was found
21649      */
21650     findChildBy : function(fn, scope){
21651         var cs = this.childNodes;
21652         for(var i = 0, len = cs.length; i < len; i++) {
21653                 if(fn.call(scope||cs[i], cs[i]) === true){
21654                     return cs[i];
21655                 }
21656         }
21657         return null;
21658     },
21659
21660     /**
21661      * Sorts this nodes children using the supplied sort function
21662      * @param {Function} fn
21663      * @param {Object} scope (optional)
21664      */
21665     sort : function(fn, scope){
21666         var cs = this.childNodes;
21667         var len = cs.length;
21668         if(len > 0){
21669             var sortFn = scope ? function(){fn.apply(scope, arguments);} : fn;
21670             cs.sort(sortFn);
21671             for(var i = 0; i < len; i++){
21672                 var n = cs[i];
21673                 n.previousSibling = cs[i-1];
21674                 n.nextSibling = cs[i+1];
21675                 if(i == 0){
21676                     this.setFirstChild(n);
21677                 }
21678                 if(i == len-1){
21679                     this.setLastChild(n);
21680                 }
21681             }
21682         }
21683     },
21684
21685     /**
21686      * Returns true if this node is an ancestor (at any point) of the passed node.
21687      * @param {Node} node
21688      * @return {Boolean}
21689      */
21690     contains : function(node){
21691         return node.isAncestor(this);
21692     },
21693
21694     /**
21695      * Returns true if the passed node is an ancestor (at any point) of this node.
21696      * @param {Node} node
21697      * @return {Boolean}
21698      */
21699     isAncestor : function(node){
21700         var p = this.parentNode;
21701         while(p){
21702             if(p == node){
21703                 return true;
21704             }
21705             p = p.parentNode;
21706         }
21707         return false;
21708     },
21709
21710     toString : function(){
21711         return "[Node"+(this.id?" "+this.id:"")+"]";
21712     }
21713 });/*
21714  * Based on:
21715  * Ext JS Library 1.1.1
21716  * Copyright(c) 2006-2007, Ext JS, LLC.
21717  *
21718  * Originally Released Under LGPL - original licence link has changed is not relivant.
21719  *
21720  * Fork - LGPL
21721  * <script type="text/javascript">
21722  */
21723  
21724
21725 /**
21726  * @class Roo.ComponentMgr
21727  * Provides a common registry of all components on a page so that they can be easily accessed by component id (see {@link Roo.getCmp}).
21728  * @singleton
21729  */
21730 Roo.ComponentMgr = function(){
21731     var all = new Roo.util.MixedCollection();
21732
21733     return {
21734         /**
21735          * Registers a component.
21736          * @param {Roo.Component} c The component
21737          */
21738         register : function(c){
21739             all.add(c);
21740         },
21741
21742         /**
21743          * Unregisters a component.
21744          * @param {Roo.Component} c The component
21745          */
21746         unregister : function(c){
21747             all.remove(c);
21748         },
21749
21750         /**
21751          * Returns a component by id
21752          * @param {String} id The component id
21753          */
21754         get : function(id){
21755             return all.get(id);
21756         },
21757
21758         /**
21759          * Registers a function that will be called when a specified component is added to ComponentMgr
21760          * @param {String} id The component id
21761          * @param {Funtction} fn The callback function
21762          * @param {Object} scope The scope of the callback
21763          */
21764         onAvailable : function(id, fn, scope){
21765             all.on("add", function(index, o){
21766                 if(o.id == id){
21767                     fn.call(scope || o, o);
21768                     all.un("add", fn, scope);
21769                 }
21770             });
21771         }
21772     };
21773 }();/*
21774  * Based on:
21775  * Ext JS Library 1.1.1
21776  * Copyright(c) 2006-2007, Ext JS, LLC.
21777  *
21778  * Originally Released Under LGPL - original licence link has changed is not relivant.
21779  *
21780  * Fork - LGPL
21781  * <script type="text/javascript">
21782  */
21783  
21784 /**
21785  * @class Roo.Component
21786  * @extends Roo.util.Observable
21787  * Base class for all major Roo components.  All subclasses of Component can automatically participate in the standard
21788  * Roo component lifecycle of creation, rendering and destruction.  They also have automatic support for basic hide/show
21789  * and enable/disable behavior.  Component allows any subclass to be lazy-rendered into any {@link Roo.Container} and
21790  * to be automatically registered with the {@link Roo.ComponentMgr} so that it can be referenced at any time via {@link Roo.getCmp}.
21791  * All visual components (widgets) that require rendering into a layout should subclass Component.
21792  * @constructor
21793  * @param {Roo.Element/String/Object} config The configuration options.  If an element is passed, it is set as the internal
21794  * 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
21795  * and is used as the component id.  Otherwise, it is assumed to be a standard config object and is applied to the component.
21796  */
21797 Roo.Component = function(config){
21798     config = config || {};
21799     if(config.tagName || config.dom || typeof config == "string"){ // element object
21800         config = {el: config, id: config.id || config};
21801     }
21802     this.initialConfig = config;
21803
21804     Roo.apply(this, config);
21805     this.addEvents({
21806         /**
21807          * @event disable
21808          * Fires after the component is disabled.
21809              * @param {Roo.Component} this
21810              */
21811         disable : true,
21812         /**
21813          * @event enable
21814          * Fires after the component is enabled.
21815              * @param {Roo.Component} this
21816              */
21817         enable : true,
21818         /**
21819          * @event beforeshow
21820          * Fires before the component is shown.  Return false to stop the show.
21821              * @param {Roo.Component} this
21822              */
21823         beforeshow : true,
21824         /**
21825          * @event show
21826          * Fires after the component is shown.
21827              * @param {Roo.Component} this
21828              */
21829         show : true,
21830         /**
21831          * @event beforehide
21832          * Fires before the component is hidden. Return false to stop the hide.
21833              * @param {Roo.Component} this
21834              */
21835         beforehide : true,
21836         /**
21837          * @event hide
21838          * Fires after the component is hidden.
21839              * @param {Roo.Component} this
21840              */
21841         hide : true,
21842         /**
21843          * @event beforerender
21844          * Fires before the component is rendered. Return false to stop the render.
21845              * @param {Roo.Component} this
21846              */
21847         beforerender : true,
21848         /**
21849          * @event render
21850          * Fires after the component is rendered.
21851              * @param {Roo.Component} this
21852              */
21853         render : true,
21854         /**
21855          * @event beforedestroy
21856          * Fires before the component is destroyed. Return false to stop the destroy.
21857              * @param {Roo.Component} this
21858              */
21859         beforedestroy : true,
21860         /**
21861          * @event destroy
21862          * Fires after the component is destroyed.
21863              * @param {Roo.Component} this
21864              */
21865         destroy : true
21866     });
21867     if(!this.id){
21868         this.id = "ext-comp-" + (++Roo.Component.AUTO_ID);
21869     }
21870     Roo.ComponentMgr.register(this);
21871     Roo.Component.superclass.constructor.call(this);
21872     this.initComponent();
21873     if(this.renderTo){ // not supported by all components yet. use at your own risk!
21874         this.render(this.renderTo);
21875         delete this.renderTo;
21876     }
21877 };
21878
21879 /** @private */
21880 Roo.Component.AUTO_ID = 1000;
21881
21882 Roo.extend(Roo.Component, Roo.util.Observable, {
21883     /**
21884      * @scope Roo.Component.prototype
21885      * @type {Boolean}
21886      * true if this component is hidden. Read-only.
21887      */
21888     hidden : false,
21889     /**
21890      * @type {Boolean}
21891      * true if this component is disabled. Read-only.
21892      */
21893     disabled : false,
21894     /**
21895      * @type {Boolean}
21896      * true if this component has been rendered. Read-only.
21897      */
21898     rendered : false,
21899     
21900     /** @cfg {String} disableClass
21901      * CSS class added to the component when it is disabled (defaults to "x-item-disabled").
21902      */
21903     disabledClass : "x-item-disabled",
21904         /** @cfg {Boolean} allowDomMove
21905          * Whether the component can move the Dom node when rendering (defaults to true).
21906          */
21907     allowDomMove : true,
21908     /** @cfg {String} hideMode
21909      * How this component should hidden. Supported values are
21910      * "visibility" (css visibility), "offsets" (negative offset position) and
21911      * "display" (css display) - defaults to "display".
21912      */
21913     hideMode: 'display',
21914
21915     /** @private */
21916     ctype : "Roo.Component",
21917
21918     /**
21919      * @cfg {String} actionMode 
21920      * which property holds the element that used for  hide() / show() / disable() / enable()
21921      * default is 'el' 
21922      */
21923     actionMode : "el",
21924
21925     /** @private */
21926     getActionEl : function(){
21927         return this[this.actionMode];
21928     },
21929
21930     initComponent : Roo.emptyFn,
21931     /**
21932      * If this is a lazy rendering component, render it to its container element.
21933      * @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.
21934      */
21935     render : function(container, position){
21936         if(!this.rendered && this.fireEvent("beforerender", this) !== false){
21937             if(!container && this.el){
21938                 this.el = Roo.get(this.el);
21939                 container = this.el.dom.parentNode;
21940                 this.allowDomMove = false;
21941             }
21942             this.container = Roo.get(container);
21943             this.rendered = true;
21944             if(position !== undefined){
21945                 if(typeof position == 'number'){
21946                     position = this.container.dom.childNodes[position];
21947                 }else{
21948                     position = Roo.getDom(position);
21949                 }
21950             }
21951             this.onRender(this.container, position || null);
21952             if(this.cls){
21953                 this.el.addClass(this.cls);
21954                 delete this.cls;
21955             }
21956             if(this.style){
21957                 this.el.applyStyles(this.style);
21958                 delete this.style;
21959             }
21960             this.fireEvent("render", this);
21961             this.afterRender(this.container);
21962             if(this.hidden){
21963                 this.hide();
21964             }
21965             if(this.disabled){
21966                 this.disable();
21967             }
21968         }
21969         return this;
21970     },
21971
21972     /** @private */
21973     // default function is not really useful
21974     onRender : function(ct, position){
21975         if(this.el){
21976             this.el = Roo.get(this.el);
21977             if(this.allowDomMove !== false){
21978                 ct.dom.insertBefore(this.el.dom, position);
21979             }
21980         }
21981     },
21982
21983     /** @private */
21984     getAutoCreate : function(){
21985         var cfg = typeof this.autoCreate == "object" ?
21986                       this.autoCreate : Roo.apply({}, this.defaultAutoCreate);
21987         if(this.id && !cfg.id){
21988             cfg.id = this.id;
21989         }
21990         return cfg;
21991     },
21992
21993     /** @private */
21994     afterRender : Roo.emptyFn,
21995
21996     /**
21997      * Destroys this component by purging any event listeners, removing the component's element from the DOM,
21998      * removing the component from its {@link Roo.Container} (if applicable) and unregistering it from {@link Roo.ComponentMgr}.
21999      */
22000     destroy : function(){
22001         if(this.fireEvent("beforedestroy", this) !== false){
22002             this.purgeListeners();
22003             this.beforeDestroy();
22004             if(this.rendered){
22005                 this.el.removeAllListeners();
22006                 this.el.remove();
22007                 if(this.actionMode == "container"){
22008                     this.container.remove();
22009                 }
22010             }
22011             this.onDestroy();
22012             Roo.ComponentMgr.unregister(this);
22013             this.fireEvent("destroy", this);
22014         }
22015     },
22016
22017         /** @private */
22018     beforeDestroy : function(){
22019
22020     },
22021
22022         /** @private */
22023         onDestroy : function(){
22024
22025     },
22026
22027     /**
22028      * Returns the underlying {@link Roo.Element}.
22029      * @return {Roo.Element} The element
22030      */
22031     getEl : function(){
22032         return this.el;
22033     },
22034
22035     /**
22036      * Returns the id of this component.
22037      * @return {String}
22038      */
22039     getId : function(){
22040         return this.id;
22041     },
22042
22043     /**
22044      * Try to focus this component.
22045      * @param {Boolean} selectText True to also select the text in this component (if applicable)
22046      * @return {Roo.Component} this
22047      */
22048     focus : function(selectText){
22049         if(this.rendered){
22050             this.el.focus();
22051             if(selectText === true){
22052                 this.el.dom.select();
22053             }
22054         }
22055         return this;
22056     },
22057
22058     /** @private */
22059     blur : function(){
22060         if(this.rendered){
22061             this.el.blur();
22062         }
22063         return this;
22064     },
22065
22066     /**
22067      * Disable this component.
22068      * @return {Roo.Component} this
22069      */
22070     disable : function(){
22071         if(this.rendered){
22072             this.onDisable();
22073         }
22074         this.disabled = true;
22075         this.fireEvent("disable", this);
22076         return this;
22077     },
22078
22079         // private
22080     onDisable : function(){
22081         this.getActionEl().addClass(this.disabledClass);
22082         this.el.dom.disabled = true;
22083     },
22084
22085     /**
22086      * Enable this component.
22087      * @return {Roo.Component} this
22088      */
22089     enable : function(){
22090         if(this.rendered){
22091             this.onEnable();
22092         }
22093         this.disabled = false;
22094         this.fireEvent("enable", this);
22095         return this;
22096     },
22097
22098         // private
22099     onEnable : function(){
22100         this.getActionEl().removeClass(this.disabledClass);
22101         this.el.dom.disabled = false;
22102     },
22103
22104     /**
22105      * Convenience function for setting disabled/enabled by boolean.
22106      * @param {Boolean} disabled
22107      */
22108     setDisabled : function(disabled){
22109         this[disabled ? "disable" : "enable"]();
22110     },
22111
22112     /**
22113      * Show this component.
22114      * @return {Roo.Component} this
22115      */
22116     show: function(){
22117         if(this.fireEvent("beforeshow", this) !== false){
22118             this.hidden = false;
22119             if(this.rendered){
22120                 this.onShow();
22121             }
22122             this.fireEvent("show", this);
22123         }
22124         return this;
22125     },
22126
22127     // private
22128     onShow : function(){
22129         var ae = this.getActionEl();
22130         if(this.hideMode == 'visibility'){
22131             ae.dom.style.visibility = "visible";
22132         }else if(this.hideMode == 'offsets'){
22133             ae.removeClass('x-hidden');
22134         }else{
22135             ae.dom.style.display = "";
22136         }
22137     },
22138
22139     /**
22140      * Hide this component.
22141      * @return {Roo.Component} this
22142      */
22143     hide: function(){
22144         if(this.fireEvent("beforehide", this) !== false){
22145             this.hidden = true;
22146             if(this.rendered){
22147                 this.onHide();
22148             }
22149             this.fireEvent("hide", this);
22150         }
22151         return this;
22152     },
22153
22154     // private
22155     onHide : function(){
22156         var ae = this.getActionEl();
22157         if(this.hideMode == 'visibility'){
22158             ae.dom.style.visibility = "hidden";
22159         }else if(this.hideMode == 'offsets'){
22160             ae.addClass('x-hidden');
22161         }else{
22162             ae.dom.style.display = "none";
22163         }
22164     },
22165
22166     /**
22167      * Convenience function to hide or show this component by boolean.
22168      * @param {Boolean} visible True to show, false to hide
22169      * @return {Roo.Component} this
22170      */
22171     setVisible: function(visible){
22172         if(visible) {
22173             this.show();
22174         }else{
22175             this.hide();
22176         }
22177         return this;
22178     },
22179
22180     /**
22181      * Returns true if this component is visible.
22182      */
22183     isVisible : function(){
22184         return this.getActionEl().isVisible();
22185     },
22186
22187     cloneConfig : function(overrides){
22188         overrides = overrides || {};
22189         var id = overrides.id || Roo.id();
22190         var cfg = Roo.applyIf(overrides, this.initialConfig);
22191         cfg.id = id; // prevent dup id
22192         return new this.constructor(cfg);
22193     }
22194 });/*
22195  * Based on:
22196  * Ext JS Library 1.1.1
22197  * Copyright(c) 2006-2007, Ext JS, LLC.
22198  *
22199  * Originally Released Under LGPL - original licence link has changed is not relivant.
22200  *
22201  * Fork - LGPL
22202  * <script type="text/javascript">
22203  */
22204  (function(){ 
22205 /**
22206  * @class Roo.Layer
22207  * @extends Roo.Element
22208  * An extended {@link Roo.Element} object that supports a shadow and shim, constrain to viewport and
22209  * automatic maintaining of shadow/shim positions.
22210  * @cfg {Boolean} shim False to disable the iframe shim in browsers which need one (defaults to true)
22211  * @cfg {String/Boolean} shadow True to create a shadow element with default class "x-layer-shadow", or
22212  * you can pass a string with a CSS class name. False turns off the shadow.
22213  * @cfg {Object} dh DomHelper object config to create element with (defaults to {tag: "div", cls: "x-layer"}).
22214  * @cfg {Boolean} constrain False to disable constrain to viewport (defaults to true)
22215  * @cfg {String} cls CSS class to add to the element
22216  * @cfg {Number} zindex Starting z-index (defaults to 11000)
22217  * @cfg {Number} shadowOffset Number of pixels to offset the shadow (defaults to 3)
22218  * @constructor
22219  * @param {Object} config An object with config options.
22220  * @param {String/HTMLElement} existingEl (optional) Uses an existing DOM element. If the element is not found it creates it.
22221  */
22222
22223 Roo.Layer = function(config, existingEl){
22224     config = config || {};
22225     var dh = Roo.DomHelper;
22226     var cp = config.parentEl, pel = cp ? Roo.getDom(cp) : document.body;
22227     if(existingEl){
22228         this.dom = Roo.getDom(existingEl);
22229     }
22230     if(!this.dom){
22231         var o = config.dh || {tag: "div", cls: "x-layer"};
22232         this.dom = dh.append(pel, o);
22233     }
22234     if(config.cls){
22235         this.addClass(config.cls);
22236     }
22237     this.constrain = config.constrain !== false;
22238     this.visibilityMode = Roo.Element.VISIBILITY;
22239     if(config.id){
22240         this.id = this.dom.id = config.id;
22241     }else{
22242         this.id = Roo.id(this.dom);
22243     }
22244     this.zindex = config.zindex || this.getZIndex();
22245     this.position("absolute", this.zindex);
22246     if(config.shadow){
22247         this.shadowOffset = config.shadowOffset || 4;
22248         this.shadow = new Roo.Shadow({
22249             offset : this.shadowOffset,
22250             mode : config.shadow
22251         });
22252     }else{
22253         this.shadowOffset = 0;
22254     }
22255     this.useShim = config.shim !== false && Roo.useShims;
22256     this.useDisplay = config.useDisplay;
22257     this.hide();
22258 };
22259
22260 var supr = Roo.Element.prototype;
22261
22262 // shims are shared among layer to keep from having 100 iframes
22263 var shims = [];
22264
22265 Roo.extend(Roo.Layer, Roo.Element, {
22266
22267     getZIndex : function(){
22268         return this.zindex || parseInt(this.getStyle("z-index"), 10) || 11000;
22269     },
22270
22271     getShim : function(){
22272         if(!this.useShim){
22273             return null;
22274         }
22275         if(this.shim){
22276             return this.shim;
22277         }
22278         var shim = shims.shift();
22279         if(!shim){
22280             shim = this.createShim();
22281             shim.enableDisplayMode('block');
22282             shim.dom.style.display = 'none';
22283             shim.dom.style.visibility = 'visible';
22284         }
22285         var pn = this.dom.parentNode;
22286         if(shim.dom.parentNode != pn){
22287             pn.insertBefore(shim.dom, this.dom);
22288         }
22289         shim.setStyle('z-index', this.getZIndex()-2);
22290         this.shim = shim;
22291         return shim;
22292     },
22293
22294     hideShim : function(){
22295         if(this.shim){
22296             this.shim.setDisplayed(false);
22297             shims.push(this.shim);
22298             delete this.shim;
22299         }
22300     },
22301
22302     disableShadow : function(){
22303         if(this.shadow){
22304             this.shadowDisabled = true;
22305             this.shadow.hide();
22306             this.lastShadowOffset = this.shadowOffset;
22307             this.shadowOffset = 0;
22308         }
22309     },
22310
22311     enableShadow : function(show){
22312         if(this.shadow){
22313             this.shadowDisabled = false;
22314             this.shadowOffset = this.lastShadowOffset;
22315             delete this.lastShadowOffset;
22316             if(show){
22317                 this.sync(true);
22318             }
22319         }
22320     },
22321
22322     // private
22323     // this code can execute repeatedly in milliseconds (i.e. during a drag) so
22324     // code size was sacrificed for effeciency (e.g. no getBox/setBox, no XY calls)
22325     sync : function(doShow){
22326         var sw = this.shadow;
22327         if(!this.updating && this.isVisible() && (sw || this.useShim)){
22328             var sh = this.getShim();
22329
22330             var w = this.getWidth(),
22331                 h = this.getHeight();
22332
22333             var l = this.getLeft(true),
22334                 t = this.getTop(true);
22335
22336             if(sw && !this.shadowDisabled){
22337                 if(doShow && !sw.isVisible()){
22338                     sw.show(this);
22339                 }else{
22340                     sw.realign(l, t, w, h);
22341                 }
22342                 if(sh){
22343                     if(doShow){
22344                        sh.show();
22345                     }
22346                     // fit the shim behind the shadow, so it is shimmed too
22347                     var a = sw.adjusts, s = sh.dom.style;
22348                     s.left = (Math.min(l, l+a.l))+"px";
22349                     s.top = (Math.min(t, t+a.t))+"px";
22350                     s.width = (w+a.w)+"px";
22351                     s.height = (h+a.h)+"px";
22352                 }
22353             }else if(sh){
22354                 if(doShow){
22355                    sh.show();
22356                 }
22357                 sh.setSize(w, h);
22358                 sh.setLeftTop(l, t);
22359             }
22360             
22361         }
22362     },
22363
22364     // private
22365     destroy : function(){
22366         this.hideShim();
22367         if(this.shadow){
22368             this.shadow.hide();
22369         }
22370         this.removeAllListeners();
22371         var pn = this.dom.parentNode;
22372         if(pn){
22373             pn.removeChild(this.dom);
22374         }
22375         Roo.Element.uncache(this.id);
22376     },
22377
22378     remove : function(){
22379         this.destroy();
22380     },
22381
22382     // private
22383     beginUpdate : function(){
22384         this.updating = true;
22385     },
22386
22387     // private
22388     endUpdate : function(){
22389         this.updating = false;
22390         this.sync(true);
22391     },
22392
22393     // private
22394     hideUnders : function(negOffset){
22395         if(this.shadow){
22396             this.shadow.hide();
22397         }
22398         this.hideShim();
22399     },
22400
22401     // private
22402     constrainXY : function(){
22403         if(this.constrain){
22404             var vw = Roo.lib.Dom.getViewWidth(),
22405                 vh = Roo.lib.Dom.getViewHeight();
22406             var s = Roo.get(document).getScroll();
22407
22408             var xy = this.getXY();
22409             var x = xy[0], y = xy[1];   
22410             var w = this.dom.offsetWidth+this.shadowOffset, h = this.dom.offsetHeight+this.shadowOffset;
22411             // only move it if it needs it
22412             var moved = false;
22413             // first validate right/bottom
22414             if((x + w) > vw+s.left){
22415                 x = vw - w - this.shadowOffset;
22416                 moved = true;
22417             }
22418             if((y + h) > vh+s.top){
22419                 y = vh - h - this.shadowOffset;
22420                 moved = true;
22421             }
22422             // then make sure top/left isn't negative
22423             if(x < s.left){
22424                 x = s.left;
22425                 moved = true;
22426             }
22427             if(y < s.top){
22428                 y = s.top;
22429                 moved = true;
22430             }
22431             if(moved){
22432                 if(this.avoidY){
22433                     var ay = this.avoidY;
22434                     if(y <= ay && (y+h) >= ay){
22435                         y = ay-h-5;   
22436                     }
22437                 }
22438                 xy = [x, y];
22439                 this.storeXY(xy);
22440                 supr.setXY.call(this, xy);
22441                 this.sync();
22442             }
22443         }
22444     },
22445
22446     isVisible : function(){
22447         return this.visible;    
22448     },
22449
22450     // private
22451     showAction : function(){
22452         this.visible = true; // track visibility to prevent getStyle calls
22453         if(this.useDisplay === true){
22454             this.setDisplayed("");
22455         }else if(this.lastXY){
22456             supr.setXY.call(this, this.lastXY);
22457         }else if(this.lastLT){
22458             supr.setLeftTop.call(this, this.lastLT[0], this.lastLT[1]);
22459         }
22460     },
22461
22462     // private
22463     hideAction : function(){
22464         this.visible = false;
22465         if(this.useDisplay === true){
22466             this.setDisplayed(false);
22467         }else{
22468             this.setLeftTop(-10000,-10000);
22469         }
22470     },
22471
22472     // overridden Element method
22473     setVisible : function(v, a, d, c, e){
22474         if(v){
22475             this.showAction();
22476         }
22477         if(a && v){
22478             var cb = function(){
22479                 this.sync(true);
22480                 if(c){
22481                     c();
22482                 }
22483             }.createDelegate(this);
22484             supr.setVisible.call(this, true, true, d, cb, e);
22485         }else{
22486             if(!v){
22487                 this.hideUnders(true);
22488             }
22489             var cb = c;
22490             if(a){
22491                 cb = function(){
22492                     this.hideAction();
22493                     if(c){
22494                         c();
22495                     }
22496                 }.createDelegate(this);
22497             }
22498             supr.setVisible.call(this, v, a, d, cb, e);
22499             if(v){
22500                 this.sync(true);
22501             }else if(!a){
22502                 this.hideAction();
22503             }
22504         }
22505     },
22506
22507     storeXY : function(xy){
22508         delete this.lastLT;
22509         this.lastXY = xy;
22510     },
22511
22512     storeLeftTop : function(left, top){
22513         delete this.lastXY;
22514         this.lastLT = [left, top];
22515     },
22516
22517     // private
22518     beforeFx : function(){
22519         this.beforeAction();
22520         return Roo.Layer.superclass.beforeFx.apply(this, arguments);
22521     },
22522
22523     // private
22524     afterFx : function(){
22525         Roo.Layer.superclass.afterFx.apply(this, arguments);
22526         this.sync(this.isVisible());
22527     },
22528
22529     // private
22530     beforeAction : function(){
22531         if(!this.updating && this.shadow){
22532             this.shadow.hide();
22533         }
22534     },
22535
22536     // overridden Element method
22537     setLeft : function(left){
22538         this.storeLeftTop(left, this.getTop(true));
22539         supr.setLeft.apply(this, arguments);
22540         this.sync();
22541     },
22542
22543     setTop : function(top){
22544         this.storeLeftTop(this.getLeft(true), top);
22545         supr.setTop.apply(this, arguments);
22546         this.sync();
22547     },
22548
22549     setLeftTop : function(left, top){
22550         this.storeLeftTop(left, top);
22551         supr.setLeftTop.apply(this, arguments);
22552         this.sync();
22553     },
22554
22555     setXY : function(xy, a, d, c, e){
22556         this.fixDisplay();
22557         this.beforeAction();
22558         this.storeXY(xy);
22559         var cb = this.createCB(c);
22560         supr.setXY.call(this, xy, a, d, cb, e);
22561         if(!a){
22562             cb();
22563         }
22564     },
22565
22566     // private
22567     createCB : function(c){
22568         var el = this;
22569         return function(){
22570             el.constrainXY();
22571             el.sync(true);
22572             if(c){
22573                 c();
22574             }
22575         };
22576     },
22577
22578     // overridden Element method
22579     setX : function(x, a, d, c, e){
22580         this.setXY([x, this.getY()], a, d, c, e);
22581     },
22582
22583     // overridden Element method
22584     setY : function(y, a, d, c, e){
22585         this.setXY([this.getX(), y], a, d, c, e);
22586     },
22587
22588     // overridden Element method
22589     setSize : function(w, h, a, d, c, e){
22590         this.beforeAction();
22591         var cb = this.createCB(c);
22592         supr.setSize.call(this, w, h, a, d, cb, e);
22593         if(!a){
22594             cb();
22595         }
22596     },
22597
22598     // overridden Element method
22599     setWidth : function(w, a, d, c, e){
22600         this.beforeAction();
22601         var cb = this.createCB(c);
22602         supr.setWidth.call(this, w, a, d, cb, e);
22603         if(!a){
22604             cb();
22605         }
22606     },
22607
22608     // overridden Element method
22609     setHeight : function(h, a, d, c, e){
22610         this.beforeAction();
22611         var cb = this.createCB(c);
22612         supr.setHeight.call(this, h, a, d, cb, e);
22613         if(!a){
22614             cb();
22615         }
22616     },
22617
22618     // overridden Element method
22619     setBounds : function(x, y, w, h, a, d, c, e){
22620         this.beforeAction();
22621         var cb = this.createCB(c);
22622         if(!a){
22623             this.storeXY([x, y]);
22624             supr.setXY.call(this, [x, y]);
22625             supr.setSize.call(this, w, h, a, d, cb, e);
22626             cb();
22627         }else{
22628             supr.setBounds.call(this, x, y, w, h, a, d, cb, e);
22629         }
22630         return this;
22631     },
22632     
22633     /**
22634      * Sets the z-index of this layer and adjusts any shadow and shim z-indexes. The layer z-index is automatically
22635      * incremented by two more than the value passed in so that it always shows above any shadow or shim (the shadow
22636      * element, if any, will be assigned z-index + 1, and the shim element, if any, will be assigned the unmodified z-index).
22637      * @param {Number} zindex The new z-index to set
22638      * @return {this} The Layer
22639      */
22640     setZIndex : function(zindex){
22641         this.zindex = zindex;
22642         this.setStyle("z-index", zindex + 2);
22643         if(this.shadow){
22644             this.shadow.setZIndex(zindex + 1);
22645         }
22646         if(this.shim){
22647             this.shim.setStyle("z-index", zindex);
22648         }
22649     }
22650 });
22651 })();/*
22652  * Based on:
22653  * Ext JS Library 1.1.1
22654  * Copyright(c) 2006-2007, Ext JS, LLC.
22655  *
22656  * Originally Released Under LGPL - original licence link has changed is not relivant.
22657  *
22658  * Fork - LGPL
22659  * <script type="text/javascript">
22660  */
22661
22662
22663 /**
22664  * @class Roo.Shadow
22665  * Simple class that can provide a shadow effect for any element.  Note that the element MUST be absolutely positioned,
22666  * and the shadow does not provide any shimming.  This should be used only in simple cases -- for more advanced
22667  * functionality that can also provide the same shadow effect, see the {@link Roo.Layer} class.
22668  * @constructor
22669  * Create a new Shadow
22670  * @param {Object} config The config object
22671  */
22672 Roo.Shadow = function(config){
22673     Roo.apply(this, config);
22674     if(typeof this.mode != "string"){
22675         this.mode = this.defaultMode;
22676     }
22677     var o = this.offset, a = {h: 0};
22678     var rad = Math.floor(this.offset/2);
22679     switch(this.mode.toLowerCase()){ // all this hideous nonsense calculates the various offsets for shadows
22680         case "drop":
22681             a.w = 0;
22682             a.l = a.t = o;
22683             a.t -= 1;
22684             if(Roo.isIE){
22685                 a.l -= this.offset + rad;
22686                 a.t -= this.offset + rad;
22687                 a.w -= rad;
22688                 a.h -= rad;
22689                 a.t += 1;
22690             }
22691         break;
22692         case "sides":
22693             a.w = (o*2);
22694             a.l = -o;
22695             a.t = o-1;
22696             if(Roo.isIE){
22697                 a.l -= (this.offset - rad);
22698                 a.t -= this.offset + rad;
22699                 a.l += 1;
22700                 a.w -= (this.offset - rad)*2;
22701                 a.w -= rad + 1;
22702                 a.h -= 1;
22703             }
22704         break;
22705         case "frame":
22706             a.w = a.h = (o*2);
22707             a.l = a.t = -o;
22708             a.t += 1;
22709             a.h -= 2;
22710             if(Roo.isIE){
22711                 a.l -= (this.offset - rad);
22712                 a.t -= (this.offset - rad);
22713                 a.l += 1;
22714                 a.w -= (this.offset + rad + 1);
22715                 a.h -= (this.offset + rad);
22716                 a.h += 1;
22717             }
22718         break;
22719     };
22720
22721     this.adjusts = a;
22722 };
22723
22724 Roo.Shadow.prototype = {
22725     /**
22726      * @cfg {String} mode
22727      * The shadow display mode.  Supports the following options:<br />
22728      * sides: Shadow displays on both sides and bottom only<br />
22729      * frame: Shadow displays equally on all four sides<br />
22730      * drop: Traditional bottom-right drop shadow (default)
22731      */
22732     /**
22733      * @cfg {String} offset
22734      * The number of pixels to offset the shadow from the element (defaults to 4)
22735      */
22736     offset: 4,
22737
22738     // private
22739     defaultMode: "drop",
22740
22741     /**
22742      * Displays the shadow under the target element
22743      * @param {String/HTMLElement/Element} targetEl The id or element under which the shadow should display
22744      */
22745     show : function(target){
22746         target = Roo.get(target);
22747         if(!this.el){
22748             this.el = Roo.Shadow.Pool.pull();
22749             if(this.el.dom.nextSibling != target.dom){
22750                 this.el.insertBefore(target);
22751             }
22752         }
22753         this.el.setStyle("z-index", this.zIndex || parseInt(target.getStyle("z-index"), 10)-1);
22754         if(Roo.isIE){
22755             this.el.dom.style.filter="progid:DXImageTransform.Microsoft.alpha(opacity=50) progid:DXImageTransform.Microsoft.Blur(pixelradius="+(this.offset)+")";
22756         }
22757         this.realign(
22758             target.getLeft(true),
22759             target.getTop(true),
22760             target.getWidth(),
22761             target.getHeight()
22762         );
22763         this.el.dom.style.display = "block";
22764     },
22765
22766     /**
22767      * Returns true if the shadow is visible, else false
22768      */
22769     isVisible : function(){
22770         return this.el ? true : false;  
22771     },
22772
22773     /**
22774      * Direct alignment when values are already available. Show must be called at least once before
22775      * calling this method to ensure it is initialized.
22776      * @param {Number} left The target element left position
22777      * @param {Number} top The target element top position
22778      * @param {Number} width The target element width
22779      * @param {Number} height The target element height
22780      */
22781     realign : function(l, t, w, h){
22782         if(!this.el){
22783             return;
22784         }
22785         var a = this.adjusts, d = this.el.dom, s = d.style;
22786         var iea = 0;
22787         s.left = (l+a.l)+"px";
22788         s.top = (t+a.t)+"px";
22789         var sw = (w+a.w), sh = (h+a.h), sws = sw +"px", shs = sh + "px";
22790  
22791         if(s.width != sws || s.height != shs){
22792             s.width = sws;
22793             s.height = shs;
22794             if(!Roo.isIE){
22795                 var cn = d.childNodes;
22796                 var sww = Math.max(0, (sw-12))+"px";
22797                 cn[0].childNodes[1].style.width = sww;
22798                 cn[1].childNodes[1].style.width = sww;
22799                 cn[2].childNodes[1].style.width = sww;
22800                 cn[1].style.height = Math.max(0, (sh-12))+"px";
22801             }
22802         }
22803     },
22804
22805     /**
22806      * Hides this shadow
22807      */
22808     hide : function(){
22809         if(this.el){
22810             this.el.dom.style.display = "none";
22811             Roo.Shadow.Pool.push(this.el);
22812             delete this.el;
22813         }
22814     },
22815
22816     /**
22817      * Adjust the z-index of this shadow
22818      * @param {Number} zindex The new z-index
22819      */
22820     setZIndex : function(z){
22821         this.zIndex = z;
22822         if(this.el){
22823             this.el.setStyle("z-index", z);
22824         }
22825     }
22826 };
22827
22828 // Private utility class that manages the internal Shadow cache
22829 Roo.Shadow.Pool = function(){
22830     var p = [];
22831     var markup = Roo.isIE ?
22832                  '<div class="x-ie-shadow"></div>' :
22833                  '<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>';
22834     return {
22835         pull : function(){
22836             var sh = p.shift();
22837             if(!sh){
22838                 sh = Roo.get(Roo.DomHelper.insertHtml("beforeBegin", document.body.firstChild, markup));
22839                 sh.autoBoxAdjust = false;
22840             }
22841             return sh;
22842         },
22843
22844         push : function(sh){
22845             p.push(sh);
22846         }
22847     };
22848 }();/*
22849  * Based on:
22850  * Ext JS Library 1.1.1
22851  * Copyright(c) 2006-2007, Ext JS, LLC.
22852  *
22853  * Originally Released Under LGPL - original licence link has changed is not relivant.
22854  *
22855  * Fork - LGPL
22856  * <script type="text/javascript">
22857  */
22858
22859 /**
22860  * @class Roo.BoxComponent
22861  * @extends Roo.Component
22862  * Base class for any visual {@link Roo.Component} that uses a box container.  BoxComponent provides automatic box
22863  * model adjustments for sizing and positioning and will work correctly withnin the Component rendering model.  All
22864  * container classes should subclass BoxComponent so that they will work consistently when nested within other Ext
22865  * layout containers.
22866  * @constructor
22867  * @param {Roo.Element/String/Object} config The configuration options.
22868  */
22869 Roo.BoxComponent = function(config){
22870     Roo.Component.call(this, config);
22871     this.addEvents({
22872         /**
22873          * @event resize
22874          * Fires after the component is resized.
22875              * @param {Roo.Component} this
22876              * @param {Number} adjWidth The box-adjusted width that was set
22877              * @param {Number} adjHeight The box-adjusted height that was set
22878              * @param {Number} rawWidth The width that was originally specified
22879              * @param {Number} rawHeight The height that was originally specified
22880              */
22881         resize : true,
22882         /**
22883          * @event move
22884          * Fires after the component is moved.
22885              * @param {Roo.Component} this
22886              * @param {Number} x The new x position
22887              * @param {Number} y The new y position
22888              */
22889         move : true
22890     });
22891 };
22892
22893 Roo.extend(Roo.BoxComponent, Roo.Component, {
22894     // private, set in afterRender to signify that the component has been rendered
22895     boxReady : false,
22896     // private, used to defer height settings to subclasses
22897     deferHeight: false,
22898     /** @cfg {Number} width
22899      * width (optional) size of component
22900      */
22901      /** @cfg {Number} height
22902      * height (optional) size of component
22903      */
22904      
22905     /**
22906      * Sets the width and height of the component.  This method fires the resize event.  This method can accept
22907      * either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
22908      * @param {Number/Object} width The new width to set, or a size object in the format {width, height}
22909      * @param {Number} height The new height to set (not required if a size object is passed as the first arg)
22910      * @return {Roo.BoxComponent} this
22911      */
22912     setSize : function(w, h){
22913         // support for standard size objects
22914         if(typeof w == 'object'){
22915             h = w.height;
22916             w = w.width;
22917         }
22918         // not rendered
22919         if(!this.boxReady){
22920             this.width = w;
22921             this.height = h;
22922             return this;
22923         }
22924
22925         // prevent recalcs when not needed
22926         if(this.lastSize && this.lastSize.width == w && this.lastSize.height == h){
22927             return this;
22928         }
22929         this.lastSize = {width: w, height: h};
22930
22931         var adj = this.adjustSize(w, h);
22932         var aw = adj.width, ah = adj.height;
22933         if(aw !== undefined || ah !== undefined){ // this code is nasty but performs better with floaters
22934             var rz = this.getResizeEl();
22935             if(!this.deferHeight && aw !== undefined && ah !== undefined){
22936                 rz.setSize(aw, ah);
22937             }else if(!this.deferHeight && ah !== undefined){
22938                 rz.setHeight(ah);
22939             }else if(aw !== undefined){
22940                 rz.setWidth(aw);
22941             }
22942             this.onResize(aw, ah, w, h);
22943             this.fireEvent('resize', this, aw, ah, w, h);
22944         }
22945         return this;
22946     },
22947
22948     /**
22949      * Gets the current size of the component's underlying element.
22950      * @return {Object} An object containing the element's size {width: (element width), height: (element height)}
22951      */
22952     getSize : function(){
22953         return this.el.getSize();
22954     },
22955
22956     /**
22957      * Gets the current XY position of the component's underlying element.
22958      * @param {Boolean} local (optional) If true the element's left and top are returned instead of page XY (defaults to false)
22959      * @return {Array} The XY position of the element (e.g., [100, 200])
22960      */
22961     getPosition : function(local){
22962         if(local === true){
22963             return [this.el.getLeft(true), this.el.getTop(true)];
22964         }
22965         return this.xy || this.el.getXY();
22966     },
22967
22968     /**
22969      * Gets the current box measurements of the component's underlying element.
22970      * @param {Boolean} local (optional) If true the element's left and top are returned instead of page XY (defaults to false)
22971      * @returns {Object} box An object in the format {x, y, width, height}
22972      */
22973     getBox : function(local){
22974         var s = this.el.getSize();
22975         if(local){
22976             s.x = this.el.getLeft(true);
22977             s.y = this.el.getTop(true);
22978         }else{
22979             var xy = this.xy || this.el.getXY();
22980             s.x = xy[0];
22981             s.y = xy[1];
22982         }
22983         return s;
22984     },
22985
22986     /**
22987      * Sets the current box measurements of the component's underlying element.
22988      * @param {Object} box An object in the format {x, y, width, height}
22989      * @returns {Roo.BoxComponent} this
22990      */
22991     updateBox : function(box){
22992         this.setSize(box.width, box.height);
22993         this.setPagePosition(box.x, box.y);
22994         return this;
22995     },
22996
22997     // protected
22998     getResizeEl : function(){
22999         return this.resizeEl || this.el;
23000     },
23001
23002     // protected
23003     getPositionEl : function(){
23004         return this.positionEl || this.el;
23005     },
23006
23007     /**
23008      * Sets the left and top of the component.  To set the page XY position instead, use {@link #setPagePosition}.
23009      * This method fires the move event.
23010      * @param {Number} left The new left
23011      * @param {Number} top The new top
23012      * @returns {Roo.BoxComponent} this
23013      */
23014     setPosition : function(x, y){
23015         this.x = x;
23016         this.y = y;
23017         if(!this.boxReady){
23018             return this;
23019         }
23020         var adj = this.adjustPosition(x, y);
23021         var ax = adj.x, ay = adj.y;
23022
23023         var el = this.getPositionEl();
23024         if(ax !== undefined || ay !== undefined){
23025             if(ax !== undefined && ay !== undefined){
23026                 el.setLeftTop(ax, ay);
23027             }else if(ax !== undefined){
23028                 el.setLeft(ax);
23029             }else if(ay !== undefined){
23030                 el.setTop(ay);
23031             }
23032             this.onPosition(ax, ay);
23033             this.fireEvent('move', this, ax, ay);
23034         }
23035         return this;
23036     },
23037
23038     /**
23039      * Sets the page XY position of the component.  To set the left and top instead, use {@link #setPosition}.
23040      * This method fires the move event.
23041      * @param {Number} x The new x position
23042      * @param {Number} y The new y position
23043      * @returns {Roo.BoxComponent} this
23044      */
23045     setPagePosition : function(x, y){
23046         this.pageX = x;
23047         this.pageY = y;
23048         if(!this.boxReady){
23049             return;
23050         }
23051         if(x === undefined || y === undefined){ // cannot translate undefined points
23052             return;
23053         }
23054         var p = this.el.translatePoints(x, y);
23055         this.setPosition(p.left, p.top);
23056         return this;
23057     },
23058
23059     // private
23060     onRender : function(ct, position){
23061         Roo.BoxComponent.superclass.onRender.call(this, ct, position);
23062         if(this.resizeEl){
23063             this.resizeEl = Roo.get(this.resizeEl);
23064         }
23065         if(this.positionEl){
23066             this.positionEl = Roo.get(this.positionEl);
23067         }
23068     },
23069
23070     // private
23071     afterRender : function(){
23072         Roo.BoxComponent.superclass.afterRender.call(this);
23073         this.boxReady = true;
23074         this.setSize(this.width, this.height);
23075         if(this.x || this.y){
23076             this.setPosition(this.x, this.y);
23077         }
23078         if(this.pageX || this.pageY){
23079             this.setPagePosition(this.pageX, this.pageY);
23080         }
23081     },
23082
23083     /**
23084      * Force the component's size to recalculate based on the underlying element's current height and width.
23085      * @returns {Roo.BoxComponent} this
23086      */
23087     syncSize : function(){
23088         delete this.lastSize;
23089         this.setSize(this.el.getWidth(), this.el.getHeight());
23090         return this;
23091     },
23092
23093     /**
23094      * Called after the component is resized, this method is empty by default but can be implemented by any
23095      * subclass that needs to perform custom logic after a resize occurs.
23096      * @param {Number} adjWidth The box-adjusted width that was set
23097      * @param {Number} adjHeight The box-adjusted height that was set
23098      * @param {Number} rawWidth The width that was originally specified
23099      * @param {Number} rawHeight The height that was originally specified
23100      */
23101     onResize : function(adjWidth, adjHeight, rawWidth, rawHeight){
23102
23103     },
23104
23105     /**
23106      * Called after the component is moved, this method is empty by default but can be implemented by any
23107      * subclass that needs to perform custom logic after a move occurs.
23108      * @param {Number} x The new x position
23109      * @param {Number} y The new y position
23110      */
23111     onPosition : function(x, y){
23112
23113     },
23114
23115     // private
23116     adjustSize : function(w, h){
23117         if(this.autoWidth){
23118             w = 'auto';
23119         }
23120         if(this.autoHeight){
23121             h = 'auto';
23122         }
23123         return {width : w, height: h};
23124     },
23125
23126     // private
23127     adjustPosition : function(x, y){
23128         return {x : x, y: y};
23129     }
23130 });/*
23131  * Based on:
23132  * Ext JS Library 1.1.1
23133  * Copyright(c) 2006-2007, Ext JS, LLC.
23134  *
23135  * Originally Released Under LGPL - original licence link has changed is not relivant.
23136  *
23137  * Fork - LGPL
23138  * <script type="text/javascript">
23139  */
23140
23141
23142 /**
23143  * @class Roo.SplitBar
23144  * @extends Roo.util.Observable
23145  * Creates draggable splitter bar functionality from two elements (element to be dragged and element to be resized).
23146  * <br><br>
23147  * Usage:
23148  * <pre><code>
23149 var split = new Roo.SplitBar("elementToDrag", "elementToSize",
23150                    Roo.SplitBar.HORIZONTAL, Roo.SplitBar.LEFT);
23151 split.setAdapter(new Roo.SplitBar.AbsoluteLayoutAdapter("container"));
23152 split.minSize = 100;
23153 split.maxSize = 600;
23154 split.animate = true;
23155 split.on('moved', splitterMoved);
23156 </code></pre>
23157  * @constructor
23158  * Create a new SplitBar
23159  * @param {String/HTMLElement/Roo.Element} dragElement The element to be dragged and act as the SplitBar. 
23160  * @param {String/HTMLElement/Roo.Element} resizingElement The element to be resized based on where the SplitBar element is dragged 
23161  * @param {Number} orientation (optional) Either Roo.SplitBar.HORIZONTAL or Roo.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
23162  * @param {Number} placement (optional) Either Roo.SplitBar.LEFT or Roo.SplitBar.RIGHT for horizontal or  
23163                         Roo.SplitBar.TOP or Roo.SplitBar.BOTTOM for vertical. (By default, this is determined automatically by the initial
23164                         position of the SplitBar).
23165  */
23166 Roo.SplitBar = function(dragElement, resizingElement, orientation, placement, existingProxy){
23167     
23168     /** @private */
23169     this.el = Roo.get(dragElement, true);
23170     this.el.dom.unselectable = "on";
23171     /** @private */
23172     this.resizingEl = Roo.get(resizingElement, true);
23173
23174     /**
23175      * @private
23176      * The orientation of the split. Either Roo.SplitBar.HORIZONTAL or Roo.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
23177      * Note: If this is changed after creating the SplitBar, the placement property must be manually updated
23178      * @type Number
23179      */
23180     this.orientation = orientation || Roo.SplitBar.HORIZONTAL;
23181     
23182     /**
23183      * The minimum size of the resizing element. (Defaults to 0)
23184      * @type Number
23185      */
23186     this.minSize = 0;
23187     
23188     /**
23189      * The maximum size of the resizing element. (Defaults to 2000)
23190      * @type Number
23191      */
23192     this.maxSize = 2000;
23193     
23194     /**
23195      * Whether to animate the transition to the new size
23196      * @type Boolean
23197      */
23198     this.animate = false;
23199     
23200     /**
23201      * Whether to create a transparent shim that overlays the page when dragging, enables dragging across iframes.
23202      * @type Boolean
23203      */
23204     this.useShim = false;
23205     
23206     /** @private */
23207     this.shim = null;
23208     
23209     if(!existingProxy){
23210         /** @private */
23211         this.proxy = Roo.SplitBar.createProxy(this.orientation);
23212     }else{
23213         this.proxy = Roo.get(existingProxy).dom;
23214     }
23215     /** @private */
23216     this.dd = new Roo.dd.DDProxy(this.el.dom.id, "XSplitBars", {dragElId : this.proxy.id});
23217     
23218     /** @private */
23219     this.dd.b4StartDrag = this.onStartProxyDrag.createDelegate(this);
23220     
23221     /** @private */
23222     this.dd.endDrag = this.onEndProxyDrag.createDelegate(this);
23223     
23224     /** @private */
23225     this.dragSpecs = {};
23226     
23227     /**
23228      * @private The adapter to use to positon and resize elements
23229      */
23230     this.adapter = new Roo.SplitBar.BasicLayoutAdapter();
23231     this.adapter.init(this);
23232     
23233     if(this.orientation == Roo.SplitBar.HORIZONTAL){
23234         /** @private */
23235         this.placement = placement || (this.el.getX() > this.resizingEl.getX() ? Roo.SplitBar.LEFT : Roo.SplitBar.RIGHT);
23236         this.el.addClass("x-splitbar-h");
23237     }else{
23238         /** @private */
23239         this.placement = placement || (this.el.getY() > this.resizingEl.getY() ? Roo.SplitBar.TOP : Roo.SplitBar.BOTTOM);
23240         this.el.addClass("x-splitbar-v");
23241     }
23242     
23243     this.addEvents({
23244         /**
23245          * @event resize
23246          * Fires when the splitter is moved (alias for {@link #event-moved})
23247          * @param {Roo.SplitBar} this
23248          * @param {Number} newSize the new width or height
23249          */
23250         "resize" : true,
23251         /**
23252          * @event moved
23253          * Fires when the splitter is moved
23254          * @param {Roo.SplitBar} this
23255          * @param {Number} newSize the new width or height
23256          */
23257         "moved" : true,
23258         /**
23259          * @event beforeresize
23260          * Fires before the splitter is dragged
23261          * @param {Roo.SplitBar} this
23262          */
23263         "beforeresize" : true,
23264
23265         "beforeapply" : true
23266     });
23267
23268     Roo.util.Observable.call(this);
23269 };
23270
23271 Roo.extend(Roo.SplitBar, Roo.util.Observable, {
23272     onStartProxyDrag : function(x, y){
23273         this.fireEvent("beforeresize", this);
23274         if(!this.overlay){
23275             var o = Roo.DomHelper.insertFirst(document.body,  {cls: "x-drag-overlay", html: "&#160;"}, true);
23276             o.unselectable();
23277             o.enableDisplayMode("block");
23278             // all splitbars share the same overlay
23279             Roo.SplitBar.prototype.overlay = o;
23280         }
23281         this.overlay.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
23282         this.overlay.show();
23283         Roo.get(this.proxy).setDisplayed("block");
23284         var size = this.adapter.getElementSize(this);
23285         this.activeMinSize = this.getMinimumSize();;
23286         this.activeMaxSize = this.getMaximumSize();;
23287         var c1 = size - this.activeMinSize;
23288         var c2 = Math.max(this.activeMaxSize - size, 0);
23289         if(this.orientation == Roo.SplitBar.HORIZONTAL){
23290             this.dd.resetConstraints();
23291             this.dd.setXConstraint(
23292                 this.placement == Roo.SplitBar.LEFT ? c1 : c2, 
23293                 this.placement == Roo.SplitBar.LEFT ? c2 : c1
23294             );
23295             this.dd.setYConstraint(0, 0);
23296         }else{
23297             this.dd.resetConstraints();
23298             this.dd.setXConstraint(0, 0);
23299             this.dd.setYConstraint(
23300                 this.placement == Roo.SplitBar.TOP ? c1 : c2, 
23301                 this.placement == Roo.SplitBar.TOP ? c2 : c1
23302             );
23303          }
23304         this.dragSpecs.startSize = size;
23305         this.dragSpecs.startPoint = [x, y];
23306         Roo.dd.DDProxy.prototype.b4StartDrag.call(this.dd, x, y);
23307     },
23308     
23309     /** 
23310      * @private Called after the drag operation by the DDProxy
23311      */
23312     onEndProxyDrag : function(e){
23313         Roo.get(this.proxy).setDisplayed(false);
23314         var endPoint = Roo.lib.Event.getXY(e);
23315         if(this.overlay){
23316             this.overlay.hide();
23317         }
23318         var newSize;
23319         if(this.orientation == Roo.SplitBar.HORIZONTAL){
23320             newSize = this.dragSpecs.startSize + 
23321                 (this.placement == Roo.SplitBar.LEFT ?
23322                     endPoint[0] - this.dragSpecs.startPoint[0] :
23323                     this.dragSpecs.startPoint[0] - endPoint[0]
23324                 );
23325         }else{
23326             newSize = this.dragSpecs.startSize + 
23327                 (this.placement == Roo.SplitBar.TOP ?
23328                     endPoint[1] - this.dragSpecs.startPoint[1] :
23329                     this.dragSpecs.startPoint[1] - endPoint[1]
23330                 );
23331         }
23332         newSize = Math.min(Math.max(newSize, this.activeMinSize), this.activeMaxSize);
23333         if(newSize != this.dragSpecs.startSize){
23334             if(this.fireEvent('beforeapply', this, newSize) !== false){
23335                 this.adapter.setElementSize(this, newSize);
23336                 this.fireEvent("moved", this, newSize);
23337                 this.fireEvent("resize", this, newSize);
23338             }
23339         }
23340     },
23341     
23342     /**
23343      * Get the adapter this SplitBar uses
23344      * @return The adapter object
23345      */
23346     getAdapter : function(){
23347         return this.adapter;
23348     },
23349     
23350     /**
23351      * Set the adapter this SplitBar uses
23352      * @param {Object} adapter A SplitBar adapter object
23353      */
23354     setAdapter : function(adapter){
23355         this.adapter = adapter;
23356         this.adapter.init(this);
23357     },
23358     
23359     /**
23360      * Gets the minimum size for the resizing element
23361      * @return {Number} The minimum size
23362      */
23363     getMinimumSize : function(){
23364         return this.minSize;
23365     },
23366     
23367     /**
23368      * Sets the minimum size for the resizing element
23369      * @param {Number} minSize The minimum size
23370      */
23371     setMinimumSize : function(minSize){
23372         this.minSize = minSize;
23373     },
23374     
23375     /**
23376      * Gets the maximum size for the resizing element
23377      * @return {Number} The maximum size
23378      */
23379     getMaximumSize : function(){
23380         return this.maxSize;
23381     },
23382     
23383     /**
23384      * Sets the maximum size for the resizing element
23385      * @param {Number} maxSize The maximum size
23386      */
23387     setMaximumSize : function(maxSize){
23388         this.maxSize = maxSize;
23389     },
23390     
23391     /**
23392      * Sets the initialize size for the resizing element
23393      * @param {Number} size The initial size
23394      */
23395     setCurrentSize : function(size){
23396         var oldAnimate = this.animate;
23397         this.animate = false;
23398         this.adapter.setElementSize(this, size);
23399         this.animate = oldAnimate;
23400     },
23401     
23402     /**
23403      * Destroy this splitbar. 
23404      * @param {Boolean} removeEl True to remove the element
23405      */
23406     destroy : function(removeEl){
23407         if(this.shim){
23408             this.shim.remove();
23409         }
23410         this.dd.unreg();
23411         this.proxy.parentNode.removeChild(this.proxy);
23412         if(removeEl){
23413             this.el.remove();
23414         }
23415     }
23416 });
23417
23418 /**
23419  * @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.
23420  */
23421 Roo.SplitBar.createProxy = function(dir){
23422     var proxy = new Roo.Element(document.createElement("div"));
23423     proxy.unselectable();
23424     var cls = 'x-splitbar-proxy';
23425     proxy.addClass(cls + ' ' + (dir == Roo.SplitBar.HORIZONTAL ? cls +'-h' : cls + '-v'));
23426     document.body.appendChild(proxy.dom);
23427     return proxy.dom;
23428 };
23429
23430 /** 
23431  * @class Roo.SplitBar.BasicLayoutAdapter
23432  * Default Adapter. It assumes the splitter and resizing element are not positioned
23433  * elements and only gets/sets the width of the element. Generally used for table based layouts.
23434  */
23435 Roo.SplitBar.BasicLayoutAdapter = function(){
23436 };
23437
23438 Roo.SplitBar.BasicLayoutAdapter.prototype = {
23439     // do nothing for now
23440     init : function(s){
23441     
23442     },
23443     /**
23444      * Called before drag operations to get the current size of the resizing element. 
23445      * @param {Roo.SplitBar} s The SplitBar using this adapter
23446      */
23447      getElementSize : function(s){
23448         if(s.orientation == Roo.SplitBar.HORIZONTAL){
23449             return s.resizingEl.getWidth();
23450         }else{
23451             return s.resizingEl.getHeight();
23452         }
23453     },
23454     
23455     /**
23456      * Called after drag operations to set the size of the resizing element.
23457      * @param {Roo.SplitBar} s The SplitBar using this adapter
23458      * @param {Number} newSize The new size to set
23459      * @param {Function} onComplete A function to be invoked when resizing is complete
23460      */
23461     setElementSize : function(s, newSize, onComplete){
23462         if(s.orientation == Roo.SplitBar.HORIZONTAL){
23463             if(!s.animate){
23464                 s.resizingEl.setWidth(newSize);
23465                 if(onComplete){
23466                     onComplete(s, newSize);
23467                 }
23468             }else{
23469                 s.resizingEl.setWidth(newSize, true, .1, onComplete, 'easeOut');
23470             }
23471         }else{
23472             
23473             if(!s.animate){
23474                 s.resizingEl.setHeight(newSize);
23475                 if(onComplete){
23476                     onComplete(s, newSize);
23477                 }
23478             }else{
23479                 s.resizingEl.setHeight(newSize, true, .1, onComplete, 'easeOut');
23480             }
23481         }
23482     }
23483 };
23484
23485 /** 
23486  *@class Roo.SplitBar.AbsoluteLayoutAdapter
23487  * @extends Roo.SplitBar.BasicLayoutAdapter
23488  * Adapter that  moves the splitter element to align with the resized sizing element. 
23489  * Used with an absolute positioned SplitBar.
23490  * @param {String/HTMLElement/Roo.Element} container The container that wraps around the absolute positioned content. If it's
23491  * document.body, make sure you assign an id to the body element.
23492  */
23493 Roo.SplitBar.AbsoluteLayoutAdapter = function(container){
23494     this.basic = new Roo.SplitBar.BasicLayoutAdapter();
23495     this.container = Roo.get(container);
23496 };
23497
23498 Roo.SplitBar.AbsoluteLayoutAdapter.prototype = {
23499     init : function(s){
23500         this.basic.init(s);
23501     },
23502     
23503     getElementSize : function(s){
23504         return this.basic.getElementSize(s);
23505     },
23506     
23507     setElementSize : function(s, newSize, onComplete){
23508         this.basic.setElementSize(s, newSize, this.moveSplitter.createDelegate(this, [s]));
23509     },
23510     
23511     moveSplitter : function(s){
23512         var yes = Roo.SplitBar;
23513         switch(s.placement){
23514             case yes.LEFT:
23515                 s.el.setX(s.resizingEl.getRight());
23516                 break;
23517             case yes.RIGHT:
23518                 s.el.setStyle("right", (this.container.getWidth() - s.resizingEl.getLeft()) + "px");
23519                 break;
23520             case yes.TOP:
23521                 s.el.setY(s.resizingEl.getBottom());
23522                 break;
23523             case yes.BOTTOM:
23524                 s.el.setY(s.resizingEl.getTop() - s.el.getHeight());
23525                 break;
23526         }
23527     }
23528 };
23529
23530 /**
23531  * Orientation constant - Create a vertical SplitBar
23532  * @static
23533  * @type Number
23534  */
23535 Roo.SplitBar.VERTICAL = 1;
23536
23537 /**
23538  * Orientation constant - Create a horizontal SplitBar
23539  * @static
23540  * @type Number
23541  */
23542 Roo.SplitBar.HORIZONTAL = 2;
23543
23544 /**
23545  * Placement constant - The resizing element is to the left of the splitter element
23546  * @static
23547  * @type Number
23548  */
23549 Roo.SplitBar.LEFT = 1;
23550
23551 /**
23552  * Placement constant - The resizing element is to the right of the splitter element
23553  * @static
23554  * @type Number
23555  */
23556 Roo.SplitBar.RIGHT = 2;
23557
23558 /**
23559  * Placement constant - The resizing element is positioned above the splitter element
23560  * @static
23561  * @type Number
23562  */
23563 Roo.SplitBar.TOP = 3;
23564
23565 /**
23566  * Placement constant - The resizing element is positioned under splitter element
23567  * @static
23568  * @type Number
23569  */
23570 Roo.SplitBar.BOTTOM = 4;
23571 /*
23572  * Based on:
23573  * Ext JS Library 1.1.1
23574  * Copyright(c) 2006-2007, Ext JS, LLC.
23575  *
23576  * Originally Released Under LGPL - original licence link has changed is not relivant.
23577  *
23578  * Fork - LGPL
23579  * <script type="text/javascript">
23580  */
23581
23582 /**
23583  * @class Roo.View
23584  * @extends Roo.util.Observable
23585  * Create a "View" for an element based on a data model or UpdateManager and the supplied DomHelper template. 
23586  * This class also supports single and multi selection modes. <br>
23587  * Create a data model bound view:
23588  <pre><code>
23589  var store = new Roo.data.Store(...);
23590
23591  var view = new Roo.View({
23592     el : "my-element",
23593     tpl : '&lt;div id="{0}"&gt;{2} - {1}&lt;/div&gt;', // auto create template
23594  
23595     singleSelect: true,
23596     selectedClass: "ydataview-selected",
23597     store: store
23598  });
23599
23600  // listen for node click?
23601  view.on("click", function(vw, index, node, e){
23602  alert('Node "' + node.id + '" at index: ' + index + " was clicked.");
23603  });
23604
23605  // load XML data
23606  dataModel.load("foobar.xml");
23607  </code></pre>
23608  For an example of creating a JSON/UpdateManager view, see {@link Roo.JsonView}.
23609  * <br><br>
23610  * <b>Note: The root of your template must be a single node. Table/row implementations may work but are not supported due to
23611  * IE"s limited insertion support with tables and Opera"s faulty event bubbling.</b>
23612  * 
23613  * Note: old style constructor is still suported (container, template, config)
23614  * 
23615  * @constructor
23616  * Create a new View
23617  * @param {Object} config The config object
23618  * 
23619  */
23620 Roo.View = function(config, depreciated_tpl, depreciated_config){
23621     
23622     if (typeof(depreciated_tpl) == 'undefined') {
23623         // new way.. - universal constructor.
23624         Roo.apply(this, config);
23625         this.el  = Roo.get(this.el);
23626     } else {
23627         // old format..
23628         this.el  = Roo.get(config);
23629         this.tpl = depreciated_tpl;
23630         Roo.apply(this, depreciated_config);
23631     }
23632      
23633     
23634     if(typeof(this.tpl) == "string"){
23635         this.tpl = new Roo.Template(this.tpl);
23636     } else {
23637         // support xtype ctors..
23638         this.tpl = new Roo.factory(this.tpl, Roo);
23639     }
23640     
23641     
23642     this.tpl.compile();
23643    
23644
23645      
23646     /** @private */
23647     this.addEvents({
23648         /**
23649          * @event beforeclick
23650          * Fires before a click is processed. Returns false to cancel the default action.
23651          * @param {Roo.View} this
23652          * @param {Number} index The index of the target node
23653          * @param {HTMLElement} node The target node
23654          * @param {Roo.EventObject} e The raw event object
23655          */
23656             "beforeclick" : true,
23657         /**
23658          * @event click
23659          * Fires when a template node is clicked.
23660          * @param {Roo.View} this
23661          * @param {Number} index The index of the target node
23662          * @param {HTMLElement} node The target node
23663          * @param {Roo.EventObject} e The raw event object
23664          */
23665             "click" : true,
23666         /**
23667          * @event dblclick
23668          * Fires when a template node is double clicked.
23669          * @param {Roo.View} this
23670          * @param {Number} index The index of the target node
23671          * @param {HTMLElement} node The target node
23672          * @param {Roo.EventObject} e The raw event object
23673          */
23674             "dblclick" : true,
23675         /**
23676          * @event contextmenu
23677          * Fires when a template node is right clicked.
23678          * @param {Roo.View} this
23679          * @param {Number} index The index of the target node
23680          * @param {HTMLElement} node The target node
23681          * @param {Roo.EventObject} e The raw event object
23682          */
23683             "contextmenu" : true,
23684         /**
23685          * @event selectionchange
23686          * Fires when the selected nodes change.
23687          * @param {Roo.View} this
23688          * @param {Array} selections Array of the selected nodes
23689          */
23690             "selectionchange" : true,
23691     
23692         /**
23693          * @event beforeselect
23694          * Fires before a selection is made. If any handlers return false, the selection is cancelled.
23695          * @param {Roo.View} this
23696          * @param {HTMLElement} node The node to be selected
23697          * @param {Array} selections Array of currently selected nodes
23698          */
23699             "beforeselect" : true,
23700         /**
23701          * @event preparedata
23702          * Fires on every row to render, to allow you to change the data.
23703          * @param {Roo.View} this
23704          * @param {Object} data to be rendered (change this)
23705          */
23706           "preparedata" : true
23707         });
23708
23709     this.el.on({
23710         "click": this.onClick,
23711         "dblclick": this.onDblClick,
23712         "contextmenu": this.onContextMenu,
23713         scope:this
23714     });
23715
23716     this.selections = [];
23717     this.nodes = [];
23718     this.cmp = new Roo.CompositeElementLite([]);
23719     if(this.store){
23720         this.store = Roo.factory(this.store, Roo.data);
23721         this.setStore(this.store, true);
23722     }
23723     Roo.View.superclass.constructor.call(this);
23724 };
23725
23726 Roo.extend(Roo.View, Roo.util.Observable, {
23727     
23728      /**
23729      * @cfg {Roo.data.Store} store Data store to load data from.
23730      */
23731     store : false,
23732     
23733     /**
23734      * @cfg {String|Roo.Element} el The container element.
23735      */
23736     el : '',
23737     
23738     /**
23739      * @cfg {String|Roo.Template} tpl The template used by this View 
23740      */
23741     tpl : false,
23742     
23743     /**
23744      * @cfg {String} selectedClass The css class to add to selected nodes
23745      */
23746     selectedClass : "x-view-selected",
23747      /**
23748      * @cfg {String} emptyText The empty text to show when nothing is loaded.
23749      */
23750     emptyText : "",
23751     /**
23752      * @cfg {Boolean} multiSelect Allow multiple selection
23753      */
23754     multiSelect : false,
23755     /**
23756      * @cfg {Boolean} singleSelect Allow single selection
23757      */
23758     singleSelect:  false,
23759     
23760     /**
23761      * @cfg {Boolean} toggleSelect - selecting 
23762      */
23763     toggleSelect : false,
23764     
23765     /**
23766      * Returns the element this view is bound to.
23767      * @return {Roo.Element}
23768      */
23769     getEl : function(){
23770         return this.el;
23771     },
23772
23773     /**
23774      * Refreshes the view.
23775      */
23776     refresh : function(){
23777         var t = this.tpl;
23778         this.clearSelections();
23779         this.el.update("");
23780         var html = [];
23781         var records = this.store.getRange();
23782         if(records.length < 1){
23783             this.el.update(this.emptyText);
23784             return;
23785         }
23786         for(var i = 0, len = records.length; i < len; i++){
23787             var data = this.prepareData(records[i].data, i, records[i]);
23788             this.fireEvent("preparedata", this, data, i, records[i]);
23789             html[html.length] = t.apply(data);
23790         }
23791         this.el.update(html.join(""));
23792         this.nodes = this.el.dom.childNodes;
23793         this.updateIndexes(0);
23794     },
23795
23796     /**
23797      * Function to override to reformat the data that is sent to
23798      * the template for each node.
23799      * @param {Array/Object} data The raw data (array of colData for a data model bound view or
23800      * a JSON object for an UpdateManager bound view).
23801      */
23802     prepareData : function(data){
23803         return data;
23804     },
23805
23806     onUpdate : function(ds, record){
23807         this.clearSelections();
23808         var index = this.store.indexOf(record);
23809         var n = this.nodes[index];
23810         this.tpl.insertBefore(n, this.prepareData(record.data));
23811         n.parentNode.removeChild(n);
23812         this.updateIndexes(index, index);
23813     },
23814
23815     onAdd : function(ds, records, index){
23816         this.clearSelections();
23817         if(this.nodes.length == 0){
23818             this.refresh();
23819             return;
23820         }
23821         var n = this.nodes[index];
23822         for(var i = 0, len = records.length; i < len; i++){
23823             var d = this.prepareData(records[i].data);
23824             if(n){
23825                 this.tpl.insertBefore(n, d);
23826             }else{
23827                 this.tpl.append(this.el, d);
23828             }
23829         }
23830         this.updateIndexes(index);
23831     },
23832
23833     onRemove : function(ds, record, index){
23834         this.clearSelections();
23835         this.el.dom.removeChild(this.nodes[index]);
23836         this.updateIndexes(index);
23837     },
23838
23839     /**
23840      * Refresh an individual node.
23841      * @param {Number} index
23842      */
23843     refreshNode : function(index){
23844         this.onUpdate(this.store, this.store.getAt(index));
23845     },
23846
23847     updateIndexes : function(startIndex, endIndex){
23848         var ns = this.nodes;
23849         startIndex = startIndex || 0;
23850         endIndex = endIndex || ns.length - 1;
23851         for(var i = startIndex; i <= endIndex; i++){
23852             ns[i].nodeIndex = i;
23853         }
23854     },
23855
23856     /**
23857      * Changes the data store this view uses and refresh the view.
23858      * @param {Store} store
23859      */
23860     setStore : function(store, initial){
23861         if(!initial && this.store){
23862             this.store.un("datachanged", this.refresh);
23863             this.store.un("add", this.onAdd);
23864             this.store.un("remove", this.onRemove);
23865             this.store.un("update", this.onUpdate);
23866             this.store.un("clear", this.refresh);
23867         }
23868         if(store){
23869           
23870             store.on("datachanged", this.refresh, this);
23871             store.on("add", this.onAdd, this);
23872             store.on("remove", this.onRemove, this);
23873             store.on("update", this.onUpdate, this);
23874             store.on("clear", this.refresh, this);
23875         }
23876         
23877         if(store){
23878             this.refresh();
23879         }
23880     },
23881
23882     /**
23883      * Returns the template node the passed child belongs to or null if it doesn't belong to one.
23884      * @param {HTMLElement} node
23885      * @return {HTMLElement} The template node
23886      */
23887     findItemFromChild : function(node){
23888         var el = this.el.dom;
23889         if(!node || node.parentNode == el){
23890                     return node;
23891             }
23892             var p = node.parentNode;
23893             while(p && p != el){
23894             if(p.parentNode == el){
23895                 return p;
23896             }
23897             p = p.parentNode;
23898         }
23899             return null;
23900     },
23901
23902     /** @ignore */
23903     onClick : function(e){
23904         var item = this.findItemFromChild(e.getTarget());
23905         if(item){
23906             var index = this.indexOf(item);
23907             if(this.onItemClick(item, index, e) !== false){
23908                 this.fireEvent("click", this, index, item, e);
23909             }
23910         }else{
23911             this.clearSelections();
23912         }
23913     },
23914
23915     /** @ignore */
23916     onContextMenu : function(e){
23917         var item = this.findItemFromChild(e.getTarget());
23918         if(item){
23919             this.fireEvent("contextmenu", this, this.indexOf(item), item, e);
23920         }
23921     },
23922
23923     /** @ignore */
23924     onDblClick : function(e){
23925         var item = this.findItemFromChild(e.getTarget());
23926         if(item){
23927             this.fireEvent("dblclick", this, this.indexOf(item), item, e);
23928         }
23929     },
23930
23931     onItemClick : function(item, index, e)
23932     {
23933         if(this.fireEvent("beforeclick", this, index, item, e) === false){
23934             return false;
23935         }
23936         if (this.toggleSelect) {
23937             var m = this.isSelected(item) ? 'unselect' : 'select';
23938             Roo.log(m);
23939             var _t = this;
23940             _t[m](item, true, false);
23941             return true;
23942         }
23943         if(this.multiSelect || this.singleSelect){
23944             if(this.multiSelect && e.shiftKey && this.lastSelection){
23945                 this.select(this.getNodes(this.indexOf(this.lastSelection), index), false);
23946             }else{
23947                 this.select(item, this.multiSelect && e.ctrlKey);
23948                 this.lastSelection = item;
23949             }
23950             e.preventDefault();
23951         }
23952         return true;
23953     },
23954
23955     /**
23956      * Get the number of selected nodes.
23957      * @return {Number}
23958      */
23959     getSelectionCount : function(){
23960         return this.selections.length;
23961     },
23962
23963     /**
23964      * Get the currently selected nodes.
23965      * @return {Array} An array of HTMLElements
23966      */
23967     getSelectedNodes : function(){
23968         return this.selections;
23969     },
23970
23971     /**
23972      * Get the indexes of the selected nodes.
23973      * @return {Array}
23974      */
23975     getSelectedIndexes : function(){
23976         var indexes = [], s = this.selections;
23977         for(var i = 0, len = s.length; i < len; i++){
23978             indexes.push(s[i].nodeIndex);
23979         }
23980         return indexes;
23981     },
23982
23983     /**
23984      * Clear all selections
23985      * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange event
23986      */
23987     clearSelections : function(suppressEvent){
23988         if(this.nodes && (this.multiSelect || this.singleSelect) && this.selections.length > 0){
23989             this.cmp.elements = this.selections;
23990             this.cmp.removeClass(this.selectedClass);
23991             this.selections = [];
23992             if(!suppressEvent){
23993                 this.fireEvent("selectionchange", this, this.selections);
23994             }
23995         }
23996     },
23997
23998     /**
23999      * Returns true if the passed node is selected
24000      * @param {HTMLElement/Number} node The node or node index
24001      * @return {Boolean}
24002      */
24003     isSelected : function(node){
24004         var s = this.selections;
24005         if(s.length < 1){
24006             return false;
24007         }
24008         node = this.getNode(node);
24009         return s.indexOf(node) !== -1;
24010     },
24011
24012     /**
24013      * Selects nodes.
24014      * @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
24015      * @param {Boolean} keepExisting (optional) true to keep existing selections
24016      * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange vent
24017      */
24018     select : function(nodeInfo, keepExisting, suppressEvent){
24019         if(nodeInfo instanceof Array){
24020             if(!keepExisting){
24021                 this.clearSelections(true);
24022             }
24023             for(var i = 0, len = nodeInfo.length; i < len; i++){
24024                 this.select(nodeInfo[i], true, true);
24025             }
24026             return;
24027         } 
24028         var node = this.getNode(nodeInfo);
24029         if(!node || this.isSelected(node)){
24030             return; // already selected.
24031         }
24032         if(!keepExisting){
24033             this.clearSelections(true);
24034         }
24035         if(this.fireEvent("beforeselect", this, node, this.selections) !== false){
24036             Roo.fly(node).addClass(this.selectedClass);
24037             this.selections.push(node);
24038             if(!suppressEvent){
24039                 this.fireEvent("selectionchange", this, this.selections);
24040             }
24041         }
24042         
24043         
24044     },
24045       /**
24046      * Unselects nodes.
24047      * @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
24048      * @param {Boolean} keepExisting (optional) true IGNORED (for campatibility with select)
24049      * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange vent
24050      */
24051     unselect : function(nodeInfo, keepExisting, suppressEvent)
24052     {
24053         if(nodeInfo instanceof Array){
24054             Roo.each(this.selections, function(s) {
24055                 this.unselect(s, nodeInfo);
24056             }, this);
24057             return;
24058         }
24059         var node = this.getNode(nodeInfo);
24060         if(!node || !this.isSelected(node)){
24061             Roo.log("not selected");
24062             return; // not selected.
24063         }
24064         // fireevent???
24065         var ns = [];
24066         Roo.each(this.selections, function(s) {
24067             if (s == node ) {
24068                 Roo.fly(node).removeClass(this.selectedClass);
24069
24070                 return;
24071             }
24072             ns.push(s);
24073         },this);
24074         
24075         this.selections= ns;
24076         this.fireEvent("selectionchange", this, this.selections);
24077     },
24078
24079     /**
24080      * Gets a template node.
24081      * @param {HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node or the id of a template node
24082      * @return {HTMLElement} The node or null if it wasn't found
24083      */
24084     getNode : function(nodeInfo){
24085         if(typeof nodeInfo == "string"){
24086             return document.getElementById(nodeInfo);
24087         }else if(typeof nodeInfo == "number"){
24088             return this.nodes[nodeInfo];
24089         }
24090         return nodeInfo;
24091     },
24092
24093     /**
24094      * Gets a range template nodes.
24095      * @param {Number} startIndex
24096      * @param {Number} endIndex
24097      * @return {Array} An array of nodes
24098      */
24099     getNodes : function(start, end){
24100         var ns = this.nodes;
24101         start = start || 0;
24102         end = typeof end == "undefined" ? ns.length - 1 : end;
24103         var nodes = [];
24104         if(start <= end){
24105             for(var i = start; i <= end; i++){
24106                 nodes.push(ns[i]);
24107             }
24108         } else{
24109             for(var i = start; i >= end; i--){
24110                 nodes.push(ns[i]);
24111             }
24112         }
24113         return nodes;
24114     },
24115
24116     /**
24117      * Finds the index of the passed node
24118      * @param {HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node or the id of a template node
24119      * @return {Number} The index of the node or -1
24120      */
24121     indexOf : function(node){
24122         node = this.getNode(node);
24123         if(typeof node.nodeIndex == "number"){
24124             return node.nodeIndex;
24125         }
24126         var ns = this.nodes;
24127         for(var i = 0, len = ns.length; i < len; i++){
24128             if(ns[i] == node){
24129                 return i;
24130             }
24131         }
24132         return -1;
24133     }
24134 });
24135 /*
24136  * Based on:
24137  * Ext JS Library 1.1.1
24138  * Copyright(c) 2006-2007, Ext JS, LLC.
24139  *
24140  * Originally Released Under LGPL - original licence link has changed is not relivant.
24141  *
24142  * Fork - LGPL
24143  * <script type="text/javascript">
24144  */
24145
24146 /**
24147  * @class Roo.JsonView
24148  * @extends Roo.View
24149  * Shortcut class to create a JSON + {@link Roo.UpdateManager} template view. Usage:
24150 <pre><code>
24151 var view = new Roo.JsonView({
24152     container: "my-element",
24153     tpl: '&lt;div id="{id}"&gt;{foo} - {bar}&lt;/div&gt;', // auto create template
24154     multiSelect: true, 
24155     jsonRoot: "data" 
24156 });
24157
24158 // listen for node click?
24159 view.on("click", function(vw, index, node, e){
24160     alert('Node "' + node.id + '" at index: ' + index + " was clicked.");
24161 });
24162
24163 // direct load of JSON data
24164 view.load("foobar.php");
24165
24166 // Example from my blog list
24167 var tpl = new Roo.Template(
24168     '&lt;div class="entry"&gt;' +
24169     '&lt;a class="entry-title" href="{link}"&gt;{title}&lt;/a&gt;' +
24170     "&lt;h4&gt;{date} by {author} | {comments} Comments&lt;/h4&gt;{description}" +
24171     "&lt;/div&gt;&lt;hr /&gt;"
24172 );
24173
24174 var moreView = new Roo.JsonView({
24175     container :  "entry-list", 
24176     template : tpl,
24177     jsonRoot: "posts"
24178 });
24179 moreView.on("beforerender", this.sortEntries, this);
24180 moreView.load({
24181     url: "/blog/get-posts.php",
24182     params: "allposts=true",
24183     text: "Loading Blog Entries..."
24184 });
24185 </code></pre>
24186
24187 * Note: old code is supported with arguments : (container, template, config)
24188
24189
24190  * @constructor
24191  * Create a new JsonView
24192  * 
24193  * @param {Object} config The config object
24194  * 
24195  */
24196 Roo.JsonView = function(config, depreciated_tpl, depreciated_config){
24197     
24198     
24199     Roo.JsonView.superclass.constructor.call(this, config, depreciated_tpl, depreciated_config);
24200
24201     var um = this.el.getUpdateManager();
24202     um.setRenderer(this);
24203     um.on("update", this.onLoad, this);
24204     um.on("failure", this.onLoadException, this);
24205
24206     /**
24207      * @event beforerender
24208      * Fires before rendering of the downloaded JSON data.
24209      * @param {Roo.JsonView} this
24210      * @param {Object} data The JSON data loaded
24211      */
24212     /**
24213      * @event load
24214      * Fires when data is loaded.
24215      * @param {Roo.JsonView} this
24216      * @param {Object} data The JSON data loaded
24217      * @param {Object} response The raw Connect response object
24218      */
24219     /**
24220      * @event loadexception
24221      * Fires when loading fails.
24222      * @param {Roo.JsonView} this
24223      * @param {Object} response The raw Connect response object
24224      */
24225     this.addEvents({
24226         'beforerender' : true,
24227         'load' : true,
24228         'loadexception' : true
24229     });
24230 };
24231 Roo.extend(Roo.JsonView, Roo.View, {
24232     /**
24233      * @type {String} The root property in the loaded JSON object that contains the data
24234      */
24235     jsonRoot : "",
24236
24237     /**
24238      * Refreshes the view.
24239      */
24240     refresh : function(){
24241         this.clearSelections();
24242         this.el.update("");
24243         var html = [];
24244         var o = this.jsonData;
24245         if(o && o.length > 0){
24246             for(var i = 0, len = o.length; i < len; i++){
24247                 var data = this.prepareData(o[i], i, o);
24248                 html[html.length] = this.tpl.apply(data);
24249             }
24250         }else{
24251             html.push(this.emptyText);
24252         }
24253         this.el.update(html.join(""));
24254         this.nodes = this.el.dom.childNodes;
24255         this.updateIndexes(0);
24256     },
24257
24258     /**
24259      * 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.
24260      * @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:
24261      <pre><code>
24262      view.load({
24263          url: "your-url.php",
24264          params: {param1: "foo", param2: "bar"}, // or a URL encoded string
24265          callback: yourFunction,
24266          scope: yourObject, //(optional scope)
24267          discardUrl: false,
24268          nocache: false,
24269          text: "Loading...",
24270          timeout: 30,
24271          scripts: false
24272      });
24273      </code></pre>
24274      * The only required property is <i>url</i>. The optional properties <i>nocache</i>, <i>text</i> and <i>scripts</i>
24275      * 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.
24276      * @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}
24277      * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
24278      * @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.
24279      */
24280     load : function(){
24281         var um = this.el.getUpdateManager();
24282         um.update.apply(um, arguments);
24283     },
24284
24285     render : function(el, response){
24286         this.clearSelections();
24287         this.el.update("");
24288         var o;
24289         try{
24290             o = Roo.util.JSON.decode(response.responseText);
24291             if(this.jsonRoot){
24292                 
24293                 o = o[this.jsonRoot];
24294             }
24295         } catch(e){
24296         }
24297         /**
24298          * The current JSON data or null
24299          */
24300         this.jsonData = o;
24301         this.beforeRender();
24302         this.refresh();
24303     },
24304
24305 /**
24306  * Get the number of records in the current JSON dataset
24307  * @return {Number}
24308  */
24309     getCount : function(){
24310         return this.jsonData ? this.jsonData.length : 0;
24311     },
24312
24313 /**
24314  * Returns the JSON object for the specified node(s)
24315  * @param {HTMLElement/Array} node The node or an array of nodes
24316  * @return {Object/Array} If you pass in an array, you get an array back, otherwise
24317  * you get the JSON object for the node
24318  */
24319     getNodeData : function(node){
24320         if(node instanceof Array){
24321             var data = [];
24322             for(var i = 0, len = node.length; i < len; i++){
24323                 data.push(this.getNodeData(node[i]));
24324             }
24325             return data;
24326         }
24327         return this.jsonData[this.indexOf(node)] || null;
24328     },
24329
24330     beforeRender : function(){
24331         this.snapshot = this.jsonData;
24332         if(this.sortInfo){
24333             this.sort.apply(this, this.sortInfo);
24334         }
24335         this.fireEvent("beforerender", this, this.jsonData);
24336     },
24337
24338     onLoad : function(el, o){
24339         this.fireEvent("load", this, this.jsonData, o);
24340     },
24341
24342     onLoadException : function(el, o){
24343         this.fireEvent("loadexception", this, o);
24344     },
24345
24346 /**
24347  * Filter the data by a specific property.
24348  * @param {String} property A property on your JSON objects
24349  * @param {String/RegExp} value Either string that the property values
24350  * should start with, or a RegExp to test against the property
24351  */
24352     filter : function(property, value){
24353         if(this.jsonData){
24354             var data = [];
24355             var ss = this.snapshot;
24356             if(typeof value == "string"){
24357                 var vlen = value.length;
24358                 if(vlen == 0){
24359                     this.clearFilter();
24360                     return;
24361                 }
24362                 value = value.toLowerCase();
24363                 for(var i = 0, len = ss.length; i < len; i++){
24364                     var o = ss[i];
24365                     if(o[property].substr(0, vlen).toLowerCase() == value){
24366                         data.push(o);
24367                     }
24368                 }
24369             } else if(value.exec){ // regex?
24370                 for(var i = 0, len = ss.length; i < len; i++){
24371                     var o = ss[i];
24372                     if(value.test(o[property])){
24373                         data.push(o);
24374                     }
24375                 }
24376             } else{
24377                 return;
24378             }
24379             this.jsonData = data;
24380             this.refresh();
24381         }
24382     },
24383
24384 /**
24385  * Filter by a function. The passed function will be called with each
24386  * object in the current dataset. If the function returns true the value is kept,
24387  * otherwise it is filtered.
24388  * @param {Function} fn
24389  * @param {Object} scope (optional) The scope of the function (defaults to this JsonView)
24390  */
24391     filterBy : function(fn, scope){
24392         if(this.jsonData){
24393             var data = [];
24394             var ss = this.snapshot;
24395             for(var i = 0, len = ss.length; i < len; i++){
24396                 var o = ss[i];
24397                 if(fn.call(scope || this, o)){
24398                     data.push(o);
24399                 }
24400             }
24401             this.jsonData = data;
24402             this.refresh();
24403         }
24404     },
24405
24406 /**
24407  * Clears the current filter.
24408  */
24409     clearFilter : function(){
24410         if(this.snapshot && this.jsonData != this.snapshot){
24411             this.jsonData = this.snapshot;
24412             this.refresh();
24413         }
24414     },
24415
24416
24417 /**
24418  * Sorts the data for this view and refreshes it.
24419  * @param {String} property A property on your JSON objects to sort on
24420  * @param {String} direction (optional) "desc" or "asc" (defaults to "asc")
24421  * @param {Function} sortType (optional) A function to call to convert the data to a sortable value.
24422  */
24423     sort : function(property, dir, sortType){
24424         this.sortInfo = Array.prototype.slice.call(arguments, 0);
24425         if(this.jsonData){
24426             var p = property;
24427             var dsc = dir && dir.toLowerCase() == "desc";
24428             var f = function(o1, o2){
24429                 var v1 = sortType ? sortType(o1[p]) : o1[p];
24430                 var v2 = sortType ? sortType(o2[p]) : o2[p];
24431                 ;
24432                 if(v1 < v2){
24433                     return dsc ? +1 : -1;
24434                 } else if(v1 > v2){
24435                     return dsc ? -1 : +1;
24436                 } else{
24437                     return 0;
24438                 }
24439             };
24440             this.jsonData.sort(f);
24441             this.refresh();
24442             if(this.jsonData != this.snapshot){
24443                 this.snapshot.sort(f);
24444             }
24445         }
24446     }
24447 });/*
24448  * Based on:
24449  * Ext JS Library 1.1.1
24450  * Copyright(c) 2006-2007, Ext JS, LLC.
24451  *
24452  * Originally Released Under LGPL - original licence link has changed is not relivant.
24453  *
24454  * Fork - LGPL
24455  * <script type="text/javascript">
24456  */
24457  
24458
24459 /**
24460  * @class Roo.ColorPalette
24461  * @extends Roo.Component
24462  * Simple color palette class for choosing colors.  The palette can be rendered to any container.<br />
24463  * Here's an example of typical usage:
24464  * <pre><code>
24465 var cp = new Roo.ColorPalette({value:'993300'});  // initial selected color
24466 cp.render('my-div');
24467
24468 cp.on('select', function(palette, selColor){
24469     // do something with selColor
24470 });
24471 </code></pre>
24472  * @constructor
24473  * Create a new ColorPalette
24474  * @param {Object} config The config object
24475  */
24476 Roo.ColorPalette = function(config){
24477     Roo.ColorPalette.superclass.constructor.call(this, config);
24478     this.addEvents({
24479         /**
24480              * @event select
24481              * Fires when a color is selected
24482              * @param {ColorPalette} this
24483              * @param {String} color The 6-digit color hex code (without the # symbol)
24484              */
24485         select: true
24486     });
24487
24488     if(this.handler){
24489         this.on("select", this.handler, this.scope, true);
24490     }
24491 };
24492 Roo.extend(Roo.ColorPalette, Roo.Component, {
24493     /**
24494      * @cfg {String} itemCls
24495      * The CSS class to apply to the containing element (defaults to "x-color-palette")
24496      */
24497     itemCls : "x-color-palette",
24498     /**
24499      * @cfg {String} value
24500      * The initial color to highlight (should be a valid 6-digit color hex code without the # symbol).  Note that
24501      * the hex codes are case-sensitive.
24502      */
24503     value : null,
24504     clickEvent:'click',
24505     // private
24506     ctype: "Roo.ColorPalette",
24507
24508     /**
24509      * @cfg {Boolean} allowReselect If set to true then reselecting a color that is already selected fires the selection event
24510      */
24511     allowReselect : false,
24512
24513     /**
24514      * <p>An array of 6-digit color hex code strings (without the # symbol).  This array can contain any number
24515      * of colors, and each hex code should be unique.  The width of the palette is controlled via CSS by adjusting
24516      * the width property of the 'x-color-palette' class (or assigning a custom class), so you can balance the number
24517      * of colors with the width setting until the box is symmetrical.</p>
24518      * <p>You can override individual colors if needed:</p>
24519      * <pre><code>
24520 var cp = new Roo.ColorPalette();
24521 cp.colors[0] = "FF0000";  // change the first box to red
24522 </code></pre>
24523
24524 Or you can provide a custom array of your own for complete control:
24525 <pre><code>
24526 var cp = new Roo.ColorPalette();
24527 cp.colors = ["000000", "993300", "333300"];
24528 </code></pre>
24529      * @type Array
24530      */
24531     colors : [
24532         "000000", "993300", "333300", "003300", "003366", "000080", "333399", "333333",
24533         "800000", "FF6600", "808000", "008000", "008080", "0000FF", "666699", "808080",
24534         "FF0000", "FF9900", "99CC00", "339966", "33CCCC", "3366FF", "800080", "969696",
24535         "FF00FF", "FFCC00", "FFFF00", "00FF00", "00FFFF", "00CCFF", "993366", "C0C0C0",
24536         "FF99CC", "FFCC99", "FFFF99", "CCFFCC", "CCFFFF", "99CCFF", "CC99FF", "FFFFFF"
24537     ],
24538
24539     // private
24540     onRender : function(container, position){
24541         var t = new Roo.MasterTemplate(
24542             '<tpl><a href="#" class="color-{0}" hidefocus="on"><em><span style="background:#{0}" unselectable="on">&#160;</span></em></a></tpl>'
24543         );
24544         var c = this.colors;
24545         for(var i = 0, len = c.length; i < len; i++){
24546             t.add([c[i]]);
24547         }
24548         var el = document.createElement("div");
24549         el.className = this.itemCls;
24550         t.overwrite(el);
24551         container.dom.insertBefore(el, position);
24552         this.el = Roo.get(el);
24553         this.el.on(this.clickEvent, this.handleClick,  this, {delegate: "a"});
24554         if(this.clickEvent != 'click'){
24555             this.el.on('click', Roo.emptyFn,  this, {delegate: "a", preventDefault:true});
24556         }
24557     },
24558
24559     // private
24560     afterRender : function(){
24561         Roo.ColorPalette.superclass.afterRender.call(this);
24562         if(this.value){
24563             var s = this.value;
24564             this.value = null;
24565             this.select(s);
24566         }
24567     },
24568
24569     // private
24570     handleClick : function(e, t){
24571         e.preventDefault();
24572         if(!this.disabled){
24573             var c = t.className.match(/(?:^|\s)color-(.{6})(?:\s|$)/)[1];
24574             this.select(c.toUpperCase());
24575         }
24576     },
24577
24578     /**
24579      * Selects the specified color in the palette (fires the select event)
24580      * @param {String} color A valid 6-digit color hex code (# will be stripped if included)
24581      */
24582     select : function(color){
24583         color = color.replace("#", "");
24584         if(color != this.value || this.allowReselect){
24585             var el = this.el;
24586             if(this.value){
24587                 el.child("a.color-"+this.value).removeClass("x-color-palette-sel");
24588             }
24589             el.child("a.color-"+color).addClass("x-color-palette-sel");
24590             this.value = color;
24591             this.fireEvent("select", this, color);
24592         }
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.DatePicker
24607  * @extends Roo.Component
24608  * Simple date picker class.
24609  * @constructor
24610  * Create a new DatePicker
24611  * @param {Object} config The config object
24612  */
24613 Roo.DatePicker = function(config){
24614     Roo.DatePicker.superclass.constructor.call(this, config);
24615
24616     this.value = config && config.value ?
24617                  config.value.clearTime() : new Date().clearTime();
24618
24619     this.addEvents({
24620         /**
24621              * @event select
24622              * Fires when a date is selected
24623              * @param {DatePicker} this
24624              * @param {Date} date The selected date
24625              */
24626         'select': true,
24627         /**
24628              * @event monthchange
24629              * Fires when the displayed month changes 
24630              * @param {DatePicker} this
24631              * @param {Date} date The selected month
24632              */
24633         'monthchange': true
24634     });
24635
24636     if(this.handler){
24637         this.on("select", this.handler,  this.scope || this);
24638     }
24639     // build the disabledDatesRE
24640     if(!this.disabledDatesRE && this.disabledDates){
24641         var dd = this.disabledDates;
24642         var re = "(?:";
24643         for(var i = 0; i < dd.length; i++){
24644             re += dd[i];
24645             if(i != dd.length-1) re += "|";
24646         }
24647         this.disabledDatesRE = new RegExp(re + ")");
24648     }
24649 };
24650
24651 Roo.extend(Roo.DatePicker, Roo.Component, {
24652     /**
24653      * @cfg {String} todayText
24654      * The text to display on the button that selects the current date (defaults to "Today")
24655      */
24656     todayText : "Today",
24657     /**
24658      * @cfg {String} okText
24659      * The text to display on the ok button
24660      */
24661     okText : "&#160;OK&#160;", // &#160; to give the user extra clicking room
24662     /**
24663      * @cfg {String} cancelText
24664      * The text to display on the cancel button
24665      */
24666     cancelText : "Cancel",
24667     /**
24668      * @cfg {String} todayTip
24669      * The tooltip to display for the button that selects the current date (defaults to "{current date} (Spacebar)")
24670      */
24671     todayTip : "{0} (Spacebar)",
24672     /**
24673      * @cfg {Date} minDate
24674      * Minimum allowable date (JavaScript date object, defaults to null)
24675      */
24676     minDate : null,
24677     /**
24678      * @cfg {Date} maxDate
24679      * Maximum allowable date (JavaScript date object, defaults to null)
24680      */
24681     maxDate : null,
24682     /**
24683      * @cfg {String} minText
24684      * The error text to display if the minDate validation fails (defaults to "This date is before the minimum date")
24685      */
24686     minText : "This date is before the minimum date",
24687     /**
24688      * @cfg {String} maxText
24689      * The error text to display if the maxDate validation fails (defaults to "This date is after the maximum date")
24690      */
24691     maxText : "This date is after the maximum date",
24692     /**
24693      * @cfg {String} format
24694      * The default date format string which can be overriden for localization support.  The format must be
24695      * valid according to {@link Date#parseDate} (defaults to 'm/d/y').
24696      */
24697     format : "m/d/y",
24698     /**
24699      * @cfg {Array} disabledDays
24700      * An array of days to disable, 0-based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
24701      */
24702     disabledDays : null,
24703     /**
24704      * @cfg {String} disabledDaysText
24705      * The tooltip to display when the date falls on a disabled day (defaults to "")
24706      */
24707     disabledDaysText : "",
24708     /**
24709      * @cfg {RegExp} disabledDatesRE
24710      * JavaScript regular expression used to disable a pattern of dates (defaults to null)
24711      */
24712     disabledDatesRE : null,
24713     /**
24714      * @cfg {String} disabledDatesText
24715      * The tooltip text to display when the date falls on a disabled date (defaults to "")
24716      */
24717     disabledDatesText : "",
24718     /**
24719      * @cfg {Boolean} constrainToViewport
24720      * True to constrain the date picker to the viewport (defaults to true)
24721      */
24722     constrainToViewport : true,
24723     /**
24724      * @cfg {Array} monthNames
24725      * An array of textual month names which can be overriden for localization support (defaults to Date.monthNames)
24726      */
24727     monthNames : Date.monthNames,
24728     /**
24729      * @cfg {Array} dayNames
24730      * An array of textual day names which can be overriden for localization support (defaults to Date.dayNames)
24731      */
24732     dayNames : Date.dayNames,
24733     /**
24734      * @cfg {String} nextText
24735      * The next month navigation button tooltip (defaults to 'Next Month (Control+Right)')
24736      */
24737     nextText: 'Next Month (Control+Right)',
24738     /**
24739      * @cfg {String} prevText
24740      * The previous month navigation button tooltip (defaults to 'Previous Month (Control+Left)')
24741      */
24742     prevText: 'Previous Month (Control+Left)',
24743     /**
24744      * @cfg {String} monthYearText
24745      * The header month selector tooltip (defaults to 'Choose a month (Control+Up/Down to move years)')
24746      */
24747     monthYearText: 'Choose a month (Control+Up/Down to move years)',
24748     /**
24749      * @cfg {Number} startDay
24750      * Day index at which the week should begin, 0-based (defaults to 0, which is Sunday)
24751      */
24752     startDay : 0,
24753     /**
24754      * @cfg {Bool} showClear
24755      * Show a clear button (usefull for date form elements that can be blank.)
24756      */
24757     
24758     showClear: false,
24759     
24760     /**
24761      * Sets the value of the date field
24762      * @param {Date} value The date to set
24763      */
24764     setValue : function(value){
24765         var old = this.value;
24766         this.value = value.clearTime(true);
24767         if(this.el){
24768             this.update(this.value);
24769         }
24770     },
24771
24772     /**
24773      * Gets the current selected value of the date field
24774      * @return {Date} The selected date
24775      */
24776     getValue : function(){
24777         return this.value;
24778     },
24779
24780     // private
24781     focus : function(){
24782         if(this.el){
24783             this.update(this.activeDate);
24784         }
24785     },
24786
24787     // private
24788     onRender : function(container, position){
24789         var m = [
24790              '<table cellspacing="0">',
24791                 '<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>',
24792                 '<tr><td colspan="3"><table class="x-date-inner" cellspacing="0"><thead><tr>'];
24793         var dn = this.dayNames;
24794         for(var i = 0; i < 7; i++){
24795             var d = this.startDay+i;
24796             if(d > 6){
24797                 d = d-7;
24798             }
24799             m.push("<th><span>", dn[d].substr(0,1), "</span></th>");
24800         }
24801         m[m.length] = "</tr></thead><tbody><tr>";
24802         for(var i = 0; i < 42; i++) {
24803             if(i % 7 == 0 && i != 0){
24804                 m[m.length] = "</tr><tr>";
24805             }
24806             m[m.length] = '<td><a href="#" hidefocus="on" class="x-date-date" tabIndex="1"><em><span></span></em></a></td>';
24807         }
24808         m[m.length] = '</tr></tbody></table></td></tr><tr>'+
24809             '<td colspan="3" class="x-date-bottom" align="center"></td></tr></table><div class="x-date-mp"></div>';
24810
24811         var el = document.createElement("div");
24812         el.className = "x-date-picker";
24813         el.innerHTML = m.join("");
24814
24815         container.dom.insertBefore(el, position);
24816
24817         this.el = Roo.get(el);
24818         this.eventEl = Roo.get(el.firstChild);
24819
24820         new Roo.util.ClickRepeater(this.el.child("td.x-date-left a"), {
24821             handler: this.showPrevMonth,
24822             scope: this,
24823             preventDefault:true,
24824             stopDefault:true
24825         });
24826
24827         new Roo.util.ClickRepeater(this.el.child("td.x-date-right a"), {
24828             handler: this.showNextMonth,
24829             scope: this,
24830             preventDefault:true,
24831             stopDefault:true
24832         });
24833
24834         this.eventEl.on("mousewheel", this.handleMouseWheel,  this);
24835
24836         this.monthPicker = this.el.down('div.x-date-mp');
24837         this.monthPicker.enableDisplayMode('block');
24838         
24839         var kn = new Roo.KeyNav(this.eventEl, {
24840             "left" : function(e){
24841                 e.ctrlKey ?
24842                     this.showPrevMonth() :
24843                     this.update(this.activeDate.add("d", -1));
24844             },
24845
24846             "right" : function(e){
24847                 e.ctrlKey ?
24848                     this.showNextMonth() :
24849                     this.update(this.activeDate.add("d", 1));
24850             },
24851
24852             "up" : function(e){
24853                 e.ctrlKey ?
24854                     this.showNextYear() :
24855                     this.update(this.activeDate.add("d", -7));
24856             },
24857
24858             "down" : function(e){
24859                 e.ctrlKey ?
24860                     this.showPrevYear() :
24861                     this.update(this.activeDate.add("d", 7));
24862             },
24863
24864             "pageUp" : function(e){
24865                 this.showNextMonth();
24866             },
24867
24868             "pageDown" : function(e){
24869                 this.showPrevMonth();
24870             },
24871
24872             "enter" : function(e){
24873                 e.stopPropagation();
24874                 return true;
24875             },
24876
24877             scope : this
24878         });
24879
24880         this.eventEl.on("click", this.handleDateClick,  this, {delegate: "a.x-date-date"});
24881
24882         this.eventEl.addKeyListener(Roo.EventObject.SPACE, this.selectToday,  this);
24883
24884         this.el.unselectable();
24885         
24886         this.cells = this.el.select("table.x-date-inner tbody td");
24887         this.textNodes = this.el.query("table.x-date-inner tbody span");
24888
24889         this.mbtn = new Roo.Button(this.el.child("td.x-date-middle", true), {
24890             text: "&#160;",
24891             tooltip: this.monthYearText
24892         });
24893
24894         this.mbtn.on('click', this.showMonthPicker, this);
24895         this.mbtn.el.child(this.mbtn.menuClassTarget).addClass("x-btn-with-menu");
24896
24897
24898         var today = (new Date()).dateFormat(this.format);
24899         
24900         var baseTb = new Roo.Toolbar(this.el.child("td.x-date-bottom", true));
24901         if (this.showClear) {
24902             baseTb.add( new Roo.Toolbar.Fill());
24903         }
24904         baseTb.add({
24905             text: String.format(this.todayText, today),
24906             tooltip: String.format(this.todayTip, today),
24907             handler: this.selectToday,
24908             scope: this
24909         });
24910         
24911         //var todayBtn = new Roo.Button(this.el.child("td.x-date-bottom", true), {
24912             
24913         //});
24914         if (this.showClear) {
24915             
24916             baseTb.add( new Roo.Toolbar.Fill());
24917             baseTb.add({
24918                 text: '&#160;',
24919                 cls: 'x-btn-icon x-btn-clear',
24920                 handler: function() {
24921                     //this.value = '';
24922                     this.fireEvent("select", this, '');
24923                 },
24924                 scope: this
24925             });
24926         }
24927         
24928         
24929         if(Roo.isIE){
24930             this.el.repaint();
24931         }
24932         this.update(this.value);
24933     },
24934
24935     createMonthPicker : function(){
24936         if(!this.monthPicker.dom.firstChild){
24937             var buf = ['<table border="0" cellspacing="0">'];
24938             for(var i = 0; i < 6; i++){
24939                 buf.push(
24940                     '<tr><td class="x-date-mp-month"><a href="#">', this.monthNames[i].substr(0, 3), '</a></td>',
24941                     '<td class="x-date-mp-month x-date-mp-sep"><a href="#">', this.monthNames[i+6].substr(0, 3), '</a></td>',
24942                     i == 0 ?
24943                     '<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>' :
24944                     '<td class="x-date-mp-year"><a href="#"></a></td><td class="x-date-mp-year"><a href="#"></a></td></tr>'
24945                 );
24946             }
24947             buf.push(
24948                 '<tr class="x-date-mp-btns"><td colspan="4"><button type="button" class="x-date-mp-ok">',
24949                     this.okText,
24950                     '</button><button type="button" class="x-date-mp-cancel">',
24951                     this.cancelText,
24952                     '</button></td></tr>',
24953                 '</table>'
24954             );
24955             this.monthPicker.update(buf.join(''));
24956             this.monthPicker.on('click', this.onMonthClick, this);
24957             this.monthPicker.on('dblclick', this.onMonthDblClick, this);
24958
24959             this.mpMonths = this.monthPicker.select('td.x-date-mp-month');
24960             this.mpYears = this.monthPicker.select('td.x-date-mp-year');
24961
24962             this.mpMonths.each(function(m, a, i){
24963                 i += 1;
24964                 if((i%2) == 0){
24965                     m.dom.xmonth = 5 + Math.round(i * .5);
24966                 }else{
24967                     m.dom.xmonth = Math.round((i-1) * .5);
24968                 }
24969             });
24970         }
24971     },
24972
24973     showMonthPicker : function(){
24974         this.createMonthPicker();
24975         var size = this.el.getSize();
24976         this.monthPicker.setSize(size);
24977         this.monthPicker.child('table').setSize(size);
24978
24979         this.mpSelMonth = (this.activeDate || this.value).getMonth();
24980         this.updateMPMonth(this.mpSelMonth);
24981         this.mpSelYear = (this.activeDate || this.value).getFullYear();
24982         this.updateMPYear(this.mpSelYear);
24983
24984         this.monthPicker.slideIn('t', {duration:.2});
24985     },
24986
24987     updateMPYear : function(y){
24988         this.mpyear = y;
24989         var ys = this.mpYears.elements;
24990         for(var i = 1; i <= 10; i++){
24991             var td = ys[i-1], y2;
24992             if((i%2) == 0){
24993                 y2 = y + Math.round(i * .5);
24994                 td.firstChild.innerHTML = y2;
24995                 td.xyear = y2;
24996             }else{
24997                 y2 = y - (5-Math.round(i * .5));
24998                 td.firstChild.innerHTML = y2;
24999                 td.xyear = y2;
25000             }
25001             this.mpYears.item(i-1)[y2 == this.mpSelYear ? 'addClass' : 'removeClass']('x-date-mp-sel');
25002         }
25003     },
25004
25005     updateMPMonth : function(sm){
25006         this.mpMonths.each(function(m, a, i){
25007             m[m.dom.xmonth == sm ? 'addClass' : 'removeClass']('x-date-mp-sel');
25008         });
25009     },
25010
25011     selectMPMonth: function(m){
25012         
25013     },
25014
25015     onMonthClick : function(e, t){
25016         e.stopEvent();
25017         var el = new Roo.Element(t), pn;
25018         if(el.is('button.x-date-mp-cancel')){
25019             this.hideMonthPicker();
25020         }
25021         else if(el.is('button.x-date-mp-ok')){
25022             this.update(new Date(this.mpSelYear, this.mpSelMonth, (this.activeDate || this.value).getDate()));
25023             this.hideMonthPicker();
25024         }
25025         else if(pn = el.up('td.x-date-mp-month', 2)){
25026             this.mpMonths.removeClass('x-date-mp-sel');
25027             pn.addClass('x-date-mp-sel');
25028             this.mpSelMonth = pn.dom.xmonth;
25029         }
25030         else if(pn = el.up('td.x-date-mp-year', 2)){
25031             this.mpYears.removeClass('x-date-mp-sel');
25032             pn.addClass('x-date-mp-sel');
25033             this.mpSelYear = pn.dom.xyear;
25034         }
25035         else if(el.is('a.x-date-mp-prev')){
25036             this.updateMPYear(this.mpyear-10);
25037         }
25038         else if(el.is('a.x-date-mp-next')){
25039             this.updateMPYear(this.mpyear+10);
25040         }
25041     },
25042
25043     onMonthDblClick : function(e, t){
25044         e.stopEvent();
25045         var el = new Roo.Element(t), pn;
25046         if(pn = el.up('td.x-date-mp-month', 2)){
25047             this.update(new Date(this.mpSelYear, pn.dom.xmonth, (this.activeDate || this.value).getDate()));
25048             this.hideMonthPicker();
25049         }
25050         else if(pn = el.up('td.x-date-mp-year', 2)){
25051             this.update(new Date(pn.dom.xyear, this.mpSelMonth, (this.activeDate || this.value).getDate()));
25052             this.hideMonthPicker();
25053         }
25054     },
25055
25056     hideMonthPicker : function(disableAnim){
25057         if(this.monthPicker){
25058             if(disableAnim === true){
25059                 this.monthPicker.hide();
25060             }else{
25061                 this.monthPicker.slideOut('t', {duration:.2});
25062             }
25063         }
25064     },
25065
25066     // private
25067     showPrevMonth : function(e){
25068         this.update(this.activeDate.add("mo", -1));
25069     },
25070
25071     // private
25072     showNextMonth : function(e){
25073         this.update(this.activeDate.add("mo", 1));
25074     },
25075
25076     // private
25077     showPrevYear : function(){
25078         this.update(this.activeDate.add("y", -1));
25079     },
25080
25081     // private
25082     showNextYear : function(){
25083         this.update(this.activeDate.add("y", 1));
25084     },
25085
25086     // private
25087     handleMouseWheel : function(e){
25088         var delta = e.getWheelDelta();
25089         if(delta > 0){
25090             this.showPrevMonth();
25091             e.stopEvent();
25092         } else if(delta < 0){
25093             this.showNextMonth();
25094             e.stopEvent();
25095         }
25096     },
25097
25098     // private
25099     handleDateClick : function(e, t){
25100         e.stopEvent();
25101         if(t.dateValue && !Roo.fly(t.parentNode).hasClass("x-date-disabled")){
25102             this.setValue(new Date(t.dateValue));
25103             this.fireEvent("select", this, this.value);
25104         }
25105     },
25106
25107     // private
25108     selectToday : function(){
25109         this.setValue(new Date().clearTime());
25110         this.fireEvent("select", this, this.value);
25111     },
25112
25113     // private
25114     update : function(date)
25115     {
25116         var vd = this.activeDate;
25117         this.activeDate = date;
25118         if(vd && this.el){
25119             var t = date.getTime();
25120             if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
25121                 this.cells.removeClass("x-date-selected");
25122                 this.cells.each(function(c){
25123                    if(c.dom.firstChild.dateValue == t){
25124                        c.addClass("x-date-selected");
25125                        setTimeout(function(){
25126                             try{c.dom.firstChild.focus();}catch(e){}
25127                        }, 50);
25128                        return false;
25129                    }
25130                 });
25131                 return;
25132             }
25133         }
25134         
25135         var days = date.getDaysInMonth();
25136         var firstOfMonth = date.getFirstDateOfMonth();
25137         var startingPos = firstOfMonth.getDay()-this.startDay;
25138
25139         if(startingPos <= this.startDay){
25140             startingPos += 7;
25141         }
25142
25143         var pm = date.add("mo", -1);
25144         var prevStart = pm.getDaysInMonth()-startingPos;
25145
25146         var cells = this.cells.elements;
25147         var textEls = this.textNodes;
25148         days += startingPos;
25149
25150         // convert everything to numbers so it's fast
25151         var day = 86400000;
25152         var d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime();
25153         var today = new Date().clearTime().getTime();
25154         var sel = date.clearTime().getTime();
25155         var min = this.minDate ? this.minDate.clearTime() : Number.NEGATIVE_INFINITY;
25156         var max = this.maxDate ? this.maxDate.clearTime() : Number.POSITIVE_INFINITY;
25157         var ddMatch = this.disabledDatesRE;
25158         var ddText = this.disabledDatesText;
25159         var ddays = this.disabledDays ? this.disabledDays.join("") : false;
25160         var ddaysText = this.disabledDaysText;
25161         var format = this.format;
25162
25163         var setCellClass = function(cal, cell){
25164             cell.title = "";
25165             var t = d.getTime();
25166             cell.firstChild.dateValue = t;
25167             if(t == today){
25168                 cell.className += " x-date-today";
25169                 cell.title = cal.todayText;
25170             }
25171             if(t == sel){
25172                 cell.className += " x-date-selected";
25173                 setTimeout(function(){
25174                     try{cell.firstChild.focus();}catch(e){}
25175                 }, 50);
25176             }
25177             // disabling
25178             if(t < min) {
25179                 cell.className = " x-date-disabled";
25180                 cell.title = cal.minText;
25181                 return;
25182             }
25183             if(t > max) {
25184                 cell.className = " x-date-disabled";
25185                 cell.title = cal.maxText;
25186                 return;
25187             }
25188             if(ddays){
25189                 if(ddays.indexOf(d.getDay()) != -1){
25190                     cell.title = ddaysText;
25191                     cell.className = " x-date-disabled";
25192                 }
25193             }
25194             if(ddMatch && format){
25195                 var fvalue = d.dateFormat(format);
25196                 if(ddMatch.test(fvalue)){
25197                     cell.title = ddText.replace("%0", fvalue);
25198                     cell.className = " x-date-disabled";
25199                 }
25200             }
25201         };
25202
25203         var i = 0;
25204         for(; i < startingPos; i++) {
25205             textEls[i].innerHTML = (++prevStart);
25206             d.setDate(d.getDate()+1);
25207             cells[i].className = "x-date-prevday";
25208             setCellClass(this, cells[i]);
25209         }
25210         for(; i < days; i++){
25211             intDay = i - startingPos + 1;
25212             textEls[i].innerHTML = (intDay);
25213             d.setDate(d.getDate()+1);
25214             cells[i].className = "x-date-active";
25215             setCellClass(this, cells[i]);
25216         }
25217         var extraDays = 0;
25218         for(; i < 42; i++) {
25219              textEls[i].innerHTML = (++extraDays);
25220              d.setDate(d.getDate()+1);
25221              cells[i].className = "x-date-nextday";
25222              setCellClass(this, cells[i]);
25223         }
25224
25225         this.mbtn.setText(this.monthNames[date.getMonth()] + " " + date.getFullYear());
25226         this.fireEvent('monthchange', this, date);
25227         
25228         if(!this.internalRender){
25229             var main = this.el.dom.firstChild;
25230             var w = main.offsetWidth;
25231             this.el.setWidth(w + this.el.getBorderWidth("lr"));
25232             Roo.fly(main).setWidth(w);
25233             this.internalRender = true;
25234             // opera does not respect the auto grow header center column
25235             // then, after it gets a width opera refuses to recalculate
25236             // without a second pass
25237             if(Roo.isOpera && !this.secondPass){
25238                 main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + "px";
25239                 this.secondPass = true;
25240                 this.update.defer(10, this, [date]);
25241             }
25242         }
25243         
25244         
25245     }
25246 });        /*
25247  * Based on:
25248  * Ext JS Library 1.1.1
25249  * Copyright(c) 2006-2007, Ext JS, LLC.
25250  *
25251  * Originally Released Under LGPL - original licence link has changed is not relivant.
25252  *
25253  * Fork - LGPL
25254  * <script type="text/javascript">
25255  */
25256 /**
25257  * @class Roo.TabPanel
25258  * @extends Roo.util.Observable
25259  * A lightweight tab container.
25260  * <br><br>
25261  * Usage:
25262  * <pre><code>
25263 // basic tabs 1, built from existing content
25264 var tabs = new Roo.TabPanel("tabs1");
25265 tabs.addTab("script", "View Script");
25266 tabs.addTab("markup", "View Markup");
25267 tabs.activate("script");
25268
25269 // more advanced tabs, built from javascript
25270 var jtabs = new Roo.TabPanel("jtabs");
25271 jtabs.addTab("jtabs-1", "Normal Tab", "My content was added during construction.");
25272
25273 // set up the UpdateManager
25274 var tab2 = jtabs.addTab("jtabs-2", "Ajax Tab 1");
25275 var updater = tab2.getUpdateManager();
25276 updater.setDefaultUrl("ajax1.htm");
25277 tab2.on('activate', updater.refresh, updater, true);
25278
25279 // Use setUrl for Ajax loading
25280 var tab3 = jtabs.addTab("jtabs-3", "Ajax Tab 2");
25281 tab3.setUrl("ajax2.htm", null, true);
25282
25283 // Disabled tab
25284 var tab4 = jtabs.addTab("tabs1-5", "Disabled Tab", "Can't see me cause I'm disabled");
25285 tab4.disable();
25286
25287 jtabs.activate("jtabs-1");
25288  * </code></pre>
25289  * @constructor
25290  * Create a new TabPanel.
25291  * @param {String/HTMLElement/Roo.Element} container The id, DOM element or Roo.Element container where this TabPanel is to be rendered.
25292  * @param {Object/Boolean} config Config object to set any properties for this TabPanel, or true to render the tabs on the bottom.
25293  */
25294 Roo.TabPanel = function(container, config){
25295     /**
25296     * The container element for this TabPanel.
25297     * @type Roo.Element
25298     */
25299     this.el = Roo.get(container, true);
25300     if(config){
25301         if(typeof config == "boolean"){
25302             this.tabPosition = config ? "bottom" : "top";
25303         }else{
25304             Roo.apply(this, config);
25305         }
25306     }
25307     if(this.tabPosition == "bottom"){
25308         this.bodyEl = Roo.get(this.createBody(this.el.dom));
25309         this.el.addClass("x-tabs-bottom");
25310     }
25311     this.stripWrap = Roo.get(this.createStrip(this.el.dom), true);
25312     this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true);
25313     this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true);
25314     if(Roo.isIE){
25315         Roo.fly(this.stripWrap.dom.firstChild).setStyle("overflow-x", "hidden");
25316     }
25317     if(this.tabPosition != "bottom"){
25318         /** The body element that contains {@link Roo.TabPanelItem} bodies. +
25319          * @type Roo.Element
25320          */
25321         this.bodyEl = Roo.get(this.createBody(this.el.dom));
25322         this.el.addClass("x-tabs-top");
25323     }
25324     this.items = [];
25325
25326     this.bodyEl.setStyle("position", "relative");
25327
25328     this.active = null;
25329     this.activateDelegate = this.activate.createDelegate(this);
25330
25331     this.addEvents({
25332         /**
25333          * @event tabchange
25334          * Fires when the active tab changes
25335          * @param {Roo.TabPanel} this
25336          * @param {Roo.TabPanelItem} activePanel The new active tab
25337          */
25338         "tabchange": true,
25339         /**
25340          * @event beforetabchange
25341          * Fires before the active tab changes, set cancel to true on the "e" parameter to cancel the change
25342          * @param {Roo.TabPanel} this
25343          * @param {Object} e Set cancel to true on this object to cancel the tab change
25344          * @param {Roo.TabPanelItem} tab The tab being changed to
25345          */
25346         "beforetabchange" : true
25347     });
25348
25349     Roo.EventManager.onWindowResize(this.onResize, this);
25350     this.cpad = this.el.getPadding("lr");
25351     this.hiddenCount = 0;
25352
25353
25354     // toolbar on the tabbar support...
25355     if (this.toolbar) {
25356         var tcfg = this.toolbar;
25357         tcfg.container = this.stripEl.child('td.x-tab-strip-toolbar');  
25358         this.toolbar = new Roo.Toolbar(tcfg);
25359         if (Roo.isSafari) {
25360             var tbl = tcfg.container.child('table', true);
25361             tbl.setAttribute('width', '100%');
25362         }
25363         
25364     }
25365    
25366
25367
25368     Roo.TabPanel.superclass.constructor.call(this);
25369 };
25370
25371 Roo.extend(Roo.TabPanel, Roo.util.Observable, {
25372     /*
25373      *@cfg {String} tabPosition "top" or "bottom" (defaults to "top")
25374      */
25375     tabPosition : "top",
25376     /*
25377      *@cfg {Number} currentTabWidth The width of the current tab (defaults to 0)
25378      */
25379     currentTabWidth : 0,
25380     /*
25381      *@cfg {Number} minTabWidth The minimum width of a tab (defaults to 40) (ignored if {@link #resizeTabs} is not true)
25382      */
25383     minTabWidth : 40,
25384     /*
25385      *@cfg {Number} maxTabWidth The maximum width of a tab (defaults to 250) (ignored if {@link #resizeTabs} is not true)
25386      */
25387     maxTabWidth : 250,
25388     /*
25389      *@cfg {Number} preferredTabWidth The preferred (default) width of a tab (defaults to 175) (ignored if {@link #resizeTabs} is not true)
25390      */
25391     preferredTabWidth : 175,
25392     /*
25393      *@cfg {Boolean} resizeTabs True to enable dynamic tab resizing (defaults to false)
25394      */
25395     resizeTabs : false,
25396     /*
25397      *@cfg {Boolean} monitorResize Set this to true to turn on window resize monitoring (ignored if {@link #resizeTabs} is not true) (defaults to true)
25398      */
25399     monitorResize : true,
25400     /*
25401      *@cfg {Object} toolbar xtype description of toolbar to show at the right of the tab bar. 
25402      */
25403     toolbar : false,
25404
25405     /**
25406      * Creates a new {@link Roo.TabPanelItem} by looking for an existing element with the provided id -- if it's not found it creates one.
25407      * @param {String} id The id of the div to use <b>or create</b>
25408      * @param {String} text The text for the tab
25409      * @param {String} content (optional) Content to put in the TabPanelItem body
25410      * @param {Boolean} closable (optional) True to create a close icon on the tab
25411      * @return {Roo.TabPanelItem} The created TabPanelItem
25412      */
25413     addTab : function(id, text, content, closable){
25414         var item = new Roo.TabPanelItem(this, id, text, closable);
25415         this.addTabItem(item);
25416         if(content){
25417             item.setContent(content);
25418         }
25419         return item;
25420     },
25421
25422     /**
25423      * Returns the {@link Roo.TabPanelItem} with the specified id/index
25424      * @param {String/Number} id The id or index of the TabPanelItem to fetch.
25425      * @return {Roo.TabPanelItem}
25426      */
25427     getTab : function(id){
25428         return this.items[id];
25429     },
25430
25431     /**
25432      * Hides the {@link Roo.TabPanelItem} with the specified id/index
25433      * @param {String/Number} id The id or index of the TabPanelItem to hide.
25434      */
25435     hideTab : function(id){
25436         var t = this.items[id];
25437         if(!t.isHidden()){
25438            t.setHidden(true);
25439            this.hiddenCount++;
25440            this.autoSizeTabs();
25441         }
25442     },
25443
25444     /**
25445      * "Unhides" the {@link Roo.TabPanelItem} with the specified id/index.
25446      * @param {String/Number} id The id or index of the TabPanelItem to unhide.
25447      */
25448     unhideTab : function(id){
25449         var t = this.items[id];
25450         if(t.isHidden()){
25451            t.setHidden(false);
25452            this.hiddenCount--;
25453            this.autoSizeTabs();
25454         }
25455     },
25456
25457     /**
25458      * Adds an existing {@link Roo.TabPanelItem}.
25459      * @param {Roo.TabPanelItem} item The TabPanelItem to add
25460      */
25461     addTabItem : function(item){
25462         this.items[item.id] = item;
25463         this.items.push(item);
25464         if(this.resizeTabs){
25465            item.setWidth(this.currentTabWidth || this.preferredTabWidth);
25466            this.autoSizeTabs();
25467         }else{
25468             item.autoSize();
25469         }
25470     },
25471
25472     /**
25473      * Removes a {@link Roo.TabPanelItem}.
25474      * @param {String/Number} id The id or index of the TabPanelItem to remove.
25475      */
25476     removeTab : function(id){
25477         var items = this.items;
25478         var tab = items[id];
25479         if(!tab) { return; }
25480         var index = items.indexOf(tab);
25481         if(this.active == tab && items.length > 1){
25482             var newTab = this.getNextAvailable(index);
25483             if(newTab) {
25484                 newTab.activate();
25485             }
25486         }
25487         this.stripEl.dom.removeChild(tab.pnode.dom);
25488         if(tab.bodyEl.dom.parentNode == this.bodyEl.dom){ // if it was moved already prevent error
25489             this.bodyEl.dom.removeChild(tab.bodyEl.dom);
25490         }
25491         items.splice(index, 1);
25492         delete this.items[tab.id];
25493         tab.fireEvent("close", tab);
25494         tab.purgeListeners();
25495         this.autoSizeTabs();
25496     },
25497
25498     getNextAvailable : function(start){
25499         var items = this.items;
25500         var index = start;
25501         // look for a next tab that will slide over to
25502         // replace the one being removed
25503         while(index < items.length){
25504             var item = items[++index];
25505             if(item && !item.isHidden()){
25506                 return item;
25507             }
25508         }
25509         // if one isn't found select the previous tab (on the left)
25510         index = start;
25511         while(index >= 0){
25512             var item = items[--index];
25513             if(item && !item.isHidden()){
25514                 return item;
25515             }
25516         }
25517         return null;
25518     },
25519
25520     /**
25521      * Disables a {@link Roo.TabPanelItem}. It cannot be the active tab, if it is this call is ignored.
25522      * @param {String/Number} id The id or index of the TabPanelItem to disable.
25523      */
25524     disableTab : function(id){
25525         var tab = this.items[id];
25526         if(tab && this.active != tab){
25527             tab.disable();
25528         }
25529     },
25530
25531     /**
25532      * Enables a {@link Roo.TabPanelItem} that is disabled.
25533      * @param {String/Number} id The id or index of the TabPanelItem to enable.
25534      */
25535     enableTab : function(id){
25536         var tab = this.items[id];
25537         tab.enable();
25538     },
25539
25540     /**
25541      * Activates a {@link Roo.TabPanelItem}. The currently active one will be deactivated.
25542      * @param {String/Number} id The id or index of the TabPanelItem to activate.
25543      * @return {Roo.TabPanelItem} The TabPanelItem.
25544      */
25545     activate : function(id){
25546         var tab = this.items[id];
25547         if(!tab){
25548             return null;
25549         }
25550         if(tab == this.active || tab.disabled){
25551             return tab;
25552         }
25553         var e = {};
25554         this.fireEvent("beforetabchange", this, e, tab);
25555         if(e.cancel !== true && !tab.disabled){
25556             if(this.active){
25557                 this.active.hide();
25558             }
25559             this.active = this.items[id];
25560             this.active.show();
25561             this.fireEvent("tabchange", this, this.active);
25562         }
25563         return tab;
25564     },
25565
25566     /**
25567      * Gets the active {@link Roo.TabPanelItem}.
25568      * @return {Roo.TabPanelItem} The active TabPanelItem or null if none are active.
25569      */
25570     getActiveTab : function(){
25571         return this.active;
25572     },
25573
25574     /**
25575      * Updates the tab body element to fit the height of the container element
25576      * for overflow scrolling
25577      * @param {Number} targetHeight (optional) Override the starting height from the elements height
25578      */
25579     syncHeight : function(targetHeight){
25580         var height = (targetHeight || this.el.getHeight())-this.el.getBorderWidth("tb")-this.el.getPadding("tb");
25581         var bm = this.bodyEl.getMargins();
25582         var newHeight = height-(this.stripWrap.getHeight()||0)-(bm.top+bm.bottom);
25583         this.bodyEl.setHeight(newHeight);
25584         return newHeight;
25585     },
25586
25587     onResize : function(){
25588         if(this.monitorResize){
25589             this.autoSizeTabs();
25590         }
25591     },
25592
25593     /**
25594      * Disables tab resizing while tabs are being added (if {@link #resizeTabs} is false this does nothing)
25595      */
25596     beginUpdate : function(){
25597         this.updating = true;
25598     },
25599
25600     /**
25601      * Stops an update and resizes the tabs (if {@link #resizeTabs} is false this does nothing)
25602      */
25603     endUpdate : function(){
25604         this.updating = false;
25605         this.autoSizeTabs();
25606     },
25607
25608     /**
25609      * Manual call to resize the tabs (if {@link #resizeTabs} is false this does nothing)
25610      */
25611     autoSizeTabs : function(){
25612         var count = this.items.length;
25613         var vcount = count - this.hiddenCount;
25614         if(!this.resizeTabs || count < 1 || vcount < 1 || this.updating) return;
25615         var w = Math.max(this.el.getWidth() - this.cpad, 10);
25616         var availWidth = Math.floor(w / vcount);
25617         var b = this.stripBody;
25618         if(b.getWidth() > w){
25619             var tabs = this.items;
25620             this.setTabWidth(Math.max(availWidth, this.minTabWidth)-2);
25621             if(availWidth < this.minTabWidth){
25622                 /*if(!this.sleft){    // incomplete scrolling code
25623                     this.createScrollButtons();
25624                 }
25625                 this.showScroll();
25626                 this.stripClip.setWidth(w - (this.sleft.getWidth()+this.sright.getWidth()));*/
25627             }
25628         }else{
25629             if(this.currentTabWidth < this.preferredTabWidth){
25630                 this.setTabWidth(Math.min(availWidth, this.preferredTabWidth)-2);
25631             }
25632         }
25633     },
25634
25635     /**
25636      * Returns the number of tabs in this TabPanel.
25637      * @return {Number}
25638      */
25639      getCount : function(){
25640          return this.items.length;
25641      },
25642
25643     /**
25644      * Resizes all the tabs to the passed width
25645      * @param {Number} The new width
25646      */
25647     setTabWidth : function(width){
25648         this.currentTabWidth = width;
25649         for(var i = 0, len = this.items.length; i < len; i++) {
25650                 if(!this.items[i].isHidden())this.items[i].setWidth(width);
25651         }
25652     },
25653
25654     /**
25655      * Destroys this TabPanel
25656      * @param {Boolean} removeEl (optional) True to remove the element from the DOM as well (defaults to undefined)
25657      */
25658     destroy : function(removeEl){
25659         Roo.EventManager.removeResizeListener(this.onResize, this);
25660         for(var i = 0, len = this.items.length; i < len; i++){
25661             this.items[i].purgeListeners();
25662         }
25663         if(removeEl === true){
25664             this.el.update("");
25665             this.el.remove();
25666         }
25667     }
25668 });
25669
25670 /**
25671  * @class Roo.TabPanelItem
25672  * @extends Roo.util.Observable
25673  * Represents an individual item (tab plus body) in a TabPanel.
25674  * @param {Roo.TabPanel} tabPanel The {@link Roo.TabPanel} this TabPanelItem belongs to
25675  * @param {String} id The id of this TabPanelItem
25676  * @param {String} text The text for the tab of this TabPanelItem
25677  * @param {Boolean} closable True to allow this TabPanelItem to be closable (defaults to false)
25678  */
25679 Roo.TabPanelItem = function(tabPanel, id, text, closable){
25680     /**
25681      * The {@link Roo.TabPanel} this TabPanelItem belongs to
25682      * @type Roo.TabPanel
25683      */
25684     this.tabPanel = tabPanel;
25685     /**
25686      * The id for this TabPanelItem
25687      * @type String
25688      */
25689     this.id = id;
25690     /** @private */
25691     this.disabled = false;
25692     /** @private */
25693     this.text = text;
25694     /** @private */
25695     this.loaded = false;
25696     this.closable = closable;
25697
25698     /**
25699      * The body element for this TabPanelItem.
25700      * @type Roo.Element
25701      */
25702     this.bodyEl = Roo.get(tabPanel.createItemBody(tabPanel.bodyEl.dom, id));
25703     this.bodyEl.setVisibilityMode(Roo.Element.VISIBILITY);
25704     this.bodyEl.setStyle("display", "block");
25705     this.bodyEl.setStyle("zoom", "1");
25706     this.hideAction();
25707
25708     var els = tabPanel.createStripElements(tabPanel.stripEl.dom, text, closable);
25709     /** @private */
25710     this.el = Roo.get(els.el, true);
25711     this.inner = Roo.get(els.inner, true);
25712     this.textEl = Roo.get(this.el.dom.firstChild.firstChild.firstChild, true);
25713     this.pnode = Roo.get(els.el.parentNode, true);
25714     this.el.on("mousedown", this.onTabMouseDown, this);
25715     this.el.on("click", this.onTabClick, this);
25716     /** @private */
25717     if(closable){
25718         var c = Roo.get(els.close, true);
25719         c.dom.title = this.closeText;
25720         c.addClassOnOver("close-over");
25721         c.on("click", this.closeClick, this);
25722      }
25723
25724     this.addEvents({
25725          /**
25726          * @event activate
25727          * Fires when this tab becomes the active tab.
25728          * @param {Roo.TabPanel} tabPanel The parent TabPanel
25729          * @param {Roo.TabPanelItem} this
25730          */
25731         "activate": true,
25732         /**
25733          * @event beforeclose
25734          * Fires before this tab is closed. To cancel the close, set cancel to true on e (e.cancel = true).
25735          * @param {Roo.TabPanelItem} this
25736          * @param {Object} e Set cancel to true on this object to cancel the close.
25737          */
25738         "beforeclose": true,
25739         /**
25740          * @event close
25741          * Fires when this tab is closed.
25742          * @param {Roo.TabPanelItem} this
25743          */
25744          "close": true,
25745         /**
25746          * @event deactivate
25747          * Fires when this tab is no longer the active tab.
25748          * @param {Roo.TabPanel} tabPanel The parent TabPanel
25749          * @param {Roo.TabPanelItem} this
25750          */
25751          "deactivate" : true
25752     });
25753     this.hidden = false;
25754
25755     Roo.TabPanelItem.superclass.constructor.call(this);
25756 };
25757
25758 Roo.extend(Roo.TabPanelItem, Roo.util.Observable, {
25759     purgeListeners : function(){
25760        Roo.util.Observable.prototype.purgeListeners.call(this);
25761        this.el.removeAllListeners();
25762     },
25763     /**
25764      * Shows this TabPanelItem -- this <b>does not</b> deactivate the currently active TabPanelItem.
25765      */
25766     show : function(){
25767         this.pnode.addClass("on");
25768         this.showAction();
25769         if(Roo.isOpera){
25770             this.tabPanel.stripWrap.repaint();
25771         }
25772         this.fireEvent("activate", this.tabPanel, this);
25773     },
25774
25775     /**
25776      * Returns true if this tab is the active tab.
25777      * @return {Boolean}
25778      */
25779     isActive : function(){
25780         return this.tabPanel.getActiveTab() == this;
25781     },
25782
25783     /**
25784      * Hides this TabPanelItem -- if you don't activate another TabPanelItem this could look odd.
25785      */
25786     hide : function(){
25787         this.pnode.removeClass("on");
25788         this.hideAction();
25789         this.fireEvent("deactivate", this.tabPanel, this);
25790     },
25791
25792     hideAction : function(){
25793         this.bodyEl.hide();
25794         this.bodyEl.setStyle("position", "absolute");
25795         this.bodyEl.setLeft("-20000px");
25796         this.bodyEl.setTop("-20000px");
25797     },
25798
25799     showAction : function(){
25800         this.bodyEl.setStyle("position", "relative");
25801         this.bodyEl.setTop("");
25802         this.bodyEl.setLeft("");
25803         this.bodyEl.show();
25804     },
25805
25806     /**
25807      * Set the tooltip for the tab.
25808      * @param {String} tooltip The tab's tooltip
25809      */
25810     setTooltip : function(text){
25811         if(Roo.QuickTips && Roo.QuickTips.isEnabled()){
25812             this.textEl.dom.qtip = text;
25813             this.textEl.dom.removeAttribute('title');
25814         }else{
25815             this.textEl.dom.title = text;
25816         }
25817     },
25818
25819     onTabClick : function(e){
25820         e.preventDefault();
25821         this.tabPanel.activate(this.id);
25822     },
25823
25824     onTabMouseDown : function(e){
25825         e.preventDefault();
25826         this.tabPanel.activate(this.id);
25827     },
25828
25829     getWidth : function(){
25830         return this.inner.getWidth();
25831     },
25832
25833     setWidth : function(width){
25834         var iwidth = width - this.pnode.getPadding("lr");
25835         this.inner.setWidth(iwidth);
25836         this.textEl.setWidth(iwidth-this.inner.getPadding("lr"));
25837         this.pnode.setWidth(width);
25838     },
25839
25840     /**
25841      * Show or hide the tab
25842      * @param {Boolean} hidden True to hide or false to show.
25843      */
25844     setHidden : function(hidden){
25845         this.hidden = hidden;
25846         this.pnode.setStyle("display", hidden ? "none" : "");
25847     },
25848
25849     /**
25850      * Returns true if this tab is "hidden"
25851      * @return {Boolean}
25852      */
25853     isHidden : function(){
25854         return this.hidden;
25855     },
25856
25857     /**
25858      * Returns the text for this tab
25859      * @return {String}
25860      */
25861     getText : function(){
25862         return this.text;
25863     },
25864
25865     autoSize : function(){
25866         //this.el.beginMeasure();
25867         this.textEl.setWidth(1);
25868         this.setWidth(this.textEl.dom.scrollWidth+this.pnode.getPadding("lr")+this.inner.getPadding("lr"));
25869         //this.el.endMeasure();
25870     },
25871
25872     /**
25873      * Sets the text for the tab (Note: this also sets the tooltip text)
25874      * @param {String} text The tab's text and tooltip
25875      */
25876     setText : function(text){
25877         this.text = text;
25878         this.textEl.update(text);
25879         this.setTooltip(text);
25880         if(!this.tabPanel.resizeTabs){
25881             this.autoSize();
25882         }
25883     },
25884     /**
25885      * Activates this TabPanelItem -- this <b>does</b> deactivate the currently active TabPanelItem.
25886      */
25887     activate : function(){
25888         this.tabPanel.activate(this.id);
25889     },
25890
25891     /**
25892      * Disables this TabPanelItem -- this does nothing if this is the active TabPanelItem.
25893      */
25894     disable : function(){
25895         if(this.tabPanel.active != this){
25896             this.disabled = true;
25897             this.pnode.addClass("disabled");
25898         }
25899     },
25900
25901     /**
25902      * Enables this TabPanelItem if it was previously disabled.
25903      */
25904     enable : function(){
25905         this.disabled = false;
25906         this.pnode.removeClass("disabled");
25907     },
25908
25909     /**
25910      * Sets the content for this TabPanelItem.
25911      * @param {String} content The content
25912      * @param {Boolean} loadScripts true to look for and load scripts
25913      */
25914     setContent : function(content, loadScripts){
25915         this.bodyEl.update(content, loadScripts);
25916     },
25917
25918     /**
25919      * Gets the {@link Roo.UpdateManager} for the body of this TabPanelItem. Enables you to perform Ajax updates.
25920      * @return {Roo.UpdateManager} The UpdateManager
25921      */
25922     getUpdateManager : function(){
25923         return this.bodyEl.getUpdateManager();
25924     },
25925
25926     /**
25927      * Set a URL to be used to load the content for this TabPanelItem.
25928      * @param {String/Function} url The URL to load the content from, or a function to call to get the URL
25929      * @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)
25930      * @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)
25931      * @return {Roo.UpdateManager} The UpdateManager
25932      */
25933     setUrl : function(url, params, loadOnce){
25934         if(this.refreshDelegate){
25935             this.un('activate', this.refreshDelegate);
25936         }
25937         this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
25938         this.on("activate", this.refreshDelegate);
25939         return this.bodyEl.getUpdateManager();
25940     },
25941
25942     /** @private */
25943     _handleRefresh : function(url, params, loadOnce){
25944         if(!loadOnce || !this.loaded){
25945             var updater = this.bodyEl.getUpdateManager();
25946             updater.update(url, params, this._setLoaded.createDelegate(this));
25947         }
25948     },
25949
25950     /**
25951      *   Forces a content refresh from the URL specified in the {@link #setUrl} method.
25952      *   Will fail silently if the setUrl method has not been called.
25953      *   This does not activate the panel, just updates its content.
25954      */
25955     refresh : function(){
25956         if(this.refreshDelegate){
25957            this.loaded = false;
25958            this.refreshDelegate();
25959         }
25960     },
25961
25962     /** @private */
25963     _setLoaded : function(){
25964         this.loaded = true;
25965     },
25966
25967     /** @private */
25968     closeClick : function(e){
25969         var o = {};
25970         e.stopEvent();
25971         this.fireEvent("beforeclose", this, o);
25972         if(o.cancel !== true){
25973             this.tabPanel.removeTab(this.id);
25974         }
25975     },
25976     /**
25977      * The text displayed in the tooltip for the close icon.
25978      * @type String
25979      */
25980     closeText : "Close this tab"
25981 });
25982
25983 /** @private */
25984 Roo.TabPanel.prototype.createStrip = function(container){
25985     var strip = document.createElement("div");
25986     strip.className = "x-tabs-wrap";
25987     container.appendChild(strip);
25988     return strip;
25989 };
25990 /** @private */
25991 Roo.TabPanel.prototype.createStripList = function(strip){
25992     // div wrapper for retard IE
25993     // returns the "tr" element.
25994     strip.innerHTML = '<div class="x-tabs-strip-wrap">'+
25995         '<table class="x-tabs-strip" cellspacing="0" cellpadding="0" border="0"><tbody><tr>'+
25996         '<td class="x-tab-strip-toolbar"></td></tr></tbody></table></div>';
25997     return strip.firstChild.firstChild.firstChild.firstChild;
25998 };
25999 /** @private */
26000 Roo.TabPanel.prototype.createBody = function(container){
26001     var body = document.createElement("div");
26002     Roo.id(body, "tab-body");
26003     Roo.fly(body).addClass("x-tabs-body");
26004     container.appendChild(body);
26005     return body;
26006 };
26007 /** @private */
26008 Roo.TabPanel.prototype.createItemBody = function(bodyEl, id){
26009     var body = Roo.getDom(id);
26010     if(!body){
26011         body = document.createElement("div");
26012         body.id = id;
26013     }
26014     Roo.fly(body).addClass("x-tabs-item-body");
26015     bodyEl.insertBefore(body, bodyEl.firstChild);
26016     return body;
26017 };
26018 /** @private */
26019 Roo.TabPanel.prototype.createStripElements = function(stripEl, text, closable){
26020     var td = document.createElement("td");
26021     stripEl.insertBefore(td, stripEl.childNodes[stripEl.childNodes.length-1]);
26022     //stripEl.appendChild(td);
26023     if(closable){
26024         td.className = "x-tabs-closable";
26025         if(!this.closeTpl){
26026             this.closeTpl = new Roo.Template(
26027                '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
26028                '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span>' +
26029                '<div unselectable="on" class="close-icon">&#160;</div></em></span></a>'
26030             );
26031         }
26032         var el = this.closeTpl.overwrite(td, {"text": text});
26033         var close = el.getElementsByTagName("div")[0];
26034         var inner = el.getElementsByTagName("em")[0];
26035         return {"el": el, "close": close, "inner": inner};
26036     } else {
26037         if(!this.tabTpl){
26038             this.tabTpl = new Roo.Template(
26039                '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
26040                '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span></em></span></a>'
26041             );
26042         }
26043         var el = this.tabTpl.overwrite(td, {"text": text});
26044         var inner = el.getElementsByTagName("em")[0];
26045         return {"el": el, "inner": inner};
26046     }
26047 };/*
26048  * Based on:
26049  * Ext JS Library 1.1.1
26050  * Copyright(c) 2006-2007, Ext JS, LLC.
26051  *
26052  * Originally Released Under LGPL - original licence link has changed is not relivant.
26053  *
26054  * Fork - LGPL
26055  * <script type="text/javascript">
26056  */
26057
26058 /**
26059  * @class Roo.Button
26060  * @extends Roo.util.Observable
26061  * Simple Button class
26062  * @cfg {String} text The button text
26063  * @cfg {String} icon The path to an image to display in the button (the image will be set as the background-image
26064  * CSS property of the button by default, so if you want a mixed icon/text button, set cls:"x-btn-text-icon")
26065  * @cfg {Function} handler A function called when the button is clicked (can be used instead of click event)
26066  * @cfg {Object} scope The scope of the handler
26067  * @cfg {Number} minWidth The minimum width for this button (used to give a set of buttons a common width)
26068  * @cfg {String/Object} tooltip The tooltip for the button - can be a string or QuickTips config object
26069  * @cfg {Boolean} hidden True to start hidden (defaults to false)
26070  * @cfg {Boolean} disabled True to start disabled (defaults to false)
26071  * @cfg {Boolean} pressed True to start pressed (only if enableToggle = true)
26072  * @cfg {String} toggleGroup The group this toggle button is a member of (only 1 per group can be pressed, only
26073    applies if enableToggle = true)
26074  * @cfg {String/HTMLElement/Element} renderTo The element to append the button to
26075  * @cfg {Boolean/Object} repeat True to repeat fire the click event while the mouse is down. This can also be
26076   an {@link Roo.util.ClickRepeater} config object (defaults to false).
26077  * @constructor
26078  * Create a new button
26079  * @param {Object} config The config object
26080  */
26081 Roo.Button = function(renderTo, config)
26082 {
26083     if (!config) {
26084         config = renderTo;
26085         renderTo = config.renderTo || false;
26086     }
26087     
26088     Roo.apply(this, config);
26089     this.addEvents({
26090         /**
26091              * @event click
26092              * Fires when this button is clicked
26093              * @param {Button} this
26094              * @param {EventObject} e The click event
26095              */
26096             "click" : true,
26097         /**
26098              * @event toggle
26099              * Fires when the "pressed" state of this button changes (only if enableToggle = true)
26100              * @param {Button} this
26101              * @param {Boolean} pressed
26102              */
26103             "toggle" : true,
26104         /**
26105              * @event mouseover
26106              * Fires when the mouse hovers over the button
26107              * @param {Button} this
26108              * @param {Event} e The event object
26109              */
26110         'mouseover' : true,
26111         /**
26112              * @event mouseout
26113              * Fires when the mouse exits the button
26114              * @param {Button} this
26115              * @param {Event} e The event object
26116              */
26117         'mouseout': true,
26118          /**
26119              * @event render
26120              * Fires when the button is rendered
26121              * @param {Button} this
26122              */
26123         'render': true
26124     });
26125     if(this.menu){
26126         this.menu = Roo.menu.MenuMgr.get(this.menu);
26127     }
26128     // register listeners first!!  - so render can be captured..
26129     Roo.util.Observable.call(this);
26130     if(renderTo){
26131         this.render(renderTo);
26132     }
26133     
26134   
26135 };
26136
26137 Roo.extend(Roo.Button, Roo.util.Observable, {
26138     /**
26139      * 
26140      */
26141     
26142     /**
26143      * Read-only. True if this button is hidden
26144      * @type Boolean
26145      */
26146     hidden : false,
26147     /**
26148      * Read-only. True if this button is disabled
26149      * @type Boolean
26150      */
26151     disabled : false,
26152     /**
26153      * Read-only. True if this button is pressed (only if enableToggle = true)
26154      * @type Boolean
26155      */
26156     pressed : false,
26157
26158     /**
26159      * @cfg {Number} tabIndex 
26160      * The DOM tabIndex for this button (defaults to undefined)
26161      */
26162     tabIndex : undefined,
26163
26164     /**
26165      * @cfg {Boolean} enableToggle
26166      * True to enable pressed/not pressed toggling (defaults to false)
26167      */
26168     enableToggle: false,
26169     /**
26170      * @cfg {Mixed} menu
26171      * Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob (defaults to undefined).
26172      */
26173     menu : undefined,
26174     /**
26175      * @cfg {String} menuAlign
26176      * The position to align the menu to (see {@link Roo.Element#alignTo} for more details, defaults to 'tl-bl?').
26177      */
26178     menuAlign : "tl-bl?",
26179
26180     /**
26181      * @cfg {String} iconCls
26182      * A css class which sets a background image to be used as the icon for this button (defaults to undefined).
26183      */
26184     iconCls : undefined,
26185     /**
26186      * @cfg {String} type
26187      * The button's type, corresponding to the DOM input element type attribute.  Either "submit," "reset" or "button" (default).
26188      */
26189     type : 'button',
26190
26191     // private
26192     menuClassTarget: 'tr',
26193
26194     /**
26195      * @cfg {String} clickEvent
26196      * The type of event to map to the button's event handler (defaults to 'click')
26197      */
26198     clickEvent : 'click',
26199
26200     /**
26201      * @cfg {Boolean} handleMouseEvents
26202      * False to disable visual cues on mouseover, mouseout and mousedown (defaults to true)
26203      */
26204     handleMouseEvents : true,
26205
26206     /**
26207      * @cfg {String} tooltipType
26208      * The type of tooltip to use. Either "qtip" (default) for QuickTips or "title" for title attribute.
26209      */
26210     tooltipType : 'qtip',
26211
26212     /**
26213      * @cfg {String} cls
26214      * A CSS class to apply to the button's main element.
26215      */
26216     
26217     /**
26218      * @cfg {Roo.Template} template (Optional)
26219      * An {@link Roo.Template} with which to create the Button's main element. This Template must
26220      * contain numeric substitution parameter 0 if it is to display the tRoo property. Changing the template could
26221      * require code modifications if required elements (e.g. a button) aren't present.
26222      */
26223
26224     // private
26225     render : function(renderTo){
26226         var btn;
26227         if(this.hideParent){
26228             this.parentEl = Roo.get(renderTo);
26229         }
26230         if(!this.dhconfig){
26231             if(!this.template){
26232                 if(!Roo.Button.buttonTemplate){
26233                     // hideous table template
26234                     Roo.Button.buttonTemplate = new Roo.Template(
26235                         '<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap"><tbody><tr>',
26236                         '<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>',
26237                         "</tr></tbody></table>");
26238                 }
26239                 this.template = Roo.Button.buttonTemplate;
26240             }
26241             btn = this.template.append(renderTo, [this.text || '&#160;', this.type], true);
26242             var btnEl = btn.child("button:first");
26243             btnEl.on('focus', this.onFocus, this);
26244             btnEl.on('blur', this.onBlur, this);
26245             if(this.cls){
26246                 btn.addClass(this.cls);
26247             }
26248             if(this.icon){
26249                 btnEl.setStyle('background-image', 'url(' +this.icon +')');
26250             }
26251             if(this.iconCls){
26252                 btnEl.addClass(this.iconCls);
26253                 if(!this.cls){
26254                     btn.addClass(this.text ? 'x-btn-text-icon' : 'x-btn-icon');
26255                 }
26256             }
26257             if(this.tabIndex !== undefined){
26258                 btnEl.dom.tabIndex = this.tabIndex;
26259             }
26260             if(this.tooltip){
26261                 if(typeof this.tooltip == 'object'){
26262                     Roo.QuickTips.tips(Roo.apply({
26263                           target: btnEl.id
26264                     }, this.tooltip));
26265                 } else {
26266                     btnEl.dom[this.tooltipType] = this.tooltip;
26267                 }
26268             }
26269         }else{
26270             btn = Roo.DomHelper.append(Roo.get(renderTo).dom, this.dhconfig, true);
26271         }
26272         this.el = btn;
26273         if(this.id){
26274             this.el.dom.id = this.el.id = this.id;
26275         }
26276         if(this.menu){
26277             this.el.child(this.menuClassTarget).addClass("x-btn-with-menu");
26278             this.menu.on("show", this.onMenuShow, this);
26279             this.menu.on("hide", this.onMenuHide, this);
26280         }
26281         btn.addClass("x-btn");
26282         if(Roo.isIE && !Roo.isIE7){
26283             this.autoWidth.defer(1, this);
26284         }else{
26285             this.autoWidth();
26286         }
26287         if(this.handleMouseEvents){
26288             btn.on("mouseover", this.onMouseOver, this);
26289             btn.on("mouseout", this.onMouseOut, this);
26290             btn.on("mousedown", this.onMouseDown, this);
26291         }
26292         btn.on(this.clickEvent, this.onClick, this);
26293         //btn.on("mouseup", this.onMouseUp, this);
26294         if(this.hidden){
26295             this.hide();
26296         }
26297         if(this.disabled){
26298             this.disable();
26299         }
26300         Roo.ButtonToggleMgr.register(this);
26301         if(this.pressed){
26302             this.el.addClass("x-btn-pressed");
26303         }
26304         if(this.repeat){
26305             var repeater = new Roo.util.ClickRepeater(btn,
26306                 typeof this.repeat == "object" ? this.repeat : {}
26307             );
26308             repeater.on("click", this.onClick,  this);
26309         }
26310         
26311         this.fireEvent('render', this);
26312         
26313     },
26314     /**
26315      * Returns the button's underlying element
26316      * @return {Roo.Element} The element
26317      */
26318     getEl : function(){
26319         return this.el;  
26320     },
26321     
26322     /**
26323      * Destroys this Button and removes any listeners.
26324      */
26325     destroy : function(){
26326         Roo.ButtonToggleMgr.unregister(this);
26327         this.el.removeAllListeners();
26328         this.purgeListeners();
26329         this.el.remove();
26330     },
26331
26332     // private
26333     autoWidth : function(){
26334         if(this.el){
26335             this.el.setWidth("auto");
26336             if(Roo.isIE7 && Roo.isStrict){
26337                 var ib = this.el.child('button');
26338                 if(ib && ib.getWidth() > 20){
26339                     ib.clip();
26340                     ib.setWidth(Roo.util.TextMetrics.measure(ib, this.text).width+ib.getFrameWidth('lr'));
26341                 }
26342             }
26343             if(this.minWidth){
26344                 if(this.hidden){
26345                     this.el.beginMeasure();
26346                 }
26347                 if(this.el.getWidth() < this.minWidth){
26348                     this.el.setWidth(this.minWidth);
26349                 }
26350                 if(this.hidden){
26351                     this.el.endMeasure();
26352                 }
26353             }
26354         }
26355     },
26356
26357     /**
26358      * Assigns this button's click handler
26359      * @param {Function} handler The function to call when the button is clicked
26360      * @param {Object} scope (optional) Scope for the function passed in
26361      */
26362     setHandler : function(handler, scope){
26363         this.handler = handler;
26364         this.scope = scope;  
26365     },
26366     
26367     /**
26368      * Sets this button's text
26369      * @param {String} text The button text
26370      */
26371     setText : function(text){
26372         this.text = text;
26373         if(this.el){
26374             this.el.child("td.x-btn-center button.x-btn-text").update(text);
26375         }
26376         this.autoWidth();
26377     },
26378     
26379     /**
26380      * Gets the text for this button
26381      * @return {String} The button text
26382      */
26383     getText : function(){
26384         return this.text;  
26385     },
26386     
26387     /**
26388      * Show this button
26389      */
26390     show: function(){
26391         this.hidden = false;
26392         if(this.el){
26393             this[this.hideParent? 'parentEl' : 'el'].setStyle("display", "");
26394         }
26395     },
26396     
26397     /**
26398      * Hide this button
26399      */
26400     hide: function(){
26401         this.hidden = true;
26402         if(this.el){
26403             this[this.hideParent? 'parentEl' : 'el'].setStyle("display", "none");
26404         }
26405     },
26406     
26407     /**
26408      * Convenience function for boolean show/hide
26409      * @param {Boolean} visible True to show, false to hide
26410      */
26411     setVisible: function(visible){
26412         if(visible) {
26413             this.show();
26414         }else{
26415             this.hide();
26416         }
26417     },
26418     
26419     /**
26420      * If a state it passed, it becomes the pressed state otherwise the current state is toggled.
26421      * @param {Boolean} state (optional) Force a particular state
26422      */
26423     toggle : function(state){
26424         state = state === undefined ? !this.pressed : state;
26425         if(state != this.pressed){
26426             if(state){
26427                 this.el.addClass("x-btn-pressed");
26428                 this.pressed = true;
26429                 this.fireEvent("toggle", this, true);
26430             }else{
26431                 this.el.removeClass("x-btn-pressed");
26432                 this.pressed = false;
26433                 this.fireEvent("toggle", this, false);
26434             }
26435             if(this.toggleHandler){
26436                 this.toggleHandler.call(this.scope || this, this, state);
26437             }
26438         }
26439     },
26440     
26441     /**
26442      * Focus the button
26443      */
26444     focus : function(){
26445         this.el.child('button:first').focus();
26446     },
26447     
26448     /**
26449      * Disable this button
26450      */
26451     disable : function(){
26452         if(this.el){
26453             this.el.addClass("x-btn-disabled");
26454         }
26455         this.disabled = true;
26456     },
26457     
26458     /**
26459      * Enable this button
26460      */
26461     enable : function(){
26462         if(this.el){
26463             this.el.removeClass("x-btn-disabled");
26464         }
26465         this.disabled = false;
26466     },
26467
26468     /**
26469      * Convenience function for boolean enable/disable
26470      * @param {Boolean} enabled True to enable, false to disable
26471      */
26472     setDisabled : function(v){
26473         this[v !== true ? "enable" : "disable"]();
26474     },
26475
26476     // private
26477     onClick : function(e){
26478         if(e){
26479             e.preventDefault();
26480         }
26481         if(e.button != 0){
26482             return;
26483         }
26484         if(!this.disabled){
26485             if(this.enableToggle){
26486                 this.toggle();
26487             }
26488             if(this.menu && !this.menu.isVisible()){
26489                 this.menu.show(this.el, this.menuAlign);
26490             }
26491             this.fireEvent("click", this, e);
26492             if(this.handler){
26493                 this.el.removeClass("x-btn-over");
26494                 this.handler.call(this.scope || this, this, e);
26495             }
26496         }
26497     },
26498     // private
26499     onMouseOver : function(e){
26500         if(!this.disabled){
26501             this.el.addClass("x-btn-over");
26502             this.fireEvent('mouseover', this, e);
26503         }
26504     },
26505     // private
26506     onMouseOut : function(e){
26507         if(!e.within(this.el,  true)){
26508             this.el.removeClass("x-btn-over");
26509             this.fireEvent('mouseout', this, e);
26510         }
26511     },
26512     // private
26513     onFocus : function(e){
26514         if(!this.disabled){
26515             this.el.addClass("x-btn-focus");
26516         }
26517     },
26518     // private
26519     onBlur : function(e){
26520         this.el.removeClass("x-btn-focus");
26521     },
26522     // private
26523     onMouseDown : function(e){
26524         if(!this.disabled && e.button == 0){
26525             this.el.addClass("x-btn-click");
26526             Roo.get(document).on('mouseup', this.onMouseUp, this);
26527         }
26528     },
26529     // private
26530     onMouseUp : function(e){
26531         if(e.button == 0){
26532             this.el.removeClass("x-btn-click");
26533             Roo.get(document).un('mouseup', this.onMouseUp, this);
26534         }
26535     },
26536     // private
26537     onMenuShow : function(e){
26538         this.el.addClass("x-btn-menu-active");
26539     },
26540     // private
26541     onMenuHide : function(e){
26542         this.el.removeClass("x-btn-menu-active");
26543     }   
26544 });
26545
26546 // Private utility class used by Button
26547 Roo.ButtonToggleMgr = function(){
26548    var groups = {};
26549    
26550    function toggleGroup(btn, state){
26551        if(state){
26552            var g = groups[btn.toggleGroup];
26553            for(var i = 0, l = g.length; i < l; i++){
26554                if(g[i] != btn){
26555                    g[i].toggle(false);
26556                }
26557            }
26558        }
26559    }
26560    
26561    return {
26562        register : function(btn){
26563            if(!btn.toggleGroup){
26564                return;
26565            }
26566            var g = groups[btn.toggleGroup];
26567            if(!g){
26568                g = groups[btn.toggleGroup] = [];
26569            }
26570            g.push(btn);
26571            btn.on("toggle", toggleGroup);
26572        },
26573        
26574        unregister : function(btn){
26575            if(!btn.toggleGroup){
26576                return;
26577            }
26578            var g = groups[btn.toggleGroup];
26579            if(g){
26580                g.remove(btn);
26581                btn.un("toggle", toggleGroup);
26582            }
26583        }
26584    };
26585 }();/*
26586  * Based on:
26587  * Ext JS Library 1.1.1
26588  * Copyright(c) 2006-2007, Ext JS, LLC.
26589  *
26590  * Originally Released Under LGPL - original licence link has changed is not relivant.
26591  *
26592  * Fork - LGPL
26593  * <script type="text/javascript">
26594  */
26595  
26596 /**
26597  * @class Roo.SplitButton
26598  * @extends Roo.Button
26599  * A split button that provides a built-in dropdown arrow that can fire an event separately from the default
26600  * click event of the button.  Typically this would be used to display a dropdown menu that provides additional
26601  * options to the primary button action, but any custom handler can provide the arrowclick implementation.
26602  * @cfg {Function} arrowHandler A function called when the arrow button is clicked (can be used instead of click event)
26603  * @cfg {String} arrowTooltip The title attribute of the arrow
26604  * @constructor
26605  * Create a new menu button
26606  * @param {String/HTMLElement/Element} renderTo The element to append the button to
26607  * @param {Object} config The config object
26608  */
26609 Roo.SplitButton = function(renderTo, config){
26610     Roo.SplitButton.superclass.constructor.call(this, renderTo, config);
26611     /**
26612      * @event arrowclick
26613      * Fires when this button's arrow is clicked
26614      * @param {SplitButton} this
26615      * @param {EventObject} e The click event
26616      */
26617     this.addEvents({"arrowclick":true});
26618 };
26619
26620 Roo.extend(Roo.SplitButton, Roo.Button, {
26621     render : function(renderTo){
26622         // this is one sweet looking template!
26623         var tpl = new Roo.Template(
26624             '<table cellspacing="0" class="x-btn-menu-wrap x-btn"><tr><td>',
26625             '<table cellspacing="0" class="x-btn-wrap x-btn-menu-text-wrap"><tbody>',
26626             '<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>',
26627             "</tbody></table></td><td>",
26628             '<table cellspacing="0" class="x-btn-wrap x-btn-menu-arrow-wrap"><tbody>',
26629             '<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>',
26630             "</tbody></table></td></tr></table>"
26631         );
26632         var btn = tpl.append(renderTo, [this.text, this.type], true);
26633         var btnEl = btn.child("button");
26634         if(this.cls){
26635             btn.addClass(this.cls);
26636         }
26637         if(this.icon){
26638             btnEl.setStyle('background-image', 'url(' +this.icon +')');
26639         }
26640         if(this.iconCls){
26641             btnEl.addClass(this.iconCls);
26642             if(!this.cls){
26643                 btn.addClass(this.text ? 'x-btn-text-icon' : 'x-btn-icon');
26644             }
26645         }
26646         this.el = btn;
26647         if(this.handleMouseEvents){
26648             btn.on("mouseover", this.onMouseOver, this);
26649             btn.on("mouseout", this.onMouseOut, this);
26650             btn.on("mousedown", this.onMouseDown, this);
26651             btn.on("mouseup", this.onMouseUp, this);
26652         }
26653         btn.on(this.clickEvent, this.onClick, this);
26654         if(this.tooltip){
26655             if(typeof this.tooltip == 'object'){
26656                 Roo.QuickTips.tips(Roo.apply({
26657                       target: btnEl.id
26658                 }, this.tooltip));
26659             } else {
26660                 btnEl.dom[this.tooltipType] = this.tooltip;
26661             }
26662         }
26663         if(this.arrowTooltip){
26664             btn.child("button:nth(2)").dom[this.tooltipType] = this.arrowTooltip;
26665         }
26666         if(this.hidden){
26667             this.hide();
26668         }
26669         if(this.disabled){
26670             this.disable();
26671         }
26672         if(this.pressed){
26673             this.el.addClass("x-btn-pressed");
26674         }
26675         if(Roo.isIE && !Roo.isIE7){
26676             this.autoWidth.defer(1, this);
26677         }else{
26678             this.autoWidth();
26679         }
26680         if(this.menu){
26681             this.menu.on("show", this.onMenuShow, this);
26682             this.menu.on("hide", this.onMenuHide, this);
26683         }
26684         this.fireEvent('render', this);
26685     },
26686
26687     // private
26688     autoWidth : function(){
26689         if(this.el){
26690             var tbl = this.el.child("table:first");
26691             var tbl2 = this.el.child("table:last");
26692             this.el.setWidth("auto");
26693             tbl.setWidth("auto");
26694             if(Roo.isIE7 && Roo.isStrict){
26695                 var ib = this.el.child('button:first');
26696                 if(ib && ib.getWidth() > 20){
26697                     ib.clip();
26698                     ib.setWidth(Roo.util.TextMetrics.measure(ib, this.text).width+ib.getFrameWidth('lr'));
26699                 }
26700             }
26701             if(this.minWidth){
26702                 if(this.hidden){
26703                     this.el.beginMeasure();
26704                 }
26705                 if((tbl.getWidth()+tbl2.getWidth()) < this.minWidth){
26706                     tbl.setWidth(this.minWidth-tbl2.getWidth());
26707                 }
26708                 if(this.hidden){
26709                     this.el.endMeasure();
26710                 }
26711             }
26712             this.el.setWidth(tbl.getWidth()+tbl2.getWidth());
26713         } 
26714     },
26715     /**
26716      * Sets this button's click handler
26717      * @param {Function} handler The function to call when the button is clicked
26718      * @param {Object} scope (optional) Scope for the function passed above
26719      */
26720     setHandler : function(handler, scope){
26721         this.handler = handler;
26722         this.scope = scope;  
26723     },
26724     
26725     /**
26726      * Sets this button's arrow click handler
26727      * @param {Function} handler The function to call when the arrow is clicked
26728      * @param {Object} scope (optional) Scope for the function passed above
26729      */
26730     setArrowHandler : function(handler, scope){
26731         this.arrowHandler = handler;
26732         this.scope = scope;  
26733     },
26734     
26735     /**
26736      * Focus the button
26737      */
26738     focus : function(){
26739         if(this.el){
26740             this.el.child("button:first").focus();
26741         }
26742     },
26743
26744     // private
26745     onClick : function(e){
26746         e.preventDefault();
26747         if(!this.disabled){
26748             if(e.getTarget(".x-btn-menu-arrow-wrap")){
26749                 if(this.menu && !this.menu.isVisible()){
26750                     this.menu.show(this.el, this.menuAlign);
26751                 }
26752                 this.fireEvent("arrowclick", this, e);
26753                 if(this.arrowHandler){
26754                     this.arrowHandler.call(this.scope || this, this, e);
26755                 }
26756             }else{
26757                 this.fireEvent("click", this, e);
26758                 if(this.handler){
26759                     this.handler.call(this.scope || this, this, e);
26760                 }
26761             }
26762         }
26763     },
26764     // private
26765     onMouseDown : function(e){
26766         if(!this.disabled){
26767             Roo.fly(e.getTarget("table")).addClass("x-btn-click");
26768         }
26769     },
26770     // private
26771     onMouseUp : function(e){
26772         Roo.fly(e.getTarget("table")).removeClass("x-btn-click");
26773     }   
26774 });
26775
26776
26777 // backwards compat
26778 Roo.MenuButton = Roo.SplitButton;/*
26779  * Based on:
26780  * Ext JS Library 1.1.1
26781  * Copyright(c) 2006-2007, Ext JS, LLC.
26782  *
26783  * Originally Released Under LGPL - original licence link has changed is not relivant.
26784  *
26785  * Fork - LGPL
26786  * <script type="text/javascript">
26787  */
26788
26789 /**
26790  * @class Roo.Toolbar
26791  * Basic Toolbar class.
26792  * @constructor
26793  * Creates a new Toolbar
26794  * @param {Object} container The config object
26795  */ 
26796 Roo.Toolbar = function(container, buttons, config)
26797 {
26798     /// old consturctor format still supported..
26799     if(container instanceof Array){ // omit the container for later rendering
26800         buttons = container;
26801         config = buttons;
26802         container = null;
26803     }
26804     if (typeof(container) == 'object' && container.xtype) {
26805         config = container;
26806         container = config.container;
26807         buttons = config.buttons || []; // not really - use items!!
26808     }
26809     var xitems = [];
26810     if (config && config.items) {
26811         xitems = config.items;
26812         delete config.items;
26813     }
26814     Roo.apply(this, config);
26815     this.buttons = buttons;
26816     
26817     if(container){
26818         this.render(container);
26819     }
26820     this.xitems = xitems;
26821     Roo.each(xitems, function(b) {
26822         this.add(b);
26823     }, this);
26824     
26825 };
26826
26827 Roo.Toolbar.prototype = {
26828     /**
26829      * @cfg {Array} items
26830      * array of button configs or elements to add (will be converted to a MixedCollection)
26831      */
26832     
26833     /**
26834      * @cfg {String/HTMLElement/Element} container
26835      * The id or element that will contain the toolbar
26836      */
26837     // private
26838     render : function(ct){
26839         this.el = Roo.get(ct);
26840         if(this.cls){
26841             this.el.addClass(this.cls);
26842         }
26843         // using a table allows for vertical alignment
26844         // 100% width is needed by Safari...
26845         this.el.update('<div class="x-toolbar x-small-editor"><table cellspacing="0"><tr></tr></table></div>');
26846         this.tr = this.el.child("tr", true);
26847         var autoId = 0;
26848         this.items = new Roo.util.MixedCollection(false, function(o){
26849             return o.id || ("item" + (++autoId));
26850         });
26851         if(this.buttons){
26852             this.add.apply(this, this.buttons);
26853             delete this.buttons;
26854         }
26855     },
26856
26857     /**
26858      * Adds element(s) to the toolbar -- this function takes a variable number of 
26859      * arguments of mixed type and adds them to the toolbar.
26860      * @param {Mixed} arg1 The following types of arguments are all valid:<br />
26861      * <ul>
26862      * <li>{@link Roo.Toolbar.Button} config: A valid button config object (equivalent to {@link #addButton})</li>
26863      * <li>HtmlElement: Any standard HTML element (equivalent to {@link #addElement})</li>
26864      * <li>Field: Any form field (equivalent to {@link #addField})</li>
26865      * <li>Item: Any subclass of {@link Roo.Toolbar.Item} (equivalent to {@link #addItem})</li>
26866      * <li>String: Any generic string (gets wrapped in a {@link Roo.Toolbar.TextItem}, equivalent to {@link #addText}).
26867      * Note that there are a few special strings that are treated differently as explained nRoo.</li>
26868      * <li>'separator' or '-': Creates a separator element (equivalent to {@link #addSeparator})</li>
26869      * <li>' ': Creates a spacer element (equivalent to {@link #addSpacer})</li>
26870      * <li>'->': Creates a fill element (equivalent to {@link #addFill})</li>
26871      * </ul>
26872      * @param {Mixed} arg2
26873      * @param {Mixed} etc.
26874      */
26875     add : function(){
26876         var a = arguments, l = a.length;
26877         for(var i = 0; i < l; i++){
26878             this._add(a[i]);
26879         }
26880     },
26881     // private..
26882     _add : function(el) {
26883         
26884         if (el.xtype) {
26885             el = Roo.factory(el, typeof(Roo.Toolbar[el.xtype]) == 'undefined' ? Roo.form : Roo.Toolbar);
26886         }
26887         
26888         if (el.applyTo){ // some kind of form field
26889             return this.addField(el);
26890         } 
26891         if (el.render){ // some kind of Toolbar.Item
26892             return this.addItem(el);
26893         }
26894         if (typeof el == "string"){ // string
26895             if(el == "separator" || el == "-"){
26896                 return this.addSeparator();
26897             }
26898             if (el == " "){
26899                 return this.addSpacer();
26900             }
26901             if(el == "->"){
26902                 return this.addFill();
26903             }
26904             return this.addText(el);
26905             
26906         }
26907         if(el.tagName){ // element
26908             return this.addElement(el);
26909         }
26910         if(typeof el == "object"){ // must be button config?
26911             return this.addButton(el);
26912         }
26913         // and now what?!?!
26914         return false;
26915         
26916     },
26917     
26918     /**
26919      * Add an Xtype element
26920      * @param {Object} xtype Xtype Object
26921      * @return {Object} created Object
26922      */
26923     addxtype : function(e){
26924         return this.add(e);  
26925     },
26926     
26927     /**
26928      * Returns the Element for this toolbar.
26929      * @return {Roo.Element}
26930      */
26931     getEl : function(){
26932         return this.el;  
26933     },
26934     
26935     /**
26936      * Adds a separator
26937      * @return {Roo.Toolbar.Item} The separator item
26938      */
26939     addSeparator : function(){
26940         return this.addItem(new Roo.Toolbar.Separator());
26941     },
26942
26943     /**
26944      * Adds a spacer element
26945      * @return {Roo.Toolbar.Spacer} The spacer item
26946      */
26947     addSpacer : function(){
26948         return this.addItem(new Roo.Toolbar.Spacer());
26949     },
26950
26951     /**
26952      * Adds a fill element that forces subsequent additions to the right side of the toolbar
26953      * @return {Roo.Toolbar.Fill} The fill item
26954      */
26955     addFill : function(){
26956         return this.addItem(new Roo.Toolbar.Fill());
26957     },
26958
26959     /**
26960      * Adds any standard HTML element to the toolbar
26961      * @param {String/HTMLElement/Element} el The element or id of the element to add
26962      * @return {Roo.Toolbar.Item} The element's item
26963      */
26964     addElement : function(el){
26965         return this.addItem(new Roo.Toolbar.Item(el));
26966     },
26967     /**
26968      * Collection of items on the toolbar.. (only Toolbar Items, so use fields to retrieve fields)
26969      * @type Roo.util.MixedCollection  
26970      */
26971     items : false,
26972      
26973     /**
26974      * Adds any Toolbar.Item or subclass
26975      * @param {Roo.Toolbar.Item} item
26976      * @return {Roo.Toolbar.Item} The item
26977      */
26978     addItem : function(item){
26979         var td = this.nextBlock();
26980         item.render(td);
26981         this.items.add(item);
26982         return item;
26983     },
26984     
26985     /**
26986      * Adds a button (or buttons). See {@link Roo.Toolbar.Button} for more info on the config.
26987      * @param {Object/Array} config A button config or array of configs
26988      * @return {Roo.Toolbar.Button/Array}
26989      */
26990     addButton : function(config){
26991         if(config instanceof Array){
26992             var buttons = [];
26993             for(var i = 0, len = config.length; i < len; i++) {
26994                 buttons.push(this.addButton(config[i]));
26995             }
26996             return buttons;
26997         }
26998         var b = config;
26999         if(!(config instanceof Roo.Toolbar.Button)){
27000             b = config.split ?
27001                 new Roo.Toolbar.SplitButton(config) :
27002                 new Roo.Toolbar.Button(config);
27003         }
27004         var td = this.nextBlock();
27005         b.render(td);
27006         this.items.add(b);
27007         return b;
27008     },
27009     
27010     /**
27011      * Adds text to the toolbar
27012      * @param {String} text The text to add
27013      * @return {Roo.Toolbar.Item} The element's item
27014      */
27015     addText : function(text){
27016         return this.addItem(new Roo.Toolbar.TextItem(text));
27017     },
27018     
27019     /**
27020      * Inserts any {@link Roo.Toolbar.Item}/{@link Roo.Toolbar.Button} at the specified index.
27021      * @param {Number} index The index where the item is to be inserted
27022      * @param {Object/Roo.Toolbar.Item/Roo.Toolbar.Button (may be Array)} item The button, or button config object to be inserted.
27023      * @return {Roo.Toolbar.Button/Item}
27024      */
27025     insertButton : function(index, item){
27026         if(item instanceof Array){
27027             var buttons = [];
27028             for(var i = 0, len = item.length; i < len; i++) {
27029                buttons.push(this.insertButton(index + i, item[i]));
27030             }
27031             return buttons;
27032         }
27033         if (!(item instanceof Roo.Toolbar.Button)){
27034            item = new Roo.Toolbar.Button(item);
27035         }
27036         var td = document.createElement("td");
27037         this.tr.insertBefore(td, this.tr.childNodes[index]);
27038         item.render(td);
27039         this.items.insert(index, item);
27040         return item;
27041     },
27042     
27043     /**
27044      * Adds a new element to the toolbar from the passed {@link Roo.DomHelper} config.
27045      * @param {Object} config
27046      * @return {Roo.Toolbar.Item} The element's item
27047      */
27048     addDom : function(config, returnEl){
27049         var td = this.nextBlock();
27050         Roo.DomHelper.overwrite(td, config);
27051         var ti = new Roo.Toolbar.Item(td.firstChild);
27052         ti.render(td);
27053         this.items.add(ti);
27054         return ti;
27055     },
27056
27057     /**
27058      * Collection of fields on the toolbar.. usefull for quering (value is false if there are no fields)
27059      * @type Roo.util.MixedCollection  
27060      */
27061     fields : false,
27062     
27063     /**
27064      * Adds a dynamically rendered Roo.form field (TextField, ComboBox, etc).
27065      * Note: the field should not have been rendered yet. For a field that has already been
27066      * rendered, use {@link #addElement}.
27067      * @param {Roo.form.Field} field
27068      * @return {Roo.ToolbarItem}
27069      */
27070      
27071       
27072     addField : function(field) {
27073         if (!this.fields) {
27074             var autoId = 0;
27075             this.fields = new Roo.util.MixedCollection(false, function(o){
27076                 return o.id || ("item" + (++autoId));
27077             });
27078
27079         }
27080         
27081         var td = this.nextBlock();
27082         field.render(td);
27083         var ti = new Roo.Toolbar.Item(td.firstChild);
27084         ti.render(td);
27085         this.items.add(ti);
27086         this.fields.add(field);
27087         return ti;
27088     },
27089     /**
27090      * Hide the toolbar
27091      * @method hide
27092      */
27093      
27094       
27095     hide : function()
27096     {
27097         this.el.child('div').setVisibilityMode(Roo.Element.DISPLAY);
27098         this.el.child('div').hide();
27099     },
27100     /**
27101      * Show the toolbar
27102      * @method show
27103      */
27104     show : function()
27105     {
27106         this.el.child('div').show();
27107     },
27108       
27109     // private
27110     nextBlock : function(){
27111         var td = document.createElement("td");
27112         this.tr.appendChild(td);
27113         return td;
27114     },
27115
27116     // private
27117     destroy : function(){
27118         if(this.items){ // rendered?
27119             Roo.destroy.apply(Roo, this.items.items);
27120         }
27121         if(this.fields){ // rendered?
27122             Roo.destroy.apply(Roo, this.fields.items);
27123         }
27124         Roo.Element.uncache(this.el, this.tr);
27125     }
27126 };
27127
27128 /**
27129  * @class Roo.Toolbar.Item
27130  * The base class that other classes should extend in order to get some basic common toolbar item functionality.
27131  * @constructor
27132  * Creates a new Item
27133  * @param {HTMLElement} el 
27134  */
27135 Roo.Toolbar.Item = function(el){
27136     this.el = Roo.getDom(el);
27137     this.id = Roo.id(this.el);
27138     this.hidden = false;
27139 };
27140
27141 Roo.Toolbar.Item.prototype = {
27142     
27143     /**
27144      * Get this item's HTML Element
27145      * @return {HTMLElement}
27146      */
27147     getEl : function(){
27148        return this.el;  
27149     },
27150
27151     // private
27152     render : function(td){
27153         this.td = td;
27154         td.appendChild(this.el);
27155     },
27156     
27157     /**
27158      * Removes and destroys this item.
27159      */
27160     destroy : function(){
27161         this.td.parentNode.removeChild(this.td);
27162     },
27163     
27164     /**
27165      * Shows this item.
27166      */
27167     show: function(){
27168         this.hidden = false;
27169         this.td.style.display = "";
27170     },
27171     
27172     /**
27173      * Hides this item.
27174      */
27175     hide: function(){
27176         this.hidden = true;
27177         this.td.style.display = "none";
27178     },
27179     
27180     /**
27181      * Convenience function for boolean show/hide.
27182      * @param {Boolean} visible true to show/false to hide
27183      */
27184     setVisible: function(visible){
27185         if(visible) {
27186             this.show();
27187         }else{
27188             this.hide();
27189         }
27190     },
27191     
27192     /**
27193      * Try to focus this item.
27194      */
27195     focus : function(){
27196         Roo.fly(this.el).focus();
27197     },
27198     
27199     /**
27200      * Disables this item.
27201      */
27202     disable : function(){
27203         Roo.fly(this.td).addClass("x-item-disabled");
27204         this.disabled = true;
27205         this.el.disabled = true;
27206     },
27207     
27208     /**
27209      * Enables this item.
27210      */
27211     enable : function(){
27212         Roo.fly(this.td).removeClass("x-item-disabled");
27213         this.disabled = false;
27214         this.el.disabled = false;
27215     }
27216 };
27217
27218
27219 /**
27220  * @class Roo.Toolbar.Separator
27221  * @extends Roo.Toolbar.Item
27222  * A simple toolbar separator class
27223  * @constructor
27224  * Creates a new Separator
27225  */
27226 Roo.Toolbar.Separator = function(){
27227     var s = document.createElement("span");
27228     s.className = "ytb-sep";
27229     Roo.Toolbar.Separator.superclass.constructor.call(this, s);
27230 };
27231 Roo.extend(Roo.Toolbar.Separator, Roo.Toolbar.Item, {
27232     enable:Roo.emptyFn,
27233     disable:Roo.emptyFn,
27234     focus:Roo.emptyFn
27235 });
27236
27237 /**
27238  * @class Roo.Toolbar.Spacer
27239  * @extends Roo.Toolbar.Item
27240  * A simple element that adds extra horizontal space to a toolbar.
27241  * @constructor
27242  * Creates a new Spacer
27243  */
27244 Roo.Toolbar.Spacer = function(){
27245     var s = document.createElement("div");
27246     s.className = "ytb-spacer";
27247     Roo.Toolbar.Spacer.superclass.constructor.call(this, s);
27248 };
27249 Roo.extend(Roo.Toolbar.Spacer, Roo.Toolbar.Item, {
27250     enable:Roo.emptyFn,
27251     disable:Roo.emptyFn,
27252     focus:Roo.emptyFn
27253 });
27254
27255 /**
27256  * @class Roo.Toolbar.Fill
27257  * @extends Roo.Toolbar.Spacer
27258  * A simple element that adds a greedy (100% width) horizontal space to a toolbar.
27259  * @constructor
27260  * Creates a new Spacer
27261  */
27262 Roo.Toolbar.Fill = Roo.extend(Roo.Toolbar.Spacer, {
27263     // private
27264     render : function(td){
27265         td.style.width = '100%';
27266         Roo.Toolbar.Fill.superclass.render.call(this, td);
27267     }
27268 });
27269
27270 /**
27271  * @class Roo.Toolbar.TextItem
27272  * @extends Roo.Toolbar.Item
27273  * A simple class that renders text directly into a toolbar.
27274  * @constructor
27275  * Creates a new TextItem
27276  * @param {String} text
27277  */
27278 Roo.Toolbar.TextItem = function(text){
27279     if (typeof(text) == 'object') {
27280         text = text.text;
27281     }
27282     var s = document.createElement("span");
27283     s.className = "ytb-text";
27284     s.innerHTML = text;
27285     Roo.Toolbar.TextItem.superclass.constructor.call(this, s);
27286 };
27287 Roo.extend(Roo.Toolbar.TextItem, Roo.Toolbar.Item, {
27288     enable:Roo.emptyFn,
27289     disable:Roo.emptyFn,
27290     focus:Roo.emptyFn
27291 });
27292
27293 /**
27294  * @class Roo.Toolbar.Button
27295  * @extends Roo.Button
27296  * A button that renders into a toolbar.
27297  * @constructor
27298  * Creates a new Button
27299  * @param {Object} config A standard {@link Roo.Button} config object
27300  */
27301 Roo.Toolbar.Button = function(config){
27302     Roo.Toolbar.Button.superclass.constructor.call(this, null, config);
27303 };
27304 Roo.extend(Roo.Toolbar.Button, Roo.Button, {
27305     render : function(td){
27306         this.td = td;
27307         Roo.Toolbar.Button.superclass.render.call(this, td);
27308     },
27309     
27310     /**
27311      * Removes and destroys this button
27312      */
27313     destroy : function(){
27314         Roo.Toolbar.Button.superclass.destroy.call(this);
27315         this.td.parentNode.removeChild(this.td);
27316     },
27317     
27318     /**
27319      * Shows this button
27320      */
27321     show: function(){
27322         this.hidden = false;
27323         this.td.style.display = "";
27324     },
27325     
27326     /**
27327      * Hides this button
27328      */
27329     hide: function(){
27330         this.hidden = true;
27331         this.td.style.display = "none";
27332     },
27333
27334     /**
27335      * Disables this item
27336      */
27337     disable : function(){
27338         Roo.fly(this.td).addClass("x-item-disabled");
27339         this.disabled = true;
27340     },
27341
27342     /**
27343      * Enables this item
27344      */
27345     enable : function(){
27346         Roo.fly(this.td).removeClass("x-item-disabled");
27347         this.disabled = false;
27348     }
27349 });
27350 // backwards compat
27351 Roo.ToolbarButton = Roo.Toolbar.Button;
27352
27353 /**
27354  * @class Roo.Toolbar.SplitButton
27355  * @extends Roo.SplitButton
27356  * A menu button that renders into a toolbar.
27357  * @constructor
27358  * Creates a new SplitButton
27359  * @param {Object} config A standard {@link Roo.SplitButton} config object
27360  */
27361 Roo.Toolbar.SplitButton = function(config){
27362     Roo.Toolbar.SplitButton.superclass.constructor.call(this, null, config);
27363 };
27364 Roo.extend(Roo.Toolbar.SplitButton, Roo.SplitButton, {
27365     render : function(td){
27366         this.td = td;
27367         Roo.Toolbar.SplitButton.superclass.render.call(this, td);
27368     },
27369     
27370     /**
27371      * Removes and destroys this button
27372      */
27373     destroy : function(){
27374         Roo.Toolbar.SplitButton.superclass.destroy.call(this);
27375         this.td.parentNode.removeChild(this.td);
27376     },
27377     
27378     /**
27379      * Shows this button
27380      */
27381     show: function(){
27382         this.hidden = false;
27383         this.td.style.display = "";
27384     },
27385     
27386     /**
27387      * Hides this button
27388      */
27389     hide: function(){
27390         this.hidden = true;
27391         this.td.style.display = "none";
27392     }
27393 });
27394
27395 // backwards compat
27396 Roo.Toolbar.MenuButton = Roo.Toolbar.SplitButton;/*
27397  * Based on:
27398  * Ext JS Library 1.1.1
27399  * Copyright(c) 2006-2007, Ext JS, LLC.
27400  *
27401  * Originally Released Under LGPL - original licence link has changed is not relivant.
27402  *
27403  * Fork - LGPL
27404  * <script type="text/javascript">
27405  */
27406  
27407 /**
27408  * @class Roo.PagingToolbar
27409  * @extends Roo.Toolbar
27410  * A specialized toolbar that is bound to a {@link Roo.data.Store} and provides automatic paging controls.
27411  * @constructor
27412  * Create a new PagingToolbar
27413  * @param {Object} config The config object
27414  */
27415 Roo.PagingToolbar = function(el, ds, config)
27416 {
27417     // old args format still supported... - xtype is prefered..
27418     if (typeof(el) == 'object' && el.xtype) {
27419         // created from xtype...
27420         config = el;
27421         ds = el.dataSource;
27422         el = config.container;
27423     }
27424     var items = [];
27425     if (config.items) {
27426         items = config.items;
27427         config.items = [];
27428     }
27429     
27430     Roo.PagingToolbar.superclass.constructor.call(this, el, null, config);
27431     this.ds = ds;
27432     this.cursor = 0;
27433     this.renderButtons(this.el);
27434     this.bind(ds);
27435     
27436     // supprot items array.
27437    
27438     Roo.each(items, function(e) {
27439         this.add(Roo.factory(e));
27440     },this);
27441     
27442 };
27443
27444 Roo.extend(Roo.PagingToolbar, Roo.Toolbar, {
27445     /**
27446      * @cfg {Roo.data.Store} dataSource
27447      * The underlying data store providing the paged data
27448      */
27449     /**
27450      * @cfg {String/HTMLElement/Element} container
27451      * container The id or element that will contain the toolbar
27452      */
27453     /**
27454      * @cfg {Boolean} displayInfo
27455      * True to display the displayMsg (defaults to false)
27456      */
27457     /**
27458      * @cfg {Number} pageSize
27459      * The number of records to display per page (defaults to 20)
27460      */
27461     pageSize: 20,
27462     /**
27463      * @cfg {String} displayMsg
27464      * The paging status message to display (defaults to "Displaying {start} - {end} of {total}")
27465      */
27466     displayMsg : 'Displaying {0} - {1} of {2}',
27467     /**
27468      * @cfg {String} emptyMsg
27469      * The message to display when no records are found (defaults to "No data to display")
27470      */
27471     emptyMsg : 'No data to display',
27472     /**
27473      * Customizable piece of the default paging text (defaults to "Page")
27474      * @type String
27475      */
27476     beforePageText : "Page",
27477     /**
27478      * Customizable piece of the default paging text (defaults to "of %0")
27479      * @type String
27480      */
27481     afterPageText : "of {0}",
27482     /**
27483      * Customizable piece of the default paging text (defaults to "First Page")
27484      * @type String
27485      */
27486     firstText : "First Page",
27487     /**
27488      * Customizable piece of the default paging text (defaults to "Previous Page")
27489      * @type String
27490      */
27491     prevText : "Previous Page",
27492     /**
27493      * Customizable piece of the default paging text (defaults to "Next Page")
27494      * @type String
27495      */
27496     nextText : "Next Page",
27497     /**
27498      * Customizable piece of the default paging text (defaults to "Last Page")
27499      * @type String
27500      */
27501     lastText : "Last Page",
27502     /**
27503      * Customizable piece of the default paging text (defaults to "Refresh")
27504      * @type String
27505      */
27506     refreshText : "Refresh",
27507
27508     // private
27509     renderButtons : function(el){
27510         Roo.PagingToolbar.superclass.render.call(this, el);
27511         this.first = this.addButton({
27512             tooltip: this.firstText,
27513             cls: "x-btn-icon x-grid-page-first",
27514             disabled: true,
27515             handler: this.onClick.createDelegate(this, ["first"])
27516         });
27517         this.prev = this.addButton({
27518             tooltip: this.prevText,
27519             cls: "x-btn-icon x-grid-page-prev",
27520             disabled: true,
27521             handler: this.onClick.createDelegate(this, ["prev"])
27522         });
27523         //this.addSeparator();
27524         this.add(this.beforePageText);
27525         this.field = Roo.get(this.addDom({
27526            tag: "input",
27527            type: "text",
27528            size: "3",
27529            value: "1",
27530            cls: "x-grid-page-number"
27531         }).el);
27532         this.field.on("keydown", this.onPagingKeydown, this);
27533         this.field.on("focus", function(){this.dom.select();});
27534         this.afterTextEl = this.addText(String.format(this.afterPageText, 1));
27535         this.field.setHeight(18);
27536         //this.addSeparator();
27537         this.next = this.addButton({
27538             tooltip: this.nextText,
27539             cls: "x-btn-icon x-grid-page-next",
27540             disabled: true,
27541             handler: this.onClick.createDelegate(this, ["next"])
27542         });
27543         this.last = this.addButton({
27544             tooltip: this.lastText,
27545             cls: "x-btn-icon x-grid-page-last",
27546             disabled: true,
27547             handler: this.onClick.createDelegate(this, ["last"])
27548         });
27549         //this.addSeparator();
27550         this.loading = this.addButton({
27551             tooltip: this.refreshText,
27552             cls: "x-btn-icon x-grid-loading",
27553             handler: this.onClick.createDelegate(this, ["refresh"])
27554         });
27555
27556         if(this.displayInfo){
27557             this.displayEl = Roo.fly(this.el.dom.firstChild).createChild({cls:'x-paging-info'});
27558         }
27559     },
27560
27561     // private
27562     updateInfo : function(){
27563         if(this.displayEl){
27564             var count = this.ds.getCount();
27565             var msg = count == 0 ?
27566                 this.emptyMsg :
27567                 String.format(
27568                     this.displayMsg,
27569                     this.cursor+1, this.cursor+count, this.ds.getTotalCount()    
27570                 );
27571             this.displayEl.update(msg);
27572         }
27573     },
27574
27575     // private
27576     onLoad : function(ds, r, o){
27577        this.cursor = o.params ? o.params.start : 0;
27578        var d = this.getPageData(), ap = d.activePage, ps = d.pages;
27579
27580        this.afterTextEl.el.innerHTML = String.format(this.afterPageText, d.pages);
27581        this.field.dom.value = ap;
27582        this.first.setDisabled(ap == 1);
27583        this.prev.setDisabled(ap == 1);
27584        this.next.setDisabled(ap == ps);
27585        this.last.setDisabled(ap == ps);
27586        this.loading.enable();
27587        this.updateInfo();
27588     },
27589
27590     // private
27591     getPageData : function(){
27592         var total = this.ds.getTotalCount();
27593         return {
27594             total : total,
27595             activePage : Math.ceil((this.cursor+this.pageSize)/this.pageSize),
27596             pages :  total < this.pageSize ? 1 : Math.ceil(total/this.pageSize)
27597         };
27598     },
27599
27600     // private
27601     onLoadError : function(){
27602         this.loading.enable();
27603     },
27604
27605     // private
27606     onPagingKeydown : function(e){
27607         var k = e.getKey();
27608         var d = this.getPageData();
27609         if(k == e.RETURN){
27610             var v = this.field.dom.value, pageNum;
27611             if(!v || isNaN(pageNum = parseInt(v, 10))){
27612                 this.field.dom.value = d.activePage;
27613                 return;
27614             }
27615             pageNum = Math.min(Math.max(1, pageNum), d.pages) - 1;
27616             this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
27617             e.stopEvent();
27618         }
27619         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))
27620         {
27621           var pageNum = (k == e.HOME || (k == e.DOWN && e.ctrlKey) || (k == e.LEFT && e.ctrlKey) || (k == e.PAGEDOWN && e.ctrlKey)) ? 1 : d.pages;
27622           this.field.dom.value = pageNum;
27623           this.ds.load({params:{start: (pageNum - 1) * this.pageSize, limit: this.pageSize}});
27624           e.stopEvent();
27625         }
27626         else if(k == e.UP || k == e.RIGHT || k == e.PAGEUP || k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN)
27627         {
27628           var v = this.field.dom.value, pageNum; 
27629           var increment = (e.shiftKey) ? 10 : 1;
27630           if(k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN)
27631             increment *= -1;
27632           if(!v || isNaN(pageNum = parseInt(v, 10))) {
27633             this.field.dom.value = d.activePage;
27634             return;
27635           }
27636           else if(parseInt(v, 10) + increment >= 1 & parseInt(v, 10) + increment <= d.pages)
27637           {
27638             this.field.dom.value = parseInt(v, 10) + increment;
27639             pageNum = Math.min(Math.max(1, pageNum + increment), d.pages) - 1;
27640             this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
27641           }
27642           e.stopEvent();
27643         }
27644     },
27645
27646     // private
27647     beforeLoad : function(){
27648         if(this.loading){
27649             this.loading.disable();
27650         }
27651     },
27652
27653     // private
27654     onClick : function(which){
27655         var ds = this.ds;
27656         switch(which){
27657             case "first":
27658                 ds.load({params:{start: 0, limit: this.pageSize}});
27659             break;
27660             case "prev":
27661                 ds.load({params:{start: Math.max(0, this.cursor-this.pageSize), limit: this.pageSize}});
27662             break;
27663             case "next":
27664                 ds.load({params:{start: this.cursor+this.pageSize, limit: this.pageSize}});
27665             break;
27666             case "last":
27667                 var total = ds.getTotalCount();
27668                 var extra = total % this.pageSize;
27669                 var lastStart = extra ? (total - extra) : total-this.pageSize;
27670                 ds.load({params:{start: lastStart, limit: this.pageSize}});
27671             break;
27672             case "refresh":
27673                 ds.load({params:{start: this.cursor, limit: this.pageSize}});
27674             break;
27675         }
27676     },
27677
27678     /**
27679      * Unbinds the paging toolbar from the specified {@link Roo.data.Store}
27680      * @param {Roo.data.Store} store The data store to unbind
27681      */
27682     unbind : function(ds){
27683         ds.un("beforeload", this.beforeLoad, this);
27684         ds.un("load", this.onLoad, this);
27685         ds.un("loadexception", this.onLoadError, this);
27686         ds.un("remove", this.updateInfo, this);
27687         ds.un("add", this.updateInfo, this);
27688         this.ds = undefined;
27689     },
27690
27691     /**
27692      * Binds the paging toolbar to the specified {@link Roo.data.Store}
27693      * @param {Roo.data.Store} store The data store to bind
27694      */
27695     bind : function(ds){
27696         ds.on("beforeload", this.beforeLoad, this);
27697         ds.on("load", this.onLoad, this);
27698         ds.on("loadexception", this.onLoadError, this);
27699         ds.on("remove", this.updateInfo, this);
27700         ds.on("add", this.updateInfo, this);
27701         this.ds = ds;
27702     }
27703 });/*
27704  * Based on:
27705  * Ext JS Library 1.1.1
27706  * Copyright(c) 2006-2007, Ext JS, LLC.
27707  *
27708  * Originally Released Under LGPL - original licence link has changed is not relivant.
27709  *
27710  * Fork - LGPL
27711  * <script type="text/javascript">
27712  */
27713
27714 /**
27715  * @class Roo.Resizable
27716  * @extends Roo.util.Observable
27717  * <p>Applies drag handles to an element to make it resizable. The drag handles are inserted into the element
27718  * and positioned absolute. Some elements, such as a textarea or image, don't support this. To overcome that, you can wrap
27719  * 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
27720  * the element will be wrapped for you automatically.</p>
27721  * <p>Here is the list of valid resize handles:</p>
27722  * <pre>
27723 Value   Description
27724 ------  -------------------
27725  'n'     north
27726  's'     south
27727  'e'     east
27728  'w'     west
27729  'nw'    northwest
27730  'sw'    southwest
27731  'se'    southeast
27732  'ne'    northeast
27733  'hd'    horizontal drag
27734  'all'   all
27735 </pre>
27736  * <p>Here's an example showing the creation of a typical Resizable:</p>
27737  * <pre><code>
27738 var resizer = new Roo.Resizable("element-id", {
27739     handles: 'all',
27740     minWidth: 200,
27741     minHeight: 100,
27742     maxWidth: 500,
27743     maxHeight: 400,
27744     pinned: true
27745 });
27746 resizer.on("resize", myHandler);
27747 </code></pre>
27748  * <p>To hide a particular handle, set its display to none in CSS, or through script:<br>
27749  * resizer.east.setDisplayed(false);</p>
27750  * @cfg {Boolean/String/Element} resizeChild True to resize the first child, or id/element to resize (defaults to false)
27751  * @cfg {Array/String} adjustments String "auto" or an array [width, height] with values to be <b>added</b> to the
27752  * resize operation's new size (defaults to [0, 0])
27753  * @cfg {Number} minWidth The minimum width for the element (defaults to 5)
27754  * @cfg {Number} minHeight The minimum height for the element (defaults to 5)
27755  * @cfg {Number} maxWidth The maximum width for the element (defaults to 10000)
27756  * @cfg {Number} maxHeight The maximum height for the element (defaults to 10000)
27757  * @cfg {Boolean} enabled False to disable resizing (defaults to true)
27758  * @cfg {Boolean} wrap True to wrap an element with a div if needed (required for textareas and images, defaults to false)
27759  * @cfg {Number} width The width of the element in pixels (defaults to null)
27760  * @cfg {Number} height The height of the element in pixels (defaults to null)
27761  * @cfg {Boolean} animate True to animate the resize (not compatible with dynamic sizing, defaults to false)
27762  * @cfg {Number} duration Animation duration if animate = true (defaults to .35)
27763  * @cfg {Boolean} dynamic True to resize the element while dragging instead of using a proxy (defaults to false)
27764  * @cfg {String} handles String consisting of the resize handles to display (defaults to undefined)
27765  * @cfg {Boolean} multiDirectional <b>Deprecated</b>.  The old style of adding multi-direction resize handles, deprecated
27766  * in favor of the handles config option (defaults to false)
27767  * @cfg {Boolean} disableTrackOver True to disable mouse tracking. This is only applied at config time. (defaults to false)
27768  * @cfg {String} easing Animation easing if animate = true (defaults to 'easingOutStrong')
27769  * @cfg {Number} widthIncrement The increment to snap the width resize in pixels (dynamic must be true, defaults to 0)
27770  * @cfg {Number} heightIncrement The increment to snap the height resize in pixels (dynamic must be true, defaults to 0)
27771  * @cfg {Boolean} pinned True to ensure that the resize handles are always visible, false to display them only when the
27772  * user mouses over the resizable borders. This is only applied at config time. (defaults to false)
27773  * @cfg {Boolean} preserveRatio True to preserve the original ratio between height and width during resize (defaults to false)
27774  * @cfg {Boolean} transparent True for transparent handles. This is only applied at config time. (defaults to false)
27775  * @cfg {Number} minX The minimum allowed page X for the element (only used for west resizing, defaults to 0)
27776  * @cfg {Number} minY The minimum allowed page Y for the element (only used for north resizing, defaults to 0)
27777  * @cfg {Boolean} draggable Convenience to initialize drag drop (defaults to false)
27778  * @constructor
27779  * Create a new resizable component
27780  * @param {String/HTMLElement/Roo.Element} el The id or element to resize
27781  * @param {Object} config configuration options
27782   */
27783 Roo.Resizable = function(el, config)
27784 {
27785     this.el = Roo.get(el);
27786
27787     if(config && config.wrap){
27788         config.resizeChild = this.el;
27789         this.el = this.el.wrap(typeof config.wrap == "object" ? config.wrap : {cls:"xresizable-wrap"});
27790         this.el.id = this.el.dom.id = config.resizeChild.id + "-rzwrap";
27791         this.el.setStyle("overflow", "hidden");
27792         this.el.setPositioning(config.resizeChild.getPositioning());
27793         config.resizeChild.clearPositioning();
27794         if(!config.width || !config.height){
27795             var csize = config.resizeChild.getSize();
27796             this.el.setSize(csize.width, csize.height);
27797         }
27798         if(config.pinned && !config.adjustments){
27799             config.adjustments = "auto";
27800         }
27801     }
27802
27803     this.proxy = this.el.createProxy({tag: "div", cls: "x-resizable-proxy", id: this.el.id + "-rzproxy"});
27804     this.proxy.unselectable();
27805     this.proxy.enableDisplayMode('block');
27806
27807     Roo.apply(this, config);
27808
27809     if(this.pinned){
27810         this.disableTrackOver = true;
27811         this.el.addClass("x-resizable-pinned");
27812     }
27813     // if the element isn't positioned, make it relative
27814     var position = this.el.getStyle("position");
27815     if(position != "absolute" && position != "fixed"){
27816         this.el.setStyle("position", "relative");
27817     }
27818     if(!this.handles){ // no handles passed, must be legacy style
27819         this.handles = 's,e,se';
27820         if(this.multiDirectional){
27821             this.handles += ',n,w';
27822         }
27823     }
27824     if(this.handles == "all"){
27825         this.handles = "n s e w ne nw se sw";
27826     }
27827     var hs = this.handles.split(/\s*?[,;]\s*?| /);
27828     var ps = Roo.Resizable.positions;
27829     for(var i = 0, len = hs.length; i < len; i++){
27830         if(hs[i] && ps[hs[i]]){
27831             var pos = ps[hs[i]];
27832             this[pos] = new Roo.Resizable.Handle(this, pos, this.disableTrackOver, this.transparent);
27833         }
27834     }
27835     // legacy
27836     this.corner = this.southeast;
27837     
27838     // updateBox = the box can move..
27839     if(this.handles.indexOf("n") != -1 || this.handles.indexOf("w") != -1 || this.handles.indexOf("hd") != -1) {
27840         this.updateBox = true;
27841     }
27842
27843     this.activeHandle = null;
27844
27845     if(this.resizeChild){
27846         if(typeof this.resizeChild == "boolean"){
27847             this.resizeChild = Roo.get(this.el.dom.firstChild, true);
27848         }else{
27849             this.resizeChild = Roo.get(this.resizeChild, true);
27850         }
27851     }
27852     
27853     if(this.adjustments == "auto"){
27854         var rc = this.resizeChild;
27855         var hw = this.west, he = this.east, hn = this.north, hs = this.south;
27856         if(rc && (hw || hn)){
27857             rc.position("relative");
27858             rc.setLeft(hw ? hw.el.getWidth() : 0);
27859             rc.setTop(hn ? hn.el.getHeight() : 0);
27860         }
27861         this.adjustments = [
27862             (he ? -he.el.getWidth() : 0) + (hw ? -hw.el.getWidth() : 0),
27863             (hn ? -hn.el.getHeight() : 0) + (hs ? -hs.el.getHeight() : 0) -1
27864         ];
27865     }
27866
27867     if(this.draggable){
27868         this.dd = this.dynamic ?
27869             this.el.initDD(null) : this.el.initDDProxy(null, {dragElId: this.proxy.id});
27870         this.dd.setHandleElId(this.resizeChild ? this.resizeChild.id : this.el.id);
27871     }
27872
27873     // public events
27874     this.addEvents({
27875         /**
27876          * @event beforeresize
27877          * Fired before resize is allowed. Set enabled to false to cancel resize.
27878          * @param {Roo.Resizable} this
27879          * @param {Roo.EventObject} e The mousedown event
27880          */
27881         "beforeresize" : true,
27882         /**
27883          * @event resize
27884          * Fired after a resize.
27885          * @param {Roo.Resizable} this
27886          * @param {Number} width The new width
27887          * @param {Number} height The new height
27888          * @param {Roo.EventObject} e The mouseup event
27889          */
27890         "resize" : true
27891     });
27892
27893     if(this.width !== null && this.height !== null){
27894         this.resizeTo(this.width, this.height);
27895     }else{
27896         this.updateChildSize();
27897     }
27898     if(Roo.isIE){
27899         this.el.dom.style.zoom = 1;
27900     }
27901     Roo.Resizable.superclass.constructor.call(this);
27902 };
27903
27904 Roo.extend(Roo.Resizable, Roo.util.Observable, {
27905         resizeChild : false,
27906         adjustments : [0, 0],
27907         minWidth : 5,
27908         minHeight : 5,
27909         maxWidth : 10000,
27910         maxHeight : 10000,
27911         enabled : true,
27912         animate : false,
27913         duration : .35,
27914         dynamic : false,
27915         handles : false,
27916         multiDirectional : false,
27917         disableTrackOver : false,
27918         easing : 'easeOutStrong',
27919         widthIncrement : 0,
27920         heightIncrement : 0,
27921         pinned : false,
27922         width : null,
27923         height : null,
27924         preserveRatio : false,
27925         transparent: false,
27926         minX: 0,
27927         minY: 0,
27928         draggable: false,
27929
27930         /**
27931          * @cfg {String/HTMLElement/Element} constrainTo Constrain the resize to a particular element
27932          */
27933         constrainTo: undefined,
27934         /**
27935          * @cfg {Roo.lib.Region} resizeRegion Constrain the resize to a particular region
27936          */
27937         resizeRegion: undefined,
27938
27939
27940     /**
27941      * Perform a manual resize
27942      * @param {Number} width
27943      * @param {Number} height
27944      */
27945     resizeTo : function(width, height){
27946         this.el.setSize(width, height);
27947         this.updateChildSize();
27948         this.fireEvent("resize", this, width, height, null);
27949     },
27950
27951     // private
27952     startSizing : function(e, handle){
27953         this.fireEvent("beforeresize", this, e);
27954         if(this.enabled){ // 2nd enabled check in case disabled before beforeresize handler
27955
27956             if(!this.overlay){
27957                 this.overlay = this.el.createProxy({tag: "div", cls: "x-resizable-overlay", html: "&#160;"});
27958                 this.overlay.unselectable();
27959                 this.overlay.enableDisplayMode("block");
27960                 this.overlay.on("mousemove", this.onMouseMove, this);
27961                 this.overlay.on("mouseup", this.onMouseUp, this);
27962             }
27963             this.overlay.setStyle("cursor", handle.el.getStyle("cursor"));
27964
27965             this.resizing = true;
27966             this.startBox = this.el.getBox();
27967             this.startPoint = e.getXY();
27968             this.offsets = [(this.startBox.x + this.startBox.width) - this.startPoint[0],
27969                             (this.startBox.y + this.startBox.height) - this.startPoint[1]];
27970
27971             this.overlay.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
27972             this.overlay.show();
27973
27974             if(this.constrainTo) {
27975                 var ct = Roo.get(this.constrainTo);
27976                 this.resizeRegion = ct.getRegion().adjust(
27977                     ct.getFrameWidth('t'),
27978                     ct.getFrameWidth('l'),
27979                     -ct.getFrameWidth('b'),
27980                     -ct.getFrameWidth('r')
27981                 );
27982             }
27983
27984             this.proxy.setStyle('visibility', 'hidden'); // workaround display none
27985             this.proxy.show();
27986             this.proxy.setBox(this.startBox);
27987             if(!this.dynamic){
27988                 this.proxy.setStyle('visibility', 'visible');
27989             }
27990         }
27991     },
27992
27993     // private
27994     onMouseDown : function(handle, e){
27995         if(this.enabled){
27996             e.stopEvent();
27997             this.activeHandle = handle;
27998             this.startSizing(e, handle);
27999         }
28000     },
28001
28002     // private
28003     onMouseUp : function(e){
28004         var size = this.resizeElement();
28005         this.resizing = false;
28006         this.handleOut();
28007         this.overlay.hide();
28008         this.proxy.hide();
28009         this.fireEvent("resize", this, size.width, size.height, e);
28010     },
28011
28012     // private
28013     updateChildSize : function(){
28014         if(this.resizeChild){
28015             var el = this.el;
28016             var child = this.resizeChild;
28017             var adj = this.adjustments;
28018             if(el.dom.offsetWidth){
28019                 var b = el.getSize(true);
28020                 child.setSize(b.width+adj[0], b.height+adj[1]);
28021             }
28022             // Second call here for IE
28023             // The first call enables instant resizing and
28024             // the second call corrects scroll bars if they
28025             // exist
28026             if(Roo.isIE){
28027                 setTimeout(function(){
28028                     if(el.dom.offsetWidth){
28029                         var b = el.getSize(true);
28030                         child.setSize(b.width+adj[0], b.height+adj[1]);
28031                     }
28032                 }, 10);
28033             }
28034         }
28035     },
28036
28037     // private
28038     snap : function(value, inc, min){
28039         if(!inc || !value) return value;
28040         var newValue = value;
28041         var m = value % inc;
28042         if(m > 0){
28043             if(m > (inc/2)){
28044                 newValue = value + (inc-m);
28045             }else{
28046                 newValue = value - m;
28047             }
28048         }
28049         return Math.max(min, newValue);
28050     },
28051
28052     // private
28053     resizeElement : function(){
28054         var box = this.proxy.getBox();
28055         if(this.updateBox){
28056             this.el.setBox(box, false, this.animate, this.duration, null, this.easing);
28057         }else{
28058             this.el.setSize(box.width, box.height, this.animate, this.duration, null, this.easing);
28059         }
28060         this.updateChildSize();
28061         if(!this.dynamic){
28062             this.proxy.hide();
28063         }
28064         return box;
28065     },
28066
28067     // private
28068     constrain : function(v, diff, m, mx){
28069         if(v - diff < m){
28070             diff = v - m;
28071         }else if(v - diff > mx){
28072             diff = mx - v;
28073         }
28074         return diff;
28075     },
28076
28077     // private
28078     onMouseMove : function(e){
28079         if(this.enabled){
28080             try{// try catch so if something goes wrong the user doesn't get hung
28081
28082             if(this.resizeRegion && !this.resizeRegion.contains(e.getPoint())) {
28083                 return;
28084             }
28085
28086             //var curXY = this.startPoint;
28087             var curSize = this.curSize || this.startBox;
28088             var x = this.startBox.x, y = this.startBox.y;
28089             var ox = x, oy = y;
28090             var w = curSize.width, h = curSize.height;
28091             var ow = w, oh = h;
28092             var mw = this.minWidth, mh = this.minHeight;
28093             var mxw = this.maxWidth, mxh = this.maxHeight;
28094             var wi = this.widthIncrement;
28095             var hi = this.heightIncrement;
28096
28097             var eventXY = e.getXY();
28098             var diffX = -(this.startPoint[0] - Math.max(this.minX, eventXY[0]));
28099             var diffY = -(this.startPoint[1] - Math.max(this.minY, eventXY[1]));
28100
28101             var pos = this.activeHandle.position;
28102
28103             switch(pos){
28104                 case "east":
28105                     w += diffX;
28106                     w = Math.min(Math.max(mw, w), mxw);
28107                     break;
28108              
28109                 case "south":
28110                     h += diffY;
28111                     h = Math.min(Math.max(mh, h), mxh);
28112                     break;
28113                 case "southeast":
28114                     w += diffX;
28115                     h += diffY;
28116                     w = Math.min(Math.max(mw, w), mxw);
28117                     h = Math.min(Math.max(mh, h), mxh);
28118                     break;
28119                 case "north":
28120                     diffY = this.constrain(h, diffY, mh, mxh);
28121                     y += diffY;
28122                     h -= diffY;
28123                     break;
28124                 case "hdrag":
28125                     
28126                     if (wi) {
28127                         var adiffX = Math.abs(diffX);
28128                         var sub = (adiffX % wi); // how much 
28129                         if (sub > (wi/2)) { // far enough to snap
28130                             diffX = (diffX > 0) ? diffX-sub + wi : diffX+sub - wi;
28131                         } else {
28132                             // remove difference.. 
28133                             diffX = (diffX > 0) ? diffX-sub : diffX+sub;
28134                         }
28135                     }
28136                     x += diffX;
28137                     x = Math.max(this.minX, x);
28138                     break;
28139                 case "west":
28140                     diffX = this.constrain(w, diffX, mw, mxw);
28141                     x += diffX;
28142                     w -= diffX;
28143                     break;
28144                 case "northeast":
28145                     w += diffX;
28146                     w = Math.min(Math.max(mw, w), mxw);
28147                     diffY = this.constrain(h, diffY, mh, mxh);
28148                     y += diffY;
28149                     h -= diffY;
28150                     break;
28151                 case "northwest":
28152                     diffX = this.constrain(w, diffX, mw, mxw);
28153                     diffY = this.constrain(h, diffY, mh, mxh);
28154                     y += diffY;
28155                     h -= diffY;
28156                     x += diffX;
28157                     w -= diffX;
28158                     break;
28159                case "southwest":
28160                     diffX = this.constrain(w, diffX, mw, mxw);
28161                     h += diffY;
28162                     h = Math.min(Math.max(mh, h), mxh);
28163                     x += diffX;
28164                     w -= diffX;
28165                     break;
28166             }
28167
28168             var sw = this.snap(w, wi, mw);
28169             var sh = this.snap(h, hi, mh);
28170             if(sw != w || sh != h){
28171                 switch(pos){
28172                     case "northeast":
28173                         y -= sh - h;
28174                     break;
28175                     case "north":
28176                         y -= sh - h;
28177                         break;
28178                     case "southwest":
28179                         x -= sw - w;
28180                     break;
28181                     case "west":
28182                         x -= sw - w;
28183                         break;
28184                     case "northwest":
28185                         x -= sw - w;
28186                         y -= sh - h;
28187                     break;
28188                 }
28189                 w = sw;
28190                 h = sh;
28191             }
28192
28193             if(this.preserveRatio){
28194                 switch(pos){
28195                     case "southeast":
28196                     case "east":
28197                         h = oh * (w/ow);
28198                         h = Math.min(Math.max(mh, h), mxh);
28199                         w = ow * (h/oh);
28200                        break;
28201                     case "south":
28202                         w = ow * (h/oh);
28203                         w = Math.min(Math.max(mw, w), mxw);
28204                         h = oh * (w/ow);
28205                         break;
28206                     case "northeast":
28207                         w = ow * (h/oh);
28208                         w = Math.min(Math.max(mw, w), mxw);
28209                         h = oh * (w/ow);
28210                     break;
28211                     case "north":
28212                         var tw = w;
28213                         w = ow * (h/oh);
28214                         w = Math.min(Math.max(mw, w), mxw);
28215                         h = oh * (w/ow);
28216                         x += (tw - w) / 2;
28217                         break;
28218                     case "southwest":
28219                         h = oh * (w/ow);
28220                         h = Math.min(Math.max(mh, h), mxh);
28221                         var tw = w;
28222                         w = ow * (h/oh);
28223                         x += tw - w;
28224                         break;
28225                     case "west":
28226                         var th = h;
28227                         h = oh * (w/ow);
28228                         h = Math.min(Math.max(mh, h), mxh);
28229                         y += (th - h) / 2;
28230                         var tw = w;
28231                         w = ow * (h/oh);
28232                         x += tw - w;
28233                        break;
28234                     case "northwest":
28235                         var tw = w;
28236                         var th = h;
28237                         h = oh * (w/ow);
28238                         h = Math.min(Math.max(mh, h), mxh);
28239                         w = ow * (h/oh);
28240                         y += th - h;
28241                         x += tw - w;
28242                        break;
28243
28244                 }
28245             }
28246             if (pos == 'hdrag') {
28247                 w = ow;
28248             }
28249             this.proxy.setBounds(x, y, w, h);
28250             if(this.dynamic){
28251                 this.resizeElement();
28252             }
28253             }catch(e){}
28254         }
28255     },
28256
28257     // private
28258     handleOver : function(){
28259         if(this.enabled){
28260             this.el.addClass("x-resizable-over");
28261         }
28262     },
28263
28264     // private
28265     handleOut : function(){
28266         if(!this.resizing){
28267             this.el.removeClass("x-resizable-over");
28268         }
28269     },
28270
28271     /**
28272      * Returns the element this component is bound to.
28273      * @return {Roo.Element}
28274      */
28275     getEl : function(){
28276         return this.el;
28277     },
28278
28279     /**
28280      * Returns the resizeChild element (or null).
28281      * @return {Roo.Element}
28282      */
28283     getResizeChild : function(){
28284         return this.resizeChild;
28285     },
28286
28287     /**
28288      * Destroys this resizable. If the element was wrapped and
28289      * removeEl is not true then the element remains.
28290      * @param {Boolean} removeEl (optional) true to remove the element from the DOM
28291      */
28292     destroy : function(removeEl){
28293         this.proxy.remove();
28294         if(this.overlay){
28295             this.overlay.removeAllListeners();
28296             this.overlay.remove();
28297         }
28298         var ps = Roo.Resizable.positions;
28299         for(var k in ps){
28300             if(typeof ps[k] != "function" && this[ps[k]]){
28301                 var h = this[ps[k]];
28302                 h.el.removeAllListeners();
28303                 h.el.remove();
28304             }
28305         }
28306         if(removeEl){
28307             this.el.update("");
28308             this.el.remove();
28309         }
28310     }
28311 });
28312
28313 // private
28314 // hash to map config positions to true positions
28315 Roo.Resizable.positions = {
28316     n: "north", s: "south", e: "east", w: "west", se: "southeast", sw: "southwest", nw: "northwest", ne: "northeast", 
28317     hd: "hdrag"
28318 };
28319
28320 // private
28321 Roo.Resizable.Handle = function(rz, pos, disableTrackOver, transparent){
28322     if(!this.tpl){
28323         // only initialize the template if resizable is used
28324         var tpl = Roo.DomHelper.createTemplate(
28325             {tag: "div", cls: "x-resizable-handle x-resizable-handle-{0}"}
28326         );
28327         tpl.compile();
28328         Roo.Resizable.Handle.prototype.tpl = tpl;
28329     }
28330     this.position = pos;
28331     this.rz = rz;
28332     // show north drag fro topdra
28333     var handlepos = pos == 'hdrag' ? 'north' : pos;
28334     
28335     this.el = this.tpl.append(rz.el.dom, [handlepos], true);
28336     if (pos == 'hdrag') {
28337         this.el.setStyle('cursor', 'pointer');
28338     }
28339     this.el.unselectable();
28340     if(transparent){
28341         this.el.setOpacity(0);
28342     }
28343     this.el.on("mousedown", this.onMouseDown, this);
28344     if(!disableTrackOver){
28345         this.el.on("mouseover", this.onMouseOver, this);
28346         this.el.on("mouseout", this.onMouseOut, this);
28347     }
28348 };
28349
28350 // private
28351 Roo.Resizable.Handle.prototype = {
28352     afterResize : function(rz){
28353         // do nothing
28354     },
28355     // private
28356     onMouseDown : function(e){
28357         this.rz.onMouseDown(this, e);
28358     },
28359     // private
28360     onMouseOver : function(e){
28361         this.rz.handleOver(this, e);
28362     },
28363     // private
28364     onMouseOut : function(e){
28365         this.rz.handleOut(this, e);
28366     }
28367 };/*
28368  * Based on:
28369  * Ext JS Library 1.1.1
28370  * Copyright(c) 2006-2007, Ext JS, LLC.
28371  *
28372  * Originally Released Under LGPL - original licence link has changed is not relivant.
28373  *
28374  * Fork - LGPL
28375  * <script type="text/javascript">
28376  */
28377
28378 /**
28379  * @class Roo.Editor
28380  * @extends Roo.Component
28381  * A base editor field that handles displaying/hiding on demand and has some built-in sizing and event handling logic.
28382  * @constructor
28383  * Create a new Editor
28384  * @param {Roo.form.Field} field The Field object (or descendant)
28385  * @param {Object} config The config object
28386  */
28387 Roo.Editor = function(field, config){
28388     Roo.Editor.superclass.constructor.call(this, config);
28389     this.field = field;
28390     this.addEvents({
28391         /**
28392              * @event beforestartedit
28393              * Fires when editing is initiated, but before the value changes.  Editing can be canceled by returning
28394              * false from the handler of this event.
28395              * @param {Editor} this
28396              * @param {Roo.Element} boundEl The underlying element bound to this editor
28397              * @param {Mixed} value The field value being set
28398              */
28399         "beforestartedit" : true,
28400         /**
28401              * @event startedit
28402              * Fires when this editor is displayed
28403              * @param {Roo.Element} boundEl The underlying element bound to this editor
28404              * @param {Mixed} value The starting field value
28405              */
28406         "startedit" : true,
28407         /**
28408              * @event beforecomplete
28409              * Fires after a change has been made to the field, but before the change is reflected in the underlying
28410              * field.  Saving the change to the field can be canceled by returning false from the handler of this event.
28411              * Note that if the value has not changed and ignoreNoChange = true, the editing will still end but this
28412              * event will not fire since no edit actually occurred.
28413              * @param {Editor} this
28414              * @param {Mixed} value The current field value
28415              * @param {Mixed} startValue The original field value
28416              */
28417         "beforecomplete" : true,
28418         /**
28419              * @event complete
28420              * Fires after editing is complete and any changed value has been written to the underlying field.
28421              * @param {Editor} this
28422              * @param {Mixed} value The current field value
28423              * @param {Mixed} startValue The original field value
28424              */
28425         "complete" : true,
28426         /**
28427          * @event specialkey
28428          * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed.  You can check
28429          * {@link Roo.EventObject#getKey} to determine which key was pressed.
28430          * @param {Roo.form.Field} this
28431          * @param {Roo.EventObject} e The event object
28432          */
28433         "specialkey" : true
28434     });
28435 };
28436
28437 Roo.extend(Roo.Editor, Roo.Component, {
28438     /**
28439      * @cfg {Boolean/String} autosize
28440      * True for the editor to automatically adopt the size of the underlying field, "width" to adopt the width only,
28441      * or "height" to adopt the height only (defaults to false)
28442      */
28443     /**
28444      * @cfg {Boolean} revertInvalid
28445      * True to automatically revert the field value and cancel the edit when the user completes an edit and the field
28446      * validation fails (defaults to true)
28447      */
28448     /**
28449      * @cfg {Boolean} ignoreNoChange
28450      * True to skip the the edit completion process (no save, no events fired) if the user completes an edit and
28451      * the value has not changed (defaults to false).  Applies only to string values - edits for other data types
28452      * will never be ignored.
28453      */
28454     /**
28455      * @cfg {Boolean} hideEl
28456      * False to keep the bound element visible while the editor is displayed (defaults to true)
28457      */
28458     /**
28459      * @cfg {Mixed} value
28460      * The data value of the underlying field (defaults to "")
28461      */
28462     value : "",
28463     /**
28464      * @cfg {String} alignment
28465      * The position to align to (see {@link Roo.Element#alignTo} for more details, defaults to "c-c?").
28466      */
28467     alignment: "c-c?",
28468     /**
28469      * @cfg {Boolean/String} shadow "sides" for sides/bottom only, "frame" for 4-way shadow, and "drop"
28470      * for bottom-right shadow (defaults to "frame")
28471      */
28472     shadow : "frame",
28473     /**
28474      * @cfg {Boolean} constrain True to constrain the editor to the viewport
28475      */
28476     constrain : false,
28477     /**
28478      * @cfg {Boolean} completeOnEnter True to complete the edit when the enter key is pressed (defaults to false)
28479      */
28480     completeOnEnter : false,
28481     /**
28482      * @cfg {Boolean} cancelOnEsc True to cancel the edit when the escape key is pressed (defaults to false)
28483      */
28484     cancelOnEsc : false,
28485     /**
28486      * @cfg {Boolean} updateEl True to update the innerHTML of the bound element when the update completes (defaults to false)
28487      */
28488     updateEl : false,
28489
28490     // private
28491     onRender : function(ct, position){
28492         this.el = new Roo.Layer({
28493             shadow: this.shadow,
28494             cls: "x-editor",
28495             parentEl : ct,
28496             shim : this.shim,
28497             shadowOffset:4,
28498             id: this.id,
28499             constrain: this.constrain
28500         });
28501         this.el.setStyle("overflow", Roo.isGecko ? "auto" : "hidden");
28502         if(this.field.msgTarget != 'title'){
28503             this.field.msgTarget = 'qtip';
28504         }
28505         this.field.render(this.el);
28506         if(Roo.isGecko){
28507             this.field.el.dom.setAttribute('autocomplete', 'off');
28508         }
28509         this.field.on("specialkey", this.onSpecialKey, this);
28510         if(this.swallowKeys){
28511             this.field.el.swallowEvent(['keydown','keypress']);
28512         }
28513         this.field.show();
28514         this.field.on("blur", this.onBlur, this);
28515         if(this.field.grow){
28516             this.field.on("autosize", this.el.sync,  this.el, {delay:1});
28517         }
28518     },
28519
28520     onSpecialKey : function(field, e)
28521     {
28522         //Roo.log('editor onSpecialKey');
28523         if(this.completeOnEnter && e.getKey() == e.ENTER){
28524             e.stopEvent();
28525             this.completeEdit();
28526             return;
28527         }
28528         // do not fire special key otherwise it might hide close the editor...
28529         if(e.getKey() == e.ENTER){    
28530             return;
28531         }
28532         if(this.cancelOnEsc && e.getKey() == e.ESC){
28533             this.cancelEdit();
28534             return;
28535         } 
28536         this.fireEvent('specialkey', field, e);
28537     
28538     },
28539
28540     /**
28541      * Starts the editing process and shows the editor.
28542      * @param {String/HTMLElement/Element} el The element to edit
28543      * @param {String} value (optional) A value to initialize the editor with. If a value is not provided, it defaults
28544       * to the innerHTML of el.
28545      */
28546     startEdit : function(el, value){
28547         if(this.editing){
28548             this.completeEdit();
28549         }
28550         this.boundEl = Roo.get(el);
28551         var v = value !== undefined ? value : this.boundEl.dom.innerHTML;
28552         if(!this.rendered){
28553             this.render(this.parentEl || document.body);
28554         }
28555         if(this.fireEvent("beforestartedit", this, this.boundEl, v) === false){
28556             return;
28557         }
28558         this.startValue = v;
28559         this.field.setValue(v);
28560         if(this.autoSize){
28561             var sz = this.boundEl.getSize();
28562             switch(this.autoSize){
28563                 case "width":
28564                 this.setSize(sz.width,  "");
28565                 break;
28566                 case "height":
28567                 this.setSize("",  sz.height);
28568                 break;
28569                 default:
28570                 this.setSize(sz.width,  sz.height);
28571             }
28572         }
28573         this.el.alignTo(this.boundEl, this.alignment);
28574         this.editing = true;
28575         if(Roo.QuickTips){
28576             Roo.QuickTips.disable();
28577         }
28578         this.show();
28579     },
28580
28581     /**
28582      * Sets the height and width of this editor.
28583      * @param {Number} width The new width
28584      * @param {Number} height The new height
28585      */
28586     setSize : function(w, h){
28587         this.field.setSize(w, h);
28588         if(this.el){
28589             this.el.sync();
28590         }
28591     },
28592
28593     /**
28594      * Realigns the editor to the bound field based on the current alignment config value.
28595      */
28596     realign : function(){
28597         this.el.alignTo(this.boundEl, this.alignment);
28598     },
28599
28600     /**
28601      * Ends the editing process, persists the changed value to the underlying field, and hides the editor.
28602      * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after edit (defaults to false)
28603      */
28604     completeEdit : function(remainVisible){
28605         if(!this.editing){
28606             return;
28607         }
28608         var v = this.getValue();
28609         if(this.revertInvalid !== false && !this.field.isValid()){
28610             v = this.startValue;
28611             this.cancelEdit(true);
28612         }
28613         if(String(v) === String(this.startValue) && this.ignoreNoChange){
28614             this.editing = false;
28615             this.hide();
28616             return;
28617         }
28618         if(this.fireEvent("beforecomplete", this, v, this.startValue) !== false){
28619             this.editing = false;
28620             if(this.updateEl && this.boundEl){
28621                 this.boundEl.update(v);
28622             }
28623             if(remainVisible !== true){
28624                 this.hide();
28625             }
28626             this.fireEvent("complete", this, v, this.startValue);
28627         }
28628     },
28629
28630     // private
28631     onShow : function(){
28632         this.el.show();
28633         if(this.hideEl !== false){
28634             this.boundEl.hide();
28635         }
28636         this.field.show();
28637         if(Roo.isIE && !this.fixIEFocus){ // IE has problems with focusing the first time
28638             this.fixIEFocus = true;
28639             this.deferredFocus.defer(50, this);
28640         }else{
28641             this.field.focus();
28642         }
28643         this.fireEvent("startedit", this.boundEl, this.startValue);
28644     },
28645
28646     deferredFocus : function(){
28647         if(this.editing){
28648             this.field.focus();
28649         }
28650     },
28651
28652     /**
28653      * Cancels the editing process and hides the editor without persisting any changes.  The field value will be
28654      * reverted to the original starting value.
28655      * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after
28656      * cancel (defaults to false)
28657      */
28658     cancelEdit : function(remainVisible){
28659         if(this.editing){
28660             this.setValue(this.startValue);
28661             if(remainVisible !== true){
28662                 this.hide();
28663             }
28664         }
28665     },
28666
28667     // private
28668     onBlur : function(){
28669         if(this.allowBlur !== true && this.editing){
28670             this.completeEdit();
28671         }
28672     },
28673
28674     // private
28675     onHide : function(){
28676         if(this.editing){
28677             this.completeEdit();
28678             return;
28679         }
28680         this.field.blur();
28681         if(this.field.collapse){
28682             this.field.collapse();
28683         }
28684         this.el.hide();
28685         if(this.hideEl !== false){
28686             this.boundEl.show();
28687         }
28688         if(Roo.QuickTips){
28689             Roo.QuickTips.enable();
28690         }
28691     },
28692
28693     /**
28694      * Sets the data value of the editor
28695      * @param {Mixed} value Any valid value supported by the underlying field
28696      */
28697     setValue : function(v){
28698         this.field.setValue(v);
28699     },
28700
28701     /**
28702      * Gets the data value of the editor
28703      * @return {Mixed} The data value
28704      */
28705     getValue : function(){
28706         return this.field.getValue();
28707     }
28708 });/*
28709  * Based on:
28710  * Ext JS Library 1.1.1
28711  * Copyright(c) 2006-2007, Ext JS, LLC.
28712  *
28713  * Originally Released Under LGPL - original licence link has changed is not relivant.
28714  *
28715  * Fork - LGPL
28716  * <script type="text/javascript">
28717  */
28718  
28719 /**
28720  * @class Roo.BasicDialog
28721  * @extends Roo.util.Observable
28722  * Lightweight Dialog Class.  The code below shows the creation of a typical dialog using existing HTML markup:
28723  * <pre><code>
28724 var dlg = new Roo.BasicDialog("my-dlg", {
28725     height: 200,
28726     width: 300,
28727     minHeight: 100,
28728     minWidth: 150,
28729     modal: true,
28730     proxyDrag: true,
28731     shadow: true
28732 });
28733 dlg.addKeyListener(27, dlg.hide, dlg); // ESC can also close the dialog
28734 dlg.addButton('OK', dlg.hide, dlg);    // Could call a save function instead of hiding
28735 dlg.addButton('Cancel', dlg.hide, dlg);
28736 dlg.show();
28737 </code></pre>
28738   <b>A Dialog should always be a direct child of the body element.</b>
28739  * @cfg {Boolean/DomHelper} autoCreate True to auto create from scratch, or using a DomHelper Object (defaults to false)
28740  * @cfg {String} title Default text to display in the title bar (defaults to null)
28741  * @cfg {Number} width Width of the dialog in pixels (can also be set via CSS).  Determined by browser if unspecified.
28742  * @cfg {Number} height Height of the dialog in pixels (can also be set via CSS).  Determined by browser if unspecified.
28743  * @cfg {Number} x The default left page coordinate of the dialog (defaults to center screen)
28744  * @cfg {Number} y The default top page coordinate of the dialog (defaults to center screen)
28745  * @cfg {String/Element} animateTarget Id or element from which the dialog should animate while opening
28746  * (defaults to null with no animation)
28747  * @cfg {Boolean} resizable False to disable manual dialog resizing (defaults to true)
28748  * @cfg {String} resizeHandles Which resize handles to display - see the {@link Roo.Resizable} handles config
28749  * property for valid values (defaults to 'all')
28750  * @cfg {Number} minHeight The minimum allowable height for a resizable dialog (defaults to 80)
28751  * @cfg {Number} minWidth The minimum allowable width for a resizable dialog (defaults to 200)
28752  * @cfg {Boolean} modal True to show the dialog modally, preventing user interaction with the rest of the page (defaults to false)
28753  * @cfg {Boolean} autoScroll True to allow the dialog body contents to overflow and display scrollbars (defaults to false)
28754  * @cfg {Boolean} closable False to remove the built-in top-right corner close button (defaults to true)
28755  * @cfg {Boolean} collapsible False to remove the built-in top-right corner collapse button (defaults to true)
28756  * @cfg {Boolean} constraintoviewport True to keep the dialog constrained within the visible viewport boundaries (defaults to true)
28757  * @cfg {Boolean} syncHeightBeforeShow True to cause the dimensions to be recalculated before the dialog is shown (defaults to false)
28758  * @cfg {Boolean} draggable False to disable dragging of the dialog within the viewport (defaults to true)
28759  * @cfg {Boolean} autoTabs If true, all elements with class 'x-dlg-tab' will get automatically converted to tabs (defaults to false)
28760  * @cfg {String} tabTag The tag name of tab elements, used when autoTabs = true (defaults to 'div')
28761  * @cfg {Boolean} proxyDrag True to drag a lightweight proxy element rather than the dialog itself, used when
28762  * draggable = true (defaults to false)
28763  * @cfg {Boolean} fixedcenter True to ensure that anytime the dialog is shown or resized it gets centered (defaults to false)
28764  * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
28765  * shadow (defaults to false)
28766  * @cfg {Number} shadowOffset The number of pixels to offset the shadow if displayed (defaults to 5)
28767  * @cfg {String} buttonAlign Valid values are "left," "center" and "right" (defaults to "right")
28768  * @cfg {Number} minButtonWidth Minimum width of all dialog buttons (defaults to 75)
28769  * @cfg {Array} buttons Array of buttons
28770  * @cfg {Boolean} shim True to create an iframe shim that prevents selects from showing through (defaults to false)
28771  * @constructor
28772  * Create a new BasicDialog.
28773  * @param {String/HTMLElement/Roo.Element} el The container element or DOM node, or its id
28774  * @param {Object} config Configuration options
28775  */
28776 Roo.BasicDialog = function(el, config){
28777     this.el = Roo.get(el);
28778     var dh = Roo.DomHelper;
28779     if(!this.el && config && config.autoCreate){
28780         if(typeof config.autoCreate == "object"){
28781             if(!config.autoCreate.id){
28782                 config.autoCreate.id = el;
28783             }
28784             this.el = dh.append(document.body,
28785                         config.autoCreate, true);
28786         }else{
28787             this.el = dh.append(document.body,
28788                         {tag: "div", id: el, style:'visibility:hidden;'}, true);
28789         }
28790     }
28791     el = this.el;
28792     el.setDisplayed(true);
28793     el.hide = this.hideAction;
28794     this.id = el.id;
28795     el.addClass("x-dlg");
28796
28797     Roo.apply(this, config);
28798
28799     this.proxy = el.createProxy("x-dlg-proxy");
28800     this.proxy.hide = this.hideAction;
28801     this.proxy.setOpacity(.5);
28802     this.proxy.hide();
28803
28804     if(config.width){
28805         el.setWidth(config.width);
28806     }
28807     if(config.height){
28808         el.setHeight(config.height);
28809     }
28810     this.size = el.getSize();
28811     if(typeof config.x != "undefined" && typeof config.y != "undefined"){
28812         this.xy = [config.x,config.y];
28813     }else{
28814         this.xy = el.getCenterXY(true);
28815     }
28816     /** The header element @type Roo.Element */
28817     this.header = el.child("> .x-dlg-hd");
28818     /** The body element @type Roo.Element */
28819     this.body = el.child("> .x-dlg-bd");
28820     /** The footer element @type Roo.Element */
28821     this.footer = el.child("> .x-dlg-ft");
28822
28823     if(!this.header){
28824         this.header = el.createChild({tag: "div", cls:"x-dlg-hd", html: "&#160;"}, this.body ? this.body.dom : null);
28825     }
28826     if(!this.body){
28827         this.body = el.createChild({tag: "div", cls:"x-dlg-bd"});
28828     }
28829
28830     this.header.unselectable();
28831     if(this.title){
28832         this.header.update(this.title);
28833     }
28834     // this element allows the dialog to be focused for keyboard event
28835     this.focusEl = el.createChild({tag: "a", href:"#", cls:"x-dlg-focus", tabIndex:"-1"});
28836     this.focusEl.swallowEvent("click", true);
28837
28838     this.header.wrap({cls:"x-dlg-hd-right"}).wrap({cls:"x-dlg-hd-left"}, true);
28839
28840     // wrap the body and footer for special rendering
28841     this.bwrap = this.body.wrap({tag: "div", cls:"x-dlg-dlg-body"});
28842     if(this.footer){
28843         this.bwrap.dom.appendChild(this.footer.dom);
28844     }
28845
28846     this.bg = this.el.createChild({
28847         tag: "div", cls:"x-dlg-bg",
28848         html: '<div class="x-dlg-bg-left"><div class="x-dlg-bg-right"><div class="x-dlg-bg-center">&#160;</div></div></div>'
28849     });
28850     this.centerBg = this.bg.child("div.x-dlg-bg-center");
28851
28852
28853     if(this.autoScroll !== false && !this.autoTabs){
28854         this.body.setStyle("overflow", "auto");
28855     }
28856
28857     this.toolbox = this.el.createChild({cls: "x-dlg-toolbox"});
28858
28859     if(this.closable !== false){
28860         this.el.addClass("x-dlg-closable");
28861         this.close = this.toolbox.createChild({cls:"x-dlg-close"});
28862         this.close.on("click", this.closeClick, this);
28863         this.close.addClassOnOver("x-dlg-close-over");
28864     }
28865     if(this.collapsible !== false){
28866         this.collapseBtn = this.toolbox.createChild({cls:"x-dlg-collapse"});
28867         this.collapseBtn.on("click", this.collapseClick, this);
28868         this.collapseBtn.addClassOnOver("x-dlg-collapse-over");
28869         this.header.on("dblclick", this.collapseClick, this);
28870     }
28871     if(this.resizable !== false){
28872         this.el.addClass("x-dlg-resizable");
28873         this.resizer = new Roo.Resizable(el, {
28874             minWidth: this.minWidth || 80,
28875             minHeight:this.minHeight || 80,
28876             handles: this.resizeHandles || "all",
28877             pinned: true
28878         });
28879         this.resizer.on("beforeresize", this.beforeResize, this);
28880         this.resizer.on("resize", this.onResize, this);
28881     }
28882     if(this.draggable !== false){
28883         el.addClass("x-dlg-draggable");
28884         if (!this.proxyDrag) {
28885             var dd = new Roo.dd.DD(el.dom.id, "WindowDrag");
28886         }
28887         else {
28888             var dd = new Roo.dd.DDProxy(el.dom.id, "WindowDrag", {dragElId: this.proxy.id});
28889         }
28890         dd.setHandleElId(this.header.id);
28891         dd.endDrag = this.endMove.createDelegate(this);
28892         dd.startDrag = this.startMove.createDelegate(this);
28893         dd.onDrag = this.onDrag.createDelegate(this);
28894         dd.scroll = false;
28895         this.dd = dd;
28896     }
28897     if(this.modal){
28898         this.mask = dh.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true);
28899         this.mask.enableDisplayMode("block");
28900         this.mask.hide();
28901         this.el.addClass("x-dlg-modal");
28902     }
28903     if(this.shadow){
28904         this.shadow = new Roo.Shadow({
28905             mode : typeof this.shadow == "string" ? this.shadow : "sides",
28906             offset : this.shadowOffset
28907         });
28908     }else{
28909         this.shadowOffset = 0;
28910     }
28911     if(Roo.useShims && this.shim !== false){
28912         this.shim = this.el.createShim();
28913         this.shim.hide = this.hideAction;
28914         this.shim.hide();
28915     }else{
28916         this.shim = false;
28917     }
28918     if(this.autoTabs){
28919         this.initTabs();
28920     }
28921     if (this.buttons) { 
28922         var bts= this.buttons;
28923         this.buttons = [];
28924         Roo.each(bts, function(b) {
28925             this.addButton(b);
28926         }, this);
28927     }
28928     
28929     
28930     this.addEvents({
28931         /**
28932          * @event keydown
28933          * Fires when a key is pressed
28934          * @param {Roo.BasicDialog} this
28935          * @param {Roo.EventObject} e
28936          */
28937         "keydown" : true,
28938         /**
28939          * @event move
28940          * Fires when this dialog is moved by the user.
28941          * @param {Roo.BasicDialog} this
28942          * @param {Number} x The new page X
28943          * @param {Number} y The new page Y
28944          */
28945         "move" : true,
28946         /**
28947          * @event resize
28948          * Fires when this dialog is resized by the user.
28949          * @param {Roo.BasicDialog} this
28950          * @param {Number} width The new width
28951          * @param {Number} height The new height
28952          */
28953         "resize" : true,
28954         /**
28955          * @event beforehide
28956          * Fires before this dialog is hidden.
28957          * @param {Roo.BasicDialog} this
28958          */
28959         "beforehide" : true,
28960         /**
28961          * @event hide
28962          * Fires when this dialog is hidden.
28963          * @param {Roo.BasicDialog} this
28964          */
28965         "hide" : true,
28966         /**
28967          * @event beforeshow
28968          * Fires before this dialog is shown.
28969          * @param {Roo.BasicDialog} this
28970          */
28971         "beforeshow" : true,
28972         /**
28973          * @event show
28974          * Fires when this dialog is shown.
28975          * @param {Roo.BasicDialog} this
28976          */
28977         "show" : true
28978     });
28979     el.on("keydown", this.onKeyDown, this);
28980     el.on("mousedown", this.toFront, this);
28981     Roo.EventManager.onWindowResize(this.adjustViewport, this, true);
28982     this.el.hide();
28983     Roo.DialogManager.register(this);
28984     Roo.BasicDialog.superclass.constructor.call(this);
28985 };
28986
28987 Roo.extend(Roo.BasicDialog, Roo.util.Observable, {
28988     shadowOffset: Roo.isIE ? 6 : 5,
28989     minHeight: 80,
28990     minWidth: 200,
28991     minButtonWidth: 75,
28992     defaultButton: null,
28993     buttonAlign: "right",
28994     tabTag: 'div',
28995     firstShow: true,
28996
28997     /**
28998      * Sets the dialog title text
28999      * @param {String} text The title text to display
29000      * @return {Roo.BasicDialog} this
29001      */
29002     setTitle : function(text){
29003         this.header.update(text);
29004         return this;
29005     },
29006
29007     // private
29008     closeClick : function(){
29009         this.hide();
29010     },
29011
29012     // private
29013     collapseClick : function(){
29014         this[this.collapsed ? "expand" : "collapse"]();
29015     },
29016
29017     /**
29018      * Collapses the dialog to its minimized state (only the title bar is visible).
29019      * Equivalent to the user clicking the collapse dialog button.
29020      */
29021     collapse : function(){
29022         if(!this.collapsed){
29023             this.collapsed = true;
29024             this.el.addClass("x-dlg-collapsed");
29025             this.restoreHeight = this.el.getHeight();
29026             this.resizeTo(this.el.getWidth(), this.header.getHeight());
29027         }
29028     },
29029
29030     /**
29031      * Expands a collapsed dialog back to its normal state.  Equivalent to the user
29032      * clicking the expand dialog button.
29033      */
29034     expand : function(){
29035         if(this.collapsed){
29036             this.collapsed = false;
29037             this.el.removeClass("x-dlg-collapsed");
29038             this.resizeTo(this.el.getWidth(), this.restoreHeight);
29039         }
29040     },
29041
29042     /**
29043      * Reinitializes the tabs component, clearing out old tabs and finding new ones.
29044      * @return {Roo.TabPanel} The tabs component
29045      */
29046     initTabs : function(){
29047         var tabs = this.getTabs();
29048         while(tabs.getTab(0)){
29049             tabs.removeTab(0);
29050         }
29051         this.el.select(this.tabTag+'.x-dlg-tab').each(function(el){
29052             var dom = el.dom;
29053             tabs.addTab(Roo.id(dom), dom.title);
29054             dom.title = "";
29055         });
29056         tabs.activate(0);
29057         return tabs;
29058     },
29059
29060     // private
29061     beforeResize : function(){
29062         this.resizer.minHeight = Math.max(this.minHeight, this.getHeaderFooterHeight(true)+40);
29063     },
29064
29065     // private
29066     onResize : function(){
29067         this.refreshSize();
29068         this.syncBodyHeight();
29069         this.adjustAssets();
29070         this.focus();
29071         this.fireEvent("resize", this, this.size.width, this.size.height);
29072     },
29073
29074     // private
29075     onKeyDown : function(e){
29076         if(this.isVisible()){
29077             this.fireEvent("keydown", this, e);
29078         }
29079     },
29080
29081     /**
29082      * Resizes the dialog.
29083      * @param {Number} width
29084      * @param {Number} height
29085      * @return {Roo.BasicDialog} this
29086      */
29087     resizeTo : function(width, height){
29088         this.el.setSize(width, height);
29089         this.size = {width: width, height: height};
29090         this.syncBodyHeight();
29091         if(this.fixedcenter){
29092             this.center();
29093         }
29094         if(this.isVisible()){
29095             this.constrainXY();
29096             this.adjustAssets();
29097         }
29098         this.fireEvent("resize", this, width, height);
29099         return this;
29100     },
29101
29102
29103     /**
29104      * Resizes the dialog to fit the specified content size.
29105      * @param {Number} width
29106      * @param {Number} height
29107      * @return {Roo.BasicDialog} this
29108      */
29109     setContentSize : function(w, h){
29110         h += this.getHeaderFooterHeight() + this.body.getMargins("tb");
29111         w += this.body.getMargins("lr") + this.bwrap.getMargins("lr") + this.centerBg.getPadding("lr");
29112         //if(!this.el.isBorderBox()){
29113             h +=  this.body.getPadding("tb") + this.bwrap.getBorderWidth("tb") + this.body.getBorderWidth("tb") + this.el.getBorderWidth("tb");
29114             w += this.body.getPadding("lr") + this.bwrap.getBorderWidth("lr") + this.body.getBorderWidth("lr") + this.bwrap.getPadding("lr") + this.el.getBorderWidth("lr");
29115         //}
29116         if(this.tabs){
29117             h += this.tabs.stripWrap.getHeight() + this.tabs.bodyEl.getMargins("tb") + this.tabs.bodyEl.getPadding("tb");
29118             w += this.tabs.bodyEl.getMargins("lr") + this.tabs.bodyEl.getPadding("lr");
29119         }
29120         this.resizeTo(w, h);
29121         return this;
29122     },
29123
29124     /**
29125      * Adds a key listener for when this dialog is displayed.  This allows you to hook in a function that will be
29126      * executed in response to a particular key being pressed while the dialog is active.
29127      * @param {Number/Array/Object} key Either the numeric key code, array of key codes or an object with the following options:
29128      *                                  {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
29129      * @param {Function} fn The function to call
29130      * @param {Object} scope (optional) The scope of the function
29131      * @return {Roo.BasicDialog} this
29132      */
29133     addKeyListener : function(key, fn, scope){
29134         var keyCode, shift, ctrl, alt;
29135         if(typeof key == "object" && !(key instanceof Array)){
29136             keyCode = key["key"];
29137             shift = key["shift"];
29138             ctrl = key["ctrl"];
29139             alt = key["alt"];
29140         }else{
29141             keyCode = key;
29142         }
29143         var handler = function(dlg, e){
29144             if((!shift || e.shiftKey) && (!ctrl || e.ctrlKey) &&  (!alt || e.altKey)){
29145                 var k = e.getKey();
29146                 if(keyCode instanceof Array){
29147                     for(var i = 0, len = keyCode.length; i < len; i++){
29148                         if(keyCode[i] == k){
29149                           fn.call(scope || window, dlg, k, e);
29150                           return;
29151                         }
29152                     }
29153                 }else{
29154                     if(k == keyCode){
29155                         fn.call(scope || window, dlg, k, e);
29156                     }
29157                 }
29158             }
29159         };
29160         this.on("keydown", handler);
29161         return this;
29162     },
29163
29164     /**
29165      * Returns the TabPanel component (creates it if it doesn't exist).
29166      * Note: If you wish to simply check for the existence of tabs without creating them,
29167      * check for a null 'tabs' property.
29168      * @return {Roo.TabPanel} The tabs component
29169      */
29170     getTabs : function(){
29171         if(!this.tabs){
29172             this.el.addClass("x-dlg-auto-tabs");
29173             this.body.addClass(this.tabPosition == "bottom" ? "x-tabs-bottom" : "x-tabs-top");
29174             this.tabs = new Roo.TabPanel(this.body.dom, this.tabPosition == "bottom");
29175         }
29176         return this.tabs;
29177     },
29178
29179     /**
29180      * Adds a button to the footer section of the dialog.
29181      * @param {String/Object} config A string becomes the button text, an object can either be a Button config
29182      * object or a valid Roo.DomHelper element config
29183      * @param {Function} handler The function called when the button is clicked
29184      * @param {Object} scope (optional) The scope of the handler function (accepts position as a property)
29185      * @return {Roo.Button} The new button
29186      */
29187     addButton : function(config, handler, scope){
29188         var dh = Roo.DomHelper;
29189         if(!this.footer){
29190             this.footer = dh.append(this.bwrap, {tag: "div", cls:"x-dlg-ft"}, true);
29191         }
29192         if(!this.btnContainer){
29193             var tb = this.footer.createChild({
29194
29195                 cls:"x-dlg-btns x-dlg-btns-"+this.buttonAlign,
29196                 html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'
29197             }, null, true);
29198             this.btnContainer = tb.firstChild.firstChild.firstChild;
29199         }
29200         var bconfig = {
29201             handler: handler,
29202             scope: scope,
29203             minWidth: this.minButtonWidth,
29204             hideParent:true
29205         };
29206         if(typeof config == "string"){
29207             bconfig.text = config;
29208         }else{
29209             if(config.tag){
29210                 bconfig.dhconfig = config;
29211             }else{
29212                 Roo.apply(bconfig, config);
29213             }
29214         }
29215         var fc = false;
29216         if ((typeof(bconfig.position) != 'undefined') && bconfig.position < this.btnContainer.childNodes.length-1) {
29217             bconfig.position = Math.max(0, bconfig.position);
29218             fc = this.btnContainer.childNodes[bconfig.position];
29219         }
29220          
29221         var btn = new Roo.Button(
29222             fc ? 
29223                 this.btnContainer.insertBefore(document.createElement("td"),fc)
29224                 : this.btnContainer.appendChild(document.createElement("td")),
29225             //Roo.get(this.btnContainer).createChild( { tag: 'td'},  fc ),
29226             bconfig
29227         );
29228         this.syncBodyHeight();
29229         if(!this.buttons){
29230             /**
29231              * Array of all the buttons that have been added to this dialog via addButton
29232              * @type Array
29233              */
29234             this.buttons = [];
29235         }
29236         this.buttons.push(btn);
29237         return btn;
29238     },
29239
29240     /**
29241      * Sets the default button to be focused when the dialog is displayed.
29242      * @param {Roo.BasicDialog.Button} btn The button object returned by {@link #addButton}
29243      * @return {Roo.BasicDialog} this
29244      */
29245     setDefaultButton : function(btn){
29246         this.defaultButton = btn;
29247         return this;
29248     },
29249
29250     // private
29251     getHeaderFooterHeight : function(safe){
29252         var height = 0;
29253         if(this.header){
29254            height += this.header.getHeight();
29255         }
29256         if(this.footer){
29257            var fm = this.footer.getMargins();
29258             height += (this.footer.getHeight()+fm.top+fm.bottom);
29259         }
29260         height += this.bwrap.getPadding("tb")+this.bwrap.getBorderWidth("tb");
29261         height += this.centerBg.getPadding("tb");
29262         return height;
29263     },
29264
29265     // private
29266     syncBodyHeight : function(){
29267         var bd = this.body, cb = this.centerBg, bw = this.bwrap;
29268         var height = this.size.height - this.getHeaderFooterHeight(false);
29269         bd.setHeight(height-bd.getMargins("tb"));
29270         var hh = this.header.getHeight();
29271         var h = this.size.height-hh;
29272         cb.setHeight(h);
29273         bw.setLeftTop(cb.getPadding("l"), hh+cb.getPadding("t"));
29274         bw.setHeight(h-cb.getPadding("tb"));
29275         bw.setWidth(this.el.getWidth(true)-cb.getPadding("lr"));
29276         bd.setWidth(bw.getWidth(true));
29277         if(this.tabs){
29278             this.tabs.syncHeight();
29279             if(Roo.isIE){
29280                 this.tabs.el.repaint();
29281             }
29282         }
29283     },
29284
29285     /**
29286      * Restores the previous state of the dialog if Roo.state is configured.
29287      * @return {Roo.BasicDialog} this
29288      */
29289     restoreState : function(){
29290         var box = Roo.state.Manager.get(this.stateId || (this.el.id + "-state"));
29291         if(box && box.width){
29292             this.xy = [box.x, box.y];
29293             this.resizeTo(box.width, box.height);
29294         }
29295         return this;
29296     },
29297
29298     // private
29299     beforeShow : function(){
29300         this.expand();
29301         if(this.fixedcenter){
29302             this.xy = this.el.getCenterXY(true);
29303         }
29304         if(this.modal){
29305             Roo.get(document.body).addClass("x-body-masked");
29306             this.mask.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
29307             this.mask.show();
29308         }
29309         this.constrainXY();
29310     },
29311
29312     // private
29313     animShow : function(){
29314         var b = Roo.get(this.animateTarget).getBox();
29315         this.proxy.setSize(b.width, b.height);
29316         this.proxy.setLocation(b.x, b.y);
29317         this.proxy.show();
29318         this.proxy.setBounds(this.xy[0], this.xy[1], this.size.width, this.size.height,
29319                     true, .35, this.showEl.createDelegate(this));
29320     },
29321
29322     /**
29323      * Shows the dialog.
29324      * @param {String/HTMLElement/Roo.Element} animateTarget (optional) Reset the animation target
29325      * @return {Roo.BasicDialog} this
29326      */
29327     show : function(animateTarget){
29328         if (this.fireEvent("beforeshow", this) === false){
29329             return;
29330         }
29331         if(this.syncHeightBeforeShow){
29332             this.syncBodyHeight();
29333         }else if(this.firstShow){
29334             this.firstShow = false;
29335             this.syncBodyHeight(); // sync the height on the first show instead of in the constructor
29336         }
29337         this.animateTarget = animateTarget || this.animateTarget;
29338         if(!this.el.isVisible()){
29339             this.beforeShow();
29340             if(this.animateTarget && Roo.get(this.animateTarget)){
29341                 this.animShow();
29342             }else{
29343                 this.showEl();
29344             }
29345         }
29346         return this;
29347     },
29348
29349     // private
29350     showEl : function(){
29351         this.proxy.hide();
29352         this.el.setXY(this.xy);
29353         this.el.show();
29354         this.adjustAssets(true);
29355         this.toFront();
29356         this.focus();
29357         // IE peekaboo bug - fix found by Dave Fenwick
29358         if(Roo.isIE){
29359             this.el.repaint();
29360         }
29361         this.fireEvent("show", this);
29362     },
29363
29364     /**
29365      * Focuses the dialog.  If a defaultButton is set, it will receive focus, otherwise the
29366      * dialog itself will receive focus.
29367      */
29368     focus : function(){
29369         if(this.defaultButton){
29370             this.defaultButton.focus();
29371         }else{
29372             this.focusEl.focus();
29373         }
29374     },
29375
29376     // private
29377     constrainXY : function(){
29378         if(this.constraintoviewport !== false){
29379             if(!this.viewSize){
29380                 if(this.container){
29381                     var s = this.container.getSize();
29382                     this.viewSize = [s.width, s.height];
29383                 }else{
29384                     this.viewSize = [Roo.lib.Dom.getViewWidth(),Roo.lib.Dom.getViewHeight()];
29385                 }
29386             }
29387             var s = Roo.get(this.container||document).getScroll();
29388
29389             var x = this.xy[0], y = this.xy[1];
29390             var w = this.size.width, h = this.size.height;
29391             var vw = this.viewSize[0], vh = this.viewSize[1];
29392             // only move it if it needs it
29393             var moved = false;
29394             // first validate right/bottom
29395             if(x + w > vw+s.left){
29396                 x = vw - w;
29397                 moved = true;
29398             }
29399             if(y + h > vh+s.top){
29400                 y = vh - h;
29401                 moved = true;
29402             }
29403             // then make sure top/left isn't negative
29404             if(x < s.left){
29405                 x = s.left;
29406                 moved = true;
29407             }
29408             if(y < s.top){
29409                 y = s.top;
29410                 moved = true;
29411             }
29412             if(moved){
29413                 // cache xy
29414                 this.xy = [x, y];
29415                 if(this.isVisible()){
29416                     this.el.setLocation(x, y);
29417                     this.adjustAssets();
29418                 }
29419             }
29420         }
29421     },
29422
29423     // private
29424     onDrag : function(){
29425         if(!this.proxyDrag){
29426             this.xy = this.el.getXY();
29427             this.adjustAssets();
29428         }
29429     },
29430
29431     // private
29432     adjustAssets : function(doShow){
29433         var x = this.xy[0], y = this.xy[1];
29434         var w = this.size.width, h = this.size.height;
29435         if(doShow === true){
29436             if(this.shadow){
29437                 this.shadow.show(this.el);
29438             }
29439             if(this.shim){
29440                 this.shim.show();
29441             }
29442         }
29443         if(this.shadow && this.shadow.isVisible()){
29444             this.shadow.show(this.el);
29445         }
29446         if(this.shim && this.shim.isVisible()){
29447             this.shim.setBounds(x, y, w, h);
29448         }
29449     },
29450
29451     // private
29452     adjustViewport : function(w, h){
29453         if(!w || !h){
29454             w = Roo.lib.Dom.getViewWidth();
29455             h = Roo.lib.Dom.getViewHeight();
29456         }
29457         // cache the size
29458         this.viewSize = [w, h];
29459         if(this.modal && this.mask.isVisible()){
29460             this.mask.setSize(w, h); // first make sure the mask isn't causing overflow
29461             this.mask.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
29462         }
29463         if(this.isVisible()){
29464             this.constrainXY();
29465         }
29466     },
29467
29468     /**
29469      * Destroys this dialog and all its supporting elements (including any tabs, shim,
29470      * shadow, proxy, mask, etc.)  Also removes all event listeners.
29471      * @param {Boolean} removeEl (optional) true to remove the element from the DOM
29472      */
29473     destroy : function(removeEl){
29474         if(this.isVisible()){
29475             this.animateTarget = null;
29476             this.hide();
29477         }
29478         Roo.EventManager.removeResizeListener(this.adjustViewport, this);
29479         if(this.tabs){
29480             this.tabs.destroy(removeEl);
29481         }
29482         Roo.destroy(
29483              this.shim,
29484              this.proxy,
29485              this.resizer,
29486              this.close,
29487              this.mask
29488         );
29489         if(this.dd){
29490             this.dd.unreg();
29491         }
29492         if(this.buttons){
29493            for(var i = 0, len = this.buttons.length; i < len; i++){
29494                this.buttons[i].destroy();
29495            }
29496         }
29497         this.el.removeAllListeners();
29498         if(removeEl === true){
29499             this.el.update("");
29500             this.el.remove();
29501         }
29502         Roo.DialogManager.unregister(this);
29503     },
29504
29505     // private
29506     startMove : function(){
29507         if(this.proxyDrag){
29508             this.proxy.show();
29509         }
29510         if(this.constraintoviewport !== false){
29511             this.dd.constrainTo(document.body, {right: this.shadowOffset, bottom: this.shadowOffset});
29512         }
29513     },
29514
29515     // private
29516     endMove : function(){
29517         if(!this.proxyDrag){
29518             Roo.dd.DD.prototype.endDrag.apply(this.dd, arguments);
29519         }else{
29520             Roo.dd.DDProxy.prototype.endDrag.apply(this.dd, arguments);
29521             this.proxy.hide();
29522         }
29523         this.refreshSize();
29524         this.adjustAssets();
29525         this.focus();
29526         this.fireEvent("move", this, this.xy[0], this.xy[1]);
29527     },
29528
29529     /**
29530      * Brings this dialog to the front of any other visible dialogs
29531      * @return {Roo.BasicDialog} this
29532      */
29533     toFront : function(){
29534         Roo.DialogManager.bringToFront(this);
29535         return this;
29536     },
29537
29538     /**
29539      * Sends this dialog to the back (under) of any other visible dialogs
29540      * @return {Roo.BasicDialog} this
29541      */
29542     toBack : function(){
29543         Roo.DialogManager.sendToBack(this);
29544         return this;
29545     },
29546
29547     /**
29548      * Centers this dialog in the viewport
29549      * @return {Roo.BasicDialog} this
29550      */
29551     center : function(){
29552         var xy = this.el.getCenterXY(true);
29553         this.moveTo(xy[0], xy[1]);
29554         return this;
29555     },
29556
29557     /**
29558      * Moves the dialog's top-left corner to the specified point
29559      * @param {Number} x
29560      * @param {Number} y
29561      * @return {Roo.BasicDialog} this
29562      */
29563     moveTo : function(x, y){
29564         this.xy = [x,y];
29565         if(this.isVisible()){
29566             this.el.setXY(this.xy);
29567             this.adjustAssets();
29568         }
29569         return this;
29570     },
29571
29572     /**
29573      * Aligns the dialog to the specified element
29574      * @param {String/HTMLElement/Roo.Element} element The element to align to.
29575      * @param {String} position The position to align to (see {@link Roo.Element#alignTo} for more details).
29576      * @param {Array} offsets (optional) Offset the positioning by [x, y]
29577      * @return {Roo.BasicDialog} this
29578      */
29579     alignTo : function(element, position, offsets){
29580         this.xy = this.el.getAlignToXY(element, position, offsets);
29581         if(this.isVisible()){
29582             this.el.setXY(this.xy);
29583             this.adjustAssets();
29584         }
29585         return this;
29586     },
29587
29588     /**
29589      * Anchors an element to another element and realigns it when the window is resized.
29590      * @param {String/HTMLElement/Roo.Element} element The element to align to.
29591      * @param {String} position The position to align to (see {@link Roo.Element#alignTo} for more details)
29592      * @param {Array} offsets (optional) Offset the positioning by [x, y]
29593      * @param {Boolean/Number} monitorScroll (optional) true to monitor body scroll and reposition. If this parameter
29594      * is a number, it is used as the buffer delay (defaults to 50ms).
29595      * @return {Roo.BasicDialog} this
29596      */
29597     anchorTo : function(el, alignment, offsets, monitorScroll){
29598         var action = function(){
29599             this.alignTo(el, alignment, offsets);
29600         };
29601         Roo.EventManager.onWindowResize(action, this);
29602         var tm = typeof monitorScroll;
29603         if(tm != 'undefined'){
29604             Roo.EventManager.on(window, 'scroll', action, this,
29605                 {buffer: tm == 'number' ? monitorScroll : 50});
29606         }
29607         action.call(this);
29608         return this;
29609     },
29610
29611     /**
29612      * Returns true if the dialog is visible
29613      * @return {Boolean}
29614      */
29615     isVisible : function(){
29616         return this.el.isVisible();
29617     },
29618
29619     // private
29620     animHide : function(callback){
29621         var b = Roo.get(this.animateTarget).getBox();
29622         this.proxy.show();
29623         this.proxy.setBounds(this.xy[0], this.xy[1], this.size.width, this.size.height);
29624         this.el.hide();
29625         this.proxy.setBounds(b.x, b.y, b.width, b.height, true, .35,
29626                     this.hideEl.createDelegate(this, [callback]));
29627     },
29628
29629     /**
29630      * Hides the dialog.
29631      * @param {Function} callback (optional) Function to call when the dialog is hidden
29632      * @return {Roo.BasicDialog} this
29633      */
29634     hide : function(callback){
29635         if (this.fireEvent("beforehide", this) === false){
29636             return;
29637         }
29638         if(this.shadow){
29639             this.shadow.hide();
29640         }
29641         if(this.shim) {
29642           this.shim.hide();
29643         }
29644         // sometimes animateTarget seems to get set.. causing problems...
29645         // this just double checks..
29646         if(this.animateTarget && Roo.get(this.animateTarget)) {
29647            this.animHide(callback);
29648         }else{
29649             this.el.hide();
29650             this.hideEl(callback);
29651         }
29652         return this;
29653     },
29654
29655     // private
29656     hideEl : function(callback){
29657         this.proxy.hide();
29658         if(this.modal){
29659             this.mask.hide();
29660             Roo.get(document.body).removeClass("x-body-masked");
29661         }
29662         this.fireEvent("hide", this);
29663         if(typeof callback == "function"){
29664             callback();
29665         }
29666     },
29667
29668     // private
29669     hideAction : function(){
29670         this.setLeft("-10000px");
29671         this.setTop("-10000px");
29672         this.setStyle("visibility", "hidden");
29673     },
29674
29675     // private
29676     refreshSize : function(){
29677         this.size = this.el.getSize();
29678         this.xy = this.el.getXY();
29679         Roo.state.Manager.set(this.stateId || this.el.id + "-state", this.el.getBox());
29680     },
29681
29682     // private
29683     // z-index is managed by the DialogManager and may be overwritten at any time
29684     setZIndex : function(index){
29685         if(this.modal){
29686             this.mask.setStyle("z-index", index);
29687         }
29688         if(this.shim){
29689             this.shim.setStyle("z-index", ++index);
29690         }
29691         if(this.shadow){
29692             this.shadow.setZIndex(++index);
29693         }
29694         this.el.setStyle("z-index", ++index);
29695         if(this.proxy){
29696             this.proxy.setStyle("z-index", ++index);
29697         }
29698         if(this.resizer){
29699             this.resizer.proxy.setStyle("z-index", ++index);
29700         }
29701
29702         this.lastZIndex = index;
29703     },
29704
29705     /**
29706      * Returns the element for this dialog
29707      * @return {Roo.Element} The underlying dialog Element
29708      */
29709     getEl : function(){
29710         return this.el;
29711     }
29712 });
29713
29714 /**
29715  * @class Roo.DialogManager
29716  * Provides global access to BasicDialogs that have been created and
29717  * support for z-indexing (layering) multiple open dialogs.
29718  */
29719 Roo.DialogManager = function(){
29720     var list = {};
29721     var accessList = [];
29722     var front = null;
29723
29724     // private
29725     var sortDialogs = function(d1, d2){
29726         return (!d1._lastAccess || d1._lastAccess < d2._lastAccess) ? -1 : 1;
29727     };
29728
29729     // private
29730     var orderDialogs = function(){
29731         accessList.sort(sortDialogs);
29732         var seed = Roo.DialogManager.zseed;
29733         for(var i = 0, len = accessList.length; i < len; i++){
29734             var dlg = accessList[i];
29735             if(dlg){
29736                 dlg.setZIndex(seed + (i*10));
29737             }
29738         }
29739     };
29740
29741     return {
29742         /**
29743          * The starting z-index for BasicDialogs (defaults to 9000)
29744          * @type Number The z-index value
29745          */
29746         zseed : 9000,
29747
29748         // private
29749         register : function(dlg){
29750             list[dlg.id] = dlg;
29751             accessList.push(dlg);
29752         },
29753
29754         // private
29755         unregister : function(dlg){
29756             delete list[dlg.id];
29757             var i=0;
29758             var len=0;
29759             if(!accessList.indexOf){
29760                 for(  i = 0, len = accessList.length; i < len; i++){
29761                     if(accessList[i] == dlg){
29762                         accessList.splice(i, 1);
29763                         return;
29764                     }
29765                 }
29766             }else{
29767                  i = accessList.indexOf(dlg);
29768                 if(i != -1){
29769                     accessList.splice(i, 1);
29770                 }
29771             }
29772         },
29773
29774         /**
29775          * Gets a registered dialog by id
29776          * @param {String/Object} id The id of the dialog or a dialog
29777          * @return {Roo.BasicDialog} this
29778          */
29779         get : function(id){
29780             return typeof id == "object" ? id : list[id];
29781         },
29782
29783         /**
29784          * Brings the specified dialog to the front
29785          * @param {String/Object} dlg The id of the dialog or a dialog
29786          * @return {Roo.BasicDialog} this
29787          */
29788         bringToFront : function(dlg){
29789             dlg = this.get(dlg);
29790             if(dlg != front){
29791                 front = dlg;
29792                 dlg._lastAccess = new Date().getTime();
29793                 orderDialogs();
29794             }
29795             return dlg;
29796         },
29797
29798         /**
29799          * Sends the specified dialog to the back
29800          * @param {String/Object} dlg The id of the dialog or a dialog
29801          * @return {Roo.BasicDialog} this
29802          */
29803         sendToBack : function(dlg){
29804             dlg = this.get(dlg);
29805             dlg._lastAccess = -(new Date().getTime());
29806             orderDialogs();
29807             return dlg;
29808         },
29809
29810         /**
29811          * Hides all dialogs
29812          */
29813         hideAll : function(){
29814             for(var id in list){
29815                 if(list[id] && typeof list[id] != "function" && list[id].isVisible()){
29816                     list[id].hide();
29817                 }
29818             }
29819         }
29820     };
29821 }();
29822
29823 /**
29824  * @class Roo.LayoutDialog
29825  * @extends Roo.BasicDialog
29826  * Dialog which provides adjustments for working with a layout in a Dialog.
29827  * Add your necessary layout config options to the dialog's config.<br>
29828  * Example usage (including a nested layout):
29829  * <pre><code>
29830 if(!dialog){
29831     dialog = new Roo.LayoutDialog("download-dlg", {
29832         modal: true,
29833         width:600,
29834         height:450,
29835         shadow:true,
29836         minWidth:500,
29837         minHeight:350,
29838         autoTabs:true,
29839         proxyDrag:true,
29840         // layout config merges with the dialog config
29841         center:{
29842             tabPosition: "top",
29843             alwaysShowTabs: true
29844         }
29845     });
29846     dialog.addKeyListener(27, dialog.hide, dialog);
29847     dialog.setDefaultButton(dialog.addButton("Close", dialog.hide, dialog));
29848     dialog.addButton("Build It!", this.getDownload, this);
29849
29850     // we can even add nested layouts
29851     var innerLayout = new Roo.BorderLayout("dl-inner", {
29852         east: {
29853             initialSize: 200,
29854             autoScroll:true,
29855             split:true
29856         },
29857         center: {
29858             autoScroll:true
29859         }
29860     });
29861     innerLayout.beginUpdate();
29862     innerLayout.add("east", new Roo.ContentPanel("dl-details"));
29863     innerLayout.add("center", new Roo.ContentPanel("selection-panel"));
29864     innerLayout.endUpdate(true);
29865
29866     var layout = dialog.getLayout();
29867     layout.beginUpdate();
29868     layout.add("center", new Roo.ContentPanel("standard-panel",
29869                         {title: "Download the Source", fitToFrame:true}));
29870     layout.add("center", new Roo.NestedLayoutPanel(innerLayout,
29871                {title: "Build your own roo.js"}));
29872     layout.getRegion("center").showPanel(sp);
29873     layout.endUpdate();
29874 }
29875 </code></pre>
29876     * @constructor
29877     * @param {String/HTMLElement/Roo.Element} el The id of or container element, or config
29878     * @param {Object} config configuration options
29879   */
29880 Roo.LayoutDialog = function(el, cfg){
29881     
29882     var config=  cfg;
29883     if (typeof(cfg) == 'undefined') {
29884         config = Roo.apply({}, el);
29885         // not sure why we use documentElement here.. - it should always be body.
29886         // IE7 borks horribly if we use documentElement.
29887         // webkit also does not like documentElement - it creates a body element...
29888         el = Roo.get( document.body || document.documentElement ).createChild();
29889         //config.autoCreate = true;
29890     }
29891     
29892     
29893     config.autoTabs = false;
29894     Roo.LayoutDialog.superclass.constructor.call(this, el, config);
29895     this.body.setStyle({overflow:"hidden", position:"relative"});
29896     this.layout = new Roo.BorderLayout(this.body.dom, config);
29897     this.layout.monitorWindowResize = false;
29898     this.el.addClass("x-dlg-auto-layout");
29899     // fix case when center region overwrites center function
29900     this.center = Roo.BasicDialog.prototype.center;
29901     this.on("show", this.layout.layout, this.layout, true);
29902     if (config.items) {
29903         var xitems = config.items;
29904         delete config.items;
29905         Roo.each(xitems, this.addxtype, this);
29906     }
29907     
29908     
29909 };
29910 Roo.extend(Roo.LayoutDialog, Roo.BasicDialog, {
29911     /**
29912      * Ends update of the layout <strike>and resets display to none</strike>. Use standard beginUpdate/endUpdate on the layout.
29913      * @deprecated
29914      */
29915     endUpdate : function(){
29916         this.layout.endUpdate();
29917     },
29918
29919     /**
29920      * Begins an update of the layout <strike>and sets display to block and visibility to hidden</strike>. Use standard beginUpdate/endUpdate on the layout.
29921      *  @deprecated
29922      */
29923     beginUpdate : function(){
29924         this.layout.beginUpdate();
29925     },
29926
29927     /**
29928      * Get the BorderLayout for this dialog
29929      * @return {Roo.BorderLayout}
29930      */
29931     getLayout : function(){
29932         return this.layout;
29933     },
29934
29935     showEl : function(){
29936         Roo.LayoutDialog.superclass.showEl.apply(this, arguments);
29937         if(Roo.isIE7){
29938             this.layout.layout();
29939         }
29940     },
29941
29942     // private
29943     // Use the syncHeightBeforeShow config option to control this automatically
29944     syncBodyHeight : function(){
29945         Roo.LayoutDialog.superclass.syncBodyHeight.call(this);
29946         if(this.layout){this.layout.layout();}
29947     },
29948     
29949       /**
29950      * Add an xtype element (actually adds to the layout.)
29951      * @return {Object} xdata xtype object data.
29952      */
29953     
29954     addxtype : function(c) {
29955         return this.layout.addxtype(c);
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 /**
29969  * @class Roo.MessageBox
29970  * Utility class for generating different styles of message boxes.  The alias Roo.Msg can also be used.
29971  * Example usage:
29972  *<pre><code>
29973 // Basic alert:
29974 Roo.Msg.alert('Status', 'Changes saved successfully.');
29975
29976 // Prompt for user data:
29977 Roo.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
29978     if (btn == 'ok'){
29979         // process text value...
29980     }
29981 });
29982
29983 // Show a dialog using config options:
29984 Roo.Msg.show({
29985    title:'Save Changes?',
29986    msg: 'Your are closing a tab that has unsaved changes. Would you like to save your changes?',
29987    buttons: Roo.Msg.YESNOCANCEL,
29988    fn: processResult,
29989    animEl: 'elId'
29990 });
29991 </code></pre>
29992  * @singleton
29993  */
29994 Roo.MessageBox = function(){
29995     var dlg, opt, mask, waitTimer;
29996     var bodyEl, msgEl, textboxEl, textareaEl, progressEl, pp;
29997     var buttons, activeTextEl, bwidth;
29998
29999     // private
30000     var handleButton = function(button){
30001         dlg.hide();
30002         Roo.callback(opt.fn, opt.scope||window, [button, activeTextEl.dom.value], 1);
30003     };
30004
30005     // private
30006     var handleHide = function(){
30007         if(opt && opt.cls){
30008             dlg.el.removeClass(opt.cls);
30009         }
30010         if(waitTimer){
30011             Roo.TaskMgr.stop(waitTimer);
30012             waitTimer = null;
30013         }
30014     };
30015
30016     // private
30017     var updateButtons = function(b){
30018         var width = 0;
30019         if(!b){
30020             buttons["ok"].hide();
30021             buttons["cancel"].hide();
30022             buttons["yes"].hide();
30023             buttons["no"].hide();
30024             dlg.footer.dom.style.display = 'none';
30025             return width;
30026         }
30027         dlg.footer.dom.style.display = '';
30028         for(var k in buttons){
30029             if(typeof buttons[k] != "function"){
30030                 if(b[k]){
30031                     buttons[k].show();
30032                     buttons[k].setText(typeof b[k] == "string" ? b[k] : Roo.MessageBox.buttonText[k]);
30033                     width += buttons[k].el.getWidth()+15;
30034                 }else{
30035                     buttons[k].hide();
30036                 }
30037             }
30038         }
30039         return width;
30040     };
30041
30042     // private
30043     var handleEsc = function(d, k, e){
30044         if(opt && opt.closable !== false){
30045             dlg.hide();
30046         }
30047         if(e){
30048             e.stopEvent();
30049         }
30050     };
30051
30052     return {
30053         /**
30054          * Returns a reference to the underlying {@link Roo.BasicDialog} element
30055          * @return {Roo.BasicDialog} The BasicDialog element
30056          */
30057         getDialog : function(){
30058            if(!dlg){
30059                 dlg = new Roo.BasicDialog("x-msg-box", {
30060                     autoCreate : true,
30061                     shadow: true,
30062                     draggable: true,
30063                     resizable:false,
30064                     constraintoviewport:false,
30065                     fixedcenter:true,
30066                     collapsible : false,
30067                     shim:true,
30068                     modal: true,
30069                     width:400, height:100,
30070                     buttonAlign:"center",
30071                     closeClick : function(){
30072                         if(opt && opt.buttons && opt.buttons.no && !opt.buttons.cancel){
30073                             handleButton("no");
30074                         }else{
30075                             handleButton("cancel");
30076                         }
30077                     }
30078                 });
30079                 dlg.on("hide", handleHide);
30080                 mask = dlg.mask;
30081                 dlg.addKeyListener(27, handleEsc);
30082                 buttons = {};
30083                 var bt = this.buttonText;
30084                 buttons["ok"] = dlg.addButton(bt["ok"], handleButton.createCallback("ok"));
30085                 buttons["yes"] = dlg.addButton(bt["yes"], handleButton.createCallback("yes"));
30086                 buttons["no"] = dlg.addButton(bt["no"], handleButton.createCallback("no"));
30087                 buttons["cancel"] = dlg.addButton(bt["cancel"], handleButton.createCallback("cancel"));
30088                 bodyEl = dlg.body.createChild({
30089
30090                     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>'
30091                 });
30092                 msgEl = bodyEl.dom.firstChild;
30093                 textboxEl = Roo.get(bodyEl.dom.childNodes[2]);
30094                 textboxEl.enableDisplayMode();
30095                 textboxEl.addKeyListener([10,13], function(){
30096                     if(dlg.isVisible() && opt && opt.buttons){
30097                         if(opt.buttons.ok){
30098                             handleButton("ok");
30099                         }else if(opt.buttons.yes){
30100                             handleButton("yes");
30101                         }
30102                     }
30103                 });
30104                 textareaEl = Roo.get(bodyEl.dom.childNodes[3]);
30105                 textareaEl.enableDisplayMode();
30106                 progressEl = Roo.get(bodyEl.dom.childNodes[4]);
30107                 progressEl.enableDisplayMode();
30108                 var pf = progressEl.dom.firstChild;
30109                 if (pf) {
30110                     pp = Roo.get(pf.firstChild);
30111                     pp.setHeight(pf.offsetHeight);
30112                 }
30113                 
30114             }
30115             return dlg;
30116         },
30117
30118         /**
30119          * Updates the message box body text
30120          * @param {String} text (optional) Replaces the message box element's innerHTML with the specified string (defaults to
30121          * the XHTML-compliant non-breaking space character '&amp;#160;')
30122          * @return {Roo.MessageBox} This message box
30123          */
30124         updateText : function(text){
30125             if(!dlg.isVisible() && !opt.width){
30126                 dlg.resizeTo(this.maxWidth, 100); // resize first so content is never clipped from previous shows
30127             }
30128             msgEl.innerHTML = text || '&#160;';
30129             var w = Math.max(Math.min(opt.width || msgEl.offsetWidth, this.maxWidth), 
30130                         Math.max(opt.minWidth || this.minWidth, bwidth));
30131             if(opt.prompt){
30132                 activeTextEl.setWidth(w);
30133             }
30134             if(dlg.isVisible()){
30135                 dlg.fixedcenter = false;
30136             }
30137             dlg.setContentSize(w, bodyEl.getHeight());
30138             if(dlg.isVisible()){
30139                 dlg.fixedcenter = true;
30140             }
30141             return this;
30142         },
30143
30144         /**
30145          * Updates a progress-style message box's text and progress bar.  Only relevant on message boxes
30146          * initiated via {@link Roo.MessageBox#progress} or by calling {@link Roo.MessageBox#show} with progress: true.
30147          * @param {Number} value Any number between 0 and 1 (e.g., .5)
30148          * @param {String} text (optional) If defined, the message box's body text is replaced with the specified string (defaults to undefined)
30149          * @return {Roo.MessageBox} This message box
30150          */
30151         updateProgress : function(value, text){
30152             if(text){
30153                 this.updateText(text);
30154             }
30155             if (pp) { // weird bug on my firefox - for some reason this is not defined
30156                 pp.setWidth(Math.floor(value*progressEl.dom.firstChild.offsetWidth));
30157             }
30158             return this;
30159         },        
30160
30161         /**
30162          * Returns true if the message box is currently displayed
30163          * @return {Boolean} True if the message box is visible, else false
30164          */
30165         isVisible : function(){
30166             return dlg && dlg.isVisible();  
30167         },
30168
30169         /**
30170          * Hides the message box if it is displayed
30171          */
30172         hide : function(){
30173             if(this.isVisible()){
30174                 dlg.hide();
30175             }  
30176         },
30177
30178         /**
30179          * Displays a new message box, or reinitializes an existing message box, based on the config options
30180          * passed in. All functions (e.g. prompt, alert, etc) on MessageBox call this function internally.
30181          * The following config object properties are supported:
30182          * <pre>
30183 Property    Type             Description
30184 ----------  ---------------  ------------------------------------------------------------------------------------
30185 animEl            String/Element   An id or Element from which the message box should animate as it opens and
30186                                    closes (defaults to undefined)
30187 buttons           Object/Boolean   A button config object (e.g., Roo.MessageBox.OKCANCEL or {ok:'Foo',
30188                                    cancel:'Bar'}), or false to not show any buttons (defaults to false)
30189 closable          Boolean          False to hide the top-right close button (defaults to true).  Note that
30190                                    progress and wait dialogs will ignore this property and always hide the
30191                                    close button as they can only be closed programmatically.
30192 cls               String           A custom CSS class to apply to the message box element
30193 defaultTextHeight Number           The default height in pixels of the message box's multiline textarea if
30194                                    displayed (defaults to 75)
30195 fn                Function         A callback function to execute after closing the dialog.  The arguments to the
30196                                    function will be btn (the name of the button that was clicked, if applicable,
30197                                    e.g. "ok"), and text (the value of the active text field, if applicable).
30198                                    Progress and wait dialogs will ignore this option since they do not respond to
30199                                    user actions and can only be closed programmatically, so any required function
30200                                    should be called by the same code after it closes the dialog.
30201 icon              String           A CSS class that provides a background image to be used as an icon for
30202                                    the dialog (e.g., Roo.MessageBox.WARNING or 'custom-class', defaults to '')
30203 maxWidth          Number           The maximum width in pixels of the message box (defaults to 600)
30204 minWidth          Number           The minimum width in pixels of the message box (defaults to 100)
30205 modal             Boolean          False to allow user interaction with the page while the message box is
30206                                    displayed (defaults to true)
30207 msg               String           A string that will replace the existing message box body text (defaults
30208                                    to the XHTML-compliant non-breaking space character '&#160;')
30209 multiline         Boolean          True to prompt the user to enter multi-line text (defaults to false)
30210 progress          Boolean          True to display a progress bar (defaults to false)
30211 progressText      String           The text to display inside the progress bar if progress = true (defaults to '')
30212 prompt            Boolean          True to prompt the user to enter single-line text (defaults to false)
30213 proxyDrag         Boolean          True to display a lightweight proxy while dragging (defaults to false)
30214 title             String           The title text
30215 value             String           The string value to set into the active textbox element if displayed
30216 wait              Boolean          True to display a progress bar (defaults to false)
30217 width             Number           The width of the dialog in pixels
30218 </pre>
30219          *
30220          * Example usage:
30221          * <pre><code>
30222 Roo.Msg.show({
30223    title: 'Address',
30224    msg: 'Please enter your address:',
30225    width: 300,
30226    buttons: Roo.MessageBox.OKCANCEL,
30227    multiline: true,
30228    fn: saveAddress,
30229    animEl: 'addAddressBtn'
30230 });
30231 </code></pre>
30232          * @param {Object} config Configuration options
30233          * @return {Roo.MessageBox} This message box
30234          */
30235         show : function(options)
30236         {
30237             
30238             // this causes nightmares if you show one dialog after another
30239             // especially on callbacks..
30240              
30241             if(this.isVisible()){
30242                 
30243                 this.hide();
30244                 Roo.log("Old Dialog Message:" +  msgEl.innerHTML )
30245                 //this.alert("ERROR", "Multiple dialogs where displayed at the same time");
30246                 //throw "Roo.MessageBox ERROR : Multiple dialogs where displayed at the same time";
30247                 
30248             }
30249             var d = this.getDialog();
30250             opt = options;
30251             d.setTitle(opt.title || "&#160;");
30252             d.close.setDisplayed(opt.closable !== false);
30253             activeTextEl = textboxEl;
30254             opt.prompt = opt.prompt || (opt.multiline ? true : false);
30255             if(opt.prompt){
30256                 if(opt.multiline){
30257                     textboxEl.hide();
30258                     textareaEl.show();
30259                     textareaEl.setHeight(typeof opt.multiline == "number" ?
30260                         opt.multiline : this.defaultTextHeight);
30261                     activeTextEl = textareaEl;
30262                 }else{
30263                     textboxEl.show();
30264                     textareaEl.hide();
30265                 }
30266             }else{
30267                 textboxEl.hide();
30268                 textareaEl.hide();
30269             }
30270             progressEl.setDisplayed(opt.progress === true);
30271             this.updateProgress(0);
30272             activeTextEl.dom.value = opt.value || "";
30273             if(opt.prompt){
30274                 dlg.setDefaultButton(activeTextEl);
30275             }else{
30276                 var bs = opt.buttons;
30277                 var db = null;
30278                 if(bs && bs.ok){
30279                     db = buttons["ok"];
30280                 }else if(bs && bs.yes){
30281                     db = buttons["yes"];
30282                 }
30283                 dlg.setDefaultButton(db);
30284             }
30285             bwidth = updateButtons(opt.buttons);
30286             this.updateText(opt.msg);
30287             if(opt.cls){
30288                 d.el.addClass(opt.cls);
30289             }
30290             d.proxyDrag = opt.proxyDrag === true;
30291             d.modal = opt.modal !== false;
30292             d.mask = opt.modal !== false ? mask : false;
30293             if(!d.isVisible()){
30294                 // force it to the end of the z-index stack so it gets a cursor in FF
30295                 document.body.appendChild(dlg.el.dom);
30296                 d.animateTarget = null;
30297                 d.show(options.animEl);
30298             }
30299             return this;
30300         },
30301
30302         /**
30303          * Displays a message box with a progress bar.  This message box has no buttons and is not closeable by
30304          * the user.  You are responsible for updating the progress bar as needed via {@link Roo.MessageBox#updateProgress}
30305          * and closing the message box when the process is complete.
30306          * @param {String} title The title bar text
30307          * @param {String} msg The message box body text
30308          * @return {Roo.MessageBox} This message box
30309          */
30310         progress : function(title, msg){
30311             this.show({
30312                 title : title,
30313                 msg : msg,
30314                 buttons: false,
30315                 progress:true,
30316                 closable:false,
30317                 minWidth: this.minProgressWidth,
30318                 modal : true
30319             });
30320             return this;
30321         },
30322
30323         /**
30324          * Displays a standard read-only message box with an OK button (comparable to the basic JavaScript Window.alert).
30325          * If a callback function is passed it will be called after the user clicks the button, and the
30326          * id of the button that was clicked will be passed as the only parameter to the callback
30327          * (could also be the top-right close button).
30328          * @param {String} title The title bar text
30329          * @param {String} msg The message box body text
30330          * @param {Function} fn (optional) The callback function invoked after the message box is closed
30331          * @param {Object} scope (optional) The scope of the callback function
30332          * @return {Roo.MessageBox} This message box
30333          */
30334         alert : function(title, msg, fn, scope){
30335             this.show({
30336                 title : title,
30337                 msg : msg,
30338                 buttons: this.OK,
30339                 fn: fn,
30340                 scope : scope,
30341                 modal : true
30342             });
30343             return this;
30344         },
30345
30346         /**
30347          * Displays a message box with an infinitely auto-updating progress bar.  This can be used to block user
30348          * interaction while waiting for a long-running process to complete that does not have defined intervals.
30349          * You are responsible for closing the message box when the process is complete.
30350          * @param {String} msg The message box body text
30351          * @param {String} title (optional) The title bar text
30352          * @return {Roo.MessageBox} This message box
30353          */
30354         wait : function(msg, title){
30355             this.show({
30356                 title : title,
30357                 msg : msg,
30358                 buttons: false,
30359                 closable:false,
30360                 progress:true,
30361                 modal:true,
30362                 width:300,
30363                 wait:true
30364             });
30365             waitTimer = Roo.TaskMgr.start({
30366                 run: function(i){
30367                     Roo.MessageBox.updateProgress(((((i+20)%20)+1)*5)*.01);
30368                 },
30369                 interval: 1000
30370             });
30371             return this;
30372         },
30373
30374         /**
30375          * Displays a confirmation message box with Yes and No buttons (comparable to JavaScript's Window.confirm).
30376          * If a callback function is passed it will be called after the user clicks either button, and the id of the
30377          * button that was clicked will be passed as the only parameter to the callback (could also be the top-right close button).
30378          * @param {String} title The title bar text
30379          * @param {String} msg The message box body text
30380          * @param {Function} fn (optional) The callback function invoked after the message box is closed
30381          * @param {Object} scope (optional) The scope of the callback function
30382          * @return {Roo.MessageBox} This message box
30383          */
30384         confirm : function(title, msg, fn, scope){
30385             this.show({
30386                 title : title,
30387                 msg : msg,
30388                 buttons: this.YESNO,
30389                 fn: fn,
30390                 scope : scope,
30391                 modal : true
30392             });
30393             return this;
30394         },
30395
30396         /**
30397          * Displays a message box with OK and Cancel buttons prompting the user to enter some text (comparable to
30398          * JavaScript's Window.prompt).  The prompt can be a single-line or multi-line textbox.  If a callback function
30399          * is passed it will be called after the user clicks either button, and the id of the button that was clicked
30400          * (could also be the top-right close button) and the text that was entered will be passed as the two
30401          * parameters to the callback.
30402          * @param {String} title The title bar text
30403          * @param {String} msg The message box body text
30404          * @param {Function} fn (optional) The callback function invoked after the message box is closed
30405          * @param {Object} scope (optional) The scope of the callback function
30406          * @param {Boolean/Number} multiline (optional) True to create a multiline textbox using the defaultTextHeight
30407          * property, or the height in pixels to create the textbox (defaults to false / single-line)
30408          * @return {Roo.MessageBox} This message box
30409          */
30410         prompt : function(title, msg, fn, scope, multiline){
30411             this.show({
30412                 title : title,
30413                 msg : msg,
30414                 buttons: this.OKCANCEL,
30415                 fn: fn,
30416                 minWidth:250,
30417                 scope : scope,
30418                 prompt:true,
30419                 multiline: multiline,
30420                 modal : true
30421             });
30422             return this;
30423         },
30424
30425         /**
30426          * Button config that displays a single OK button
30427          * @type Object
30428          */
30429         OK : {ok:true},
30430         /**
30431          * Button config that displays Yes and No buttons
30432          * @type Object
30433          */
30434         YESNO : {yes:true, no:true},
30435         /**
30436          * Button config that displays OK and Cancel buttons
30437          * @type Object
30438          */
30439         OKCANCEL : {ok:true, cancel:true},
30440         /**
30441          * Button config that displays Yes, No and Cancel buttons
30442          * @type Object
30443          */
30444         YESNOCANCEL : {yes:true, no:true, cancel:true},
30445
30446         /**
30447          * The default height in pixels of the message box's multiline textarea if displayed (defaults to 75)
30448          * @type Number
30449          */
30450         defaultTextHeight : 75,
30451         /**
30452          * The maximum width in pixels of the message box (defaults to 600)
30453          * @type Number
30454          */
30455         maxWidth : 600,
30456         /**
30457          * The minimum width in pixels of the message box (defaults to 100)
30458          * @type Number
30459          */
30460         minWidth : 100,
30461         /**
30462          * The minimum width in pixels of the message box if it is a progress-style dialog.  This is useful
30463          * for setting a different minimum width than text-only dialogs may need (defaults to 250)
30464          * @type Number
30465          */
30466         minProgressWidth : 250,
30467         /**
30468          * An object containing the default button text strings that can be overriden for localized language support.
30469          * Supported properties are: ok, cancel, yes and no.
30470          * Customize the default text like so: Roo.MessageBox.buttonText.yes = "S?";
30471          * @type Object
30472          */
30473         buttonText : {
30474             ok : "OK",
30475             cancel : "Cancel",
30476             yes : "Yes",
30477             no : "No"
30478         }
30479     };
30480 }();
30481
30482 /**
30483  * Shorthand for {@link Roo.MessageBox}
30484  */
30485 Roo.Msg = Roo.MessageBox;/*
30486  * Based on:
30487  * Ext JS Library 1.1.1
30488  * Copyright(c) 2006-2007, Ext JS, LLC.
30489  *
30490  * Originally Released Under LGPL - original licence link has changed is not relivant.
30491  *
30492  * Fork - LGPL
30493  * <script type="text/javascript">
30494  */
30495 /**
30496  * @class Roo.QuickTips
30497  * Provides attractive and customizable tooltips for any element.
30498  * @singleton
30499  */
30500 Roo.QuickTips = function(){
30501     var el, tipBody, tipBodyText, tipTitle, tm, cfg, close, tagEls = {}, esc, removeCls = null, bdLeft, bdRight;
30502     var ce, bd, xy, dd;
30503     var visible = false, disabled = true, inited = false;
30504     var showProc = 1, hideProc = 1, dismissProc = 1, locks = [];
30505     
30506     var onOver = function(e){
30507         if(disabled){
30508             return;
30509         }
30510         var t = e.getTarget();
30511         if(!t || t.nodeType !== 1 || t == document || t == document.body){
30512             return;
30513         }
30514         if(ce && t == ce.el){
30515             clearTimeout(hideProc);
30516             return;
30517         }
30518         if(t && tagEls[t.id]){
30519             tagEls[t.id].el = t;
30520             showProc = show.defer(tm.showDelay, tm, [tagEls[t.id]]);
30521             return;
30522         }
30523         var ttp, et = Roo.fly(t);
30524         var ns = cfg.namespace;
30525         if(tm.interceptTitles && t.title){
30526             ttp = t.title;
30527             t.qtip = ttp;
30528             t.removeAttribute("title");
30529             e.preventDefault();
30530         }else{
30531             ttp = t.qtip || et.getAttributeNS(ns, cfg.attribute);
30532         }
30533         if(ttp){
30534             showProc = show.defer(tm.showDelay, tm, [{
30535                 el: t, 
30536                 text: ttp, 
30537                 width: et.getAttributeNS(ns, cfg.width),
30538                 autoHide: et.getAttributeNS(ns, cfg.hide) != "user",
30539                 title: et.getAttributeNS(ns, cfg.title),
30540                     cls: et.getAttributeNS(ns, cfg.cls)
30541             }]);
30542         }
30543     };
30544     
30545     var onOut = function(e){
30546         clearTimeout(showProc);
30547         var t = e.getTarget();
30548         if(t && ce && ce.el == t && (tm.autoHide && ce.autoHide !== false)){
30549             hideProc = setTimeout(hide, tm.hideDelay);
30550         }
30551     };
30552     
30553     var onMove = function(e){
30554         if(disabled){
30555             return;
30556         }
30557         xy = e.getXY();
30558         xy[1] += 18;
30559         if(tm.trackMouse && ce){
30560             el.setXY(xy);
30561         }
30562     };
30563     
30564     var onDown = function(e){
30565         clearTimeout(showProc);
30566         clearTimeout(hideProc);
30567         if(!e.within(el)){
30568             if(tm.hideOnClick){
30569                 hide();
30570                 tm.disable();
30571                 tm.enable.defer(100, tm);
30572             }
30573         }
30574     };
30575     
30576     var getPad = function(){
30577         return 2;//bdLeft.getPadding('l')+bdRight.getPadding('r');
30578     };
30579
30580     var show = function(o){
30581         if(disabled){
30582             return;
30583         }
30584         clearTimeout(dismissProc);
30585         ce = o;
30586         if(removeCls){ // in case manually hidden
30587             el.removeClass(removeCls);
30588             removeCls = null;
30589         }
30590         if(ce.cls){
30591             el.addClass(ce.cls);
30592             removeCls = ce.cls;
30593         }
30594         if(ce.title){
30595             tipTitle.update(ce.title);
30596             tipTitle.show();
30597         }else{
30598             tipTitle.update('');
30599             tipTitle.hide();
30600         }
30601         el.dom.style.width  = tm.maxWidth+'px';
30602         //tipBody.dom.style.width = '';
30603         tipBodyText.update(o.text);
30604         var p = getPad(), w = ce.width;
30605         if(!w){
30606             var td = tipBodyText.dom;
30607             var aw = Math.max(td.offsetWidth, td.clientWidth, td.scrollWidth);
30608             if(aw > tm.maxWidth){
30609                 w = tm.maxWidth;
30610             }else if(aw < tm.minWidth){
30611                 w = tm.minWidth;
30612             }else{
30613                 w = aw;
30614             }
30615         }
30616         //tipBody.setWidth(w);
30617         el.setWidth(parseInt(w, 10) + p);
30618         if(ce.autoHide === false){
30619             close.setDisplayed(true);
30620             if(dd){
30621                 dd.unlock();
30622             }
30623         }else{
30624             close.setDisplayed(false);
30625             if(dd){
30626                 dd.lock();
30627             }
30628         }
30629         if(xy){
30630             el.avoidY = xy[1]-18;
30631             el.setXY(xy);
30632         }
30633         if(tm.animate){
30634             el.setOpacity(.1);
30635             el.setStyle("visibility", "visible");
30636             el.fadeIn({callback: afterShow});
30637         }else{
30638             afterShow();
30639         }
30640     };
30641     
30642     var afterShow = function(){
30643         if(ce){
30644             el.show();
30645             esc.enable();
30646             if(tm.autoDismiss && ce.autoHide !== false){
30647                 dismissProc = setTimeout(hide, tm.autoDismissDelay);
30648             }
30649         }
30650     };
30651     
30652     var hide = function(noanim){
30653         clearTimeout(dismissProc);
30654         clearTimeout(hideProc);
30655         ce = null;
30656         if(el.isVisible()){
30657             esc.disable();
30658             if(noanim !== true && tm.animate){
30659                 el.fadeOut({callback: afterHide});
30660             }else{
30661                 afterHide();
30662             } 
30663         }
30664     };
30665     
30666     var afterHide = function(){
30667         el.hide();
30668         if(removeCls){
30669             el.removeClass(removeCls);
30670             removeCls = null;
30671         }
30672     };
30673     
30674     return {
30675         /**
30676         * @cfg {Number} minWidth
30677         * The minimum width of the quick tip (defaults to 40)
30678         */
30679        minWidth : 40,
30680         /**
30681         * @cfg {Number} maxWidth
30682         * The maximum width of the quick tip (defaults to 300)
30683         */
30684        maxWidth : 300,
30685         /**
30686         * @cfg {Boolean} interceptTitles
30687         * True to automatically use the element's DOM title value if available (defaults to false)
30688         */
30689        interceptTitles : false,
30690         /**
30691         * @cfg {Boolean} trackMouse
30692         * True to have the quick tip follow the mouse as it moves over the target element (defaults to false)
30693         */
30694        trackMouse : false,
30695         /**
30696         * @cfg {Boolean} hideOnClick
30697         * True to hide the quick tip if the user clicks anywhere in the document (defaults to true)
30698         */
30699        hideOnClick : true,
30700         /**
30701         * @cfg {Number} showDelay
30702         * Delay in milliseconds before the quick tip displays after the mouse enters the target element (defaults to 500)
30703         */
30704        showDelay : 500,
30705         /**
30706         * @cfg {Number} hideDelay
30707         * Delay in milliseconds before the quick tip hides when autoHide = true (defaults to 200)
30708         */
30709        hideDelay : 200,
30710         /**
30711         * @cfg {Boolean} autoHide
30712         * True to automatically hide the quick tip after the mouse exits the target element (defaults to true).
30713         * Used in conjunction with hideDelay.
30714         */
30715        autoHide : true,
30716         /**
30717         * @cfg {Boolean}
30718         * True to automatically hide the quick tip after a set period of time, regardless of the user's actions
30719         * (defaults to true).  Used in conjunction with autoDismissDelay.
30720         */
30721        autoDismiss : true,
30722         /**
30723         * @cfg {Number}
30724         * Delay in milliseconds before the quick tip hides when autoDismiss = true (defaults to 5000)
30725         */
30726        autoDismissDelay : 5000,
30727        /**
30728         * @cfg {Boolean} animate
30729         * True to turn on fade animation. Defaults to false (ClearType/scrollbar flicker issues in IE7).
30730         */
30731        animate : false,
30732
30733        /**
30734         * @cfg {String} title
30735         * Title text to display (defaults to '').  This can be any valid HTML markup.
30736         */
30737         title: '',
30738        /**
30739         * @cfg {String} text
30740         * Body text to display (defaults to '').  This can be any valid HTML markup.
30741         */
30742         text : '',
30743        /**
30744         * @cfg {String} cls
30745         * A CSS class to apply to the base quick tip element (defaults to '').
30746         */
30747         cls : '',
30748        /**
30749         * @cfg {Number} width
30750         * Width in pixels of the quick tip (defaults to auto).  Width will be ignored if it exceeds the bounds of
30751         * minWidth or maxWidth.
30752         */
30753         width : null,
30754
30755     /**
30756      * Initialize and enable QuickTips for first use.  This should be called once before the first attempt to access
30757      * or display QuickTips in a page.
30758      */
30759        init : function(){
30760           tm = Roo.QuickTips;
30761           cfg = tm.tagConfig;
30762           if(!inited){
30763               if(!Roo.isReady){ // allow calling of init() before onReady
30764                   Roo.onReady(Roo.QuickTips.init, Roo.QuickTips);
30765                   return;
30766               }
30767               el = new Roo.Layer({cls:"x-tip", shadow:"drop", shim: true, constrain:true, shadowOffset:4});
30768               el.fxDefaults = {stopFx: true};
30769               // maximum custom styling
30770               //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>');
30771               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>');              
30772               tipTitle = el.child('h3');
30773               tipTitle.enableDisplayMode("block");
30774               tipBody = el.child('div.x-tip-bd');
30775               tipBodyText = el.child('div.x-tip-bd-inner');
30776               //bdLeft = el.child('div.x-tip-bd-left');
30777               //bdRight = el.child('div.x-tip-bd-right');
30778               close = el.child('div.x-tip-close');
30779               close.enableDisplayMode("block");
30780               close.on("click", hide);
30781               var d = Roo.get(document);
30782               d.on("mousedown", onDown);
30783               d.on("mouseover", onOver);
30784               d.on("mouseout", onOut);
30785               d.on("mousemove", onMove);
30786               esc = d.addKeyListener(27, hide);
30787               esc.disable();
30788               if(Roo.dd.DD){
30789                   dd = el.initDD("default", null, {
30790                       onDrag : function(){
30791                           el.sync();  
30792                       }
30793                   });
30794                   dd.setHandleElId(tipTitle.id);
30795                   dd.lock();
30796               }
30797               inited = true;
30798           }
30799           this.enable(); 
30800        },
30801
30802     /**
30803      * Configures a new quick tip instance and assigns it to a target element.  The following config options
30804      * are supported:
30805      * <pre>
30806 Property    Type                   Description
30807 ----------  ---------------------  ------------------------------------------------------------------------
30808 target      Element/String/Array   An Element, id or array of ids that this quick tip should be tied to
30809      * </ul>
30810      * @param {Object} config The config object
30811      */
30812        register : function(config){
30813            var cs = config instanceof Array ? config : arguments;
30814            for(var i = 0, len = cs.length; i < len; i++) {
30815                var c = cs[i];
30816                var target = c.target;
30817                if(target){
30818                    if(target instanceof Array){
30819                        for(var j = 0, jlen = target.length; j < jlen; j++){
30820                            tagEls[target[j]] = c;
30821                        }
30822                    }else{
30823                        tagEls[typeof target == 'string' ? target : Roo.id(target)] = c;
30824                    }
30825                }
30826            }
30827        },
30828
30829     /**
30830      * Removes this quick tip from its element and destroys it.
30831      * @param {String/HTMLElement/Element} el The element from which the quick tip is to be removed.
30832      */
30833        unregister : function(el){
30834            delete tagEls[Roo.id(el)];
30835        },
30836
30837     /**
30838      * Enable this quick tip.
30839      */
30840        enable : function(){
30841            if(inited && disabled){
30842                locks.pop();
30843                if(locks.length < 1){
30844                    disabled = false;
30845                }
30846            }
30847        },
30848
30849     /**
30850      * Disable this quick tip.
30851      */
30852        disable : function(){
30853           disabled = true;
30854           clearTimeout(showProc);
30855           clearTimeout(hideProc);
30856           clearTimeout(dismissProc);
30857           if(ce){
30858               hide(true);
30859           }
30860           locks.push(1);
30861        },
30862
30863     /**
30864      * Returns true if the quick tip is enabled, else false.
30865      */
30866        isEnabled : function(){
30867             return !disabled;
30868        },
30869
30870         // private
30871        tagConfig : {
30872            namespace : "ext",
30873            attribute : "qtip",
30874            width : "width",
30875            target : "target",
30876            title : "qtitle",
30877            hide : "hide",
30878            cls : "qclass"
30879        }
30880    };
30881 }();
30882
30883 // backwards compat
30884 Roo.QuickTips.tips = Roo.QuickTips.register;/*
30885  * Based on:
30886  * Ext JS Library 1.1.1
30887  * Copyright(c) 2006-2007, Ext JS, LLC.
30888  *
30889  * Originally Released Under LGPL - original licence link has changed is not relivant.
30890  *
30891  * Fork - LGPL
30892  * <script type="text/javascript">
30893  */
30894  
30895
30896 /**
30897  * @class Roo.tree.TreePanel
30898  * @extends Roo.data.Tree
30899
30900  * @cfg {Boolean} rootVisible false to hide the root node (defaults to true)
30901  * @cfg {Boolean} lines false to disable tree lines (defaults to true)
30902  * @cfg {Boolean} enableDD true to enable drag and drop
30903  * @cfg {Boolean} enableDrag true to enable just drag
30904  * @cfg {Boolean} enableDrop true to enable just drop
30905  * @cfg {Object} dragConfig Custom config to pass to the {@link Roo.tree.TreeDragZone} instance
30906  * @cfg {Object} dropConfig Custom config to pass to the {@link Roo.tree.TreeDropZone} instance
30907  * @cfg {String} ddGroup The DD group this TreePanel belongs to
30908  * @cfg {String} ddAppendOnly True if the tree should only allow append drops (use for trees which are sorted)
30909  * @cfg {Boolean} ddScroll true to enable YUI body scrolling
30910  * @cfg {Boolean} containerScroll true to register this container with ScrollManager
30911  * @cfg {Boolean} hlDrop false to disable node highlight on drop (defaults to the value of Roo.enableFx)
30912  * @cfg {String} hlColor The color of the node highlight (defaults to C3DAF9)
30913  * @cfg {Boolean} animate true to enable animated expand/collapse (defaults to the value of Roo.enableFx)
30914  * @cfg {Boolean} singleExpand true if only 1 node per branch may be expanded
30915  * @cfg {Boolean} selModel A tree selection model to use with this TreePanel (defaults to a {@link Roo.tree.DefaultSelectionModel})
30916  * @cfg {Boolean} loader A TreeLoader for use with this TreePanel
30917  * @cfg {Object|Roo.tree.TreeEditor} editor The TreeEditor or xtype data to display when clicked.
30918  * @cfg {String} pathSeparator The token used to separate sub-paths in path strings (defaults to '/')
30919  * @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>
30920  * @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>
30921  * 
30922  * @constructor
30923  * @param {String/HTMLElement/Element} el The container element
30924  * @param {Object} config
30925  */
30926 Roo.tree.TreePanel = function(el, config){
30927     var root = false;
30928     var loader = false;
30929     if (config.root) {
30930         root = config.root;
30931         delete config.root;
30932     }
30933     if (config.loader) {
30934         loader = config.loader;
30935         delete config.loader;
30936     }
30937     
30938     Roo.apply(this, config);
30939     Roo.tree.TreePanel.superclass.constructor.call(this);
30940     this.el = Roo.get(el);
30941     this.el.addClass('x-tree');
30942     //console.log(root);
30943     if (root) {
30944         this.setRootNode( Roo.factory(root, Roo.tree));
30945     }
30946     if (loader) {
30947         this.loader = Roo.factory(loader, Roo.tree);
30948     }
30949    /**
30950     * Read-only. The id of the container element becomes this TreePanel's id.
30951     */
30952     this.id = this.el.id;
30953     this.addEvents({
30954         /**
30955         * @event beforeload
30956         * Fires before a node is loaded, return false to cancel
30957         * @param {Node} node The node being loaded
30958         */
30959         "beforeload" : true,
30960         /**
30961         * @event load
30962         * Fires when a node is loaded
30963         * @param {Node} node The node that was loaded
30964         */
30965         "load" : true,
30966         /**
30967         * @event textchange
30968         * Fires when the text for a node is changed
30969         * @param {Node} node The node
30970         * @param {String} text The new text
30971         * @param {String} oldText The old text
30972         */
30973         "textchange" : true,
30974         /**
30975         * @event beforeexpand
30976         * Fires before a node is expanded, return false to cancel.
30977         * @param {Node} node The node
30978         * @param {Boolean} deep
30979         * @param {Boolean} anim
30980         */
30981         "beforeexpand" : true,
30982         /**
30983         * @event beforecollapse
30984         * Fires before a node is collapsed, return false to cancel.
30985         * @param {Node} node The node
30986         * @param {Boolean} deep
30987         * @param {Boolean} anim
30988         */
30989         "beforecollapse" : true,
30990         /**
30991         * @event expand
30992         * Fires when a node is expanded
30993         * @param {Node} node The node
30994         */
30995         "expand" : true,
30996         /**
30997         * @event disabledchange
30998         * Fires when the disabled status of a node changes
30999         * @param {Node} node The node
31000         * @param {Boolean} disabled
31001         */
31002         "disabledchange" : true,
31003         /**
31004         * @event collapse
31005         * Fires when a node is collapsed
31006         * @param {Node} node The node
31007         */
31008         "collapse" : true,
31009         /**
31010         * @event beforeclick
31011         * Fires before click processing on a node. Return false to cancel the default action.
31012         * @param {Node} node The node
31013         * @param {Roo.EventObject} e The event object
31014         */
31015         "beforeclick":true,
31016         /**
31017         * @event checkchange
31018         * Fires when a node with a checkbox's checked property changes
31019         * @param {Node} this This node
31020         * @param {Boolean} checked
31021         */
31022         "checkchange":true,
31023         /**
31024         * @event click
31025         * Fires when a node is clicked
31026         * @param {Node} node The node
31027         * @param {Roo.EventObject} e The event object
31028         */
31029         "click":true,
31030         /**
31031         * @event dblclick
31032         * Fires when a node is double clicked
31033         * @param {Node} node The node
31034         * @param {Roo.EventObject} e The event object
31035         */
31036         "dblclick":true,
31037         /**
31038         * @event contextmenu
31039         * Fires when a node is right clicked
31040         * @param {Node} node The node
31041         * @param {Roo.EventObject} e The event object
31042         */
31043         "contextmenu":true,
31044         /**
31045         * @event beforechildrenrendered
31046         * Fires right before the child nodes for a node are rendered
31047         * @param {Node} node The node
31048         */
31049         "beforechildrenrendered":true,
31050         /**
31051         * @event startdrag
31052         * Fires when a node starts being dragged
31053         * @param {Roo.tree.TreePanel} this
31054         * @param {Roo.tree.TreeNode} node
31055         * @param {event} e The raw browser event
31056         */ 
31057        "startdrag" : true,
31058        /**
31059         * @event enddrag
31060         * Fires when a drag operation is complete
31061         * @param {Roo.tree.TreePanel} this
31062         * @param {Roo.tree.TreeNode} node
31063         * @param {event} e The raw browser event
31064         */
31065        "enddrag" : true,
31066        /**
31067         * @event dragdrop
31068         * Fires when a dragged node is dropped on a valid DD target
31069         * @param {Roo.tree.TreePanel} this
31070         * @param {Roo.tree.TreeNode} node
31071         * @param {DD} dd The dd it was dropped on
31072         * @param {event} e The raw browser event
31073         */
31074        "dragdrop" : true,
31075        /**
31076         * @event beforenodedrop
31077         * Fires when a DD object is dropped on a node in this tree for preprocessing. Return false to cancel the drop. The dropEvent
31078         * passed to handlers has the following properties:<br />
31079         * <ul style="padding:5px;padding-left:16px;">
31080         * <li>tree - The TreePanel</li>
31081         * <li>target - The node being targeted for the drop</li>
31082         * <li>data - The drag data from the drag source</li>
31083         * <li>point - The point of the drop - append, above or below</li>
31084         * <li>source - The drag source</li>
31085         * <li>rawEvent - Raw mouse event</li>
31086         * <li>dropNode - Drop node(s) provided by the source <b>OR</b> you can supply node(s)
31087         * to be inserted by setting them on this object.</li>
31088         * <li>cancel - Set this to true to cancel the drop.</li>
31089         * </ul>
31090         * @param {Object} dropEvent
31091         */
31092        "beforenodedrop" : true,
31093        /**
31094         * @event nodedrop
31095         * Fires after a DD object is dropped on a node in this tree. The dropEvent
31096         * passed to handlers has the following properties:<br />
31097         * <ul style="padding:5px;padding-left:16px;">
31098         * <li>tree - The TreePanel</li>
31099         * <li>target - The node being targeted for the drop</li>
31100         * <li>data - The drag data from the drag source</li>
31101         * <li>point - The point of the drop - append, above or below</li>
31102         * <li>source - The drag source</li>
31103         * <li>rawEvent - Raw mouse event</li>
31104         * <li>dropNode - Dropped node(s).</li>
31105         * </ul>
31106         * @param {Object} dropEvent
31107         */
31108        "nodedrop" : true,
31109         /**
31110         * @event nodedragover
31111         * Fires when a tree node is being targeted for a drag drop, return false to signal drop not allowed. The dragOverEvent
31112         * passed to handlers has the following properties:<br />
31113         * <ul style="padding:5px;padding-left:16px;">
31114         * <li>tree - The TreePanel</li>
31115         * <li>target - The node being targeted for the drop</li>
31116         * <li>data - The drag data from the drag source</li>
31117         * <li>point - The point of the drop - append, above or below</li>
31118         * <li>source - The drag source</li>
31119         * <li>rawEvent - Raw mouse event</li>
31120         * <li>dropNode - Drop node(s) provided by the source.</li>
31121         * <li>cancel - Set this to true to signal drop not allowed.</li>
31122         * </ul>
31123         * @param {Object} dragOverEvent
31124         */
31125        "nodedragover" : true
31126         
31127     });
31128     if(this.singleExpand){
31129        this.on("beforeexpand", this.restrictExpand, this);
31130     }
31131     if (this.editor) {
31132         this.editor.tree = this;
31133         this.editor = Roo.factory(this.editor, Roo.tree);
31134     }
31135    
31136 };
31137 Roo.extend(Roo.tree.TreePanel, Roo.data.Tree, {
31138     rootVisible : true,
31139     animate: Roo.enableFx,
31140     lines : true,
31141     enableDD : false,
31142     hlDrop : Roo.enableFx,
31143   
31144     renderer: false,
31145     
31146     rendererTip: false,
31147     // private
31148     restrictExpand : function(node){
31149         var p = node.parentNode;
31150         if(p){
31151             if(p.expandedChild && p.expandedChild.parentNode == p){
31152                 p.expandedChild.collapse();
31153             }
31154             p.expandedChild = node;
31155         }
31156     },
31157
31158     // private override
31159     setRootNode : function(node){
31160         Roo.tree.TreePanel.superclass.setRootNode.call(this, node);
31161         if(!this.rootVisible){
31162             node.ui = new Roo.tree.RootTreeNodeUI(node);
31163         }
31164         return node;
31165     },
31166
31167     /**
31168      * Returns the container element for this TreePanel
31169      */
31170     getEl : function(){
31171         return this.el;
31172     },
31173
31174     /**
31175      * Returns the default TreeLoader for this TreePanel
31176      */
31177     getLoader : function(){
31178         return this.loader;
31179     },
31180
31181     /**
31182      * Expand all nodes
31183      */
31184     expandAll : function(){
31185         this.root.expand(true);
31186     },
31187
31188     /**
31189      * Collapse all nodes
31190      */
31191     collapseAll : function(){
31192         this.root.collapse(true);
31193     },
31194
31195     /**
31196      * Returns the selection model used by this TreePanel
31197      */
31198     getSelectionModel : function(){
31199         if(!this.selModel){
31200             this.selModel = new Roo.tree.DefaultSelectionModel();
31201         }
31202         return this.selModel;
31203     },
31204
31205     /**
31206      * Retrieve an array of checked nodes, or an array of a specific attribute of checked nodes (e.g. "id")
31207      * @param {String} attribute (optional) Defaults to null (return the actual nodes)
31208      * @param {TreeNode} startNode (optional) The node to start from, defaults to the root
31209      * @return {Array}
31210      */
31211     getChecked : function(a, startNode){
31212         startNode = startNode || this.root;
31213         var r = [];
31214         var f = function(){
31215             if(this.attributes.checked){
31216                 r.push(!a ? this : (a == 'id' ? this.id : this.attributes[a]));
31217             }
31218         }
31219         startNode.cascade(f);
31220         return r;
31221     },
31222
31223     /**
31224      * Expands a specified path in this TreePanel. A path can be retrieved from a node with {@link Roo.data.Node#getPath}
31225      * @param {String} path
31226      * @param {String} attr (optional) The attribute used in the path (see {@link Roo.data.Node#getPath} for more info)
31227      * @param {Function} callback (optional) The callback to call when the expand is complete. The callback will be called with
31228      * (bSuccess, oLastNode) where bSuccess is if the expand was successful and oLastNode is the last node that was expanded.
31229      */
31230     expandPath : function(path, attr, callback){
31231         attr = attr || "id";
31232         var keys = path.split(this.pathSeparator);
31233         var curNode = this.root;
31234         if(curNode.attributes[attr] != keys[1]){ // invalid root
31235             if(callback){
31236                 callback(false, null);
31237             }
31238             return;
31239         }
31240         var index = 1;
31241         var f = function(){
31242             if(++index == keys.length){
31243                 if(callback){
31244                     callback(true, curNode);
31245                 }
31246                 return;
31247             }
31248             var c = curNode.findChild(attr, keys[index]);
31249             if(!c){
31250                 if(callback){
31251                     callback(false, curNode);
31252                 }
31253                 return;
31254             }
31255             curNode = c;
31256             c.expand(false, false, f);
31257         };
31258         curNode.expand(false, false, f);
31259     },
31260
31261     /**
31262      * Selects the node in this tree at the specified path. A path can be retrieved from a node with {@link Roo.data.Node#getPath}
31263      * @param {String} path
31264      * @param {String} attr (optional) The attribute used in the path (see {@link Roo.data.Node#getPath} for more info)
31265      * @param {Function} callback (optional) The callback to call when the selection is complete. The callback will be called with
31266      * (bSuccess, oSelNode) where bSuccess is if the selection was successful and oSelNode is the selected node.
31267      */
31268     selectPath : function(path, attr, callback){
31269         attr = attr || "id";
31270         var keys = path.split(this.pathSeparator);
31271         var v = keys.pop();
31272         if(keys.length > 0){
31273             var f = function(success, node){
31274                 if(success && node){
31275                     var n = node.findChild(attr, v);
31276                     if(n){
31277                         n.select();
31278                         if(callback){
31279                             callback(true, n);
31280                         }
31281                     }else if(callback){
31282                         callback(false, n);
31283                     }
31284                 }else{
31285                     if(callback){
31286                         callback(false, n);
31287                     }
31288                 }
31289             };
31290             this.expandPath(keys.join(this.pathSeparator), attr, f);
31291         }else{
31292             this.root.select();
31293             if(callback){
31294                 callback(true, this.root);
31295             }
31296         }
31297     },
31298
31299     getTreeEl : function(){
31300         return this.el;
31301     },
31302
31303     /**
31304      * Trigger rendering of this TreePanel
31305      */
31306     render : function(){
31307         if (this.innerCt) {
31308             return this; // stop it rendering more than once!!
31309         }
31310         
31311         this.innerCt = this.el.createChild({tag:"ul",
31312                cls:"x-tree-root-ct " +
31313                (this.lines ? "x-tree-lines" : "x-tree-no-lines")});
31314
31315         if(this.containerScroll){
31316             Roo.dd.ScrollManager.register(this.el);
31317         }
31318         if((this.enableDD || this.enableDrop) && !this.dropZone){
31319            /**
31320             * The dropZone used by this tree if drop is enabled
31321             * @type Roo.tree.TreeDropZone
31322             */
31323              this.dropZone = new Roo.tree.TreeDropZone(this, this.dropConfig || {
31324                ddGroup: this.ddGroup || "TreeDD", appendOnly: this.ddAppendOnly === true
31325            });
31326         }
31327         if((this.enableDD || this.enableDrag) && !this.dragZone){
31328            /**
31329             * The dragZone used by this tree if drag is enabled
31330             * @type Roo.tree.TreeDragZone
31331             */
31332             this.dragZone = new Roo.tree.TreeDragZone(this, this.dragConfig || {
31333                ddGroup: this.ddGroup || "TreeDD",
31334                scroll: this.ddScroll
31335            });
31336         }
31337         this.getSelectionModel().init(this);
31338         if (!this.root) {
31339             console.log("ROOT not set in tree");
31340             return;
31341         }
31342         this.root.render();
31343         if(!this.rootVisible){
31344             this.root.renderChildren();
31345         }
31346         return this;
31347     }
31348 });/*
31349  * Based on:
31350  * Ext JS Library 1.1.1
31351  * Copyright(c) 2006-2007, Ext JS, LLC.
31352  *
31353  * Originally Released Under LGPL - original licence link has changed is not relivant.
31354  *
31355  * Fork - LGPL
31356  * <script type="text/javascript">
31357  */
31358  
31359
31360 /**
31361  * @class Roo.tree.DefaultSelectionModel
31362  * @extends Roo.util.Observable
31363  * The default single selection for a TreePanel.
31364  */
31365 Roo.tree.DefaultSelectionModel = function(){
31366    this.selNode = null;
31367    
31368    this.addEvents({
31369        /**
31370         * @event selectionchange
31371         * Fires when the selected node changes
31372         * @param {DefaultSelectionModel} this
31373         * @param {TreeNode} node the new selection
31374         */
31375        "selectionchange" : true,
31376
31377        /**
31378         * @event beforeselect
31379         * Fires before the selected node changes, return false to cancel the change
31380         * @param {DefaultSelectionModel} this
31381         * @param {TreeNode} node the new selection
31382         * @param {TreeNode} node the old selection
31383         */
31384        "beforeselect" : true
31385    });
31386 };
31387
31388 Roo.extend(Roo.tree.DefaultSelectionModel, Roo.util.Observable, {
31389     init : function(tree){
31390         this.tree = tree;
31391         tree.getTreeEl().on("keydown", this.onKeyDown, this);
31392         tree.on("click", this.onNodeClick, this);
31393     },
31394     
31395     onNodeClick : function(node, e){
31396         if (e.ctrlKey && this.selNode == node)  {
31397             this.unselect(node);
31398             return;
31399         }
31400         this.select(node);
31401     },
31402     
31403     /**
31404      * Select a node.
31405      * @param {TreeNode} node The node to select
31406      * @return {TreeNode} The selected node
31407      */
31408     select : function(node){
31409         var last = this.selNode;
31410         if(last != node && this.fireEvent('beforeselect', this, node, last) !== false){
31411             if(last){
31412                 last.ui.onSelectedChange(false);
31413             }
31414             this.selNode = node;
31415             node.ui.onSelectedChange(true);
31416             this.fireEvent("selectionchange", this, node, last);
31417         }
31418         return node;
31419     },
31420     
31421     /**
31422      * Deselect a node.
31423      * @param {TreeNode} node The node to unselect
31424      */
31425     unselect : function(node){
31426         if(this.selNode == node){
31427             this.clearSelections();
31428         }    
31429     },
31430     
31431     /**
31432      * Clear all selections
31433      */
31434     clearSelections : function(){
31435         var n = this.selNode;
31436         if(n){
31437             n.ui.onSelectedChange(false);
31438             this.selNode = null;
31439             this.fireEvent("selectionchange", this, null);
31440         }
31441         return n;
31442     },
31443     
31444     /**
31445      * Get the selected node
31446      * @return {TreeNode} The selected node
31447      */
31448     getSelectedNode : function(){
31449         return this.selNode;    
31450     },
31451     
31452     /**
31453      * Returns true if the node is selected
31454      * @param {TreeNode} node The node to check
31455      * @return {Boolean}
31456      */
31457     isSelected : function(node){
31458         return this.selNode == node;  
31459     },
31460
31461     /**
31462      * Selects the node above the selected node in the tree, intelligently walking the nodes
31463      * @return TreeNode The new selection
31464      */
31465     selectPrevious : function(){
31466         var s = this.selNode || this.lastSelNode;
31467         if(!s){
31468             return null;
31469         }
31470         var ps = s.previousSibling;
31471         if(ps){
31472             if(!ps.isExpanded() || ps.childNodes.length < 1){
31473                 return this.select(ps);
31474             } else{
31475                 var lc = ps.lastChild;
31476                 while(lc && lc.isExpanded() && lc.childNodes.length > 0){
31477                     lc = lc.lastChild;
31478                 }
31479                 return this.select(lc);
31480             }
31481         } else if(s.parentNode && (this.tree.rootVisible || !s.parentNode.isRoot)){
31482             return this.select(s.parentNode);
31483         }
31484         return null;
31485     },
31486
31487     /**
31488      * Selects the node above the selected node in the tree, intelligently walking the nodes
31489      * @return TreeNode The new selection
31490      */
31491     selectNext : function(){
31492         var s = this.selNode || this.lastSelNode;
31493         if(!s){
31494             return null;
31495         }
31496         if(s.firstChild && s.isExpanded()){
31497              return this.select(s.firstChild);
31498          }else if(s.nextSibling){
31499              return this.select(s.nextSibling);
31500          }else if(s.parentNode){
31501             var newS = null;
31502             s.parentNode.bubble(function(){
31503                 if(this.nextSibling){
31504                     newS = this.getOwnerTree().selModel.select(this.nextSibling);
31505                     return false;
31506                 }
31507             });
31508             return newS;
31509          }
31510         return null;
31511     },
31512
31513     onKeyDown : function(e){
31514         var s = this.selNode || this.lastSelNode;
31515         // undesirable, but required
31516         var sm = this;
31517         if(!s){
31518             return;
31519         }
31520         var k = e.getKey();
31521         switch(k){
31522              case e.DOWN:
31523                  e.stopEvent();
31524                  this.selectNext();
31525              break;
31526              case e.UP:
31527                  e.stopEvent();
31528                  this.selectPrevious();
31529              break;
31530              case e.RIGHT:
31531                  e.preventDefault();
31532                  if(s.hasChildNodes()){
31533                      if(!s.isExpanded()){
31534                          s.expand();
31535                      }else if(s.firstChild){
31536                          this.select(s.firstChild, e);
31537                      }
31538                  }
31539              break;
31540              case e.LEFT:
31541                  e.preventDefault();
31542                  if(s.hasChildNodes() && s.isExpanded()){
31543                      s.collapse();
31544                  }else if(s.parentNode && (this.tree.rootVisible || s.parentNode != this.tree.getRootNode())){
31545                      this.select(s.parentNode, e);
31546                  }
31547              break;
31548         };
31549     }
31550 });
31551
31552 /**
31553  * @class Roo.tree.MultiSelectionModel
31554  * @extends Roo.util.Observable
31555  * Multi selection for a TreePanel.
31556  */
31557 Roo.tree.MultiSelectionModel = function(){
31558    this.selNodes = [];
31559    this.selMap = {};
31560    this.addEvents({
31561        /**
31562         * @event selectionchange
31563         * Fires when the selected nodes change
31564         * @param {MultiSelectionModel} this
31565         * @param {Array} nodes Array of the selected nodes
31566         */
31567        "selectionchange" : true
31568    });
31569 };
31570
31571 Roo.extend(Roo.tree.MultiSelectionModel, Roo.util.Observable, {
31572     init : function(tree){
31573         this.tree = tree;
31574         tree.getTreeEl().on("keydown", this.onKeyDown, this);
31575         tree.on("click", this.onNodeClick, this);
31576     },
31577     
31578     onNodeClick : function(node, e){
31579         this.select(node, e, e.ctrlKey);
31580     },
31581     
31582     /**
31583      * Select a node.
31584      * @param {TreeNode} node The node to select
31585      * @param {EventObject} e (optional) An event associated with the selection
31586      * @param {Boolean} keepExisting True to retain existing selections
31587      * @return {TreeNode} The selected node
31588      */
31589     select : function(node, e, keepExisting){
31590         if(keepExisting !== true){
31591             this.clearSelections(true);
31592         }
31593         if(this.isSelected(node)){
31594             this.lastSelNode = node;
31595             return node;
31596         }
31597         this.selNodes.push(node);
31598         this.selMap[node.id] = node;
31599         this.lastSelNode = node;
31600         node.ui.onSelectedChange(true);
31601         this.fireEvent("selectionchange", this, this.selNodes);
31602         return node;
31603     },
31604     
31605     /**
31606      * Deselect a node.
31607      * @param {TreeNode} node The node to unselect
31608      */
31609     unselect : function(node){
31610         if(this.selMap[node.id]){
31611             node.ui.onSelectedChange(false);
31612             var sn = this.selNodes;
31613             var index = -1;
31614             if(sn.indexOf){
31615                 index = sn.indexOf(node);
31616             }else{
31617                 for(var i = 0, len = sn.length; i < len; i++){
31618                     if(sn[i] == node){
31619                         index = i;
31620                         break;
31621                     }
31622                 }
31623             }
31624             if(index != -1){
31625                 this.selNodes.splice(index, 1);
31626             }
31627             delete this.selMap[node.id];
31628             this.fireEvent("selectionchange", this, this.selNodes);
31629         }
31630     },
31631     
31632     /**
31633      * Clear all selections
31634      */
31635     clearSelections : function(suppressEvent){
31636         var sn = this.selNodes;
31637         if(sn.length > 0){
31638             for(var i = 0, len = sn.length; i < len; i++){
31639                 sn[i].ui.onSelectedChange(false);
31640             }
31641             this.selNodes = [];
31642             this.selMap = {};
31643             if(suppressEvent !== true){
31644                 this.fireEvent("selectionchange", this, this.selNodes);
31645             }
31646         }
31647     },
31648     
31649     /**
31650      * Returns true if the node is selected
31651      * @param {TreeNode} node The node to check
31652      * @return {Boolean}
31653      */
31654     isSelected : function(node){
31655         return this.selMap[node.id] ? true : false;  
31656     },
31657     
31658     /**
31659      * Returns an array of the selected nodes
31660      * @return {Array}
31661      */
31662     getSelectedNodes : function(){
31663         return this.selNodes;    
31664     },
31665
31666     onKeyDown : Roo.tree.DefaultSelectionModel.prototype.onKeyDown,
31667
31668     selectNext : Roo.tree.DefaultSelectionModel.prototype.selectNext,
31669
31670     selectPrevious : Roo.tree.DefaultSelectionModel.prototype.selectPrevious
31671 });/*
31672  * Based on:
31673  * Ext JS Library 1.1.1
31674  * Copyright(c) 2006-2007, Ext JS, LLC.
31675  *
31676  * Originally Released Under LGPL - original licence link has changed is not relivant.
31677  *
31678  * Fork - LGPL
31679  * <script type="text/javascript">
31680  */
31681  
31682 /**
31683  * @class Roo.tree.TreeNode
31684  * @extends Roo.data.Node
31685  * @cfg {String} text The text for this node
31686  * @cfg {Boolean} expanded true to start the node expanded
31687  * @cfg {Boolean} allowDrag false to make this node undraggable if DD is on (defaults to true)
31688  * @cfg {Boolean} allowDrop false if this node cannot be drop on
31689  * @cfg {Boolean} disabled true to start the node disabled
31690  * @cfg {String} icon The path to an icon for the node. The preferred way to do this
31691  * is to use the cls or iconCls attributes and add the icon via a CSS background image.
31692  * @cfg {String} cls A css class to be added to the node
31693  * @cfg {String} iconCls A css class to be added to the nodes icon element for applying css background images
31694  * @cfg {String} href URL of the link used for the node (defaults to #)
31695  * @cfg {String} hrefTarget target frame for the link
31696  * @cfg {String} qtip An Ext QuickTip for the node
31697  * @cfg {String} qtipCfg An Ext QuickTip config for the node (used instead of qtip)
31698  * @cfg {Boolean} singleClickExpand True for single click expand on this node
31699  * @cfg {Function} uiProvider A UI <b>class</b> to use for this node (defaults to Roo.tree.TreeNodeUI)
31700  * @cfg {Boolean} checked True to render a checked checkbox for this node, false to render an unchecked checkbox
31701  * (defaults to undefined with no checkbox rendered)
31702  * @constructor
31703  * @param {Object/String} attributes The attributes/config for the node or just a string with the text for the node
31704  */
31705 Roo.tree.TreeNode = function(attributes){
31706     attributes = attributes || {};
31707     if(typeof attributes == "string"){
31708         attributes = {text: attributes};
31709     }
31710     this.childrenRendered = false;
31711     this.rendered = false;
31712     Roo.tree.TreeNode.superclass.constructor.call(this, attributes);
31713     this.expanded = attributes.expanded === true;
31714     this.isTarget = attributes.isTarget !== false;
31715     this.draggable = attributes.draggable !== false && attributes.allowDrag !== false;
31716     this.allowChildren = attributes.allowChildren !== false && attributes.allowDrop !== false;
31717
31718     /**
31719      * Read-only. The text for this node. To change it use setText().
31720      * @type String
31721      */
31722     this.text = attributes.text;
31723     /**
31724      * True if this node is disabled.
31725      * @type Boolean
31726      */
31727     this.disabled = attributes.disabled === true;
31728
31729     this.addEvents({
31730         /**
31731         * @event textchange
31732         * Fires when the text for this node is changed
31733         * @param {Node} this This node
31734         * @param {String} text The new text
31735         * @param {String} oldText The old text
31736         */
31737         "textchange" : true,
31738         /**
31739         * @event beforeexpand
31740         * Fires before this node is expanded, return false to cancel.
31741         * @param {Node} this This node
31742         * @param {Boolean} deep
31743         * @param {Boolean} anim
31744         */
31745         "beforeexpand" : true,
31746         /**
31747         * @event beforecollapse
31748         * Fires before this node is collapsed, return false to cancel.
31749         * @param {Node} this This node
31750         * @param {Boolean} deep
31751         * @param {Boolean} anim
31752         */
31753         "beforecollapse" : true,
31754         /**
31755         * @event expand
31756         * Fires when this node is expanded
31757         * @param {Node} this This node
31758         */
31759         "expand" : true,
31760         /**
31761         * @event disabledchange
31762         * Fires when the disabled status of this node changes
31763         * @param {Node} this This node
31764         * @param {Boolean} disabled
31765         */
31766         "disabledchange" : true,
31767         /**
31768         * @event collapse
31769         * Fires when this node is collapsed
31770         * @param {Node} this This node
31771         */
31772         "collapse" : true,
31773         /**
31774         * @event beforeclick
31775         * Fires before click processing. Return false to cancel the default action.
31776         * @param {Node} this This node
31777         * @param {Roo.EventObject} e The event object
31778         */
31779         "beforeclick":true,
31780         /**
31781         * @event checkchange
31782         * Fires when a node with a checkbox's checked property changes
31783         * @param {Node} this This node
31784         * @param {Boolean} checked
31785         */
31786         "checkchange":true,
31787         /**
31788         * @event click
31789         * Fires when this node is clicked
31790         * @param {Node} this This node
31791         * @param {Roo.EventObject} e The event object
31792         */
31793         "click":true,
31794         /**
31795         * @event dblclick
31796         * Fires when this node is double clicked
31797         * @param {Node} this This node
31798         * @param {Roo.EventObject} e The event object
31799         */
31800         "dblclick":true,
31801         /**
31802         * @event contextmenu
31803         * Fires when this node is right clicked
31804         * @param {Node} this This node
31805         * @param {Roo.EventObject} e The event object
31806         */
31807         "contextmenu":true,
31808         /**
31809         * @event beforechildrenrendered
31810         * Fires right before the child nodes for this node are rendered
31811         * @param {Node} this This node
31812         */
31813         "beforechildrenrendered":true
31814     });
31815
31816     var uiClass = this.attributes.uiProvider || Roo.tree.TreeNodeUI;
31817
31818     /**
31819      * Read-only. The UI for this node
31820      * @type TreeNodeUI
31821      */
31822     this.ui = new uiClass(this);
31823 };
31824 Roo.extend(Roo.tree.TreeNode, Roo.data.Node, {
31825     preventHScroll: true,
31826     /**
31827      * Returns true if this node is expanded
31828      * @return {Boolean}
31829      */
31830     isExpanded : function(){
31831         return this.expanded;
31832     },
31833
31834     /**
31835      * Returns the UI object for this node
31836      * @return {TreeNodeUI}
31837      */
31838     getUI : function(){
31839         return this.ui;
31840     },
31841
31842     // private override
31843     setFirstChild : function(node){
31844         var of = this.firstChild;
31845         Roo.tree.TreeNode.superclass.setFirstChild.call(this, node);
31846         if(this.childrenRendered && of && node != of){
31847             of.renderIndent(true, true);
31848         }
31849         if(this.rendered){
31850             this.renderIndent(true, true);
31851         }
31852     },
31853
31854     // private override
31855     setLastChild : function(node){
31856         var ol = this.lastChild;
31857         Roo.tree.TreeNode.superclass.setLastChild.call(this, node);
31858         if(this.childrenRendered && ol && node != ol){
31859             ol.renderIndent(true, true);
31860         }
31861         if(this.rendered){
31862             this.renderIndent(true, true);
31863         }
31864     },
31865
31866     // these methods are overridden to provide lazy rendering support
31867     // private override
31868     appendChild : function(){
31869         var node = Roo.tree.TreeNode.superclass.appendChild.apply(this, arguments);
31870         if(node && this.childrenRendered){
31871             node.render();
31872         }
31873         this.ui.updateExpandIcon();
31874         return node;
31875     },
31876
31877     // private override
31878     removeChild : function(node){
31879         this.ownerTree.getSelectionModel().unselect(node);
31880         Roo.tree.TreeNode.superclass.removeChild.apply(this, arguments);
31881         // if it's been rendered remove dom node
31882         if(this.childrenRendered){
31883             node.ui.remove();
31884         }
31885         if(this.childNodes.length < 1){
31886             this.collapse(false, false);
31887         }else{
31888             this.ui.updateExpandIcon();
31889         }
31890         if(!this.firstChild) {
31891             this.childrenRendered = false;
31892         }
31893         return node;
31894     },
31895
31896     // private override
31897     insertBefore : function(node, refNode){
31898         var newNode = Roo.tree.TreeNode.superclass.insertBefore.apply(this, arguments);
31899         if(newNode && refNode && this.childrenRendered){
31900             node.render();
31901         }
31902         this.ui.updateExpandIcon();
31903         return newNode;
31904     },
31905
31906     /**
31907      * Sets the text for this node
31908      * @param {String} text
31909      */
31910     setText : function(text){
31911         var oldText = this.text;
31912         this.text = text;
31913         this.attributes.text = text;
31914         if(this.rendered){ // event without subscribing
31915             this.ui.onTextChange(this, text, oldText);
31916         }
31917         this.fireEvent("textchange", this, text, oldText);
31918     },
31919
31920     /**
31921      * Triggers selection of this node
31922      */
31923     select : function(){
31924         this.getOwnerTree().getSelectionModel().select(this);
31925     },
31926
31927     /**
31928      * Triggers deselection of this node
31929      */
31930     unselect : function(){
31931         this.getOwnerTree().getSelectionModel().unselect(this);
31932     },
31933
31934     /**
31935      * Returns true if this node is selected
31936      * @return {Boolean}
31937      */
31938     isSelected : function(){
31939         return this.getOwnerTree().getSelectionModel().isSelected(this);
31940     },
31941
31942     /**
31943      * Expand this node.
31944      * @param {Boolean} deep (optional) True to expand all children as well
31945      * @param {Boolean} anim (optional) false to cancel the default animation
31946      * @param {Function} callback (optional) A callback to be called when
31947      * expanding this node completes (does not wait for deep expand to complete).
31948      * Called with 1 parameter, this node.
31949      */
31950     expand : function(deep, anim, callback){
31951         if(!this.expanded){
31952             if(this.fireEvent("beforeexpand", this, deep, anim) === false){
31953                 return;
31954             }
31955             if(!this.childrenRendered){
31956                 this.renderChildren();
31957             }
31958             this.expanded = true;
31959             if(!this.isHiddenRoot() && (this.getOwnerTree().animate && anim !== false) || anim){
31960                 this.ui.animExpand(function(){
31961                     this.fireEvent("expand", this);
31962                     if(typeof callback == "function"){
31963                         callback(this);
31964                     }
31965                     if(deep === true){
31966                         this.expandChildNodes(true);
31967                     }
31968                 }.createDelegate(this));
31969                 return;
31970             }else{
31971                 this.ui.expand();
31972                 this.fireEvent("expand", this);
31973                 if(typeof callback == "function"){
31974                     callback(this);
31975                 }
31976             }
31977         }else{
31978            if(typeof callback == "function"){
31979                callback(this);
31980            }
31981         }
31982         if(deep === true){
31983             this.expandChildNodes(true);
31984         }
31985     },
31986
31987     isHiddenRoot : function(){
31988         return this.isRoot && !this.getOwnerTree().rootVisible;
31989     },
31990
31991     /**
31992      * Collapse this node.
31993      * @param {Boolean} deep (optional) True to collapse all children as well
31994      * @param {Boolean} anim (optional) false to cancel the default animation
31995      */
31996     collapse : function(deep, anim){
31997         if(this.expanded && !this.isHiddenRoot()){
31998             if(this.fireEvent("beforecollapse", this, deep, anim) === false){
31999                 return;
32000             }
32001             this.expanded = false;
32002             if((this.getOwnerTree().animate && anim !== false) || anim){
32003                 this.ui.animCollapse(function(){
32004                     this.fireEvent("collapse", this);
32005                     if(deep === true){
32006                         this.collapseChildNodes(true);
32007                     }
32008                 }.createDelegate(this));
32009                 return;
32010             }else{
32011                 this.ui.collapse();
32012                 this.fireEvent("collapse", this);
32013             }
32014         }
32015         if(deep === true){
32016             var cs = this.childNodes;
32017             for(var i = 0, len = cs.length; i < len; i++) {
32018                 cs[i].collapse(true, false);
32019             }
32020         }
32021     },
32022
32023     // private
32024     delayedExpand : function(delay){
32025         if(!this.expandProcId){
32026             this.expandProcId = this.expand.defer(delay, this);
32027         }
32028     },
32029
32030     // private
32031     cancelExpand : function(){
32032         if(this.expandProcId){
32033             clearTimeout(this.expandProcId);
32034         }
32035         this.expandProcId = false;
32036     },
32037
32038     /**
32039      * Toggles expanded/collapsed state of the node
32040      */
32041     toggle : function(){
32042         if(this.expanded){
32043             this.collapse();
32044         }else{
32045             this.expand();
32046         }
32047     },
32048
32049     /**
32050      * Ensures all parent nodes are expanded
32051      */
32052     ensureVisible : function(callback){
32053         var tree = this.getOwnerTree();
32054         tree.expandPath(this.parentNode.getPath(), false, function(){
32055             tree.getTreeEl().scrollChildIntoView(this.ui.anchor);
32056             Roo.callback(callback);
32057         }.createDelegate(this));
32058     },
32059
32060     /**
32061      * Expand all child nodes
32062      * @param {Boolean} deep (optional) true if the child nodes should also expand their child nodes
32063      */
32064     expandChildNodes : function(deep){
32065         var cs = this.childNodes;
32066         for(var i = 0, len = cs.length; i < len; i++) {
32067                 cs[i].expand(deep);
32068         }
32069     },
32070
32071     /**
32072      * Collapse all child nodes
32073      * @param {Boolean} deep (optional) true if the child nodes should also collapse their child nodes
32074      */
32075     collapseChildNodes : function(deep){
32076         var cs = this.childNodes;
32077         for(var i = 0, len = cs.length; i < len; i++) {
32078                 cs[i].collapse(deep);
32079         }
32080     },
32081
32082     /**
32083      * Disables this node
32084      */
32085     disable : function(){
32086         this.disabled = true;
32087         this.unselect();
32088         if(this.rendered && this.ui.onDisableChange){ // event without subscribing
32089             this.ui.onDisableChange(this, true);
32090         }
32091         this.fireEvent("disabledchange", this, true);
32092     },
32093
32094     /**
32095      * Enables this node
32096      */
32097     enable : function(){
32098         this.disabled = false;
32099         if(this.rendered && this.ui.onDisableChange){ // event without subscribing
32100             this.ui.onDisableChange(this, false);
32101         }
32102         this.fireEvent("disabledchange", this, false);
32103     },
32104
32105     // private
32106     renderChildren : function(suppressEvent){
32107         if(suppressEvent !== false){
32108             this.fireEvent("beforechildrenrendered", this);
32109         }
32110         var cs = this.childNodes;
32111         for(var i = 0, len = cs.length; i < len; i++){
32112             cs[i].render(true);
32113         }
32114         this.childrenRendered = true;
32115     },
32116
32117     // private
32118     sort : function(fn, scope){
32119         Roo.tree.TreeNode.superclass.sort.apply(this, arguments);
32120         if(this.childrenRendered){
32121             var cs = this.childNodes;
32122             for(var i = 0, len = cs.length; i < len; i++){
32123                 cs[i].render(true);
32124             }
32125         }
32126     },
32127
32128     // private
32129     render : function(bulkRender){
32130         this.ui.render(bulkRender);
32131         if(!this.rendered){
32132             this.rendered = true;
32133             if(this.expanded){
32134                 this.expanded = false;
32135                 this.expand(false, false);
32136             }
32137         }
32138     },
32139
32140     // private
32141     renderIndent : function(deep, refresh){
32142         if(refresh){
32143             this.ui.childIndent = null;
32144         }
32145         this.ui.renderIndent();
32146         if(deep === true && this.childrenRendered){
32147             var cs = this.childNodes;
32148             for(var i = 0, len = cs.length; i < len; i++){
32149                 cs[i].renderIndent(true, refresh);
32150             }
32151         }
32152     }
32153 });/*
32154  * Based on:
32155  * Ext JS Library 1.1.1
32156  * Copyright(c) 2006-2007, Ext JS, LLC.
32157  *
32158  * Originally Released Under LGPL - original licence link has changed is not relivant.
32159  *
32160  * Fork - LGPL
32161  * <script type="text/javascript">
32162  */
32163  
32164 /**
32165  * @class Roo.tree.AsyncTreeNode
32166  * @extends Roo.tree.TreeNode
32167  * @cfg {TreeLoader} loader A TreeLoader to be used by this node (defaults to the loader defined on the tree)
32168  * @constructor
32169  * @param {Object/String} attributes The attributes/config for the node or just a string with the text for the node 
32170  */
32171  Roo.tree.AsyncTreeNode = function(config){
32172     this.loaded = false;
32173     this.loading = false;
32174     Roo.tree.AsyncTreeNode.superclass.constructor.apply(this, arguments);
32175     /**
32176     * @event beforeload
32177     * Fires before this node is loaded, return false to cancel
32178     * @param {Node} this This node
32179     */
32180     this.addEvents({'beforeload':true, 'load': true});
32181     /**
32182     * @event load
32183     * Fires when this node is loaded
32184     * @param {Node} this This node
32185     */
32186     /**
32187      * The loader used by this node (defaults to using the tree's defined loader)
32188      * @type TreeLoader
32189      * @property loader
32190      */
32191 };
32192 Roo.extend(Roo.tree.AsyncTreeNode, Roo.tree.TreeNode, {
32193     expand : function(deep, anim, callback){
32194         if(this.loading){ // if an async load is already running, waiting til it's done
32195             var timer;
32196             var f = function(){
32197                 if(!this.loading){ // done loading
32198                     clearInterval(timer);
32199                     this.expand(deep, anim, callback);
32200                 }
32201             }.createDelegate(this);
32202             timer = setInterval(f, 200);
32203             return;
32204         }
32205         if(!this.loaded){
32206             if(this.fireEvent("beforeload", this) === false){
32207                 return;
32208             }
32209             this.loading = true;
32210             this.ui.beforeLoad(this);
32211             var loader = this.loader || this.attributes.loader || this.getOwnerTree().getLoader();
32212             if(loader){
32213                 loader.load(this, this.loadComplete.createDelegate(this, [deep, anim, callback]));
32214                 return;
32215             }
32216         }
32217         Roo.tree.AsyncTreeNode.superclass.expand.call(this, deep, anim, callback);
32218     },
32219     
32220     /**
32221      * Returns true if this node is currently loading
32222      * @return {Boolean}
32223      */
32224     isLoading : function(){
32225         return this.loading;  
32226     },
32227     
32228     loadComplete : function(deep, anim, callback){
32229         this.loading = false;
32230         this.loaded = true;
32231         this.ui.afterLoad(this);
32232         this.fireEvent("load", this);
32233         this.expand(deep, anim, callback);
32234     },
32235     
32236     /**
32237      * Returns true if this node has been loaded
32238      * @return {Boolean}
32239      */
32240     isLoaded : function(){
32241         return this.loaded;
32242     },
32243     
32244     hasChildNodes : function(){
32245         if(!this.isLeaf() && !this.loaded){
32246             return true;
32247         }else{
32248             return Roo.tree.AsyncTreeNode.superclass.hasChildNodes.call(this);
32249         }
32250     },
32251
32252     /**
32253      * Trigger a reload for this node
32254      * @param {Function} callback
32255      */
32256     reload : function(callback){
32257         this.collapse(false, false);
32258         while(this.firstChild){
32259             this.removeChild(this.firstChild);
32260         }
32261         this.childrenRendered = false;
32262         this.loaded = false;
32263         if(this.isHiddenRoot()){
32264             this.expanded = false;
32265         }
32266         this.expand(false, false, callback);
32267     }
32268 });/*
32269  * Based on:
32270  * Ext JS Library 1.1.1
32271  * Copyright(c) 2006-2007, Ext JS, LLC.
32272  *
32273  * Originally Released Under LGPL - original licence link has changed is not relivant.
32274  *
32275  * Fork - LGPL
32276  * <script type="text/javascript">
32277  */
32278  
32279 /**
32280  * @class Roo.tree.TreeNodeUI
32281  * @constructor
32282  * @param {Object} node The node to render
32283  * The TreeNode UI implementation is separate from the
32284  * tree implementation. Unless you are customizing the tree UI,
32285  * you should never have to use this directly.
32286  */
32287 Roo.tree.TreeNodeUI = function(node){
32288     this.node = node;
32289     this.rendered = false;
32290     this.animating = false;
32291     this.emptyIcon = Roo.BLANK_IMAGE_URL;
32292 };
32293
32294 Roo.tree.TreeNodeUI.prototype = {
32295     removeChild : function(node){
32296         if(this.rendered){
32297             this.ctNode.removeChild(node.ui.getEl());
32298         }
32299     },
32300
32301     beforeLoad : function(){
32302          this.addClass("x-tree-node-loading");
32303     },
32304
32305     afterLoad : function(){
32306          this.removeClass("x-tree-node-loading");
32307     },
32308
32309     onTextChange : function(node, text, oldText){
32310         if(this.rendered){
32311             this.textNode.innerHTML = text;
32312         }
32313     },
32314
32315     onDisableChange : function(node, state){
32316         this.disabled = state;
32317         if(state){
32318             this.addClass("x-tree-node-disabled");
32319         }else{
32320             this.removeClass("x-tree-node-disabled");
32321         }
32322     },
32323
32324     onSelectedChange : function(state){
32325         if(state){
32326             this.focus();
32327             this.addClass("x-tree-selected");
32328         }else{
32329             //this.blur();
32330             this.removeClass("x-tree-selected");
32331         }
32332     },
32333
32334     onMove : function(tree, node, oldParent, newParent, index, refNode){
32335         this.childIndent = null;
32336         if(this.rendered){
32337             var targetNode = newParent.ui.getContainer();
32338             if(!targetNode){//target not rendered
32339                 this.holder = document.createElement("div");
32340                 this.holder.appendChild(this.wrap);
32341                 return;
32342             }
32343             var insertBefore = refNode ? refNode.ui.getEl() : null;
32344             if(insertBefore){
32345                 targetNode.insertBefore(this.wrap, insertBefore);
32346             }else{
32347                 targetNode.appendChild(this.wrap);
32348             }
32349             this.node.renderIndent(true);
32350         }
32351     },
32352
32353     addClass : function(cls){
32354         if(this.elNode){
32355             Roo.fly(this.elNode).addClass(cls);
32356         }
32357     },
32358
32359     removeClass : function(cls){
32360         if(this.elNode){
32361             Roo.fly(this.elNode).removeClass(cls);
32362         }
32363     },
32364
32365     remove : function(){
32366         if(this.rendered){
32367             this.holder = document.createElement("div");
32368             this.holder.appendChild(this.wrap);
32369         }
32370     },
32371
32372     fireEvent : function(){
32373         return this.node.fireEvent.apply(this.node, arguments);
32374     },
32375
32376     initEvents : function(){
32377         this.node.on("move", this.onMove, this);
32378         var E = Roo.EventManager;
32379         var a = this.anchor;
32380
32381         var el = Roo.fly(a, '_treeui');
32382
32383         if(Roo.isOpera){ // opera render bug ignores the CSS
32384             el.setStyle("text-decoration", "none");
32385         }
32386
32387         el.on("click", this.onClick, this);
32388         el.on("dblclick", this.onDblClick, this);
32389
32390         if(this.checkbox){
32391             Roo.EventManager.on(this.checkbox,
32392                     Roo.isIE ? 'click' : 'change', this.onCheckChange, this);
32393         }
32394
32395         el.on("contextmenu", this.onContextMenu, this);
32396
32397         var icon = Roo.fly(this.iconNode);
32398         icon.on("click", this.onClick, this);
32399         icon.on("dblclick", this.onDblClick, this);
32400         icon.on("contextmenu", this.onContextMenu, this);
32401         E.on(this.ecNode, "click", this.ecClick, this, true);
32402
32403         if(this.node.disabled){
32404             this.addClass("x-tree-node-disabled");
32405         }
32406         if(this.node.hidden){
32407             this.addClass("x-tree-node-disabled");
32408         }
32409         var ot = this.node.getOwnerTree();
32410         var dd = ot.enableDD || ot.enableDrag || ot.enableDrop;
32411         if(dd && (!this.node.isRoot || ot.rootVisible)){
32412             Roo.dd.Registry.register(this.elNode, {
32413                 node: this.node,
32414                 handles: this.getDDHandles(),
32415                 isHandle: false
32416             });
32417         }
32418     },
32419
32420     getDDHandles : function(){
32421         return [this.iconNode, this.textNode];
32422     },
32423
32424     hide : function(){
32425         if(this.rendered){
32426             this.wrap.style.display = "none";
32427         }
32428     },
32429
32430     show : function(){
32431         if(this.rendered){
32432             this.wrap.style.display = "";
32433         }
32434     },
32435
32436     onContextMenu : function(e){
32437         if (this.node.hasListener("contextmenu") || this.node.getOwnerTree().hasListener("contextmenu")) {
32438             e.preventDefault();
32439             this.focus();
32440             this.fireEvent("contextmenu", this.node, e);
32441         }
32442     },
32443
32444     onClick : function(e){
32445         if(this.dropping){
32446             e.stopEvent();
32447             return;
32448         }
32449         if(this.fireEvent("beforeclick", this.node, e) !== false){
32450             if(!this.disabled && this.node.attributes.href){
32451                 this.fireEvent("click", this.node, e);
32452                 return;
32453             }
32454             e.preventDefault();
32455             if(this.disabled){
32456                 return;
32457             }
32458
32459             if(this.node.attributes.singleClickExpand && !this.animating && this.node.hasChildNodes()){
32460                 this.node.toggle();
32461             }
32462
32463             this.fireEvent("click", this.node, e);
32464         }else{
32465             e.stopEvent();
32466         }
32467     },
32468
32469     onDblClick : function(e){
32470         e.preventDefault();
32471         if(this.disabled){
32472             return;
32473         }
32474         if(this.checkbox){
32475             this.toggleCheck();
32476         }
32477         if(!this.animating && this.node.hasChildNodes()){
32478             this.node.toggle();
32479         }
32480         this.fireEvent("dblclick", this.node, e);
32481     },
32482
32483     onCheckChange : function(){
32484         var checked = this.checkbox.checked;
32485         this.node.attributes.checked = checked;
32486         this.fireEvent('checkchange', this.node, checked);
32487     },
32488
32489     ecClick : function(e){
32490         if(!this.animating && this.node.hasChildNodes()){
32491             this.node.toggle();
32492         }
32493     },
32494
32495     startDrop : function(){
32496         this.dropping = true;
32497     },
32498
32499     // delayed drop so the click event doesn't get fired on a drop
32500     endDrop : function(){
32501        setTimeout(function(){
32502            this.dropping = false;
32503        }.createDelegate(this), 50);
32504     },
32505
32506     expand : function(){
32507         this.updateExpandIcon();
32508         this.ctNode.style.display = "";
32509     },
32510
32511     focus : function(){
32512         if(!this.node.preventHScroll){
32513             try{this.anchor.focus();
32514             }catch(e){}
32515         }else if(!Roo.isIE){
32516             try{
32517                 var noscroll = this.node.getOwnerTree().getTreeEl().dom;
32518                 var l = noscroll.scrollLeft;
32519                 this.anchor.focus();
32520                 noscroll.scrollLeft = l;
32521             }catch(e){}
32522         }
32523     },
32524
32525     toggleCheck : function(value){
32526         var cb = this.checkbox;
32527         if(cb){
32528             cb.checked = (value === undefined ? !cb.checked : value);
32529         }
32530     },
32531
32532     blur : function(){
32533         try{
32534             this.anchor.blur();
32535         }catch(e){}
32536     },
32537
32538     animExpand : function(callback){
32539         var ct = Roo.get(this.ctNode);
32540         ct.stopFx();
32541         if(!this.node.hasChildNodes()){
32542             this.updateExpandIcon();
32543             this.ctNode.style.display = "";
32544             Roo.callback(callback);
32545             return;
32546         }
32547         this.animating = true;
32548         this.updateExpandIcon();
32549
32550         ct.slideIn('t', {
32551            callback : function(){
32552                this.animating = false;
32553                Roo.callback(callback);
32554             },
32555             scope: this,
32556             duration: this.node.ownerTree.duration || .25
32557         });
32558     },
32559
32560     highlight : function(){
32561         var tree = this.node.getOwnerTree();
32562         Roo.fly(this.wrap).highlight(
32563             tree.hlColor || "C3DAF9",
32564             {endColor: tree.hlBaseColor}
32565         );
32566     },
32567
32568     collapse : function(){
32569         this.updateExpandIcon();
32570         this.ctNode.style.display = "none";
32571     },
32572
32573     animCollapse : function(callback){
32574         var ct = Roo.get(this.ctNode);
32575         ct.enableDisplayMode('block');
32576         ct.stopFx();
32577
32578         this.animating = true;
32579         this.updateExpandIcon();
32580
32581         ct.slideOut('t', {
32582             callback : function(){
32583                this.animating = false;
32584                Roo.callback(callback);
32585             },
32586             scope: this,
32587             duration: this.node.ownerTree.duration || .25
32588         });
32589     },
32590
32591     getContainer : function(){
32592         return this.ctNode;
32593     },
32594
32595     getEl : function(){
32596         return this.wrap;
32597     },
32598
32599     appendDDGhost : function(ghostNode){
32600         ghostNode.appendChild(this.elNode.cloneNode(true));
32601     },
32602
32603     getDDRepairXY : function(){
32604         return Roo.lib.Dom.getXY(this.iconNode);
32605     },
32606
32607     onRender : function(){
32608         this.render();
32609     },
32610
32611     render : function(bulkRender){
32612         var n = this.node, a = n.attributes;
32613         var targetNode = n.parentNode ?
32614               n.parentNode.ui.getContainer() : n.ownerTree.innerCt.dom;
32615
32616         if(!this.rendered){
32617             this.rendered = true;
32618
32619             this.renderElements(n, a, targetNode, bulkRender);
32620
32621             if(a.qtip){
32622                if(this.textNode.setAttributeNS){
32623                    this.textNode.setAttributeNS("ext", "qtip", a.qtip);
32624                    if(a.qtipTitle){
32625                        this.textNode.setAttributeNS("ext", "qtitle", a.qtipTitle);
32626                    }
32627                }else{
32628                    this.textNode.setAttribute("ext:qtip", a.qtip);
32629                    if(a.qtipTitle){
32630                        this.textNode.setAttribute("ext:qtitle", a.qtipTitle);
32631                    }
32632                }
32633             }else if(a.qtipCfg){
32634                 a.qtipCfg.target = Roo.id(this.textNode);
32635                 Roo.QuickTips.register(a.qtipCfg);
32636             }
32637             this.initEvents();
32638             if(!this.node.expanded){
32639                 this.updateExpandIcon();
32640             }
32641         }else{
32642             if(bulkRender === true) {
32643                 targetNode.appendChild(this.wrap);
32644             }
32645         }
32646     },
32647
32648     renderElements : function(n, a, targetNode, bulkRender)
32649     {
32650         // add some indent caching, this helps performance when rendering a large tree
32651         this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
32652         var t = n.getOwnerTree();
32653         var txt = t.renderer ? t.renderer(n.attributes) : Roo.util.Format.htmlEncode(n.text);
32654         if (typeof(n.attributes.html) != 'undefined') {
32655             txt = n.attributes.html;
32656         }
32657         var tip = t.rendererTip ? t.rendererTip(n.attributes) : txt;
32658         var cb = typeof a.checked == 'boolean';
32659         var href = a.href ? a.href : Roo.isGecko ? "" : "#";
32660         var buf = ['<li class="x-tree-node"><div class="x-tree-node-el ', a.cls,'">',
32661             '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
32662             '<img src="', this.emptyIcon, '" class="x-tree-ec-icon" />',
32663             '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on" />',
32664             cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : ' />')) : '',
32665             '<a hidefocus="on" href="',href,'" tabIndex="1" ',
32666              a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", 
32667                 '><span unselectable="on" qtip="' , tip ,'">',txt,"</span></a></div>",
32668             '<ul class="x-tree-node-ct" style="display:none;"></ul>',
32669             "</li>"];
32670
32671         if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
32672             this.wrap = Roo.DomHelper.insertHtml("beforeBegin",
32673                                 n.nextSibling.ui.getEl(), buf.join(""));
32674         }else{
32675             this.wrap = Roo.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
32676         }
32677
32678         this.elNode = this.wrap.childNodes[0];
32679         this.ctNode = this.wrap.childNodes[1];
32680         var cs = this.elNode.childNodes;
32681         this.indentNode = cs[0];
32682         this.ecNode = cs[1];
32683         this.iconNode = cs[2];
32684         var index = 3;
32685         if(cb){
32686             this.checkbox = cs[3];
32687             index++;
32688         }
32689         this.anchor = cs[index];
32690         this.textNode = cs[index].firstChild;
32691     },
32692
32693     getAnchor : function(){
32694         return this.anchor;
32695     },
32696
32697     getTextEl : function(){
32698         return this.textNode;
32699     },
32700
32701     getIconEl : function(){
32702         return this.iconNode;
32703     },
32704
32705     isChecked : function(){
32706         return this.checkbox ? this.checkbox.checked : false;
32707     },
32708
32709     updateExpandIcon : function(){
32710         if(this.rendered){
32711             var n = this.node, c1, c2;
32712             var cls = n.isLast() ? "x-tree-elbow-end" : "x-tree-elbow";
32713             var hasChild = n.hasChildNodes();
32714             if(hasChild){
32715                 if(n.expanded){
32716                     cls += "-minus";
32717                     c1 = "x-tree-node-collapsed";
32718                     c2 = "x-tree-node-expanded";
32719                 }else{
32720                     cls += "-plus";
32721                     c1 = "x-tree-node-expanded";
32722                     c2 = "x-tree-node-collapsed";
32723                 }
32724                 if(this.wasLeaf){
32725                     this.removeClass("x-tree-node-leaf");
32726                     this.wasLeaf = false;
32727                 }
32728                 if(this.c1 != c1 || this.c2 != c2){
32729                     Roo.fly(this.elNode).replaceClass(c1, c2);
32730                     this.c1 = c1; this.c2 = c2;
32731                 }
32732             }else{
32733                 if(!this.wasLeaf){
32734                     Roo.fly(this.elNode).replaceClass("x-tree-node-expanded", "x-tree-node-leaf");
32735                     delete this.c1;
32736                     delete this.c2;
32737                     this.wasLeaf = true;
32738                 }
32739             }
32740             var ecc = "x-tree-ec-icon "+cls;
32741             if(this.ecc != ecc){
32742                 this.ecNode.className = ecc;
32743                 this.ecc = ecc;
32744             }
32745         }
32746     },
32747
32748     getChildIndent : function(){
32749         if(!this.childIndent){
32750             var buf = [];
32751             var p = this.node;
32752             while(p){
32753                 if(!p.isRoot || (p.isRoot && p.ownerTree.rootVisible)){
32754                     if(!p.isLast()) {
32755                         buf.unshift('<img src="'+this.emptyIcon+'" class="x-tree-elbow-line" />');
32756                     } else {
32757                         buf.unshift('<img src="'+this.emptyIcon+'" class="x-tree-icon" />');
32758                     }
32759                 }
32760                 p = p.parentNode;
32761             }
32762             this.childIndent = buf.join("");
32763         }
32764         return this.childIndent;
32765     },
32766
32767     renderIndent : function(){
32768         if(this.rendered){
32769             var indent = "";
32770             var p = this.node.parentNode;
32771             if(p){
32772                 indent = p.ui.getChildIndent();
32773             }
32774             if(this.indentMarkup != indent){ // don't rerender if not required
32775                 this.indentNode.innerHTML = indent;
32776                 this.indentMarkup = indent;
32777             }
32778             this.updateExpandIcon();
32779         }
32780     }
32781 };
32782
32783 Roo.tree.RootTreeNodeUI = function(){
32784     Roo.tree.RootTreeNodeUI.superclass.constructor.apply(this, arguments);
32785 };
32786 Roo.extend(Roo.tree.RootTreeNodeUI, Roo.tree.TreeNodeUI, {
32787     render : function(){
32788         if(!this.rendered){
32789             var targetNode = this.node.ownerTree.innerCt.dom;
32790             this.node.expanded = true;
32791             targetNode.innerHTML = '<div class="x-tree-root-node"></div>';
32792             this.wrap = this.ctNode = targetNode.firstChild;
32793         }
32794     },
32795     collapse : function(){
32796     },
32797     expand : function(){
32798     }
32799 });/*
32800  * Based on:
32801  * Ext JS Library 1.1.1
32802  * Copyright(c) 2006-2007, Ext JS, LLC.
32803  *
32804  * Originally Released Under LGPL - original licence link has changed is not relivant.
32805  *
32806  * Fork - LGPL
32807  * <script type="text/javascript">
32808  */
32809 /**
32810  * @class Roo.tree.TreeLoader
32811  * @extends Roo.util.Observable
32812  * A TreeLoader provides for lazy loading of an {@link Roo.tree.TreeNode}'s child
32813  * nodes from a specified URL. The response must be a javascript Array definition
32814  * who's elements are node definition objects. eg:
32815  * <pre><code>
32816    [{ 'id': 1, 'text': 'A folder Node', 'leaf': false },
32817     { 'id': 2, 'text': 'A leaf Node', 'leaf': true }]
32818 </code></pre>
32819  * <br><br>
32820  * A server request is sent, and child nodes are loaded only when a node is expanded.
32821  * The loading node's id is passed to the server under the parameter name "node" to
32822  * enable the server to produce the correct child nodes.
32823  * <br><br>
32824  * To pass extra parameters, an event handler may be attached to the "beforeload"
32825  * event, and the parameters specified in the TreeLoader's baseParams property:
32826  * <pre><code>
32827     myTreeLoader.on("beforeload", function(treeLoader, node) {
32828         this.baseParams.category = node.attributes.category;
32829     }, this);
32830 </code></pre><
32831  * This would pass an HTTP parameter called "category" to the server containing
32832  * the value of the Node's "category" attribute.
32833  * @constructor
32834  * Creates a new Treeloader.
32835  * @param {Object} config A config object containing config properties.
32836  */
32837 Roo.tree.TreeLoader = function(config){
32838     this.baseParams = {};
32839     this.requestMethod = "POST";
32840     Roo.apply(this, config);
32841
32842     this.addEvents({
32843     
32844         /**
32845          * @event beforeload
32846          * Fires before a network request is made to retrieve the Json text which specifies a node's children.
32847          * @param {Object} This TreeLoader object.
32848          * @param {Object} node The {@link Roo.tree.TreeNode} object being loaded.
32849          * @param {Object} callback The callback function specified in the {@link #load} call.
32850          */
32851         beforeload : true,
32852         /**
32853          * @event load
32854          * Fires when the node has been successfuly loaded.
32855          * @param {Object} This TreeLoader object.
32856          * @param {Object} node The {@link Roo.tree.TreeNode} object being loaded.
32857          * @param {Object} response The response object containing the data from the server.
32858          */
32859         load : true,
32860         /**
32861          * @event loadexception
32862          * Fires if the network request failed.
32863          * @param {Object} This TreeLoader object.
32864          * @param {Object} node The {@link Roo.tree.TreeNode} object being loaded.
32865          * @param {Object} response The response object containing the data from the server.
32866          */
32867         loadexception : true,
32868         /**
32869          * @event create
32870          * Fires before a node is created, enabling you to return custom Node types 
32871          * @param {Object} This TreeLoader object.
32872          * @param {Object} attr - the data returned from the AJAX call (modify it to suit)
32873          */
32874         create : true
32875     });
32876
32877     Roo.tree.TreeLoader.superclass.constructor.call(this);
32878 };
32879
32880 Roo.extend(Roo.tree.TreeLoader, Roo.util.Observable, {
32881     /**
32882     * @cfg {String} dataUrl The URL from which to request a Json string which
32883     * specifies an array of node definition object representing the child nodes
32884     * to be loaded.
32885     */
32886     /**
32887     * @cfg {Object} baseParams (optional) An object containing properties which
32888     * specify HTTP parameters to be passed to each request for child nodes.
32889     */
32890     /**
32891     * @cfg {Object} baseAttrs (optional) An object containing attributes to be added to all nodes
32892     * created by this loader. If the attributes sent by the server have an attribute in this object,
32893     * they take priority.
32894     */
32895     /**
32896     * @cfg {Object} uiProviders (optional) An object containing properties which
32897     * 
32898     * DEPRECATED - use 'create' event handler to modify attributes - which affect creation.
32899     * specify custom {@link Roo.tree.TreeNodeUI} implementations. If the optional
32900     * <i>uiProvider</i> attribute of a returned child node is a string rather
32901     * than a reference to a TreeNodeUI implementation, this that string value
32902     * is used as a property name in the uiProviders object. You can define the provider named
32903     * 'default' , and this will be used for all nodes (if no uiProvider is delivered by the node data)
32904     */
32905     uiProviders : {},
32906
32907     /**
32908     * @cfg {Boolean} clearOnLoad (optional) Default to true. Remove previously existing
32909     * child nodes before loading.
32910     */
32911     clearOnLoad : true,
32912
32913     /**
32914     * @cfg {String} root (optional) Default to false. Use this to read data from an object 
32915     * property on loading, rather than expecting an array. (eg. more compatible to a standard
32916     * Grid query { data : [ .....] }
32917     */
32918     
32919     root : false,
32920      /**
32921     * @cfg {String} queryParam (optional) 
32922     * Name of the query as it will be passed on the querystring (defaults to 'node')
32923     * eg. the request will be ?node=[id]
32924     */
32925     
32926     
32927     queryParam: false,
32928     
32929     /**
32930      * Load an {@link Roo.tree.TreeNode} from the URL specified in the constructor.
32931      * This is called automatically when a node is expanded, but may be used to reload
32932      * a node (or append new children if the {@link #clearOnLoad} option is false.)
32933      * @param {Roo.tree.TreeNode} node
32934      * @param {Function} callback
32935      */
32936     load : function(node, callback){
32937         if(this.clearOnLoad){
32938             while(node.firstChild){
32939                 node.removeChild(node.firstChild);
32940             }
32941         }
32942         if(node.attributes.children){ // preloaded json children
32943             var cs = node.attributes.children;
32944             for(var i = 0, len = cs.length; i < len; i++){
32945                 node.appendChild(this.createNode(cs[i]));
32946             }
32947             if(typeof callback == "function"){
32948                 callback();
32949             }
32950         }else if(this.dataUrl){
32951             this.requestData(node, callback);
32952         }
32953     },
32954
32955     getParams: function(node){
32956         var buf = [], bp = this.baseParams;
32957         for(var key in bp){
32958             if(typeof bp[key] != "function"){
32959                 buf.push(encodeURIComponent(key), "=", encodeURIComponent(bp[key]), "&");
32960             }
32961         }
32962         var n = this.queryParam === false ? 'node' : this.queryParam;
32963         buf.push(n + "=", encodeURIComponent(node.id));
32964         return buf.join("");
32965     },
32966
32967     requestData : function(node, callback){
32968         if(this.fireEvent("beforeload", this, node, callback) !== false){
32969             this.transId = Roo.Ajax.request({
32970                 method:this.requestMethod,
32971                 url: this.dataUrl||this.url,
32972                 success: this.handleResponse,
32973                 failure: this.handleFailure,
32974                 scope: this,
32975                 argument: {callback: callback, node: node},
32976                 params: this.getParams(node)
32977             });
32978         }else{
32979             // if the load is cancelled, make sure we notify
32980             // the node that we are done
32981             if(typeof callback == "function"){
32982                 callback();
32983             }
32984         }
32985     },
32986
32987     isLoading : function(){
32988         return this.transId ? true : false;
32989     },
32990
32991     abort : function(){
32992         if(this.isLoading()){
32993             Roo.Ajax.abort(this.transId);
32994         }
32995     },
32996
32997     // private
32998     createNode : function(attr)
32999     {
33000         // apply baseAttrs, nice idea Corey!
33001         if(this.baseAttrs){
33002             Roo.applyIf(attr, this.baseAttrs);
33003         }
33004         if(this.applyLoader !== false){
33005             attr.loader = this;
33006         }
33007         // uiProvider = depreciated..
33008         
33009         if(typeof(attr.uiProvider) == 'string'){
33010            attr.uiProvider = this.uiProviders[attr.uiProvider] || 
33011                 /**  eval:var:attr */ eval(attr.uiProvider);
33012         }
33013         if(typeof(this.uiProviders['default']) != 'undefined') {
33014             attr.uiProvider = this.uiProviders['default'];
33015         }
33016         
33017         this.fireEvent('create', this, attr);
33018         
33019         attr.leaf  = typeof(attr.leaf) == 'string' ? attr.leaf * 1 : attr.leaf;
33020         return(attr.leaf ?
33021                         new Roo.tree.TreeNode(attr) :
33022                         new Roo.tree.AsyncTreeNode(attr));
33023     },
33024
33025     processResponse : function(response, node, callback)
33026     {
33027         var json = response.responseText;
33028         try {
33029             
33030             var o = Roo.decode(json);
33031             
33032             if (!o.success) {
33033                 // it's a failure condition.
33034                 var a = response.argument;
33035                 this.fireEvent("loadexception", this, a.node, response);
33036                 Roo.log("Load failed - should have a handler really");
33037                 return;
33038             }
33039             
33040             if (this.root !== false) {
33041                 o = o[this.root];
33042             }
33043             
33044             for(var i = 0, len = o.length; i < len; i++){
33045                 var n = this.createNode(o[i]);
33046                 if(n){
33047                     node.appendChild(n);
33048                 }
33049             }
33050             if(typeof callback == "function"){
33051                 callback(this, node);
33052             }
33053         }catch(e){
33054             this.handleFailure(response);
33055         }
33056     },
33057
33058     handleResponse : function(response){
33059         this.transId = false;
33060         var a = response.argument;
33061         this.processResponse(response, a.node, a.callback);
33062         this.fireEvent("load", this, a.node, response);
33063     },
33064
33065     handleFailure : function(response)
33066     {
33067         // should handle failure better..
33068         this.transId = false;
33069         var a = response.argument;
33070         this.fireEvent("loadexception", this, a.node, response);
33071         if(typeof a.callback == "function"){
33072             a.callback(this, a.node);
33073         }
33074     }
33075 });/*
33076  * Based on:
33077  * Ext JS Library 1.1.1
33078  * Copyright(c) 2006-2007, Ext JS, LLC.
33079  *
33080  * Originally Released Under LGPL - original licence link has changed is not relivant.
33081  *
33082  * Fork - LGPL
33083  * <script type="text/javascript">
33084  */
33085
33086 /**
33087 * @class Roo.tree.TreeFilter
33088 * Note this class is experimental and doesn't update the indent (lines) or expand collapse icons of the nodes
33089 * @param {TreePanel} tree
33090 * @param {Object} config (optional)
33091  */
33092 Roo.tree.TreeFilter = function(tree, config){
33093     this.tree = tree;
33094     this.filtered = {};
33095     Roo.apply(this, config);
33096 };
33097
33098 Roo.tree.TreeFilter.prototype = {
33099     clearBlank:false,
33100     reverse:false,
33101     autoClear:false,
33102     remove:false,
33103
33104      /**
33105      * Filter the data by a specific attribute.
33106      * @param {String/RegExp} value Either string that the attribute value
33107      * should start with or a RegExp to test against the attribute
33108      * @param {String} attr (optional) The attribute passed in your node's attributes collection. Defaults to "text".
33109      * @param {TreeNode} startNode (optional) The node to start the filter at.
33110      */
33111     filter : function(value, attr, startNode){
33112         attr = attr || "text";
33113         var f;
33114         if(typeof value == "string"){
33115             var vlen = value.length;
33116             // auto clear empty filter
33117             if(vlen == 0 && this.clearBlank){
33118                 this.clear();
33119                 return;
33120             }
33121             value = value.toLowerCase();
33122             f = function(n){
33123                 return n.attributes[attr].substr(0, vlen).toLowerCase() == value;
33124             };
33125         }else if(value.exec){ // regex?
33126             f = function(n){
33127                 return value.test(n.attributes[attr]);
33128             };
33129         }else{
33130             throw 'Illegal filter type, must be string or regex';
33131         }
33132         this.filterBy(f, null, startNode);
33133         },
33134
33135     /**
33136      * Filter by a function. The passed function will be called with each
33137      * node in the tree (or from the startNode). If the function returns true, the node is kept
33138      * otherwise it is filtered. If a node is filtered, its children are also filtered.
33139      * @param {Function} fn The filter function
33140      * @param {Object} scope (optional) The scope of the function (defaults to the current node)
33141      */
33142     filterBy : function(fn, scope, startNode){
33143         startNode = startNode || this.tree.root;
33144         if(this.autoClear){
33145             this.clear();
33146         }
33147         var af = this.filtered, rv = this.reverse;
33148         var f = function(n){
33149             if(n == startNode){
33150                 return true;
33151             }
33152             if(af[n.id]){
33153                 return false;
33154             }
33155             var m = fn.call(scope || n, n);
33156             if(!m || rv){
33157                 af[n.id] = n;
33158                 n.ui.hide();
33159                 return false;
33160             }
33161             return true;
33162         };
33163         startNode.cascade(f);
33164         if(this.remove){
33165            for(var id in af){
33166                if(typeof id != "function"){
33167                    var n = af[id];
33168                    if(n && n.parentNode){
33169                        n.parentNode.removeChild(n);
33170                    }
33171                }
33172            }
33173         }
33174     },
33175
33176     /**
33177      * Clears the current filter. Note: with the "remove" option
33178      * set a filter cannot be cleared.
33179      */
33180     clear : function(){
33181         var t = this.tree;
33182         var af = this.filtered;
33183         for(var id in af){
33184             if(typeof id != "function"){
33185                 var n = af[id];
33186                 if(n){
33187                     n.ui.show();
33188                 }
33189             }
33190         }
33191         this.filtered = {};
33192     }
33193 };
33194 /*
33195  * Based on:
33196  * Ext JS Library 1.1.1
33197  * Copyright(c) 2006-2007, Ext JS, LLC.
33198  *
33199  * Originally Released Under LGPL - original licence link has changed is not relivant.
33200  *
33201  * Fork - LGPL
33202  * <script type="text/javascript">
33203  */
33204  
33205
33206 /**
33207  * @class Roo.tree.TreeSorter
33208  * Provides sorting of nodes in a TreePanel
33209  * 
33210  * @cfg {Boolean} folderSort True to sort leaf nodes under non leaf nodes
33211  * @cfg {String} property The named attribute on the node to sort by (defaults to text)
33212  * @cfg {String} dir The direction to sort (asc or desc) (defaults to asc)
33213  * @cfg {String} leafAttr The attribute used to determine leaf nodes in folder sort (defaults to "leaf")
33214  * @cfg {Boolean} caseSensitive true for case sensitive sort (defaults to false)
33215  * @cfg {Function} sortType A custom "casting" function used to convert node values before sorting
33216  * @constructor
33217  * @param {TreePanel} tree
33218  * @param {Object} config
33219  */
33220 Roo.tree.TreeSorter = function(tree, config){
33221     Roo.apply(this, config);
33222     tree.on("beforechildrenrendered", this.doSort, this);
33223     tree.on("append", this.updateSort, this);
33224     tree.on("insert", this.updateSort, this);
33225     
33226     var dsc = this.dir && this.dir.toLowerCase() == "desc";
33227     var p = this.property || "text";
33228     var sortType = this.sortType;
33229     var fs = this.folderSort;
33230     var cs = this.caseSensitive === true;
33231     var leafAttr = this.leafAttr || 'leaf';
33232
33233     this.sortFn = function(n1, n2){
33234         if(fs){
33235             if(n1.attributes[leafAttr] && !n2.attributes[leafAttr]){
33236                 return 1;
33237             }
33238             if(!n1.attributes[leafAttr] && n2.attributes[leafAttr]){
33239                 return -1;
33240             }
33241         }
33242         var v1 = sortType ? sortType(n1) : (cs ? n1.attributes[p] : n1.attributes[p].toUpperCase());
33243         var v2 = sortType ? sortType(n2) : (cs ? n2.attributes[p] : n2.attributes[p].toUpperCase());
33244         if(v1 < v2){
33245                         return dsc ? +1 : -1;
33246                 }else if(v1 > v2){
33247                         return dsc ? -1 : +1;
33248         }else{
33249                 return 0;
33250         }
33251     };
33252 };
33253
33254 Roo.tree.TreeSorter.prototype = {
33255     doSort : function(node){
33256         node.sort(this.sortFn);
33257     },
33258     
33259     compareNodes : function(n1, n2){
33260         return (n1.text.toUpperCase() > n2.text.toUpperCase() ? 1 : -1);
33261     },
33262     
33263     updateSort : function(tree, node){
33264         if(node.childrenRendered){
33265             this.doSort.defer(1, this, [node]);
33266         }
33267     }
33268 };/*
33269  * Based on:
33270  * Ext JS Library 1.1.1
33271  * Copyright(c) 2006-2007, Ext JS, LLC.
33272  *
33273  * Originally Released Under LGPL - original licence link has changed is not relivant.
33274  *
33275  * Fork - LGPL
33276  * <script type="text/javascript">
33277  */
33278
33279 if(Roo.dd.DropZone){
33280     
33281 Roo.tree.TreeDropZone = function(tree, config){
33282     this.allowParentInsert = false;
33283     this.allowContainerDrop = false;
33284     this.appendOnly = false;
33285     Roo.tree.TreeDropZone.superclass.constructor.call(this, tree.innerCt, config);
33286     this.tree = tree;
33287     this.lastInsertClass = "x-tree-no-status";
33288     this.dragOverData = {};
33289 };
33290
33291 Roo.extend(Roo.tree.TreeDropZone, Roo.dd.DropZone, {
33292     ddGroup : "TreeDD",
33293     
33294     expandDelay : 1000,
33295     
33296     expandNode : function(node){
33297         if(node.hasChildNodes() && !node.isExpanded()){
33298             node.expand(false, null, this.triggerCacheRefresh.createDelegate(this));
33299         }
33300     },
33301     
33302     queueExpand : function(node){
33303         this.expandProcId = this.expandNode.defer(this.expandDelay, this, [node]);
33304     },
33305     
33306     cancelExpand : function(){
33307         if(this.expandProcId){
33308             clearTimeout(this.expandProcId);
33309             this.expandProcId = false;
33310         }
33311     },
33312     
33313     isValidDropPoint : function(n, pt, dd, e, data){
33314         if(!n || !data){ return false; }
33315         var targetNode = n.node;
33316         var dropNode = data.node;
33317         // default drop rules
33318         if(!(targetNode && targetNode.isTarget && pt)){
33319             return false;
33320         }
33321         if(pt == "append" && targetNode.allowChildren === false){
33322             return false;
33323         }
33324         if((pt == "above" || pt == "below") && (targetNode.parentNode && targetNode.parentNode.allowChildren === false)){
33325             return false;
33326         }
33327         if(dropNode && (targetNode == dropNode || dropNode.contains(targetNode))){
33328             return false;
33329         }
33330         // reuse the object
33331         var overEvent = this.dragOverData;
33332         overEvent.tree = this.tree;
33333         overEvent.target = targetNode;
33334         overEvent.data = data;
33335         overEvent.point = pt;
33336         overEvent.source = dd;
33337         overEvent.rawEvent = e;
33338         overEvent.dropNode = dropNode;
33339         overEvent.cancel = false;  
33340         var result = this.tree.fireEvent("nodedragover", overEvent);
33341         return overEvent.cancel === false && result !== false;
33342     },
33343     
33344     getDropPoint : function(e, n, dd){
33345         var tn = n.node;
33346         if(tn.isRoot){
33347             return tn.allowChildren !== false ? "append" : false; // always append for root
33348         }
33349         var dragEl = n.ddel;
33350         var t = Roo.lib.Dom.getY(dragEl), b = t + dragEl.offsetHeight;
33351         var y = Roo.lib.Event.getPageY(e);
33352         //var noAppend = tn.allowChildren === false || tn.isLeaf();
33353         
33354         // we may drop nodes anywhere, as long as allowChildren has not been set to false..
33355         var noAppend = tn.allowChildren === false;
33356         if(this.appendOnly || tn.parentNode.allowChildren === false){
33357             return noAppend ? false : "append";
33358         }
33359         var noBelow = false;
33360         if(!this.allowParentInsert){
33361             noBelow = tn.hasChildNodes() && tn.isExpanded();
33362         }
33363         var q = (b - t) / (noAppend ? 2 : 3);
33364         if(y >= t && y < (t + q)){
33365             return "above";
33366         }else if(!noBelow && (noAppend || y >= b-q && y <= b)){
33367             return "below";
33368         }else{
33369             return "append";
33370         }
33371     },
33372     
33373     onNodeEnter : function(n, dd, e, data){
33374         this.cancelExpand();
33375     },
33376     
33377     onNodeOver : function(n, dd, e, data){
33378         var pt = this.getDropPoint(e, n, dd);
33379         var node = n.node;
33380         
33381         // auto node expand check
33382         if(!this.expandProcId && pt == "append" && node.hasChildNodes() && !n.node.isExpanded()){
33383             this.queueExpand(node);
33384         }else if(pt != "append"){
33385             this.cancelExpand();
33386         }
33387         
33388         // set the insert point style on the target node
33389         var returnCls = this.dropNotAllowed;
33390         if(this.isValidDropPoint(n, pt, dd, e, data)){
33391            if(pt){
33392                var el = n.ddel;
33393                var cls;
33394                if(pt == "above"){
33395                    returnCls = n.node.isFirst() ? "x-tree-drop-ok-above" : "x-tree-drop-ok-between";
33396                    cls = "x-tree-drag-insert-above";
33397                }else if(pt == "below"){
33398                    returnCls = n.node.isLast() ? "x-tree-drop-ok-below" : "x-tree-drop-ok-between";
33399                    cls = "x-tree-drag-insert-below";
33400                }else{
33401                    returnCls = "x-tree-drop-ok-append";
33402                    cls = "x-tree-drag-append";
33403                }
33404                if(this.lastInsertClass != cls){
33405                    Roo.fly(el).replaceClass(this.lastInsertClass, cls);
33406                    this.lastInsertClass = cls;
33407                }
33408            }
33409        }
33410        return returnCls;
33411     },
33412     
33413     onNodeOut : function(n, dd, e, data){
33414         this.cancelExpand();
33415         this.removeDropIndicators(n);
33416     },
33417     
33418     onNodeDrop : function(n, dd, e, data){
33419         var point = this.getDropPoint(e, n, dd);
33420         var targetNode = n.node;
33421         targetNode.ui.startDrop();
33422         if(!this.isValidDropPoint(n, point, dd, e, data)){
33423             targetNode.ui.endDrop();
33424             return false;
33425         }
33426         // first try to find the drop node
33427         var dropNode = data.node || (dd.getTreeNode ? dd.getTreeNode(data, targetNode, point, e) : null);
33428         var dropEvent = {
33429             tree : this.tree,
33430             target: targetNode,
33431             data: data,
33432             point: point,
33433             source: dd,
33434             rawEvent: e,
33435             dropNode: dropNode,
33436             cancel: !dropNode   
33437         };
33438         var retval = this.tree.fireEvent("beforenodedrop", dropEvent);
33439         if(retval === false || dropEvent.cancel === true || !dropEvent.dropNode){
33440             targetNode.ui.endDrop();
33441             return false;
33442         }
33443         // allow target changing
33444         targetNode = dropEvent.target;
33445         if(point == "append" && !targetNode.isExpanded()){
33446             targetNode.expand(false, null, function(){
33447                 this.completeDrop(dropEvent);
33448             }.createDelegate(this));
33449         }else{
33450             this.completeDrop(dropEvent);
33451         }
33452         return true;
33453     },
33454     
33455     completeDrop : function(de){
33456         var ns = de.dropNode, p = de.point, t = de.target;
33457         if(!(ns instanceof Array)){
33458             ns = [ns];
33459         }
33460         var n;
33461         for(var i = 0, len = ns.length; i < len; i++){
33462             n = ns[i];
33463             if(p == "above"){
33464                 t.parentNode.insertBefore(n, t);
33465             }else if(p == "below"){
33466                 t.parentNode.insertBefore(n, t.nextSibling);
33467             }else{
33468                 t.appendChild(n);
33469             }
33470         }
33471         n.ui.focus();
33472         if(this.tree.hlDrop){
33473             n.ui.highlight();
33474         }
33475         t.ui.endDrop();
33476         this.tree.fireEvent("nodedrop", de);
33477     },
33478     
33479     afterNodeMoved : function(dd, data, e, targetNode, dropNode){
33480         if(this.tree.hlDrop){
33481             dropNode.ui.focus();
33482             dropNode.ui.highlight();
33483         }
33484         this.tree.fireEvent("nodedrop", this.tree, targetNode, data, dd, e);
33485     },
33486     
33487     getTree : function(){
33488         return this.tree;
33489     },
33490     
33491     removeDropIndicators : function(n){
33492         if(n && n.ddel){
33493             var el = n.ddel;
33494             Roo.fly(el).removeClass([
33495                     "x-tree-drag-insert-above",
33496                     "x-tree-drag-insert-below",
33497                     "x-tree-drag-append"]);
33498             this.lastInsertClass = "_noclass";
33499         }
33500     },
33501     
33502     beforeDragDrop : function(target, e, id){
33503         this.cancelExpand();
33504         return true;
33505     },
33506     
33507     afterRepair : function(data){
33508         if(data && Roo.enableFx){
33509             data.node.ui.highlight();
33510         }
33511         this.hideProxy();
33512     }    
33513 });
33514
33515 }
33516 /*
33517  * Based on:
33518  * Ext JS Library 1.1.1
33519  * Copyright(c) 2006-2007, Ext JS, LLC.
33520  *
33521  * Originally Released Under LGPL - original licence link has changed is not relivant.
33522  *
33523  * Fork - LGPL
33524  * <script type="text/javascript">
33525  */
33526  
33527
33528 if(Roo.dd.DragZone){
33529 Roo.tree.TreeDragZone = function(tree, config){
33530     Roo.tree.TreeDragZone.superclass.constructor.call(this, tree.getTreeEl(), config);
33531     this.tree = tree;
33532 };
33533
33534 Roo.extend(Roo.tree.TreeDragZone, Roo.dd.DragZone, {
33535     ddGroup : "TreeDD",
33536     
33537     onBeforeDrag : function(data, e){
33538         var n = data.node;
33539         return n && n.draggable && !n.disabled;
33540     },
33541     
33542     onInitDrag : function(e){
33543         var data = this.dragData;
33544         this.tree.getSelectionModel().select(data.node);
33545         this.proxy.update("");
33546         data.node.ui.appendDDGhost(this.proxy.ghost.dom);
33547         this.tree.fireEvent("startdrag", this.tree, data.node, e);
33548     },
33549     
33550     getRepairXY : function(e, data){
33551         return data.node.ui.getDDRepairXY();
33552     },
33553     
33554     onEndDrag : function(data, e){
33555         this.tree.fireEvent("enddrag", this.tree, data.node, e);
33556     },
33557     
33558     onValidDrop : function(dd, e, id){
33559         this.tree.fireEvent("dragdrop", this.tree, this.dragData.node, dd, e);
33560         this.hideProxy();
33561     },
33562     
33563     beforeInvalidDrop : function(e, id){
33564         // this scrolls the original position back into view
33565         var sm = this.tree.getSelectionModel();
33566         sm.clearSelections();
33567         sm.select(this.dragData.node);
33568     }
33569 });
33570 }/*
33571  * Based on:
33572  * Ext JS Library 1.1.1
33573  * Copyright(c) 2006-2007, Ext JS, LLC.
33574  *
33575  * Originally Released Under LGPL - original licence link has changed is not relivant.
33576  *
33577  * Fork - LGPL
33578  * <script type="text/javascript">
33579  */
33580 /**
33581  * @class Roo.tree.TreeEditor
33582  * @extends Roo.Editor
33583  * Provides editor functionality for inline tree node editing.  Any valid {@link Roo.form.Field} can be used
33584  * as the editor field.
33585  * @constructor
33586  * @param {Object} config (used to be the tree panel.)
33587  * @param {Object} oldconfig DEPRECIATED Either a prebuilt {@link Roo.form.Field} instance or a Field config object
33588  * @cfg {Roo.tree.TreePanel} tree The tree to bind to.
33589  
33590  * 
33591  */
33592 Roo.tree.TreeEditor = function(config, oldconfig) { // was -- (tree, config){
33593     var tree = config;
33594     if (oldconfig) {
33595         config = oldconfig;
33596     } else {
33597         tree = config.tree;
33598     }
33599     config = config || {};
33600     var field = config.events ? config : new Roo.form.TextField(config);
33601     
33602     this.addEvents({
33603         /**
33604          * @event beforenodeedit
33605          * Fires when editing is initiated, but before the value changes.  Editing can be canceled by returning
33606          * false from the handler of this event.
33607          * @param {Editor} this
33608          * @param {Roo.tree.Node} node 
33609          */
33610         "beforenodeedit" : true
33611     });
33612     
33613     
33614     Roo.tree.TreeEditor.superclass.constructor.call(this, field);
33615
33616     this.tree = tree;
33617
33618     tree.on('beforeclick', this.beforeNodeClick, this);
33619     tree.getTreeEl().on('mousedown', this.hide, this);
33620     this.on('complete', this.updateNode, this);
33621     this.on('beforestartedit', this.fitToTree, this);
33622     this.on('startedit', this.bindScroll, this, {delay:10});
33623     this.on('specialkey', this.onSpecialKey, this);
33624 };
33625
33626 Roo.extend(Roo.tree.TreeEditor, Roo.Editor, {
33627     /**
33628      * @cfg {String} alignment
33629      * The position to align to (see {@link Roo.Element#alignTo} for more details, defaults to "l-l").
33630      */
33631     alignment: "l-l",
33632     // inherit
33633     autoSize: false,
33634     /**
33635      * @cfg {Boolean} hideEl
33636      * True to hide the bound element while the editor is displayed (defaults to false)
33637      */
33638     hideEl : false,
33639     /**
33640      * @cfg {String} cls
33641      * CSS class to apply to the editor (defaults to "x-small-editor x-tree-editor")
33642      */
33643     cls: "x-small-editor x-tree-editor",
33644     /**
33645      * @cfg {Boolean} shim
33646      * True to shim the editor if selects/iframes could be displayed beneath it (defaults to false)
33647      */
33648     shim:false,
33649     // inherit
33650     shadow:"frame",
33651     /**
33652      * @cfg {Number} maxWidth
33653      * The maximum width in pixels of the editor field (defaults to 250).  Note that if the maxWidth would exceed
33654      * the containing tree element's size, it will be automatically limited for you to the container width, taking
33655      * scroll and client offsets into account prior to each edit.
33656      */
33657     maxWidth: 250,
33658
33659     editDelay : 350,
33660
33661     // private
33662     fitToTree : function(ed, el){
33663         var td = this.tree.getTreeEl().dom, nd = el.dom;
33664         if(td.scrollLeft >  nd.offsetLeft){ // ensure the node left point is visible
33665             td.scrollLeft = nd.offsetLeft;
33666         }
33667         var w = Math.min(
33668                 this.maxWidth,
33669                 (td.clientWidth > 20 ? td.clientWidth : td.offsetWidth) - Math.max(0, nd.offsetLeft-td.scrollLeft) - /*cushion*/5);
33670         this.setSize(w, '');
33671         
33672         return this.fireEvent('beforenodedit', this, this.editNode);
33673         
33674     },
33675
33676     // private
33677     triggerEdit : function(node){
33678         this.completeEdit();
33679         this.editNode = node;
33680         this.startEdit(node.ui.textNode, node.text);
33681     },
33682
33683     // private
33684     bindScroll : function(){
33685         this.tree.getTreeEl().on('scroll', this.cancelEdit, this);
33686     },
33687
33688     // private
33689     beforeNodeClick : function(node, e){
33690         var sinceLast = (this.lastClick ? this.lastClick.getElapsed() : 0);
33691         this.lastClick = new Date();
33692         if(sinceLast > this.editDelay && this.tree.getSelectionModel().isSelected(node)){
33693             e.stopEvent();
33694             this.triggerEdit(node);
33695             return false;
33696         }
33697     },
33698
33699     // private
33700     updateNode : function(ed, value){
33701         this.tree.getTreeEl().un('scroll', this.cancelEdit, this);
33702         this.editNode.setText(value);
33703     },
33704
33705     // private
33706     onHide : function(){
33707         Roo.tree.TreeEditor.superclass.onHide.call(this);
33708         if(this.editNode){
33709             this.editNode.ui.focus();
33710         }
33711     },
33712
33713     // private
33714     onSpecialKey : function(field, e){
33715         var k = e.getKey();
33716         if(k == e.ESC){
33717             e.stopEvent();
33718             this.cancelEdit();
33719         }else if(k == e.ENTER && !e.hasModifier()){
33720             e.stopEvent();
33721             this.completeEdit();
33722         }
33723     }
33724 });//<Script type="text/javascript">
33725 /*
33726  * Based on:
33727  * Ext JS Library 1.1.1
33728  * Copyright(c) 2006-2007, Ext JS, LLC.
33729  *
33730  * Originally Released Under LGPL - original licence link has changed is not relivant.
33731  *
33732  * Fork - LGPL
33733  * <script type="text/javascript">
33734  */
33735  
33736 /**
33737  * Not documented??? - probably should be...
33738  */
33739
33740 Roo.tree.ColumnNodeUI = Roo.extend(Roo.tree.TreeNodeUI, {
33741     //focus: Roo.emptyFn, // prevent odd scrolling behavior
33742     
33743     renderElements : function(n, a, targetNode, bulkRender){
33744         //consel.log("renderElements?");
33745         this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
33746
33747         var t = n.getOwnerTree();
33748         var tid = Pman.Tab.Document_TypesTree.tree.el.id;
33749         
33750         var cols = t.columns;
33751         var bw = t.borderWidth;
33752         var c = cols[0];
33753         var href = a.href ? a.href : Roo.isGecko ? "" : "#";
33754          var cb = typeof a.checked == "boolean";
33755         var tx = String.format('{0}',n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]));
33756         var colcls = 'x-t-' + tid + '-c0';
33757         var buf = [
33758             '<li class="x-tree-node">',
33759             
33760                 
33761                 '<div class="x-tree-node-el ', a.cls,'">',
33762                     // extran...
33763                     '<div class="x-tree-col ', colcls, '" style="width:', c.width-bw, 'px;">',
33764                 
33765                 
33766                         '<span class="x-tree-node-indent">',this.indentMarkup,'</span>',
33767                         '<img src="', this.emptyIcon, '" class="x-tree-ec-icon  " />',
33768                         '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',
33769                            (a.icon ? ' x-tree-node-inline-icon' : ''),
33770                            (a.iconCls ? ' '+a.iconCls : ''),
33771                            '" unselectable="on" />',
33772                         (cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + 
33773                              (a.checked ? 'checked="checked" />' : ' />')) : ''),
33774                              
33775                         '<a class="x-tree-node-anchor" hidefocus="on" href="',href,'" tabIndex="1" ',
33776                             (a.hrefTarget ? ' target="' +a.hrefTarget + '"' : ''), '>',
33777                             '<span unselectable="on" qtip="' + tx + '">',
33778                              tx,
33779                              '</span></a>' ,
33780                     '</div>',
33781                      '<a class="x-tree-node-anchor" hidefocus="on" href="',href,'" tabIndex="1" ',
33782                             (a.hrefTarget ? ' target="' +a.hrefTarget + '"' : ''), '>'
33783                  ];
33784         for(var i = 1, len = cols.length; i < len; i++){
33785             c = cols[i];
33786             colcls = 'x-t-' + tid + '-c' +i;
33787             tx = String.format('{0}', (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]));
33788             buf.push('<div class="x-tree-col ', colcls, ' ' ,(c.cls?c.cls:''),'" style="width:',c.width-bw,'px;">',
33789                         '<div class="x-tree-col-text" qtip="' + tx +'">',tx,"</div>",
33790                       "</div>");
33791          }
33792          
33793          buf.push(
33794             '</a>',
33795             '<div class="x-clear"></div></div>',
33796             '<ul class="x-tree-node-ct" style="display:none;"></ul>',
33797             "</li>");
33798         
33799         if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
33800             this.wrap = Roo.DomHelper.insertHtml("beforeBegin",
33801                                 n.nextSibling.ui.getEl(), buf.join(""));
33802         }else{
33803             this.wrap = Roo.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
33804         }
33805         var el = this.wrap.firstChild;
33806         this.elRow = el;
33807         this.elNode = el.firstChild;
33808         this.ranchor = el.childNodes[1];
33809         this.ctNode = this.wrap.childNodes[1];
33810         var cs = el.firstChild.childNodes;
33811         this.indentNode = cs[0];
33812         this.ecNode = cs[1];
33813         this.iconNode = cs[2];
33814         var index = 3;
33815         if(cb){
33816             this.checkbox = cs[3];
33817             index++;
33818         }
33819         this.anchor = cs[index];
33820         
33821         this.textNode = cs[index].firstChild;
33822         
33823         //el.on("click", this.onClick, this);
33824         //el.on("dblclick", this.onDblClick, this);
33825         
33826         
33827        // console.log(this);
33828     },
33829     initEvents : function(){
33830         Roo.tree.ColumnNodeUI.superclass.initEvents.call(this);
33831         
33832             
33833         var a = this.ranchor;
33834
33835         var el = Roo.get(a);
33836
33837         if(Roo.isOpera){ // opera render bug ignores the CSS
33838             el.setStyle("text-decoration", "none");
33839         }
33840
33841         el.on("click", this.onClick, this);
33842         el.on("dblclick", this.onDblClick, this);
33843         el.on("contextmenu", this.onContextMenu, this);
33844         
33845     },
33846     
33847     /*onSelectedChange : function(state){
33848         if(state){
33849             this.focus();
33850             this.addClass("x-tree-selected");
33851         }else{
33852             //this.blur();
33853             this.removeClass("x-tree-selected");
33854         }
33855     },*/
33856     addClass : function(cls){
33857         if(this.elRow){
33858             Roo.fly(this.elRow).addClass(cls);
33859         }
33860         
33861     },
33862     
33863     
33864     removeClass : function(cls){
33865         if(this.elRow){
33866             Roo.fly(this.elRow).removeClass(cls);
33867         }
33868     }
33869
33870     
33871     
33872 });//<Script type="text/javascript">
33873
33874 /*
33875  * Based on:
33876  * Ext JS Library 1.1.1
33877  * Copyright(c) 2006-2007, Ext JS, LLC.
33878  *
33879  * Originally Released Under LGPL - original licence link has changed is not relivant.
33880  *
33881  * Fork - LGPL
33882  * <script type="text/javascript">
33883  */
33884  
33885
33886 /**
33887  * @class Roo.tree.ColumnTree
33888  * @extends Roo.data.TreePanel
33889  * @cfg {Object} columns  Including width, header, renderer, cls, dataIndex 
33890  * @cfg {int} borderWidth  compined right/left border allowance
33891  * @constructor
33892  * @param {String/HTMLElement/Element} el The container element
33893  * @param {Object} config
33894  */
33895 Roo.tree.ColumnTree =  function(el, config)
33896 {
33897    Roo.tree.ColumnTree.superclass.constructor.call(this, el , config);
33898    this.addEvents({
33899         /**
33900         * @event resize
33901         * Fire this event on a container when it resizes
33902         * @param {int} w Width
33903         * @param {int} h Height
33904         */
33905        "resize" : true
33906     });
33907     this.on('resize', this.onResize, this);
33908 };
33909
33910 Roo.extend(Roo.tree.ColumnTree, Roo.tree.TreePanel, {
33911     //lines:false,
33912     
33913     
33914     borderWidth: Roo.isBorderBox ? 0 : 2, 
33915     headEls : false,
33916     
33917     render : function(){
33918         // add the header.....
33919        
33920         Roo.tree.ColumnTree.superclass.render.apply(this);
33921         
33922         this.el.addClass('x-column-tree');
33923         
33924         this.headers = this.el.createChild(
33925             {cls:'x-tree-headers'},this.innerCt.dom);
33926    
33927         var cols = this.columns, c;
33928         var totalWidth = 0;
33929         this.headEls = [];
33930         var  len = cols.length;
33931         for(var i = 0; i < len; i++){
33932              c = cols[i];
33933              totalWidth += c.width;
33934             this.headEls.push(this.headers.createChild({
33935                  cls:'x-tree-hd ' + (c.cls?c.cls+'-hd':''),
33936                  cn: {
33937                      cls:'x-tree-hd-text',
33938                      html: c.header
33939                  },
33940                  style:'width:'+(c.width-this.borderWidth)+'px;'
33941              }));
33942         }
33943         this.headers.createChild({cls:'x-clear'});
33944         // prevent floats from wrapping when clipped
33945         this.headers.setWidth(totalWidth);
33946         //this.innerCt.setWidth(totalWidth);
33947         this.innerCt.setStyle({ overflow: 'auto' });
33948         this.onResize(this.width, this.height);
33949              
33950         
33951     },
33952     onResize : function(w,h)
33953     {
33954         this.height = h;
33955         this.width = w;
33956         // resize cols..
33957         this.innerCt.setWidth(this.width);
33958         this.innerCt.setHeight(this.height-20);
33959         
33960         // headers...
33961         var cols = this.columns, c;
33962         var totalWidth = 0;
33963         var expEl = false;
33964         var len = cols.length;
33965         for(var i = 0; i < len; i++){
33966             c = cols[i];
33967             if (this.autoExpandColumn !== false && c.dataIndex == this.autoExpandColumn) {
33968                 // it's the expander..
33969                 expEl  = this.headEls[i];
33970                 continue;
33971             }
33972             totalWidth += c.width;
33973             
33974         }
33975         if (expEl) {
33976             expEl.setWidth(  ((w - totalWidth)-this.borderWidth - 20));
33977         }
33978         this.headers.setWidth(w-20);
33979
33980         
33981         
33982         
33983     }
33984 });
33985 /*
33986  * Based on:
33987  * Ext JS Library 1.1.1
33988  * Copyright(c) 2006-2007, Ext JS, LLC.
33989  *
33990  * Originally Released Under LGPL - original licence link has changed is not relivant.
33991  *
33992  * Fork - LGPL
33993  * <script type="text/javascript">
33994  */
33995  
33996 /**
33997  * @class Roo.menu.Menu
33998  * @extends Roo.util.Observable
33999  * A menu object.  This is the container to which you add all other menu items.  Menu can also serve a as a base class
34000  * when you want a specialzed menu based off of another component (like {@link Roo.menu.DateMenu} for example).
34001  * @constructor
34002  * Creates a new Menu
34003  * @param {Object} config Configuration options
34004  */
34005 Roo.menu.Menu = function(config){
34006     Roo.apply(this, config);
34007     this.id = this.id || Roo.id();
34008     this.addEvents({
34009         /**
34010          * @event beforeshow
34011          * Fires before this menu is displayed
34012          * @param {Roo.menu.Menu} this
34013          */
34014         beforeshow : true,
34015         /**
34016          * @event beforehide
34017          * Fires before this menu is hidden
34018          * @param {Roo.menu.Menu} this
34019          */
34020         beforehide : true,
34021         /**
34022          * @event show
34023          * Fires after this menu is displayed
34024          * @param {Roo.menu.Menu} this
34025          */
34026         show : true,
34027         /**
34028          * @event hide
34029          * Fires after this menu is hidden
34030          * @param {Roo.menu.Menu} this
34031          */
34032         hide : true,
34033         /**
34034          * @event click
34035          * Fires when this menu is clicked (or when the enter key is pressed while it is active)
34036          * @param {Roo.menu.Menu} this
34037          * @param {Roo.menu.Item} menuItem The menu item that was clicked
34038          * @param {Roo.EventObject} e
34039          */
34040         click : true,
34041         /**
34042          * @event mouseover
34043          * Fires when the mouse is hovering over this menu
34044          * @param {Roo.menu.Menu} this
34045          * @param {Roo.EventObject} e
34046          * @param {Roo.menu.Item} menuItem The menu item that was clicked
34047          */
34048         mouseover : true,
34049         /**
34050          * @event mouseout
34051          * Fires when the mouse exits this menu
34052          * @param {Roo.menu.Menu} this
34053          * @param {Roo.EventObject} e
34054          * @param {Roo.menu.Item} menuItem The menu item that was clicked
34055          */
34056         mouseout : true,
34057         /**
34058          * @event itemclick
34059          * Fires when a menu item contained in this menu is clicked
34060          * @param {Roo.menu.BaseItem} baseItem The BaseItem that was clicked
34061          * @param {Roo.EventObject} e
34062          */
34063         itemclick: true
34064     });
34065     if (this.registerMenu) {
34066         Roo.menu.MenuMgr.register(this);
34067     }
34068     
34069     var mis = this.items;
34070     this.items = new Roo.util.MixedCollection();
34071     if(mis){
34072         this.add.apply(this, mis);
34073     }
34074 };
34075
34076 Roo.extend(Roo.menu.Menu, Roo.util.Observable, {
34077     /**
34078      * @cfg {Number} minWidth The minimum width of the menu in pixels (defaults to 120)
34079      */
34080     minWidth : 120,
34081     /**
34082      * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop"
34083      * for bottom-right shadow (defaults to "sides")
34084      */
34085     shadow : "sides",
34086     /**
34087      * @cfg {String} subMenuAlign The {@link Roo.Element#alignTo} anchor position value to use for submenus of
34088      * this menu (defaults to "tl-tr?")
34089      */
34090     subMenuAlign : "tl-tr?",
34091     /**
34092      * @cfg {String} defaultAlign The default {@link Roo.Element#alignTo) anchor position value for this menu
34093      * relative to its element of origin (defaults to "tl-bl?")
34094      */
34095     defaultAlign : "tl-bl?",
34096     /**
34097      * @cfg {Boolean} allowOtherMenus True to allow multiple menus to be displayed at the same time (defaults to false)
34098      */
34099     allowOtherMenus : false,
34100     /**
34101      * @cfg {Boolean} registerMenu True (default) - means that clicking on screen etc. hides it.
34102      */
34103     registerMenu : true,
34104
34105     hidden:true,
34106
34107     // private
34108     render : function(){
34109         if(this.el){
34110             return;
34111         }
34112         var el = this.el = new Roo.Layer({
34113             cls: "x-menu",
34114             shadow:this.shadow,
34115             constrain: false,
34116             parentEl: this.parentEl || document.body,
34117             zindex:15000
34118         });
34119
34120         this.keyNav = new Roo.menu.MenuNav(this);
34121
34122         if(this.plain){
34123             el.addClass("x-menu-plain");
34124         }
34125         if(this.cls){
34126             el.addClass(this.cls);
34127         }
34128         // generic focus element
34129         this.focusEl = el.createChild({
34130             tag: "a", cls: "x-menu-focus", href: "#", onclick: "return false;", tabIndex:"-1"
34131         });
34132         var ul = el.createChild({tag: "ul", cls: "x-menu-list"});
34133         ul.on("click", this.onClick, this);
34134         ul.on("mouseover", this.onMouseOver, this);
34135         ul.on("mouseout", this.onMouseOut, this);
34136         this.items.each(function(item){
34137             var li = document.createElement("li");
34138             li.className = "x-menu-list-item";
34139             ul.dom.appendChild(li);
34140             item.render(li, this);
34141         }, this);
34142         this.ul = ul;
34143         this.autoWidth();
34144     },
34145
34146     // private
34147     autoWidth : function(){
34148         var el = this.el, ul = this.ul;
34149         if(!el){
34150             return;
34151         }
34152         var w = this.width;
34153         if(w){
34154             el.setWidth(w);
34155         }else if(Roo.isIE){
34156             el.setWidth(this.minWidth);
34157             var t = el.dom.offsetWidth; // force recalc
34158             el.setWidth(ul.getWidth()+el.getFrameWidth("lr"));
34159         }
34160     },
34161
34162     // private
34163     delayAutoWidth : function(){
34164         if(this.rendered){
34165             if(!this.awTask){
34166                 this.awTask = new Roo.util.DelayedTask(this.autoWidth, this);
34167             }
34168             this.awTask.delay(20);
34169         }
34170     },
34171
34172     // private
34173     findTargetItem : function(e){
34174         var t = e.getTarget(".x-menu-list-item", this.ul,  true);
34175         if(t && t.menuItemId){
34176             return this.items.get(t.menuItemId);
34177         }
34178     },
34179
34180     // private
34181     onClick : function(e){
34182         var t;
34183         if(t = this.findTargetItem(e)){
34184             t.onClick(e);
34185             this.fireEvent("click", this, t, e);
34186         }
34187     },
34188
34189     // private
34190     setActiveItem : function(item, autoExpand){
34191         if(item != this.activeItem){
34192             if(this.activeItem){
34193                 this.activeItem.deactivate();
34194             }
34195             this.activeItem = item;
34196             item.activate(autoExpand);
34197         }else if(autoExpand){
34198             item.expandMenu();
34199         }
34200     },
34201
34202     // private
34203     tryActivate : function(start, step){
34204         var items = this.items;
34205         for(var i = start, len = items.length; i >= 0 && i < len; i+= step){
34206             var item = items.get(i);
34207             if(!item.disabled && item.canActivate){
34208                 this.setActiveItem(item, false);
34209                 return item;
34210             }
34211         }
34212         return false;
34213     },
34214
34215     // private
34216     onMouseOver : function(e){
34217         var t;
34218         if(t = this.findTargetItem(e)){
34219             if(t.canActivate && !t.disabled){
34220                 this.setActiveItem(t, true);
34221             }
34222         }
34223         this.fireEvent("mouseover", this, e, t);
34224     },
34225
34226     // private
34227     onMouseOut : function(e){
34228         var t;
34229         if(t = this.findTargetItem(e)){
34230             if(t == this.activeItem && t.shouldDeactivate(e)){
34231                 this.activeItem.deactivate();
34232                 delete this.activeItem;
34233             }
34234         }
34235         this.fireEvent("mouseout", this, e, t);
34236     },
34237
34238     /**
34239      * Read-only.  Returns true if the menu is currently displayed, else false.
34240      * @type Boolean
34241      */
34242     isVisible : function(){
34243         return this.el && !this.hidden;
34244     },
34245
34246     /**
34247      * Displays this menu relative to another element
34248      * @param {String/HTMLElement/Roo.Element} element The element to align to
34249      * @param {String} position (optional) The {@link Roo.Element#alignTo} anchor position to use in aligning to
34250      * the element (defaults to this.defaultAlign)
34251      * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
34252      */
34253     show : function(el, pos, parentMenu){
34254         this.parentMenu = parentMenu;
34255         if(!this.el){
34256             this.render();
34257         }
34258         this.fireEvent("beforeshow", this);
34259         this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign), parentMenu, false);
34260     },
34261
34262     /**
34263      * Displays this menu at a specific xy position
34264      * @param {Array} xyPosition Contains X & Y [x, y] values for the position at which to show the menu (coordinates are page-based)
34265      * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
34266      */
34267     showAt : function(xy, parentMenu, /* private: */_e){
34268         this.parentMenu = parentMenu;
34269         if(!this.el){
34270             this.render();
34271         }
34272         if(_e !== false){
34273             this.fireEvent("beforeshow", this);
34274             xy = this.el.adjustForConstraints(xy);
34275         }
34276         this.el.setXY(xy);
34277         this.el.show();
34278         this.hidden = false;
34279         this.focus();
34280         this.fireEvent("show", this);
34281     },
34282
34283     focus : function(){
34284         if(!this.hidden){
34285             this.doFocus.defer(50, this);
34286         }
34287     },
34288
34289     doFocus : function(){
34290         if(!this.hidden){
34291             this.focusEl.focus();
34292         }
34293     },
34294
34295     /**
34296      * Hides this menu and optionally all parent menus
34297      * @param {Boolean} deep (optional) True to hide all parent menus recursively, if any (defaults to false)
34298      */
34299     hide : function(deep){
34300         if(this.el && this.isVisible()){
34301             this.fireEvent("beforehide", this);
34302             if(this.activeItem){
34303                 this.activeItem.deactivate();
34304                 this.activeItem = null;
34305             }
34306             this.el.hide();
34307             this.hidden = true;
34308             this.fireEvent("hide", this);
34309         }
34310         if(deep === true && this.parentMenu){
34311             this.parentMenu.hide(true);
34312         }
34313     },
34314
34315     /**
34316      * Addds one or more items of any type supported by the Menu class, or that can be converted into menu items.
34317      * Any of the following are valid:
34318      * <ul>
34319      * <li>Any menu item object based on {@link Roo.menu.Item}</li>
34320      * <li>An HTMLElement object which will be converted to a menu item</li>
34321      * <li>A menu item config object that will be created as a new menu item</li>
34322      * <li>A string, which can either be '-' or 'separator' to add a menu separator, otherwise
34323      * it will be converted into a {@link Roo.menu.TextItem} and added</li>
34324      * </ul>
34325      * Usage:
34326      * <pre><code>
34327 // Create the menu
34328 var menu = new Roo.menu.Menu();
34329
34330 // Create a menu item to add by reference
34331 var menuItem = new Roo.menu.Item({ text: 'New Item!' });
34332
34333 // Add a bunch of items at once using different methods.
34334 // Only the last item added will be returned.
34335 var item = menu.add(
34336     menuItem,                // add existing item by ref
34337     'Dynamic Item',          // new TextItem
34338     '-',                     // new separator
34339     { text: 'Config Item' }  // new item by config
34340 );
34341 </code></pre>
34342      * @param {Mixed} args One or more menu items, menu item configs or other objects that can be converted to menu items
34343      * @return {Roo.menu.Item} The menu item that was added, or the last one if multiple items were added
34344      */
34345     add : function(){
34346         var a = arguments, l = a.length, item;
34347         for(var i = 0; i < l; i++){
34348             var el = a[i];
34349             if ((typeof(el) == "object") && el.xtype && el.xns) {
34350                 el = Roo.factory(el, Roo.menu);
34351             }
34352             
34353             if(el.render){ // some kind of Item
34354                 item = this.addItem(el);
34355             }else if(typeof el == "string"){ // string
34356                 if(el == "separator" || el == "-"){
34357                     item = this.addSeparator();
34358                 }else{
34359                     item = this.addText(el);
34360                 }
34361             }else if(el.tagName || el.el){ // element
34362                 item = this.addElement(el);
34363             }else if(typeof el == "object"){ // must be menu item config?
34364                 item = this.addMenuItem(el);
34365             }
34366         }
34367         return item;
34368     },
34369
34370     /**
34371      * Returns this menu's underlying {@link Roo.Element} object
34372      * @return {Roo.Element} The element
34373      */
34374     getEl : function(){
34375         if(!this.el){
34376             this.render();
34377         }
34378         return this.el;
34379     },
34380
34381     /**
34382      * Adds a separator bar to the menu
34383      * @return {Roo.menu.Item} The menu item that was added
34384      */
34385     addSeparator : function(){
34386         return this.addItem(new Roo.menu.Separator());
34387     },
34388
34389     /**
34390      * Adds an {@link Roo.Element} object to the menu
34391      * @param {String/HTMLElement/Roo.Element} el The element or DOM node to add, or its id
34392      * @return {Roo.menu.Item} The menu item that was added
34393      */
34394     addElement : function(el){
34395         return this.addItem(new Roo.menu.BaseItem(el));
34396     },
34397
34398     /**
34399      * Adds an existing object based on {@link Roo.menu.Item} to the menu
34400      * @param {Roo.menu.Item} item The menu item to add
34401      * @return {Roo.menu.Item} The menu item that was added
34402      */
34403     addItem : function(item){
34404         this.items.add(item);
34405         if(this.ul){
34406             var li = document.createElement("li");
34407             li.className = "x-menu-list-item";
34408             this.ul.dom.appendChild(li);
34409             item.render(li, this);
34410             this.delayAutoWidth();
34411         }
34412         return item;
34413     },
34414
34415     /**
34416      * Creates a new {@link Roo.menu.Item} based an the supplied config object and adds it to the menu
34417      * @param {Object} config A MenuItem config object
34418      * @return {Roo.menu.Item} The menu item that was added
34419      */
34420     addMenuItem : function(config){
34421         if(!(config instanceof Roo.menu.Item)){
34422             if(typeof config.checked == "boolean"){ // must be check menu item config?
34423                 config = new Roo.menu.CheckItem(config);
34424             }else{
34425                 config = new Roo.menu.Item(config);
34426             }
34427         }
34428         return this.addItem(config);
34429     },
34430
34431     /**
34432      * Creates a new {@link Roo.menu.TextItem} with the supplied text and adds it to the menu
34433      * @param {String} text The text to display in the menu item
34434      * @return {Roo.menu.Item} The menu item that was added
34435      */
34436     addText : function(text){
34437         return this.addItem(new Roo.menu.TextItem({ text : text }));
34438     },
34439
34440     /**
34441      * Inserts an existing object based on {@link Roo.menu.Item} to the menu at a specified index
34442      * @param {Number} index The index in the menu's list of current items where the new item should be inserted
34443      * @param {Roo.menu.Item} item The menu item to add
34444      * @return {Roo.menu.Item} The menu item that was added
34445      */
34446     insert : function(index, item){
34447         this.items.insert(index, item);
34448         if(this.ul){
34449             var li = document.createElement("li");
34450             li.className = "x-menu-list-item";
34451             this.ul.dom.insertBefore(li, this.ul.dom.childNodes[index]);
34452             item.render(li, this);
34453             this.delayAutoWidth();
34454         }
34455         return item;
34456     },
34457
34458     /**
34459      * Removes an {@link Roo.menu.Item} from the menu and destroys the object
34460      * @param {Roo.menu.Item} item The menu item to remove
34461      */
34462     remove : function(item){
34463         this.items.removeKey(item.id);
34464         item.destroy();
34465     },
34466
34467     /**
34468      * Removes and destroys all items in the menu
34469      */
34470     removeAll : function(){
34471         var f;
34472         while(f = this.items.first()){
34473             this.remove(f);
34474         }
34475     }
34476 });
34477
34478 // MenuNav is a private utility class used internally by the Menu
34479 Roo.menu.MenuNav = function(menu){
34480     Roo.menu.MenuNav.superclass.constructor.call(this, menu.el);
34481     this.scope = this.menu = menu;
34482 };
34483
34484 Roo.extend(Roo.menu.MenuNav, Roo.KeyNav, {
34485     doRelay : function(e, h){
34486         var k = e.getKey();
34487         if(!this.menu.activeItem && e.isNavKeyPress() && k != e.SPACE && k != e.RETURN){
34488             this.menu.tryActivate(0, 1);
34489             return false;
34490         }
34491         return h.call(this.scope || this, e, this.menu);
34492     },
34493
34494     up : function(e, m){
34495         if(!m.tryActivate(m.items.indexOf(m.activeItem)-1, -1)){
34496             m.tryActivate(m.items.length-1, -1);
34497         }
34498     },
34499
34500     down : function(e, m){
34501         if(!m.tryActivate(m.items.indexOf(m.activeItem)+1, 1)){
34502             m.tryActivate(0, 1);
34503         }
34504     },
34505
34506     right : function(e, m){
34507         if(m.activeItem){
34508             m.activeItem.expandMenu(true);
34509         }
34510     },
34511
34512     left : function(e, m){
34513         m.hide();
34514         if(m.parentMenu && m.parentMenu.activeItem){
34515             m.parentMenu.activeItem.activate();
34516         }
34517     },
34518
34519     enter : function(e, m){
34520         if(m.activeItem){
34521             e.stopPropagation();
34522             m.activeItem.onClick(e);
34523             m.fireEvent("click", this, m.activeItem);
34524             return true;
34525         }
34526     }
34527 });/*
34528  * Based on:
34529  * Ext JS Library 1.1.1
34530  * Copyright(c) 2006-2007, Ext JS, LLC.
34531  *
34532  * Originally Released Under LGPL - original licence link has changed is not relivant.
34533  *
34534  * Fork - LGPL
34535  * <script type="text/javascript">
34536  */
34537  
34538 /**
34539  * @class Roo.menu.MenuMgr
34540  * Provides a common registry of all menu items on a page so that they can be easily accessed by id.
34541  * @singleton
34542  */
34543 Roo.menu.MenuMgr = function(){
34544    var menus, active, groups = {}, attached = false, lastShow = new Date();
34545
34546    // private - called when first menu is created
34547    function init(){
34548        menus = {};
34549        active = new Roo.util.MixedCollection();
34550        Roo.get(document).addKeyListener(27, function(){
34551            if(active.length > 0){
34552                hideAll();
34553            }
34554        });
34555    }
34556
34557    // private
34558    function hideAll(){
34559        if(active && active.length > 0){
34560            var c = active.clone();
34561            c.each(function(m){
34562                m.hide();
34563            });
34564        }
34565    }
34566
34567    // private
34568    function onHide(m){
34569        active.remove(m);
34570        if(active.length < 1){
34571            Roo.get(document).un("mousedown", onMouseDown);
34572            attached = false;
34573        }
34574    }
34575
34576    // private
34577    function onShow(m){
34578        var last = active.last();
34579        lastShow = new Date();
34580        active.add(m);
34581        if(!attached){
34582            Roo.get(document).on("mousedown", onMouseDown);
34583            attached = true;
34584        }
34585        if(m.parentMenu){
34586           m.getEl().setZIndex(parseInt(m.parentMenu.getEl().getStyle("z-index"), 10) + 3);
34587           m.parentMenu.activeChild = m;
34588        }else if(last && last.isVisible()){
34589           m.getEl().setZIndex(parseInt(last.getEl().getStyle("z-index"), 10) + 3);
34590        }
34591    }
34592
34593    // private
34594    function onBeforeHide(m){
34595        if(m.activeChild){
34596            m.activeChild.hide();
34597        }
34598        if(m.autoHideTimer){
34599            clearTimeout(m.autoHideTimer);
34600            delete m.autoHideTimer;
34601        }
34602    }
34603
34604    // private
34605    function onBeforeShow(m){
34606        var pm = m.parentMenu;
34607        if(!pm && !m.allowOtherMenus){
34608            hideAll();
34609        }else if(pm && pm.activeChild && active != m){
34610            pm.activeChild.hide();
34611        }
34612    }
34613
34614    // private
34615    function onMouseDown(e){
34616        if(lastShow.getElapsed() > 50 && active.length > 0 && !e.getTarget(".x-menu")){
34617            hideAll();
34618        }
34619    }
34620
34621    // private
34622    function onBeforeCheck(mi, state){
34623        if(state){
34624            var g = groups[mi.group];
34625            for(var i = 0, l = g.length; i < l; i++){
34626                if(g[i] != mi){
34627                    g[i].setChecked(false);
34628                }
34629            }
34630        }
34631    }
34632
34633    return {
34634
34635        /**
34636         * Hides all menus that are currently visible
34637         */
34638        hideAll : function(){
34639             hideAll();  
34640        },
34641
34642        // private
34643        register : function(menu){
34644            if(!menus){
34645                init();
34646            }
34647            menus[menu.id] = menu;
34648            menu.on("beforehide", onBeforeHide);
34649            menu.on("hide", onHide);
34650            menu.on("beforeshow", onBeforeShow);
34651            menu.on("show", onShow);
34652            var g = menu.group;
34653            if(g && menu.events["checkchange"]){
34654                if(!groups[g]){
34655                    groups[g] = [];
34656                }
34657                groups[g].push(menu);
34658                menu.on("checkchange", onCheck);
34659            }
34660        },
34661
34662         /**
34663          * Returns a {@link Roo.menu.Menu} object
34664          * @param {String/Object} menu The string menu id, an existing menu object reference, or a Menu config that will
34665          * be used to generate and return a new Menu instance.
34666          */
34667        get : function(menu){
34668            if(typeof menu == "string"){ // menu id
34669                return menus[menu];
34670            }else if(menu.events){  // menu instance
34671                return menu;
34672            }else if(typeof menu.length == 'number'){ // array of menu items?
34673                return new Roo.menu.Menu({items:menu});
34674            }else{ // otherwise, must be a config
34675                return new Roo.menu.Menu(menu);
34676            }
34677        },
34678
34679        // private
34680        unregister : function(menu){
34681            delete menus[menu.id];
34682            menu.un("beforehide", onBeforeHide);
34683            menu.un("hide", onHide);
34684            menu.un("beforeshow", onBeforeShow);
34685            menu.un("show", onShow);
34686            var g = menu.group;
34687            if(g && menu.events["checkchange"]){
34688                groups[g].remove(menu);
34689                menu.un("checkchange", onCheck);
34690            }
34691        },
34692
34693        // private
34694        registerCheckable : function(menuItem){
34695            var g = menuItem.group;
34696            if(g){
34697                if(!groups[g]){
34698                    groups[g] = [];
34699                }
34700                groups[g].push(menuItem);
34701                menuItem.on("beforecheckchange", onBeforeCheck);
34702            }
34703        },
34704
34705        // private
34706        unregisterCheckable : function(menuItem){
34707            var g = menuItem.group;
34708            if(g){
34709                groups[g].remove(menuItem);
34710                menuItem.un("beforecheckchange", onBeforeCheck);
34711            }
34712        }
34713    };
34714 }();/*
34715  * Based on:
34716  * Ext JS Library 1.1.1
34717  * Copyright(c) 2006-2007, Ext JS, LLC.
34718  *
34719  * Originally Released Under LGPL - original licence link has changed is not relivant.
34720  *
34721  * Fork - LGPL
34722  * <script type="text/javascript">
34723  */
34724  
34725
34726 /**
34727  * @class Roo.menu.BaseItem
34728  * @extends Roo.Component
34729  * The base class for all items that render into menus.  BaseItem provides default rendering, activated state
34730  * management and base configuration options shared by all menu components.
34731  * @constructor
34732  * Creates a new BaseItem
34733  * @param {Object} config Configuration options
34734  */
34735 Roo.menu.BaseItem = function(config){
34736     Roo.menu.BaseItem.superclass.constructor.call(this, config);
34737
34738     this.addEvents({
34739         /**
34740          * @event click
34741          * Fires when this item is clicked
34742          * @param {Roo.menu.BaseItem} this
34743          * @param {Roo.EventObject} e
34744          */
34745         click: true,
34746         /**
34747          * @event activate
34748          * Fires when this item is activated
34749          * @param {Roo.menu.BaseItem} this
34750          */
34751         activate : true,
34752         /**
34753          * @event deactivate
34754          * Fires when this item is deactivated
34755          * @param {Roo.menu.BaseItem} this
34756          */
34757         deactivate : true
34758     });
34759
34760     if(this.handler){
34761         this.on("click", this.handler, this.scope, true);
34762     }
34763 };
34764
34765 Roo.extend(Roo.menu.BaseItem, Roo.Component, {
34766     /**
34767      * @cfg {Function} handler
34768      * A function that will handle the click event of this menu item (defaults to undefined)
34769      */
34770     /**
34771      * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to false)
34772      */
34773     canActivate : false,
34774     /**
34775      * @cfg {String} activeClass The CSS class to use when the item becomes activated (defaults to "x-menu-item-active")
34776      */
34777     activeClass : "x-menu-item-active",
34778     /**
34779      * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to true)
34780      */
34781     hideOnClick : true,
34782     /**
34783      * @cfg {Number} hideDelay Length of time in milliseconds to wait before hiding after a click (defaults to 100)
34784      */
34785     hideDelay : 100,
34786
34787     // private
34788     ctype: "Roo.menu.BaseItem",
34789
34790     // private
34791     actionMode : "container",
34792
34793     // private
34794     render : function(container, parentMenu){
34795         this.parentMenu = parentMenu;
34796         Roo.menu.BaseItem.superclass.render.call(this, container);
34797         this.container.menuItemId = this.id;
34798     },
34799
34800     // private
34801     onRender : function(container, position){
34802         this.el = Roo.get(this.el);
34803         container.dom.appendChild(this.el.dom);
34804     },
34805
34806     // private
34807     onClick : function(e){
34808         if(!this.disabled && this.fireEvent("click", this, e) !== false
34809                 && this.parentMenu.fireEvent("itemclick", this, e) !== false){
34810             this.handleClick(e);
34811         }else{
34812             e.stopEvent();
34813         }
34814     },
34815
34816     // private
34817     activate : function(){
34818         if(this.disabled){
34819             return false;
34820         }
34821         var li = this.container;
34822         li.addClass(this.activeClass);
34823         this.region = li.getRegion().adjust(2, 2, -2, -2);
34824         this.fireEvent("activate", this);
34825         return true;
34826     },
34827
34828     // private
34829     deactivate : function(){
34830         this.container.removeClass(this.activeClass);
34831         this.fireEvent("deactivate", this);
34832     },
34833
34834     // private
34835     shouldDeactivate : function(e){
34836         return !this.region || !this.region.contains(e.getPoint());
34837     },
34838
34839     // private
34840     handleClick : function(e){
34841         if(this.hideOnClick){
34842             this.parentMenu.hide.defer(this.hideDelay, this.parentMenu, [true]);
34843         }
34844     },
34845
34846     // private
34847     expandMenu : function(autoActivate){
34848         // do nothing
34849     },
34850
34851     // private
34852     hideMenu : function(){
34853         // do nothing
34854     }
34855 });/*
34856  * Based on:
34857  * Ext JS Library 1.1.1
34858  * Copyright(c) 2006-2007, Ext JS, LLC.
34859  *
34860  * Originally Released Under LGPL - original licence link has changed is not relivant.
34861  *
34862  * Fork - LGPL
34863  * <script type="text/javascript">
34864  */
34865  
34866 /**
34867  * @class Roo.menu.Adapter
34868  * @extends Roo.menu.BaseItem
34869  * 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.
34870  * It provides basic rendering, activation management and enable/disable logic required to work in menus.
34871  * @constructor
34872  * Creates a new Adapter
34873  * @param {Object} config Configuration options
34874  */
34875 Roo.menu.Adapter = function(component, config){
34876     Roo.menu.Adapter.superclass.constructor.call(this, config);
34877     this.component = component;
34878 };
34879 Roo.extend(Roo.menu.Adapter, Roo.menu.BaseItem, {
34880     // private
34881     canActivate : true,
34882
34883     // private
34884     onRender : function(container, position){
34885         this.component.render(container);
34886         this.el = this.component.getEl();
34887     },
34888
34889     // private
34890     activate : function(){
34891         if(this.disabled){
34892             return false;
34893         }
34894         this.component.focus();
34895         this.fireEvent("activate", this);
34896         return true;
34897     },
34898
34899     // private
34900     deactivate : function(){
34901         this.fireEvent("deactivate", this);
34902     },
34903
34904     // private
34905     disable : function(){
34906         this.component.disable();
34907         Roo.menu.Adapter.superclass.disable.call(this);
34908     },
34909
34910     // private
34911     enable : function(){
34912         this.component.enable();
34913         Roo.menu.Adapter.superclass.enable.call(this);
34914     }
34915 });/*
34916  * Based on:
34917  * Ext JS Library 1.1.1
34918  * Copyright(c) 2006-2007, Ext JS, LLC.
34919  *
34920  * Originally Released Under LGPL - original licence link has changed is not relivant.
34921  *
34922  * Fork - LGPL
34923  * <script type="text/javascript">
34924  */
34925
34926 /**
34927  * @class Roo.menu.TextItem
34928  * @extends Roo.menu.BaseItem
34929  * Adds a static text string to a menu, usually used as either a heading or group separator.
34930  * Note: old style constructor with text is still supported.
34931  * 
34932  * @constructor
34933  * Creates a new TextItem
34934  * @param {Object} cfg Configuration
34935  */
34936 Roo.menu.TextItem = function(cfg){
34937     if (typeof(cfg) == 'string') {
34938         this.text = cfg;
34939     } else {
34940         Roo.apply(this,cfg);
34941     }
34942     
34943     Roo.menu.TextItem.superclass.constructor.call(this);
34944 };
34945
34946 Roo.extend(Roo.menu.TextItem, Roo.menu.BaseItem, {
34947     /**
34948      * @cfg {Boolean} text Text to show on item.
34949      */
34950     text : '',
34951     
34952     /**
34953      * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to false)
34954      */
34955     hideOnClick : false,
34956     /**
34957      * @cfg {String} itemCls The default CSS class to use for text items (defaults to "x-menu-text")
34958      */
34959     itemCls : "x-menu-text",
34960
34961     // private
34962     onRender : function(){
34963         var s = document.createElement("span");
34964         s.className = this.itemCls;
34965         s.innerHTML = this.text;
34966         this.el = s;
34967         Roo.menu.TextItem.superclass.onRender.apply(this, arguments);
34968     }
34969 });/*
34970  * Based on:
34971  * Ext JS Library 1.1.1
34972  * Copyright(c) 2006-2007, Ext JS, LLC.
34973  *
34974  * Originally Released Under LGPL - original licence link has changed is not relivant.
34975  *
34976  * Fork - LGPL
34977  * <script type="text/javascript">
34978  */
34979
34980 /**
34981  * @class Roo.menu.Separator
34982  * @extends Roo.menu.BaseItem
34983  * Adds a separator bar to a menu, used to divide logical groups of menu items. Generally you will
34984  * add one of these by using "-" in you call to add() or in your items config rather than creating one directly.
34985  * @constructor
34986  * @param {Object} config Configuration options
34987  */
34988 Roo.menu.Separator = function(config){
34989     Roo.menu.Separator.superclass.constructor.call(this, config);
34990 };
34991
34992 Roo.extend(Roo.menu.Separator, Roo.menu.BaseItem, {
34993     /**
34994      * @cfg {String} itemCls The default CSS class to use for separators (defaults to "x-menu-sep")
34995      */
34996     itemCls : "x-menu-sep",
34997     /**
34998      * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to false)
34999      */
35000     hideOnClick : false,
35001
35002     // private
35003     onRender : function(li){
35004         var s = document.createElement("span");
35005         s.className = this.itemCls;
35006         s.innerHTML = "&#160;";
35007         this.el = s;
35008         li.addClass("x-menu-sep-li");
35009         Roo.menu.Separator.superclass.onRender.apply(this, arguments);
35010     }
35011 });/*
35012  * Based on:
35013  * Ext JS Library 1.1.1
35014  * Copyright(c) 2006-2007, Ext JS, LLC.
35015  *
35016  * Originally Released Under LGPL - original licence link has changed is not relivant.
35017  *
35018  * Fork - LGPL
35019  * <script type="text/javascript">
35020  */
35021 /**
35022  * @class Roo.menu.Item
35023  * @extends Roo.menu.BaseItem
35024  * A base class for all menu items that require menu-related functionality (like sub-menus) and are not static
35025  * display items.  Item extends the base functionality of {@link Roo.menu.BaseItem} by adding menu-specific
35026  * activation and click handling.
35027  * @constructor
35028  * Creates a new Item
35029  * @param {Object} config Configuration options
35030  */
35031 Roo.menu.Item = function(config){
35032     Roo.menu.Item.superclass.constructor.call(this, config);
35033     if(this.menu){
35034         this.menu = Roo.menu.MenuMgr.get(this.menu);
35035     }
35036 };
35037 Roo.extend(Roo.menu.Item, Roo.menu.BaseItem, {
35038     
35039     /**
35040      * @cfg {String} text
35041      * The text to show on the menu item.
35042      */
35043     text: '',
35044      /**
35045      * @cfg {String} HTML to render in menu
35046      * The text to show on the menu item (HTML version).
35047      */
35048     html: '',
35049     /**
35050      * @cfg {String} icon
35051      * The path to an icon to display in this menu item (defaults to Roo.BLANK_IMAGE_URL)
35052      */
35053     icon: undefined,
35054     /**
35055      * @cfg {String} itemCls The default CSS class to use for menu items (defaults to "x-menu-item")
35056      */
35057     itemCls : "x-menu-item",
35058     /**
35059      * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to true)
35060      */
35061     canActivate : true,
35062     /**
35063      * @cfg {Number} showDelay Length of time in milliseconds to wait before showing this item (defaults to 200)
35064      */
35065     showDelay: 200,
35066     // doc'd in BaseItem
35067     hideDelay: 200,
35068
35069     // private
35070     ctype: "Roo.menu.Item",
35071     
35072     // private
35073     onRender : function(container, position){
35074         var el = document.createElement("a");
35075         el.hideFocus = true;
35076         el.unselectable = "on";
35077         el.href = this.href || "#";
35078         if(this.hrefTarget){
35079             el.target = this.hrefTarget;
35080         }
35081         el.className = this.itemCls + (this.menu ?  " x-menu-item-arrow" : "") + (this.cls ?  " " + this.cls : "");
35082         
35083         var html = this.html.length ? this.html  : String.format('{0}',this.text);
35084         
35085         el.innerHTML = String.format(
35086                 '<img src="{0}" class="x-menu-item-icon {1}" />' + html,
35087                 this.icon || Roo.BLANK_IMAGE_URL, this.iconCls || '');
35088         this.el = el;
35089         Roo.menu.Item.superclass.onRender.call(this, container, position);
35090     },
35091
35092     /**
35093      * Sets the text to display in this menu item
35094      * @param {String} text The text to display
35095      * @param {Boolean} isHTML true to indicate text is pure html.
35096      */
35097     setText : function(text, isHTML){
35098         if (isHTML) {
35099             this.html = text;
35100         } else {
35101             this.text = text;
35102             this.html = '';
35103         }
35104         if(this.rendered){
35105             var html = this.html.length ? this.html  : String.format('{0}',this.text);
35106      
35107             this.el.update(String.format(
35108                 '<img src="{0}" class="x-menu-item-icon {2}">' + html,
35109                 this.icon || Roo.BLANK_IMAGE_URL, this.text, this.iconCls || ''));
35110             this.parentMenu.autoWidth();
35111         }
35112     },
35113
35114     // private
35115     handleClick : function(e){
35116         if(!this.href){ // if no link defined, stop the event automatically
35117             e.stopEvent();
35118         }
35119         Roo.menu.Item.superclass.handleClick.apply(this, arguments);
35120     },
35121
35122     // private
35123     activate : function(autoExpand){
35124         if(Roo.menu.Item.superclass.activate.apply(this, arguments)){
35125             this.focus();
35126             if(autoExpand){
35127                 this.expandMenu();
35128             }
35129         }
35130         return true;
35131     },
35132
35133     // private
35134     shouldDeactivate : function(e){
35135         if(Roo.menu.Item.superclass.shouldDeactivate.call(this, e)){
35136             if(this.menu && this.menu.isVisible()){
35137                 return !this.menu.getEl().getRegion().contains(e.getPoint());
35138             }
35139             return true;
35140         }
35141         return false;
35142     },
35143
35144     // private
35145     deactivate : function(){
35146         Roo.menu.Item.superclass.deactivate.apply(this, arguments);
35147         this.hideMenu();
35148     },
35149
35150     // private
35151     expandMenu : function(autoActivate){
35152         if(!this.disabled && this.menu){
35153             clearTimeout(this.hideTimer);
35154             delete this.hideTimer;
35155             if(!this.menu.isVisible() && !this.showTimer){
35156                 this.showTimer = this.deferExpand.defer(this.showDelay, this, [autoActivate]);
35157             }else if (this.menu.isVisible() && autoActivate){
35158                 this.menu.tryActivate(0, 1);
35159             }
35160         }
35161     },
35162
35163     // private
35164     deferExpand : function(autoActivate){
35165         delete this.showTimer;
35166         this.menu.show(this.container, this.parentMenu.subMenuAlign || "tl-tr?", this.parentMenu);
35167         if(autoActivate){
35168             this.menu.tryActivate(0, 1);
35169         }
35170     },
35171
35172     // private
35173     hideMenu : function(){
35174         clearTimeout(this.showTimer);
35175         delete this.showTimer;
35176         if(!this.hideTimer && this.menu && this.menu.isVisible()){
35177             this.hideTimer = this.deferHide.defer(this.hideDelay, this);
35178         }
35179     },
35180
35181     // private
35182     deferHide : function(){
35183         delete this.hideTimer;
35184         this.menu.hide();
35185     }
35186 });/*
35187  * Based on:
35188  * Ext JS Library 1.1.1
35189  * Copyright(c) 2006-2007, Ext JS, LLC.
35190  *
35191  * Originally Released Under LGPL - original licence link has changed is not relivant.
35192  *
35193  * Fork - LGPL
35194  * <script type="text/javascript">
35195  */
35196  
35197 /**
35198  * @class Roo.menu.CheckItem
35199  * @extends Roo.menu.Item
35200  * Adds a menu item that contains a checkbox by default, but can also be part of a radio group.
35201  * @constructor
35202  * Creates a new CheckItem
35203  * @param {Object} config Configuration options
35204  */
35205 Roo.menu.CheckItem = function(config){
35206     Roo.menu.CheckItem.superclass.constructor.call(this, config);
35207     this.addEvents({
35208         /**
35209          * @event beforecheckchange
35210          * Fires before the checked value is set, providing an opportunity to cancel if needed
35211          * @param {Roo.menu.CheckItem} this
35212          * @param {Boolean} checked The new checked value that will be set
35213          */
35214         "beforecheckchange" : true,
35215         /**
35216          * @event checkchange
35217          * Fires after the checked value has been set
35218          * @param {Roo.menu.CheckItem} this
35219          * @param {Boolean} checked The checked value that was set
35220          */
35221         "checkchange" : true
35222     });
35223     if(this.checkHandler){
35224         this.on('checkchange', this.checkHandler, this.scope);
35225     }
35226 };
35227 Roo.extend(Roo.menu.CheckItem, Roo.menu.Item, {
35228     /**
35229      * @cfg {String} group
35230      * All check items with the same group name will automatically be grouped into a single-select
35231      * radio button group (defaults to '')
35232      */
35233     /**
35234      * @cfg {String} itemCls The default CSS class to use for check items (defaults to "x-menu-item x-menu-check-item")
35235      */
35236     itemCls : "x-menu-item x-menu-check-item",
35237     /**
35238      * @cfg {String} groupClass The default CSS class to use for radio group check items (defaults to "x-menu-group-item")
35239      */
35240     groupClass : "x-menu-group-item",
35241
35242     /**
35243      * @cfg {Boolean} checked True to initialize this checkbox as checked (defaults to false).  Note that
35244      * if this checkbox is part of a radio group (group = true) only the last item in the group that is
35245      * initialized with checked = true will be rendered as checked.
35246      */
35247     checked: false,
35248
35249     // private
35250     ctype: "Roo.menu.CheckItem",
35251
35252     // private
35253     onRender : function(c){
35254         Roo.menu.CheckItem.superclass.onRender.apply(this, arguments);
35255         if(this.group){
35256             this.el.addClass(this.groupClass);
35257         }
35258         Roo.menu.MenuMgr.registerCheckable(this);
35259         if(this.checked){
35260             this.checked = false;
35261             this.setChecked(true, true);
35262         }
35263     },
35264
35265     // private
35266     destroy : function(){
35267         if(this.rendered){
35268             Roo.menu.MenuMgr.unregisterCheckable(this);
35269         }
35270         Roo.menu.CheckItem.superclass.destroy.apply(this, arguments);
35271     },
35272
35273     /**
35274      * Set the checked state of this item
35275      * @param {Boolean} checked The new checked value
35276      * @param {Boolean} suppressEvent (optional) True to prevent the checkchange event from firing (defaults to false)
35277      */
35278     setChecked : function(state, suppressEvent){
35279         if(this.checked != state && this.fireEvent("beforecheckchange", this, state) !== false){
35280             if(this.container){
35281                 this.container[state ? "addClass" : "removeClass"]("x-menu-item-checked");
35282             }
35283             this.checked = state;
35284             if(suppressEvent !== true){
35285                 this.fireEvent("checkchange", this, state);
35286             }
35287         }
35288     },
35289
35290     // private
35291     handleClick : function(e){
35292        if(!this.disabled && !(this.checked && this.group)){// disable unselect on radio item
35293            this.setChecked(!this.checked);
35294        }
35295        Roo.menu.CheckItem.superclass.handleClick.apply(this, arguments);
35296     }
35297 });/*
35298  * Based on:
35299  * Ext JS Library 1.1.1
35300  * Copyright(c) 2006-2007, Ext JS, LLC.
35301  *
35302  * Originally Released Under LGPL - original licence link has changed is not relivant.
35303  *
35304  * Fork - LGPL
35305  * <script type="text/javascript">
35306  */
35307  
35308 /**
35309  * @class Roo.menu.DateItem
35310  * @extends Roo.menu.Adapter
35311  * A menu item that wraps the {@link Roo.DatPicker} component.
35312  * @constructor
35313  * Creates a new DateItem
35314  * @param {Object} config Configuration options
35315  */
35316 Roo.menu.DateItem = function(config){
35317     Roo.menu.DateItem.superclass.constructor.call(this, new Roo.DatePicker(config), config);
35318     /** The Roo.DatePicker object @type Roo.DatePicker */
35319     this.picker = this.component;
35320     this.addEvents({select: true});
35321     
35322     this.picker.on("render", function(picker){
35323         picker.getEl().swallowEvent("click");
35324         picker.container.addClass("x-menu-date-item");
35325     });
35326
35327     this.picker.on("select", this.onSelect, this);
35328 };
35329
35330 Roo.extend(Roo.menu.DateItem, Roo.menu.Adapter, {
35331     // private
35332     onSelect : function(picker, date){
35333         this.fireEvent("select", this, date, picker);
35334         Roo.menu.DateItem.superclass.handleClick.call(this);
35335     }
35336 });/*
35337  * Based on:
35338  * Ext JS Library 1.1.1
35339  * Copyright(c) 2006-2007, Ext JS, LLC.
35340  *
35341  * Originally Released Under LGPL - original licence link has changed is not relivant.
35342  *
35343  * Fork - LGPL
35344  * <script type="text/javascript">
35345  */
35346  
35347 /**
35348  * @class Roo.menu.ColorItem
35349  * @extends Roo.menu.Adapter
35350  * A menu item that wraps the {@link Roo.ColorPalette} component.
35351  * @constructor
35352  * Creates a new ColorItem
35353  * @param {Object} config Configuration options
35354  */
35355 Roo.menu.ColorItem = function(config){
35356     Roo.menu.ColorItem.superclass.constructor.call(this, new Roo.ColorPalette(config), config);
35357     /** The Roo.ColorPalette object @type Roo.ColorPalette */
35358     this.palette = this.component;
35359     this.relayEvents(this.palette, ["select"]);
35360     if(this.selectHandler){
35361         this.on('select', this.selectHandler, this.scope);
35362     }
35363 };
35364 Roo.extend(Roo.menu.ColorItem, Roo.menu.Adapter);/*
35365  * Based on:
35366  * Ext JS Library 1.1.1
35367  * Copyright(c) 2006-2007, Ext JS, LLC.
35368  *
35369  * Originally Released Under LGPL - original licence link has changed is not relivant.
35370  *
35371  * Fork - LGPL
35372  * <script type="text/javascript">
35373  */
35374  
35375
35376 /**
35377  * @class Roo.menu.DateMenu
35378  * @extends Roo.menu.Menu
35379  * A menu containing a {@link Roo.menu.DateItem} component (which provides a date picker).
35380  * @constructor
35381  * Creates a new DateMenu
35382  * @param {Object} config Configuration options
35383  */
35384 Roo.menu.DateMenu = function(config){
35385     Roo.menu.DateMenu.superclass.constructor.call(this, config);
35386     this.plain = true;
35387     var di = new Roo.menu.DateItem(config);
35388     this.add(di);
35389     /**
35390      * The {@link Roo.DatePicker} instance for this DateMenu
35391      * @type DatePicker
35392      */
35393     this.picker = di.picker;
35394     /**
35395      * @event select
35396      * @param {DatePicker} picker
35397      * @param {Date} date
35398      */
35399     this.relayEvents(di, ["select"]);
35400
35401     this.on('beforeshow', function(){
35402         if(this.picker){
35403             this.picker.hideMonthPicker(true);
35404         }
35405     }, this);
35406 };
35407 Roo.extend(Roo.menu.DateMenu, Roo.menu.Menu, {
35408     cls:'x-date-menu'
35409 });/*
35410  * Based on:
35411  * Ext JS Library 1.1.1
35412  * Copyright(c) 2006-2007, Ext JS, LLC.
35413  *
35414  * Originally Released Under LGPL - original licence link has changed is not relivant.
35415  *
35416  * Fork - LGPL
35417  * <script type="text/javascript">
35418  */
35419  
35420
35421 /**
35422  * @class Roo.menu.ColorMenu
35423  * @extends Roo.menu.Menu
35424  * A menu containing a {@link Roo.menu.ColorItem} component (which provides a basic color picker).
35425  * @constructor
35426  * Creates a new ColorMenu
35427  * @param {Object} config Configuration options
35428  */
35429 Roo.menu.ColorMenu = function(config){
35430     Roo.menu.ColorMenu.superclass.constructor.call(this, config);
35431     this.plain = true;
35432     var ci = new Roo.menu.ColorItem(config);
35433     this.add(ci);
35434     /**
35435      * The {@link Roo.ColorPalette} instance for this ColorMenu
35436      * @type ColorPalette
35437      */
35438     this.palette = ci.palette;
35439     /**
35440      * @event select
35441      * @param {ColorPalette} palette
35442      * @param {String} color
35443      */
35444     this.relayEvents(ci, ["select"]);
35445 };
35446 Roo.extend(Roo.menu.ColorMenu, Roo.menu.Menu);/*
35447  * Based on:
35448  * Ext JS Library 1.1.1
35449  * Copyright(c) 2006-2007, Ext JS, LLC.
35450  *
35451  * Originally Released Under LGPL - original licence link has changed is not relivant.
35452  *
35453  * Fork - LGPL
35454  * <script type="text/javascript">
35455  */
35456  
35457 /**
35458  * @class Roo.form.Field
35459  * @extends Roo.BoxComponent
35460  * Base class for form fields that provides default event handling, sizing, value handling and other functionality.
35461  * @constructor
35462  * Creates a new Field
35463  * @param {Object} config Configuration options
35464  */
35465 Roo.form.Field = function(config){
35466     Roo.form.Field.superclass.constructor.call(this, config);
35467 };
35468
35469 Roo.extend(Roo.form.Field, Roo.BoxComponent,  {
35470     /**
35471      * @cfg {String} fieldLabel Label to use when rendering a form.
35472      */
35473        /**
35474      * @cfg {String} qtip Mouse over tip
35475      */
35476      
35477     /**
35478      * @cfg {String} invalidClass The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
35479      */
35480     invalidClass : "x-form-invalid",
35481     /**
35482      * @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")
35483      */
35484     invalidText : "The value in this field is invalid",
35485     /**
35486      * @cfg {String} focusClass The CSS class to use when the field receives focus (defaults to "x-form-focus")
35487      */
35488     focusClass : "x-form-focus",
35489     /**
35490      * @cfg {String/Boolean} validationEvent The event that should initiate field validation. Set to false to disable
35491       automatic validation (defaults to "keyup").
35492      */
35493     validationEvent : "keyup",
35494     /**
35495      * @cfg {Boolean} validateOnBlur Whether the field should validate when it loses focus (defaults to true).
35496      */
35497     validateOnBlur : true,
35498     /**
35499      * @cfg {Number} validationDelay The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
35500      */
35501     validationDelay : 250,
35502     /**
35503      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
35504      * {tag: "input", type: "text", size: "20", autocomplete: "off"})
35505      */
35506     defaultAutoCreate : {tag: "input", type: "text", size: "20", autocomplete: "off"},
35507     /**
35508      * @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-field")
35509      */
35510     fieldClass : "x-form-field",
35511     /**
35512      * @cfg {String} msgTarget The location where error text should display.  Should be one of the following values (defaults to 'qtip'):
35513      *<pre>
35514 Value         Description
35515 -----------   ----------------------------------------------------------------------
35516 qtip          Display a quick tip when the user hovers over the field
35517 title         Display a default browser title attribute popup
35518 under         Add a block div beneath the field containing the error text
35519 side          Add an error icon to the right of the field with a popup on hover
35520 [element id]  Add the error text directly to the innerHTML of the specified element
35521 </pre>
35522      */
35523     msgTarget : 'qtip',
35524     /**
35525      * @cfg {String} msgFx <b>Experimental</b> The effect used when displaying a validation message under the field (defaults to 'normal').
35526      */
35527     msgFx : 'normal',
35528
35529     /**
35530      * @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.
35531      */
35532     readOnly : false,
35533
35534     /**
35535      * @cfg {Boolean} disabled True to disable the field (defaults to false).
35536      */
35537     disabled : false,
35538
35539     /**
35540      * @cfg {String} inputType The type attribute for input fields -- e.g. radio, text, password (defaults to "text").
35541      */
35542     inputType : undefined,
35543     
35544     /**
35545      * @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).
35546          */
35547         tabIndex : undefined,
35548         
35549     // private
35550     isFormField : true,
35551
35552     // private
35553     hasFocus : false,
35554     /**
35555      * @property {Roo.Element} fieldEl
35556      * Element Containing the rendered Field (with label etc.)
35557      */
35558     /**
35559      * @cfg {Mixed} value A value to initialize this field with.
35560      */
35561     value : undefined,
35562
35563     /**
35564      * @cfg {String} name The field's HTML name attribute.
35565      */
35566     /**
35567      * @cfg {String} cls A CSS class to apply to the field's underlying element.
35568      */
35569
35570         // private ??
35571         initComponent : function(){
35572         Roo.form.Field.superclass.initComponent.call(this);
35573         this.addEvents({
35574             /**
35575              * @event focus
35576              * Fires when this field receives input focus.
35577              * @param {Roo.form.Field} this
35578              */
35579             focus : true,
35580             /**
35581              * @event blur
35582              * Fires when this field loses input focus.
35583              * @param {Roo.form.Field} this
35584              */
35585             blur : true,
35586             /**
35587              * @event specialkey
35588              * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed.  You can check
35589              * {@link Roo.EventObject#getKey} to determine which key was pressed.
35590              * @param {Roo.form.Field} this
35591              * @param {Roo.EventObject} e The event object
35592              */
35593             specialkey : true,
35594             /**
35595              * @event change
35596              * Fires just before the field blurs if the field value has changed.
35597              * @param {Roo.form.Field} this
35598              * @param {Mixed} newValue The new value
35599              * @param {Mixed} oldValue The original value
35600              */
35601             change : true,
35602             /**
35603              * @event invalid
35604              * Fires after the field has been marked as invalid.
35605              * @param {Roo.form.Field} this
35606              * @param {String} msg The validation message
35607              */
35608             invalid : true,
35609             /**
35610              * @event valid
35611              * Fires after the field has been validated with no errors.
35612              * @param {Roo.form.Field} this
35613              */
35614             valid : true,
35615              /**
35616              * @event keyup
35617              * Fires after the key up
35618              * @param {Roo.form.Field} this
35619              * @param {Roo.EventObject}  e The event Object
35620              */
35621             keyup : true
35622         });
35623     },
35624
35625     /**
35626      * Returns the name attribute of the field if available
35627      * @return {String} name The field name
35628      */
35629     getName: function(){
35630          return this.rendered && this.el.dom.name ? this.el.dom.name : (this.hiddenName || '');
35631     },
35632
35633     // private
35634     onRender : function(ct, position){
35635         Roo.form.Field.superclass.onRender.call(this, ct, position);
35636         if(!this.el){
35637             var cfg = this.getAutoCreate();
35638             if(!cfg.name){
35639                 cfg.name = this.name || this.id;
35640             }
35641             if(this.inputType){
35642                 cfg.type = this.inputType;
35643             }
35644             this.el = ct.createChild(cfg, position);
35645         }
35646         var type = this.el.dom.type;
35647         if(type){
35648             if(type == 'password'){
35649                 type = 'text';
35650             }
35651             this.el.addClass('x-form-'+type);
35652         }
35653         if(this.readOnly){
35654             this.el.dom.readOnly = true;
35655         }
35656         if(this.tabIndex !== undefined){
35657             this.el.dom.setAttribute('tabIndex', this.tabIndex);
35658         }
35659
35660         this.el.addClass([this.fieldClass, this.cls]);
35661         this.initValue();
35662     },
35663
35664     /**
35665      * Apply the behaviors of this component to an existing element. <b>This is used instead of render().</b>
35666      * @param {String/HTMLElement/Element} el The id of the node, a DOM node or an existing Element
35667      * @return {Roo.form.Field} this
35668      */
35669     applyTo : function(target){
35670         this.allowDomMove = false;
35671         this.el = Roo.get(target);
35672         this.render(this.el.dom.parentNode);
35673         return this;
35674     },
35675
35676     // private
35677     initValue : function(){
35678         if(this.value !== undefined){
35679             this.setValue(this.value);
35680         }else if(this.el.dom.value.length > 0){
35681             this.setValue(this.el.dom.value);
35682         }
35683     },
35684
35685     /**
35686      * Returns true if this field has been changed since it was originally loaded and is not disabled.
35687      */
35688     isDirty : function() {
35689         if(this.disabled) {
35690             return false;
35691         }
35692         return String(this.getValue()) !== String(this.originalValue);
35693     },
35694
35695     // private
35696     afterRender : function(){
35697         Roo.form.Field.superclass.afterRender.call(this);
35698         this.initEvents();
35699     },
35700
35701     // private
35702     fireKey : function(e){
35703         //Roo.log('field ' + e.getKey());
35704         if(e.isNavKeyPress()){
35705             this.fireEvent("specialkey", this, e);
35706         }
35707     },
35708
35709     /**
35710      * Resets the current field value to the originally loaded value and clears any validation messages
35711      */
35712     reset : function(){
35713         this.setValue(this.originalValue);
35714         this.clearInvalid();
35715     },
35716
35717     // private
35718     initEvents : function(){
35719         // safari killled keypress - so keydown is now used..
35720         this.el.on("keydown" , this.fireKey,  this);
35721         this.el.on("focus", this.onFocus,  this);
35722         this.el.on("blur", this.onBlur,  this);
35723         this.el.relayEvent('keyup', this);
35724
35725         // reference to original value for reset
35726         this.originalValue = this.getValue();
35727     },
35728
35729     // private
35730     onFocus : function(){
35731         if(!Roo.isOpera && this.focusClass){ // don't touch in Opera
35732             this.el.addClass(this.focusClass);
35733         }
35734         if(!this.hasFocus){
35735             this.hasFocus = true;
35736             this.startValue = this.getValue();
35737             this.fireEvent("focus", this);
35738         }
35739     },
35740
35741     beforeBlur : Roo.emptyFn,
35742
35743     // private
35744     onBlur : function(){
35745         this.beforeBlur();
35746         if(!Roo.isOpera && this.focusClass){ // don't touch in Opera
35747             this.el.removeClass(this.focusClass);
35748         }
35749         this.hasFocus = false;
35750         if(this.validationEvent !== false && this.validateOnBlur && this.validationEvent != "blur"){
35751             this.validate();
35752         }
35753         var v = this.getValue();
35754         if(String(v) !== String(this.startValue)){
35755             this.fireEvent('change', this, v, this.startValue);
35756         }
35757         this.fireEvent("blur", this);
35758     },
35759
35760     /**
35761      * Returns whether or not the field value is currently valid
35762      * @param {Boolean} preventMark True to disable marking the field invalid
35763      * @return {Boolean} True if the value is valid, else false
35764      */
35765     isValid : function(preventMark){
35766         if(this.disabled){
35767             return true;
35768         }
35769         var restore = this.preventMark;
35770         this.preventMark = preventMark === true;
35771         var v = this.validateValue(this.processValue(this.getRawValue()));
35772         this.preventMark = restore;
35773         return v;
35774     },
35775
35776     /**
35777      * Validates the field value
35778      * @return {Boolean} True if the value is valid, else false
35779      */
35780     validate : function(){
35781         if(this.disabled || this.validateValue(this.processValue(this.getRawValue()))){
35782             this.clearInvalid();
35783             return true;
35784         }
35785         return false;
35786     },
35787
35788     processValue : function(value){
35789         return value;
35790     },
35791
35792     // private
35793     // Subclasses should provide the validation implementation by overriding this
35794     validateValue : function(value){
35795         return true;
35796     },
35797
35798     /**
35799      * Mark this field as invalid
35800      * @param {String} msg The validation message
35801      */
35802     markInvalid : function(msg){
35803         if(!this.rendered || this.preventMark){ // not rendered
35804             return;
35805         }
35806         this.el.addClass(this.invalidClass);
35807         msg = msg || this.invalidText;
35808         switch(this.msgTarget){
35809             case 'qtip':
35810                 this.el.dom.qtip = msg;
35811                 this.el.dom.qclass = 'x-form-invalid-tip';
35812                 if(Roo.QuickTips){ // fix for floating editors interacting with DND
35813                     Roo.QuickTips.enable();
35814                 }
35815                 break;
35816             case 'title':
35817                 this.el.dom.title = msg;
35818                 break;
35819             case 'under':
35820                 if(!this.errorEl){
35821                     var elp = this.el.findParent('.x-form-element', 5, true);
35822                     this.errorEl = elp.createChild({cls:'x-form-invalid-msg'});
35823                     this.errorEl.setWidth(elp.getWidth(true)-20);
35824                 }
35825                 this.errorEl.update(msg);
35826                 Roo.form.Field.msgFx[this.msgFx].show(this.errorEl, this);
35827                 break;
35828             case 'side':
35829                 if(!this.errorIcon){
35830                     var elp = this.el.findParent('.x-form-element', 5, true);
35831                     this.errorIcon = elp.createChild({cls:'x-form-invalid-icon'});
35832                 }
35833                 this.alignErrorIcon();
35834                 this.errorIcon.dom.qtip = msg;
35835                 this.errorIcon.dom.qclass = 'x-form-invalid-tip';
35836                 this.errorIcon.show();
35837                 this.on('resize', this.alignErrorIcon, this);
35838                 break;
35839             default:
35840                 var t = Roo.getDom(this.msgTarget);
35841                 t.innerHTML = msg;
35842                 t.style.display = this.msgDisplay;
35843                 break;
35844         }
35845         this.fireEvent('invalid', this, msg);
35846     },
35847
35848     // private
35849     alignErrorIcon : function(){
35850         this.errorIcon.alignTo(this.el, 'tl-tr', [2, 0]);
35851     },
35852
35853     /**
35854      * Clear any invalid styles/messages for this field
35855      */
35856     clearInvalid : function(){
35857         if(!this.rendered || this.preventMark){ // not rendered
35858             return;
35859         }
35860         this.el.removeClass(this.invalidClass);
35861         switch(this.msgTarget){
35862             case 'qtip':
35863                 this.el.dom.qtip = '';
35864                 break;
35865             case 'title':
35866                 this.el.dom.title = '';
35867                 break;
35868             case 'under':
35869                 if(this.errorEl){
35870                     Roo.form.Field.msgFx[this.msgFx].hide(this.errorEl, this);
35871                 }
35872                 break;
35873             case 'side':
35874                 if(this.errorIcon){
35875                     this.errorIcon.dom.qtip = '';
35876                     this.errorIcon.hide();
35877                     this.un('resize', this.alignErrorIcon, this);
35878                 }
35879                 break;
35880             default:
35881                 var t = Roo.getDom(this.msgTarget);
35882                 t.innerHTML = '';
35883                 t.style.display = 'none';
35884                 break;
35885         }
35886         this.fireEvent('valid', this);
35887     },
35888
35889     /**
35890      * Returns the raw data value which may or may not be a valid, defined value.  To return a normalized value see {@link #getValue}.
35891      * @return {Mixed} value The field value
35892      */
35893     getRawValue : function(){
35894         var v = this.el.getValue();
35895         if(v === this.emptyText){
35896             v = '';
35897         }
35898         return v;
35899     },
35900
35901     /**
35902      * Returns the normalized data value (undefined or emptyText will be returned as '').  To return the raw value see {@link #getRawValue}.
35903      * @return {Mixed} value The field value
35904      */
35905     getValue : function(){
35906         var v = this.el.getValue();
35907         if(v === this.emptyText || v === undefined){
35908             v = '';
35909         }
35910         return v;
35911     },
35912
35913     /**
35914      * Sets the underlying DOM field's value directly, bypassing validation.  To set the value with validation see {@link #setValue}.
35915      * @param {Mixed} value The value to set
35916      */
35917     setRawValue : function(v){
35918         return this.el.dom.value = (v === null || v === undefined ? '' : v);
35919     },
35920
35921     /**
35922      * Sets a data value into the field and validates it.  To set the value directly without validation see {@link #setRawValue}.
35923      * @param {Mixed} value The value to set
35924      */
35925     setValue : function(v){
35926         this.value = v;
35927         if(this.rendered){
35928             this.el.dom.value = (v === null || v === undefined ? '' : v);
35929             this.validate();
35930         }
35931     },
35932
35933     adjustSize : function(w, h){
35934         var s = Roo.form.Field.superclass.adjustSize.call(this, w, h);
35935         s.width = this.adjustWidth(this.el.dom.tagName, s.width);
35936         return s;
35937     },
35938
35939     adjustWidth : function(tag, w){
35940         tag = tag.toLowerCase();
35941         if(typeof w == 'number' && Roo.isStrict && !Roo.isSafari){
35942             if(Roo.isIE && (tag == 'input' || tag == 'textarea')){
35943                 if(tag == 'input'){
35944                     return w + 2;
35945                 }
35946                 if(tag = 'textarea'){
35947                     return w-2;
35948                 }
35949             }else if(Roo.isOpera){
35950                 if(tag == 'input'){
35951                     return w + 2;
35952                 }
35953                 if(tag = 'textarea'){
35954                     return w-2;
35955                 }
35956             }
35957         }
35958         return w;
35959     }
35960 });
35961
35962
35963 // anything other than normal should be considered experimental
35964 Roo.form.Field.msgFx = {
35965     normal : {
35966         show: function(msgEl, f){
35967             msgEl.setDisplayed('block');
35968         },
35969
35970         hide : function(msgEl, f){
35971             msgEl.setDisplayed(false).update('');
35972         }
35973     },
35974
35975     slide : {
35976         show: function(msgEl, f){
35977             msgEl.slideIn('t', {stopFx:true});
35978         },
35979
35980         hide : function(msgEl, f){
35981             msgEl.slideOut('t', {stopFx:true,useDisplay:true});
35982         }
35983     },
35984
35985     slideRight : {
35986         show: function(msgEl, f){
35987             msgEl.fixDisplay();
35988             msgEl.alignTo(f.el, 'tl-tr');
35989             msgEl.slideIn('l', {stopFx:true});
35990         },
35991
35992         hide : function(msgEl, f){
35993             msgEl.slideOut('l', {stopFx:true,useDisplay:true});
35994         }
35995     }
35996 };/*
35997  * Based on:
35998  * Ext JS Library 1.1.1
35999  * Copyright(c) 2006-2007, Ext JS, LLC.
36000  *
36001  * Originally Released Under LGPL - original licence link has changed is not relivant.
36002  *
36003  * Fork - LGPL
36004  * <script type="text/javascript">
36005  */
36006  
36007
36008 /**
36009  * @class Roo.form.TextField
36010  * @extends Roo.form.Field
36011  * Basic text field.  Can be used as a direct replacement for traditional text inputs, or as the base
36012  * class for more sophisticated input controls (like {@link Roo.form.TextArea} and {@link Roo.form.ComboBox}).
36013  * @constructor
36014  * Creates a new TextField
36015  * @param {Object} config Configuration options
36016  */
36017 Roo.form.TextField = function(config){
36018     Roo.form.TextField.superclass.constructor.call(this, config);
36019     this.addEvents({
36020         /**
36021          * @event autosize
36022          * Fires when the autosize function is triggered.  The field may or may not have actually changed size
36023          * according to the default logic, but this event provides a hook for the developer to apply additional
36024          * logic at runtime to resize the field if needed.
36025              * @param {Roo.form.Field} this This text field
36026              * @param {Number} width The new field width
36027              */
36028         autosize : true
36029     });
36030 };
36031
36032 Roo.extend(Roo.form.TextField, Roo.form.Field,  {
36033     /**
36034      * @cfg {Boolean} grow True if this field should automatically grow and shrink to its content
36035      */
36036     grow : false,
36037     /**
36038      * @cfg {Number} growMin The minimum width to allow when grow = true (defaults to 30)
36039      */
36040     growMin : 30,
36041     /**
36042      * @cfg {Number} growMax The maximum width to allow when grow = true (defaults to 800)
36043      */
36044     growMax : 800,
36045     /**
36046      * @cfg {String} vtype A validation type name as defined in {@link Roo.form.VTypes} (defaults to null)
36047      */
36048     vtype : null,
36049     /**
36050      * @cfg {String} maskRe An input mask regular expression that will be used to filter keystrokes that don't match (defaults to null)
36051      */
36052     maskRe : null,
36053     /**
36054      * @cfg {Boolean} disableKeyFilter True to disable input keystroke filtering (defaults to false)
36055      */
36056     disableKeyFilter : false,
36057     /**
36058      * @cfg {Boolean} allowBlank False to validate that the value length > 0 (defaults to true)
36059      */
36060     allowBlank : true,
36061     /**
36062      * @cfg {Number} minLength Minimum input field length required (defaults to 0)
36063      */
36064     minLength : 0,
36065     /**
36066      * @cfg {Number} maxLength Maximum input field length allowed (defaults to Number.MAX_VALUE)
36067      */
36068     maxLength : Number.MAX_VALUE,
36069     /**
36070      * @cfg {String} minLengthText Error text to display if the minimum length validation fails (defaults to "The minimum length for this field is {minLength}")
36071      */
36072     minLengthText : "The minimum length for this field is {0}",
36073     /**
36074      * @cfg {String} maxLengthText Error text to display if the maximum length validation fails (defaults to "The maximum length for this field is {maxLength}")
36075      */
36076     maxLengthText : "The maximum length for this field is {0}",
36077     /**
36078      * @cfg {Boolean} selectOnFocus True to automatically select any existing field text when the field receives input focus (defaults to false)
36079      */
36080     selectOnFocus : false,
36081     /**
36082      * @cfg {String} blankText Error text to display if the allow blank validation fails (defaults to "This field is required")
36083      */
36084     blankText : "This field is required",
36085     /**
36086      * @cfg {Function} validator A custom validation function to be called during field validation (defaults to null).
36087      * If available, this function will be called only after the basic validators all return true, and will be passed the
36088      * current field value and expected to return boolean true if the value is valid or a string error message if invalid.
36089      */
36090     validator : null,
36091     /**
36092      * @cfg {RegExp} regex A JavaScript RegExp object to be tested against the field value during validation (defaults to null).
36093      * If available, this regex will be evaluated only after the basic validators all return true, and will be passed the
36094      * current field value.  If the test fails, the field will be marked invalid using {@link #regexText}.
36095      */
36096     regex : null,
36097     /**
36098      * @cfg {String} regexText The error text to display if {@link #regex} is used and the test fails during validation (defaults to "")
36099      */
36100     regexText : "",
36101     /**
36102      * @cfg {String} emptyText The default text to display in an empty field (defaults to null).
36103      */
36104     emptyText : null,
36105     /**
36106      * @cfg {String} emptyClass The CSS class to apply to an empty field to style the {@link #emptyText} (defaults to
36107      * 'x-form-empty-field').  This class is automatically added and removed as needed depending on the current field value.
36108      */
36109     emptyClass : 'x-form-empty-field',
36110
36111     // private
36112     initEvents : function(){
36113         Roo.form.TextField.superclass.initEvents.call(this);
36114         if(this.validationEvent == 'keyup'){
36115             this.validationTask = new Roo.util.DelayedTask(this.validate, this);
36116             this.el.on('keyup', this.filterValidation, this);
36117         }
36118         else if(this.validationEvent !== false){
36119             this.el.on(this.validationEvent, this.validate, this, {buffer: this.validationDelay});
36120         }
36121         if(this.selectOnFocus || this.emptyText){
36122             this.on("focus", this.preFocus, this);
36123             if(this.emptyText){
36124                 this.on('blur', this.postBlur, this);
36125                 this.applyEmptyText();
36126             }
36127         }
36128         if(this.maskRe || (this.vtype && this.disableKeyFilter !== true && (this.maskRe = Roo.form.VTypes[this.vtype+'Mask']))){
36129             this.el.on("keypress", this.filterKeys, this);
36130         }
36131         if(this.grow){
36132             this.el.on("keyup", this.onKeyUp,  this, {buffer:50});
36133             this.el.on("click", this.autoSize,  this);
36134         }
36135     },
36136
36137     processValue : function(value){
36138         if(this.stripCharsRe){
36139             var newValue = value.replace(this.stripCharsRe, '');
36140             if(newValue !== value){
36141                 this.setRawValue(newValue);
36142                 return newValue;
36143             }
36144         }
36145         return value;
36146     },
36147
36148     filterValidation : function(e){
36149         if(!e.isNavKeyPress()){
36150             this.validationTask.delay(this.validationDelay);
36151         }
36152     },
36153
36154     // private
36155     onKeyUp : function(e){
36156         if(!e.isNavKeyPress()){
36157             this.autoSize();
36158         }
36159     },
36160
36161     /**
36162      * Resets the current field value to the originally-loaded value and clears any validation messages.
36163      * Also adds emptyText and emptyClass if the original value was blank.
36164      */
36165     reset : function(){
36166         Roo.form.TextField.superclass.reset.call(this);
36167         this.applyEmptyText();
36168     },
36169
36170     applyEmptyText : function(){
36171         if(this.rendered && this.emptyText && this.getRawValue().length < 1){
36172             this.setRawValue(this.emptyText);
36173             this.el.addClass(this.emptyClass);
36174         }
36175     },
36176
36177     // private
36178     preFocus : function(){
36179         if(this.emptyText){
36180             if(this.el.dom.value == this.emptyText){
36181                 this.setRawValue('');
36182             }
36183             this.el.removeClass(this.emptyClass);
36184         }
36185         if(this.selectOnFocus){
36186             this.el.dom.select();
36187         }
36188     },
36189
36190     // private
36191     postBlur : function(){
36192         this.applyEmptyText();
36193     },
36194
36195     // private
36196     filterKeys : function(e){
36197         var k = e.getKey();
36198         if(!Roo.isIE && (e.isNavKeyPress() || k == e.BACKSPACE || (k == e.DELETE && e.button == -1))){
36199             return;
36200         }
36201         var c = e.getCharCode(), cc = String.fromCharCode(c);
36202         if(Roo.isIE && (e.isSpecialKey() || !cc)){
36203             return;
36204         }
36205         if(!this.maskRe.test(cc)){
36206             e.stopEvent();
36207         }
36208     },
36209
36210     setValue : function(v){
36211         if(this.emptyText && this.el && v !== undefined && v !== null && v !== ''){
36212             this.el.removeClass(this.emptyClass);
36213         }
36214         Roo.form.TextField.superclass.setValue.apply(this, arguments);
36215         this.applyEmptyText();
36216         this.autoSize();
36217     },
36218
36219     /**
36220      * Validates a value according to the field's validation rules and marks the field as invalid
36221      * if the validation fails
36222      * @param {Mixed} value The value to validate
36223      * @return {Boolean} True if the value is valid, else false
36224      */
36225     validateValue : function(value){
36226         if(value.length < 1 || value === this.emptyText){ // if it's blank
36227              if(this.allowBlank){
36228                 this.clearInvalid();
36229                 return true;
36230              }else{
36231                 this.markInvalid(this.blankText);
36232                 return false;
36233              }
36234         }
36235         if(value.length < this.minLength){
36236             this.markInvalid(String.format(this.minLengthText, this.minLength));
36237             return false;
36238         }
36239         if(value.length > this.maxLength){
36240             this.markInvalid(String.format(this.maxLengthText, this.maxLength));
36241             return false;
36242         }
36243         if(this.vtype){
36244             var vt = Roo.form.VTypes;
36245             if(!vt[this.vtype](value, this)){
36246                 this.markInvalid(this.vtypeText || vt[this.vtype +'Text']);
36247                 return false;
36248             }
36249         }
36250         if(typeof this.validator == "function"){
36251             var msg = this.validator(value);
36252             if(msg !== true){
36253                 this.markInvalid(msg);
36254                 return false;
36255             }
36256         }
36257         if(this.regex && !this.regex.test(value)){
36258             this.markInvalid(this.regexText);
36259             return false;
36260         }
36261         return true;
36262     },
36263
36264     /**
36265      * Selects text in this field
36266      * @param {Number} start (optional) The index where the selection should start (defaults to 0)
36267      * @param {Number} end (optional) The index where the selection should end (defaults to the text length)
36268      */
36269     selectText : function(start, end){
36270         var v = this.getRawValue();
36271         if(v.length > 0){
36272             start = start === undefined ? 0 : start;
36273             end = end === undefined ? v.length : end;
36274             var d = this.el.dom;
36275             if(d.setSelectionRange){
36276                 d.setSelectionRange(start, end);
36277             }else if(d.createTextRange){
36278                 var range = d.createTextRange();
36279                 range.moveStart("character", start);
36280                 range.moveEnd("character", v.length-end);
36281                 range.select();
36282             }
36283         }
36284     },
36285
36286     /**
36287      * Automatically grows the field to accomodate the width of the text up to the maximum field width allowed.
36288      * This only takes effect if grow = true, and fires the autosize event.
36289      */
36290     autoSize : function(){
36291         if(!this.grow || !this.rendered){
36292             return;
36293         }
36294         if(!this.metrics){
36295             this.metrics = Roo.util.TextMetrics.createInstance(this.el);
36296         }
36297         var el = this.el;
36298         var v = el.dom.value;
36299         var d = document.createElement('div');
36300         d.appendChild(document.createTextNode(v));
36301         v = d.innerHTML;
36302         d = null;
36303         v += "&#160;";
36304         var w = Math.min(this.growMax, Math.max(this.metrics.getWidth(v) + /* add extra padding */ 10, this.growMin));
36305         this.el.setWidth(w);
36306         this.fireEvent("autosize", this, w);
36307     }
36308 });/*
36309  * Based on:
36310  * Ext JS Library 1.1.1
36311  * Copyright(c) 2006-2007, Ext JS, LLC.
36312  *
36313  * Originally Released Under LGPL - original licence link has changed is not relivant.
36314  *
36315  * Fork - LGPL
36316  * <script type="text/javascript">
36317  */
36318  
36319 /**
36320  * @class Roo.form.Hidden
36321  * @extends Roo.form.TextField
36322  * Simple Hidden element used on forms 
36323  * 
36324  * usage: form.add(new Roo.form.HiddenField({ 'name' : 'test1' }));
36325  * 
36326  * @constructor
36327  * Creates a new Hidden form element.
36328  * @param {Object} config Configuration options
36329  */
36330
36331
36332
36333 // easy hidden field...
36334 Roo.form.Hidden = function(config){
36335     Roo.form.Hidden.superclass.constructor.call(this, config);
36336 };
36337   
36338 Roo.extend(Roo.form.Hidden, Roo.form.TextField, {
36339     fieldLabel:      '',
36340     inputType:      'hidden',
36341     width:          50,
36342     allowBlank:     true,
36343     labelSeparator: '',
36344     hidden:         true,
36345     itemCls :       'x-form-item-display-none'
36346
36347
36348 });
36349
36350
36351 /*
36352  * Based on:
36353  * Ext JS Library 1.1.1
36354  * Copyright(c) 2006-2007, Ext JS, LLC.
36355  *
36356  * Originally Released Under LGPL - original licence link has changed is not relivant.
36357  *
36358  * Fork - LGPL
36359  * <script type="text/javascript">
36360  */
36361  
36362 /**
36363  * @class Roo.form.TriggerField
36364  * @extends Roo.form.TextField
36365  * Provides a convenient wrapper for TextFields that adds a clickable trigger button (looks like a combobox by default).
36366  * The trigger has no default action, so you must assign a function to implement the trigger click handler by
36367  * overriding {@link #onTriggerClick}. You can create a TriggerField directly, as it renders exactly like a combobox
36368  * for which you can provide a custom implementation.  For example:
36369  * <pre><code>
36370 var trigger = new Roo.form.TriggerField();
36371 trigger.onTriggerClick = myTriggerFn;
36372 trigger.applyTo('my-field');
36373 </code></pre>
36374  *
36375  * However, in general you will most likely want to use TriggerField as the base class for a reusable component.
36376  * {@link Roo.form.DateField} and {@link Roo.form.ComboBox} are perfect examples of this.
36377  * @cfg {String} triggerClass An additional CSS class used to style the trigger button.  The trigger will always get the
36378  * class 'x-form-trigger' by default and triggerClass will be <b>appended</b> if specified.
36379  * @constructor
36380  * Create a new TriggerField.
36381  * @param {Object} config Configuration options (valid {@Roo.form.TextField} config options will also be applied
36382  * to the base TextField)
36383  */
36384 Roo.form.TriggerField = function(config){
36385     this.mimicing = false;
36386     Roo.form.TriggerField.superclass.constructor.call(this, config);
36387 };
36388
36389 Roo.extend(Roo.form.TriggerField, Roo.form.TextField,  {
36390     /**
36391      * @cfg {String} triggerClass A CSS class to apply to the trigger
36392      */
36393     /**
36394      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
36395      * {tag: "input", type: "text", size: "16", autocomplete: "off"})
36396      */
36397     defaultAutoCreate : {tag: "input", type: "text", size: "16", autocomplete: "off"},
36398     /**
36399      * @cfg {Boolean} hideTrigger True to hide the trigger element and display only the base text field (defaults to false)
36400      */
36401     hideTrigger:false,
36402
36403     /** @cfg {Boolean} grow @hide */
36404     /** @cfg {Number} growMin @hide */
36405     /** @cfg {Number} growMax @hide */
36406
36407     /**
36408      * @hide 
36409      * @method
36410      */
36411     autoSize: Roo.emptyFn,
36412     // private
36413     monitorTab : true,
36414     // private
36415     deferHeight : true,
36416
36417     
36418     actionMode : 'wrap',
36419     // private
36420     onResize : function(w, h){
36421         Roo.form.TriggerField.superclass.onResize.apply(this, arguments);
36422         if(typeof w == 'number'){
36423             var x = w - this.trigger.getWidth();
36424             this.el.setWidth(this.adjustWidth('input', x));
36425             this.trigger.setStyle('left', x+'px');
36426         }
36427     },
36428
36429     // private
36430     adjustSize : Roo.BoxComponent.prototype.adjustSize,
36431
36432     // private
36433     getResizeEl : function(){
36434         return this.wrap;
36435     },
36436
36437     // private
36438     getPositionEl : function(){
36439         return this.wrap;
36440     },
36441
36442     // private
36443     alignErrorIcon : function(){
36444         this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
36445     },
36446
36447     // private
36448     onRender : function(ct, position){
36449         Roo.form.TriggerField.superclass.onRender.call(this, ct, position);
36450         this.wrap = this.el.wrap({cls: "x-form-field-wrap"});
36451         this.trigger = this.wrap.createChild(this.triggerConfig ||
36452                 {tag: "img", src: Roo.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.triggerClass});
36453         if(this.hideTrigger){
36454             this.trigger.setDisplayed(false);
36455         }
36456         this.initTrigger();
36457         if(!this.width){
36458             this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
36459         }
36460     },
36461
36462     // private
36463     initTrigger : function(){
36464         this.trigger.on("click", this.onTriggerClick, this, {preventDefault:true});
36465         this.trigger.addClassOnOver('x-form-trigger-over');
36466         this.trigger.addClassOnClick('x-form-trigger-click');
36467     },
36468
36469     // private
36470     onDestroy : function(){
36471         if(this.trigger){
36472             this.trigger.removeAllListeners();
36473             this.trigger.remove();
36474         }
36475         if(this.wrap){
36476             this.wrap.remove();
36477         }
36478         Roo.form.TriggerField.superclass.onDestroy.call(this);
36479     },
36480
36481     // private
36482     onFocus : function(){
36483         Roo.form.TriggerField.superclass.onFocus.call(this);
36484         if(!this.mimicing){
36485             this.wrap.addClass('x-trigger-wrap-focus');
36486             this.mimicing = true;
36487             Roo.get(Roo.isIE ? document.body : document).on("mousedown", this.mimicBlur, this);
36488             if(this.monitorTab){
36489                 this.el.on("keydown", this.checkTab, this);
36490             }
36491         }
36492     },
36493
36494     // private
36495     checkTab : function(e){
36496         if(e.getKey() == e.TAB){
36497             this.triggerBlur();
36498         }
36499     },
36500
36501     // private
36502     onBlur : function(){
36503         // do nothing
36504     },
36505
36506     // private
36507     mimicBlur : function(e, t){
36508         if(!this.wrap.contains(t) && this.validateBlur()){
36509             this.triggerBlur();
36510         }
36511     },
36512
36513     // private
36514     triggerBlur : function(){
36515         this.mimicing = false;
36516         Roo.get(Roo.isIE ? document.body : document).un("mousedown", this.mimicBlur);
36517         if(this.monitorTab){
36518             this.el.un("keydown", this.checkTab, this);
36519         }
36520         this.wrap.removeClass('x-trigger-wrap-focus');
36521         Roo.form.TriggerField.superclass.onBlur.call(this);
36522     },
36523
36524     // private
36525     // This should be overriden by any subclass that needs to check whether or not the field can be blurred.
36526     validateBlur : function(e, t){
36527         return true;
36528     },
36529
36530     // private
36531     onDisable : function(){
36532         Roo.form.TriggerField.superclass.onDisable.call(this);
36533         if(this.wrap){
36534             this.wrap.addClass('x-item-disabled');
36535         }
36536     },
36537
36538     // private
36539     onEnable : function(){
36540         Roo.form.TriggerField.superclass.onEnable.call(this);
36541         if(this.wrap){
36542             this.wrap.removeClass('x-item-disabled');
36543         }
36544     },
36545
36546     // private
36547     onShow : function(){
36548         var ae = this.getActionEl();
36549         
36550         if(ae){
36551             ae.dom.style.display = '';
36552             ae.dom.style.visibility = 'visible';
36553         }
36554     },
36555
36556     // private
36557     
36558     onHide : function(){
36559         var ae = this.getActionEl();
36560         ae.dom.style.display = 'none';
36561     },
36562
36563     /**
36564      * The function that should handle the trigger's click event.  This method does nothing by default until overridden
36565      * by an implementing function.
36566      * @method
36567      * @param {EventObject} e
36568      */
36569     onTriggerClick : Roo.emptyFn
36570 });
36571
36572 // TwinTriggerField is not a public class to be used directly.  It is meant as an abstract base class
36573 // to be extended by an implementing class.  For an example of implementing this class, see the custom
36574 // SearchField implementation here: http://extjs.com/deploy/ext/examples/form/custom.html
36575 Roo.form.TwinTriggerField = Roo.extend(Roo.form.TriggerField, {
36576     initComponent : function(){
36577         Roo.form.TwinTriggerField.superclass.initComponent.call(this);
36578
36579         this.triggerConfig = {
36580             tag:'span', cls:'x-form-twin-triggers', cn:[
36581             {tag: "img", src: Roo.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger1Class},
36582             {tag: "img", src: Roo.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger2Class}
36583         ]};
36584     },
36585
36586     getTrigger : function(index){
36587         return this.triggers[index];
36588     },
36589
36590     initTrigger : function(){
36591         var ts = this.trigger.select('.x-form-trigger', true);
36592         this.wrap.setStyle('overflow', 'hidden');
36593         var triggerField = this;
36594         ts.each(function(t, all, index){
36595             t.hide = function(){
36596                 var w = triggerField.wrap.getWidth();
36597                 this.dom.style.display = 'none';
36598                 triggerField.el.setWidth(w-triggerField.trigger.getWidth());
36599             };
36600             t.show = function(){
36601                 var w = triggerField.wrap.getWidth();
36602                 this.dom.style.display = '';
36603                 triggerField.el.setWidth(w-triggerField.trigger.getWidth());
36604             };
36605             var triggerIndex = 'Trigger'+(index+1);
36606
36607             if(this['hide'+triggerIndex]){
36608                 t.dom.style.display = 'none';
36609             }
36610             t.on("click", this['on'+triggerIndex+'Click'], this, {preventDefault:true});
36611             t.addClassOnOver('x-form-trigger-over');
36612             t.addClassOnClick('x-form-trigger-click');
36613         }, this);
36614         this.triggers = ts.elements;
36615     },
36616
36617     onTrigger1Click : Roo.emptyFn,
36618     onTrigger2Click : Roo.emptyFn
36619 });/*
36620  * Based on:
36621  * Ext JS Library 1.1.1
36622  * Copyright(c) 2006-2007, Ext JS, LLC.
36623  *
36624  * Originally Released Under LGPL - original licence link has changed is not relivant.
36625  *
36626  * Fork - LGPL
36627  * <script type="text/javascript">
36628  */
36629  
36630 /**
36631  * @class Roo.form.TextArea
36632  * @extends Roo.form.TextField
36633  * Multiline text field.  Can be used as a direct replacement for traditional textarea fields, plus adds
36634  * support for auto-sizing.
36635  * @constructor
36636  * Creates a new TextArea
36637  * @param {Object} config Configuration options
36638  */
36639 Roo.form.TextArea = function(config){
36640     Roo.form.TextArea.superclass.constructor.call(this, config);
36641     // these are provided exchanges for backwards compat
36642     // minHeight/maxHeight were replaced by growMin/growMax to be
36643     // compatible with TextField growing config values
36644     if(this.minHeight !== undefined){
36645         this.growMin = this.minHeight;
36646     }
36647     if(this.maxHeight !== undefined){
36648         this.growMax = this.maxHeight;
36649     }
36650 };
36651
36652 Roo.extend(Roo.form.TextArea, Roo.form.TextField,  {
36653     /**
36654      * @cfg {Number} growMin The minimum height to allow when grow = true (defaults to 60)
36655      */
36656     growMin : 60,
36657     /**
36658      * @cfg {Number} growMax The maximum height to allow when grow = true (defaults to 1000)
36659      */
36660     growMax: 1000,
36661     /**
36662      * @cfg {Boolean} preventScrollbars True to prevent scrollbars from appearing regardless of how much text is
36663      * in the field (equivalent to setting overflow: hidden, defaults to false)
36664      */
36665     preventScrollbars: false,
36666     /**
36667      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
36668      * {tag: "textarea", style: "width:300px;height:60px;", autocomplete: "off"})
36669      */
36670
36671     // private
36672     onRender : function(ct, position){
36673         if(!this.el){
36674             this.defaultAutoCreate = {
36675                 tag: "textarea",
36676                 style:"width:300px;height:60px;",
36677                 autocomplete: "off"
36678             };
36679         }
36680         Roo.form.TextArea.superclass.onRender.call(this, ct, position);
36681         if(this.grow){
36682             this.textSizeEl = Roo.DomHelper.append(document.body, {
36683                 tag: "pre", cls: "x-form-grow-sizer"
36684             });
36685             if(this.preventScrollbars){
36686                 this.el.setStyle("overflow", "hidden");
36687             }
36688             this.el.setHeight(this.growMin);
36689         }
36690     },
36691
36692     onDestroy : function(){
36693         if(this.textSizeEl){
36694             this.textSizeEl.parentNode.removeChild(this.textSizeEl);
36695         }
36696         Roo.form.TextArea.superclass.onDestroy.call(this);
36697     },
36698
36699     // private
36700     onKeyUp : function(e){
36701         if(!e.isNavKeyPress() || e.getKey() == e.ENTER){
36702             this.autoSize();
36703         }
36704     },
36705
36706     /**
36707      * Automatically grows the field to accomodate the height of the text up to the maximum field height allowed.
36708      * This only takes effect if grow = true, and fires the autosize event if the height changes.
36709      */
36710     autoSize : function(){
36711         if(!this.grow || !this.textSizeEl){
36712             return;
36713         }
36714         var el = this.el;
36715         var v = el.dom.value;
36716         var ts = this.textSizeEl;
36717
36718         ts.innerHTML = '';
36719         ts.appendChild(document.createTextNode(v));
36720         v = ts.innerHTML;
36721
36722         Roo.fly(ts).setWidth(this.el.getWidth());
36723         if(v.length < 1){
36724             v = "&#160;&#160;";
36725         }else{
36726             if(Roo.isIE){
36727                 v = v.replace(/\n/g, '<p>&#160;</p>');
36728             }
36729             v += "&#160;\n&#160;";
36730         }
36731         ts.innerHTML = v;
36732         var h = Math.min(this.growMax, Math.max(ts.offsetHeight, this.growMin));
36733         if(h != this.lastHeight){
36734             this.lastHeight = h;
36735             this.el.setHeight(h);
36736             this.fireEvent("autosize", this, h);
36737         }
36738     }
36739 });/*
36740  * Based on:
36741  * Ext JS Library 1.1.1
36742  * Copyright(c) 2006-2007, Ext JS, LLC.
36743  *
36744  * Originally Released Under LGPL - original licence link has changed is not relivant.
36745  *
36746  * Fork - LGPL
36747  * <script type="text/javascript">
36748  */
36749  
36750
36751 /**
36752  * @class Roo.form.NumberField
36753  * @extends Roo.form.TextField
36754  * Numeric text field that provides automatic keystroke filtering and numeric validation.
36755  * @constructor
36756  * Creates a new NumberField
36757  * @param {Object} config Configuration options
36758  */
36759 Roo.form.NumberField = function(config){
36760     Roo.form.NumberField.superclass.constructor.call(this, config);
36761 };
36762
36763 Roo.extend(Roo.form.NumberField, Roo.form.TextField,  {
36764     /**
36765      * @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-field x-form-num-field")
36766      */
36767     fieldClass: "x-form-field x-form-num-field",
36768     /**
36769      * @cfg {Boolean} allowDecimals False to disallow decimal values (defaults to true)
36770      */
36771     allowDecimals : true,
36772     /**
36773      * @cfg {String} decimalSeparator Character(s) to allow as the decimal separator (defaults to '.')
36774      */
36775     decimalSeparator : ".",
36776     /**
36777      * @cfg {Number} decimalPrecision The maximum precision to display after the decimal separator (defaults to 2)
36778      */
36779     decimalPrecision : 2,
36780     /**
36781      * @cfg {Boolean} allowNegative False to prevent entering a negative sign (defaults to true)
36782      */
36783     allowNegative : true,
36784     /**
36785      * @cfg {Number} minValue The minimum allowed value (defaults to Number.NEGATIVE_INFINITY)
36786      */
36787     minValue : Number.NEGATIVE_INFINITY,
36788     /**
36789      * @cfg {Number} maxValue The maximum allowed value (defaults to Number.MAX_VALUE)
36790      */
36791     maxValue : Number.MAX_VALUE,
36792     /**
36793      * @cfg {String} minText Error text to display if the minimum value validation fails (defaults to "The minimum value for this field is {minValue}")
36794      */
36795     minText : "The minimum value for this field is {0}",
36796     /**
36797      * @cfg {String} maxText Error text to display if the maximum value validation fails (defaults to "The maximum value for this field is {maxValue}")
36798      */
36799     maxText : "The maximum value for this field is {0}",
36800     /**
36801      * @cfg {String} nanText Error text to display if the value is not a valid number.  For example, this can happen
36802      * if a valid character like '.' or '-' is left in the field with no number (defaults to "{value} is not a valid number")
36803      */
36804     nanText : "{0} is not a valid number",
36805
36806     // private
36807     initEvents : function(){
36808         Roo.form.NumberField.superclass.initEvents.call(this);
36809         var allowed = "0123456789";
36810         if(this.allowDecimals){
36811             allowed += this.decimalSeparator;
36812         }
36813         if(this.allowNegative){
36814             allowed += "-";
36815         }
36816         this.stripCharsRe = new RegExp('[^'+allowed+']', 'gi');
36817         var keyPress = function(e){
36818             var k = e.getKey();
36819             if(!Roo.isIE && (e.isSpecialKey() || k == e.BACKSPACE || k == e.DELETE)){
36820                 return;
36821             }
36822             var c = e.getCharCode();
36823             if(allowed.indexOf(String.fromCharCode(c)) === -1){
36824                 e.stopEvent();
36825             }
36826         };
36827         this.el.on("keypress", keyPress, this);
36828     },
36829
36830     // private
36831     validateValue : function(value){
36832         if(!Roo.form.NumberField.superclass.validateValue.call(this, value)){
36833             return false;
36834         }
36835         if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
36836              return true;
36837         }
36838         var num = this.parseValue(value);
36839         if(isNaN(num)){
36840             this.markInvalid(String.format(this.nanText, value));
36841             return false;
36842         }
36843         if(num < this.minValue){
36844             this.markInvalid(String.format(this.minText, this.minValue));
36845             return false;
36846         }
36847         if(num > this.maxValue){
36848             this.markInvalid(String.format(this.maxText, this.maxValue));
36849             return false;
36850         }
36851         return true;
36852     },
36853
36854     getValue : function(){
36855         return this.fixPrecision(this.parseValue(Roo.form.NumberField.superclass.getValue.call(this)));
36856     },
36857
36858     // private
36859     parseValue : function(value){
36860         value = parseFloat(String(value).replace(this.decimalSeparator, "."));
36861         return isNaN(value) ? '' : value;
36862     },
36863
36864     // private
36865     fixPrecision : function(value){
36866         var nan = isNaN(value);
36867         if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){
36868             return nan ? '' : value;
36869         }
36870         return parseFloat(value).toFixed(this.decimalPrecision);
36871     },
36872
36873     setValue : function(v){
36874         Roo.form.NumberField.superclass.setValue.call(this, String(v).replace(".", this.decimalSeparator));
36875     },
36876
36877     // private
36878     decimalPrecisionFcn : function(v){
36879         return Math.floor(v);
36880     },
36881
36882     beforeBlur : function(){
36883         var v = this.parseValue(this.getRawValue());
36884         if(v){
36885             this.setValue(this.fixPrecision(v));
36886         }
36887     }
36888 });/*
36889  * Based on:
36890  * Ext JS Library 1.1.1
36891  * Copyright(c) 2006-2007, Ext JS, LLC.
36892  *
36893  * Originally Released Under LGPL - original licence link has changed is not relivant.
36894  *
36895  * Fork - LGPL
36896  * <script type="text/javascript">
36897  */
36898  
36899 /**
36900  * @class Roo.form.DateField
36901  * @extends Roo.form.TriggerField
36902  * Provides a date input field with a {@link Roo.DatePicker} dropdown and automatic date validation.
36903 * @constructor
36904 * Create a new DateField
36905 * @param {Object} config
36906  */
36907 Roo.form.DateField = function(config){
36908     Roo.form.DateField.superclass.constructor.call(this, config);
36909     
36910       this.addEvents({
36911          
36912         /**
36913          * @event select
36914          * Fires when a date is selected
36915              * @param {Roo.form.DateField} combo This combo box
36916              * @param {Date} date The date selected
36917              */
36918         'select' : true
36919          
36920     });
36921     
36922     
36923     if(typeof this.minValue == "string") this.minValue = this.parseDate(this.minValue);
36924     if(typeof this.maxValue == "string") this.maxValue = this.parseDate(this.maxValue);
36925     this.ddMatch = null;
36926     if(this.disabledDates){
36927         var dd = this.disabledDates;
36928         var re = "(?:";
36929         for(var i = 0; i < dd.length; i++){
36930             re += dd[i];
36931             if(i != dd.length-1) re += "|";
36932         }
36933         this.ddMatch = new RegExp(re + ")");
36934     }
36935 };
36936
36937 Roo.extend(Roo.form.DateField, Roo.form.TriggerField,  {
36938     /**
36939      * @cfg {String} format
36940      * The default date format string which can be overriden for localization support.  The format must be
36941      * valid according to {@link Date#parseDate} (defaults to 'm/d/y').
36942      */
36943     format : "m/d/y",
36944     /**
36945      * @cfg {String} altFormats
36946      * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined
36947      * format (defaults to 'm/d/Y|m-d-y|m-d-Y|m/d|m-d|d').
36948      */
36949     altFormats : "m/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d",
36950     /**
36951      * @cfg {Array} disabledDays
36952      * An array of days to disable, 0 based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
36953      */
36954     disabledDays : null,
36955     /**
36956      * @cfg {String} disabledDaysText
36957      * The tooltip to display when the date falls on a disabled day (defaults to 'Disabled')
36958      */
36959     disabledDaysText : "Disabled",
36960     /**
36961      * @cfg {Array} disabledDates
36962      * An array of "dates" to disable, as strings. These strings will be used to build a dynamic regular
36963      * expression so they are very powerful. Some examples:
36964      * <ul>
36965      * <li>["03/08/2003", "09/16/2003"] would disable those exact dates</li>
36966      * <li>["03/08", "09/16"] would disable those days for every year</li>
36967      * <li>["^03/08"] would only match the beginning (useful if you are using short years)</li>
36968      * <li>["03/../2006"] would disable every day in March 2006</li>
36969      * <li>["^03"] would disable every day in every March</li>
36970      * </ul>
36971      * In order to support regular expressions, if you are using a date format that has "." in it, you will have to
36972      * escape the dot when restricting dates. For example: ["03\\.08\\.03"].
36973      */
36974     disabledDates : null,
36975     /**
36976      * @cfg {String} disabledDatesText
36977      * The tooltip text to display when the date falls on a disabled date (defaults to 'Disabled')
36978      */
36979     disabledDatesText : "Disabled",
36980     /**
36981      * @cfg {Date/String} minValue
36982      * The minimum allowed date. Can be either a Javascript date object or a string date in a
36983      * valid format (defaults to null).
36984      */
36985     minValue : null,
36986     /**
36987      * @cfg {Date/String} maxValue
36988      * The maximum allowed date. Can be either a Javascript date object or a string date in a
36989      * valid format (defaults to null).
36990      */
36991     maxValue : null,
36992     /**
36993      * @cfg {String} minText
36994      * The error text to display when the date in the cell is before minValue (defaults to
36995      * 'The date in this field must be after {minValue}').
36996      */
36997     minText : "The date in this field must be equal to or after {0}",
36998     /**
36999      * @cfg {String} maxText
37000      * The error text to display when the date in the cell is after maxValue (defaults to
37001      * 'The date in this field must be before {maxValue}').
37002      */
37003     maxText : "The date in this field must be equal to or before {0}",
37004     /**
37005      * @cfg {String} invalidText
37006      * The error text to display when the date in the field is invalid (defaults to
37007      * '{value} is not a valid date - it must be in the format {format}').
37008      */
37009     invalidText : "{0} is not a valid date - it must be in the format {1}",
37010     /**
37011      * @cfg {String} triggerClass
37012      * An additional CSS class used to style the trigger button.  The trigger will always get the
37013      * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-date-trigger'
37014      * which displays a calendar icon).
37015      */
37016     triggerClass : 'x-form-date-trigger',
37017     
37018
37019     /**
37020      * @cfg {bool} useIso
37021      * if enabled, then the date field will use a hidden field to store the 
37022      * real value as iso formated date. default (false)
37023      */ 
37024     useIso : false,
37025     /**
37026      * @cfg {String/Object} autoCreate
37027      * A DomHelper element spec, or true for a default element spec (defaults to
37028      * {tag: "input", type: "text", size: "10", autocomplete: "off"})
37029      */ 
37030     // private
37031     defaultAutoCreate : {tag: "input", type: "text", size: "10", autocomplete: "off"},
37032     
37033     // private
37034     hiddenField: false,
37035     
37036     onRender : function(ct, position)
37037     {
37038         Roo.form.DateField.superclass.onRender.call(this, ct, position);
37039         if (this.useIso) {
37040             this.el.dom.removeAttribute('name'); 
37041             this.hiddenField = this.el.insertSibling({ tag:'input', type:'hidden', name: this.name },
37042                     'before', true);
37043             this.hiddenField.value = this.formatDate(this.value, 'Y-m-d');
37044             // prevent input submission
37045             this.hiddenName = this.name;
37046         }
37047             
37048             
37049     },
37050     
37051     // private
37052     validateValue : function(value)
37053     {
37054         value = this.formatDate(value);
37055         if(!Roo.form.DateField.superclass.validateValue.call(this, value)){
37056             return false;
37057         }
37058         if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
37059              return true;
37060         }
37061         var svalue = value;
37062         value = this.parseDate(value);
37063         if(!value){
37064             this.markInvalid(String.format(this.invalidText, svalue, this.format));
37065             return false;
37066         }
37067         var time = value.getTime();
37068         if(this.minValue && time < this.minValue.getTime()){
37069             this.markInvalid(String.format(this.minText, this.formatDate(this.minValue)));
37070             return false;
37071         }
37072         if(this.maxValue && time > this.maxValue.getTime()){
37073             this.markInvalid(String.format(this.maxText, this.formatDate(this.maxValue)));
37074             return false;
37075         }
37076         if(this.disabledDays){
37077             var day = value.getDay();
37078             for(var i = 0; i < this.disabledDays.length; i++) {
37079                 if(day === this.disabledDays[i]){
37080                     this.markInvalid(this.disabledDaysText);
37081                     return false;
37082                 }
37083             }
37084         }
37085         var fvalue = this.formatDate(value);
37086         if(this.ddMatch && this.ddMatch.test(fvalue)){
37087             this.markInvalid(String.format(this.disabledDatesText, fvalue));
37088             return false;
37089         }
37090         return true;
37091     },
37092
37093     // private
37094     // Provides logic to override the default TriggerField.validateBlur which just returns true
37095     validateBlur : function(){
37096         return !this.menu || !this.menu.isVisible();
37097     },
37098
37099     /**
37100      * Returns the current date value of the date field.
37101      * @return {Date} The date value
37102      */
37103     getValue : function(){
37104         
37105         return  this.hiddenField ? this.hiddenField.value : this.parseDate(Roo.form.DateField.superclass.getValue.call(this)) || "";
37106     },
37107
37108     /**
37109      * Sets the value of the date field.  You can pass a date object or any string that can be parsed into a valid
37110      * date, using DateField.format as the date format, according to the same rules as {@link Date#parseDate}
37111      * (the default format used is "m/d/y").
37112      * <br />Usage:
37113      * <pre><code>
37114 //All of these calls set the same date value (May 4, 2006)
37115
37116 //Pass a date object:
37117 var dt = new Date('5/4/06');
37118 dateField.setValue(dt);
37119
37120 //Pass a date string (default format):
37121 dateField.setValue('5/4/06');
37122
37123 //Pass a date string (custom format):
37124 dateField.format = 'Y-m-d';
37125 dateField.setValue('2006-5-4');
37126 </code></pre>
37127      * @param {String/Date} date The date or valid date string
37128      */
37129     setValue : function(date){
37130         if (this.hiddenField) {
37131             this.hiddenField.value = this.formatDate(this.parseDate(date), 'Y-m-d');
37132         }
37133         Roo.form.DateField.superclass.setValue.call(this, this.formatDate(this.parseDate(date)));
37134     },
37135
37136     // private
37137     parseDate : function(value){
37138         if(!value || value instanceof Date){
37139             return value;
37140         }
37141         var v = Date.parseDate(value, this.format);
37142         if(!v && this.altFormats){
37143             if(!this.altFormatsArray){
37144                 this.altFormatsArray = this.altFormats.split("|");
37145             }
37146             for(var i = 0, len = this.altFormatsArray.length; i < len && !v; i++){
37147                 v = Date.parseDate(value, this.altFormatsArray[i]);
37148             }
37149         }
37150         return v;
37151     },
37152
37153     // private
37154     formatDate : function(date, fmt){
37155         return (!date || !(date instanceof Date)) ?
37156                date : date.dateFormat(fmt || this.format);
37157     },
37158
37159     // private
37160     menuListeners : {
37161         select: function(m, d){
37162             this.setValue(d);
37163             this.fireEvent('select', this, d);
37164         },
37165         show : function(){ // retain focus styling
37166             this.onFocus();
37167         },
37168         hide : function(){
37169             this.focus.defer(10, this);
37170             var ml = this.menuListeners;
37171             this.menu.un("select", ml.select,  this);
37172             this.menu.un("show", ml.show,  this);
37173             this.menu.un("hide", ml.hide,  this);
37174         }
37175     },
37176
37177     // private
37178     // Implements the default empty TriggerField.onTriggerClick function to display the DatePicker
37179     onTriggerClick : function(){
37180         if(this.disabled){
37181             return;
37182         }
37183         if(this.menu == null){
37184             this.menu = new Roo.menu.DateMenu();
37185         }
37186         Roo.apply(this.menu.picker,  {
37187             showClear: this.allowBlank,
37188             minDate : this.minValue,
37189             maxDate : this.maxValue,
37190             disabledDatesRE : this.ddMatch,
37191             disabledDatesText : this.disabledDatesText,
37192             disabledDays : this.disabledDays,
37193             disabledDaysText : this.disabledDaysText,
37194             format : this.format,
37195             minText : String.format(this.minText, this.formatDate(this.minValue)),
37196             maxText : String.format(this.maxText, this.formatDate(this.maxValue))
37197         });
37198         this.menu.on(Roo.apply({}, this.menuListeners, {
37199             scope:this
37200         }));
37201         this.menu.picker.setValue(this.getValue() || new Date());
37202         this.menu.show(this.el, "tl-bl?");
37203     },
37204
37205     beforeBlur : function(){
37206         var v = this.parseDate(this.getRawValue());
37207         if(v){
37208             this.setValue(v);
37209         }
37210     }
37211
37212     /** @cfg {Boolean} grow @hide */
37213     /** @cfg {Number} growMin @hide */
37214     /** @cfg {Number} growMax @hide */
37215     /**
37216      * @hide
37217      * @method autoSize
37218      */
37219 });/*
37220  * Based on:
37221  * Ext JS Library 1.1.1
37222  * Copyright(c) 2006-2007, Ext JS, LLC.
37223  *
37224  * Originally Released Under LGPL - original licence link has changed is not relivant.
37225  *
37226  * Fork - LGPL
37227  * <script type="text/javascript">
37228  */
37229  
37230
37231 /**
37232  * @class Roo.form.ComboBox
37233  * @extends Roo.form.TriggerField
37234  * A combobox control with support for autocomplete, remote-loading, paging and many other features.
37235  * @constructor
37236  * Create a new ComboBox.
37237  * @param {Object} config Configuration options
37238  */
37239 Roo.form.ComboBox = function(config){
37240     Roo.form.ComboBox.superclass.constructor.call(this, config);
37241     this.addEvents({
37242         /**
37243          * @event expand
37244          * Fires when the dropdown list is expanded
37245              * @param {Roo.form.ComboBox} combo This combo box
37246              */
37247         'expand' : true,
37248         /**
37249          * @event collapse
37250          * Fires when the dropdown list is collapsed
37251              * @param {Roo.form.ComboBox} combo This combo box
37252              */
37253         'collapse' : true,
37254         /**
37255          * @event beforeselect
37256          * Fires before a list item is selected. Return false to cancel the selection.
37257              * @param {Roo.form.ComboBox} combo This combo box
37258              * @param {Roo.data.Record} record The data record returned from the underlying store
37259              * @param {Number} index The index of the selected item in the dropdown list
37260              */
37261         'beforeselect' : true,
37262         /**
37263          * @event select
37264          * Fires when a list item is selected
37265              * @param {Roo.form.ComboBox} combo This combo box
37266              * @param {Roo.data.Record} record The data record returned from the underlying store (or false on clear)
37267              * @param {Number} index The index of the selected item in the dropdown list
37268              */
37269         'select' : true,
37270         /**
37271          * @event beforequery
37272          * Fires before all queries are processed. Return false to cancel the query or set cancel to true.
37273          * The event object passed has these properties:
37274              * @param {Roo.form.ComboBox} combo This combo box
37275              * @param {String} query The query
37276              * @param {Boolean} forceAll true to force "all" query
37277              * @param {Boolean} cancel true to cancel the query
37278              * @param {Object} e The query event object
37279              */
37280         'beforequery': true,
37281          /**
37282          * @event add
37283          * Fires when the 'add' icon is pressed (add a listener to enable add button)
37284              * @param {Roo.form.ComboBox} combo This combo box
37285              */
37286         'add' : true,
37287         /**
37288          * @event edit
37289          * Fires when the 'edit' icon is pressed (add a listener to enable add button)
37290              * @param {Roo.form.ComboBox} combo This combo box
37291              * @param {Roo.data.Record|false} record The data record returned from the underlying store (or false on nothing selected)
37292              */
37293         'edit' : true
37294         
37295         
37296     });
37297     if(this.transform){
37298         this.allowDomMove = false;
37299         var s = Roo.getDom(this.transform);
37300         if(!this.hiddenName){
37301             this.hiddenName = s.name;
37302         }
37303         if(!this.store){
37304             this.mode = 'local';
37305             var d = [], opts = s.options;
37306             for(var i = 0, len = opts.length;i < len; i++){
37307                 var o = opts[i];
37308                 var value = (Roo.isIE ? o.getAttributeNode('value').specified : o.hasAttribute('value')) ? o.value : o.text;
37309                 if(o.selected) {
37310                     this.value = value;
37311                 }
37312                 d.push([value, o.text]);
37313             }
37314             this.store = new Roo.data.SimpleStore({
37315                 'id': 0,
37316                 fields: ['value', 'text'],
37317                 data : d
37318             });
37319             this.valueField = 'value';
37320             this.displayField = 'text';
37321         }
37322         s.name = Roo.id(); // wipe out the name in case somewhere else they have a reference
37323         if(!this.lazyRender){
37324             this.target = true;
37325             this.el = Roo.DomHelper.insertBefore(s, this.autoCreate || this.defaultAutoCreate);
37326             s.parentNode.removeChild(s); // remove it
37327             this.render(this.el.parentNode);
37328         }else{
37329             s.parentNode.removeChild(s); // remove it
37330         }
37331
37332     }
37333     if (this.store) {
37334         this.store = Roo.factory(this.store, Roo.data);
37335     }
37336     
37337     this.selectedIndex = -1;
37338     if(this.mode == 'local'){
37339         if(config.queryDelay === undefined){
37340             this.queryDelay = 10;
37341         }
37342         if(config.minChars === undefined){
37343             this.minChars = 0;
37344         }
37345     }
37346 };
37347
37348 Roo.extend(Roo.form.ComboBox, Roo.form.TriggerField, {
37349     /**
37350      * @cfg {String/HTMLElement/Element} transform The id, DOM node or element of an existing select to convert to a ComboBox
37351      */
37352     /**
37353      * @cfg {Boolean} lazyRender True to prevent the ComboBox from rendering until requested (should always be used when
37354      * rendering into an Roo.Editor, defaults to false)
37355      */
37356     /**
37357      * @cfg {Boolean/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to:
37358      * {tag: "input", type: "text", size: "24", autocomplete: "off"})
37359      */
37360     /**
37361      * @cfg {Roo.data.Store} store The data store to which this combo is bound (defaults to undefined)
37362      */
37363     /**
37364      * @cfg {String} title If supplied, a header element is created containing this text and added into the top of
37365      * the dropdown list (defaults to undefined, with no header element)
37366      */
37367
37368      /**
37369      * @cfg {String/Roo.Template} tpl The template to use to render the output
37370      */
37371      
37372     // private
37373     defaultAutoCreate : {tag: "input", type: "text", size: "24", autocomplete: "off"},
37374     /**
37375      * @cfg {Number} listWidth The width in pixels of the dropdown list (defaults to the width of the ComboBox field)
37376      */
37377     listWidth: undefined,
37378     /**
37379      * @cfg {String} displayField The underlying data field name to bind to this CombBox (defaults to undefined if
37380      * mode = 'remote' or 'text' if mode = 'local')
37381      */
37382     displayField: undefined,
37383     /**
37384      * @cfg {String} valueField The underlying data value name to bind to this CombBox (defaults to undefined if
37385      * mode = 'remote' or 'value' if mode = 'local'). 
37386      * Note: use of a valueField requires the user make a selection
37387      * in order for a value to be mapped.
37388      */
37389     valueField: undefined,
37390     /**
37391      * @cfg {String} hiddenName If specified, a hidden form field with this name is dynamically generated to store the
37392      * field's data value (defaults to the underlying DOM element's name)
37393      */
37394     hiddenName: undefined,
37395     /**
37396      * @cfg {String} listClass CSS class to apply to the dropdown list element (defaults to '')
37397      */
37398     listClass: '',
37399     /**
37400      * @cfg {String} selectedClass CSS class to apply to the selected item in the dropdown list (defaults to 'x-combo-selected')
37401      */
37402     selectedClass: 'x-combo-selected',
37403     /**
37404      * @cfg {String} triggerClass An additional CSS class used to style the trigger button.  The trigger will always get the
37405      * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-arrow-trigger'
37406      * which displays a downward arrow icon).
37407      */
37408     triggerClass : 'x-form-arrow-trigger',
37409     /**
37410      * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
37411      */
37412     shadow:'sides',
37413     /**
37414      * @cfg {String} listAlign A valid anchor position value. See {@link Roo.Element#alignTo} for details on supported
37415      * anchor positions (defaults to 'tl-bl')
37416      */
37417     listAlign: 'tl-bl?',
37418     /**
37419      * @cfg {Number} maxHeight The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300)
37420      */
37421     maxHeight: 300,
37422     /**
37423      * @cfg {String} triggerAction The action to execute when the trigger field is activated.  Use 'all' to run the
37424      * query specified by the allQuery config option (defaults to 'query')
37425      */
37426     triggerAction: 'query',
37427     /**
37428      * @cfg {Number} minChars The minimum number of characters the user must type before autocomplete and typeahead activate
37429      * (defaults to 4, does not apply if editable = false)
37430      */
37431     minChars : 4,
37432     /**
37433      * @cfg {Boolean} typeAhead True to populate and autoselect the remainder of the text being typed after a configurable
37434      * delay (typeAheadDelay) if it matches a known value (defaults to false)
37435      */
37436     typeAhead: false,
37437     /**
37438      * @cfg {Number} queryDelay The length of time in milliseconds to delay between the start of typing and sending the
37439      * query to filter the dropdown list (defaults to 500 if mode = 'remote' or 10 if mode = 'local')
37440      */
37441     queryDelay: 500,
37442     /**
37443      * @cfg {Number} pageSize If greater than 0, a paging toolbar is displayed in the footer of the dropdown list and the
37444      * filter queries will execute with page start and limit parameters.  Only applies when mode = 'remote' (defaults to 0)
37445      */
37446     pageSize: 0,
37447     /**
37448      * @cfg {Boolean} selectOnFocus True to select any existing text in the field immediately on focus.  Only applies
37449      * when editable = true (defaults to false)
37450      */
37451     selectOnFocus:false,
37452     /**
37453      * @cfg {String} queryParam Name of the query as it will be passed on the querystring (defaults to 'query')
37454      */
37455     queryParam: 'query',
37456     /**
37457      * @cfg {String} loadingText The text to display in the dropdown list while data is loading.  Only applies
37458      * when mode = 'remote' (defaults to 'Loading...')
37459      */
37460     loadingText: 'Loading...',
37461     /**
37462      * @cfg {Boolean} resizable True to add a resize handle to the bottom of the dropdown list (defaults to false)
37463      */
37464     resizable: false,
37465     /**
37466      * @cfg {Number} handleHeight The height in pixels of the dropdown list resize handle if resizable = true (defaults to 8)
37467      */
37468     handleHeight : 8,
37469     /**
37470      * @cfg {Boolean} editable False to prevent the user from typing text directly into the field, just like a
37471      * traditional select (defaults to true)
37472      */
37473     editable: true,
37474     /**
37475      * @cfg {String} allQuery The text query to send to the server to return all records for the list with no filtering (defaults to '')
37476      */
37477     allQuery: '',
37478     /**
37479      * @cfg {String} mode Set to 'local' if the ComboBox loads local data (defaults to 'remote' which loads from the server)
37480      */
37481     mode: 'remote',
37482     /**
37483      * @cfg {Number} minListWidth The minimum width of the dropdown list in pixels (defaults to 70, will be ignored if
37484      * listWidth has a higher value)
37485      */
37486     minListWidth : 70,
37487     /**
37488      * @cfg {Boolean} forceSelection True to restrict the selected value to one of the values in the list, false to
37489      * allow the user to set arbitrary text into the field (defaults to false)
37490      */
37491     forceSelection:false,
37492     /**
37493      * @cfg {Number} typeAheadDelay The length of time in milliseconds to wait until the typeahead text is displayed
37494      * if typeAhead = true (defaults to 250)
37495      */
37496     typeAheadDelay : 250,
37497     /**
37498      * @cfg {String} valueNotFoundText When using a name/value combo, if the value passed to setValue is not found in
37499      * the store, valueNotFoundText will be displayed as the field text if defined (defaults to undefined)
37500      */
37501     valueNotFoundText : undefined,
37502     /**
37503      * @cfg {Boolean} blockFocus Prevents all focus calls, so it can work with things like HTML edtor bar
37504      */
37505     blockFocus : false,
37506     
37507     /**
37508      * @cfg {Boolean} disableClear Disable showing of clear button.
37509      */
37510     disableClear : false,
37511     /**
37512      * @cfg {Boolean} alwaysQuery  Disable caching of results, and always send query
37513      */
37514     alwaysQuery : false,
37515     
37516     //private
37517     addicon : false,
37518     editicon: false,
37519     
37520     
37521     // private
37522     onRender : function(ct, position){
37523         Roo.form.ComboBox.superclass.onRender.call(this, ct, position);
37524         if(this.hiddenName){
37525             this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name: this.hiddenName, id:  (this.hiddenId||this.hiddenName)},
37526                     'before', true);
37527             this.hiddenField.value =
37528                 this.hiddenValue !== undefined ? this.hiddenValue :
37529                 this.value !== undefined ? this.value : '';
37530
37531             // prevent input submission
37532             this.el.dom.removeAttribute('name');
37533         }
37534         if(Roo.isGecko){
37535             this.el.dom.setAttribute('autocomplete', 'off');
37536         }
37537
37538         var cls = 'x-combo-list';
37539
37540         this.list = new Roo.Layer({
37541             shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
37542         });
37543
37544         var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
37545         this.list.setWidth(lw);
37546         this.list.swallowEvent('mousewheel');
37547         this.assetHeight = 0;
37548
37549         if(this.title){
37550             this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
37551             this.assetHeight += this.header.getHeight();
37552         }
37553
37554         this.innerList = this.list.createChild({cls:cls+'-inner'});
37555         this.innerList.on('mouseover', this.onViewOver, this);
37556         this.innerList.on('mousemove', this.onViewMove, this);
37557         this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
37558         
37559         if(this.allowBlank && !this.pageSize && !this.disableClear){
37560             this.footer = this.list.createChild({cls:cls+'-ft'});
37561             this.pageTb = new Roo.Toolbar(this.footer);
37562            
37563         }
37564         if(this.pageSize){
37565             this.footer = this.list.createChild({cls:cls+'-ft'});
37566             this.pageTb = new Roo.PagingToolbar(this.footer, this.store,
37567                     {pageSize: this.pageSize});
37568             
37569         }
37570         
37571         if (this.pageTb && this.allowBlank && !this.disableClear) {
37572             var _this = this;
37573             this.pageTb.add(new Roo.Toolbar.Fill(), {
37574                 cls: 'x-btn-icon x-btn-clear',
37575                 text: '&#160;',
37576                 handler: function()
37577                 {
37578                     _this.collapse();
37579                     _this.clearValue();
37580                     _this.onSelect(false, -1);
37581                 }
37582             });
37583         }
37584         if (this.footer) {
37585             this.assetHeight += this.footer.getHeight();
37586         }
37587         
37588
37589         if(!this.tpl){
37590             this.tpl = '<div class="'+cls+'-item">{' + this.displayField + '}</div>';
37591         }
37592
37593         this.view = new Roo.View(this.innerList, this.tpl, {
37594             singleSelect:true, store: this.store, selectedClass: this.selectedClass
37595         });
37596
37597         this.view.on('click', this.onViewClick, this);
37598
37599         this.store.on('beforeload', this.onBeforeLoad, this);
37600         this.store.on('load', this.onLoad, this);
37601         this.store.on('loadexception', this.collapse, this);
37602
37603         if(this.resizable){
37604             this.resizer = new Roo.Resizable(this.list,  {
37605                pinned:true, handles:'se'
37606             });
37607             this.resizer.on('resize', function(r, w, h){
37608                 this.maxHeight = h-this.handleHeight-this.list.getFrameWidth('tb')-this.assetHeight;
37609                 this.listWidth = w;
37610                 this.innerList.setWidth(w - this.list.getFrameWidth('lr'));
37611                 this.restrictHeight();
37612             }, this);
37613             this[this.pageSize?'footer':'innerList'].setStyle('margin-bottom', this.handleHeight+'px');
37614         }
37615         if(!this.editable){
37616             this.editable = true;
37617             this.setEditable(false);
37618         }  
37619         
37620         
37621         if (typeof(this.events.add.listeners) != 'undefined') {
37622             
37623             this.addicon = this.wrap.createChild(
37624                 {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-combo-add' });  
37625        
37626             this.addicon.on('click', function(e) {
37627                 this.fireEvent('add', this);
37628             }, this);
37629         }
37630         if (typeof(this.events.edit.listeners) != 'undefined') {
37631             
37632             this.editicon = this.wrap.createChild(
37633                 {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-combo-edit' });  
37634             if (this.addicon) {
37635                 this.editicon.setStyle('margin-left', '40px');
37636             }
37637             this.editicon.on('click', function(e) {
37638                 
37639                 // we fire even  if inothing is selected..
37640                 this.fireEvent('edit', this, this.lastData );
37641                 
37642             }, this);
37643         }
37644         
37645         
37646         
37647     },
37648
37649     // private
37650     initEvents : function(){
37651         Roo.form.ComboBox.superclass.initEvents.call(this);
37652
37653         this.keyNav = new Roo.KeyNav(this.el, {
37654             "up" : function(e){
37655                 this.inKeyMode = true;
37656                 this.selectPrev();
37657             },
37658
37659             "down" : function(e){
37660                 if(!this.isExpanded()){
37661                     this.onTriggerClick();
37662                 }else{
37663                     this.inKeyMode = true;
37664                     this.selectNext();
37665                 }
37666             },
37667
37668             "enter" : function(e){
37669                 this.onViewClick();
37670                 //return true;
37671             },
37672
37673             "esc" : function(e){
37674                 this.collapse();
37675             },
37676
37677             "tab" : function(e){
37678                 this.onViewClick(false);
37679                 this.fireEvent("specialkey", this, e);
37680                 return true;
37681             },
37682
37683             scope : this,
37684
37685             doRelay : function(foo, bar, hname){
37686                 if(hname == 'down' || this.scope.isExpanded()){
37687                    return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
37688                 }
37689                 return true;
37690             },
37691
37692             forceKeyDown: true
37693         });
37694         this.queryDelay = Math.max(this.queryDelay || 10,
37695                 this.mode == 'local' ? 10 : 250);
37696         this.dqTask = new Roo.util.DelayedTask(this.initQuery, this);
37697         if(this.typeAhead){
37698             this.taTask = new Roo.util.DelayedTask(this.onTypeAhead, this);
37699         }
37700         if(this.editable !== false){
37701             this.el.on("keyup", this.onKeyUp, this);
37702         }
37703         if(this.forceSelection){
37704             this.on('blur', this.doForce, this);
37705         }
37706     },
37707
37708     onDestroy : function(){
37709         if(this.view){
37710             this.view.setStore(null);
37711             this.view.el.removeAllListeners();
37712             this.view.el.remove();
37713             this.view.purgeListeners();
37714         }
37715         if(this.list){
37716             this.list.destroy();
37717         }
37718         if(this.store){
37719             this.store.un('beforeload', this.onBeforeLoad, this);
37720             this.store.un('load', this.onLoad, this);
37721             this.store.un('loadexception', this.collapse, this);
37722         }
37723         Roo.form.ComboBox.superclass.onDestroy.call(this);
37724     },
37725
37726     // private
37727     fireKey : function(e){
37728         if(e.isNavKeyPress() && !this.list.isVisible()){
37729             this.fireEvent("specialkey", this, e);
37730         }
37731     },
37732
37733     // private
37734     onResize: function(w, h){
37735         Roo.form.ComboBox.superclass.onResize.apply(this, arguments);
37736         
37737         if(typeof w != 'number'){
37738             // we do not handle it!?!?
37739             return;
37740         }
37741         var tw = this.trigger.getWidth();
37742         tw += this.addicon ? this.addicon.getWidth() : 0;
37743         tw += this.editicon ? this.editicon.getWidth() : 0;
37744         var x = w - tw;
37745         this.el.setWidth( this.adjustWidth('input', x));
37746             
37747         this.trigger.setStyle('left', x+'px');
37748         
37749         if(this.list && this.listWidth === undefined){
37750             var lw = Math.max(x + this.trigger.getWidth(), this.minListWidth);
37751             this.list.setWidth(lw);
37752             this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
37753         }
37754         
37755     
37756         
37757     },
37758
37759     /**
37760      * Allow or prevent the user from directly editing the field text.  If false is passed,
37761      * the user will only be able to select from the items defined in the dropdown list.  This method
37762      * is the runtime equivalent of setting the 'editable' config option at config time.
37763      * @param {Boolean} value True to allow the user to directly edit the field text
37764      */
37765     setEditable : function(value){
37766         if(value == this.editable){
37767             return;
37768         }
37769         this.editable = value;
37770         if(!value){
37771             this.el.dom.setAttribute('readOnly', true);
37772             this.el.on('mousedown', this.onTriggerClick,  this);
37773             this.el.addClass('x-combo-noedit');
37774         }else{
37775             this.el.dom.setAttribute('readOnly', false);
37776             this.el.un('mousedown', this.onTriggerClick,  this);
37777             this.el.removeClass('x-combo-noedit');
37778         }
37779     },
37780
37781     // private
37782     onBeforeLoad : function(){
37783         if(!this.hasFocus){
37784             return;
37785         }
37786         this.innerList.update(this.loadingText ?
37787                '<div class="loading-indicator">'+this.loadingText+'</div>' : '');
37788         this.restrictHeight();
37789         this.selectedIndex = -1;
37790     },
37791
37792     // private
37793     onLoad : function(){
37794         if(!this.hasFocus){
37795             return;
37796         }
37797         if(this.store.getCount() > 0){
37798             this.expand();
37799             this.restrictHeight();
37800             if(this.lastQuery == this.allQuery){
37801                 if(this.editable){
37802                     this.el.dom.select();
37803                 }
37804                 if(!this.selectByValue(this.value, true)){
37805                     this.select(0, true);
37806                 }
37807             }else{
37808                 this.selectNext();
37809                 if(this.typeAhead && this.lastKey != Roo.EventObject.BACKSPACE && this.lastKey != Roo.EventObject.DELETE){
37810                     this.taTask.delay(this.typeAheadDelay);
37811                 }
37812             }
37813         }else{
37814             this.onEmptyResults();
37815         }
37816         //this.el.focus();
37817     },
37818
37819     // private
37820     onTypeAhead : function(){
37821         if(this.store.getCount() > 0){
37822             var r = this.store.getAt(0);
37823             var newValue = r.data[this.displayField];
37824             var len = newValue.length;
37825             var selStart = this.getRawValue().length;
37826             if(selStart != len){
37827                 this.setRawValue(newValue);
37828                 this.selectText(selStart, newValue.length);
37829             }
37830         }
37831     },
37832
37833     // private
37834     onSelect : function(record, index){
37835         if(this.fireEvent('beforeselect', this, record, index) !== false){
37836             this.setFromData(index > -1 ? record.data : false);
37837             this.collapse();
37838             this.fireEvent('select', this, record, index);
37839         }
37840     },
37841
37842     /**
37843      * Returns the currently selected field value or empty string if no value is set.
37844      * @return {String} value The selected value
37845      */
37846     getValue : function(){
37847         if(this.valueField){
37848             return typeof this.value != 'undefined' ? this.value : '';
37849         }else{
37850             return Roo.form.ComboBox.superclass.getValue.call(this);
37851         }
37852     },
37853
37854     /**
37855      * Clears any text/value currently set in the field
37856      */
37857     clearValue : function(){
37858         if(this.hiddenField){
37859             this.hiddenField.value = '';
37860         }
37861         this.value = '';
37862         this.setRawValue('');
37863         this.lastSelectionText = '';
37864         this.applyEmptyText();
37865     },
37866
37867     /**
37868      * Sets the specified value into the field.  If the value finds a match, the corresponding record text
37869      * will be displayed in the field.  If the value does not match the data value of an existing item,
37870      * and the valueNotFoundText config option is defined, it will be displayed as the default field text.
37871      * Otherwise the field will be blank (although the value will still be set).
37872      * @param {String} value The value to match
37873      */
37874     setValue : function(v){
37875         var text = v;
37876         if(this.valueField){
37877             var r = this.findRecord(this.valueField, v);
37878             if(r){
37879                 text = r.data[this.displayField];
37880             }else if(this.valueNotFoundText !== undefined){
37881                 text = this.valueNotFoundText;
37882             }
37883         }
37884         this.lastSelectionText = text;
37885         if(this.hiddenField){
37886             this.hiddenField.value = v;
37887         }
37888         Roo.form.ComboBox.superclass.setValue.call(this, text);
37889         this.value = v;
37890     },
37891     /**
37892      * @property {Object} the last set data for the element
37893      */
37894     
37895     lastData : false,
37896     /**
37897      * Sets the value of the field based on a object which is related to the record format for the store.
37898      * @param {Object} value the value to set as. or false on reset?
37899      */
37900     setFromData : function(o){
37901         var dv = ''; // display value
37902         var vv = ''; // value value..
37903         this.lastData = o;
37904         if (this.displayField) {
37905             dv = !o || typeof(o[this.displayField]) == 'undefined' ? '' : o[this.displayField];
37906         } else {
37907             // this is an error condition!!!
37908             Roo.log('no  displayField value set for '+ (this.name ? this.name : this.id));
37909         }
37910         
37911         if(this.valueField){
37912             vv = !o || typeof(o[this.valueField]) == 'undefined' ? dv : o[this.valueField];
37913         }
37914         if(this.hiddenField){
37915             this.hiddenField.value = vv;
37916             
37917             this.lastSelectionText = dv;
37918             Roo.form.ComboBox.superclass.setValue.call(this, dv);
37919             this.value = vv;
37920             return;
37921         }
37922         // no hidden field.. - we store the value in 'value', but still display
37923         // display field!!!!
37924         this.lastSelectionText = dv;
37925         Roo.form.ComboBox.superclass.setValue.call(this, dv);
37926         this.value = vv;
37927         
37928         
37929     },
37930     // private
37931     reset : function(){
37932         // overridden so that last data is reset..
37933         this.setValue(this.originalValue);
37934         this.clearInvalid();
37935         this.lastData = false;
37936     },
37937     // private
37938     findRecord : function(prop, value){
37939         var record;
37940         if(this.store.getCount() > 0){
37941             this.store.each(function(r){
37942                 if(r.data[prop] == value){
37943                     record = r;
37944                     return false;
37945                 }
37946             });
37947         }
37948         return record;
37949     },
37950
37951     // private
37952     onViewMove : function(e, t){
37953         this.inKeyMode = false;
37954     },
37955
37956     // private
37957     onViewOver : function(e, t){
37958         if(this.inKeyMode){ // prevent key nav and mouse over conflicts
37959             return;
37960         }
37961         var item = this.view.findItemFromChild(t);
37962         if(item){
37963             var index = this.view.indexOf(item);
37964             this.select(index, false);
37965         }
37966     },
37967
37968     // private
37969     onViewClick : function(doFocus)
37970     {
37971         var index = this.view.getSelectedIndexes()[0];
37972         var r = this.store.getAt(index);
37973         if(r){
37974             this.onSelect(r, index);
37975         }
37976         if(doFocus !== false && !this.blockFocus){
37977             this.el.focus();
37978         }
37979     },
37980
37981     // private
37982     restrictHeight : function(){
37983         this.innerList.dom.style.height = '';
37984         var inner = this.innerList.dom;
37985         var h = Math.max(inner.clientHeight, inner.offsetHeight, inner.scrollHeight);
37986         this.innerList.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
37987         this.list.beginUpdate();
37988         this.list.setHeight(this.innerList.getHeight()+this.list.getFrameWidth('tb')+(this.resizable?this.handleHeight:0)+this.assetHeight);
37989         this.list.alignTo(this.el, this.listAlign);
37990         this.list.endUpdate();
37991     },
37992
37993     // private
37994     onEmptyResults : function(){
37995         this.collapse();
37996     },
37997
37998     /**
37999      * Returns true if the dropdown list is expanded, else false.
38000      */
38001     isExpanded : function(){
38002         return this.list.isVisible();
38003     },
38004
38005     /**
38006      * Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire.
38007      * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
38008      * @param {String} value The data value of the item to select
38009      * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
38010      * selected item if it is not currently in view (defaults to true)
38011      * @return {Boolean} True if the value matched an item in the list, else false
38012      */
38013     selectByValue : function(v, scrollIntoView){
38014         if(v !== undefined && v !== null){
38015             var r = this.findRecord(this.valueField || this.displayField, v);
38016             if(r){
38017                 this.select(this.store.indexOf(r), scrollIntoView);
38018                 return true;
38019             }
38020         }
38021         return false;
38022     },
38023
38024     /**
38025      * Select an item in the dropdown list by its numeric index in the list. This function does NOT cause the select event to fire.
38026      * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
38027      * @param {Number} index The zero-based index of the list item to select
38028      * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
38029      * selected item if it is not currently in view (defaults to true)
38030      */
38031     select : function(index, scrollIntoView){
38032         this.selectedIndex = index;
38033         this.view.select(index);
38034         if(scrollIntoView !== false){
38035             var el = this.view.getNode(index);
38036             if(el){
38037                 this.innerList.scrollChildIntoView(el, false);
38038             }
38039         }
38040     },
38041
38042     // private
38043     selectNext : function(){
38044         var ct = this.store.getCount();
38045         if(ct > 0){
38046             if(this.selectedIndex == -1){
38047                 this.select(0);
38048             }else if(this.selectedIndex < ct-1){
38049                 this.select(this.selectedIndex+1);
38050             }
38051         }
38052     },
38053
38054     // private
38055     selectPrev : function(){
38056         var ct = this.store.getCount();
38057         if(ct > 0){
38058             if(this.selectedIndex == -1){
38059                 this.select(0);
38060             }else if(this.selectedIndex != 0){
38061                 this.select(this.selectedIndex-1);
38062             }
38063         }
38064     },
38065
38066     // private
38067     onKeyUp : function(e){
38068         if(this.editable !== false && !e.isSpecialKey()){
38069             this.lastKey = e.getKey();
38070             this.dqTask.delay(this.queryDelay);
38071         }
38072     },
38073
38074     // private
38075     validateBlur : function(){
38076         return !this.list || !this.list.isVisible();   
38077     },
38078
38079     // private
38080     initQuery : function(){
38081         this.doQuery(this.getRawValue());
38082     },
38083
38084     // private
38085     doForce : function(){
38086         if(this.el.dom.value.length > 0){
38087             this.el.dom.value =
38088                 this.lastSelectionText === undefined ? '' : this.lastSelectionText;
38089             this.applyEmptyText();
38090         }
38091     },
38092
38093     /**
38094      * Execute a query to filter the dropdown list.  Fires the beforequery event prior to performing the
38095      * query allowing the query action to be canceled if needed.
38096      * @param {String} query The SQL query to execute
38097      * @param {Boolean} forceAll True to force the query to execute even if there are currently fewer characters
38098      * in the field than the minimum specified by the minChars config option.  It also clears any filter previously
38099      * saved in the current store (defaults to false)
38100      */
38101     doQuery : function(q, forceAll){
38102         if(q === undefined || q === null){
38103             q = '';
38104         }
38105         var qe = {
38106             query: q,
38107             forceAll: forceAll,
38108             combo: this,
38109             cancel:false
38110         };
38111         if(this.fireEvent('beforequery', qe)===false || qe.cancel){
38112             return false;
38113         }
38114         q = qe.query;
38115         forceAll = qe.forceAll;
38116         if(forceAll === true || (q.length >= this.minChars)){
38117             if(this.lastQuery != q || this.alwaysQuery){
38118                 this.lastQuery = q;
38119                 if(this.mode == 'local'){
38120                     this.selectedIndex = -1;
38121                     if(forceAll){
38122                         this.store.clearFilter();
38123                     }else{
38124                         this.store.filter(this.displayField, q);
38125                     }
38126                     this.onLoad();
38127                 }else{
38128                     this.store.baseParams[this.queryParam] = q;
38129                     this.store.load({
38130                         params: this.getParams(q)
38131                     });
38132                     this.expand();
38133                 }
38134             }else{
38135                 this.selectedIndex = -1;
38136                 this.onLoad();   
38137             }
38138         }
38139     },
38140
38141     // private
38142     getParams : function(q){
38143         var p = {};
38144         //p[this.queryParam] = q;
38145         if(this.pageSize){
38146             p.start = 0;
38147             p.limit = this.pageSize;
38148         }
38149         return p;
38150     },
38151
38152     /**
38153      * Hides the dropdown list if it is currently expanded. Fires the 'collapse' event on completion.
38154      */
38155     collapse : function(){
38156         if(!this.isExpanded()){
38157             return;
38158         }
38159         this.list.hide();
38160         Roo.get(document).un('mousedown', this.collapseIf, this);
38161         Roo.get(document).un('mousewheel', this.collapseIf, this);
38162         if (!this.editable) {
38163             Roo.get(document).un('keydown', this.listKeyPress, this);
38164         }
38165         this.fireEvent('collapse', this);
38166     },
38167
38168     // private
38169     collapseIf : function(e){
38170         if(!e.within(this.wrap) && !e.within(this.list)){
38171             this.collapse();
38172         }
38173     },
38174
38175     /**
38176      * Expands the dropdown list if it is currently hidden. Fires the 'expand' event on completion.
38177      */
38178     expand : function(){
38179         if(this.isExpanded() || !this.hasFocus){
38180             return;
38181         }
38182         this.list.alignTo(this.el, this.listAlign);
38183         this.list.show();
38184         Roo.get(document).on('mousedown', this.collapseIf, this);
38185         Roo.get(document).on('mousewheel', this.collapseIf, this);
38186         if (!this.editable) {
38187             Roo.get(document).on('keydown', this.listKeyPress, this);
38188         }
38189         
38190         this.fireEvent('expand', this);
38191     },
38192
38193     // private
38194     // Implements the default empty TriggerField.onTriggerClick function
38195     onTriggerClick : function(){
38196         if(this.disabled){
38197             return;
38198         }
38199         if(this.isExpanded()){
38200             this.collapse();
38201             if (!this.blockFocus) {
38202                 this.el.focus();
38203             }
38204             
38205         }else {
38206             this.hasFocus = true;
38207             if(this.triggerAction == 'all') {
38208                 this.doQuery(this.allQuery, true);
38209             } else {
38210                 this.doQuery(this.getRawValue());
38211             }
38212             if (!this.blockFocus) {
38213                 this.el.focus();
38214             }
38215         }
38216     },
38217     listKeyPress : function(e)
38218     {
38219         //Roo.log('listkeypress');
38220         // scroll to first matching element based on key pres..
38221         if (e.isSpecialKey()) {
38222             return false;
38223         }
38224         var k = String.fromCharCode(e.getKey()).toUpperCase();
38225         //Roo.log(k);
38226         var match  = false;
38227         var csel = this.view.getSelectedNodes();
38228         var cselitem = false;
38229         if (csel.length) {
38230             var ix = this.view.indexOf(csel[0]);
38231             cselitem  = this.store.getAt(ix);
38232             if (!cselitem.get(this.displayField) || cselitem.get(this.displayField).substring(0,1).toUpperCase() != k) {
38233                 cselitem = false;
38234             }
38235             
38236         }
38237         
38238         this.store.each(function(v) { 
38239             if (cselitem) {
38240                 // start at existing selection.
38241                 if (cselitem.id == v.id) {
38242                     cselitem = false;
38243                 }
38244                 return;
38245             }
38246                 
38247             if (v.get(this.displayField) && v.get(this.displayField).substring(0,1).toUpperCase() == k) {
38248                 match = this.store.indexOf(v);
38249                 return false;
38250             }
38251         }, this);
38252         
38253         if (match === false) {
38254             return true; // no more action?
38255         }
38256         // scroll to?
38257         this.view.select(match);
38258         var sn = Roo.get(this.view.getSelectedNodes()[0])
38259         sn.scrollIntoView(sn.dom.parentNode, false);
38260     }
38261
38262     /** 
38263     * @cfg {Boolean} grow 
38264     * @hide 
38265     */
38266     /** 
38267     * @cfg {Number} growMin 
38268     * @hide 
38269     */
38270     /** 
38271     * @cfg {Number} growMax 
38272     * @hide 
38273     */
38274     /**
38275      * @hide
38276      * @method autoSize
38277      */
38278 });/*
38279  * Based on:
38280  * Ext JS Library 1.1.1
38281  * Copyright(c) 2006-2007, Ext JS, LLC.
38282  *
38283  * Originally Released Under LGPL - original licence link has changed is not relivant.
38284  *
38285  * Fork - LGPL
38286  * <script type="text/javascript">
38287  */
38288 /**
38289  * @class Roo.form.Checkbox
38290  * @extends Roo.form.Field
38291  * Single checkbox field.  Can be used as a direct replacement for traditional checkbox fields.
38292  * @constructor
38293  * Creates a new Checkbox
38294  * @param {Object} config Configuration options
38295  */
38296 Roo.form.Checkbox = function(config){
38297     Roo.form.Checkbox.superclass.constructor.call(this, config);
38298     this.addEvents({
38299         /**
38300          * @event check
38301          * Fires when the checkbox is checked or unchecked.
38302              * @param {Roo.form.Checkbox} this This checkbox
38303              * @param {Boolean} checked The new checked value
38304              */
38305         check : true
38306     });
38307 };
38308
38309 Roo.extend(Roo.form.Checkbox, Roo.form.Field,  {
38310     /**
38311      * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
38312      */
38313     focusClass : undefined,
38314     /**
38315      * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to "x-form-field")
38316      */
38317     fieldClass: "x-form-field",
38318     /**
38319      * @cfg {Boolean} checked True if the the checkbox should render already checked (defaults to false)
38320      */
38321     checked: false,
38322     /**
38323      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
38324      * {tag: "input", type: "checkbox", autocomplete: "off"})
38325      */
38326     defaultAutoCreate : { tag: "input", type: 'hidden', autocomplete: "off"},
38327     /**
38328      * @cfg {String} boxLabel The text that appears beside the checkbox
38329      */
38330     boxLabel : "",
38331     /**
38332      * @cfg {String} inputValue The value that should go into the generated input element's value attribute
38333      */  
38334     inputValue : '1',
38335     /**
38336      * @cfg {String} valueOff The value that should go into the generated input element's value when unchecked.
38337      */
38338      valueOff: '0', // value when not checked..
38339
38340     actionMode : 'viewEl', 
38341     //
38342     // private
38343     itemCls : 'x-menu-check-item x-form-item',
38344     groupClass : 'x-menu-group-item',
38345     inputType : 'hidden',
38346     
38347     
38348     inSetChecked: false, // check that we are not calling self...
38349     
38350     inputElement: false, // real input element?
38351     basedOn: false, // ????
38352     
38353     isFormField: true, // not sure where this is needed!!!!
38354
38355     onResize : function(){
38356         Roo.form.Checkbox.superclass.onResize.apply(this, arguments);
38357         if(!this.boxLabel){
38358             this.el.alignTo(this.wrap, 'c-c');
38359         }
38360     },
38361
38362     initEvents : function(){
38363         Roo.form.Checkbox.superclass.initEvents.call(this);
38364         this.el.on("click", this.onClick,  this);
38365         this.el.on("change", this.onClick,  this);
38366     },
38367
38368
38369     getResizeEl : function(){
38370         return this.wrap;
38371     },
38372
38373     getPositionEl : function(){
38374         return this.wrap;
38375     },
38376
38377     // private
38378     onRender : function(ct, position){
38379         Roo.form.Checkbox.superclass.onRender.call(this, ct, position);
38380         /*
38381         if(this.inputValue !== undefined){
38382             this.el.dom.value = this.inputValue;
38383         }
38384         */
38385         //this.wrap = this.el.wrap({cls: "x-form-check-wrap"});
38386         this.wrap = this.el.wrap({cls: 'x-menu-check-item '});
38387         var viewEl = this.wrap.createChild({ 
38388             tag: 'img', cls: 'x-menu-item-icon', style: 'margin: 0px;' ,src : Roo.BLANK_IMAGE_URL });
38389         this.viewEl = viewEl;   
38390         this.wrap.on('click', this.onClick,  this); 
38391         
38392         this.el.on('DOMAttrModified', this.setFromHidden,  this); //ff
38393         this.el.on('propertychange', this.setFromHidden,  this);  //ie
38394         
38395         
38396         
38397         if(this.boxLabel){
38398             this.wrap.createChild({tag: 'label', htmlFor: this.el.id, cls: 'x-form-cb-label', html: this.boxLabel});
38399         //    viewEl.on('click', this.onClick,  this); 
38400         }
38401         //if(this.checked){
38402             this.setChecked(this.checked);
38403         //}else{
38404             //this.checked = this.el.dom;
38405         //}
38406
38407     },
38408
38409     // private
38410     initValue : Roo.emptyFn,
38411
38412     /**
38413      * Returns the checked state of the checkbox.
38414      * @return {Boolean} True if checked, else false
38415      */
38416     getValue : function(){
38417         if(this.el){
38418             return String(this.el.dom.value) == String(this.inputValue ) ? this.inputValue : this.valueOff;
38419         }
38420         return this.valueOff;
38421         
38422     },
38423
38424         // private
38425     onClick : function(){ 
38426         this.setChecked(!this.checked);
38427
38428         //if(this.el.dom.checked != this.checked){
38429         //    this.setValue(this.el.dom.checked);
38430        // }
38431     },
38432
38433     /**
38434      * Sets the checked state of the checkbox.
38435      * On is always based on a string comparison between inputValue and the param.
38436      * @param {Boolean/String} value - the value to set 
38437      * @param {Boolean/String} suppressEvent - whether to suppress the checkchange event.
38438      */
38439     setValue : function(v,suppressEvent){
38440         
38441         
38442         //this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');
38443         //if(this.el && this.el.dom){
38444         //    this.el.dom.checked = this.checked;
38445         //    this.el.dom.defaultChecked = this.checked;
38446         //}
38447         this.setChecked(String(v) === String(this.inputValue), suppressEvent);
38448         //this.fireEvent("check", this, this.checked);
38449     },
38450     // private..
38451     setChecked : function(state,suppressEvent)
38452     {
38453         if (this.inSetChecked) {
38454             this.checked = state;
38455             return;
38456         }
38457         
38458     
38459         if(this.wrap){
38460             this.wrap[state ? 'addClass' : 'removeClass']('x-menu-item-checked');
38461         }
38462         this.checked = state;
38463         if(suppressEvent !== true){
38464             this.fireEvent('check', this, state);
38465         }
38466         this.inSetChecked = true;
38467         this.el.dom.value = state ? this.inputValue : this.valueOff;
38468         this.inSetChecked = false;
38469         
38470     },
38471     // handle setting of hidden value by some other method!!?!?
38472     setFromHidden: function()
38473     {
38474         if(!this.el){
38475             return;
38476         }
38477         //console.log("SET FROM HIDDEN");
38478         //alert('setFrom hidden');
38479         this.setValue(this.el.dom.value);
38480     },
38481     
38482     onDestroy : function()
38483     {
38484         if(this.viewEl){
38485             Roo.get(this.viewEl).remove();
38486         }
38487          
38488         Roo.form.Checkbox.superclass.onDestroy.call(this);
38489     }
38490
38491 });/*
38492  * Based on:
38493  * Ext JS Library 1.1.1
38494  * Copyright(c) 2006-2007, Ext JS, LLC.
38495  *
38496  * Originally Released Under LGPL - original licence link has changed is not relivant.
38497  *
38498  * Fork - LGPL
38499  * <script type="text/javascript">
38500  */
38501  
38502 /**
38503  * @class Roo.form.Radio
38504  * @extends Roo.form.Checkbox
38505  * Single radio field.  Same as Checkbox, but provided as a convenience for automatically setting the input type.
38506  * Radio grouping is handled automatically by the browser if you give each radio in a group the same name.
38507  * @constructor
38508  * Creates a new Radio
38509  * @param {Object} config Configuration options
38510  */
38511 Roo.form.Radio = function(){
38512     Roo.form.Radio.superclass.constructor.apply(this, arguments);
38513 };
38514 Roo.extend(Roo.form.Radio, Roo.form.Checkbox, {
38515     inputType: 'radio',
38516
38517     /**
38518      * If this radio is part of a group, it will return the selected value
38519      * @return {String}
38520      */
38521     getGroupValue : function(){
38522         return this.el.up('form').child('input[name='+this.el.dom.name+']:checked', true).value;
38523     }
38524 });//<script type="text/javascript">
38525
38526 /*
38527  * Ext JS Library 1.1.1
38528  * Copyright(c) 2006-2007, Ext JS, LLC.
38529  * licensing@extjs.com
38530  * 
38531  * http://www.extjs.com/license
38532  */
38533  
38534  /*
38535   * 
38536   * Known bugs:
38537   * Default CSS appears to render it as fixed text by default (should really be Sans-Serif)
38538   * - IE ? - no idea how much works there.
38539   * 
38540   * 
38541   * 
38542   */
38543  
38544
38545 /**
38546  * @class Ext.form.HtmlEditor
38547  * @extends Ext.form.Field
38548  * Provides a lightweight HTML Editor component.
38549  * WARNING - THIS CURRENTlY ONLY WORKS ON FIREFOX - USE FCKeditor for a cross platform version
38550  * 
38551  * <br><br><b>Note: The focus/blur and validation marking functionality inherited from Ext.form.Field is NOT
38552  * supported by this editor.</b><br/><br/>
38553  * An Editor is a sensitive component that can't be used in all spots standard fields can be used. Putting an Editor within
38554  * any element that has display set to 'none' can cause problems in Safari and Firefox.<br/><br/>
38555  */
38556 Roo.form.HtmlEditor = Roo.extend(Roo.form.Field, {
38557       /**
38558      * @cfg {Array} toolbars Array of toolbars. - defaults to just the Standard one
38559      */
38560     toolbars : false,
38561     /**
38562      * @cfg {String} createLinkText The default text for the create link prompt
38563      */
38564     createLinkText : 'Please enter the URL for the link:',
38565     /**
38566      * @cfg {String} defaultLinkValue The default value for the create link prompt (defaults to http:/ /)
38567      */
38568     defaultLinkValue : 'http:/'+'/',
38569    
38570      /**
38571      * @cfg {String} resizable  's' or 'se' or 'e' - wrapps the element in a
38572      *                        Roo.resizable.
38573      */
38574     resizable : false,
38575      /**
38576      * @cfg {Number} height (in pixels)
38577      */   
38578     height: 300,
38579    /**
38580      * @cfg {Number} width (in pixels)
38581      */   
38582     width: 500,
38583     
38584     /**
38585      * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets.
38586      * 
38587      */
38588     stylesheets: false,
38589     
38590     // id of frame..
38591     frameId: false,
38592     
38593     // private properties
38594     validationEvent : false,
38595     deferHeight: true,
38596     initialized : false,
38597     activated : false,
38598     sourceEditMode : false,
38599     onFocus : Roo.emptyFn,
38600     iframePad:3,
38601     hideMode:'offsets',
38602     
38603     defaultAutoCreate : { // modified by initCompnoent..
38604         tag: "textarea",
38605         style:"width:500px;height:300px;",
38606         autocomplete: "off"
38607     },
38608
38609     // private
38610     initComponent : function(){
38611         this.addEvents({
38612             /**
38613              * @event initialize
38614              * Fires when the editor is fully initialized (including the iframe)
38615              * @param {HtmlEditor} this
38616              */
38617             initialize: true,
38618             /**
38619              * @event activate
38620              * Fires when the editor is first receives the focus. Any insertion must wait
38621              * until after this event.
38622              * @param {HtmlEditor} this
38623              */
38624             activate: true,
38625              /**
38626              * @event beforesync
38627              * Fires before the textarea is updated with content from the editor iframe. Return false
38628              * to cancel the sync.
38629              * @param {HtmlEditor} this
38630              * @param {String} html
38631              */
38632             beforesync: true,
38633              /**
38634              * @event beforepush
38635              * Fires before the iframe editor is updated with content from the textarea. Return false
38636              * to cancel the push.
38637              * @param {HtmlEditor} this
38638              * @param {String} html
38639              */
38640             beforepush: true,
38641              /**
38642              * @event sync
38643              * Fires when the textarea is updated with content from the editor iframe.
38644              * @param {HtmlEditor} this
38645              * @param {String} html
38646              */
38647             sync: true,
38648              /**
38649              * @event push
38650              * Fires when the iframe editor is updated with content from the textarea.
38651              * @param {HtmlEditor} this
38652              * @param {String} html
38653              */
38654             push: true,
38655              /**
38656              * @event editmodechange
38657              * Fires when the editor switches edit modes
38658              * @param {HtmlEditor} this
38659              * @param {Boolean} sourceEdit True if source edit, false if standard editing.
38660              */
38661             editmodechange: true,
38662             /**
38663              * @event editorevent
38664              * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
38665              * @param {HtmlEditor} this
38666              */
38667             editorevent: true
38668         });
38669         this.defaultAutoCreate =  {
38670             tag: "textarea",
38671             style:'width: ' + this.width + 'px;height: ' + this.height + 'px;',
38672             autocomplete: "off"
38673         };
38674     },
38675
38676     /**
38677      * Protected method that will not generally be called directly. It
38678      * is called when the editor creates its toolbar. Override this method if you need to
38679      * add custom toolbar buttons.
38680      * @param {HtmlEditor} editor
38681      */
38682     createToolbar : function(editor){
38683         if (!editor.toolbars || !editor.toolbars.length) {
38684             editor.toolbars = [ new Roo.form.HtmlEditor.ToolbarStandard() ]; // can be empty?
38685         }
38686         
38687         for (var i =0 ; i < editor.toolbars.length;i++) {
38688             editor.toolbars[i] = Roo.factory(editor.toolbars[i], Roo.form.HtmlEditor);
38689             editor.toolbars[i].init(editor);
38690         }
38691          
38692         
38693     },
38694
38695     /**
38696      * Protected method that will not generally be called directly. It
38697      * is called when the editor initializes the iframe with HTML contents. Override this method if you
38698      * want to change the initialization markup of the iframe (e.g. to add stylesheets).
38699      */
38700     getDocMarkup : function(){
38701         // body styles..
38702         var st = '';
38703         if (this.stylesheets === false) {
38704             
38705             Roo.get(document.head).select('style').each(function(node) {
38706                 st += node.dom.outerHTML || new XMLSerializer().serializeToString(node.dom);
38707             });
38708             
38709             Roo.get(document.head).select('link').each(function(node) { 
38710                 st += node.dom.outerHTML || new XMLSerializer().serializeToString(node.dom);
38711             });
38712             
38713         } else if (!this.stylesheets.length) {
38714                 // simple..
38715                 st = '<style type="text/css">' +
38716                     'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
38717                    '</style>';
38718         } else {
38719             Roo.each(this.stylesheets, function(s) {
38720                 st += '<link rel="stylesheet" type="text/css" href="' + s +'" />'
38721             });
38722             
38723         }
38724         
38725         return '<html><head>' + st  +
38726             //<style type="text/css">' +
38727             //'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
38728             //'</style>' +
38729             ' </head><body></body></html>';
38730     },
38731
38732     // private
38733     onRender : function(ct, position)
38734     {
38735         var _t = this;
38736         Roo.form.HtmlEditor.superclass.onRender.call(this, ct, position);
38737         this.el.dom.style.border = '0 none';
38738         this.el.dom.setAttribute('tabIndex', -1);
38739         this.el.addClass('x-hidden');
38740         if(Roo.isIE){ // fix IE 1px bogus margin
38741             this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')
38742         }
38743         this.wrap = this.el.wrap({
38744             cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
38745         });
38746         
38747         if (this.resizable) {
38748             this.resizeEl = new Roo.Resizable(this.wrap, {
38749                 pinned : true,
38750                 wrap: true,
38751                 dynamic : true,
38752                 minHeight : this.height,
38753                 height: this.height,
38754                 handles : this.resizable,
38755                 width: this.width,
38756                 listeners : {
38757                     resize : function(r, w, h) {
38758                         _t.onResize(w,h); // -something
38759                     }
38760                 }
38761             });
38762             
38763         }
38764
38765         this.frameId = Roo.id();
38766         
38767         this.createToolbar(this);
38768         
38769       
38770         
38771         var iframe = this.wrap.createChild({
38772             tag: 'iframe',
38773             id: this.frameId,
38774             name: this.frameId,
38775             frameBorder : 'no',
38776             'src' : Roo.SSL_SECURE_URL ? Roo.SSL_SECURE_URL  :  "javascript:false"
38777         }, this.el
38778         );
38779         
38780        // console.log(iframe);
38781         //this.wrap.dom.appendChild(iframe);
38782
38783         this.iframe = iframe.dom;
38784
38785          this.assignDocWin();
38786         
38787         this.doc.designMode = 'on';
38788        
38789         this.doc.open();
38790         this.doc.write(this.getDocMarkup());
38791         this.doc.close();
38792
38793         
38794         var task = { // must defer to wait for browser to be ready
38795             run : function(){
38796                 //console.log("run task?" + this.doc.readyState);
38797                 this.assignDocWin();
38798                 if(this.doc.body || this.doc.readyState == 'complete'){
38799                     try {
38800                         this.doc.designMode="on";
38801                     } catch (e) {
38802                         return;
38803                     }
38804                     Roo.TaskMgr.stop(task);
38805                     this.initEditor.defer(10, this);
38806                 }
38807             },
38808             interval : 10,
38809             duration:10000,
38810             scope: this
38811         };
38812         Roo.TaskMgr.start(task);
38813
38814         if(!this.width){
38815             this.setSize(this.wrap.getSize());
38816         }
38817         if (this.resizeEl) {
38818             this.resizeEl.resizeTo.defer(100, this.resizeEl,[ this.width,this.height ] );
38819             // should trigger onReize..
38820         }
38821     },
38822
38823     // private
38824     onResize : function(w, h)
38825     {
38826         //Roo.log('resize: ' +w + ',' + h );
38827         Roo.form.HtmlEditor.superclass.onResize.apply(this, arguments);
38828         if(this.el && this.iframe){
38829             if(typeof w == 'number'){
38830                 var aw = w - this.wrap.getFrameWidth('lr');
38831                 this.el.setWidth(this.adjustWidth('textarea', aw));
38832                 this.iframe.style.width = aw + 'px';
38833             }
38834             if(typeof h == 'number'){
38835                 var tbh = 0;
38836                 for (var i =0; i < this.toolbars.length;i++) {
38837                     // fixme - ask toolbars for heights?
38838                     tbh += this.toolbars[i].tb.el.getHeight();
38839                     if (this.toolbars[i].footer) {
38840                         tbh += this.toolbars[i].footer.el.getHeight();
38841                     }
38842                 }
38843                 
38844                 
38845                 
38846                 
38847                 var ah = h - this.wrap.getFrameWidth('tb') - tbh;// this.tb.el.getHeight();
38848                 ah -= 5; // knock a few pixes off for look..
38849                 this.el.setHeight(this.adjustWidth('textarea', ah));
38850                 this.iframe.style.height = ah + 'px';
38851                 if(this.doc){
38852                     (this.doc.body || this.doc.documentElement).style.height = (ah - (this.iframePad*2)) + 'px';
38853                 }
38854             }
38855         }
38856     },
38857
38858     /**
38859      * Toggles the editor between standard and source edit mode.
38860      * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
38861      */
38862     toggleSourceEdit : function(sourceEditMode){
38863         
38864         this.sourceEditMode = sourceEditMode === true;
38865         
38866         if(this.sourceEditMode){
38867           
38868             this.syncValue();
38869             this.iframe.className = 'x-hidden';
38870             this.el.removeClass('x-hidden');
38871             this.el.dom.removeAttribute('tabIndex');
38872             this.el.focus();
38873         }else{
38874              
38875             this.pushValue();
38876             this.iframe.className = '';
38877             this.el.addClass('x-hidden');
38878             this.el.dom.setAttribute('tabIndex', -1);
38879             this.deferFocus();
38880         }
38881         this.setSize(this.wrap.getSize());
38882         this.fireEvent('editmodechange', this, this.sourceEditMode);
38883     },
38884
38885     // private used internally
38886     createLink : function(){
38887         var url = prompt(this.createLinkText, this.defaultLinkValue);
38888         if(url && url != 'http:/'+'/'){
38889             this.relayCmd('createlink', url);
38890         }
38891     },
38892
38893     // private (for BoxComponent)
38894     adjustSize : Roo.BoxComponent.prototype.adjustSize,
38895
38896     // private (for BoxComponent)
38897     getResizeEl : function(){
38898         return this.wrap;
38899     },
38900
38901     // private (for BoxComponent)
38902     getPositionEl : function(){
38903         return this.wrap;
38904     },
38905
38906     // private
38907     initEvents : function(){
38908         this.originalValue = this.getValue();
38909     },
38910
38911     /**
38912      * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
38913      * @method
38914      */
38915     markInvalid : Roo.emptyFn,
38916     /**
38917      * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
38918      * @method
38919      */
38920     clearInvalid : Roo.emptyFn,
38921
38922     setValue : function(v){
38923         Roo.form.HtmlEditor.superclass.setValue.call(this, v);
38924         this.pushValue();
38925     },
38926
38927     /**
38928      * Protected method that will not generally be called directly. If you need/want
38929      * custom HTML cleanup, this is the method you should override.
38930      * @param {String} html The HTML to be cleaned
38931      * return {String} The cleaned HTML
38932      */
38933     cleanHtml : function(html){
38934         html = String(html);
38935         if(html.length > 5){
38936             if(Roo.isSafari){ // strip safari nonsense
38937                 html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');
38938             }
38939         }
38940         if(html == '&nbsp;'){
38941             html = '';
38942         }
38943         return html;
38944     },
38945
38946     /**
38947      * Protected method that will not generally be called directly. Syncs the contents
38948      * of the editor iframe with the textarea.
38949      */
38950     syncValue : function(){
38951         if(this.initialized){
38952             var bd = (this.doc.body || this.doc.documentElement);
38953             this.cleanUpPaste();
38954             var html = bd.innerHTML;
38955             if(Roo.isSafari){
38956                 var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!
38957                 var m = bs.match(/text-align:(.*?);/i);
38958                 if(m && m[1]){
38959                     html = '<div style="'+m[0]+'">' + html + '</div>';
38960                 }
38961             }
38962             html = this.cleanHtml(html);
38963             if(this.fireEvent('beforesync', this, html) !== false){
38964                 this.el.dom.value = html;
38965                 this.fireEvent('sync', this, html);
38966             }
38967         }
38968     },
38969
38970     /**
38971      * Protected method that will not generally be called directly. Pushes the value of the textarea
38972      * into the iframe editor.
38973      */
38974     pushValue : function(){
38975         if(this.initialized){
38976             var v = this.el.dom.value;
38977             if(v.length < 1){
38978                 v = '&#160;';
38979             }
38980             
38981             if(this.fireEvent('beforepush', this, v) !== false){
38982                 var d = (this.doc.body || this.doc.documentElement);
38983                 d.innerHTML = v;
38984                 this.cleanUpPaste();
38985                 this.el.dom.value = d.innerHTML;
38986                 this.fireEvent('push', this, v);
38987             }
38988         }
38989     },
38990
38991     // private
38992     deferFocus : function(){
38993         this.focus.defer(10, this);
38994     },
38995
38996     // doc'ed in Field
38997     focus : function(){
38998         if(this.win && !this.sourceEditMode){
38999             this.win.focus();
39000         }else{
39001             this.el.focus();
39002         }
39003     },
39004     
39005     assignDocWin: function()
39006     {
39007         var iframe = this.iframe;
39008         
39009          if(Roo.isIE){
39010             this.doc = iframe.contentWindow.document;
39011             this.win = iframe.contentWindow;
39012         } else {
39013             if (!Roo.get(this.frameId)) {
39014                 return;
39015             }
39016             this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
39017             this.win = Roo.get(this.frameId).dom.contentWindow;
39018         }
39019     },
39020     
39021     // private
39022     initEditor : function(){
39023         //console.log("INIT EDITOR");
39024         this.assignDocWin();
39025         
39026         
39027         
39028         this.doc.designMode="on";
39029         this.doc.open();
39030         this.doc.write(this.getDocMarkup());
39031         this.doc.close();
39032         
39033         var dbody = (this.doc.body || this.doc.documentElement);
39034         //var ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat');
39035         // this copies styles from the containing element into thsi one..
39036         // not sure why we need all of this..
39037         var ss = this.el.getStyles('font-size', 'background-image', 'background-repeat');
39038         ss['background-attachment'] = 'fixed'; // w3c
39039         dbody.bgProperties = 'fixed'; // ie
39040         Roo.DomHelper.applyStyles(dbody, ss);
39041         Roo.EventManager.on(this.doc, {
39042             //'mousedown': this.onEditorEvent,
39043             'mouseup': this.onEditorEvent,
39044             'dblclick': this.onEditorEvent,
39045             'click': this.onEditorEvent,
39046             'keyup': this.onEditorEvent,
39047             buffer:100,
39048             scope: this
39049         });
39050         if(Roo.isGecko){
39051             Roo.EventManager.on(this.doc, 'keypress', this.mozKeyPress, this);
39052         }
39053         if(Roo.isIE || Roo.isSafari || Roo.isOpera){
39054             Roo.EventManager.on(this.doc, 'keydown', this.fixKeys, this);
39055         }
39056         this.initialized = true;
39057
39058         this.fireEvent('initialize', this);
39059         this.pushValue();
39060     },
39061
39062     // private
39063     onDestroy : function(){
39064         
39065         
39066         
39067         if(this.rendered){
39068             
39069             for (var i =0; i < this.toolbars.length;i++) {
39070                 // fixme - ask toolbars for heights?
39071                 this.toolbars[i].onDestroy();
39072             }
39073             
39074             this.wrap.dom.innerHTML = '';
39075             this.wrap.remove();
39076         }
39077     },
39078
39079     // private
39080     onFirstFocus : function(){
39081         
39082         this.assignDocWin();
39083         
39084         
39085         this.activated = true;
39086         for (var i =0; i < this.toolbars.length;i++) {
39087             this.toolbars[i].onFirstFocus();
39088         }
39089        
39090         if(Roo.isGecko){ // prevent silly gecko errors
39091             this.win.focus();
39092             var s = this.win.getSelection();
39093             if(!s.focusNode || s.focusNode.nodeType != 3){
39094                 var r = s.getRangeAt(0);
39095                 r.selectNodeContents((this.doc.body || this.doc.documentElement));
39096                 r.collapse(true);
39097                 this.deferFocus();
39098             }
39099             try{
39100                 this.execCmd('useCSS', true);
39101                 this.execCmd('styleWithCSS', false);
39102             }catch(e){}
39103         }
39104         this.fireEvent('activate', this);
39105     },
39106
39107     // private
39108     adjustFont: function(btn){
39109         var adjust = btn.cmd == 'increasefontsize' ? 1 : -1;
39110         //if(Roo.isSafari){ // safari
39111         //    adjust *= 2;
39112        // }
39113         var v = parseInt(this.doc.queryCommandValue('FontSize')|| 3, 10);
39114         if(Roo.isSafari){ // safari
39115             var sm = { 10 : 1, 13: 2, 16:3, 18:4, 24: 5, 32:6, 48: 7 };
39116             v =  (v < 10) ? 10 : v;
39117             v =  (v > 48) ? 48 : v;
39118             v = typeof(sm[v]) == 'undefined' ? 1 : sm[v];
39119             
39120         }
39121         
39122         
39123         v = Math.max(1, v+adjust);
39124         
39125         this.execCmd('FontSize', v  );
39126     },
39127
39128     onEditorEvent : function(e){
39129         this.fireEvent('editorevent', this, e);
39130       //  this.updateToolbar();
39131         this.syncValue();
39132     },
39133
39134     insertTag : function(tg)
39135     {
39136         // could be a bit smarter... -> wrap the current selected tRoo..
39137         
39138         this.execCmd("formatblock",   tg);
39139         
39140     },
39141     
39142     insertText : function(txt)
39143     {
39144         
39145         
39146         range = this.createRange();
39147         range.deleteContents();
39148                //alert(Sender.getAttribute('label'));
39149                
39150         range.insertNode(this.doc.createTextNode(txt));
39151     } ,
39152     
39153     // private
39154     relayBtnCmd : function(btn){
39155         this.relayCmd(btn.cmd);
39156     },
39157
39158     /**
39159      * Executes a Midas editor command on the editor document and performs necessary focus and
39160      * toolbar updates. <b>This should only be called after the editor is initialized.</b>
39161      * @param {String} cmd The Midas command
39162      * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
39163      */
39164     relayCmd : function(cmd, value){
39165         this.win.focus();
39166         this.execCmd(cmd, value);
39167         this.fireEvent('editorevent', this);
39168         //this.updateToolbar();
39169         this.deferFocus();
39170     },
39171
39172     /**
39173      * Executes a Midas editor command directly on the editor document.
39174      * For visual commands, you should use {@link #relayCmd} instead.
39175      * <b>This should only be called after the editor is initialized.</b>
39176      * @param {String} cmd The Midas command
39177      * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
39178      */
39179     execCmd : function(cmd, value){
39180         this.doc.execCommand(cmd, false, value === undefined ? null : value);
39181         this.syncValue();
39182     },
39183
39184    
39185     /**
39186      * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated
39187      * to insert tRoo.
39188      * @param {String} text
39189      */
39190     insertAtCursor : function(text){
39191         if(!this.activated){
39192             return;
39193         }
39194         if(Roo.isIE){
39195             this.win.focus();
39196             var r = this.doc.selection.createRange();
39197             if(r){
39198                 r.collapse(true);
39199                 r.pasteHTML(text);
39200                 this.syncValue();
39201                 this.deferFocus();
39202             }
39203         }else if(Roo.isGecko || Roo.isOpera || Roo.isSafari){
39204             this.win.focus();
39205             this.execCmd('InsertHTML', text);
39206             this.deferFocus();
39207         }
39208     },
39209  // private
39210     mozKeyPress : function(e){
39211         if(e.ctrlKey){
39212             var c = e.getCharCode(), cmd;
39213           
39214             if(c > 0){
39215                 c = String.fromCharCode(c).toLowerCase();
39216                 switch(c){
39217                     case 'b':
39218                         cmd = 'bold';
39219                     break;
39220                     case 'i':
39221                         cmd = 'italic';
39222                     break;
39223                     case 'u':
39224                         cmd = 'underline';
39225                     case 'v':
39226                         this.cleanUpPaste.defer(100, this);
39227                         return;
39228                     break;
39229                 }
39230                 if(cmd){
39231                     this.win.focus();
39232                     this.execCmd(cmd);
39233                     this.deferFocus();
39234                     e.preventDefault();
39235                 }
39236                 
39237             }
39238         }
39239     },
39240
39241     // private
39242     fixKeys : function(){ // load time branching for fastest keydown performance
39243         if(Roo.isIE){
39244             return function(e){
39245                 var k = e.getKey(), r;
39246                 if(k == e.TAB){
39247                     e.stopEvent();
39248                     r = this.doc.selection.createRange();
39249                     if(r){
39250                         r.collapse(true);
39251                         r.pasteHTML('&#160;&#160;&#160;&#160;');
39252                         this.deferFocus();
39253                     }
39254                     return;
39255                 }
39256                 
39257                 if(k == e.ENTER){
39258                     r = this.doc.selection.createRange();
39259                     if(r){
39260                         var target = r.parentElement();
39261                         if(!target || target.tagName.toLowerCase() != 'li'){
39262                             e.stopEvent();
39263                             r.pasteHTML('<br />');
39264                             r.collapse(false);
39265                             r.select();
39266                         }
39267                     }
39268                 }
39269                 if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
39270                     this.cleanUpPaste.defer(100, this);
39271                     return;
39272                 }
39273                 
39274                 
39275             };
39276         }else if(Roo.isOpera){
39277             return function(e){
39278                 var k = e.getKey();
39279                 if(k == e.TAB){
39280                     e.stopEvent();
39281                     this.win.focus();
39282                     this.execCmd('InsertHTML','&#160;&#160;&#160;&#160;');
39283                     this.deferFocus();
39284                 }
39285                 if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
39286                     this.cleanUpPaste.defer(100, this);
39287                     return;
39288                 }
39289                 
39290             };
39291         }else if(Roo.isSafari){
39292             return function(e){
39293                 var k = e.getKey();
39294                 
39295                 if(k == e.TAB){
39296                     e.stopEvent();
39297                     this.execCmd('InsertText','\t');
39298                     this.deferFocus();
39299                     return;
39300                 }
39301                if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
39302                     this.cleanUpPaste.defer(100, this);
39303                     return;
39304                 }
39305                 
39306              };
39307         }
39308     }(),
39309     
39310     getAllAncestors: function()
39311     {
39312         var p = this.getSelectedNode();
39313         var a = [];
39314         if (!p) {
39315             a.push(p); // push blank onto stack..
39316             p = this.getParentElement();
39317         }
39318         
39319         
39320         while (p && (p.nodeType == 1) && (p.tagName.toLowerCase() != 'body')) {
39321             a.push(p);
39322             p = p.parentNode;
39323         }
39324         a.push(this.doc.body);
39325         return a;
39326     },
39327     lastSel : false,
39328     lastSelNode : false,
39329     
39330     
39331     getSelection : function() 
39332     {
39333         this.assignDocWin();
39334         return Roo.isIE ? this.doc.selection : this.win.getSelection();
39335     },
39336     
39337     getSelectedNode: function() 
39338     {
39339         // this may only work on Gecko!!!
39340         
39341         // should we cache this!!!!
39342         
39343         
39344         
39345          
39346         var range = this.createRange(this.getSelection()).cloneRange();
39347         
39348         if (Roo.isIE) {
39349             var parent = range.parentElement();
39350             while (true) {
39351                 var testRange = range.duplicate();
39352                 testRange.moveToElementText(parent);
39353                 if (testRange.inRange(range)) {
39354                     break;
39355                 }
39356                 if ((parent.nodeType != 1) || (parent.tagName.toLowerCase() == 'body')) {
39357                     break;
39358                 }
39359                 parent = parent.parentElement;
39360             }
39361             return parent;
39362         }
39363         
39364         // is ancestor a text element.
39365         var ac =  range.commonAncestorContainer;
39366         if (ac.nodeType == 3) {
39367             ac = ac.parentNode;
39368         }
39369         
39370         var ar = ac.childNodes;
39371          
39372         var nodes = [];
39373         var other_nodes = [];
39374         var has_other_nodes = false;
39375         for (var i=0;i<ar.length;i++) {
39376             if ((ar[i].nodeType == 3) && (!ar[i].data.length)) { // empty text ? 
39377                 continue;
39378             }
39379             // fullly contained node.
39380             
39381             if (this.rangeIntersectsNode(range,ar[i]) && this.rangeCompareNode(range,ar[i]) == 3) {
39382                 nodes.push(ar[i]);
39383                 continue;
39384             }
39385             
39386             // probably selected..
39387             if ((ar[i].nodeType == 1) && this.rangeIntersectsNode(range,ar[i]) && (this.rangeCompareNode(range,ar[i]) > 0)) {
39388                 other_nodes.push(ar[i]);
39389                 continue;
39390             }
39391             // outer..
39392             if (!this.rangeIntersectsNode(range,ar[i])|| (this.rangeCompareNode(range,ar[i]) == 0))  {
39393                 continue;
39394             }
39395             
39396             
39397             has_other_nodes = true;
39398         }
39399         if (!nodes.length && other_nodes.length) {
39400             nodes= other_nodes;
39401         }
39402         if (has_other_nodes || !nodes.length || (nodes.length > 1)) {
39403             return false;
39404         }
39405         
39406         return nodes[0];
39407     },
39408     createRange: function(sel)
39409     {
39410         // this has strange effects when using with 
39411         // top toolbar - not sure if it's a great idea.
39412         //this.editor.contentWindow.focus();
39413         if (typeof sel != "undefined") {
39414             try {
39415                 return sel.getRangeAt ? sel.getRangeAt(0) : sel.createRange();
39416             } catch(e) {
39417                 return this.doc.createRange();
39418             }
39419         } else {
39420             return this.doc.createRange();
39421         }
39422     },
39423     getParentElement: function()
39424     {
39425         
39426         this.assignDocWin();
39427         var sel = Roo.isIE ? this.doc.selection : this.win.getSelection();
39428         
39429         var range = this.createRange(sel);
39430          
39431         try {
39432             var p = range.commonAncestorContainer;
39433             while (p.nodeType == 3) { // text node
39434                 p = p.parentNode;
39435             }
39436             return p;
39437         } catch (e) {
39438             return null;
39439         }
39440     
39441     },
39442     /***
39443      *
39444      * Range intersection.. the hard stuff...
39445      *  '-1' = before
39446      *  '0' = hits..
39447      *  '1' = after.
39448      *         [ -- selected range --- ]
39449      *   [fail]                        [fail]
39450      *
39451      *    basically..
39452      *      if end is before start or  hits it. fail.
39453      *      if start is after end or hits it fail.
39454      *
39455      *   if either hits (but other is outside. - then it's not 
39456      *   
39457      *    
39458      **/
39459     
39460     
39461     // @see http://www.thismuchiknow.co.uk/?p=64.
39462     rangeIntersectsNode : function(range, node)
39463     {
39464         var nodeRange = node.ownerDocument.createRange();
39465         try {
39466             nodeRange.selectNode(node);
39467         } catch (e) {
39468             nodeRange.selectNodeContents(node);
39469         }
39470     
39471         var rangeStartRange = range.cloneRange();
39472         rangeStartRange.collapse(true);
39473     
39474         var rangeEndRange = range.cloneRange();
39475         rangeEndRange.collapse(false);
39476     
39477         var nodeStartRange = nodeRange.cloneRange();
39478         nodeStartRange.collapse(true);
39479     
39480         var nodeEndRange = nodeRange.cloneRange();
39481         nodeEndRange.collapse(false);
39482     
39483         return rangeStartRange.compareBoundaryPoints(
39484                  Range.START_TO_START, nodeEndRange) == -1 &&
39485                rangeEndRange.compareBoundaryPoints(
39486                  Range.START_TO_START, nodeStartRange) == 1;
39487         
39488          
39489     },
39490     rangeCompareNode : function(range, node)
39491     {
39492         var nodeRange = node.ownerDocument.createRange();
39493         try {
39494             nodeRange.selectNode(node);
39495         } catch (e) {
39496             nodeRange.selectNodeContents(node);
39497         }
39498         
39499         
39500         range.collapse(true);
39501     
39502         nodeRange.collapse(true);
39503      
39504         var ss = range.compareBoundaryPoints( Range.START_TO_START, nodeRange);
39505         var ee = range.compareBoundaryPoints(  Range.END_TO_END, nodeRange);
39506          
39507         //Roo.log(node.tagName + ': ss='+ss +', ee='+ee)
39508         
39509         var nodeIsBefore   =  ss == 1;
39510         var nodeIsAfter    = ee == -1;
39511         
39512         if (nodeIsBefore && nodeIsAfter)
39513             return 0; // outer
39514         if (!nodeIsBefore && nodeIsAfter)
39515             return 1; //right trailed.
39516         
39517         if (nodeIsBefore && !nodeIsAfter)
39518             return 2;  // left trailed.
39519         // fully contined.
39520         return 3;
39521     },
39522
39523     // private? - in a new class?
39524     cleanUpPaste :  function()
39525     {
39526         // cleans up the whole document..
39527       //  console.log('cleanuppaste');
39528         this.cleanUpChildren(this.doc.body);
39529         
39530         
39531     },
39532     cleanUpChildren : function (n)
39533     {
39534         if (!n.childNodes.length) {
39535             return;
39536         }
39537         for (var i = n.childNodes.length-1; i > -1 ; i--) {
39538            this.cleanUpChild(n.childNodes[i]);
39539         }
39540     },
39541     
39542     
39543         
39544     
39545     cleanUpChild : function (node)
39546     {
39547         //console.log(node);
39548         if (node.nodeName == "#text") {
39549             // clean up silly Windows -- stuff?
39550             return; 
39551         }
39552         if (node.nodeName == "#comment") {
39553             node.parentNode.removeChild(node);
39554             // clean up silly Windows -- stuff?
39555             return; 
39556         }
39557         
39558         if (Roo.form.HtmlEditor.black.indexOf(node.tagName.toLowerCase()) > -1) {
39559             // remove node.
39560             node.parentNode.removeChild(node);
39561             return;
39562             
39563         }
39564         if (Roo.form.HtmlEditor.remove.indexOf(node.tagName.toLowerCase()) > -1) {
39565             this.cleanUpChildren(node);
39566             // inserts everything just before this node...
39567             while (node.childNodes.length) {
39568                 var cn = node.childNodes[0];
39569                 node.removeChild(cn);
39570                 node.parentNode.insertBefore(cn, node);
39571             }
39572             node.parentNode.removeChild(node);
39573             return;
39574         }
39575         
39576         if (!node.attributes || !node.attributes.length) {
39577             this.cleanUpChildren(node);
39578             return;
39579         }
39580         
39581         function cleanAttr(n,v)
39582         {
39583             
39584             if (v.match(/^\./) || v.match(/^\//)) {
39585                 return;
39586             }
39587             if (v.match(/^(http|https):\/\//) || v.match(/^mailto:/)) {
39588                 return;
39589             }
39590             Roo.log("(REMOVE)"+ node.tagName +'.' + n + '=' + v);
39591             node.removeAttribute(n);
39592             
39593         }
39594         
39595         function cleanStyle(n,v)
39596         {
39597             if (v.match(/expression/)) { //XSS?? should we even bother..
39598                 node.removeAttribute(n);
39599                 return;
39600             }
39601             
39602             
39603             var parts = v.split(/;/);
39604             Roo.each(parts, function(p) {
39605                 p = p.replace(/\s+/g,'');
39606                 if (!p.length) {
39607                     return true;
39608                 }
39609                 var l = p.split(':').shift().replace(/\s+/g,'');
39610                 
39611                 // only allow 'c whitelisted system attributes'
39612                 if (Roo.form.HtmlEditor.cwhite.indexOf(l) < 0) {
39613                     Roo.log('(REMOVE)' + node.tagName +'.' + n + ':'+l + '=' + v);
39614                     node.removeAttribute(n);
39615                     return false;
39616                 }
39617                 return true;
39618             });
39619             
39620             
39621         }
39622         
39623         
39624         for (var i = node.attributes.length-1; i > -1 ; i--) {
39625             var a = node.attributes[i];
39626             //console.log(a);
39627             if (Roo.form.HtmlEditor.ablack.indexOf(a.name.toLowerCase()) > -1) {
39628                 node.removeAttribute(a.name);
39629                 return;
39630             }
39631             if (Roo.form.HtmlEditor.aclean.indexOf(a.name.toLowerCase()) > -1) {
39632                 cleanAttr(a.name,a.value); // fixme..
39633                 return;
39634             }
39635             if (a.name == 'style') {
39636                 cleanStyle(a.name,a.value);
39637             }
39638             /// clean up MS crap..
39639             if (a.name == 'class') {
39640                 if (a.value.match(/^Mso/)) {
39641                     node.className = '';
39642                 }
39643             }
39644             
39645             // style cleanup!?
39646             // class cleanup?
39647             
39648         }
39649         
39650         
39651         this.cleanUpChildren(node);
39652         
39653         
39654     }
39655     
39656     
39657     // hide stuff that is not compatible
39658     /**
39659      * @event blur
39660      * @hide
39661      */
39662     /**
39663      * @event change
39664      * @hide
39665      */
39666     /**
39667      * @event focus
39668      * @hide
39669      */
39670     /**
39671      * @event specialkey
39672      * @hide
39673      */
39674     /**
39675      * @cfg {String} fieldClass @hide
39676      */
39677     /**
39678      * @cfg {String} focusClass @hide
39679      */
39680     /**
39681      * @cfg {String} autoCreate @hide
39682      */
39683     /**
39684      * @cfg {String} inputType @hide
39685      */
39686     /**
39687      * @cfg {String} invalidClass @hide
39688      */
39689     /**
39690      * @cfg {String} invalidText @hide
39691      */
39692     /**
39693      * @cfg {String} msgFx @hide
39694      */
39695     /**
39696      * @cfg {String} validateOnBlur @hide
39697      */
39698 });
39699
39700 Roo.form.HtmlEditor.white = [
39701         'area', 'br', 'img', 'input', 'hr', 'wbr',
39702         
39703        'address', 'blockquote', 'center', 'dd',      'dir',       'div', 
39704        'dl',      'dt',         'h1',     'h2',      'h3',        'h4', 
39705        'h5',      'h6',         'hr',     'isindex', 'listing',   'marquee', 
39706        'menu',    'multicol',   'ol',     'p',       'plaintext', 'pre', 
39707        'table',   'ul',         'xmp', 
39708        
39709        'caption', 'col', 'colgroup', 'tbody', 'td', 'tfoot', 'th', 
39710       'thead',   'tr', 
39711      
39712       'dir', 'menu', 'ol', 'ul', 'dl',
39713        
39714       'embed',  'object'
39715 ];
39716
39717
39718 Roo.form.HtmlEditor.black = [
39719     //    'embed',  'object', // enable - backend responsiblity to clean thiese
39720         'applet', // 
39721         'base',   'basefont', 'bgsound', 'blink',  'body', 
39722         'frame',  'frameset', 'head',    'html',   'ilayer', 
39723         'iframe', 'layer',  'link',     'meta',    'object',   
39724         'script', 'style' ,'title',  'xml' // clean later..
39725 ];
39726 Roo.form.HtmlEditor.clean = [
39727     'script', 'style', 'title', 'xml'
39728 ];
39729 Roo.form.HtmlEditor.remove = [
39730     'font'
39731 ];
39732 // attributes..
39733
39734 Roo.form.HtmlEditor.ablack = [
39735     'on'
39736 ];
39737     
39738 Roo.form.HtmlEditor.aclean = [ 
39739     'action', 'background', 'codebase', 'dynsrc', 'href', 'lowsrc'
39740 ];
39741
39742 // protocols..
39743 Roo.form.HtmlEditor.pwhite= [
39744         'http',  'https',  'mailto'
39745 ];
39746
39747 // white listed style attributes.
39748 Roo.form.HtmlEditor.cwhite= [
39749         'text-align',
39750         'font-size'
39751 ];
39752
39753 // <script type="text/javascript">
39754 /*
39755  * Based on
39756  * Ext JS Library 1.1.1
39757  * Copyright(c) 2006-2007, Ext JS, LLC.
39758  *  
39759  
39760  */
39761
39762 /**
39763  * @class Roo.form.HtmlEditorToolbar1
39764  * Basic Toolbar
39765  * 
39766  * Usage:
39767  *
39768  new Roo.form.HtmlEditor({
39769     ....
39770     toolbars : [
39771         new Roo.form.HtmlEditorToolbar1({
39772             disable : { fonts: 1 , format: 1, ..., ... , ...],
39773             btns : [ .... ]
39774         })
39775     }
39776      
39777  * 
39778  * @cfg {Object} disable List of elements to disable..
39779  * @cfg {Array} btns List of additional buttons.
39780  * 
39781  * 
39782  * NEEDS Extra CSS? 
39783  * .x-html-editor-tb .x-edit-none .x-btn-text { background: none; }
39784  */
39785  
39786 Roo.form.HtmlEditor.ToolbarStandard = function(config)
39787 {
39788     
39789     Roo.apply(this, config);
39790     
39791     // default disabled, based on 'good practice'..
39792     this.disable = this.disable || {};
39793     Roo.applyIf(this.disable, {
39794         fontSize : true,
39795         colors : true,
39796         specialElements : true
39797     });
39798     
39799     
39800     //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
39801     // dont call parent... till later.
39802 }
39803
39804 Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
39805     
39806     tb: false,
39807     
39808     rendered: false,
39809     
39810     editor : false,
39811     /**
39812      * @cfg {Object} disable  List of toolbar elements to disable
39813          
39814      */
39815     disable : false,
39816       /**
39817      * @cfg {Array} fontFamilies An array of available font families
39818      */
39819     fontFamilies : [
39820         'Arial',
39821         'Courier New',
39822         'Tahoma',
39823         'Times New Roman',
39824         'Verdana'
39825     ],
39826     
39827     specialChars : [
39828            "&#169;",
39829           "&#174;",     
39830           "&#8482;",    
39831           "&#163;" ,    
39832          // "&#8212;",    
39833           "&#8230;",    
39834           "&#247;" ,    
39835         //  "&#225;" ,     ?? a acute?
39836            "&#8364;"    , //Euro
39837        //   "&#8220;"    ,
39838         //  "&#8221;"    ,
39839         //  "&#8226;"    ,
39840           "&#176;"  //   , // degrees
39841
39842          // "&#233;"     , // e ecute
39843          // "&#250;"     , // u ecute?
39844     ],
39845     
39846     specialElements : [
39847         {
39848             text: "Insert Table",
39849             xtype: 'MenuItem',
39850             xns : Roo.Menu,
39851             ihtml :  '<table><tr><td>Cell</td></tr></table>' 
39852                 
39853         },
39854         {    
39855             text: "Insert Image",
39856             xtype: 'MenuItem',
39857             xns : Roo.Menu,
39858             ihtml : '<img src="about:blank"/>'
39859             
39860         }
39861         
39862          
39863     ],
39864     
39865     
39866     inputElements : [ 
39867             "form", "input:text", "input:hidden", "input:checkbox", "input:radio", "input:password", 
39868             "input:submit", "input:button", "select", "textarea", "label" ],
39869     formats : [
39870         ["p"] ,  
39871         ["h1"],["h2"],["h3"],["h4"],["h5"],["h6"], 
39872         ["pre"],[ "code"], 
39873         ["abbr"],[ "acronym"],[ "address"],[ "cite"],[ "samp"],[ "var"]
39874     ],
39875      /**
39876      * @cfg {String} defaultFont default font to use.
39877      */
39878     defaultFont: 'tahoma',
39879    
39880     fontSelect : false,
39881     
39882     
39883     formatCombo : false,
39884     
39885     init : function(editor)
39886     {
39887         this.editor = editor;
39888         
39889         
39890         var fid = editor.frameId;
39891         var etb = this;
39892         function btn(id, toggle, handler){
39893             var xid = fid + '-'+ id ;
39894             return {
39895                 id : xid,
39896                 cmd : id,
39897                 cls : 'x-btn-icon x-edit-'+id,
39898                 enableToggle:toggle !== false,
39899                 scope: editor, // was editor...
39900                 handler:handler||editor.relayBtnCmd,
39901                 clickEvent:'mousedown',
39902                 tooltip: etb.buttonTips[id] || undefined, ///tips ???
39903                 tabIndex:-1
39904             };
39905         }
39906         
39907         
39908         
39909         var tb = new Roo.Toolbar(editor.wrap.dom.firstChild);
39910         this.tb = tb;
39911          // stop form submits
39912         tb.el.on('click', function(e){
39913             e.preventDefault(); // what does this do?
39914         });
39915
39916         if(!this.disable.font && !Roo.isSafari){
39917             /* why no safari for fonts
39918             editor.fontSelect = tb.el.createChild({
39919                 tag:'select',
39920                 tabIndex: -1,
39921                 cls:'x-font-select',
39922                 html: editor.createFontOptions()
39923             });
39924             editor.fontSelect.on('change', function(){
39925                 var font = editor.fontSelect.dom.value;
39926                 editor.relayCmd('fontname', font);
39927                 editor.deferFocus();
39928             }, editor);
39929             tb.add(
39930                 editor.fontSelect.dom,
39931                 '-'
39932             );
39933             */
39934         };
39935         if(!this.disable.formats){
39936             this.formatCombo = new Roo.form.ComboBox({
39937                 store: new Roo.data.SimpleStore({
39938                     id : 'tag',
39939                     fields: ['tag'],
39940                     data : this.formats // from states.js
39941                 }),
39942                 blockFocus : true,
39943                 //autoCreate : {tag: "div",  size: "20"},
39944                 displayField:'tag',
39945                 typeAhead: false,
39946                 mode: 'local',
39947                 editable : false,
39948                 triggerAction: 'all',
39949                 emptyText:'Add tag',
39950                 selectOnFocus:true,
39951                 width:135,
39952                 listeners : {
39953                     'select': function(c, r, i) {
39954                         editor.insertTag(r.get('tag'));
39955                         editor.focus();
39956                     }
39957                 }
39958
39959             });
39960             tb.addField(this.formatCombo);
39961             
39962         }
39963         
39964         if(!this.disable.format){
39965             tb.add(
39966                 btn('bold'),
39967                 btn('italic'),
39968                 btn('underline')
39969             );
39970         };
39971         if(!this.disable.fontSize){
39972             tb.add(
39973                 '-',
39974                 
39975                 
39976                 btn('increasefontsize', false, editor.adjustFont),
39977                 btn('decreasefontsize', false, editor.adjustFont)
39978             );
39979         };
39980         
39981         
39982         if(!this.disable.colors){
39983             tb.add(
39984                 '-', {
39985                     id:editor.frameId +'-forecolor',
39986                     cls:'x-btn-icon x-edit-forecolor',
39987                     clickEvent:'mousedown',
39988                     tooltip: this.buttonTips['forecolor'] || undefined,
39989                     tabIndex:-1,
39990                     menu : new Roo.menu.ColorMenu({
39991                         allowReselect: true,
39992                         focus: Roo.emptyFn,
39993                         value:'000000',
39994                         plain:true,
39995                         selectHandler: function(cp, color){
39996                             editor.execCmd('forecolor', Roo.isSafari || Roo.isIE ? '#'+color : color);
39997                             editor.deferFocus();
39998                         },
39999                         scope: editor,
40000                         clickEvent:'mousedown'
40001                     })
40002                 }, {
40003                     id:editor.frameId +'backcolor',
40004                     cls:'x-btn-icon x-edit-backcolor',
40005                     clickEvent:'mousedown',
40006                     tooltip: this.buttonTips['backcolor'] || undefined,
40007                     tabIndex:-1,
40008                     menu : new Roo.menu.ColorMenu({
40009                         focus: Roo.emptyFn,
40010                         value:'FFFFFF',
40011                         plain:true,
40012                         allowReselect: true,
40013                         selectHandler: function(cp, color){
40014                             if(Roo.isGecko){
40015                                 editor.execCmd('useCSS', false);
40016                                 editor.execCmd('hilitecolor', color);
40017                                 editor.execCmd('useCSS', true);
40018                                 editor.deferFocus();
40019                             }else{
40020                                 editor.execCmd(Roo.isOpera ? 'hilitecolor' : 'backcolor', 
40021                                     Roo.isSafari || Roo.isIE ? '#'+color : color);
40022                                 editor.deferFocus();
40023                             }
40024                         },
40025                         scope:editor,
40026                         clickEvent:'mousedown'
40027                     })
40028                 }
40029             );
40030         };
40031         // now add all the items...
40032         
40033
40034         if(!this.disable.alignments){
40035             tb.add(
40036                 '-',
40037                 btn('justifyleft'),
40038                 btn('justifycenter'),
40039                 btn('justifyright')
40040             );
40041         };
40042
40043         //if(!Roo.isSafari){
40044             if(!this.disable.links){
40045                 tb.add(
40046                     '-',
40047                     btn('createlink', false, editor.createLink)    /// MOVE TO HERE?!!?!?!?!
40048                 );
40049             };
40050
40051             if(!this.disable.lists){
40052                 tb.add(
40053                     '-',
40054                     btn('insertorderedlist'),
40055                     btn('insertunorderedlist')
40056                 );
40057             }
40058             if(!this.disable.sourceEdit){
40059                 tb.add(
40060                     '-',
40061                     btn('sourceedit', true, function(btn){
40062                         this.toggleSourceEdit(btn.pressed);
40063                     })
40064                 );
40065             }
40066         //}
40067         
40068         var smenu = { };
40069         // special menu.. - needs to be tidied up..
40070         if (!this.disable.special) {
40071             smenu = {
40072                 text: "&#169;",
40073                 cls: 'x-edit-none',
40074                 
40075                 menu : {
40076                     items : []
40077                 }
40078             };
40079             for (var i =0; i < this.specialChars.length; i++) {
40080                 smenu.menu.items.push({
40081                     
40082                     html: this.specialChars[i],
40083                     handler: function(a,b) {
40084                         editor.insertAtCursor(String.fromCharCode(a.html.replace('&#','').replace(';', '')));
40085                         
40086                     },
40087                     tabIndex:-1
40088                 });
40089             }
40090             
40091             
40092             tb.add(smenu);
40093             
40094             
40095         }
40096          
40097         if (!this.disable.specialElements) {
40098             var semenu = {
40099                 text: "Other;",
40100                 cls: 'x-edit-none',
40101                 menu : {
40102                     items : []
40103                 }
40104             };
40105             for (var i =0; i < this.specialElements.length; i++) {
40106                 semenu.menu.items.push(
40107                     Roo.apply({ 
40108                         handler: function(a,b) {
40109                             editor.insertAtCursor(this.ihtml);
40110                         }
40111                     }, this.specialElements[i])
40112                 );
40113                     
40114             }
40115             
40116             tb.add(semenu);
40117             
40118             
40119         }
40120          
40121         
40122         if (this.btns) {
40123             for(var i =0; i< this.btns.length;i++) {
40124                 var b = this.btns[i];
40125                 b.cls =  'x-edit-none';
40126                 b.scope = editor;
40127                 tb.add(b);
40128             }
40129         
40130         }
40131         
40132         
40133         
40134         // disable everything...
40135         
40136         this.tb.items.each(function(item){
40137            if(item.id != editor.frameId+ '-sourceedit'){
40138                 item.disable();
40139             }
40140         });
40141         this.rendered = true;
40142         
40143         // the all the btns;
40144         editor.on('editorevent', this.updateToolbar, this);
40145         // other toolbars need to implement this..
40146         //editor.on('editmodechange', this.updateToolbar, this);
40147     },
40148     
40149     
40150     
40151     /**
40152      * Protected method that will not generally be called directly. It triggers
40153      * a toolbar update by reading the markup state of the current selection in the editor.
40154      */
40155     updateToolbar: function(){
40156
40157         if(!this.editor.activated){
40158             this.editor.onFirstFocus();
40159             return;
40160         }
40161
40162         var btns = this.tb.items.map, 
40163             doc = this.editor.doc,
40164             frameId = this.editor.frameId;
40165
40166         if(!this.disable.font && !Roo.isSafari){
40167             /*
40168             var name = (doc.queryCommandValue('FontName')||this.editor.defaultFont).toLowerCase();
40169             if(name != this.fontSelect.dom.value){
40170                 this.fontSelect.dom.value = name;
40171             }
40172             */
40173         }
40174         if(!this.disable.format){
40175             btns[frameId + '-bold'].toggle(doc.queryCommandState('bold'));
40176             btns[frameId + '-italic'].toggle(doc.queryCommandState('italic'));
40177             btns[frameId + '-underline'].toggle(doc.queryCommandState('underline'));
40178         }
40179         if(!this.disable.alignments){
40180             btns[frameId + '-justifyleft'].toggle(doc.queryCommandState('justifyleft'));
40181             btns[frameId + '-justifycenter'].toggle(doc.queryCommandState('justifycenter'));
40182             btns[frameId + '-justifyright'].toggle(doc.queryCommandState('justifyright'));
40183         }
40184         if(!Roo.isSafari && !this.disable.lists){
40185             btns[frameId + '-insertorderedlist'].toggle(doc.queryCommandState('insertorderedlist'));
40186             btns[frameId + '-insertunorderedlist'].toggle(doc.queryCommandState('insertunorderedlist'));
40187         }
40188         
40189         var ans = this.editor.getAllAncestors();
40190         if (this.formatCombo) {
40191             
40192             
40193             var store = this.formatCombo.store;
40194             this.formatCombo.setValue("");
40195             for (var i =0; i < ans.length;i++) {
40196                 if (ans[i] && store.query('tag',ans[i].tagName.toLowerCase(), false).length) {
40197                     // select it..
40198                     this.formatCombo.setValue(ans[i].tagName.toLowerCase());
40199                     break;
40200                 }
40201             }
40202         }
40203         
40204         
40205         
40206         // hides menus... - so this cant be on a menu...
40207         Roo.menu.MenuMgr.hideAll();
40208
40209         //this.editorsyncValue();
40210     },
40211    
40212     
40213     createFontOptions : function(){
40214         var buf = [], fs = this.fontFamilies, ff, lc;
40215         for(var i = 0, len = fs.length; i< len; i++){
40216             ff = fs[i];
40217             lc = ff.toLowerCase();
40218             buf.push(
40219                 '<option value="',lc,'" style="font-family:',ff,';"',
40220                     (this.defaultFont == lc ? ' selected="true">' : '>'),
40221                     ff,
40222                 '</option>'
40223             );
40224         }
40225         return buf.join('');
40226     },
40227     
40228     toggleSourceEdit : function(sourceEditMode){
40229         if(sourceEditMode === undefined){
40230             sourceEditMode = !this.sourceEditMode;
40231         }
40232         this.sourceEditMode = sourceEditMode === true;
40233         var btn = this.tb.items.get(this.editor.frameId +'-sourceedit');
40234         // just toggle the button?
40235         if(btn.pressed !== this.editor.sourceEditMode){
40236             btn.toggle(this.editor.sourceEditMode);
40237             return;
40238         }
40239         
40240         if(this.sourceEditMode){
40241             this.tb.items.each(function(item){
40242                 if(item.cmd != 'sourceedit'){
40243                     item.disable();
40244                 }
40245             });
40246           
40247         }else{
40248             if(this.initialized){
40249                 this.tb.items.each(function(item){
40250                     item.enable();
40251                 });
40252             }
40253             
40254         }
40255         // tell the editor that it's been pressed..
40256         this.editor.toggleSourceEdit(sourceEditMode);
40257        
40258     },
40259      /**
40260      * Object collection of toolbar tooltips for the buttons in the editor. The key
40261      * is the command id associated with that button and the value is a valid QuickTips object.
40262      * For example:
40263 <pre><code>
40264 {
40265     bold : {
40266         title: 'Bold (Ctrl+B)',
40267         text: 'Make the selected text bold.',
40268         cls: 'x-html-editor-tip'
40269     },
40270     italic : {
40271         title: 'Italic (Ctrl+I)',
40272         text: 'Make the selected text italic.',
40273         cls: 'x-html-editor-tip'
40274     },
40275     ...
40276 </code></pre>
40277     * @type Object
40278      */
40279     buttonTips : {
40280         bold : {
40281             title: 'Bold (Ctrl+B)',
40282             text: 'Make the selected text bold.',
40283             cls: 'x-html-editor-tip'
40284         },
40285         italic : {
40286             title: 'Italic (Ctrl+I)',
40287             text: 'Make the selected text italic.',
40288             cls: 'x-html-editor-tip'
40289         },
40290         underline : {
40291             title: 'Underline (Ctrl+U)',
40292             text: 'Underline the selected text.',
40293             cls: 'x-html-editor-tip'
40294         },
40295         increasefontsize : {
40296             title: 'Grow Text',
40297             text: 'Increase the font size.',
40298             cls: 'x-html-editor-tip'
40299         },
40300         decreasefontsize : {
40301             title: 'Shrink Text',
40302             text: 'Decrease the font size.',
40303             cls: 'x-html-editor-tip'
40304         },
40305         backcolor : {
40306             title: 'Text Highlight Color',
40307             text: 'Change the background color of the selected text.',
40308             cls: 'x-html-editor-tip'
40309         },
40310         forecolor : {
40311             title: 'Font Color',
40312             text: 'Change the color of the selected text.',
40313             cls: 'x-html-editor-tip'
40314         },
40315         justifyleft : {
40316             title: 'Align Text Left',
40317             text: 'Align text to the left.',
40318             cls: 'x-html-editor-tip'
40319         },
40320         justifycenter : {
40321             title: 'Center Text',
40322             text: 'Center text in the editor.',
40323             cls: 'x-html-editor-tip'
40324         },
40325         justifyright : {
40326             title: 'Align Text Right',
40327             text: 'Align text to the right.',
40328             cls: 'x-html-editor-tip'
40329         },
40330         insertunorderedlist : {
40331             title: 'Bullet List',
40332             text: 'Start a bulleted list.',
40333             cls: 'x-html-editor-tip'
40334         },
40335         insertorderedlist : {
40336             title: 'Numbered List',
40337             text: 'Start a numbered list.',
40338             cls: 'x-html-editor-tip'
40339         },
40340         createlink : {
40341             title: 'Hyperlink',
40342             text: 'Make the selected text a hyperlink.',
40343             cls: 'x-html-editor-tip'
40344         },
40345         sourceedit : {
40346             title: 'Source Edit',
40347             text: 'Switch to source editing mode.',
40348             cls: 'x-html-editor-tip'
40349         }
40350     },
40351     // private
40352     onDestroy : function(){
40353         if(this.rendered){
40354             
40355             this.tb.items.each(function(item){
40356                 if(item.menu){
40357                     item.menu.removeAll();
40358                     if(item.menu.el){
40359                         item.menu.el.destroy();
40360                     }
40361                 }
40362                 item.destroy();
40363             });
40364              
40365         }
40366     },
40367     onFirstFocus: function() {
40368         this.tb.items.each(function(item){
40369            item.enable();
40370         });
40371     }
40372 });
40373
40374
40375
40376
40377 // <script type="text/javascript">
40378 /*
40379  * Based on
40380  * Ext JS Library 1.1.1
40381  * Copyright(c) 2006-2007, Ext JS, LLC.
40382  *  
40383  
40384  */
40385
40386  
40387 /**
40388  * @class Roo.form.HtmlEditor.ToolbarContext
40389  * Context Toolbar
40390  * 
40391  * Usage:
40392  *
40393  new Roo.form.HtmlEditor({
40394     ....
40395     toolbars : [
40396         { xtype: 'ToolbarStandard', styles : {} }
40397         { xtype: 'ToolbarContext', disable : {} }
40398     ]
40399 })
40400
40401      
40402  * 
40403  * @config : {Object} disable List of elements to disable.. (not done yet.)
40404  * @config : {Object} styles  Map of styles available.
40405  * 
40406  */
40407
40408 Roo.form.HtmlEditor.ToolbarContext = function(config)
40409 {
40410     
40411     Roo.apply(this, config);
40412     //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
40413     // dont call parent... till later.
40414     this.styles = this.styles || {};
40415 }
40416 Roo.form.HtmlEditor.ToolbarContext.types = {
40417     'IMG' : {
40418         width : {
40419             title: "Width",
40420             width: 40
40421         },
40422         height:  {
40423             title: "Height",
40424             width: 40
40425         },
40426         align: {
40427             title: "Align",
40428             opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
40429             width : 80
40430             
40431         },
40432         border: {
40433             title: "Border",
40434             width: 40
40435         },
40436         alt: {
40437             title: "Alt",
40438             width: 120
40439         },
40440         src : {
40441             title: "Src",
40442             width: 220
40443         }
40444         
40445     },
40446     'A' : {
40447         name : {
40448             title: "Name",
40449             width: 50
40450         },
40451         href:  {
40452             title: "Href",
40453             width: 220
40454         } // border?
40455         
40456     },
40457     'TABLE' : {
40458         rows : {
40459             title: "Rows",
40460             width: 20
40461         },
40462         cols : {
40463             title: "Cols",
40464             width: 20
40465         },
40466         width : {
40467             title: "Width",
40468             width: 40
40469         },
40470         height : {
40471             title: "Height",
40472             width: 40
40473         },
40474         border : {
40475             title: "Border",
40476             width: 20
40477         }
40478     },
40479     'TD' : {
40480         width : {
40481             title: "Width",
40482             width: 40
40483         },
40484         height : {
40485             title: "Height",
40486             width: 40
40487         },   
40488         align: {
40489             title: "Align",
40490             opts : [[""],[ "left"],[ "center"],[ "right"],[ "justify"],[ "char"]],
40491             width: 80
40492         },
40493         valign: {
40494             title: "Valign",
40495             opts : [[""],[ "top"],[ "middle"],[ "bottom"],[ "baseline"]],
40496             width: 80
40497         },
40498         colspan: {
40499             title: "Colspan",
40500             width: 20
40501             
40502         }
40503     },
40504     'INPUT' : {
40505         name : {
40506             title: "name",
40507             width: 120
40508         },
40509         value : {
40510             title: "Value",
40511             width: 120
40512         },
40513         width : {
40514             title: "Width",
40515             width: 40
40516         }
40517     },
40518     'LABEL' : {
40519         'for' : {
40520             title: "For",
40521             width: 120
40522         }
40523     },
40524     'TEXTAREA' : {
40525           name : {
40526             title: "name",
40527             width: 120
40528         },
40529         rows : {
40530             title: "Rows",
40531             width: 20
40532         },
40533         cols : {
40534             title: "Cols",
40535             width: 20
40536         }
40537     },
40538     'SELECT' : {
40539         name : {
40540             title: "name",
40541             width: 120
40542         },
40543         selectoptions : {
40544             title: "Options",
40545             width: 200
40546         }
40547     },
40548     
40549     // should we really allow this??
40550     // should this just be 
40551     'BODY' : {
40552         title : {
40553             title: "title",
40554             width: 200,
40555             disabled : true
40556         }
40557     },
40558     '*' : {
40559         // empty..
40560     }
40561 };
40562
40563
40564
40565 Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
40566     
40567     tb: false,
40568     
40569     rendered: false,
40570     
40571     editor : false,
40572     /**
40573      * @cfg {Object} disable  List of toolbar elements to disable
40574          
40575      */
40576     disable : false,
40577     /**
40578      * @cfg {Object} styles List of styles 
40579      *    eg. { '*' : [ 'headline' ] , 'TD' : [ 'underline', 'double-underline' ] } 
40580      *
40581      * These must be defined in the page, so they get rendered correctly..
40582      * .headline { }
40583      * TD.underline { }
40584      * 
40585      */
40586     styles : false,
40587     
40588     
40589     
40590     toolbars : false,
40591     
40592     init : function(editor)
40593     {
40594         this.editor = editor;
40595         
40596         
40597         var fid = editor.frameId;
40598         var etb = this;
40599         function btn(id, toggle, handler){
40600             var xid = fid + '-'+ id ;
40601             return {
40602                 id : xid,
40603                 cmd : id,
40604                 cls : 'x-btn-icon x-edit-'+id,
40605                 enableToggle:toggle !== false,
40606                 scope: editor, // was editor...
40607                 handler:handler||editor.relayBtnCmd,
40608                 clickEvent:'mousedown',
40609                 tooltip: etb.buttonTips[id] || undefined, ///tips ???
40610                 tabIndex:-1
40611             };
40612         }
40613         // create a new element.
40614         var wdiv = editor.wrap.createChild({
40615                 tag: 'div'
40616             }, editor.wrap.dom.firstChild.nextSibling, true);
40617         
40618         // can we do this more than once??
40619         
40620          // stop form submits
40621       
40622  
40623         // disable everything...
40624         var ty= Roo.form.HtmlEditor.ToolbarContext.types;
40625         this.toolbars = {};
40626            
40627         for (var i in  ty) {
40628           
40629             this.toolbars[i] = this.buildToolbar(ty[i],i);
40630         }
40631         this.tb = this.toolbars.BODY;
40632         this.tb.el.show();
40633         this.buildFooter();
40634         this.footer.show();
40635          
40636         this.rendered = true;
40637         
40638         // the all the btns;
40639         editor.on('editorevent', this.updateToolbar, this);
40640         // other toolbars need to implement this..
40641         //editor.on('editmodechange', this.updateToolbar, this);
40642     },
40643     
40644     
40645     
40646     /**
40647      * Protected method that will not generally be called directly. It triggers
40648      * a toolbar update by reading the markup state of the current selection in the editor.
40649      */
40650     updateToolbar: function(ignore_a,ignore_b,sel){
40651
40652         
40653         if(!this.editor.activated){
40654              this.editor.onFirstFocus();
40655             return;
40656         }
40657         var updateFooter = sel ? false : true;
40658         
40659         
40660         var ans = this.editor.getAllAncestors();
40661         
40662         // pick
40663         var ty= Roo.form.HtmlEditor.ToolbarContext.types;
40664         
40665         if (!sel) { 
40666             sel = ans.length ? (ans[0] ?  ans[0]  : ans[1]) : this.editor.doc.body;
40667             sel = sel ? sel : this.editor.doc.body;
40668             sel = sel.tagName.length ? sel : this.editor.doc.body;
40669             
40670         }
40671         // pick a menu that exists..
40672         var tn = sel.tagName.toUpperCase();
40673         //sel = typeof(ty[tn]) != 'undefined' ? sel : this.editor.doc.body;
40674         
40675         tn = sel.tagName.toUpperCase();
40676         
40677         var lastSel = this.tb.selectedNode
40678         
40679         this.tb.selectedNode = sel;
40680         
40681         // if current menu does not match..
40682         if ((this.tb.name != tn) || (lastSel != this.tb.selectedNode)) {
40683                 
40684             this.tb.el.hide();
40685             ///console.log("show: " + tn);
40686             this.tb =  typeof(ty[tn]) != 'undefined' ? this.toolbars[tn] : this.toolbars['*'];
40687             this.tb.el.show();
40688             // update name
40689             this.tb.items.first().el.innerHTML = tn + ':&nbsp;';
40690             
40691             
40692             // update attributes
40693             if (this.tb.fields) {
40694                 this.tb.fields.each(function(e) {
40695                    e.setValue(sel.getAttribute(e.name));
40696                 });
40697             }
40698             
40699             // update styles
40700             var st = this.tb.fields.item(0);
40701             st.store.removeAll();
40702             var cn = sel.className.split(/\s+/);
40703             
40704             var avs = [];
40705             if (this.styles['*']) {
40706                 
40707                 Roo.each(this.styles['*'], function(v) {
40708                     avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );         
40709                 });
40710             }
40711             if (this.styles[tn]) { 
40712                 Roo.each(this.styles[tn], function(v) {
40713                     avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );         
40714                 });
40715             }
40716             
40717             st.store.loadData(avs);
40718             st.collapse();
40719             st.setValue(cn);
40720             
40721             // flag our selected Node.
40722             this.tb.selectedNode = sel;
40723            
40724            
40725             Roo.menu.MenuMgr.hideAll();
40726
40727         }
40728         
40729         if (!updateFooter) {
40730             return;
40731         }
40732         // update the footer
40733         //
40734         var html = '';
40735         
40736         this.footerEls = ans.reverse();
40737         Roo.each(this.footerEls, function(a,i) {
40738             if (!a) { return; }
40739             html += html.length ? ' &gt; '  :  '';
40740             
40741             html += '<span class="x-ed-loc-' + i + '">' + a.tagName + '</span>';
40742             
40743         });
40744        
40745         // 
40746         var sz = this.footDisp.up('td').getSize();
40747         this.footDisp.dom.style.width = (sz.width -10) + 'px';
40748         this.footDisp.dom.style.marginLeft = '5px';
40749         
40750         this.footDisp.dom.style.overflow = 'hidden';
40751         
40752         this.footDisp.dom.innerHTML = html;
40753             
40754         //this.editorsyncValue();
40755     },
40756    
40757        
40758     // private
40759     onDestroy : function(){
40760         if(this.rendered){
40761             
40762             this.tb.items.each(function(item){
40763                 if(item.menu){
40764                     item.menu.removeAll();
40765                     if(item.menu.el){
40766                         item.menu.el.destroy();
40767                     }
40768                 }
40769                 item.destroy();
40770             });
40771              
40772         }
40773     },
40774     onFirstFocus: function() {
40775         // need to do this for all the toolbars..
40776         this.tb.items.each(function(item){
40777            item.enable();
40778         });
40779     },
40780     buildToolbar: function(tlist, nm)
40781     {
40782         var editor = this.editor;
40783          // create a new element.
40784         var wdiv = editor.wrap.createChild({
40785                 tag: 'div'
40786             }, editor.wrap.dom.firstChild.nextSibling, true);
40787         
40788        
40789         var tb = new Roo.Toolbar(wdiv);
40790         // add the name..
40791         
40792         tb.add(nm+ ":&nbsp;");
40793         
40794         // styles...
40795         if (this.styles) {
40796             
40797             // this needs a multi-select checkbox...
40798             tb.addField( new Roo.form.ComboBox({
40799                 store: new Roo.data.SimpleStore({
40800                     id : 'val',
40801                     fields: ['val', 'selected'],
40802                     data : [] 
40803                 }),
40804                 name : 'className',
40805                 displayField:'val',
40806                 typeAhead: false,
40807                 mode: 'local',
40808                 editable : false,
40809                 triggerAction: 'all',
40810                 emptyText:'Select Style',
40811                 selectOnFocus:true,
40812                 width: 130,
40813                 listeners : {
40814                     'select': function(c, r, i) {
40815                         // initial support only for on class per el..
40816                         tb.selectedNode.className =  r ? r.get('val') : '';
40817                     }
40818                 }
40819     
40820             }));
40821         }
40822             
40823         
40824         
40825         for (var i in tlist) {
40826             
40827             var item = tlist[i];
40828             tb.add(item.title + ":&nbsp;");
40829             
40830             
40831             
40832             
40833             if (item.opts) {
40834                 // opts == pulldown..
40835                 tb.addField( new Roo.form.ComboBox({
40836                     store: new Roo.data.SimpleStore({
40837                         id : 'val',
40838                         fields: ['val'],
40839                         data : item.opts  
40840                     }),
40841                     name : i,
40842                     displayField:'val',
40843                     typeAhead: false,
40844                     mode: 'local',
40845                     editable : false,
40846                     triggerAction: 'all',
40847                     emptyText:'Select',
40848                     selectOnFocus:true,
40849                     width: item.width ? item.width  : 130,
40850                     listeners : {
40851                         'select': function(c, r, i) {
40852                             tb.selectedNode.setAttribute(c.name, r.get('val'));
40853                         }
40854                     }
40855
40856                 }));
40857                 continue;
40858                     
40859                  
40860                 
40861                 tb.addField( new Roo.form.TextField({
40862                     name: i,
40863                     width: 100,
40864                     //allowBlank:false,
40865                     value: ''
40866                 }));
40867                 continue;
40868             }
40869             tb.addField( new Roo.form.TextField({
40870                 name: i,
40871                 width: item.width,
40872                 //allowBlank:true,
40873                 value: '',
40874                 listeners: {
40875                     'change' : function(f, nv, ov) {
40876                         tb.selectedNode.setAttribute(f.name, nv);
40877                     }
40878                 }
40879             }));
40880              
40881         }
40882         tb.el.on('click', function(e){
40883             e.preventDefault(); // what does this do?
40884         });
40885         tb.el.setVisibilityMode( Roo.Element.DISPLAY);
40886         tb.el.hide();
40887         tb.name = nm;
40888         // dont need to disable them... as they will get hidden
40889         return tb;
40890          
40891         
40892     },
40893     buildFooter : function()
40894     {
40895         
40896         var fel = this.editor.wrap.createChild();
40897         this.footer = new Roo.Toolbar(fel);
40898         // toolbar has scrolly on left / right?
40899         var footDisp= new Roo.Toolbar.Fill();
40900         var _t = this;
40901         this.footer.add(
40902             {
40903                 text : '&lt;',
40904                 xtype: 'Button',
40905                 handler : function() {
40906                     _t.footDisp.scrollTo('left',0,true)
40907                 }
40908             }
40909         );
40910         this.footer.add( footDisp );
40911         this.footer.add( 
40912             {
40913                 text : '&gt;',
40914                 xtype: 'Button',
40915                 handler : function() {
40916                     // no animation..
40917                     _t.footDisp.select('span').last().scrollIntoView(_t.footDisp,true);
40918                 }
40919             }
40920         );
40921         var fel = Roo.get(footDisp.el);
40922         fel.addClass('x-editor-context');
40923         this.footDispWrap = fel; 
40924         this.footDispWrap.overflow  = 'hidden';
40925         
40926         this.footDisp = fel.createChild();
40927         this.footDispWrap.on('click', this.onContextClick, this)
40928         
40929         
40930     },
40931     onContextClick : function (ev,dom)
40932     {
40933         ev.preventDefault();
40934         var  cn = dom.className;
40935         Roo.log(cn);
40936         if (!cn.match(/x-ed-loc-/)) {
40937             return;
40938         }
40939         var n = cn.split('-').pop();
40940         var ans = this.footerEls;
40941         var sel = ans[n];
40942         
40943          // pick
40944         var range = this.editor.createRange();
40945         
40946         range.selectNodeContents(sel);
40947         //range.selectNode(sel);
40948         
40949         
40950         var selection = this.editor.getSelection();
40951         selection.removeAllRanges();
40952         selection.addRange(range);
40953         
40954         
40955         
40956         this.updateToolbar(null, null, sel);
40957         
40958         
40959     }
40960     
40961     
40962     
40963     
40964     
40965 });
40966
40967
40968
40969
40970
40971 /*
40972  * Based on:
40973  * Ext JS Library 1.1.1
40974  * Copyright(c) 2006-2007, Ext JS, LLC.
40975  *
40976  * Originally Released Under LGPL - original licence link has changed is not relivant.
40977  *
40978  * Fork - LGPL
40979  * <script type="text/javascript">
40980  */
40981  
40982 /**
40983  * @class Roo.form.BasicForm
40984  * @extends Roo.util.Observable
40985  * Supplies the functionality to do "actions" on forms and initialize Roo.form.Field types on existing markup.
40986  * @constructor
40987  * @param {String/HTMLElement/Roo.Element} el The form element or its id
40988  * @param {Object} config Configuration options
40989  */
40990 Roo.form.BasicForm = function(el, config){
40991     this.allItems = [];
40992     this.childForms = [];
40993     Roo.apply(this, config);
40994     /*
40995      * The Roo.form.Field items in this form.
40996      * @type MixedCollection
40997      */
40998      
40999      
41000     this.items = new Roo.util.MixedCollection(false, function(o){
41001         return o.id || (o.id = Roo.id());
41002     });
41003     this.addEvents({
41004         /**
41005          * @event beforeaction
41006          * Fires before any action is performed. Return false to cancel the action.
41007          * @param {Form} this
41008          * @param {Action} action The action to be performed
41009          */
41010         beforeaction: true,
41011         /**
41012          * @event actionfailed
41013          * Fires when an action fails.
41014          * @param {Form} this
41015          * @param {Action} action The action that failed
41016          */
41017         actionfailed : true,
41018         /**
41019          * @event actioncomplete
41020          * Fires when an action is completed.
41021          * @param {Form} this
41022          * @param {Action} action The action that completed
41023          */
41024         actioncomplete : true
41025     });
41026     if(el){
41027         this.initEl(el);
41028     }
41029     Roo.form.BasicForm.superclass.constructor.call(this);
41030 };
41031
41032 Roo.extend(Roo.form.BasicForm, Roo.util.Observable, {
41033     /**
41034      * @cfg {String} method
41035      * The request method to use (GET or POST) for form actions if one isn't supplied in the action options.
41036      */
41037     /**
41038      * @cfg {DataReader} reader
41039      * An Roo.data.DataReader (e.g. {@link Roo.data.XmlReader}) to be used to read data when executing "load" actions.
41040      * This is optional as there is built-in support for processing JSON.
41041      */
41042     /**
41043      * @cfg {DataReader} errorReader
41044      * An Roo.data.DataReader (e.g. {@link Roo.data.XmlReader}) to be used to read data when reading validation errors on "submit" actions.
41045      * This is completely optional as there is built-in support for processing JSON.
41046      */
41047     /**
41048      * @cfg {String} url
41049      * The URL to use for form actions if one isn't supplied in the action options.
41050      */
41051     /**
41052      * @cfg {Boolean} fileUpload
41053      * Set to true if this form is a file upload.
41054      */
41055      
41056     /**
41057      * @cfg {Object} baseParams
41058      * Parameters to pass with all requests. e.g. baseParams: {id: '123', foo: 'bar'}.
41059      */
41060      /**
41061      
41062     /**
41063      * @cfg {Number} timeout Timeout for form actions in seconds (default is 30 seconds).
41064      */
41065     timeout: 30,
41066
41067     // private
41068     activeAction : null,
41069
41070     /**
41071      * @cfg {Boolean} trackResetOnLoad If set to true, form.reset() resets to the last loaded
41072      * or setValues() data instead of when the form was first created.
41073      */
41074     trackResetOnLoad : false,
41075     
41076     
41077     /**
41078      * childForms - used for multi-tab forms
41079      * @type {Array}
41080      */
41081     childForms : false,
41082     
41083     /**
41084      * allItems - full list of fields.
41085      * @type {Array}
41086      */
41087     allItems : false,
41088     
41089     /**
41090      * By default wait messages are displayed with Roo.MessageBox.wait. You can target a specific
41091      * element by passing it or its id or mask the form itself by passing in true.
41092      * @type Mixed
41093      */
41094     waitMsgTarget : false,
41095
41096     // private
41097     initEl : function(el){
41098         this.el = Roo.get(el);
41099         this.id = this.el.id || Roo.id();
41100         this.el.on('submit', this.onSubmit, this);
41101         this.el.addClass('x-form');
41102     },
41103
41104     // private
41105     onSubmit : function(e){
41106         e.stopEvent();
41107     },
41108
41109     /**
41110      * Returns true if client-side validation on the form is successful.
41111      * @return Boolean
41112      */
41113     isValid : function(){
41114         var valid = true;
41115         this.items.each(function(f){
41116            if(!f.validate()){
41117                valid = false;
41118            }
41119         });
41120         return valid;
41121     },
41122
41123     /**
41124      * Returns true if any fields in this form have changed since their original load.
41125      * @return Boolean
41126      */
41127     isDirty : function(){
41128         var dirty = false;
41129         this.items.each(function(f){
41130            if(f.isDirty()){
41131                dirty = true;
41132                return false;
41133            }
41134         });
41135         return dirty;
41136     },
41137
41138     /**
41139      * Performs a predefined action (submit or load) or custom actions you define on this form.
41140      * @param {String} actionName The name of the action type
41141      * @param {Object} options (optional) The options to pass to the action.  All of the config options listed
41142      * below are supported by both the submit and load actions unless otherwise noted (custom actions could also
41143      * accept other config options):
41144      * <pre>
41145 Property          Type             Description
41146 ----------------  ---------------  ----------------------------------------------------------------------------------
41147 url               String           The url for the action (defaults to the form's url)
41148 method            String           The form method to use (defaults to the form's method, or POST if not defined)
41149 params            String/Object    The params to pass (defaults to the form's baseParams, or none if not defined)
41150 clientValidation  Boolean          Applies to submit only.  Pass true to call form.isValid() prior to posting to
41151                                    validate the form on the client (defaults to false)
41152      * </pre>
41153      * @return {BasicForm} this
41154      */
41155     doAction : function(action, options){
41156         if(typeof action == 'string'){
41157             action = new Roo.form.Action.ACTION_TYPES[action](this, options);
41158         }
41159         if(this.fireEvent('beforeaction', this, action) !== false){
41160             this.beforeAction(action);
41161             action.run.defer(100, action);
41162         }
41163         return this;
41164     },
41165
41166     /**
41167      * Shortcut to do a submit action.
41168      * @param {Object} options The options to pass to the action (see {@link #doAction} for details)
41169      * @return {BasicForm} this
41170      */
41171     submit : function(options){
41172         this.doAction('submit', options);
41173         return this;
41174     },
41175
41176     /**
41177      * Shortcut to do a load action.
41178      * @param {Object} options The options to pass to the action (see {@link #doAction} for details)
41179      * @return {BasicForm} this
41180      */
41181     load : function(options){
41182         this.doAction('load', options);
41183         return this;
41184     },
41185
41186     /**
41187      * Persists the values in this form into the passed Roo.data.Record object in a beginEdit/endEdit block.
41188      * @param {Record} record The record to edit
41189      * @return {BasicForm} this
41190      */
41191     updateRecord : function(record){
41192         record.beginEdit();
41193         var fs = record.fields;
41194         fs.each(function(f){
41195             var field = this.findField(f.name);
41196             if(field){
41197                 record.set(f.name, field.getValue());
41198             }
41199         }, this);
41200         record.endEdit();
41201         return this;
41202     },
41203
41204     /**
41205      * Loads an Roo.data.Record into this form.
41206      * @param {Record} record The record to load
41207      * @return {BasicForm} this
41208      */
41209     loadRecord : function(record){
41210         this.setValues(record.data);
41211         return this;
41212     },
41213
41214     // private
41215     beforeAction : function(action){
41216         var o = action.options;
41217         
41218        
41219         if(this.waitMsgTarget === true){
41220             this.el.mask(o.waitMsg || "Sending", 'x-mask-loading');
41221         }else if(this.waitMsgTarget){
41222             this.waitMsgTarget = Roo.get(this.waitMsgTarget);
41223             this.waitMsgTarget.mask(o.waitMsg || "Sending", 'x-mask-loading');
41224         }else {
41225             Roo.MessageBox.wait(o.waitMsg || "Sending", o.waitTitle || this.waitTitle || 'Please Wait...');
41226         }
41227          
41228     },
41229
41230     // private
41231     afterAction : function(action, success){
41232         this.activeAction = null;
41233         var o = action.options;
41234         
41235         if(this.waitMsgTarget === true){
41236             this.el.unmask();
41237         }else if(this.waitMsgTarget){
41238             this.waitMsgTarget.unmask();
41239         }else{
41240             Roo.MessageBox.updateProgress(1);
41241             Roo.MessageBox.hide();
41242         }
41243          
41244         if(success){
41245             if(o.reset){
41246                 this.reset();
41247             }
41248             Roo.callback(o.success, o.scope, [this, action]);
41249             this.fireEvent('actioncomplete', this, action);
41250             
41251         }else{
41252             Roo.callback(o.failure, o.scope, [this, action]);
41253             // show an error message if no failed handler is set..
41254             if (!this.hasListener('actionfailed')) {
41255                 Roo.MessageBox.alert("Error", "Saving Failed, please check your entries");
41256             }
41257             
41258             this.fireEvent('actionfailed', this, action);
41259         }
41260         
41261     },
41262
41263     /**
41264      * Find a Roo.form.Field in this form by id, dataIndex, name or hiddenName
41265      * @param {String} id The value to search for
41266      * @return Field
41267      */
41268     findField : function(id){
41269         var field = this.items.get(id);
41270         if(!field){
41271             this.items.each(function(f){
41272                 if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){
41273                     field = f;
41274                     return false;
41275                 }
41276             });
41277         }
41278         return field || null;
41279     },
41280
41281     /**
41282      * Add a secondary form to this one, 
41283      * Used to provide tabbed forms. One form is primary, with hidden values 
41284      * which mirror the elements from the other forms.
41285      * 
41286      * @param {Roo.form.Form} form to add.
41287      * 
41288      */
41289     addForm : function(form)
41290     {
41291        
41292         if (this.childForms.indexOf(form) > -1) {
41293             // already added..
41294             return;
41295         }
41296         this.childForms.push(form);
41297         var n = '';
41298         Roo.each(form.allItems, function (fe) {
41299             
41300             n = typeof(fe.getName) == 'undefined' ? fe.name : fe.getName();
41301             if (this.findField(n)) { // already added..
41302                 return;
41303             }
41304             var add = new Roo.form.Hidden({
41305                 name : n
41306             });
41307             add.render(this.el);
41308             
41309             this.add( add );
41310         }, this);
41311         
41312     },
41313     /**
41314      * Mark fields in this form invalid in bulk.
41315      * @param {Array/Object} errors Either an array in the form [{id:'fieldId', msg:'The message'},...] or an object hash of {id: msg, id2: msg2}
41316      * @return {BasicForm} this
41317      */
41318     markInvalid : function(errors){
41319         if(errors instanceof Array){
41320             for(var i = 0, len = errors.length; i < len; i++){
41321                 var fieldError = errors[i];
41322                 var f = this.findField(fieldError.id);
41323                 if(f){
41324                     f.markInvalid(fieldError.msg);
41325                 }
41326             }
41327         }else{
41328             var field, id;
41329             for(id in errors){
41330                 if(typeof errors[id] != 'function' && (field = this.findField(id))){
41331                     field.markInvalid(errors[id]);
41332                 }
41333             }
41334         }
41335         Roo.each(this.childForms || [], function (f) {
41336             f.markInvalid(errors);
41337         });
41338         
41339         return this;
41340     },
41341
41342     /**
41343      * Set values for fields in this form in bulk.
41344      * @param {Array/Object} values Either an array in the form [{id:'fieldId', value:'foo'},...] or an object hash of {id: value, id2: value2}
41345      * @return {BasicForm} this
41346      */
41347     setValues : function(values){
41348         if(values instanceof Array){ // array of objects
41349             for(var i = 0, len = values.length; i < len; i++){
41350                 var v = values[i];
41351                 var f = this.findField(v.id);
41352                 if(f){
41353                     f.setValue(v.value);
41354                     if(this.trackResetOnLoad){
41355                         f.originalValue = f.getValue();
41356                     }
41357                 }
41358             }
41359         }else{ // object hash
41360             var field, id;
41361             for(id in values){
41362                 if(typeof values[id] != 'function' && (field = this.findField(id))){
41363                     
41364                     if (field.setFromData && 
41365                         field.valueField && 
41366                         field.displayField &&
41367                         // combos' with local stores can 
41368                         // be queried via setValue()
41369                         // to set their value..
41370                         (field.store && !field.store.isLocal)
41371                         ) {
41372                         // it's a combo
41373                         var sd = { };
41374                         sd[field.valueField] = typeof(values[field.hiddenName]) == 'undefined' ? '' : values[field.hiddenName];
41375                         sd[field.displayField] = typeof(values[field.name]) == 'undefined' ? '' : values[field.name];
41376                         field.setFromData(sd);
41377                         
41378                     } else {
41379                         field.setValue(values[id]);
41380                     }
41381                     
41382                     
41383                     if(this.trackResetOnLoad){
41384                         field.originalValue = field.getValue();
41385                     }
41386                 }
41387             }
41388         }
41389          
41390         Roo.each(this.childForms || [], function (f) {
41391             f.setValues(values);
41392         });
41393                 
41394         return this;
41395     },
41396
41397     /**
41398      * Returns the fields in this form as an object with key/value pairs. If multiple fields exist with the same name
41399      * they are returned as an array.
41400      * @param {Boolean} asString
41401      * @return {Object}
41402      */
41403     getValues : function(asString){
41404         if (this.childForms) {
41405             // copy values from the child forms
41406             Roo.each(this.childForms, function (f) {
41407                 this.setValues(f.getValues());
41408             }, this);
41409         }
41410         
41411         
41412         
41413         var fs = Roo.lib.Ajax.serializeForm(this.el.dom);
41414         if(asString === true){
41415             return fs;
41416         }
41417         return Roo.urlDecode(fs);
41418     },
41419     
41420     /**
41421      * Returns the fields in this form as an object with key/value pairs. 
41422      * This differs from getValues as it calls getValue on each child item, rather than using dom data.
41423      * @return {Object}
41424      */
41425     getFieldValues : function()
41426     {
41427         if (this.childForms) {
41428             // copy values from the child forms
41429             Roo.each(this.childForms, function (f) {
41430                 this.setValues(f.getValues());
41431             }, this);
41432         }
41433         
41434         var ret = {};
41435         this.items.each(function(f){
41436             if (!f.getName()) {
41437                 return;
41438             }
41439             var v = f.getValue();
41440             if ((typeof(v) == 'object') && f.getRawValue) {
41441                 v = f.getRawValue() ; // dates..
41442             }
41443             ret[f.getName()] = v;
41444         });
41445         
41446         return ret;
41447     },
41448
41449     /**
41450      * Clears all invalid messages in this form.
41451      * @return {BasicForm} this
41452      */
41453     clearInvalid : function(){
41454         this.items.each(function(f){
41455            f.clearInvalid();
41456         });
41457         
41458         Roo.each(this.childForms || [], function (f) {
41459             f.clearInvalid();
41460         });
41461         
41462         
41463         return this;
41464     },
41465
41466     /**
41467      * Resets this form.
41468      * @return {BasicForm} this
41469      */
41470     reset : function(){
41471         this.items.each(function(f){
41472             f.reset();
41473         });
41474         
41475         Roo.each(this.childForms || [], function (f) {
41476             f.reset();
41477         });
41478        
41479         
41480         return this;
41481     },
41482
41483     /**
41484      * Add Roo.form components to this form.
41485      * @param {Field} field1
41486      * @param {Field} field2 (optional)
41487      * @param {Field} etc (optional)
41488      * @return {BasicForm} this
41489      */
41490     add : function(){
41491         this.items.addAll(Array.prototype.slice.call(arguments, 0));
41492         return this;
41493     },
41494
41495
41496     /**
41497      * Removes a field from the items collection (does NOT remove its markup).
41498      * @param {Field} field
41499      * @return {BasicForm} this
41500      */
41501     remove : function(field){
41502         this.items.remove(field);
41503         return this;
41504     },
41505
41506     /**
41507      * Looks at the fields in this form, checks them for an id attribute,
41508      * and calls applyTo on the existing dom element with that id.
41509      * @return {BasicForm} this
41510      */
41511     render : function(){
41512         this.items.each(function(f){
41513             if(f.isFormField && !f.rendered && document.getElementById(f.id)){ // if the element exists
41514                 f.applyTo(f.id);
41515             }
41516         });
41517         return this;
41518     },
41519
41520     /**
41521      * Calls {@link Ext#apply} for all fields in this form with the passed object.
41522      * @param {Object} values
41523      * @return {BasicForm} this
41524      */
41525     applyToFields : function(o){
41526         this.items.each(function(f){
41527            Roo.apply(f, o);
41528         });
41529         return this;
41530     },
41531
41532     /**
41533      * Calls {@link Ext#applyIf} for all field in this form with the passed object.
41534      * @param {Object} values
41535      * @return {BasicForm} this
41536      */
41537     applyIfToFields : function(o){
41538         this.items.each(function(f){
41539            Roo.applyIf(f, o);
41540         });
41541         return this;
41542     }
41543 });
41544
41545 // back compat
41546 Roo.BasicForm = Roo.form.BasicForm;/*
41547  * Based on:
41548  * Ext JS Library 1.1.1
41549  * Copyright(c) 2006-2007, Ext JS, LLC.
41550  *
41551  * Originally Released Under LGPL - original licence link has changed is not relivant.
41552  *
41553  * Fork - LGPL
41554  * <script type="text/javascript">
41555  */
41556
41557 /**
41558  * @class Roo.form.Form
41559  * @extends Roo.form.BasicForm
41560  * Adds the ability to dynamically render forms with JavaScript to {@link Roo.form.BasicForm}.
41561  * @constructor
41562  * @param {Object} config Configuration options
41563  */
41564 Roo.form.Form = function(config){
41565     var xitems =  [];
41566     if (config.items) {
41567         xitems = config.items;
41568         delete config.items;
41569     }
41570    
41571     
41572     Roo.form.Form.superclass.constructor.call(this, null, config);
41573     this.url = this.url || this.action;
41574     if(!this.root){
41575         this.root = new Roo.form.Layout(Roo.applyIf({
41576             id: Roo.id()
41577         }, config));
41578     }
41579     this.active = this.root;
41580     /**
41581      * Array of all the buttons that have been added to this form via {@link addButton}
41582      * @type Array
41583      */
41584     this.buttons = [];
41585     this.allItems = [];
41586     this.addEvents({
41587         /**
41588          * @event clientvalidation
41589          * If the monitorValid config option is true, this event fires repetitively to notify of valid state
41590          * @param {Form} this
41591          * @param {Boolean} valid true if the form has passed client-side validation
41592          */
41593         clientvalidation: true,
41594         /**
41595          * @event rendered
41596          * Fires when the form is rendered
41597          * @param {Roo.form.Form} form
41598          */
41599         rendered : true
41600     });
41601     
41602     if (this.progressUrl) {
41603             // push a hidden field onto the list of fields..
41604             this.addxtype( {
41605                     xns: Roo.form, 
41606                     xtype : 'Hidden', 
41607                     name : 'UPLOAD_IDENTIFIER' 
41608             });
41609         }
41610         
41611     
41612     Roo.each(xitems, this.addxtype, this);
41613     
41614     
41615     
41616 };
41617
41618 Roo.extend(Roo.form.Form, Roo.form.BasicForm, {
41619     /**
41620      * @cfg {Number} labelWidth The width of labels. This property cascades to child containers.
41621      */
41622     /**
41623      * @cfg {String} itemCls A css class to apply to the x-form-item of fields. This property cascades to child containers.
41624      */
41625     /**
41626      * @cfg {String} buttonAlign Valid values are "left," "center" and "right" (defaults to "center")
41627      */
41628     buttonAlign:'center',
41629
41630     /**
41631      * @cfg {Number} minButtonWidth Minimum width of all buttons in pixels (defaults to 75)
41632      */
41633     minButtonWidth:75,
41634
41635     /**
41636      * @cfg {String} labelAlign Valid values are "left," "top" and "right" (defaults to "left").
41637      * This property cascades to child containers if not set.
41638      */
41639     labelAlign:'left',
41640
41641     /**
41642      * @cfg {Boolean} monitorValid If true the form monitors its valid state <b>client-side</b> and
41643      * fires a looping event with that state. This is required to bind buttons to the valid
41644      * state using the config value formBind:true on the button.
41645      */
41646     monitorValid : false,
41647
41648     /**
41649      * @cfg {Number} monitorPoll The milliseconds to poll valid state, ignored if monitorValid is not true (defaults to 200)
41650      */
41651     monitorPoll : 200,
41652     
41653     /**
41654      * @cfg {String} progressUrl - Url to return progress data 
41655      */
41656     
41657     progressUrl : false,
41658   
41659     /**
41660      * Opens a new {@link Roo.form.Column} container in the layout stack. If fields are passed after the config, the
41661      * fields are added and the column is closed. If no fields are passed the column remains open
41662      * until end() is called.
41663      * @param {Object} config The config to pass to the column
41664      * @param {Field} field1 (optional)
41665      * @param {Field} field2 (optional)
41666      * @param {Field} etc (optional)
41667      * @return Column The column container object
41668      */
41669     column : function(c){
41670         var col = new Roo.form.Column(c);
41671         this.start(col);
41672         if(arguments.length > 1){ // duplicate code required because of Opera
41673             this.add.apply(this, Array.prototype.slice.call(arguments, 1));
41674             this.end();
41675         }
41676         return col;
41677     },
41678
41679     /**
41680      * Opens a new {@link Roo.form.FieldSet} container in the layout stack. If fields are passed after the config, the
41681      * fields are added and the fieldset is closed. If no fields are passed the fieldset remains open
41682      * until end() is called.
41683      * @param {Object} config The config to pass to the fieldset
41684      * @param {Field} field1 (optional)
41685      * @param {Field} field2 (optional)
41686      * @param {Field} etc (optional)
41687      * @return FieldSet The fieldset container object
41688      */
41689     fieldset : function(c){
41690         var fs = new Roo.form.FieldSet(c);
41691         this.start(fs);
41692         if(arguments.length > 1){ // duplicate code required because of Opera
41693             this.add.apply(this, Array.prototype.slice.call(arguments, 1));
41694             this.end();
41695         }
41696         return fs;
41697     },
41698
41699     /**
41700      * Opens a new {@link Roo.form.Layout} container in the layout stack. If fields are passed after the config, the
41701      * fields are added and the container is closed. If no fields are passed the container remains open
41702      * until end() is called.
41703      * @param {Object} config The config to pass to the Layout
41704      * @param {Field} field1 (optional)
41705      * @param {Field} field2 (optional)
41706      * @param {Field} etc (optional)
41707      * @return Layout The container object
41708      */
41709     container : function(c){
41710         var l = new Roo.form.Layout(c);
41711         this.start(l);
41712         if(arguments.length > 1){ // duplicate code required because of Opera
41713             this.add.apply(this, Array.prototype.slice.call(arguments, 1));
41714             this.end();
41715         }
41716         return l;
41717     },
41718
41719     /**
41720      * Opens the passed container in the layout stack. The container can be any {@link Roo.form.Layout} or subclass.
41721      * @param {Object} container A Roo.form.Layout or subclass of Layout
41722      * @return {Form} this
41723      */
41724     start : function(c){
41725         // cascade label info
41726         Roo.applyIf(c, {'labelAlign': this.active.labelAlign, 'labelWidth': this.active.labelWidth, 'itemCls': this.active.itemCls});
41727         this.active.stack.push(c);
41728         c.ownerCt = this.active;
41729         this.active = c;
41730         return this;
41731     },
41732
41733     /**
41734      * Closes the current open container
41735      * @return {Form} this
41736      */
41737     end : function(){
41738         if(this.active == this.root){
41739             return this;
41740         }
41741         this.active = this.active.ownerCt;
41742         return this;
41743     },
41744
41745     /**
41746      * Add Roo.form components to the current open container (e.g. column, fieldset, etc.).  Fields added via this method
41747      * can also be passed with an additional property of fieldLabel, which if supplied, will provide the text to display
41748      * as the label of the field.
41749      * @param {Field} field1
41750      * @param {Field} field2 (optional)
41751      * @param {Field} etc. (optional)
41752      * @return {Form} this
41753      */
41754     add : function(){
41755         this.active.stack.push.apply(this.active.stack, arguments);
41756         this.allItems.push.apply(this.allItems,arguments);
41757         var r = [];
41758         for(var i = 0, a = arguments, len = a.length; i < len; i++) {
41759             if(a[i].isFormField){
41760                 r.push(a[i]);
41761             }
41762         }
41763         if(r.length > 0){
41764             Roo.form.Form.superclass.add.apply(this, r);
41765         }
41766         return this;
41767     },
41768     
41769
41770     
41771     
41772     
41773      /**
41774      * Find any element that has been added to a form, using it's ID or name
41775      * This can include framesets, columns etc. along with regular fields..
41776      * @param {String} id - id or name to find.
41777      
41778      * @return {Element} e - or false if nothing found.
41779      */
41780     findbyId : function(id)
41781     {
41782         var ret = false;
41783         if (!id) {
41784             return ret;
41785         }
41786         Roo.each(this.allItems, function(f){
41787             if (f.id == id || f.name == id ){
41788                 ret = f;
41789                 return false;
41790             }
41791         });
41792         return ret;
41793     },
41794
41795     
41796     
41797     /**
41798      * Render this form into the passed container. This should only be called once!
41799      * @param {String/HTMLElement/Element} container The element this component should be rendered into
41800      * @return {Form} this
41801      */
41802     render : function(ct)
41803     {
41804         
41805         
41806         
41807         ct = Roo.get(ct);
41808         var o = this.autoCreate || {
41809             tag: 'form',
41810             method : this.method || 'POST',
41811             id : this.id || Roo.id()
41812         };
41813         this.initEl(ct.createChild(o));
41814
41815         this.root.render(this.el);
41816         
41817        
41818              
41819         this.items.each(function(f){
41820             f.render('x-form-el-'+f.id);
41821         });
41822
41823         if(this.buttons.length > 0){
41824             // tables are required to maintain order and for correct IE layout
41825             var tb = this.el.createChild({cls:'x-form-btns-ct', cn: {
41826                 cls:"x-form-btns x-form-btns-"+this.buttonAlign,
41827                 html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'
41828             }}, null, true);
41829             var tr = tb.getElementsByTagName('tr')[0];
41830             for(var i = 0, len = this.buttons.length; i < len; i++) {
41831                 var b = this.buttons[i];
41832                 var td = document.createElement('td');
41833                 td.className = 'x-form-btn-td';
41834                 b.render(tr.appendChild(td));
41835             }
41836         }
41837         if(this.monitorValid){ // initialize after render
41838             this.startMonitoring();
41839         }
41840         this.fireEvent('rendered', this);
41841         return this;
41842     },
41843
41844     /**
41845      * Adds a button to the footer of the form - this <b>must</b> be called before the form is rendered.
41846      * @param {String/Object} config A string becomes the button text, an object can either be a Button config
41847      * object or a valid Roo.DomHelper element config
41848      * @param {Function} handler The function called when the button is clicked
41849      * @param {Object} scope (optional) The scope of the handler function
41850      * @return {Roo.Button}
41851      */
41852     addButton : function(config, handler, scope){
41853         var bc = {
41854             handler: handler,
41855             scope: scope,
41856             minWidth: this.minButtonWidth,
41857             hideParent:true
41858         };
41859         if(typeof config == "string"){
41860             bc.text = config;
41861         }else{
41862             Roo.apply(bc, config);
41863         }
41864         var btn = new Roo.Button(null, bc);
41865         this.buttons.push(btn);
41866         return btn;
41867     },
41868
41869      /**
41870      * Adds a series of form elements (using the xtype property as the factory method.
41871      * Valid xtypes are:  TextField, TextArea .... Button, Layout, FieldSet, Column, (and 'end' to close a block)
41872      * @param {Object} config 
41873      */
41874     
41875     addxtype : function()
41876     {
41877         var ar = Array.prototype.slice.call(arguments, 0);
41878         var ret = false;
41879         for(var i = 0; i < ar.length; i++) {
41880             if (!ar[i]) {
41881                 continue; // skip -- if this happends something invalid got sent, we 
41882                 // should ignore it, as basically that interface element will not show up
41883                 // and that should be pretty obvious!!
41884             }
41885             
41886             if (Roo.form[ar[i].xtype]) {
41887                 ar[i].form = this;
41888                 var fe = Roo.factory(ar[i], Roo.form);
41889                 if (!ret) {
41890                     ret = fe;
41891                 }
41892                 fe.form = this;
41893                 if (fe.store) {
41894                     fe.store.form = this;
41895                 }
41896                 if (fe.isLayout) {  
41897                          
41898                     this.start(fe);
41899                     this.allItems.push(fe);
41900                     if (fe.items && fe.addxtype) {
41901                         fe.addxtype.apply(fe, fe.items);
41902                         delete fe.items;
41903                     }
41904                      this.end();
41905                     continue;
41906                 }
41907                 
41908                 
41909                  
41910                 this.add(fe);
41911               //  console.log('adding ' + ar[i].xtype);
41912             }
41913             if (ar[i].xtype == 'Button') {  
41914                 //console.log('adding button');
41915                 //console.log(ar[i]);
41916                 this.addButton(ar[i]);
41917                 this.allItems.push(fe);
41918                 continue;
41919             }
41920             
41921             if (ar[i].xtype == 'end') { // so we can add fieldsets... / layout etc.
41922                 alert('end is not supported on xtype any more, use items');
41923             //    this.end();
41924             //    //console.log('adding end');
41925             }
41926             
41927         }
41928         return ret;
41929     },
41930     
41931     /**
41932      * Starts monitoring of the valid state of this form. Usually this is done by passing the config
41933      * option "monitorValid"
41934      */
41935     startMonitoring : function(){
41936         if(!this.bound){
41937             this.bound = true;
41938             Roo.TaskMgr.start({
41939                 run : this.bindHandler,
41940                 interval : this.monitorPoll || 200,
41941                 scope: this
41942             });
41943         }
41944     },
41945
41946     /**
41947      * Stops monitoring of the valid state of this form
41948      */
41949     stopMonitoring : function(){
41950         this.bound = false;
41951     },
41952
41953     // private
41954     bindHandler : function(){
41955         if(!this.bound){
41956             return false; // stops binding
41957         }
41958         var valid = true;
41959         this.items.each(function(f){
41960             if(!f.isValid(true)){
41961                 valid = false;
41962                 return false;
41963             }
41964         });
41965         for(var i = 0, len = this.buttons.length; i < len; i++){
41966             var btn = this.buttons[i];
41967             if(btn.formBind === true && btn.disabled === valid){
41968                 btn.setDisabled(!valid);
41969             }
41970         }
41971         this.fireEvent('clientvalidation', this, valid);
41972     }
41973     
41974     
41975     
41976     
41977     
41978     
41979     
41980     
41981 });
41982
41983
41984 // back compat
41985 Roo.Form = Roo.form.Form;
41986 /*
41987  * Based on:
41988  * Ext JS Library 1.1.1
41989  * Copyright(c) 2006-2007, Ext JS, LLC.
41990  *
41991  * Originally Released Under LGPL - original licence link has changed is not relivant.
41992  *
41993  * Fork - LGPL
41994  * <script type="text/javascript">
41995  */
41996  
41997  /**
41998  * @class Roo.form.Action
41999  * Internal Class used to handle form actions
42000  * @constructor
42001  * @param {Roo.form.BasicForm} el The form element or its id
42002  * @param {Object} config Configuration options
42003  */
42004  
42005  
42006 // define the action interface
42007 Roo.form.Action = function(form, options){
42008     this.form = form;
42009     this.options = options || {};
42010 };
42011 /**
42012  * Client Validation Failed
42013  * @const 
42014  */
42015 Roo.form.Action.CLIENT_INVALID = 'client';
42016 /**
42017  * Server Validation Failed
42018  * @const 
42019  */
42020  Roo.form.Action.SERVER_INVALID = 'server';
42021  /**
42022  * Connect to Server Failed
42023  * @const 
42024  */
42025 Roo.form.Action.CONNECT_FAILURE = 'connect';
42026 /**
42027  * Reading Data from Server Failed
42028  * @const 
42029  */
42030 Roo.form.Action.LOAD_FAILURE = 'load';
42031
42032 Roo.form.Action.prototype = {
42033     type : 'default',
42034     failureType : undefined,
42035     response : undefined,
42036     result : undefined,
42037
42038     // interface method
42039     run : function(options){
42040
42041     },
42042
42043     // interface method
42044     success : function(response){
42045
42046     },
42047
42048     // interface method
42049     handleResponse : function(response){
42050
42051     },
42052
42053     // default connection failure
42054     failure : function(response){
42055         
42056         this.response = response;
42057         this.failureType = Roo.form.Action.CONNECT_FAILURE;
42058         this.form.afterAction(this, false);
42059     },
42060
42061     processResponse : function(response){
42062         this.response = response;
42063         if(!response.responseText){
42064             return true;
42065         }
42066         this.result = this.handleResponse(response);
42067         return this.result;
42068     },
42069
42070     // utility functions used internally
42071     getUrl : function(appendParams){
42072         var url = this.options.url || this.form.url || this.form.el.dom.action;
42073         if(appendParams){
42074             var p = this.getParams();
42075             if(p){
42076                 url += (url.indexOf('?') != -1 ? '&' : '?') + p;
42077             }
42078         }
42079         return url;
42080     },
42081
42082     getMethod : function(){
42083         return (this.options.method || this.form.method || this.form.el.dom.method || 'POST').toUpperCase();
42084     },
42085
42086     getParams : function(){
42087         var bp = this.form.baseParams;
42088         var p = this.options.params;
42089         if(p){
42090             if(typeof p == "object"){
42091                 p = Roo.urlEncode(Roo.applyIf(p, bp));
42092             }else if(typeof p == 'string' && bp){
42093                 p += '&' + Roo.urlEncode(bp);
42094             }
42095         }else if(bp){
42096             p = Roo.urlEncode(bp);
42097         }
42098         return p;
42099     },
42100
42101     createCallback : function(){
42102         return {
42103             success: this.success,
42104             failure: this.failure,
42105             scope: this,
42106             timeout: (this.form.timeout*1000),
42107             upload: this.form.fileUpload ? this.success : undefined
42108         };
42109     }
42110 };
42111
42112 Roo.form.Action.Submit = function(form, options){
42113     Roo.form.Action.Submit.superclass.constructor.call(this, form, options);
42114 };
42115
42116 Roo.extend(Roo.form.Action.Submit, Roo.form.Action, {
42117     type : 'submit',
42118
42119     haveProgress : false,
42120     uploadComplete : false,
42121     
42122     // uploadProgress indicator.
42123     uploadProgress : function()
42124     {
42125         if (!this.form.progressUrl) {
42126             return;
42127         }
42128         
42129         if (!this.haveProgress) {
42130             Roo.MessageBox.progress("Uploading", "Uploading");
42131         }
42132         if (this.uploadComplete) {
42133            Roo.MessageBox.hide();
42134            return;
42135         }
42136         
42137         this.haveProgress = true;
42138    
42139         var uid = this.form.findField('UPLOAD_IDENTIFIER').getValue();
42140         
42141         var c = new Roo.data.Connection();
42142         c.request({
42143             url : this.form.progressUrl,
42144             params: {
42145                 id : uid
42146             },
42147             method: 'GET',
42148             success : function(req){
42149                //console.log(data);
42150                 var rdata = false;
42151                 var edata;
42152                 try  {
42153                    rdata = Roo.decode(req.responseText)
42154                 } catch (e) {
42155                     Roo.log("Invalid data from server..");
42156                     Roo.log(edata);
42157                     return;
42158                 }
42159                 if (!rdata || !rdata.success) {
42160                     Roo.log(rdata);
42161                     return;
42162                 }
42163                 var data = rdata.data;
42164                 
42165                 if (this.uploadComplete) {
42166                    Roo.MessageBox.hide();
42167                    return;
42168                 }
42169                    
42170                 if (data){
42171                     Roo.MessageBox.updateProgress(data.bytes_uploaded/data.bytes_total,
42172                        Math.floor((data.bytes_total - data.bytes_uploaded)/1000) + 'k remaining'
42173                     );
42174                 }
42175                 this.uploadProgress.defer(2000,this);
42176             },
42177        
42178             failure: function(data) {
42179                 Roo.log('progress url failed ');
42180                 Roo.log(data);
42181             },
42182             scope : this
42183         });
42184            
42185     },
42186     
42187     
42188     run : function()
42189     {
42190         // run get Values on the form, so it syncs any secondary forms.
42191         this.form.getValues();
42192         
42193         var o = this.options;
42194         var method = this.getMethod();
42195         var isPost = method == 'POST';
42196         if(o.clientValidation === false || this.form.isValid()){
42197             
42198             if (this.form.progressUrl) {
42199                 this.form.findField('UPLOAD_IDENTIFIER').setValue(
42200                     (new Date() * 1) + '' + Math.random());
42201                     
42202             } 
42203             
42204             
42205             Roo.Ajax.request(Roo.apply(this.createCallback(), {
42206                 form:this.form.el.dom,
42207                 url:this.getUrl(!isPost),
42208                 method: method,
42209                 params:isPost ? this.getParams() : null,
42210                 isUpload: this.form.fileUpload
42211             }));
42212             
42213             this.uploadProgress();
42214
42215         }else if (o.clientValidation !== false){ // client validation failed
42216             this.failureType = Roo.form.Action.CLIENT_INVALID;
42217             this.form.afterAction(this, false);
42218         }
42219     },
42220
42221     success : function(response)
42222     {
42223         this.uploadComplete= true;
42224         if (this.haveProgress) {
42225             Roo.MessageBox.hide();
42226         }
42227         
42228         
42229         var result = this.processResponse(response);
42230         if(result === true || result.success){
42231             this.form.afterAction(this, true);
42232             return;
42233         }
42234         if(result.errors){
42235             this.form.markInvalid(result.errors);
42236             this.failureType = Roo.form.Action.SERVER_INVALID;
42237         }
42238         this.form.afterAction(this, false);
42239     },
42240     failure : function(response)
42241     {
42242         this.uploadComplete= true;
42243         if (this.haveProgress) {
42244             Roo.MessageBox.hide();
42245         }
42246         
42247         
42248         this.response = response;
42249         this.failureType = Roo.form.Action.CONNECT_FAILURE;
42250         this.form.afterAction(this, false);
42251     },
42252     
42253     handleResponse : function(response){
42254         if(this.form.errorReader){
42255             var rs = this.form.errorReader.read(response);
42256             var errors = [];
42257             if(rs.records){
42258                 for(var i = 0, len = rs.records.length; i < len; i++) {
42259                     var r = rs.records[i];
42260                     errors[i] = r.data;
42261                 }
42262             }
42263             if(errors.length < 1){
42264                 errors = null;
42265             }
42266             return {
42267                 success : rs.success,
42268                 errors : errors
42269             };
42270         }
42271         var ret = false;
42272         try {
42273             ret = Roo.decode(response.responseText);
42274         } catch (e) {
42275             ret = {
42276                 success: false,
42277                 errorMsg: "Failed to read server message: " + (response ? response.responseText : ' - no message'),
42278                 errors : []
42279             };
42280         }
42281         return ret;
42282         
42283     }
42284 });
42285
42286
42287 Roo.form.Action.Load = function(form, options){
42288     Roo.form.Action.Load.superclass.constructor.call(this, form, options);
42289     this.reader = this.form.reader;
42290 };
42291
42292 Roo.extend(Roo.form.Action.Load, Roo.form.Action, {
42293     type : 'load',
42294
42295     run : function(){
42296         
42297         Roo.Ajax.request(Roo.apply(
42298                 this.createCallback(), {
42299                     method:this.getMethod(),
42300                     url:this.getUrl(false),
42301                     params:this.getParams()
42302         }));
42303     },
42304
42305     success : function(response){
42306         
42307         var result = this.processResponse(response);
42308         if(result === true || !result.success || !result.data){
42309             this.failureType = Roo.form.Action.LOAD_FAILURE;
42310             this.form.afterAction(this, false);
42311             return;
42312         }
42313         this.form.clearInvalid();
42314         this.form.setValues(result.data);
42315         this.form.afterAction(this, true);
42316     },
42317
42318     handleResponse : function(response){
42319         if(this.form.reader){
42320             var rs = this.form.reader.read(response);
42321             var data = rs.records && rs.records[0] ? rs.records[0].data : null;
42322             return {
42323                 success : rs.success,
42324                 data : data
42325             };
42326         }
42327         return Roo.decode(response.responseText);
42328     }
42329 });
42330
42331 Roo.form.Action.ACTION_TYPES = {
42332     'load' : Roo.form.Action.Load,
42333     'submit' : Roo.form.Action.Submit
42334 };/*
42335  * Based on:
42336  * Ext JS Library 1.1.1
42337  * Copyright(c) 2006-2007, Ext JS, LLC.
42338  *
42339  * Originally Released Under LGPL - original licence link has changed is not relivant.
42340  *
42341  * Fork - LGPL
42342  * <script type="text/javascript">
42343  */
42344  
42345 /**
42346  * @class Roo.form.Layout
42347  * @extends Roo.Component
42348  * Creates a container for layout and rendering of fields in an {@link Roo.form.Form}.
42349  * @constructor
42350  * @param {Object} config Configuration options
42351  */
42352 Roo.form.Layout = function(config){
42353     var xitems = [];
42354     if (config.items) {
42355         xitems = config.items;
42356         delete config.items;
42357     }
42358     Roo.form.Layout.superclass.constructor.call(this, config);
42359     this.stack = [];
42360     Roo.each(xitems, this.addxtype, this);
42361      
42362 };
42363
42364 Roo.extend(Roo.form.Layout, Roo.Component, {
42365     /**
42366      * @cfg {String/Object} autoCreate
42367      * A DomHelper element spec used to autocreate the layout (defaults to {tag: 'div', cls: 'x-form-ct'})
42368      */
42369     /**
42370      * @cfg {String/Object/Function} style
42371      * A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or
42372      * a function which returns such a specification.
42373      */
42374     /**
42375      * @cfg {String} labelAlign
42376      * Valid values are "left," "top" and "right" (defaults to "left")
42377      */
42378     /**
42379      * @cfg {Number} labelWidth
42380      * Fixed width in pixels of all field labels (defaults to undefined)
42381      */
42382     /**
42383      * @cfg {Boolean} clear
42384      * True to add a clearing element at the end of this layout, equivalent to CSS clear: both (defaults to true)
42385      */
42386     clear : true,
42387     /**
42388      * @cfg {String} labelSeparator
42389      * The separator to use after field labels (defaults to ':')
42390      */
42391     labelSeparator : ':',
42392     /**
42393      * @cfg {Boolean} hideLabels
42394      * True to suppress the display of field labels in this layout (defaults to false)
42395      */
42396     hideLabels : false,
42397
42398     // private
42399     defaultAutoCreate : {tag: 'div', cls: 'x-form-ct'},
42400     
42401     isLayout : true,
42402     
42403     // private
42404     onRender : function(ct, position){
42405         if(this.el){ // from markup
42406             this.el = Roo.get(this.el);
42407         }else {  // generate
42408             var cfg = this.getAutoCreate();
42409             this.el = ct.createChild(cfg, position);
42410         }
42411         if(this.style){
42412             this.el.applyStyles(this.style);
42413         }
42414         if(this.labelAlign){
42415             this.el.addClass('x-form-label-'+this.labelAlign);
42416         }
42417         if(this.hideLabels){
42418             this.labelStyle = "display:none";
42419             this.elementStyle = "padding-left:0;";
42420         }else{
42421             if(typeof this.labelWidth == 'number'){
42422                 this.labelStyle = "width:"+this.labelWidth+"px;";
42423                 this.elementStyle = "padding-left:"+((this.labelWidth+(typeof this.labelPad == 'number' ? this.labelPad : 5))+'px')+";";
42424             }
42425             if(this.labelAlign == 'top'){
42426                 this.labelStyle = "width:auto;";
42427                 this.elementStyle = "padding-left:0;";
42428             }
42429         }
42430         var stack = this.stack;
42431         var slen = stack.length;
42432         if(slen > 0){
42433             if(!this.fieldTpl){
42434                 var t = new Roo.Template(
42435                     '<div class="x-form-item {5}">',
42436                         '<label for="{0}" style="{2}">{1}{4}</label>',
42437                         '<div class="x-form-element" id="x-form-el-{0}" style="{3}">',
42438                         '</div>',
42439                     '</div><div class="x-form-clear-left"></div>'
42440                 );
42441                 t.disableFormats = true;
42442                 t.compile();
42443                 Roo.form.Layout.prototype.fieldTpl = t;
42444             }
42445             for(var i = 0; i < slen; i++) {
42446                 if(stack[i].isFormField){
42447                     this.renderField(stack[i]);
42448                 }else{
42449                     this.renderComponent(stack[i]);
42450                 }
42451             }
42452         }
42453         if(this.clear){
42454             this.el.createChild({cls:'x-form-clear'});
42455         }
42456     },
42457
42458     // private
42459     renderField : function(f){
42460         f.fieldEl = Roo.get(this.fieldTpl.append(this.el, [
42461                f.id, //0
42462                f.fieldLabel, //1
42463                f.labelStyle||this.labelStyle||'', //2
42464                this.elementStyle||'', //3
42465                typeof f.labelSeparator == 'undefined' ? this.labelSeparator : f.labelSeparator, //4
42466                f.itemCls||this.itemCls||''  //5
42467        ], true).getPrevSibling());
42468     },
42469
42470     // private
42471     renderComponent : function(c){
42472         c.render(c.isLayout ? this.el : this.el.createChild());    
42473     },
42474     /**
42475      * Adds a object form elements (using the xtype property as the factory method.)
42476      * Valid xtypes are:  TextField, TextArea .... Button, Layout, FieldSet, Column
42477      * @param {Object} config 
42478      */
42479     addxtype : function(o)
42480     {
42481         // create the lement.
42482         o.form = this.form;
42483         var fe = Roo.factory(o, Roo.form);
42484         this.form.allItems.push(fe);
42485         this.stack.push(fe);
42486         
42487         if (fe.isFormField) {
42488             this.form.items.add(fe);
42489         }
42490          
42491         return fe;
42492     }
42493 });
42494
42495 /**
42496  * @class Roo.form.Column
42497  * @extends Roo.form.Layout
42498  * Creates a column container for layout and rendering of fields in an {@link Roo.form.Form}.
42499  * @constructor
42500  * @param {Object} config Configuration options
42501  */
42502 Roo.form.Column = function(config){
42503     Roo.form.Column.superclass.constructor.call(this, config);
42504 };
42505
42506 Roo.extend(Roo.form.Column, Roo.form.Layout, {
42507     /**
42508      * @cfg {Number/String} width
42509      * The fixed width of the column in pixels or CSS value (defaults to "auto")
42510      */
42511     /**
42512      * @cfg {String/Object} autoCreate
42513      * A DomHelper element spec used to autocreate the column (defaults to {tag: 'div', cls: 'x-form-ct x-form-column'})
42514      */
42515
42516     // private
42517     defaultAutoCreate : {tag: 'div', cls: 'x-form-ct x-form-column'},
42518
42519     // private
42520     onRender : function(ct, position){
42521         Roo.form.Column.superclass.onRender.call(this, ct, position);
42522         if(this.width){
42523             this.el.setWidth(this.width);
42524         }
42525     }
42526 });
42527
42528
42529 /**
42530  * @class Roo.form.Row
42531  * @extends Roo.form.Layout
42532  * Creates a row container for layout and rendering of fields in an {@link Roo.form.Form}.
42533  * @constructor
42534  * @param {Object} config Configuration options
42535  */
42536
42537  
42538 Roo.form.Row = function(config){
42539     Roo.form.Row.superclass.constructor.call(this, config);
42540 };
42541  
42542 Roo.extend(Roo.form.Row, Roo.form.Layout, {
42543       /**
42544      * @cfg {Number/String} width
42545      * The fixed width of the column in pixels or CSS value (defaults to "auto")
42546      */
42547     /**
42548      * @cfg {Number/String} height
42549      * The fixed height of the column in pixels or CSS value (defaults to "auto")
42550      */
42551     defaultAutoCreate : {tag: 'div', cls: 'x-form-ct x-form-row'},
42552     
42553     padWidth : 20,
42554     // private
42555     onRender : function(ct, position){
42556         //console.log('row render');
42557         if(!this.rowTpl){
42558             var t = new Roo.Template(
42559                 '<div class="x-form-item {5}" style="float:left;width:{6}px">',
42560                     '<label for="{0}" style="{2}">{1}{4}</label>',
42561                     '<div class="x-form-element" id="x-form-el-{0}" style="{3}">',
42562                     '</div>',
42563                 '</div>'
42564             );
42565             t.disableFormats = true;
42566             t.compile();
42567             Roo.form.Layout.prototype.rowTpl = t;
42568         }
42569         this.fieldTpl = this.rowTpl;
42570         
42571         //console.log('lw' + this.labelWidth +', la:' + this.labelAlign);
42572         var labelWidth = 100;
42573         
42574         if ((this.labelAlign != 'top')) {
42575             if (typeof this.labelWidth == 'number') {
42576                 labelWidth = this.labelWidth
42577             }
42578             this.padWidth =  20 + labelWidth;
42579             
42580         }
42581         
42582         Roo.form.Column.superclass.onRender.call(this, ct, position);
42583         if(this.width){
42584             this.el.setWidth(this.width);
42585         }
42586         if(this.height){
42587             this.el.setHeight(this.height);
42588         }
42589     },
42590     
42591     // private
42592     renderField : function(f){
42593         f.fieldEl = this.fieldTpl.append(this.el, [
42594                f.id, f.fieldLabel,
42595                f.labelStyle||this.labelStyle||'',
42596                this.elementStyle||'',
42597                typeof f.labelSeparator == 'undefined' ? this.labelSeparator : f.labelSeparator,
42598                f.itemCls||this.itemCls||'',
42599                f.width ? f.width + this.padWidth : 160 + this.padWidth
42600        ],true);
42601     }
42602 });
42603  
42604
42605 /**
42606  * @class Roo.form.FieldSet
42607  * @extends Roo.form.Layout
42608  * Creates a fieldset container for layout and rendering of fields in an {@link Roo.form.Form}.
42609  * @constructor
42610  * @param {Object} config Configuration options
42611  */
42612 Roo.form.FieldSet = function(config){
42613     Roo.form.FieldSet.superclass.constructor.call(this, config);
42614 };
42615
42616 Roo.extend(Roo.form.FieldSet, Roo.form.Layout, {
42617     /**
42618      * @cfg {String} legend
42619      * The text to display as the legend for the FieldSet (defaults to '')
42620      */
42621     /**
42622      * @cfg {String/Object} autoCreate
42623      * A DomHelper element spec used to autocreate the fieldset (defaults to {tag: 'fieldset', cn: {tag:'legend'}})
42624      */
42625
42626     // private
42627     defaultAutoCreate : {tag: 'fieldset', cn: {tag:'legend'}},
42628
42629     // private
42630     onRender : function(ct, position){
42631         Roo.form.FieldSet.superclass.onRender.call(this, ct, position);
42632         if(this.legend){
42633             this.setLegend(this.legend);
42634         }
42635     },
42636
42637     // private
42638     setLegend : function(text){
42639         if(this.rendered){
42640             this.el.child('legend').update(text);
42641         }
42642     }
42643 });/*
42644  * Based on:
42645  * Ext JS Library 1.1.1
42646  * Copyright(c) 2006-2007, Ext JS, LLC.
42647  *
42648  * Originally Released Under LGPL - original licence link has changed is not relivant.
42649  *
42650  * Fork - LGPL
42651  * <script type="text/javascript">
42652  */
42653 /**
42654  * @class Roo.form.VTypes
42655  * Overridable validation definitions. The validations provided are basic and intended to be easily customizable and extended.
42656  * @singleton
42657  */
42658 Roo.form.VTypes = function(){
42659     // closure these in so they are only created once.
42660     var alpha = /^[a-zA-Z_]+$/;
42661     var alphanum = /^[a-zA-Z0-9_]+$/;
42662     var email = /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/;
42663     var url = /(((https?)|(ftp)):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@&#;`~=%!]*)(\.\w{2,})?)*\/?)/i;
42664
42665     // All these messages and functions are configurable
42666     return {
42667         /**
42668          * The function used to validate email addresses
42669          * @param {String} value The email address
42670          */
42671         'email' : function(v){
42672             return email.test(v);
42673         },
42674         /**
42675          * The error text to display when the email validation function returns false
42676          * @type String
42677          */
42678         'emailText' : 'This field should be an e-mail address in the format "user@domain.com"',
42679         /**
42680          * The keystroke filter mask to be applied on email input
42681          * @type RegExp
42682          */
42683         'emailMask' : /[a-z0-9_\.\-@]/i,
42684
42685         /**
42686          * The function used to validate URLs
42687          * @param {String} value The URL
42688          */
42689         'url' : function(v){
42690             return url.test(v);
42691         },
42692         /**
42693          * The error text to display when the url validation function returns false
42694          * @type String
42695          */
42696         'urlText' : 'This field should be a URL in the format "http:/'+'/www.domain.com"',
42697         
42698         /**
42699          * The function used to validate alpha values
42700          * @param {String} value The value
42701          */
42702         'alpha' : function(v){
42703             return alpha.test(v);
42704         },
42705         /**
42706          * The error text to display when the alpha validation function returns false
42707          * @type String
42708          */
42709         'alphaText' : 'This field should only contain letters and _',
42710         /**
42711          * The keystroke filter mask to be applied on alpha input
42712          * @type RegExp
42713          */
42714         'alphaMask' : /[a-z_]/i,
42715
42716         /**
42717          * The function used to validate alphanumeric values
42718          * @param {String} value The value
42719          */
42720         'alphanum' : function(v){
42721             return alphanum.test(v);
42722         },
42723         /**
42724          * The error text to display when the alphanumeric validation function returns false
42725          * @type String
42726          */
42727         'alphanumText' : 'This field should only contain letters, numbers and _',
42728         /**
42729          * The keystroke filter mask to be applied on alphanumeric input
42730          * @type RegExp
42731          */
42732         'alphanumMask' : /[a-z0-9_]/i
42733     };
42734 }();//<script type="text/javascript">
42735
42736 /**
42737  * @class Roo.form.FCKeditor
42738  * @extends Roo.form.TextArea
42739  * Wrapper around the FCKEditor http://www.fckeditor.net
42740  * @constructor
42741  * Creates a new FCKeditor
42742  * @param {Object} config Configuration options
42743  */
42744 Roo.form.FCKeditor = function(config){
42745     Roo.form.FCKeditor.superclass.constructor.call(this, config);
42746     this.addEvents({
42747          /**
42748          * @event editorinit
42749          * Fired when the editor is initialized - you can add extra handlers here..
42750          * @param {FCKeditor} this
42751          * @param {Object} the FCK object.
42752          */
42753         editorinit : true
42754     });
42755     
42756     
42757 };
42758 Roo.form.FCKeditor.editors = { };
42759 Roo.extend(Roo.form.FCKeditor, Roo.form.TextArea,
42760 {
42761     //defaultAutoCreate : {
42762     //    tag : "textarea",style   : "width:100px;height:60px;" ,autocomplete    : "off"
42763     //},
42764     // private
42765     /**
42766      * @cfg {Object} fck options - see fck manual for details.
42767      */
42768     fckconfig : false,
42769     
42770     /**
42771      * @cfg {Object} fck toolbar set (Basic or Default)
42772      */
42773     toolbarSet : 'Basic',
42774     /**
42775      * @cfg {Object} fck BasePath
42776      */ 
42777     basePath : '/fckeditor/',
42778     
42779     
42780     frame : false,
42781     
42782     value : '',
42783     
42784    
42785     onRender : function(ct, position)
42786     {
42787         if(!this.el){
42788             this.defaultAutoCreate = {
42789                 tag: "textarea",
42790                 style:"width:300px;height:60px;",
42791                 autocomplete: "off"
42792             };
42793         }
42794         Roo.form.FCKeditor.superclass.onRender.call(this, ct, position);
42795         /*
42796         if(this.grow){
42797             this.textSizeEl = Roo.DomHelper.append(document.body, {tag: "pre", cls: "x-form-grow-sizer"});
42798             if(this.preventScrollbars){
42799                 this.el.setStyle("overflow", "hidden");
42800             }
42801             this.el.setHeight(this.growMin);
42802         }
42803         */
42804         //console.log('onrender' + this.getId() );
42805         Roo.form.FCKeditor.editors[this.getId()] = this;
42806          
42807
42808         this.replaceTextarea() ;
42809         
42810     },
42811     
42812     getEditor : function() {
42813         return this.fckEditor;
42814     },
42815     /**
42816      * Sets a data value into the field and validates it.  To set the value directly without validation see {@link #setRawValue}.
42817      * @param {Mixed} value The value to set
42818      */
42819     
42820     
42821     setValue : function(value)
42822     {
42823         //console.log('setValue: ' + value);
42824         
42825         if(typeof(value) == 'undefined') { // not sure why this is happending...
42826             return;
42827         }
42828         Roo.form.FCKeditor.superclass.setValue.apply(this,[value]);
42829         
42830         //if(!this.el || !this.getEditor()) {
42831         //    this.value = value;
42832             //this.setValue.defer(100,this,[value]);    
42833         //    return;
42834         //} 
42835         
42836         if(!this.getEditor()) {
42837             return;
42838         }
42839         
42840         this.getEditor().SetData(value);
42841         
42842         //
42843
42844     },
42845
42846     /**
42847      * Returns the normalized data value (undefined or emptyText will be returned as '').  To return the raw value see {@link #getRawValue}.
42848      * @return {Mixed} value The field value
42849      */
42850     getValue : function()
42851     {
42852         
42853         if (this.frame && this.frame.dom.style.display == 'none') {
42854             return Roo.form.FCKeditor.superclass.getValue.call(this);
42855         }
42856         
42857         if(!this.el || !this.getEditor()) {
42858            
42859            // this.getValue.defer(100,this); 
42860             return this.value;
42861         }
42862        
42863         
42864         var value=this.getEditor().GetData();
42865         Roo.form.FCKeditor.superclass.setValue.apply(this,[value]);
42866         return Roo.form.FCKeditor.superclass.getValue.call(this);
42867         
42868
42869     },
42870
42871     /**
42872      * Returns the raw data value which may or may not be a valid, defined value.  To return a normalized value see {@link #getValue}.
42873      * @return {Mixed} value The field value
42874      */
42875     getRawValue : function()
42876     {
42877         if (this.frame && this.frame.dom.style.display == 'none') {
42878             return Roo.form.FCKeditor.superclass.getRawValue.call(this);
42879         }
42880         
42881         if(!this.el || !this.getEditor()) {
42882             //this.getRawValue.defer(100,this); 
42883             return this.value;
42884             return;
42885         }
42886         
42887         
42888         
42889         var value=this.getEditor().GetData();
42890         Roo.form.FCKeditor.superclass.setRawValue.apply(this,[value]);
42891         return Roo.form.FCKeditor.superclass.getRawValue.call(this);
42892          
42893     },
42894     
42895     setSize : function(w,h) {
42896         
42897         
42898         
42899         //if (this.frame && this.frame.dom.style.display == 'none') {
42900         //    Roo.form.FCKeditor.superclass.setSize.apply(this, [w, h]);
42901         //    return;
42902         //}
42903         //if(!this.el || !this.getEditor()) {
42904         //    this.setSize.defer(100,this, [w,h]); 
42905         //    return;
42906         //}
42907         
42908         
42909         
42910         Roo.form.FCKeditor.superclass.setSize.apply(this, [w, h]);
42911         
42912         this.frame.dom.setAttribute('width', w);
42913         this.frame.dom.setAttribute('height', h);
42914         this.frame.setSize(w,h);
42915         
42916     },
42917     
42918     toggleSourceEdit : function(value) {
42919         
42920       
42921          
42922         this.el.dom.style.display = value ? '' : 'none';
42923         this.frame.dom.style.display = value ?  'none' : '';
42924         
42925     },
42926     
42927     
42928     focus: function(tag)
42929     {
42930         if (this.frame.dom.style.display == 'none') {
42931             return Roo.form.FCKeditor.superclass.focus.call(this);
42932         }
42933         if(!this.el || !this.getEditor()) {
42934             this.focus.defer(100,this, [tag]); 
42935             return;
42936         }
42937         
42938         
42939         
42940         
42941         var tgs = this.getEditor().EditorDocument.getElementsByTagName(tag);
42942         this.getEditor().Focus();
42943         if (tgs.length) {
42944             if (!this.getEditor().Selection.GetSelection()) {
42945                 this.focus.defer(100,this, [tag]); 
42946                 return;
42947             }
42948             
42949             
42950             var r = this.getEditor().EditorDocument.createRange();
42951             r.setStart(tgs[0],0);
42952             r.setEnd(tgs[0],0);
42953             this.getEditor().Selection.GetSelection().removeAllRanges();
42954             this.getEditor().Selection.GetSelection().addRange(r);
42955             this.getEditor().Focus();
42956         }
42957         
42958     },
42959     
42960     
42961     
42962     replaceTextarea : function()
42963     {
42964         if ( document.getElementById( this.getId() + '___Frame' ) )
42965             return ;
42966         //if ( !this.checkBrowser || this._isCompatibleBrowser() )
42967         //{
42968             // We must check the elements firstly using the Id and then the name.
42969         var oTextarea = document.getElementById( this.getId() );
42970         
42971         var colElementsByName = document.getElementsByName( this.getId() ) ;
42972          
42973         oTextarea.style.display = 'none' ;
42974
42975         if ( oTextarea.tabIndex ) {            
42976             this.TabIndex = oTextarea.tabIndex ;
42977         }
42978         
42979         this._insertHtmlBefore( this._getConfigHtml(), oTextarea ) ;
42980         this._insertHtmlBefore( this._getIFrameHtml(), oTextarea ) ;
42981         this.frame = Roo.get(this.getId() + '___Frame')
42982     },
42983     
42984     _getConfigHtml : function()
42985     {
42986         var sConfig = '' ;
42987
42988         for ( var o in this.fckconfig ) {
42989             sConfig += sConfig.length > 0  ? '&amp;' : '';
42990             sConfig += encodeURIComponent( o ) + '=' + encodeURIComponent( this.fckconfig[o] ) ;
42991         }
42992
42993         return '<input type="hidden" id="' + this.getId() + '___Config" value="' + sConfig + '" style="display:none" />' ;
42994     },
42995     
42996     
42997     _getIFrameHtml : function()
42998     {
42999         var sFile = 'fckeditor.html' ;
43000         /* no idea what this is about..
43001         try
43002         {
43003             if ( (/fcksource=true/i).test( window.top.location.search ) )
43004                 sFile = 'fckeditor.original.html' ;
43005         }
43006         catch (e) { 
43007         */
43008
43009         var sLink = this.basePath + 'editor/' + sFile + '?InstanceName=' + encodeURIComponent( this.getId() ) ;
43010         sLink += this.toolbarSet ? ( '&amp;Toolbar=' + this.toolbarSet)  : '';
43011         
43012         
43013         var html = '<iframe id="' + this.getId() +
43014             '___Frame" src="' + sLink +
43015             '" width="' + this.width +
43016             '" height="' + this.height + '"' +
43017             (this.tabIndex ?  ' tabindex="' + this.tabIndex + '"' :'' ) +
43018             ' frameborder="0" scrolling="no"></iframe>' ;
43019
43020         return html ;
43021     },
43022     
43023     _insertHtmlBefore : function( html, element )
43024     {
43025         if ( element.insertAdjacentHTML )       {
43026             // IE
43027             element.insertAdjacentHTML( 'beforeBegin', html ) ;
43028         } else { // Gecko
43029             var oRange = document.createRange() ;
43030             oRange.setStartBefore( element ) ;
43031             var oFragment = oRange.createContextualFragment( html );
43032             element.parentNode.insertBefore( oFragment, element ) ;
43033         }
43034     }
43035     
43036     
43037   
43038     
43039     
43040     
43041     
43042
43043 });
43044
43045 //Roo.reg('fckeditor', Roo.form.FCKeditor);
43046
43047 function FCKeditor_OnComplete(editorInstance){
43048     var f = Roo.form.FCKeditor.editors[editorInstance.Name];
43049     f.fckEditor = editorInstance;
43050     //console.log("loaded");
43051     f.fireEvent('editorinit', f, editorInstance);
43052
43053   
43054
43055  
43056
43057
43058
43059
43060
43061
43062
43063
43064
43065
43066
43067
43068
43069
43070
43071 //<script type="text/javascript">
43072 /**
43073  * @class Roo.form.GridField
43074  * @extends Roo.form.Field
43075  * Embed a grid (or editable grid into a form)
43076  * STATUS ALPHA
43077  * 
43078  * This embeds a grid in a form, the value of the field should be the json encoded array of rows
43079  * it needs 
43080  * xgrid.store = Roo.data.Store
43081  * xgrid.store.proxy = Roo.data.MemoryProxy (data = [] )
43082  * xgrid.store.reader = Roo.data.JsonReader 
43083  * 
43084  * 
43085  * @constructor
43086  * Creates a new GridField
43087  * @param {Object} config Configuration options
43088  */
43089 Roo.form.GridField = function(config){
43090     Roo.form.GridField.superclass.constructor.call(this, config);
43091      
43092 };
43093
43094 Roo.extend(Roo.form.GridField, Roo.form.Field,  {
43095     /**
43096      * @cfg {Number} width  - used to restrict width of grid..
43097      */
43098     width : 100,
43099     /**
43100      * @cfg {Number} height - used to restrict height of grid..
43101      */
43102     height : 50,
43103      /**
43104      * @cfg {Object} xgrid (xtype'd description of grid) { xtype : 'Grid', dataSource: .... }
43105          * 
43106          *}
43107      */
43108     xgrid : false, 
43109     /**
43110      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
43111      * {tag: "input", type: "checkbox", autocomplete: "off"})
43112      */
43113    // defaultAutoCreate : { tag: 'div' },
43114     defaultAutoCreate : { tag: 'input', type: 'hidden', autocomplete: 'off'},
43115     /**
43116      * @cfg {String} addTitle Text to include for adding a title.
43117      */
43118     addTitle : false,
43119     //
43120     onResize : function(){
43121         Roo.form.Field.superclass.onResize.apply(this, arguments);
43122     },
43123
43124     initEvents : function(){
43125         // Roo.form.Checkbox.superclass.initEvents.call(this);
43126         // has no events...
43127        
43128     },
43129
43130
43131     getResizeEl : function(){
43132         return this.wrap;
43133     },
43134
43135     getPositionEl : function(){
43136         return this.wrap;
43137     },
43138
43139     // private
43140     onRender : function(ct, position){
43141         
43142         this.style = this.style || 'overflow: hidden; border:1px solid #c3daf9;';
43143         var style = this.style;
43144         delete this.style;
43145         
43146         Roo.form.GridField.superclass.onRender.call(this, ct, position);
43147         this.wrap = this.el.wrap({cls: ''}); // not sure why ive done thsi...
43148         this.viewEl = this.wrap.createChild({ tag: 'div' });
43149         if (style) {
43150             this.viewEl.applyStyles(style);
43151         }
43152         if (this.width) {
43153             this.viewEl.setWidth(this.width);
43154         }
43155         if (this.height) {
43156             this.viewEl.setHeight(this.height);
43157         }
43158         //if(this.inputValue !== undefined){
43159         //this.setValue(this.value);
43160         
43161         
43162         this.grid = new Roo.grid[this.xgrid.xtype](this.viewEl, this.xgrid);
43163         
43164         
43165         this.grid.render();
43166         this.grid.getDataSource().on('remove', this.refreshValue, this);
43167         this.grid.getDataSource().on('update', this.refreshValue, this);
43168         this.grid.on('afteredit', this.refreshValue, this);
43169  
43170     },
43171      
43172     
43173     /**
43174      * Sets the value of the item. 
43175      * @param {String} either an object  or a string..
43176      */
43177     setValue : function(v){
43178         //this.value = v;
43179         v = v || []; // empty set..
43180         // this does not seem smart - it really only affects memoryproxy grids..
43181         if (this.grid && this.grid.getDataSource() && typeof(v) != 'undefined') {
43182             var ds = this.grid.getDataSource();
43183             // assumes a json reader..
43184             var data = {}
43185             data[ds.reader.meta.root ] =  typeof(v) == 'string' ? Roo.decode(v) : v;
43186             ds.loadData( data);
43187         }
43188         // clear selection so it does not get stale.
43189         if (this.grid.sm) { 
43190             this.grid.sm.clearSelections();
43191         }
43192         
43193         Roo.form.GridField.superclass.setValue.call(this, v);
43194         this.refreshValue();
43195         // should load data in the grid really....
43196     },
43197     
43198     // private
43199     refreshValue: function() {
43200          var val = [];
43201         this.grid.getDataSource().each(function(r) {
43202             val.push(r.data);
43203         });
43204         this.el.dom.value = Roo.encode(val);
43205     }
43206     
43207      
43208     
43209     
43210 });/*
43211  * Based on:
43212  * Ext JS Library 1.1.1
43213  * Copyright(c) 2006-2007, Ext JS, LLC.
43214  *
43215  * Originally Released Under LGPL - original licence link has changed is not relivant.
43216  *
43217  * Fork - LGPL
43218  * <script type="text/javascript">
43219  */
43220 /**
43221  * @class Roo.form.DisplayField
43222  * @extends Roo.form.Field
43223  * A generic Field to display non-editable data.
43224  * @constructor
43225  * Creates a new Display Field item.
43226  * @param {Object} config Configuration options
43227  */
43228 Roo.form.DisplayField = function(config){
43229     Roo.form.DisplayField.superclass.constructor.call(this, config);
43230     
43231 };
43232
43233 Roo.extend(Roo.form.DisplayField, Roo.form.TextField,  {
43234     inputType:      'hidden',
43235     allowBlank:     true,
43236     readOnly:         true,
43237     
43238  
43239     /**
43240      * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
43241      */
43242     focusClass : undefined,
43243     /**
43244      * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to "x-form-field")
43245      */
43246     fieldClass: 'x-form-field',
43247     
43248      /**
43249      * @cfg {Function} valueRenderer The renderer for the field (so you can reformat output). should return raw HTML
43250      */
43251     valueRenderer: undefined,
43252     
43253     width: 100,
43254     /**
43255      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
43256      * {tag: "input", type: "checkbox", autocomplete: "off"})
43257      */
43258      
43259  //   defaultAutoCreate : { tag: 'input', type: 'hidden', autocomplete: 'off'},
43260
43261     onResize : function(){
43262         Roo.form.DisplayField.superclass.onResize.apply(this, arguments);
43263         
43264     },
43265
43266     initEvents : function(){
43267         // Roo.form.Checkbox.superclass.initEvents.call(this);
43268         // has no events...
43269        
43270     },
43271
43272
43273     getResizeEl : function(){
43274         return this.wrap;
43275     },
43276
43277     getPositionEl : function(){
43278         return this.wrap;
43279     },
43280
43281     // private
43282     onRender : function(ct, position){
43283         
43284         Roo.form.DisplayField.superclass.onRender.call(this, ct, position);
43285         //if(this.inputValue !== undefined){
43286         this.wrap = this.el.wrap();
43287         
43288         this.viewEl = this.wrap.createChild({ tag: 'div', cls: 'x-form-displayfield'});
43289         
43290         if (this.bodyStyle) {
43291             this.viewEl.applyStyles(this.bodyStyle);
43292         }
43293         //this.viewEl.setStyle('padding', '2px');
43294         
43295         this.setValue(this.value);
43296         
43297     },
43298 /*
43299     // private
43300     initValue : Roo.emptyFn,
43301
43302   */
43303
43304         // private
43305     onClick : function(){
43306         
43307     },
43308
43309     /**
43310      * Sets the checked state of the checkbox.
43311      * @param {Boolean/String} checked True, 'true', '1', or 'on' to check the checkbox, any other value will uncheck it.
43312      */
43313     setValue : function(v){
43314         this.value = v;
43315         var html = this.valueRenderer ?  this.valueRenderer(v) : String.format('{0}', v);
43316         // this might be called before we have a dom element..
43317         if (!this.viewEl) {
43318             return;
43319         }
43320         this.viewEl.dom.innerHTML = html;
43321         Roo.form.DisplayField.superclass.setValue.call(this, v);
43322
43323     }
43324 });/*
43325  * 
43326  * Licence- LGPL
43327  * 
43328  */
43329
43330 /**
43331  * @class Roo.form.DayPicker
43332  * @extends Roo.form.Field
43333  * A Day picker show [M] [T] [W] ....
43334  * @constructor
43335  * Creates a new Day Picker
43336  * @param {Object} config Configuration options
43337  */
43338 Roo.form.DayPicker= function(config){
43339     Roo.form.DayPicker.superclass.constructor.call(this, config);
43340      
43341 };
43342
43343 Roo.extend(Roo.form.DayPicker, Roo.form.Field,  {
43344     /**
43345      * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
43346      */
43347     focusClass : undefined,
43348     /**
43349      * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to "x-form-field")
43350      */
43351     fieldClass: "x-form-field",
43352    
43353     /**
43354      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
43355      * {tag: "input", type: "checkbox", autocomplete: "off"})
43356      */
43357     defaultAutoCreate : { tag: "input", type: 'hidden', autocomplete: "off"},
43358     
43359    
43360     actionMode : 'viewEl', 
43361     //
43362     // private
43363  
43364     inputType : 'hidden',
43365     
43366      
43367     inputElement: false, // real input element?
43368     basedOn: false, // ????
43369     
43370     isFormField: true, // not sure where this is needed!!!!
43371
43372     onResize : function(){
43373         Roo.form.Checkbox.superclass.onResize.apply(this, arguments);
43374         if(!this.boxLabel){
43375             this.el.alignTo(this.wrap, 'c-c');
43376         }
43377     },
43378
43379     initEvents : function(){
43380         Roo.form.Checkbox.superclass.initEvents.call(this);
43381         this.el.on("click", this.onClick,  this);
43382         this.el.on("change", this.onClick,  this);
43383     },
43384
43385
43386     getResizeEl : function(){
43387         return this.wrap;
43388     },
43389
43390     getPositionEl : function(){
43391         return this.wrap;
43392     },
43393
43394     
43395     // private
43396     onRender : function(ct, position){
43397         Roo.form.Checkbox.superclass.onRender.call(this, ct, position);
43398        
43399         this.wrap = this.el.wrap({cls: 'x-form-daypick-item '});
43400         
43401         var r1 = '<table><tr>';
43402         var r2 = '<tr class="x-form-daypick-icons">';
43403         for (var i=0; i < 7; i++) {
43404             r1+= '<td><div>' + Date.dayNames[i].substring(0,3) + '</div></td>';
43405             r2+= '<td><img class="x-menu-item-icon" src="' + Roo.BLANK_IMAGE_URL  +'"></td>';
43406         }
43407         
43408         var viewEl = this.wrap.createChild( r1 + '</tr>' + r2 + '</tr></table>');
43409         viewEl.select('img').on('click', this.onClick, this);
43410         this.viewEl = viewEl;   
43411         
43412         
43413         // this will not work on Chrome!!!
43414         this.el.on('DOMAttrModified', this.setFromHidden,  this); //ff
43415         this.el.on('propertychange', this.setFromHidden,  this);  //ie
43416         
43417         
43418           
43419
43420     },
43421
43422     // private
43423     initValue : Roo.emptyFn,
43424
43425     /**
43426      * Returns the checked state of the checkbox.
43427      * @return {Boolean} True if checked, else false
43428      */
43429     getValue : function(){
43430         return this.el.dom.value;
43431         
43432     },
43433
43434         // private
43435     onClick : function(e){ 
43436         //this.setChecked(!this.checked);
43437         Roo.get(e.target).toggleClass('x-menu-item-checked');
43438         this.refreshValue();
43439         //if(this.el.dom.checked != this.checked){
43440         //    this.setValue(this.el.dom.checked);
43441        // }
43442     },
43443     
43444     // private
43445     refreshValue : function()
43446     {
43447         var val = '';
43448         this.viewEl.select('img',true).each(function(e,i,n)  {
43449             val += e.is(".x-menu-item-checked") ? String(n) : '';
43450         });
43451         this.setValue(val, true);
43452     },
43453
43454     /**
43455      * Sets the checked state of the checkbox.
43456      * On is always based on a string comparison between inputValue and the param.
43457      * @param {Boolean/String} value - the value to set 
43458      * @param {Boolean/String} suppressEvent - whether to suppress the checkchange event.
43459      */
43460     setValue : function(v,suppressEvent){
43461         if (!this.el.dom) {
43462             return;
43463         }
43464         var old = this.el.dom.value ;
43465         this.el.dom.value = v;
43466         if (suppressEvent) {
43467             return ;
43468         }
43469          
43470         // update display..
43471         this.viewEl.select('img',true).each(function(e,i,n)  {
43472             
43473             var on = e.is(".x-menu-item-checked");
43474             var newv = v.indexOf(String(n)) > -1;
43475             if (on != newv) {
43476                 e.toggleClass('x-menu-item-checked');
43477             }
43478             
43479         });
43480         
43481         
43482         this.fireEvent('change', this, v, old);
43483         
43484         
43485     },
43486    
43487     // handle setting of hidden value by some other method!!?!?
43488     setFromHidden: function()
43489     {
43490         if(!this.el){
43491             return;
43492         }
43493         //console.log("SET FROM HIDDEN");
43494         //alert('setFrom hidden');
43495         this.setValue(this.el.dom.value);
43496     },
43497     
43498     onDestroy : function()
43499     {
43500         if(this.viewEl){
43501             Roo.get(this.viewEl).remove();
43502         }
43503          
43504         Roo.form.DayPicker.superclass.onDestroy.call(this);
43505     }
43506
43507 });/*
43508  * RooJS Library 1.1.1
43509  * Copyright(c) 2008-2011  Alan Knowles
43510  *
43511  * License - LGPL
43512  */
43513  
43514
43515 /**
43516  * @class Roo.form.ComboCheck
43517  * @extends Roo.form.ComboBox
43518  * A combobox for multiple select items.
43519  *
43520  * FIXME - could do with a reset button..
43521  * 
43522  * @constructor
43523  * Create a new ComboCheck
43524  * @param {Object} config Configuration options
43525  */
43526 Roo.form.ComboCheck = function(config){
43527     Roo.form.ComboCheck.superclass.constructor.call(this, config);
43528     // should verify some data...
43529     // like
43530     // hiddenName = required..
43531     // displayField = required
43532     // valudField == required
43533     var req= [ 'hiddenName', 'displayField', 'valueField' ];
43534     var _t = this;
43535     Roo.each(req, function(e) {
43536         if ((typeof(_t[e]) == 'undefined' ) || !_t[e].length) {
43537             throw "Roo.form.ComboCheck : missing value for: " + e;
43538         }
43539     });
43540     
43541     
43542 };
43543
43544 Roo.extend(Roo.form.ComboCheck, Roo.form.ComboBox, {
43545      
43546      
43547     editable : false,
43548      
43549     selectedClass: 'x-menu-item-checked', 
43550     
43551     // private
43552     onRender : function(ct, position){
43553         var _t = this;
43554         
43555         
43556         
43557         if(!this.tpl){
43558             var cls = 'x-combo-list';
43559
43560             
43561             this.tpl =  new Roo.Template({
43562                 html :  '<div class="'+cls+'-item x-menu-check-item">' +
43563                    '<img class="x-menu-item-icon" style="margin: 0px;" src="' + Roo.BLANK_IMAGE_URL + '">' + 
43564                    '<span>{' + this.displayField + '}</span>' +
43565                     '</div>' 
43566                 
43567             });
43568         }
43569  
43570         
43571         Roo.form.ComboCheck.superclass.onRender.call(this, ct, position);
43572         this.view.singleSelect = false;
43573         this.view.multiSelect = true;
43574         this.view.toggleSelect = true;
43575         this.pageTb.add(new Roo.Toolbar.Fill(), {
43576             
43577             text: 'Done',
43578             handler: function()
43579             {
43580                 _t.collapse();
43581             }
43582         });
43583     },
43584     
43585     onViewOver : function(e, t){
43586         // do nothing...
43587         return;
43588         
43589     },
43590     
43591     onViewClick : function(doFocus,index){
43592         return;
43593         
43594     },
43595     select: function () {
43596         //Roo.log("SELECT CALLED");
43597     },
43598      
43599     selectByValue : function(xv, scrollIntoView){
43600         var ar = this.getValueArray();
43601         var sels = [];
43602         
43603         Roo.each(ar, function(v) {
43604             if(v === undefined || v === null){
43605                 return;
43606             }
43607             var r = this.findRecord(this.valueField, v);
43608             if(r){
43609                 sels.push(this.store.indexOf(r))
43610                 
43611             }
43612         },this);
43613         this.view.select(sels);
43614         return false;
43615     },
43616     
43617     
43618     
43619     onSelect : function(record, index){
43620        // Roo.log("onselect Called");
43621        // this is only called by the clear button now..
43622         this.view.clearSelections();
43623         this.setValue('[]');
43624         if (this.value != this.valueBefore) {
43625             this.fireEvent('change', this, this.value, this.valueBefore);
43626         }
43627     },
43628     getValueArray : function()
43629     {
43630         var ar = [] ;
43631         
43632         try {
43633             Roo.log(this.value);
43634             var ar = Roo.decode(this.value);
43635             return  ar instanceof Array ? ar : []; //?? valid?
43636             
43637         } catch(e) {
43638             Roo.log(e + "\nRoo.form.ComboCheck:getValueArray  invalid data:" + this.getValue());
43639             return [];
43640         }
43641          
43642     },
43643     expand : function ()
43644     {
43645         Roo.form.ComboCheck.superclass.expand.call(this);
43646         this.valueBefore = this.value;
43647         
43648
43649     },
43650     
43651     collapse : function(){
43652         Roo.form.ComboCheck.superclass.collapse.call(this);
43653         var sl = this.view.getSelectedIndexes();
43654         var st = this.store;
43655         var nv = [];
43656         var tv = [];
43657         var r;
43658         Roo.each(sl, function(i) {
43659             r = st.getAt(i);
43660             nv.push(r.get(this.valueField));
43661         },this);
43662         this.setValue(Roo.encode(nv));
43663         if (this.value != this.valueBefore) {
43664
43665             this.fireEvent('change', this, this.value, this.valueBefore);
43666         }
43667         
43668     },
43669     
43670     setValue : function(v){
43671         // Roo.log(v);
43672         this.value = v;
43673         
43674         var vals = this.getValueArray();
43675         var tv = [];
43676         Roo.each(vals, function(k) {
43677             var r = this.findRecord(this.valueField, k);
43678             if(r){
43679                 tv.push(r.data[this.displayField]);
43680             }else if(this.valueNotFoundText !== undefined){
43681                 tv.push( this.valueNotFoundText );
43682             }
43683         },this);
43684        // Roo.log(tv);
43685         
43686         Roo.form.ComboBox.superclass.setValue.call(this, tv.join(', '));
43687         this.hiddenField.value = v;
43688         this.value = v;
43689     }
43690     
43691 });//<script type="text/javasscript">
43692  
43693
43694 /**
43695  * @class Roo.DDView
43696  * A DnD enabled version of Roo.View.
43697  * @param {Element/String} container The Element in which to create the View.
43698  * @param {String} tpl The template string used to create the markup for each element of the View
43699  * @param {Object} config The configuration properties. These include all the config options of
43700  * {@link Roo.View} plus some specific to this class.<br>
43701  * <p>
43702  * Drag/drop is implemented by adding {@link Roo.data.Record}s to the target DDView. If copying is
43703  * not being performed, the original {@link Roo.data.Record} is removed from the source DDView.<br>
43704  * <p>
43705  * The following extra CSS rules are needed to provide insertion point highlighting:<pre><code>
43706 .x-view-drag-insert-above {
43707         border-top:1px dotted #3366cc;
43708 }
43709 .x-view-drag-insert-below {
43710         border-bottom:1px dotted #3366cc;
43711 }
43712 </code></pre>
43713  * 
43714  */
43715  
43716 Roo.DDView = function(container, tpl, config) {
43717     Roo.DDView.superclass.constructor.apply(this, arguments);
43718     this.getEl().setStyle("outline", "0px none");
43719     this.getEl().unselectable();
43720     if (this.dragGroup) {
43721                 this.setDraggable(this.dragGroup.split(","));
43722     }
43723     if (this.dropGroup) {
43724                 this.setDroppable(this.dropGroup.split(","));
43725     }
43726     if (this.deletable) {
43727         this.setDeletable();
43728     }
43729     this.isDirtyFlag = false;
43730         this.addEvents({
43731                 "drop" : true
43732         });
43733 };
43734
43735 Roo.extend(Roo.DDView, Roo.View, {
43736 /**     @cfg {String/Array} dragGroup The ddgroup name(s) for the View's DragZone. */
43737 /**     @cfg {String/Array} dropGroup The ddgroup name(s) for the View's DropZone. */
43738 /**     @cfg {Boolean} copy Causes drag operations to copy nodes rather than move. */
43739 /**     @cfg {Boolean} allowCopy Causes ctrl/drag operations to copy nodes rather than move. */
43740
43741         isFormField: true,
43742
43743         reset: Roo.emptyFn,
43744         
43745         clearInvalid: Roo.form.Field.prototype.clearInvalid,
43746
43747         validate: function() {
43748                 return true;
43749         },
43750         
43751         destroy: function() {
43752                 this.purgeListeners();
43753                 this.getEl.removeAllListeners();
43754                 this.getEl().remove();
43755                 if (this.dragZone) {
43756                         if (this.dragZone.destroy) {
43757                                 this.dragZone.destroy();
43758                         }
43759                 }
43760                 if (this.dropZone) {
43761                         if (this.dropZone.destroy) {
43762                                 this.dropZone.destroy();
43763                         }
43764                 }
43765         },
43766
43767 /**     Allows this class to be an Roo.form.Field so it can be found using {@link Roo.form.BasicForm#findField}. */
43768         getName: function() {
43769                 return this.name;
43770         },
43771
43772 /**     Loads the View from a JSON string representing the Records to put into the Store. */
43773         setValue: function(v) {
43774                 if (!this.store) {
43775                         throw "DDView.setValue(). DDView must be constructed with a valid Store";
43776                 }
43777                 var data = {};
43778                 data[this.store.reader.meta.root] = v ? [].concat(v) : [];
43779                 this.store.proxy = new Roo.data.MemoryProxy(data);
43780                 this.store.load();
43781         },
43782
43783 /**     @return {String} a parenthesised list of the ids of the Records in the View. */
43784         getValue: function() {
43785                 var result = '(';
43786                 this.store.each(function(rec) {
43787                         result += rec.id + ',';
43788                 });
43789                 return result.substr(0, result.length - 1) + ')';
43790         },
43791         
43792         getIds: function() {
43793                 var i = 0, result = new Array(this.store.getCount());
43794                 this.store.each(function(rec) {
43795                         result[i++] = rec.id;
43796                 });
43797                 return result;
43798         },
43799         
43800         isDirty: function() {
43801                 return this.isDirtyFlag;
43802         },
43803
43804 /**
43805  *      Part of the Roo.dd.DropZone interface. If no target node is found, the
43806  *      whole Element becomes the target, and this causes the drop gesture to append.
43807  */
43808     getTargetFromEvent : function(e) {
43809                 var target = e.getTarget();
43810                 while ((target !== null) && (target.parentNode != this.el.dom)) {
43811                 target = target.parentNode;
43812                 }
43813                 if (!target) {
43814                         target = this.el.dom.lastChild || this.el.dom;
43815                 }
43816                 return target;
43817     },
43818
43819 /**
43820  *      Create the drag data which consists of an object which has the property "ddel" as
43821  *      the drag proxy element. 
43822  */
43823     getDragData : function(e) {
43824         var target = this.findItemFromChild(e.getTarget());
43825                 if(target) {
43826                         this.handleSelection(e);
43827                         var selNodes = this.getSelectedNodes();
43828             var dragData = {
43829                 source: this,
43830                 copy: this.copy || (this.allowCopy && e.ctrlKey),
43831                 nodes: selNodes,
43832                 records: []
43833                         };
43834                         var selectedIndices = this.getSelectedIndexes();
43835                         for (var i = 0; i < selectedIndices.length; i++) {
43836                                 dragData.records.push(this.store.getAt(selectedIndices[i]));
43837                         }
43838                         if (selNodes.length == 1) {
43839                                 dragData.ddel = target.cloneNode(true); // the div element
43840                         } else {
43841                                 var div = document.createElement('div'); // create the multi element drag "ghost"
43842                                 div.className = 'multi-proxy';
43843                                 for (var i = 0, len = selNodes.length; i < len; i++) {
43844                                         div.appendChild(selNodes[i].cloneNode(true));
43845                                 }
43846                                 dragData.ddel = div;
43847                         }
43848             //console.log(dragData)
43849             //console.log(dragData.ddel.innerHTML)
43850                         return dragData;
43851                 }
43852         //console.log('nodragData')
43853                 return false;
43854     },
43855     
43856 /**     Specify to which ddGroup items in this DDView may be dragged. */
43857     setDraggable: function(ddGroup) {
43858         if (ddGroup instanceof Array) {
43859                 Roo.each(ddGroup, this.setDraggable, this);
43860                 return;
43861         }
43862         if (this.dragZone) {
43863                 this.dragZone.addToGroup(ddGroup);
43864         } else {
43865                         this.dragZone = new Roo.dd.DragZone(this.getEl(), {
43866                                 containerScroll: true,
43867                                 ddGroup: ddGroup 
43868
43869                         });
43870 //                      Draggability implies selection. DragZone's mousedown selects the element.
43871                         if (!this.multiSelect) { this.singleSelect = true; }
43872
43873 //                      Wire the DragZone's handlers up to methods in *this*
43874                         this.dragZone.getDragData = this.getDragData.createDelegate(this);
43875                 }
43876     },
43877
43878 /**     Specify from which ddGroup this DDView accepts drops. */
43879     setDroppable: function(ddGroup) {
43880         if (ddGroup instanceof Array) {
43881                 Roo.each(ddGroup, this.setDroppable, this);
43882                 return;
43883         }
43884         if (this.dropZone) {
43885                 this.dropZone.addToGroup(ddGroup);
43886         } else {
43887                         this.dropZone = new Roo.dd.DropZone(this.getEl(), {
43888                                 containerScroll: true,
43889                                 ddGroup: ddGroup
43890                         });
43891
43892 //                      Wire the DropZone's handlers up to methods in *this*
43893                         this.dropZone.getTargetFromEvent = this.getTargetFromEvent.createDelegate(this);
43894                         this.dropZone.onNodeEnter = this.onNodeEnter.createDelegate(this);
43895                         this.dropZone.onNodeOver = this.onNodeOver.createDelegate(this);
43896                         this.dropZone.onNodeOut = this.onNodeOut.createDelegate(this);
43897                         this.dropZone.onNodeDrop = this.onNodeDrop.createDelegate(this);
43898                 }
43899     },
43900
43901 /**     Decide whether to drop above or below a View node. */
43902     getDropPoint : function(e, n, dd){
43903         if (n == this.el.dom) { return "above"; }
43904                 var t = Roo.lib.Dom.getY(n), b = t + n.offsetHeight;
43905                 var c = t + (b - t) / 2;
43906                 var y = Roo.lib.Event.getPageY(e);
43907                 if(y <= c) {
43908                         return "above";
43909                 }else{
43910                         return "below";
43911                 }
43912     },
43913
43914     onNodeEnter : function(n, dd, e, data){
43915                 return false;
43916     },
43917     
43918     onNodeOver : function(n, dd, e, data){
43919                 var pt = this.getDropPoint(e, n, dd);
43920                 // set the insert point style on the target node
43921                 var dragElClass = this.dropNotAllowed;
43922                 if (pt) {
43923                         var targetElClass;
43924                         if (pt == "above"){
43925                                 dragElClass = n.previousSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-above";
43926                                 targetElClass = "x-view-drag-insert-above";
43927                         } else {
43928                                 dragElClass = n.nextSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-below";
43929                                 targetElClass = "x-view-drag-insert-below";
43930                         }
43931                         if (this.lastInsertClass != targetElClass){
43932                                 Roo.fly(n).replaceClass(this.lastInsertClass, targetElClass);
43933                                 this.lastInsertClass = targetElClass;
43934                         }
43935                 }
43936                 return dragElClass;
43937         },
43938
43939     onNodeOut : function(n, dd, e, data){
43940                 this.removeDropIndicators(n);
43941     },
43942
43943     onNodeDrop : function(n, dd, e, data){
43944         if (this.fireEvent("drop", this, n, dd, e, data) === false) {
43945                 return false;
43946         }
43947         var pt = this.getDropPoint(e, n, dd);
43948                 var insertAt = (n == this.el.dom) ? this.nodes.length : n.nodeIndex;
43949                 if (pt == "below") { insertAt++; }
43950                 for (var i = 0; i < data.records.length; i++) {
43951                         var r = data.records[i];
43952                         var dup = this.store.getById(r.id);
43953                         if (dup && (dd != this.dragZone)) {
43954                                 Roo.fly(this.getNode(this.store.indexOf(dup))).frame("red", 1);
43955                         } else {
43956                                 if (data.copy) {
43957                                         this.store.insert(insertAt++, r.copy());
43958                                 } else {
43959                                         data.source.isDirtyFlag = true;
43960                                         r.store.remove(r);
43961                                         this.store.insert(insertAt++, r);
43962                                 }
43963                                 this.isDirtyFlag = true;
43964                         }
43965                 }
43966                 this.dragZone.cachedTarget = null;
43967                 return true;
43968     },
43969
43970     removeDropIndicators : function(n){
43971                 if(n){
43972                         Roo.fly(n).removeClass([
43973                                 "x-view-drag-insert-above",
43974                                 "x-view-drag-insert-below"]);
43975                         this.lastInsertClass = "_noclass";
43976                 }
43977     },
43978
43979 /**
43980  *      Utility method. Add a delete option to the DDView's context menu.
43981  *      @param {String} imageUrl The URL of the "delete" icon image.
43982  */
43983         setDeletable: function(imageUrl) {
43984                 if (!this.singleSelect && !this.multiSelect) {
43985                         this.singleSelect = true;
43986                 }
43987                 var c = this.getContextMenu();
43988                 this.contextMenu.on("itemclick", function(item) {
43989                         switch (item.id) {
43990                                 case "delete":
43991                                         this.remove(this.getSelectedIndexes());
43992                                         break;
43993                         }
43994                 }, this);
43995                 this.contextMenu.add({
43996                         icon: imageUrl,
43997                         id: "delete",
43998                         text: 'Delete'
43999                 });
44000         },
44001         
44002 /**     Return the context menu for this DDView. */
44003         getContextMenu: function() {
44004                 if (!this.contextMenu) {
44005 //                      Create the View's context menu
44006                         this.contextMenu = new Roo.menu.Menu({
44007                                 id: this.id + "-contextmenu"
44008                         });
44009                         this.el.on("contextmenu", this.showContextMenu, this);
44010                 }
44011                 return this.contextMenu;
44012         },
44013         
44014         disableContextMenu: function() {
44015                 if (this.contextMenu) {
44016                         this.el.un("contextmenu", this.showContextMenu, this);
44017                 }
44018         },
44019
44020         showContextMenu: function(e, item) {
44021         item = this.findItemFromChild(e.getTarget());
44022                 if (item) {
44023                         e.stopEvent();
44024                         this.select(this.getNode(item), this.multiSelect && e.ctrlKey, true);
44025                         this.contextMenu.showAt(e.getXY());
44026             }
44027     },
44028
44029 /**
44030  *      Remove {@link Roo.data.Record}s at the specified indices.
44031  *      @param {Array/Number} selectedIndices The index (or Array of indices) of Records to remove.
44032  */
44033     remove: function(selectedIndices) {
44034                 selectedIndices = [].concat(selectedIndices);
44035                 for (var i = 0; i < selectedIndices.length; i++) {
44036                         var rec = this.store.getAt(selectedIndices[i]);
44037                         this.store.remove(rec);
44038                 }
44039     },
44040
44041 /**
44042  *      Double click fires the event, but also, if this is draggable, and there is only one other
44043  *      related DropZone, it transfers the selected node.
44044  */
44045     onDblClick : function(e){
44046         var item = this.findItemFromChild(e.getTarget());
44047         if(item){
44048             if (this.fireEvent("dblclick", this, this.indexOf(item), item, e) === false) {
44049                 return false;
44050             }
44051             if (this.dragGroup) {
44052                     var targets = Roo.dd.DragDropMgr.getRelated(this.dragZone, true);
44053                     while (targets.indexOf(this.dropZone) > -1) {
44054                             targets.remove(this.dropZone);
44055                                 }
44056                     if (targets.length == 1) {
44057                                         this.dragZone.cachedTarget = null;
44058                         var el = Roo.get(targets[0].getEl());
44059                         var box = el.getBox(true);
44060                         targets[0].onNodeDrop(el.dom, {
44061                                 target: el.dom,
44062                                 xy: [box.x, box.y + box.height - 1]
44063                         }, null, this.getDragData(e));
44064                     }
44065                 }
44066         }
44067     },
44068     
44069     handleSelection: function(e) {
44070                 this.dragZone.cachedTarget = null;
44071         var item = this.findItemFromChild(e.getTarget());
44072         if (!item) {
44073                 this.clearSelections(true);
44074                 return;
44075         }
44076                 if (item && (this.multiSelect || this.singleSelect)){
44077                         if(this.multiSelect && e.shiftKey && (!e.ctrlKey) && this.lastSelection){
44078                                 this.select(this.getNodes(this.indexOf(this.lastSelection), item.nodeIndex), false);
44079                         }else if (this.isSelected(this.getNode(item)) && e.ctrlKey){
44080                                 this.unselect(item);
44081                         } else {
44082                                 this.select(item, this.multiSelect && e.ctrlKey);
44083                                 this.lastSelection = item;
44084                         }
44085                 }
44086     },
44087
44088     onItemClick : function(item, index, e){
44089                 if(this.fireEvent("beforeclick", this, index, item, e) === false){
44090                         return false;
44091                 }
44092                 return true;
44093     },
44094
44095     unselect : function(nodeInfo, suppressEvent){
44096                 var node = this.getNode(nodeInfo);
44097                 if(node && this.isSelected(node)){
44098                         if(this.fireEvent("beforeselect", this, node, this.selections) !== false){
44099                                 Roo.fly(node).removeClass(this.selectedClass);
44100                                 this.selections.remove(node);
44101                                 if(!suppressEvent){
44102                                         this.fireEvent("selectionchange", this, this.selections);
44103                                 }
44104                         }
44105                 }
44106     }
44107 });
44108 /*
44109  * Based on:
44110  * Ext JS Library 1.1.1
44111  * Copyright(c) 2006-2007, Ext JS, LLC.
44112  *
44113  * Originally Released Under LGPL - original licence link has changed is not relivant.
44114  *
44115  * Fork - LGPL
44116  * <script type="text/javascript">
44117  */
44118  
44119 /**
44120  * @class Roo.LayoutManager
44121  * @extends Roo.util.Observable
44122  * Base class for layout managers.
44123  */
44124 Roo.LayoutManager = function(container, config){
44125     Roo.LayoutManager.superclass.constructor.call(this);
44126     this.el = Roo.get(container);
44127     // ie scrollbar fix
44128     if(this.el.dom == document.body && Roo.isIE && !config.allowScroll){
44129         document.body.scroll = "no";
44130     }else if(this.el.dom != document.body && this.el.getStyle('position') == 'static'){
44131         this.el.position('relative');
44132     }
44133     this.id = this.el.id;
44134     this.el.addClass("x-layout-container");
44135     /** false to disable window resize monitoring @type Boolean */
44136     this.monitorWindowResize = true;
44137     this.regions = {};
44138     this.addEvents({
44139         /**
44140          * @event layout
44141          * Fires when a layout is performed. 
44142          * @param {Roo.LayoutManager} this
44143          */
44144         "layout" : true,
44145         /**
44146          * @event regionresized
44147          * Fires when the user resizes a region. 
44148          * @param {Roo.LayoutRegion} region The resized region
44149          * @param {Number} newSize The new size (width for east/west, height for north/south)
44150          */
44151         "regionresized" : true,
44152         /**
44153          * @event regioncollapsed
44154          * Fires when a region is collapsed. 
44155          * @param {Roo.LayoutRegion} region The collapsed region
44156          */
44157         "regioncollapsed" : true,
44158         /**
44159          * @event regionexpanded
44160          * Fires when a region is expanded.  
44161          * @param {Roo.LayoutRegion} region The expanded region
44162          */
44163         "regionexpanded" : true
44164     });
44165     this.updating = false;
44166     Roo.EventManager.onWindowResize(this.onWindowResize, this, true);
44167 };
44168
44169 Roo.extend(Roo.LayoutManager, Roo.util.Observable, {
44170     /**
44171      * Returns true if this layout is currently being updated
44172      * @return {Boolean}
44173      */
44174     isUpdating : function(){
44175         return this.updating; 
44176     },
44177     
44178     /**
44179      * Suspend the LayoutManager from doing auto-layouts while
44180      * making multiple add or remove calls
44181      */
44182     beginUpdate : function(){
44183         this.updating = true;    
44184     },
44185     
44186     /**
44187      * Restore auto-layouts and optionally disable the manager from performing a layout
44188      * @param {Boolean} noLayout true to disable a layout update 
44189      */
44190     endUpdate : function(noLayout){
44191         this.updating = false;
44192         if(!noLayout){
44193             this.layout();
44194         }    
44195     },
44196     
44197     layout: function(){
44198         
44199     },
44200     
44201     onRegionResized : function(region, newSize){
44202         this.fireEvent("regionresized", region, newSize);
44203         this.layout();
44204     },
44205     
44206     onRegionCollapsed : function(region){
44207         this.fireEvent("regioncollapsed", region);
44208     },
44209     
44210     onRegionExpanded : function(region){
44211         this.fireEvent("regionexpanded", region);
44212     },
44213         
44214     /**
44215      * Returns the size of the current view. This method normalizes document.body and element embedded layouts and
44216      * performs box-model adjustments.
44217      * @return {Object} The size as an object {width: (the width), height: (the height)}
44218      */
44219     getViewSize : function(){
44220         var size;
44221         if(this.el.dom != document.body){
44222             size = this.el.getSize();
44223         }else{
44224             size = {width: Roo.lib.Dom.getViewWidth(), height: Roo.lib.Dom.getViewHeight()};
44225         }
44226         size.width -= this.el.getBorderWidth("lr")-this.el.getPadding("lr");
44227         size.height -= this.el.getBorderWidth("tb")-this.el.getPadding("tb");
44228         return size;
44229     },
44230     
44231     /**
44232      * Returns the Element this layout is bound to.
44233      * @return {Roo.Element}
44234      */
44235     getEl : function(){
44236         return this.el;
44237     },
44238     
44239     /**
44240      * Returns the specified region.
44241      * @param {String} target The region key ('center', 'north', 'south', 'east' or 'west')
44242      * @return {Roo.LayoutRegion}
44243      */
44244     getRegion : function(target){
44245         return this.regions[target.toLowerCase()];
44246     },
44247     
44248     onWindowResize : function(){
44249         if(this.monitorWindowResize){
44250             this.layout();
44251         }
44252     }
44253 });/*
44254  * Based on:
44255  * Ext JS Library 1.1.1
44256  * Copyright(c) 2006-2007, Ext JS, LLC.
44257  *
44258  * Originally Released Under LGPL - original licence link has changed is not relivant.
44259  *
44260  * Fork - LGPL
44261  * <script type="text/javascript">
44262  */
44263 /**
44264  * @class Roo.BorderLayout
44265  * @extends Roo.LayoutManager
44266  * This class represents a common layout manager used in desktop applications. For screenshots and more details,
44267  * please see: <br><br>
44268  * <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>
44269  * <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>
44270  * Example:
44271  <pre><code>
44272  var layout = new Roo.BorderLayout(document.body, {
44273     north: {
44274         initialSize: 25,
44275         titlebar: false
44276     },
44277     west: {
44278         split:true,
44279         initialSize: 200,
44280         minSize: 175,
44281         maxSize: 400,
44282         titlebar: true,
44283         collapsible: true
44284     },
44285     east: {
44286         split:true,
44287         initialSize: 202,
44288         minSize: 175,
44289         maxSize: 400,
44290         titlebar: true,
44291         collapsible: true
44292     },
44293     south: {
44294         split:true,
44295         initialSize: 100,
44296         minSize: 100,
44297         maxSize: 200,
44298         titlebar: true,
44299         collapsible: true
44300     },
44301     center: {
44302         titlebar: true,
44303         autoScroll:true,
44304         resizeTabs: true,
44305         minTabWidth: 50,
44306         preferredTabWidth: 150
44307     }
44308 });
44309
44310 // shorthand
44311 var CP = Roo.ContentPanel;
44312
44313 layout.beginUpdate();
44314 layout.add("north", new CP("north", "North"));
44315 layout.add("south", new CP("south", {title: "South", closable: true}));
44316 layout.add("west", new CP("west", {title: "West"}));
44317 layout.add("east", new CP("autoTabs", {title: "Auto Tabs", closable: true}));
44318 layout.add("center", new CP("center1", {title: "Close Me", closable: true}));
44319 layout.add("center", new CP("center2", {title: "Center Panel", closable: false}));
44320 layout.getRegion("center").showPanel("center1");
44321 layout.endUpdate();
44322 </code></pre>
44323
44324 <b>The container the layout is rendered into can be either the body element or any other element.
44325 If it is not the body element, the container needs to either be an absolute positioned element,
44326 or you will need to add "position:relative" to the css of the container.  You will also need to specify
44327 the container size if it is not the body element.</b>
44328
44329 * @constructor
44330 * Create a new BorderLayout
44331 * @param {String/HTMLElement/Element} container The container this layout is bound to
44332 * @param {Object} config Configuration options
44333  */
44334 Roo.BorderLayout = function(container, config){
44335     config = config || {};
44336     Roo.BorderLayout.superclass.constructor.call(this, container, config);
44337     this.factory = config.factory || Roo.BorderLayout.RegionFactory;
44338     for(var i = 0, len = this.factory.validRegions.length; i < len; i++) {
44339         var target = this.factory.validRegions[i];
44340         if(config[target]){
44341             this.addRegion(target, config[target]);
44342         }
44343     }
44344 };
44345
44346 Roo.extend(Roo.BorderLayout, Roo.LayoutManager, {
44347     /**
44348      * Creates and adds a new region if it doesn't already exist.
44349      * @param {String} target The target region key (north, south, east, west or center).
44350      * @param {Object} config The regions config object
44351      * @return {BorderLayoutRegion} The new region
44352      */
44353     addRegion : function(target, config){
44354         if(!this.regions[target]){
44355             var r = this.factory.create(target, this, config);
44356             this.bindRegion(target, r);
44357         }
44358         return this.regions[target];
44359     },
44360
44361     // private (kinda)
44362     bindRegion : function(name, r){
44363         this.regions[name] = r;
44364         r.on("visibilitychange", this.layout, this);
44365         r.on("paneladded", this.layout, this);
44366         r.on("panelremoved", this.layout, this);
44367         r.on("invalidated", this.layout, this);
44368         r.on("resized", this.onRegionResized, this);
44369         r.on("collapsed", this.onRegionCollapsed, this);
44370         r.on("expanded", this.onRegionExpanded, this);
44371     },
44372
44373     /**
44374      * Performs a layout update.
44375      */
44376     layout : function(){
44377         if(this.updating) return;
44378         var size = this.getViewSize();
44379         var w = size.width;
44380         var h = size.height;
44381         var centerW = w;
44382         var centerH = h;
44383         var centerY = 0;
44384         var centerX = 0;
44385         //var x = 0, y = 0;
44386
44387         var rs = this.regions;
44388         var north = rs["north"];
44389         var south = rs["south"]; 
44390         var west = rs["west"];
44391         var east = rs["east"];
44392         var center = rs["center"];
44393         //if(this.hideOnLayout){ // not supported anymore
44394             //c.el.setStyle("display", "none");
44395         //}
44396         if(north && north.isVisible()){
44397             var b = north.getBox();
44398             var m = north.getMargins();
44399             b.width = w - (m.left+m.right);
44400             b.x = m.left;
44401             b.y = m.top;
44402             centerY = b.height + b.y + m.bottom;
44403             centerH -= centerY;
44404             north.updateBox(this.safeBox(b));
44405         }
44406         if(south && south.isVisible()){
44407             var b = south.getBox();
44408             var m = south.getMargins();
44409             b.width = w - (m.left+m.right);
44410             b.x = m.left;
44411             var totalHeight = (b.height + m.top + m.bottom);
44412             b.y = h - totalHeight + m.top;
44413             centerH -= totalHeight;
44414             south.updateBox(this.safeBox(b));
44415         }
44416         if(west && west.isVisible()){
44417             var b = west.getBox();
44418             var m = west.getMargins();
44419             b.height = centerH - (m.top+m.bottom);
44420             b.x = m.left;
44421             b.y = centerY + m.top;
44422             var totalWidth = (b.width + m.left + m.right);
44423             centerX += totalWidth;
44424             centerW -= totalWidth;
44425             west.updateBox(this.safeBox(b));
44426         }
44427         if(east && east.isVisible()){
44428             var b = east.getBox();
44429             var m = east.getMargins();
44430             b.height = centerH - (m.top+m.bottom);
44431             var totalWidth = (b.width + m.left + m.right);
44432             b.x = w - totalWidth + m.left;
44433             b.y = centerY + m.top;
44434             centerW -= totalWidth;
44435             east.updateBox(this.safeBox(b));
44436         }
44437         if(center){
44438             var m = center.getMargins();
44439             var centerBox = {
44440                 x: centerX + m.left,
44441                 y: centerY + m.top,
44442                 width: centerW - (m.left+m.right),
44443                 height: centerH - (m.top+m.bottom)
44444             };
44445             //if(this.hideOnLayout){
44446                 //center.el.setStyle("display", "block");
44447             //}
44448             center.updateBox(this.safeBox(centerBox));
44449         }
44450         this.el.repaint();
44451         this.fireEvent("layout", this);
44452     },
44453
44454     // private
44455     safeBox : function(box){
44456         box.width = Math.max(0, box.width);
44457         box.height = Math.max(0, box.height);
44458         return box;
44459     },
44460
44461     /**
44462      * Adds a ContentPanel (or subclass) to this layout.
44463      * @param {String} target The target region key (north, south, east, west or center).
44464      * @param {Roo.ContentPanel} panel The panel to add
44465      * @return {Roo.ContentPanel} The added panel
44466      */
44467     add : function(target, panel){
44468          
44469         target = target.toLowerCase();
44470         return this.regions[target].add(panel);
44471     },
44472
44473     /**
44474      * Remove a ContentPanel (or subclass) to this layout.
44475      * @param {String} target The target region key (north, south, east, west or center).
44476      * @param {Number/String/Roo.ContentPanel} panel The index, id or panel to remove
44477      * @return {Roo.ContentPanel} The removed panel
44478      */
44479     remove : function(target, panel){
44480         target = target.toLowerCase();
44481         return this.regions[target].remove(panel);
44482     },
44483
44484     /**
44485      * Searches all regions for a panel with the specified id
44486      * @param {String} panelId
44487      * @return {Roo.ContentPanel} The panel or null if it wasn't found
44488      */
44489     findPanel : function(panelId){
44490         var rs = this.regions;
44491         for(var target in rs){
44492             if(typeof rs[target] != "function"){
44493                 var p = rs[target].getPanel(panelId);
44494                 if(p){
44495                     return p;
44496                 }
44497             }
44498         }
44499         return null;
44500     },
44501
44502     /**
44503      * Searches all regions for a panel with the specified id and activates (shows) it.
44504      * @param {String/ContentPanel} panelId The panels id or the panel itself
44505      * @return {Roo.ContentPanel} The shown panel or null
44506      */
44507     showPanel : function(panelId) {
44508       var rs = this.regions;
44509       for(var target in rs){
44510          var r = rs[target];
44511          if(typeof r != "function"){
44512             if(r.hasPanel(panelId)){
44513                return r.showPanel(panelId);
44514             }
44515          }
44516       }
44517       return null;
44518    },
44519
44520    /**
44521      * Restores this layout's state using Roo.state.Manager or the state provided by the passed provider.
44522      * @param {Roo.state.Provider} provider (optional) An alternate state provider
44523      */
44524     restoreState : function(provider){
44525         if(!provider){
44526             provider = Roo.state.Manager;
44527         }
44528         var sm = new Roo.LayoutStateManager();
44529         sm.init(this, provider);
44530     },
44531
44532     /**
44533      * Adds a batch of multiple ContentPanels dynamically by passing a special regions config object.  This config
44534      * object should contain properties for each region to add ContentPanels to, and each property's value should be
44535      * a valid ContentPanel config object.  Example:
44536      * <pre><code>
44537 // Create the main layout
44538 var layout = new Roo.BorderLayout('main-ct', {
44539     west: {
44540         split:true,
44541         minSize: 175,
44542         titlebar: true
44543     },
44544     center: {
44545         title:'Components'
44546     }
44547 }, 'main-ct');
44548
44549 // Create and add multiple ContentPanels at once via configs
44550 layout.batchAdd({
44551    west: {
44552        id: 'source-files',
44553        autoCreate:true,
44554        title:'Ext Source Files',
44555        autoScroll:true,
44556        fitToFrame:true
44557    },
44558    center : {
44559        el: cview,
44560        autoScroll:true,
44561        fitToFrame:true,
44562        toolbar: tb,
44563        resizeEl:'cbody'
44564    }
44565 });
44566 </code></pre>
44567      * @param {Object} regions An object containing ContentPanel configs by region name
44568      */
44569     batchAdd : function(regions){
44570         this.beginUpdate();
44571         for(var rname in regions){
44572             var lr = this.regions[rname];
44573             if(lr){
44574                 this.addTypedPanels(lr, regions[rname]);
44575             }
44576         }
44577         this.endUpdate();
44578     },
44579
44580     // private
44581     addTypedPanels : function(lr, ps){
44582         if(typeof ps == 'string'){
44583             lr.add(new Roo.ContentPanel(ps));
44584         }
44585         else if(ps instanceof Array){
44586             for(var i =0, len = ps.length; i < len; i++){
44587                 this.addTypedPanels(lr, ps[i]);
44588             }
44589         }
44590         else if(!ps.events){ // raw config?
44591             var el = ps.el;
44592             delete ps.el; // prevent conflict
44593             lr.add(new Roo.ContentPanel(el || Roo.id(), ps));
44594         }
44595         else {  // panel object assumed!
44596             lr.add(ps);
44597         }
44598     },
44599     /**
44600      * Adds a xtype elements to the layout.
44601      * <pre><code>
44602
44603 layout.addxtype({
44604        xtype : 'ContentPanel',
44605        region: 'west',
44606        items: [ .... ]
44607    }
44608 );
44609
44610 layout.addxtype({
44611         xtype : 'NestedLayoutPanel',
44612         region: 'west',
44613         layout: {
44614            center: { },
44615            west: { }   
44616         },
44617         items : [ ... list of content panels or nested layout panels.. ]
44618    }
44619 );
44620 </code></pre>
44621      * @param {Object} cfg Xtype definition of item to add.
44622      */
44623     addxtype : function(cfg)
44624     {
44625         // basically accepts a pannel...
44626         // can accept a layout region..!?!?
44627         //Roo.log('Roo.BorderLayout add ' + cfg.xtype)
44628         
44629         if (!cfg.xtype.match(/Panel$/)) {
44630             return false;
44631         }
44632         var ret = false;
44633         var region = cfg.region;
44634         delete cfg.region;
44635         
44636           
44637         var xitems = [];
44638         if (cfg.items) {
44639             xitems = cfg.items;
44640             delete cfg.items;
44641         }
44642         
44643         
44644         switch(cfg.xtype) 
44645         {
44646             case 'ContentPanel':  // ContentPanel (el, cfg)
44647             case 'ScrollPanel':  // ContentPanel (el, cfg)
44648                 if(cfg.autoCreate) {
44649                     ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
44650                 } else {
44651                     var el = this.el.createChild();
44652                     ret = new Roo[cfg.xtype](el, cfg); // new panel!!!!!
44653                 }
44654                 
44655                 this.add(region, ret);
44656                 break;
44657             
44658             
44659             case 'TreePanel': // our new panel!
44660                 cfg.el = this.el.createChild();
44661                 ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
44662                 this.add(region, ret);
44663                 break;
44664             
44665             case 'NestedLayoutPanel': 
44666                 // create a new Layout (which is  a Border Layout...
44667                 var el = this.el.createChild();
44668                 var clayout = cfg.layout;
44669                 delete cfg.layout;
44670                 clayout.items   = clayout.items  || [];
44671                 // replace this exitems with the clayout ones..
44672                 xitems = clayout.items;
44673                  
44674                 
44675                 if (region == 'center' && this.active && this.getRegion('center').panels.length < 1) {
44676                     cfg.background = false;
44677                 }
44678                 var layout = new Roo.BorderLayout(el, clayout);
44679                 
44680                 ret = new Roo[cfg.xtype](layout, cfg); // new panel!!!!!
44681                 //console.log('adding nested layout panel '  + cfg.toSource());
44682                 this.add(region, ret);
44683                 
44684                 break;
44685                 
44686             case 'GridPanel': 
44687             
44688                 // needs grid and region
44689                 
44690                 //var el = this.getRegion(region).el.createChild();
44691                 var el = this.el.createChild();
44692                 // create the grid first...
44693                 
44694                 var grid = new Roo.grid[cfg.grid.xtype](el, cfg.grid);
44695                 delete cfg.grid;
44696                 if (region == 'center' && this.active ) {
44697                     cfg.background = false;
44698                 }
44699                 ret = new Roo[cfg.xtype](grid, cfg); // new panel!!!!!
44700                 
44701                 this.add(region, ret);
44702                 if (cfg.background) {
44703                     ret.on('activate', function(gp) {
44704                         if (!gp.grid.rendered) {
44705                             gp.grid.render();
44706                         }
44707                     });
44708                 } else {
44709                     grid.render();
44710                 }
44711                 break;
44712            
44713                
44714                 
44715                 
44716             default: 
44717                 alert("Can not add '" + cfg.xtype + "' to BorderLayout");
44718                 return null;
44719              // GridPanel (grid, cfg)
44720             
44721         }
44722         this.beginUpdate();
44723         // add children..
44724         Roo.each(xitems, function(i)  {
44725             ret.addxtype(i);
44726         });
44727         this.endUpdate();
44728         return ret;
44729         
44730     }
44731 });
44732
44733 /**
44734  * Shortcut for creating a new BorderLayout object and adding one or more ContentPanels to it in a single step, handling
44735  * the beginUpdate and endUpdate calls internally.  The key to this method is the <b>panels</b> property that can be
44736  * provided with each region config, which allows you to add ContentPanel configs in addition to the region configs
44737  * during creation.  The following code is equivalent to the constructor-based example at the beginning of this class:
44738  * <pre><code>
44739 // shorthand
44740 var CP = Roo.ContentPanel;
44741
44742 var layout = Roo.BorderLayout.create({
44743     north: {
44744         initialSize: 25,
44745         titlebar: false,
44746         panels: [new CP("north", "North")]
44747     },
44748     west: {
44749         split:true,
44750         initialSize: 200,
44751         minSize: 175,
44752         maxSize: 400,
44753         titlebar: true,
44754         collapsible: true,
44755         panels: [new CP("west", {title: "West"})]
44756     },
44757     east: {
44758         split:true,
44759         initialSize: 202,
44760         minSize: 175,
44761         maxSize: 400,
44762         titlebar: true,
44763         collapsible: true,
44764         panels: [new CP("autoTabs", {title: "Auto Tabs", closable: true})]
44765     },
44766     south: {
44767         split:true,
44768         initialSize: 100,
44769         minSize: 100,
44770         maxSize: 200,
44771         titlebar: true,
44772         collapsible: true,
44773         panels: [new CP("south", {title: "South", closable: true})]
44774     },
44775     center: {
44776         titlebar: true,
44777         autoScroll:true,
44778         resizeTabs: true,
44779         minTabWidth: 50,
44780         preferredTabWidth: 150,
44781         panels: [
44782             new CP("center1", {title: "Close Me", closable: true}),
44783             new CP("center2", {title: "Center Panel", closable: false})
44784         ]
44785     }
44786 }, document.body);
44787
44788 layout.getRegion("center").showPanel("center1");
44789 </code></pre>
44790  * @param config
44791  * @param targetEl
44792  */
44793 Roo.BorderLayout.create = function(config, targetEl){
44794     var layout = new Roo.BorderLayout(targetEl || document.body, config);
44795     layout.beginUpdate();
44796     var regions = Roo.BorderLayout.RegionFactory.validRegions;
44797     for(var j = 0, jlen = regions.length; j < jlen; j++){
44798         var lr = regions[j];
44799         if(layout.regions[lr] && config[lr].panels){
44800             var r = layout.regions[lr];
44801             var ps = config[lr].panels;
44802             layout.addTypedPanels(r, ps);
44803         }
44804     }
44805     layout.endUpdate();
44806     return layout;
44807 };
44808
44809 // private
44810 Roo.BorderLayout.RegionFactory = {
44811     // private
44812     validRegions : ["north","south","east","west","center"],
44813
44814     // private
44815     create : function(target, mgr, config){
44816         target = target.toLowerCase();
44817         if(config.lightweight || config.basic){
44818             return new Roo.BasicLayoutRegion(mgr, config, target);
44819         }
44820         switch(target){
44821             case "north":
44822                 return new Roo.NorthLayoutRegion(mgr, config);
44823             case "south":
44824                 return new Roo.SouthLayoutRegion(mgr, config);
44825             case "east":
44826                 return new Roo.EastLayoutRegion(mgr, config);
44827             case "west":
44828                 return new Roo.WestLayoutRegion(mgr, config);
44829             case "center":
44830                 return new Roo.CenterLayoutRegion(mgr, config);
44831         }
44832         throw 'Layout region "'+target+'" not supported.';
44833     }
44834 };/*
44835  * Based on:
44836  * Ext JS Library 1.1.1
44837  * Copyright(c) 2006-2007, Ext JS, LLC.
44838  *
44839  * Originally Released Under LGPL - original licence link has changed is not relivant.
44840  *
44841  * Fork - LGPL
44842  * <script type="text/javascript">
44843  */
44844  
44845 /**
44846  * @class Roo.BasicLayoutRegion
44847  * @extends Roo.util.Observable
44848  * This class represents a lightweight region in a layout manager. This region does not move dom nodes
44849  * and does not have a titlebar, tabs or any other features. All it does is size and position 
44850  * panels. To create a BasicLayoutRegion, add lightweight:true or basic:true to your regions config.
44851  */
44852 Roo.BasicLayoutRegion = function(mgr, config, pos, skipConfig){
44853     this.mgr = mgr;
44854     this.position  = pos;
44855     this.events = {
44856         /**
44857          * @scope Roo.BasicLayoutRegion
44858          */
44859         
44860         /**
44861          * @event beforeremove
44862          * Fires before a panel is removed (or closed). To cancel the removal set "e.cancel = true" on the event argument.
44863          * @param {Roo.LayoutRegion} this
44864          * @param {Roo.ContentPanel} panel The panel
44865          * @param {Object} e The cancel event object
44866          */
44867         "beforeremove" : true,
44868         /**
44869          * @event invalidated
44870          * Fires when the layout for this region is changed.
44871          * @param {Roo.LayoutRegion} this
44872          */
44873         "invalidated" : true,
44874         /**
44875          * @event visibilitychange
44876          * Fires when this region is shown or hidden 
44877          * @param {Roo.LayoutRegion} this
44878          * @param {Boolean} visibility true or false
44879          */
44880         "visibilitychange" : true,
44881         /**
44882          * @event paneladded
44883          * Fires when a panel is added. 
44884          * @param {Roo.LayoutRegion} this
44885          * @param {Roo.ContentPanel} panel The panel
44886          */
44887         "paneladded" : true,
44888         /**
44889          * @event panelremoved
44890          * Fires when a panel is removed. 
44891          * @param {Roo.LayoutRegion} this
44892          * @param {Roo.ContentPanel} panel The panel
44893          */
44894         "panelremoved" : true,
44895         /**
44896          * @event collapsed
44897          * Fires when this region is collapsed.
44898          * @param {Roo.LayoutRegion} this
44899          */
44900         "collapsed" : true,
44901         /**
44902          * @event expanded
44903          * Fires when this region is expanded.
44904          * @param {Roo.LayoutRegion} this
44905          */
44906         "expanded" : true,
44907         /**
44908          * @event slideshow
44909          * Fires when this region is slid into view.
44910          * @param {Roo.LayoutRegion} this
44911          */
44912         "slideshow" : true,
44913         /**
44914          * @event slidehide
44915          * Fires when this region slides out of view. 
44916          * @param {Roo.LayoutRegion} this
44917          */
44918         "slidehide" : true,
44919         /**
44920          * @event panelactivated
44921          * Fires when a panel is activated. 
44922          * @param {Roo.LayoutRegion} this
44923          * @param {Roo.ContentPanel} panel The activated panel
44924          */
44925         "panelactivated" : true,
44926         /**
44927          * @event resized
44928          * Fires when the user resizes this region. 
44929          * @param {Roo.LayoutRegion} this
44930          * @param {Number} newSize The new size (width for east/west, height for north/south)
44931          */
44932         "resized" : true
44933     };
44934     /** A collection of panels in this region. @type Roo.util.MixedCollection */
44935     this.panels = new Roo.util.MixedCollection();
44936     this.panels.getKey = this.getPanelId.createDelegate(this);
44937     this.box = null;
44938     this.activePanel = null;
44939     // ensure listeners are added...
44940     
44941     if (config.listeners || config.events) {
44942         Roo.BasicLayoutRegion.superclass.constructor.call(this, {
44943             listeners : config.listeners || {},
44944             events : config.events || {}
44945         });
44946     }
44947     
44948     if(skipConfig !== true){
44949         this.applyConfig(config);
44950     }
44951 };
44952
44953 Roo.extend(Roo.BasicLayoutRegion, Roo.util.Observable, {
44954     getPanelId : function(p){
44955         return p.getId();
44956     },
44957     
44958     applyConfig : function(config){
44959         this.margins = config.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
44960         this.config = config;
44961         
44962     },
44963     
44964     /**
44965      * Resizes the region to the specified size. For vertical regions (west, east) this adjusts 
44966      * the width, for horizontal (north, south) the height.
44967      * @param {Number} newSize The new width or height
44968      */
44969     resizeTo : function(newSize){
44970         var el = this.el ? this.el :
44971                  (this.activePanel ? this.activePanel.getEl() : null);
44972         if(el){
44973             switch(this.position){
44974                 case "east":
44975                 case "west":
44976                     el.setWidth(newSize);
44977                     this.fireEvent("resized", this, newSize);
44978                 break;
44979                 case "north":
44980                 case "south":
44981                     el.setHeight(newSize);
44982                     this.fireEvent("resized", this, newSize);
44983                 break;                
44984             }
44985         }
44986     },
44987     
44988     getBox : function(){
44989         return this.activePanel ? this.activePanel.getEl().getBox(false, true) : null;
44990     },
44991     
44992     getMargins : function(){
44993         return this.margins;
44994     },
44995     
44996     updateBox : function(box){
44997         this.box = box;
44998         var el = this.activePanel.getEl();
44999         el.dom.style.left = box.x + "px";
45000         el.dom.style.top = box.y + "px";
45001         this.activePanel.setSize(box.width, box.height);
45002     },
45003     
45004     /**
45005      * Returns the container element for this region.
45006      * @return {Roo.Element}
45007      */
45008     getEl : function(){
45009         return this.activePanel;
45010     },
45011     
45012     /**
45013      * Returns true if this region is currently visible.
45014      * @return {Boolean}
45015      */
45016     isVisible : function(){
45017         return this.activePanel ? true : false;
45018     },
45019     
45020     setActivePanel : function(panel){
45021         panel = this.getPanel(panel);
45022         if(this.activePanel && this.activePanel != panel){
45023             this.activePanel.setActiveState(false);
45024             this.activePanel.getEl().setLeftTop(-10000,-10000);
45025         }
45026         this.activePanel = panel;
45027         panel.setActiveState(true);
45028         if(this.box){
45029             panel.setSize(this.box.width, this.box.height);
45030         }
45031         this.fireEvent("panelactivated", this, panel);
45032         this.fireEvent("invalidated");
45033     },
45034     
45035     /**
45036      * Show the specified panel.
45037      * @param {Number/String/ContentPanel} panelId The panels index, id or the panel itself
45038      * @return {Roo.ContentPanel} The shown panel or null
45039      */
45040     showPanel : function(panel){
45041         if(panel = this.getPanel(panel)){
45042             this.setActivePanel(panel);
45043         }
45044         return panel;
45045     },
45046     
45047     /**
45048      * Get the active panel for this region.
45049      * @return {Roo.ContentPanel} The active panel or null
45050      */
45051     getActivePanel : function(){
45052         return this.activePanel;
45053     },
45054     
45055     /**
45056      * Add the passed ContentPanel(s)
45057      * @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
45058      * @return {Roo.ContentPanel} The panel added (if only one was added)
45059      */
45060     add : function(panel){
45061         if(arguments.length > 1){
45062             for(var i = 0, len = arguments.length; i < len; i++) {
45063                 this.add(arguments[i]);
45064             }
45065             return null;
45066         }
45067         if(this.hasPanel(panel)){
45068             this.showPanel(panel);
45069             return panel;
45070         }
45071         var el = panel.getEl();
45072         if(el.dom.parentNode != this.mgr.el.dom){
45073             this.mgr.el.dom.appendChild(el.dom);
45074         }
45075         if(panel.setRegion){
45076             panel.setRegion(this);
45077         }
45078         this.panels.add(panel);
45079         el.setStyle("position", "absolute");
45080         if(!panel.background){
45081             this.setActivePanel(panel);
45082             if(this.config.initialSize && this.panels.getCount()==1){
45083                 this.resizeTo(this.config.initialSize);
45084             }
45085         }
45086         this.fireEvent("paneladded", this, panel);
45087         return panel;
45088     },
45089     
45090     /**
45091      * Returns true if the panel is in this region.
45092      * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
45093      * @return {Boolean}
45094      */
45095     hasPanel : function(panel){
45096         if(typeof panel == "object"){ // must be panel obj
45097             panel = panel.getId();
45098         }
45099         return this.getPanel(panel) ? true : false;
45100     },
45101     
45102     /**
45103      * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
45104      * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
45105      * @param {Boolean} preservePanel Overrides the config preservePanel option
45106      * @return {Roo.ContentPanel} The panel that was removed
45107      */
45108     remove : function(panel, preservePanel){
45109         panel = this.getPanel(panel);
45110         if(!panel){
45111             return null;
45112         }
45113         var e = {};
45114         this.fireEvent("beforeremove", this, panel, e);
45115         if(e.cancel === true){
45116             return null;
45117         }
45118         var panelId = panel.getId();
45119         this.panels.removeKey(panelId);
45120         return panel;
45121     },
45122     
45123     /**
45124      * Returns the panel specified or null if it's not in this region.
45125      * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
45126      * @return {Roo.ContentPanel}
45127      */
45128     getPanel : function(id){
45129         if(typeof id == "object"){ // must be panel obj
45130             return id;
45131         }
45132         return this.panels.get(id);
45133     },
45134     
45135     /**
45136      * Returns this regions position (north/south/east/west/center).
45137      * @return {String} 
45138      */
45139     getPosition: function(){
45140         return this.position;    
45141     }
45142 });/*
45143  * Based on:
45144  * Ext JS Library 1.1.1
45145  * Copyright(c) 2006-2007, Ext JS, LLC.
45146  *
45147  * Originally Released Under LGPL - original licence link has changed is not relivant.
45148  *
45149  * Fork - LGPL
45150  * <script type="text/javascript">
45151  */
45152  
45153 /**
45154  * @class Roo.LayoutRegion
45155  * @extends Roo.BasicLayoutRegion
45156  * This class represents a region in a layout manager.
45157  * @cfg {Boolean}   collapsible     False to disable collapsing (defaults to true)
45158  * @cfg {Boolean}   collapsed       True to set the initial display to collapsed (defaults to false)
45159  * @cfg {Boolean}   floatable       False to disable floating (defaults to true)
45160  * @cfg {Object}    margins         Margins for the element (defaults to {top: 0, left: 0, right:0, bottom: 0})
45161  * @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})
45162  * @cfg {String}    tabPosition     "top" or "bottom" (defaults to "bottom")
45163  * @cfg {String}    collapsedTitle  Optional string message to display in the collapsed block of a north or south region
45164  * @cfg {Boolean}   alwaysShowTabs  True to always display tabs even when there is only 1 panel (defaults to false)
45165  * @cfg {Boolean}   autoScroll      True to enable overflow scrolling (defaults to false)
45166  * @cfg {Boolean}   titlebar        True to display a title bar (defaults to true)
45167  * @cfg {String}    title           The title for the region (overrides panel titles)
45168  * @cfg {Boolean}   animate         True to animate expand/collapse (defaults to false)
45169  * @cfg {Boolean}   autoHide        False to disable auto hiding when the mouse leaves the "floated" region (defaults to true)
45170  * @cfg {Boolean}   preservePanels  True to preserve removed panels so they can be readded later (defaults to false)
45171  * @cfg {Boolean}   closeOnTab      True to place the close icon on the tabs instead of the region titlebar (defaults to false)
45172  * @cfg {Boolean}   hideTabs        True to hide the tab strip (defaults to false)
45173  * @cfg {Boolean}   resizeTabs      True to enable automatic tab resizing. This will resize the tabs so they are all the same size and fit within
45174  *                      the space available, similar to FireFox 1.5 tabs (defaults to false)
45175  * @cfg {Number}    minTabWidth     The minimum tab width (defaults to 40)
45176  * @cfg {Number}    preferredTabWidth The preferred tab width (defaults to 150)
45177  * @cfg {Boolean}   showPin         True to show a pin button
45178  * @cfg {Boolean}   hidden          True to start the region hidden (defaults to false)
45179  * @cfg {Boolean}   hideWhenEmpty   True to hide the region when it has no panels
45180  * @cfg {Boolean}   disableTabTips  True to disable tab tooltips
45181  * @cfg {Number}    width           For East/West panels
45182  * @cfg {Number}    height          For North/South panels
45183  * @cfg {Boolean}   split           To show the splitter
45184  * @cfg {Boolean}   toolbar         xtype configuration for a toolbar - shows on right of tabbar
45185  */
45186 Roo.LayoutRegion = function(mgr, config, pos){
45187     Roo.LayoutRegion.superclass.constructor.call(this, mgr, config, pos, true);
45188     var dh = Roo.DomHelper;
45189     /** This region's container element 
45190     * @type Roo.Element */
45191     this.el = dh.append(mgr.el.dom, {tag: "div", cls: "x-layout-panel x-layout-panel-" + this.position}, true);
45192     /** This region's title element 
45193     * @type Roo.Element */
45194
45195     this.titleEl = dh.append(this.el.dom, {tag: "div", unselectable: "on", cls: "x-unselectable x-layout-panel-hd x-layout-title-"+this.position, children:[
45196         {tag: "span", cls: "x-unselectable x-layout-panel-hd-text", unselectable: "on", html: "&#160;"},
45197         {tag: "div", cls: "x-unselectable x-layout-panel-hd-tools", unselectable: "on"}
45198     ]}, true);
45199     this.titleEl.enableDisplayMode();
45200     /** This region's title text element 
45201     * @type HTMLElement */
45202     this.titleTextEl = this.titleEl.dom.firstChild;
45203     this.tools = Roo.get(this.titleEl.dom.childNodes[1], true);
45204     this.closeBtn = this.createTool(this.tools.dom, "x-layout-close");
45205     this.closeBtn.enableDisplayMode();
45206     this.closeBtn.on("click", this.closeClicked, this);
45207     this.closeBtn.hide();
45208
45209     this.createBody(config);
45210     this.visible = true;
45211     this.collapsed = false;
45212
45213     if(config.hideWhenEmpty){
45214         this.hide();
45215         this.on("paneladded", this.validateVisibility, this);
45216         this.on("panelremoved", this.validateVisibility, this);
45217     }
45218     this.applyConfig(config);
45219 };
45220
45221 Roo.extend(Roo.LayoutRegion, Roo.BasicLayoutRegion, {
45222
45223     createBody : function(){
45224         /** This region's body element 
45225         * @type Roo.Element */
45226         this.bodyEl = this.el.createChild({tag: "div", cls: "x-layout-panel-body"});
45227     },
45228
45229     applyConfig : function(c){
45230         if(c.collapsible && this.position != "center" && !this.collapsedEl){
45231             var dh = Roo.DomHelper;
45232             if(c.titlebar !== false){
45233                 this.collapseBtn = this.createTool(this.tools.dom, "x-layout-collapse-"+this.position);
45234                 this.collapseBtn.on("click", this.collapse, this);
45235                 this.collapseBtn.enableDisplayMode();
45236
45237                 if(c.showPin === true || this.showPin){
45238                     this.stickBtn = this.createTool(this.tools.dom, "x-layout-stick");
45239                     this.stickBtn.enableDisplayMode();
45240                     this.stickBtn.on("click", this.expand, this);
45241                     this.stickBtn.hide();
45242                 }
45243             }
45244             /** This region's collapsed element
45245             * @type Roo.Element */
45246             this.collapsedEl = dh.append(this.mgr.el.dom, {cls: "x-layout-collapsed x-layout-collapsed-"+this.position, children:[
45247                 {cls: "x-layout-collapsed-tools", children:[{cls: "x-layout-ctools-inner"}]}
45248             ]}, true);
45249             if(c.floatable !== false){
45250                this.collapsedEl.addClassOnOver("x-layout-collapsed-over");
45251                this.collapsedEl.on("click", this.collapseClick, this);
45252             }
45253
45254             if(c.collapsedTitle && (this.position == "north" || this.position== "south")) {
45255                 this.collapsedTitleTextEl = dh.append(this.collapsedEl.dom, {tag: "div", cls: "x-unselectable x-layout-panel-hd-text",
45256                    id: "message", unselectable: "on", style:{"float":"left"}});
45257                this.collapsedTitleTextEl.innerHTML = c.collapsedTitle;
45258              }
45259             this.expandBtn = this.createTool(this.collapsedEl.dom.firstChild.firstChild, "x-layout-expand-"+this.position);
45260             this.expandBtn.on("click", this.expand, this);
45261         }
45262         if(this.collapseBtn){
45263             this.collapseBtn.setVisible(c.collapsible == true);
45264         }
45265         this.cmargins = c.cmargins || this.cmargins ||
45266                          (this.position == "west" || this.position == "east" ?
45267                              {top: 0, left: 2, right:2, bottom: 0} :
45268                              {top: 2, left: 0, right:0, bottom: 2});
45269         this.margins = c.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
45270         this.bottomTabs = c.tabPosition != "top";
45271         this.autoScroll = c.autoScroll || false;
45272         if(this.autoScroll){
45273             this.bodyEl.setStyle("overflow", "auto");
45274         }else{
45275             this.bodyEl.setStyle("overflow", "hidden");
45276         }
45277         //if(c.titlebar !== false){
45278             if((!c.titlebar && !c.title) || c.titlebar === false){
45279                 this.titleEl.hide();
45280             }else{
45281                 this.titleEl.show();
45282                 if(c.title){
45283                     this.titleTextEl.innerHTML = c.title;
45284                 }
45285             }
45286         //}
45287         this.duration = c.duration || .30;
45288         this.slideDuration = c.slideDuration || .45;
45289         this.config = c;
45290         if(c.collapsed){
45291             this.collapse(true);
45292         }
45293         if(c.hidden){
45294             this.hide();
45295         }
45296     },
45297     /**
45298      * Returns true if this region is currently visible.
45299      * @return {Boolean}
45300      */
45301     isVisible : function(){
45302         return this.visible;
45303     },
45304
45305     /**
45306      * Updates the title for collapsed north/south regions (used with {@link #collapsedTitle} config option)
45307      * @param {String} title (optional) The title text (accepts HTML markup, defaults to the numeric character reference for a non-breaking space, "&amp;#160;")
45308      */
45309     setCollapsedTitle : function(title){
45310         title = title || "&#160;";
45311         if(this.collapsedTitleTextEl){
45312             this.collapsedTitleTextEl.innerHTML = title;
45313         }
45314     },
45315
45316     getBox : function(){
45317         var b;
45318         if(!this.collapsed){
45319             b = this.el.getBox(false, true);
45320         }else{
45321             b = this.collapsedEl.getBox(false, true);
45322         }
45323         return b;
45324     },
45325
45326     getMargins : function(){
45327         return this.collapsed ? this.cmargins : this.margins;
45328     },
45329
45330     highlight : function(){
45331         this.el.addClass("x-layout-panel-dragover");
45332     },
45333
45334     unhighlight : function(){
45335         this.el.removeClass("x-layout-panel-dragover");
45336     },
45337
45338     updateBox : function(box){
45339         this.box = box;
45340         if(!this.collapsed){
45341             this.el.dom.style.left = box.x + "px";
45342             this.el.dom.style.top = box.y + "px";
45343             this.updateBody(box.width, box.height);
45344         }else{
45345             this.collapsedEl.dom.style.left = box.x + "px";
45346             this.collapsedEl.dom.style.top = box.y + "px";
45347             this.collapsedEl.setSize(box.width, box.height);
45348         }
45349         if(this.tabs){
45350             this.tabs.autoSizeTabs();
45351         }
45352     },
45353
45354     updateBody : function(w, h){
45355         if(w !== null){
45356             this.el.setWidth(w);
45357             w -= this.el.getBorderWidth("rl");
45358             if(this.config.adjustments){
45359                 w += this.config.adjustments[0];
45360             }
45361         }
45362         if(h !== null){
45363             this.el.setHeight(h);
45364             h = this.titleEl && this.titleEl.isDisplayed() ? h - (this.titleEl.getHeight()||0) : h;
45365             h -= this.el.getBorderWidth("tb");
45366             if(this.config.adjustments){
45367                 h += this.config.adjustments[1];
45368             }
45369             this.bodyEl.setHeight(h);
45370             if(this.tabs){
45371                 h = this.tabs.syncHeight(h);
45372             }
45373         }
45374         if(this.panelSize){
45375             w = w !== null ? w : this.panelSize.width;
45376             h = h !== null ? h : this.panelSize.height;
45377         }
45378         if(this.activePanel){
45379             var el = this.activePanel.getEl();
45380             w = w !== null ? w : el.getWidth();
45381             h = h !== null ? h : el.getHeight();
45382             this.panelSize = {width: w, height: h};
45383             this.activePanel.setSize(w, h);
45384         }
45385         if(Roo.isIE && this.tabs){
45386             this.tabs.el.repaint();
45387         }
45388     },
45389
45390     /**
45391      * Returns the container element for this region.
45392      * @return {Roo.Element}
45393      */
45394     getEl : function(){
45395         return this.el;
45396     },
45397
45398     /**
45399      * Hides this region.
45400      */
45401     hide : function(){
45402         if(!this.collapsed){
45403             this.el.dom.style.left = "-2000px";
45404             this.el.hide();
45405         }else{
45406             this.collapsedEl.dom.style.left = "-2000px";
45407             this.collapsedEl.hide();
45408         }
45409         this.visible = false;
45410         this.fireEvent("visibilitychange", this, false);
45411     },
45412
45413     /**
45414      * Shows this region if it was previously hidden.
45415      */
45416     show : function(){
45417         if(!this.collapsed){
45418             this.el.show();
45419         }else{
45420             this.collapsedEl.show();
45421         }
45422         this.visible = true;
45423         this.fireEvent("visibilitychange", this, true);
45424     },
45425
45426     closeClicked : function(){
45427         if(this.activePanel){
45428             this.remove(this.activePanel);
45429         }
45430     },
45431
45432     collapseClick : function(e){
45433         if(this.isSlid){
45434            e.stopPropagation();
45435            this.slideIn();
45436         }else{
45437            e.stopPropagation();
45438            this.slideOut();
45439         }
45440     },
45441
45442     /**
45443      * Collapses this region.
45444      * @param {Boolean} skipAnim (optional) true to collapse the element without animation (if animate is true)
45445      */
45446     collapse : function(skipAnim){
45447         if(this.collapsed) return;
45448         this.collapsed = true;
45449         if(this.split){
45450             this.split.el.hide();
45451         }
45452         if(this.config.animate && skipAnim !== true){
45453             this.fireEvent("invalidated", this);
45454             this.animateCollapse();
45455         }else{
45456             this.el.setLocation(-20000,-20000);
45457             this.el.hide();
45458             this.collapsedEl.show();
45459             this.fireEvent("collapsed", this);
45460             this.fireEvent("invalidated", this);
45461         }
45462     },
45463
45464     animateCollapse : function(){
45465         // overridden
45466     },
45467
45468     /**
45469      * Expands this region if it was previously collapsed.
45470      * @param {Roo.EventObject} e The event that triggered the expand (or null if calling manually)
45471      * @param {Boolean} skipAnim (optional) true to expand the element without animation (if animate is true)
45472      */
45473     expand : function(e, skipAnim){
45474         if(e) e.stopPropagation();
45475         if(!this.collapsed || this.el.hasActiveFx()) return;
45476         if(this.isSlid){
45477             this.afterSlideIn();
45478             skipAnim = true;
45479         }
45480         this.collapsed = false;
45481         if(this.config.animate && skipAnim !== true){
45482             this.animateExpand();
45483         }else{
45484             this.el.show();
45485             if(this.split){
45486                 this.split.el.show();
45487             }
45488             this.collapsedEl.setLocation(-2000,-2000);
45489             this.collapsedEl.hide();
45490             this.fireEvent("invalidated", this);
45491             this.fireEvent("expanded", this);
45492         }
45493     },
45494
45495     animateExpand : function(){
45496         // overridden
45497     },
45498
45499     initTabs : function()
45500     {
45501         this.bodyEl.setStyle("overflow", "hidden");
45502         var ts = new Roo.TabPanel(
45503                 this.bodyEl.dom,
45504                 {
45505                     tabPosition: this.bottomTabs ? 'bottom' : 'top',
45506                     disableTooltips: this.config.disableTabTips,
45507                     toolbar : this.config.toolbar
45508                 }
45509         );
45510         if(this.config.hideTabs){
45511             ts.stripWrap.setDisplayed(false);
45512         }
45513         this.tabs = ts;
45514         ts.resizeTabs = this.config.resizeTabs === true;
45515         ts.minTabWidth = this.config.minTabWidth || 40;
45516         ts.maxTabWidth = this.config.maxTabWidth || 250;
45517         ts.preferredTabWidth = this.config.preferredTabWidth || 150;
45518         ts.monitorResize = false;
45519         ts.bodyEl.setStyle("overflow", this.config.autoScroll ? "auto" : "hidden");
45520         ts.bodyEl.addClass('x-layout-tabs-body');
45521         this.panels.each(this.initPanelAsTab, this);
45522     },
45523
45524     initPanelAsTab : function(panel){
45525         var ti = this.tabs.addTab(panel.getEl().id, panel.getTitle(), null,
45526                     this.config.closeOnTab && panel.isClosable());
45527         if(panel.tabTip !== undefined){
45528             ti.setTooltip(panel.tabTip);
45529         }
45530         ti.on("activate", function(){
45531               this.setActivePanel(panel);
45532         }, this);
45533         if(this.config.closeOnTab){
45534             ti.on("beforeclose", function(t, e){
45535                 e.cancel = true;
45536                 this.remove(panel);
45537             }, this);
45538         }
45539         return ti;
45540     },
45541
45542     updatePanelTitle : function(panel, title){
45543         if(this.activePanel == panel){
45544             this.updateTitle(title);
45545         }
45546         if(this.tabs){
45547             var ti = this.tabs.getTab(panel.getEl().id);
45548             ti.setText(title);
45549             if(panel.tabTip !== undefined){
45550                 ti.setTooltip(panel.tabTip);
45551             }
45552         }
45553     },
45554
45555     updateTitle : function(title){
45556         if(this.titleTextEl && !this.config.title){
45557             this.titleTextEl.innerHTML = (typeof title != "undefined" && title.length > 0 ? title : "&#160;");
45558         }
45559     },
45560
45561     setActivePanel : function(panel){
45562         panel = this.getPanel(panel);
45563         if(this.activePanel && this.activePanel != panel){
45564             this.activePanel.setActiveState(false);
45565         }
45566         this.activePanel = panel;
45567         panel.setActiveState(true);
45568         if(this.panelSize){
45569             panel.setSize(this.panelSize.width, this.panelSize.height);
45570         }
45571         if(this.closeBtn){
45572             this.closeBtn.setVisible(!this.config.closeOnTab && !this.isSlid && panel.isClosable());
45573         }
45574         this.updateTitle(panel.getTitle());
45575         if(this.tabs){
45576             this.fireEvent("invalidated", this);
45577         }
45578         this.fireEvent("panelactivated", this, panel);
45579     },
45580
45581     /**
45582      * Shows the specified panel.
45583      * @param {Number/String/ContentPanel} panelId The panel's index, id or the panel itself
45584      * @return {Roo.ContentPanel} The shown panel, or null if a panel could not be found from panelId
45585      */
45586     showPanel : function(panel){
45587         if(panel = this.getPanel(panel)){
45588             if(this.tabs){
45589                 var tab = this.tabs.getTab(panel.getEl().id);
45590                 if(tab.isHidden()){
45591                     this.tabs.unhideTab(tab.id);
45592                 }
45593                 tab.activate();
45594             }else{
45595                 this.setActivePanel(panel);
45596             }
45597         }
45598         return panel;
45599     },
45600
45601     /**
45602      * Get the active panel for this region.
45603      * @return {Roo.ContentPanel} The active panel or null
45604      */
45605     getActivePanel : function(){
45606         return this.activePanel;
45607     },
45608
45609     validateVisibility : function(){
45610         if(this.panels.getCount() < 1){
45611             this.updateTitle("&#160;");
45612             this.closeBtn.hide();
45613             this.hide();
45614         }else{
45615             if(!this.isVisible()){
45616                 this.show();
45617             }
45618         }
45619     },
45620
45621     /**
45622      * Adds the passed ContentPanel(s) to this region.
45623      * @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
45624      * @return {Roo.ContentPanel} The panel added (if only one was added; null otherwise)
45625      */
45626     add : function(panel){
45627         if(arguments.length > 1){
45628             for(var i = 0, len = arguments.length; i < len; i++) {
45629                 this.add(arguments[i]);
45630             }
45631             return null;
45632         }
45633         if(this.hasPanel(panel)){
45634             this.showPanel(panel);
45635             return panel;
45636         }
45637         panel.setRegion(this);
45638         this.panels.add(panel);
45639         if(this.panels.getCount() == 1 && !this.config.alwaysShowTabs){
45640             this.bodyEl.dom.appendChild(panel.getEl().dom);
45641             if(panel.background !== true){
45642                 this.setActivePanel(panel);
45643             }
45644             this.fireEvent("paneladded", this, panel);
45645             return panel;
45646         }
45647         if(!this.tabs){
45648             this.initTabs();
45649         }else{
45650             this.initPanelAsTab(panel);
45651         }
45652         if(panel.background !== true){
45653             this.tabs.activate(panel.getEl().id);
45654         }
45655         this.fireEvent("paneladded", this, panel);
45656         return panel;
45657     },
45658
45659     /**
45660      * Hides the tab for the specified panel.
45661      * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
45662      */
45663     hidePanel : function(panel){
45664         if(this.tabs && (panel = this.getPanel(panel))){
45665             this.tabs.hideTab(panel.getEl().id);
45666         }
45667     },
45668
45669     /**
45670      * Unhides the tab for a previously hidden panel.
45671      * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
45672      */
45673     unhidePanel : function(panel){
45674         if(this.tabs && (panel = this.getPanel(panel))){
45675             this.tabs.unhideTab(panel.getEl().id);
45676         }
45677     },
45678
45679     clearPanels : function(){
45680         while(this.panels.getCount() > 0){
45681              this.remove(this.panels.first());
45682         }
45683     },
45684
45685     /**
45686      * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
45687      * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
45688      * @param {Boolean} preservePanel Overrides the config preservePanel option
45689      * @return {Roo.ContentPanel} The panel that was removed
45690      */
45691     remove : function(panel, preservePanel){
45692         panel = this.getPanel(panel);
45693         if(!panel){
45694             return null;
45695         }
45696         var e = {};
45697         this.fireEvent("beforeremove", this, panel, e);
45698         if(e.cancel === true){
45699             return null;
45700         }
45701         preservePanel = (typeof preservePanel != "undefined" ? preservePanel : (this.config.preservePanels === true || panel.preserve === true));
45702         var panelId = panel.getId();
45703         this.panels.removeKey(panelId);
45704         if(preservePanel){
45705             document.body.appendChild(panel.getEl().dom);
45706         }
45707         if(this.tabs){
45708             this.tabs.removeTab(panel.getEl().id);
45709         }else if (!preservePanel){
45710             this.bodyEl.dom.removeChild(panel.getEl().dom);
45711         }
45712         if(this.panels.getCount() == 1 && this.tabs && !this.config.alwaysShowTabs){
45713             var p = this.panels.first();
45714             var tempEl = document.createElement("div"); // temp holder to keep IE from deleting the node
45715             tempEl.appendChild(p.getEl().dom);
45716             this.bodyEl.update("");
45717             this.bodyEl.dom.appendChild(p.getEl().dom);
45718             tempEl = null;
45719             this.updateTitle(p.getTitle());
45720             this.tabs = null;
45721             this.bodyEl.setStyle("overflow", this.config.autoScroll ? "auto" : "hidden");
45722             this.setActivePanel(p);
45723         }
45724         panel.setRegion(null);
45725         if(this.activePanel == panel){
45726             this.activePanel = null;
45727         }
45728         if(this.config.autoDestroy !== false && preservePanel !== true){
45729             try{panel.destroy();}catch(e){}
45730         }
45731         this.fireEvent("panelremoved", this, panel);
45732         return panel;
45733     },
45734
45735     /**
45736      * Returns the TabPanel component used by this region
45737      * @return {Roo.TabPanel}
45738      */
45739     getTabs : function(){
45740         return this.tabs;
45741     },
45742
45743     createTool : function(parentEl, className){
45744         var btn = Roo.DomHelper.append(parentEl, {tag: "div", cls: "x-layout-tools-button",
45745             children: [{tag: "div", cls: "x-layout-tools-button-inner " + className, html: "&#160;"}]}, true);
45746         btn.addClassOnOver("x-layout-tools-button-over");
45747         return btn;
45748     }
45749 });/*
45750  * Based on:
45751  * Ext JS Library 1.1.1
45752  * Copyright(c) 2006-2007, Ext JS, LLC.
45753  *
45754  * Originally Released Under LGPL - original licence link has changed is not relivant.
45755  *
45756  * Fork - LGPL
45757  * <script type="text/javascript">
45758  */
45759  
45760
45761
45762 /**
45763  * @class Roo.SplitLayoutRegion
45764  * @extends Roo.LayoutRegion
45765  * Adds a splitbar and other (private) useful functionality to a {@link Roo.LayoutRegion}.
45766  */
45767 Roo.SplitLayoutRegion = function(mgr, config, pos, cursor){
45768     this.cursor = cursor;
45769     Roo.SplitLayoutRegion.superclass.constructor.call(this, mgr, config, pos);
45770 };
45771
45772 Roo.extend(Roo.SplitLayoutRegion, Roo.LayoutRegion, {
45773     splitTip : "Drag to resize.",
45774     collapsibleSplitTip : "Drag to resize. Double click to hide.",
45775     useSplitTips : false,
45776
45777     applyConfig : function(config){
45778         Roo.SplitLayoutRegion.superclass.applyConfig.call(this, config);
45779         if(config.split){
45780             if(!this.split){
45781                 var splitEl = Roo.DomHelper.append(this.mgr.el.dom, 
45782                         {tag: "div", id: this.el.id + "-split", cls: "x-layout-split x-layout-split-"+this.position, html: "&#160;"});
45783                 /** The SplitBar for this region 
45784                 * @type Roo.SplitBar */
45785                 this.split = new Roo.SplitBar(splitEl, this.el, this.orientation);
45786                 this.split.on("moved", this.onSplitMove, this);
45787                 this.split.useShim = config.useShim === true;
45788                 this.split.getMaximumSize = this[this.position == 'north' || this.position == 'south' ? 'getVMaxSize' : 'getHMaxSize'].createDelegate(this);
45789                 if(this.useSplitTips){
45790                     this.split.el.dom.title = config.collapsible ? this.collapsibleSplitTip : this.splitTip;
45791                 }
45792                 if(config.collapsible){
45793                     this.split.el.on("dblclick", this.collapse,  this);
45794                 }
45795             }
45796             if(typeof config.minSize != "undefined"){
45797                 this.split.minSize = config.minSize;
45798             }
45799             if(typeof config.maxSize != "undefined"){
45800                 this.split.maxSize = config.maxSize;
45801             }
45802             if(config.hideWhenEmpty || config.hidden || config.collapsed){
45803                 this.hideSplitter();
45804             }
45805         }
45806     },
45807
45808     getHMaxSize : function(){
45809          var cmax = this.config.maxSize || 10000;
45810          var center = this.mgr.getRegion("center");
45811          return Math.min(cmax, (this.el.getWidth()+center.getEl().getWidth())-center.getMinWidth());
45812     },
45813
45814     getVMaxSize : function(){
45815          var cmax = this.config.maxSize || 10000;
45816          var center = this.mgr.getRegion("center");
45817          return Math.min(cmax, (this.el.getHeight()+center.getEl().getHeight())-center.getMinHeight());
45818     },
45819
45820     onSplitMove : function(split, newSize){
45821         this.fireEvent("resized", this, newSize);
45822     },
45823     
45824     /** 
45825      * Returns the {@link Roo.SplitBar} for this region.
45826      * @return {Roo.SplitBar}
45827      */
45828     getSplitBar : function(){
45829         return this.split;
45830     },
45831     
45832     hide : function(){
45833         this.hideSplitter();
45834         Roo.SplitLayoutRegion.superclass.hide.call(this);
45835     },
45836
45837     hideSplitter : function(){
45838         if(this.split){
45839             this.split.el.setLocation(-2000,-2000);
45840             this.split.el.hide();
45841         }
45842     },
45843
45844     show : function(){
45845         if(this.split){
45846             this.split.el.show();
45847         }
45848         Roo.SplitLayoutRegion.superclass.show.call(this);
45849     },
45850     
45851     beforeSlide: function(){
45852         if(Roo.isGecko){// firefox overflow auto bug workaround
45853             this.bodyEl.clip();
45854             if(this.tabs) this.tabs.bodyEl.clip();
45855             if(this.activePanel){
45856                 this.activePanel.getEl().clip();
45857                 
45858                 if(this.activePanel.beforeSlide){
45859                     this.activePanel.beforeSlide();
45860                 }
45861             }
45862         }
45863     },
45864     
45865     afterSlide : function(){
45866         if(Roo.isGecko){// firefox overflow auto bug workaround
45867             this.bodyEl.unclip();
45868             if(this.tabs) this.tabs.bodyEl.unclip();
45869             if(this.activePanel){
45870                 this.activePanel.getEl().unclip();
45871                 if(this.activePanel.afterSlide){
45872                     this.activePanel.afterSlide();
45873                 }
45874             }
45875         }
45876     },
45877
45878     initAutoHide : function(){
45879         if(this.autoHide !== false){
45880             if(!this.autoHideHd){
45881                 var st = new Roo.util.DelayedTask(this.slideIn, this);
45882                 this.autoHideHd = {
45883                     "mouseout": function(e){
45884                         if(!e.within(this.el, true)){
45885                             st.delay(500);
45886                         }
45887                     },
45888                     "mouseover" : function(e){
45889                         st.cancel();
45890                     },
45891                     scope : this
45892                 };
45893             }
45894             this.el.on(this.autoHideHd);
45895         }
45896     },
45897
45898     clearAutoHide : function(){
45899         if(this.autoHide !== false){
45900             this.el.un("mouseout", this.autoHideHd.mouseout);
45901             this.el.un("mouseover", this.autoHideHd.mouseover);
45902         }
45903     },
45904
45905     clearMonitor : function(){
45906         Roo.get(document).un("click", this.slideInIf, this);
45907     },
45908
45909     // these names are backwards but not changed for compat
45910     slideOut : function(){
45911         if(this.isSlid || this.el.hasActiveFx()){
45912             return;
45913         }
45914         this.isSlid = true;
45915         if(this.collapseBtn){
45916             this.collapseBtn.hide();
45917         }
45918         this.closeBtnState = this.closeBtn.getStyle('display');
45919         this.closeBtn.hide();
45920         if(this.stickBtn){
45921             this.stickBtn.show();
45922         }
45923         this.el.show();
45924         this.el.alignTo(this.collapsedEl, this.getCollapseAnchor());
45925         this.beforeSlide();
45926         this.el.setStyle("z-index", 10001);
45927         this.el.slideIn(this.getSlideAnchor(), {
45928             callback: function(){
45929                 this.afterSlide();
45930                 this.initAutoHide();
45931                 Roo.get(document).on("click", this.slideInIf, this);
45932                 this.fireEvent("slideshow", this);
45933             },
45934             scope: this,
45935             block: true
45936         });
45937     },
45938
45939     afterSlideIn : function(){
45940         this.clearAutoHide();
45941         this.isSlid = false;
45942         this.clearMonitor();
45943         this.el.setStyle("z-index", "");
45944         if(this.collapseBtn){
45945             this.collapseBtn.show();
45946         }
45947         this.closeBtn.setStyle('display', this.closeBtnState);
45948         if(this.stickBtn){
45949             this.stickBtn.hide();
45950         }
45951         this.fireEvent("slidehide", this);
45952     },
45953
45954     slideIn : function(cb){
45955         if(!this.isSlid || this.el.hasActiveFx()){
45956             Roo.callback(cb);
45957             return;
45958         }
45959         this.isSlid = false;
45960         this.beforeSlide();
45961         this.el.slideOut(this.getSlideAnchor(), {
45962             callback: function(){
45963                 this.el.setLeftTop(-10000, -10000);
45964                 this.afterSlide();
45965                 this.afterSlideIn();
45966                 Roo.callback(cb);
45967             },
45968             scope: this,
45969             block: true
45970         });
45971     },
45972     
45973     slideInIf : function(e){
45974         if(!e.within(this.el)){
45975             this.slideIn();
45976         }
45977     },
45978
45979     animateCollapse : function(){
45980         this.beforeSlide();
45981         this.el.setStyle("z-index", 20000);
45982         var anchor = this.getSlideAnchor();
45983         this.el.slideOut(anchor, {
45984             callback : function(){
45985                 this.el.setStyle("z-index", "");
45986                 this.collapsedEl.slideIn(anchor, {duration:.3});
45987                 this.afterSlide();
45988                 this.el.setLocation(-10000,-10000);
45989                 this.el.hide();
45990                 this.fireEvent("collapsed", this);
45991             },
45992             scope: this,
45993             block: true
45994         });
45995     },
45996
45997     animateExpand : function(){
45998         this.beforeSlide();
45999         this.el.alignTo(this.collapsedEl, this.getCollapseAnchor(), this.getExpandAdj());
46000         this.el.setStyle("z-index", 20000);
46001         this.collapsedEl.hide({
46002             duration:.1
46003         });
46004         this.el.slideIn(this.getSlideAnchor(), {
46005             callback : function(){
46006                 this.el.setStyle("z-index", "");
46007                 this.afterSlide();
46008                 if(this.split){
46009                     this.split.el.show();
46010                 }
46011                 this.fireEvent("invalidated", this);
46012                 this.fireEvent("expanded", this);
46013             },
46014             scope: this,
46015             block: true
46016         });
46017     },
46018
46019     anchors : {
46020         "west" : "left",
46021         "east" : "right",
46022         "north" : "top",
46023         "south" : "bottom"
46024     },
46025
46026     sanchors : {
46027         "west" : "l",
46028         "east" : "r",
46029         "north" : "t",
46030         "south" : "b"
46031     },
46032
46033     canchors : {
46034         "west" : "tl-tr",
46035         "east" : "tr-tl",
46036         "north" : "tl-bl",
46037         "south" : "bl-tl"
46038     },
46039
46040     getAnchor : function(){
46041         return this.anchors[this.position];
46042     },
46043
46044     getCollapseAnchor : function(){
46045         return this.canchors[this.position];
46046     },
46047
46048     getSlideAnchor : function(){
46049         return this.sanchors[this.position];
46050     },
46051
46052     getAlignAdj : function(){
46053         var cm = this.cmargins;
46054         switch(this.position){
46055             case "west":
46056                 return [0, 0];
46057             break;
46058             case "east":
46059                 return [0, 0];
46060             break;
46061             case "north":
46062                 return [0, 0];
46063             break;
46064             case "south":
46065                 return [0, 0];
46066             break;
46067         }
46068     },
46069
46070     getExpandAdj : function(){
46071         var c = this.collapsedEl, cm = this.cmargins;
46072         switch(this.position){
46073             case "west":
46074                 return [-(cm.right+c.getWidth()+cm.left), 0];
46075             break;
46076             case "east":
46077                 return [cm.right+c.getWidth()+cm.left, 0];
46078             break;
46079             case "north":
46080                 return [0, -(cm.top+cm.bottom+c.getHeight())];
46081             break;
46082             case "south":
46083                 return [0, cm.top+cm.bottom+c.getHeight()];
46084             break;
46085         }
46086     }
46087 });/*
46088  * Based on:
46089  * Ext JS Library 1.1.1
46090  * Copyright(c) 2006-2007, Ext JS, LLC.
46091  *
46092  * Originally Released Under LGPL - original licence link has changed is not relivant.
46093  *
46094  * Fork - LGPL
46095  * <script type="text/javascript">
46096  */
46097 /*
46098  * These classes are private internal classes
46099  */
46100 Roo.CenterLayoutRegion = function(mgr, config){
46101     Roo.LayoutRegion.call(this, mgr, config, "center");
46102     this.visible = true;
46103     this.minWidth = config.minWidth || 20;
46104     this.minHeight = config.minHeight || 20;
46105 };
46106
46107 Roo.extend(Roo.CenterLayoutRegion, Roo.LayoutRegion, {
46108     hide : function(){
46109         // center panel can't be hidden
46110     },
46111     
46112     show : function(){
46113         // center panel can't be hidden
46114     },
46115     
46116     getMinWidth: function(){
46117         return this.minWidth;
46118     },
46119     
46120     getMinHeight: function(){
46121         return this.minHeight;
46122     }
46123 });
46124
46125
46126 Roo.NorthLayoutRegion = function(mgr, config){
46127     Roo.LayoutRegion.call(this, mgr, config, "north", "n-resize");
46128     if(this.split){
46129         this.split.placement = Roo.SplitBar.TOP;
46130         this.split.orientation = Roo.SplitBar.VERTICAL;
46131         this.split.el.addClass("x-layout-split-v");
46132     }
46133     var size = config.initialSize || config.height;
46134     if(typeof size != "undefined"){
46135         this.el.setHeight(size);
46136     }
46137 };
46138 Roo.extend(Roo.NorthLayoutRegion, Roo.SplitLayoutRegion, {
46139     orientation: Roo.SplitBar.VERTICAL,
46140     getBox : function(){
46141         if(this.collapsed){
46142             return this.collapsedEl.getBox();
46143         }
46144         var box = this.el.getBox();
46145         if(this.split){
46146             box.height += this.split.el.getHeight();
46147         }
46148         return box;
46149     },
46150     
46151     updateBox : function(box){
46152         if(this.split && !this.collapsed){
46153             box.height -= this.split.el.getHeight();
46154             this.split.el.setLeft(box.x);
46155             this.split.el.setTop(box.y+box.height);
46156             this.split.el.setWidth(box.width);
46157         }
46158         if(this.collapsed){
46159             this.updateBody(box.width, null);
46160         }
46161         Roo.LayoutRegion.prototype.updateBox.call(this, box);
46162     }
46163 });
46164
46165 Roo.SouthLayoutRegion = function(mgr, config){
46166     Roo.SplitLayoutRegion.call(this, mgr, config, "south", "s-resize");
46167     if(this.split){
46168         this.split.placement = Roo.SplitBar.BOTTOM;
46169         this.split.orientation = Roo.SplitBar.VERTICAL;
46170         this.split.el.addClass("x-layout-split-v");
46171     }
46172     var size = config.initialSize || config.height;
46173     if(typeof size != "undefined"){
46174         this.el.setHeight(size);
46175     }
46176 };
46177 Roo.extend(Roo.SouthLayoutRegion, Roo.SplitLayoutRegion, {
46178     orientation: Roo.SplitBar.VERTICAL,
46179     getBox : function(){
46180         if(this.collapsed){
46181             return this.collapsedEl.getBox();
46182         }
46183         var box = this.el.getBox();
46184         if(this.split){
46185             var sh = this.split.el.getHeight();
46186             box.height += sh;
46187             box.y -= sh;
46188         }
46189         return box;
46190     },
46191     
46192     updateBox : function(box){
46193         if(this.split && !this.collapsed){
46194             var sh = this.split.el.getHeight();
46195             box.height -= sh;
46196             box.y += sh;
46197             this.split.el.setLeft(box.x);
46198             this.split.el.setTop(box.y-sh);
46199             this.split.el.setWidth(box.width);
46200         }
46201         if(this.collapsed){
46202             this.updateBody(box.width, null);
46203         }
46204         Roo.LayoutRegion.prototype.updateBox.call(this, box);
46205     }
46206 });
46207
46208 Roo.EastLayoutRegion = function(mgr, config){
46209     Roo.SplitLayoutRegion.call(this, mgr, config, "east", "e-resize");
46210     if(this.split){
46211         this.split.placement = Roo.SplitBar.RIGHT;
46212         this.split.orientation = Roo.SplitBar.HORIZONTAL;
46213         this.split.el.addClass("x-layout-split-h");
46214     }
46215     var size = config.initialSize || config.width;
46216     if(typeof size != "undefined"){
46217         this.el.setWidth(size);
46218     }
46219 };
46220 Roo.extend(Roo.EastLayoutRegion, Roo.SplitLayoutRegion, {
46221     orientation: Roo.SplitBar.HORIZONTAL,
46222     getBox : function(){
46223         if(this.collapsed){
46224             return this.collapsedEl.getBox();
46225         }
46226         var box = this.el.getBox();
46227         if(this.split){
46228             var sw = this.split.el.getWidth();
46229             box.width += sw;
46230             box.x -= sw;
46231         }
46232         return box;
46233     },
46234
46235     updateBox : function(box){
46236         if(this.split && !this.collapsed){
46237             var sw = this.split.el.getWidth();
46238             box.width -= sw;
46239             this.split.el.setLeft(box.x);
46240             this.split.el.setTop(box.y);
46241             this.split.el.setHeight(box.height);
46242             box.x += sw;
46243         }
46244         if(this.collapsed){
46245             this.updateBody(null, box.height);
46246         }
46247         Roo.LayoutRegion.prototype.updateBox.call(this, box);
46248     }
46249 });
46250
46251 Roo.WestLayoutRegion = function(mgr, config){
46252     Roo.SplitLayoutRegion.call(this, mgr, config, "west", "w-resize");
46253     if(this.split){
46254         this.split.placement = Roo.SplitBar.LEFT;
46255         this.split.orientation = Roo.SplitBar.HORIZONTAL;
46256         this.split.el.addClass("x-layout-split-h");
46257     }
46258     var size = config.initialSize || config.width;
46259     if(typeof size != "undefined"){
46260         this.el.setWidth(size);
46261     }
46262 };
46263 Roo.extend(Roo.WestLayoutRegion, Roo.SplitLayoutRegion, {
46264     orientation: Roo.SplitBar.HORIZONTAL,
46265     getBox : function(){
46266         if(this.collapsed){
46267             return this.collapsedEl.getBox();
46268         }
46269         var box = this.el.getBox();
46270         if(this.split){
46271             box.width += this.split.el.getWidth();
46272         }
46273         return box;
46274     },
46275     
46276     updateBox : function(box){
46277         if(this.split && !this.collapsed){
46278             var sw = this.split.el.getWidth();
46279             box.width -= sw;
46280             this.split.el.setLeft(box.x+box.width);
46281             this.split.el.setTop(box.y);
46282             this.split.el.setHeight(box.height);
46283         }
46284         if(this.collapsed){
46285             this.updateBody(null, box.height);
46286         }
46287         Roo.LayoutRegion.prototype.updateBox.call(this, box);
46288     }
46289 });
46290 /*
46291  * Based on:
46292  * Ext JS Library 1.1.1
46293  * Copyright(c) 2006-2007, Ext JS, LLC.
46294  *
46295  * Originally Released Under LGPL - original licence link has changed is not relivant.
46296  *
46297  * Fork - LGPL
46298  * <script type="text/javascript">
46299  */
46300  
46301  
46302 /*
46303  * Private internal class for reading and applying state
46304  */
46305 Roo.LayoutStateManager = function(layout){
46306      // default empty state
46307      this.state = {
46308         north: {},
46309         south: {},
46310         east: {},
46311         west: {}       
46312     };
46313 };
46314
46315 Roo.LayoutStateManager.prototype = {
46316     init : function(layout, provider){
46317         this.provider = provider;
46318         var state = provider.get(layout.id+"-layout-state");
46319         if(state){
46320             var wasUpdating = layout.isUpdating();
46321             if(!wasUpdating){
46322                 layout.beginUpdate();
46323             }
46324             for(var key in state){
46325                 if(typeof state[key] != "function"){
46326                     var rstate = state[key];
46327                     var r = layout.getRegion(key);
46328                     if(r && rstate){
46329                         if(rstate.size){
46330                             r.resizeTo(rstate.size);
46331                         }
46332                         if(rstate.collapsed == true){
46333                             r.collapse(true);
46334                         }else{
46335                             r.expand(null, true);
46336                         }
46337                     }
46338                 }
46339             }
46340             if(!wasUpdating){
46341                 layout.endUpdate();
46342             }
46343             this.state = state; 
46344         }
46345         this.layout = layout;
46346         layout.on("regionresized", this.onRegionResized, this);
46347         layout.on("regioncollapsed", this.onRegionCollapsed, this);
46348         layout.on("regionexpanded", this.onRegionExpanded, this);
46349     },
46350     
46351     storeState : function(){
46352         this.provider.set(this.layout.id+"-layout-state", this.state);
46353     },
46354     
46355     onRegionResized : function(region, newSize){
46356         this.state[region.getPosition()].size = newSize;
46357         this.storeState();
46358     },
46359     
46360     onRegionCollapsed : function(region){
46361         this.state[region.getPosition()].collapsed = true;
46362         this.storeState();
46363     },
46364     
46365     onRegionExpanded : function(region){
46366         this.state[region.getPosition()].collapsed = false;
46367         this.storeState();
46368     }
46369 };/*
46370  * Based on:
46371  * Ext JS Library 1.1.1
46372  * Copyright(c) 2006-2007, Ext JS, LLC.
46373  *
46374  * Originally Released Under LGPL - original licence link has changed is not relivant.
46375  *
46376  * Fork - LGPL
46377  * <script type="text/javascript">
46378  */
46379 /**
46380  * @class Roo.ContentPanel
46381  * @extends Roo.util.Observable
46382  * A basic ContentPanel element.
46383  * @cfg {Boolean}   fitToFrame    True for this panel to adjust its size to fit when the region resizes  (defaults to false)
46384  * @cfg {Boolean}   fitContainer   When using {@link #fitToFrame} and {@link #resizeEl}, you can also fit the parent container  (defaults to false)
46385  * @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
46386  * @cfg {Boolean}   closable      True if the panel can be closed/removed
46387  * @cfg {Boolean}   background    True if the panel should not be activated when it is added (defaults to false)
46388  * @cfg {String/HTMLElement/Element} resizeEl An element to resize if {@link #fitToFrame} is true (instead of this panel's element)
46389  * @cfg {Toolbar}   toolbar       A toolbar for this panel
46390  * @cfg {Boolean} autoScroll    True to scroll overflow in this panel (use with {@link #fitToFrame})
46391  * @cfg {String} title          The title for this panel
46392  * @cfg {Array} adjustments     Values to <b>add</b> to the width/height when doing a {@link #fitToFrame} (default is [0, 0])
46393  * @cfg {String} url            Calls {@link #setUrl} with this value
46394  * @cfg {String} region         (center|north|south|east|west) which region to put this panel on (when used with xtype constructors)
46395  * @cfg {String/Object} params  When used with {@link #url}, calls {@link #setUrl} with this value
46396  * @cfg {Boolean} loadOnce      When used with {@link #url}, calls {@link #setUrl} with this value
46397  * @cfg {String}    content        Raw content to fill content panel with (uses setContent on construction.)
46398
46399  * @constructor
46400  * Create a new ContentPanel.
46401  * @param {String/HTMLElement/Roo.Element} el The container element for this panel
46402  * @param {String/Object} config A string to set only the title or a config object
46403  * @param {String} content (optional) Set the HTML content for this panel
46404  * @param {String} region (optional) Used by xtype constructors to add to regions. (values center,east,west,south,north)
46405  */
46406 Roo.ContentPanel = function(el, config, content){
46407     
46408      
46409     /*
46410     if(el.autoCreate || el.xtype){ // xtype is available if this is called from factory
46411         config = el;
46412         el = Roo.id();
46413     }
46414     if (config && config.parentLayout) { 
46415         el = config.parentLayout.el.createChild(); 
46416     }
46417     */
46418     if(el.autoCreate){ // xtype is available if this is called from factory
46419         config = el;
46420         el = Roo.id();
46421     }
46422     this.el = Roo.get(el);
46423     if(!this.el && config && config.autoCreate){
46424         if(typeof config.autoCreate == "object"){
46425             if(!config.autoCreate.id){
46426                 config.autoCreate.id = config.id||el;
46427             }
46428             this.el = Roo.DomHelper.append(document.body,
46429                         config.autoCreate, true);
46430         }else{
46431             this.el = Roo.DomHelper.append(document.body,
46432                         {tag: "div", cls: "x-layout-inactive-content", id: config.id||el}, true);
46433         }
46434     }
46435     this.closable = false;
46436     this.loaded = false;
46437     this.active = false;
46438     if(typeof config == "string"){
46439         this.title = config;
46440     }else{
46441         Roo.apply(this, config);
46442     }
46443     
46444     if (this.toolbar && !this.toolbar.el && this.toolbar.xtype) {
46445         this.wrapEl = this.el.wrap();
46446         this.toolbar.container = this.el.insertSibling(false, 'before');
46447         this.toolbar = new Roo.Toolbar(this.toolbar);
46448     }
46449     
46450     
46451     
46452     if(this.resizeEl){
46453         this.resizeEl = Roo.get(this.resizeEl, true);
46454     }else{
46455         this.resizeEl = this.el;
46456     }
46457     this.addEvents({
46458         /**
46459          * @event activate
46460          * Fires when this panel is activated. 
46461          * @param {Roo.ContentPanel} this
46462          */
46463         "activate" : true,
46464         /**
46465          * @event deactivate
46466          * Fires when this panel is activated. 
46467          * @param {Roo.ContentPanel} this
46468          */
46469         "deactivate" : true,
46470
46471         /**
46472          * @event resize
46473          * Fires when this panel is resized if fitToFrame is true.
46474          * @param {Roo.ContentPanel} this
46475          * @param {Number} width The width after any component adjustments
46476          * @param {Number} height The height after any component adjustments
46477          */
46478         "resize" : true,
46479         
46480          /**
46481          * @event render
46482          * Fires when this tab is created
46483          * @param {Roo.ContentPanel} this
46484          */
46485         "render" : true
46486         
46487         
46488         
46489     });
46490     if(this.autoScroll){
46491         this.resizeEl.setStyle("overflow", "auto");
46492     } else {
46493         // fix randome scrolling
46494         this.el.on('scroll', function() {
46495             Roo.log('fix random scolling');
46496             this.scrollTo('top',0); 
46497         });
46498     }
46499     content = content || this.content;
46500     if(content){
46501         this.setContent(content);
46502     }
46503     if(config && config.url){
46504         this.setUrl(this.url, this.params, this.loadOnce);
46505     }
46506     
46507     
46508     
46509     Roo.ContentPanel.superclass.constructor.call(this);
46510     
46511     this.fireEvent('render', this);
46512 };
46513
46514 Roo.extend(Roo.ContentPanel, Roo.util.Observable, {
46515     tabTip:'',
46516     setRegion : function(region){
46517         this.region = region;
46518         if(region){
46519            this.el.replaceClass("x-layout-inactive-content", "x-layout-active-content");
46520         }else{
46521            this.el.replaceClass("x-layout-active-content", "x-layout-inactive-content");
46522         } 
46523     },
46524     
46525     /**
46526      * Returns the toolbar for this Panel if one was configured. 
46527      * @return {Roo.Toolbar} 
46528      */
46529     getToolbar : function(){
46530         return this.toolbar;
46531     },
46532     
46533     setActiveState : function(active){
46534         this.active = active;
46535         if(!active){
46536             this.fireEvent("deactivate", this);
46537         }else{
46538             this.fireEvent("activate", this);
46539         }
46540     },
46541     /**
46542      * Updates this panel's element
46543      * @param {String} content The new content
46544      * @param {Boolean} loadScripts (optional) true to look for and process scripts
46545     */
46546     setContent : function(content, loadScripts){
46547         this.el.update(content, loadScripts);
46548     },
46549
46550     ignoreResize : function(w, h){
46551         if(this.lastSize && this.lastSize.width == w && this.lastSize.height == h){
46552             return true;
46553         }else{
46554             this.lastSize = {width: w, height: h};
46555             return false;
46556         }
46557     },
46558     /**
46559      * Get the {@link Roo.UpdateManager} for this panel. Enables you to perform Ajax updates.
46560      * @return {Roo.UpdateManager} The UpdateManager
46561      */
46562     getUpdateManager : function(){
46563         return this.el.getUpdateManager();
46564     },
46565      /**
46566      * Loads this content panel immediately with content from XHR. Note: to delay loading until the panel is activated, use {@link #setUrl}.
46567      * @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:
46568 <pre><code>
46569 panel.load({
46570     url: "your-url.php",
46571     params: {param1: "foo", param2: "bar"}, // or a URL encoded string
46572     callback: yourFunction,
46573     scope: yourObject, //(optional scope)
46574     discardUrl: false,
46575     nocache: false,
46576     text: "Loading...",
46577     timeout: 30,
46578     scripts: false
46579 });
46580 </code></pre>
46581      * The only required property is <i>url</i>. The optional properties <i>nocache</i>, <i>text</i> and <i>scripts</i>
46582      * 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.
46583      * @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}
46584      * @param {Function} callback (optional) Callback when transaction is complete -- called with signature (oElement, bSuccess, oResponse)
46585      * @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.
46586      * @return {Roo.ContentPanel} this
46587      */
46588     load : function(){
46589         var um = this.el.getUpdateManager();
46590         um.update.apply(um, arguments);
46591         return this;
46592     },
46593
46594
46595     /**
46596      * 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.
46597      * @param {String/Function} url The URL to load the content from or a function to call to get the URL
46598      * @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)
46599      * @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)
46600      * @return {Roo.UpdateManager} The UpdateManager
46601      */
46602     setUrl : function(url, params, loadOnce){
46603         if(this.refreshDelegate){
46604             this.removeListener("activate", this.refreshDelegate);
46605         }
46606         this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
46607         this.on("activate", this.refreshDelegate);
46608         return this.el.getUpdateManager();
46609     },
46610     
46611     _handleRefresh : function(url, params, loadOnce){
46612         if(!loadOnce || !this.loaded){
46613             var updater = this.el.getUpdateManager();
46614             updater.update(url, params, this._setLoaded.createDelegate(this));
46615         }
46616     },
46617     
46618     _setLoaded : function(){
46619         this.loaded = true;
46620     }, 
46621     
46622     /**
46623      * Returns this panel's id
46624      * @return {String} 
46625      */
46626     getId : function(){
46627         return this.el.id;
46628     },
46629     
46630     /** 
46631      * Returns this panel's element - used by regiosn to add.
46632      * @return {Roo.Element} 
46633      */
46634     getEl : function(){
46635         return this.wrapEl || this.el;
46636     },
46637     
46638     adjustForComponents : function(width, height){
46639         if(this.resizeEl != this.el){
46640             width -= this.el.getFrameWidth('lr');
46641             height -= this.el.getFrameWidth('tb');
46642         }
46643         if(this.toolbar){
46644             var te = this.toolbar.getEl();
46645             height -= te.getHeight();
46646             te.setWidth(width);
46647         }
46648         if(this.adjustments){
46649             width += this.adjustments[0];
46650             height += this.adjustments[1];
46651         }
46652         return {"width": width, "height": height};
46653     },
46654     
46655     setSize : function(width, height){
46656         if(this.fitToFrame && !this.ignoreResize(width, height)){
46657             if(this.fitContainer && this.resizeEl != this.el){
46658                 this.el.setSize(width, height);
46659             }
46660             var size = this.adjustForComponents(width, height);
46661             this.resizeEl.setSize(this.autoWidth ? "auto" : size.width, this.autoHeight ? "auto" : size.height);
46662             this.fireEvent('resize', this, size.width, size.height);
46663         }
46664     },
46665     
46666     /**
46667      * Returns this panel's title
46668      * @return {String} 
46669      */
46670     getTitle : function(){
46671         return this.title;
46672     },
46673     
46674     /**
46675      * Set this panel's title
46676      * @param {String} title
46677      */
46678     setTitle : function(title){
46679         this.title = title;
46680         if(this.region){
46681             this.region.updatePanelTitle(this, title);
46682         }
46683     },
46684     
46685     /**
46686      * Returns true is this panel was configured to be closable
46687      * @return {Boolean} 
46688      */
46689     isClosable : function(){
46690         return this.closable;
46691     },
46692     
46693     beforeSlide : function(){
46694         this.el.clip();
46695         this.resizeEl.clip();
46696     },
46697     
46698     afterSlide : function(){
46699         this.el.unclip();
46700         this.resizeEl.unclip();
46701     },
46702     
46703     /**
46704      *   Force a content refresh from the URL specified in the {@link #setUrl} method.
46705      *   Will fail silently if the {@link #setUrl} method has not been called.
46706      *   This does not activate the panel, just updates its content.
46707      */
46708     refresh : function(){
46709         if(this.refreshDelegate){
46710            this.loaded = false;
46711            this.refreshDelegate();
46712         }
46713     },
46714     
46715     /**
46716      * Destroys this panel
46717      */
46718     destroy : function(){
46719         this.el.removeAllListeners();
46720         var tempEl = document.createElement("span");
46721         tempEl.appendChild(this.el.dom);
46722         tempEl.innerHTML = "";
46723         this.el.remove();
46724         this.el = null;
46725     },
46726     
46727     /**
46728      * form - if the content panel contains a form - this is a reference to it.
46729      * @type {Roo.form.Form}
46730      */
46731     form : false,
46732     /**
46733      * view - if the content panel contains a view (Roo.DatePicker / Roo.View / Roo.JsonView)
46734      *    This contains a reference to it.
46735      * @type {Roo.View}
46736      */
46737     view : false,
46738     
46739       /**
46740      * Adds a xtype elements to the panel - currently only supports Forms, View, JsonView.
46741      * <pre><code>
46742
46743 layout.addxtype({
46744        xtype : 'Form',
46745        items: [ .... ]
46746    }
46747 );
46748
46749 </code></pre>
46750      * @param {Object} cfg Xtype definition of item to add.
46751      */
46752     
46753     addxtype : function(cfg) {
46754         // add form..
46755         if (cfg.xtype.match(/^Form$/)) {
46756             var el = this.el.createChild();
46757
46758             this.form = new  Roo.form.Form(cfg);
46759             
46760             
46761             if ( this.form.allItems.length) this.form.render(el.dom);
46762             return this.form;
46763         }
46764         // should only have one of theses..
46765         if (['View', 'JsonView', 'DatePicker'].indexOf(cfg.xtype) > -1) {
46766             // views..
46767             cfg.el = this.el.appendChild(document.createElement("div"));
46768             // factory?
46769             
46770             var ret = new Roo.factory(cfg);
46771             ret.render && ret.render(false, ''); // render blank..
46772             this.view = ret;
46773             return ret;
46774         }
46775         return false;
46776     }
46777 });
46778
46779 /**
46780  * @class Roo.GridPanel
46781  * @extends Roo.ContentPanel
46782  * @constructor
46783  * Create a new GridPanel.
46784  * @param {Roo.grid.Grid} grid The grid for this panel
46785  * @param {String/Object} config A string to set only the panel's title, or a config object
46786  */
46787 Roo.GridPanel = function(grid, config){
46788     
46789   
46790     this.wrapper = Roo.DomHelper.append(document.body, // wrapper for IE7 strict & safari scroll issue
46791         {tag: "div", cls: "x-layout-grid-wrapper x-layout-inactive-content"}, true);
46792         
46793     this.wrapper.dom.appendChild(grid.getGridEl().dom);
46794     
46795     Roo.GridPanel.superclass.constructor.call(this, this.wrapper, config);
46796     
46797     if(this.toolbar){
46798         this.toolbar.el.insertBefore(this.wrapper.dom.firstChild);
46799     }
46800     // xtype created footer. - not sure if will work as we normally have to render first..
46801     if (this.footer && !this.footer.el && this.footer.xtype) {
46802         
46803         this.footer.container = this.grid.getView().getFooterPanel(true);
46804         this.footer.dataSource = this.grid.dataSource;
46805         this.footer = Roo.factory(this.footer, Roo);
46806         
46807     }
46808     
46809     grid.monitorWindowResize = false; // turn off autosizing
46810     grid.autoHeight = false;
46811     grid.autoWidth = false;
46812     this.grid = grid;
46813     this.grid.getGridEl().replaceClass("x-layout-inactive-content", "x-layout-component-panel");
46814 };
46815
46816 Roo.extend(Roo.GridPanel, Roo.ContentPanel, {
46817     getId : function(){
46818         return this.grid.id;
46819     },
46820     
46821     /**
46822      * Returns the grid for this panel
46823      * @return {Roo.grid.Grid} 
46824      */
46825     getGrid : function(){
46826         return this.grid;    
46827     },
46828     
46829     setSize : function(width, height){
46830         if(!this.ignoreResize(width, height)){
46831             var grid = this.grid;
46832             var size = this.adjustForComponents(width, height);
46833             grid.getGridEl().setSize(size.width, size.height);
46834             grid.autoSize();
46835         }
46836     },
46837     
46838     beforeSlide : function(){
46839         this.grid.getView().scroller.clip();
46840     },
46841     
46842     afterSlide : function(){
46843         this.grid.getView().scroller.unclip();
46844     },
46845     
46846     destroy : function(){
46847         this.grid.destroy();
46848         delete this.grid;
46849         Roo.GridPanel.superclass.destroy.call(this); 
46850     }
46851 });
46852
46853
46854 /**
46855  * @class Roo.NestedLayoutPanel
46856  * @extends Roo.ContentPanel
46857  * @constructor
46858  * Create a new NestedLayoutPanel.
46859  * 
46860  * 
46861  * @param {Roo.BorderLayout} layout The layout for this panel
46862  * @param {String/Object} config A string to set only the title or a config object
46863  */
46864 Roo.NestedLayoutPanel = function(layout, config)
46865 {
46866     // construct with only one argument..
46867     /* FIXME - implement nicer consturctors
46868     if (layout.layout) {
46869         config = layout;
46870         layout = config.layout;
46871         delete config.layout;
46872     }
46873     if (layout.xtype && !layout.getEl) {
46874         // then layout needs constructing..
46875         layout = Roo.factory(layout, Roo);
46876     }
46877     */
46878     
46879     
46880     Roo.NestedLayoutPanel.superclass.constructor.call(this, layout.getEl(), config);
46881     
46882     layout.monitorWindowResize = false; // turn off autosizing
46883     this.layout = layout;
46884     this.layout.getEl().addClass("x-layout-nested-layout");
46885     
46886     
46887     
46888     
46889 };
46890
46891 Roo.extend(Roo.NestedLayoutPanel, Roo.ContentPanel, {
46892
46893     setSize : function(width, height){
46894         if(!this.ignoreResize(width, height)){
46895             var size = this.adjustForComponents(width, height);
46896             var el = this.layout.getEl();
46897             el.setSize(size.width, size.height);
46898             var touch = el.dom.offsetWidth;
46899             this.layout.layout();
46900             // ie requires a double layout on the first pass
46901             if(Roo.isIE && !this.initialized){
46902                 this.initialized = true;
46903                 this.layout.layout();
46904             }
46905         }
46906     },
46907     
46908     // activate all subpanels if not currently active..
46909     
46910     setActiveState : function(active){
46911         this.active = active;
46912         if(!active){
46913             this.fireEvent("deactivate", this);
46914             return;
46915         }
46916         
46917         this.fireEvent("activate", this);
46918         // not sure if this should happen before or after..
46919         if (!this.layout) {
46920             return; // should not happen..
46921         }
46922         var reg = false;
46923         for (var r in this.layout.regions) {
46924             reg = this.layout.getRegion(r);
46925             if (reg.getActivePanel()) {
46926                 //reg.showPanel(reg.getActivePanel()); // force it to activate.. 
46927                 reg.setActivePanel(reg.getActivePanel());
46928                 continue;
46929             }
46930             if (!reg.panels.length) {
46931                 continue;
46932             }
46933             reg.showPanel(reg.getPanel(0));
46934         }
46935         
46936         
46937         
46938         
46939     },
46940     
46941     /**
46942      * Returns the nested BorderLayout for this panel
46943      * @return {Roo.BorderLayout} 
46944      */
46945     getLayout : function(){
46946         return this.layout;
46947     },
46948     
46949      /**
46950      * Adds a xtype elements to the layout of the nested panel
46951      * <pre><code>
46952
46953 panel.addxtype({
46954        xtype : 'ContentPanel',
46955        region: 'west',
46956        items: [ .... ]
46957    }
46958 );
46959
46960 panel.addxtype({
46961         xtype : 'NestedLayoutPanel',
46962         region: 'west',
46963         layout: {
46964            center: { },
46965            west: { }   
46966         },
46967         items : [ ... list of content panels or nested layout panels.. ]
46968    }
46969 );
46970 </code></pre>
46971      * @param {Object} cfg Xtype definition of item to add.
46972      */
46973     addxtype : function(cfg) {
46974         return this.layout.addxtype(cfg);
46975     
46976     }
46977 });
46978
46979 Roo.ScrollPanel = function(el, config, content){
46980     config = config || {};
46981     config.fitToFrame = true;
46982     Roo.ScrollPanel.superclass.constructor.call(this, el, config, content);
46983     
46984     this.el.dom.style.overflow = "hidden";
46985     var wrap = this.el.wrap({cls: "x-scroller x-layout-inactive-content"});
46986     this.el.removeClass("x-layout-inactive-content");
46987     this.el.on("mousewheel", this.onWheel, this);
46988
46989     var up = wrap.createChild({cls: "x-scroller-up", html: "&#160;"}, this.el.dom);
46990     var down = wrap.createChild({cls: "x-scroller-down", html: "&#160;"});
46991     up.unselectable(); down.unselectable();
46992     up.on("click", this.scrollUp, this);
46993     down.on("click", this.scrollDown, this);
46994     up.addClassOnOver("x-scroller-btn-over");
46995     down.addClassOnOver("x-scroller-btn-over");
46996     up.addClassOnClick("x-scroller-btn-click");
46997     down.addClassOnClick("x-scroller-btn-click");
46998     this.adjustments = [0, -(up.getHeight() + down.getHeight())];
46999
47000     this.resizeEl = this.el;
47001     this.el = wrap; this.up = up; this.down = down;
47002 };
47003
47004 Roo.extend(Roo.ScrollPanel, Roo.ContentPanel, {
47005     increment : 100,
47006     wheelIncrement : 5,
47007     scrollUp : function(){
47008         this.resizeEl.scroll("up", this.increment, {callback: this.afterScroll, scope: this});
47009     },
47010
47011     scrollDown : function(){
47012         this.resizeEl.scroll("down", this.increment, {callback: this.afterScroll, scope: this});
47013     },
47014
47015     afterScroll : function(){
47016         var el = this.resizeEl;
47017         var t = el.dom.scrollTop, h = el.dom.scrollHeight, ch = el.dom.clientHeight;
47018         this.up[t == 0 ? "addClass" : "removeClass"]("x-scroller-btn-disabled");
47019         this.down[h - t <= ch ? "addClass" : "removeClass"]("x-scroller-btn-disabled");
47020     },
47021
47022     setSize : function(){
47023         Roo.ScrollPanel.superclass.setSize.apply(this, arguments);
47024         this.afterScroll();
47025     },
47026
47027     onWheel : function(e){
47028         var d = e.getWheelDelta();
47029         this.resizeEl.dom.scrollTop -= (d*this.wheelIncrement);
47030         this.afterScroll();
47031         e.stopEvent();
47032     },
47033
47034     setContent : function(content, loadScripts){
47035         this.resizeEl.update(content, loadScripts);
47036     }
47037
47038 });
47039
47040
47041
47042
47043
47044
47045
47046
47047
47048 /**
47049  * @class Roo.TreePanel
47050  * @extends Roo.ContentPanel
47051  * @constructor
47052  * Create a new TreePanel. - defaults to fit/scoll contents.
47053  * @param {String/Object} config A string to set only the panel's title, or a config object
47054  * @cfg {Roo.tree.TreePanel} tree The tree TreePanel, with config etc.
47055  */
47056 Roo.TreePanel = function(config){
47057     var el = config.el;
47058     var tree = config.tree;
47059     delete config.tree; 
47060     delete config.el; // hopefull!
47061     
47062     // wrapper for IE7 strict & safari scroll issue
47063     
47064     var treeEl = el.createChild();
47065     config.resizeEl = treeEl;
47066     
47067     
47068     
47069     Roo.TreePanel.superclass.constructor.call(this, el, config);
47070  
47071  
47072     this.tree = new Roo.tree.TreePanel(treeEl , tree);
47073     //console.log(tree);
47074     this.on('activate', function()
47075     {
47076         if (this.tree.rendered) {
47077             return;
47078         }
47079         //console.log('render tree');
47080         this.tree.render();
47081     });
47082     
47083     this.on('resize',  function (cp, w, h) {
47084             this.tree.innerCt.setWidth(w);
47085             this.tree.innerCt.setHeight(h);
47086             this.tree.innerCt.setStyle('overflow-y', 'auto');
47087     });
47088
47089         
47090     
47091 };
47092
47093 Roo.extend(Roo.TreePanel, Roo.ContentPanel, {   
47094     fitToFrame : true,
47095     autoScroll : true
47096 });
47097
47098
47099
47100
47101
47102
47103
47104
47105
47106
47107
47108 /*
47109  * Based on:
47110  * Ext JS Library 1.1.1
47111  * Copyright(c) 2006-2007, Ext JS, LLC.
47112  *
47113  * Originally Released Under LGPL - original licence link has changed is not relivant.
47114  *
47115  * Fork - LGPL
47116  * <script type="text/javascript">
47117  */
47118  
47119
47120 /**
47121  * @class Roo.ReaderLayout
47122  * @extends Roo.BorderLayout
47123  * This is a pre-built layout that represents a classic, 5-pane application.  It consists of a header, a primary
47124  * center region containing two nested regions (a top one for a list view and one for item preview below),
47125  * and regions on either side that can be used for navigation, application commands, informational displays, etc.
47126  * The setup and configuration work exactly the same as it does for a {@link Roo.BorderLayout} - this class simply
47127  * expedites the setup of the overall layout and regions for this common application style.
47128  * Example:
47129  <pre><code>
47130 var reader = new Roo.ReaderLayout();
47131 var CP = Roo.ContentPanel;  // shortcut for adding
47132
47133 reader.beginUpdate();
47134 reader.add("north", new CP("north", "North"));
47135 reader.add("west", new CP("west", {title: "West"}));
47136 reader.add("east", new CP("east", {title: "East"}));
47137
47138 reader.regions.listView.add(new CP("listView", "List"));
47139 reader.regions.preview.add(new CP("preview", "Preview"));
47140 reader.endUpdate();
47141 </code></pre>
47142 * @constructor
47143 * Create a new ReaderLayout
47144 * @param {Object} config Configuration options
47145 * @param {String/HTMLElement/Element} container (optional) The container this layout is bound to (defaults to
47146 * document.body if omitted)
47147 */
47148 Roo.ReaderLayout = function(config, renderTo){
47149     var c = config || {size:{}};
47150     Roo.ReaderLayout.superclass.constructor.call(this, renderTo || document.body, {
47151         north: c.north !== false ? Roo.apply({
47152             split:false,
47153             initialSize: 32,
47154             titlebar: false
47155         }, c.north) : false,
47156         west: c.west !== false ? Roo.apply({
47157             split:true,
47158             initialSize: 200,
47159             minSize: 175,
47160             maxSize: 400,
47161             titlebar: true,
47162             collapsible: true,
47163             animate: true,
47164             margins:{left:5,right:0,bottom:5,top:5},
47165             cmargins:{left:5,right:5,bottom:5,top:5}
47166         }, c.west) : false,
47167         east: c.east !== false ? Roo.apply({
47168             split:true,
47169             initialSize: 200,
47170             minSize: 175,
47171             maxSize: 400,
47172             titlebar: true,
47173             collapsible: true,
47174             animate: true,
47175             margins:{left:0,right:5,bottom:5,top:5},
47176             cmargins:{left:5,right:5,bottom:5,top:5}
47177         }, c.east) : false,
47178         center: Roo.apply({
47179             tabPosition: 'top',
47180             autoScroll:false,
47181             closeOnTab: true,
47182             titlebar:false,
47183             margins:{left:c.west!==false ? 0 : 5,right:c.east!==false ? 0 : 5,bottom:5,top:2}
47184         }, c.center)
47185     });
47186
47187     this.el.addClass('x-reader');
47188
47189     this.beginUpdate();
47190
47191     var inner = new Roo.BorderLayout(Roo.get(document.body).createChild(), {
47192         south: c.preview !== false ? Roo.apply({
47193             split:true,
47194             initialSize: 200,
47195             minSize: 100,
47196             autoScroll:true,
47197             collapsible:true,
47198             titlebar: true,
47199             cmargins:{top:5,left:0, right:0, bottom:0}
47200         }, c.preview) : false,
47201         center: Roo.apply({
47202             autoScroll:false,
47203             titlebar:false,
47204             minHeight:200
47205         }, c.listView)
47206     });
47207     this.add('center', new Roo.NestedLayoutPanel(inner,
47208             Roo.apply({title: c.mainTitle || '',tabTip:''},c.innerPanelCfg)));
47209
47210     this.endUpdate();
47211
47212     this.regions.preview = inner.getRegion('south');
47213     this.regions.listView = inner.getRegion('center');
47214 };
47215
47216 Roo.extend(Roo.ReaderLayout, Roo.BorderLayout);/*
47217  * Based on:
47218  * Ext JS Library 1.1.1
47219  * Copyright(c) 2006-2007, Ext JS, LLC.
47220  *
47221  * Originally Released Under LGPL - original licence link has changed is not relivant.
47222  *
47223  * Fork - LGPL
47224  * <script type="text/javascript">
47225  */
47226  
47227 /**
47228  * @class Roo.grid.Grid
47229  * @extends Roo.util.Observable
47230  * This class represents the primary interface of a component based grid control.
47231  * <br><br>Usage:<pre><code>
47232  var grid = new Roo.grid.Grid("my-container-id", {
47233      ds: myDataStore,
47234      cm: myColModel,
47235      selModel: mySelectionModel,
47236      autoSizeColumns: true,
47237      monitorWindowResize: false,
47238      trackMouseOver: true
47239  });
47240  // set any options
47241  grid.render();
47242  * </code></pre>
47243  * <b>Common Problems:</b><br/>
47244  * - Grid does not resize properly when going smaller: Setting overflow hidden on the container
47245  * element will correct this<br/>
47246  * - If you get el.style[camel]= NaNpx or -2px or something related, be certain you have given your container element
47247  * dimensions. The grid adapts to your container's size, if your container has no size defined then the results
47248  * are unpredictable.<br/>
47249  * - Do not render the grid into an element with display:none. Try using visibility:hidden. Otherwise there is no way for the
47250  * grid to calculate dimensions/offsets.<br/>
47251   * @constructor
47252  * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered -
47253  * The container MUST have some type of size defined for the grid to fill. The container will be
47254  * automatically set to position relative if it isn't already.
47255  * @param {Object} config A config object that sets properties on this grid.
47256  */
47257 Roo.grid.Grid = function(container, config){
47258         // initialize the container
47259         this.container = Roo.get(container);
47260         this.container.update("");
47261         this.container.setStyle("overflow", "hidden");
47262     this.container.addClass('x-grid-container');
47263
47264     this.id = this.container.id;
47265
47266     Roo.apply(this, config);
47267     // check and correct shorthanded configs
47268     if(this.ds){
47269         this.dataSource = this.ds;
47270         delete this.ds;
47271     }
47272     if(this.cm){
47273         this.colModel = this.cm;
47274         delete this.cm;
47275     }
47276     if(this.sm){
47277         this.selModel = this.sm;
47278         delete this.sm;
47279     }
47280
47281     if (this.selModel) {
47282         this.selModel = Roo.factory(this.selModel, Roo.grid);
47283         this.sm = this.selModel;
47284         this.sm.xmodule = this.xmodule || false;
47285     }
47286     if (typeof(this.colModel.config) == 'undefined') {
47287         this.colModel = new Roo.grid.ColumnModel(this.colModel);
47288         this.cm = this.colModel;
47289         this.cm.xmodule = this.xmodule || false;
47290     }
47291     if (this.dataSource) {
47292         this.dataSource= Roo.factory(this.dataSource, Roo.data);
47293         this.ds = this.dataSource;
47294         this.ds.xmodule = this.xmodule || false;
47295          
47296     }
47297     
47298     
47299     
47300     if(this.width){
47301         this.container.setWidth(this.width);
47302     }
47303
47304     if(this.height){
47305         this.container.setHeight(this.height);
47306     }
47307     /** @private */
47308         this.addEvents({
47309         // raw events
47310         /**
47311          * @event click
47312          * The raw click event for the entire grid.
47313          * @param {Roo.EventObject} e
47314          */
47315         "click" : true,
47316         /**
47317          * @event dblclick
47318          * The raw dblclick event for the entire grid.
47319          * @param {Roo.EventObject} e
47320          */
47321         "dblclick" : true,
47322         /**
47323          * @event contextmenu
47324          * The raw contextmenu event for the entire grid.
47325          * @param {Roo.EventObject} e
47326          */
47327         "contextmenu" : true,
47328         /**
47329          * @event mousedown
47330          * The raw mousedown event for the entire grid.
47331          * @param {Roo.EventObject} e
47332          */
47333         "mousedown" : true,
47334         /**
47335          * @event mouseup
47336          * The raw mouseup event for the entire grid.
47337          * @param {Roo.EventObject} e
47338          */
47339         "mouseup" : true,
47340         /**
47341          * @event mouseover
47342          * The raw mouseover event for the entire grid.
47343          * @param {Roo.EventObject} e
47344          */
47345         "mouseover" : true,
47346         /**
47347          * @event mouseout
47348          * The raw mouseout event for the entire grid.
47349          * @param {Roo.EventObject} e
47350          */
47351         "mouseout" : true,
47352         /**
47353          * @event keypress
47354          * The raw keypress event for the entire grid.
47355          * @param {Roo.EventObject} e
47356          */
47357         "keypress" : true,
47358         /**
47359          * @event keydown
47360          * The raw keydown event for the entire grid.
47361          * @param {Roo.EventObject} e
47362          */
47363         "keydown" : true,
47364
47365         // custom events
47366
47367         /**
47368          * @event cellclick
47369          * Fires when a cell is clicked
47370          * @param {Grid} this
47371          * @param {Number} rowIndex
47372          * @param {Number} columnIndex
47373          * @param {Roo.EventObject} e
47374          */
47375         "cellclick" : true,
47376         /**
47377          * @event celldblclick
47378          * Fires when a cell is double clicked
47379          * @param {Grid} this
47380          * @param {Number} rowIndex
47381          * @param {Number} columnIndex
47382          * @param {Roo.EventObject} e
47383          */
47384         "celldblclick" : true,
47385         /**
47386          * @event rowclick
47387          * Fires when a row is clicked
47388          * @param {Grid} this
47389          * @param {Number} rowIndex
47390          * @param {Roo.EventObject} e
47391          */
47392         "rowclick" : true,
47393         /**
47394          * @event rowdblclick
47395          * Fires when a row is double clicked
47396          * @param {Grid} this
47397          * @param {Number} rowIndex
47398          * @param {Roo.EventObject} e
47399          */
47400         "rowdblclick" : true,
47401         /**
47402          * @event headerclick
47403          * Fires when a header is clicked
47404          * @param {Grid} this
47405          * @param {Number} columnIndex
47406          * @param {Roo.EventObject} e
47407          */
47408         "headerclick" : true,
47409         /**
47410          * @event headerdblclick
47411          * Fires when a header cell is double clicked
47412          * @param {Grid} this
47413          * @param {Number} columnIndex
47414          * @param {Roo.EventObject} e
47415          */
47416         "headerdblclick" : true,
47417         /**
47418          * @event rowcontextmenu
47419          * Fires when a row is right clicked
47420          * @param {Grid} this
47421          * @param {Number} rowIndex
47422          * @param {Roo.EventObject} e
47423          */
47424         "rowcontextmenu" : true,
47425         /**
47426          * @event cellcontextmenu
47427          * Fires when a cell is right clicked
47428          * @param {Grid} this
47429          * @param {Number} rowIndex
47430          * @param {Number} cellIndex
47431          * @param {Roo.EventObject} e
47432          */
47433          "cellcontextmenu" : true,
47434         /**
47435          * @event headercontextmenu
47436          * Fires when a header is right clicked
47437          * @param {Grid} this
47438          * @param {Number} columnIndex
47439          * @param {Roo.EventObject} e
47440          */
47441         "headercontextmenu" : true,
47442         /**
47443          * @event bodyscroll
47444          * Fires when the body element is scrolled
47445          * @param {Number} scrollLeft
47446          * @param {Number} scrollTop
47447          */
47448         "bodyscroll" : true,
47449         /**
47450          * @event columnresize
47451          * Fires when the user resizes a column
47452          * @param {Number} columnIndex
47453          * @param {Number} newSize
47454          */
47455         "columnresize" : true,
47456         /**
47457          * @event columnmove
47458          * Fires when the user moves a column
47459          * @param {Number} oldIndex
47460          * @param {Number} newIndex
47461          */
47462         "columnmove" : true,
47463         /**
47464          * @event startdrag
47465          * Fires when row(s) start being dragged
47466          * @param {Grid} this
47467          * @param {Roo.GridDD} dd The drag drop object
47468          * @param {event} e The raw browser event
47469          */
47470         "startdrag" : true,
47471         /**
47472          * @event enddrag
47473          * Fires when a drag operation is complete
47474          * @param {Grid} this
47475          * @param {Roo.GridDD} dd The drag drop object
47476          * @param {event} e The raw browser event
47477          */
47478         "enddrag" : true,
47479         /**
47480          * @event dragdrop
47481          * Fires when dragged row(s) are dropped on a valid DD target
47482          * @param {Grid} this
47483          * @param {Roo.GridDD} dd The drag drop object
47484          * @param {String} targetId The target drag drop object
47485          * @param {event} e The raw browser event
47486          */
47487         "dragdrop" : true,
47488         /**
47489          * @event dragover
47490          * Fires while row(s) are being dragged. "targetId" is the id of the Yahoo.util.DD object the selected rows are being dragged over.
47491          * @param {Grid} this
47492          * @param {Roo.GridDD} dd The drag drop object
47493          * @param {String} targetId The target drag drop object
47494          * @param {event} e The raw browser event
47495          */
47496         "dragover" : true,
47497         /**
47498          * @event dragenter
47499          *  Fires when the dragged row(s) first cross another DD target while being dragged
47500          * @param {Grid} this
47501          * @param {Roo.GridDD} dd The drag drop object
47502          * @param {String} targetId The target drag drop object
47503          * @param {event} e The raw browser event
47504          */
47505         "dragenter" : true,
47506         /**
47507          * @event dragout
47508          * Fires when the dragged row(s) leave another DD target while being dragged
47509          * @param {Grid} this
47510          * @param {Roo.GridDD} dd The drag drop object
47511          * @param {String} targetId The target drag drop object
47512          * @param {event} e The raw browser event
47513          */
47514         "dragout" : true,
47515         /**
47516          * @event rowclass
47517          * Fires when a row is rendered, so you can change add a style to it.
47518          * @param {GridView} gridview   The grid view
47519          * @param {Object} rowcfg   contains record  rowIndex and rowClass - set rowClass to add a style.
47520          */
47521         'rowclass' : true,
47522
47523         /**
47524          * @event render
47525          * Fires when the grid is rendered
47526          * @param {Grid} grid
47527          */
47528         'render' : true
47529     });
47530
47531     Roo.grid.Grid.superclass.constructor.call(this);
47532 };
47533 Roo.extend(Roo.grid.Grid, Roo.util.Observable, {
47534     
47535     /**
47536      * @cfg {String} ddGroup - drag drop group.
47537      */
47538
47539     /**
47540      * @cfg {Number} minColumnWidth The minimum width a column can be resized to. Default is 25.
47541      */
47542     minColumnWidth : 25,
47543
47544     /**
47545      * @cfg {Boolean} autoSizeColumns True to automatically resize the columns to fit their content
47546      * <b>on initial render.</b> It is more efficient to explicitly size the columns
47547      * through the ColumnModel's {@link Roo.grid.ColumnModel#width} config option.  Default is false.
47548      */
47549     autoSizeColumns : false,
47550
47551     /**
47552      * @cfg {Boolean} autoSizeHeaders True to measure headers with column data when auto sizing columns. Default is true.
47553      */
47554     autoSizeHeaders : true,
47555
47556     /**
47557      * @cfg {Boolean} monitorWindowResize True to autoSize the grid when the window resizes. Default is true.
47558      */
47559     monitorWindowResize : true,
47560
47561     /**
47562      * @cfg {Boolean} maxRowsToMeasure If autoSizeColumns is on, maxRowsToMeasure can be used to limit the number of
47563      * rows measured to get a columns size. Default is 0 (all rows).
47564      */
47565     maxRowsToMeasure : 0,
47566
47567     /**
47568      * @cfg {Boolean} trackMouseOver True to highlight rows when the mouse is over. Default is true.
47569      */
47570     trackMouseOver : true,
47571
47572     /**
47573     * @cfg {Boolean} enableDrag  True to enable drag of rows. Default is false. (double check if this is needed?)
47574     */
47575     
47576     /**
47577     * @cfg {Boolean} enableDragDrop True to enable drag and drop of rows. Default is false.
47578     */
47579     enableDragDrop : false,
47580     
47581     /**
47582     * @cfg {Boolean} enableColumnMove True to enable drag and drop reorder of columns. Default is true.
47583     */
47584     enableColumnMove : true,
47585     
47586     /**
47587     * @cfg {Boolean} enableColumnHide True to enable hiding of columns with the header context menu. Default is true.
47588     */
47589     enableColumnHide : true,
47590     
47591     /**
47592     * @cfg {Boolean} enableRowHeightSync True to manually sync row heights across locked and not locked rows. Default is false.
47593     */
47594     enableRowHeightSync : false,
47595     
47596     /**
47597     * @cfg {Boolean} stripeRows True to stripe the rows.  Default is true.
47598     */
47599     stripeRows : true,
47600     
47601     /**
47602     * @cfg {Boolean} autoHeight True to fit the height of the grid container to the height of the data. Default is false.
47603     */
47604     autoHeight : false,
47605
47606     /**
47607      * @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.
47608      */
47609     autoExpandColumn : false,
47610
47611     /**
47612     * @cfg {Number} autoExpandMin The minimum width the autoExpandColumn can have (if enabled).
47613     * Default is 50.
47614     */
47615     autoExpandMin : 50,
47616
47617     /**
47618     * @cfg {Number} autoExpandMax The maximum width the autoExpandColumn can have (if enabled). Default is 1000.
47619     */
47620     autoExpandMax : 1000,
47621
47622     /**
47623     * @cfg {Object} view The {@link Roo.grid.GridView} used by the grid. This can be set before a call to render().
47624     */
47625     view : null,
47626
47627     /**
47628     * @cfg {Object} loadMask An {@link Roo.LoadMask} config or true to mask the grid while loading. Default is false.
47629     */
47630     loadMask : false,
47631     /**
47632     * @cfg {Roo.dd.DropTarget} dragTarget An {@link Roo.dd.DragTarget} config
47633     */
47634     dropTarget: false,
47635     
47636    
47637     
47638     // private
47639     rendered : false,
47640
47641     /**
47642     * @cfg {Boolean} autoWidth True to set the grid's width to the default total width of the grid's columns instead
47643     * of a fixed width. Default is false.
47644     */
47645     /**
47646     * @cfg {Number} maxHeight Sets the maximum height of the grid - ignored if autoHeight is not on.
47647     */
47648     /**
47649      * Called once after all setup has been completed and the grid is ready to be rendered.
47650      * @return {Roo.grid.Grid} this
47651      */
47652     render : function()
47653     {
47654         var c = this.container;
47655         // try to detect autoHeight/width mode
47656         if((!c.dom.offsetHeight || c.dom.offsetHeight < 20) || c.getStyle("height") == "auto"){
47657             this.autoHeight = true;
47658         }
47659         var view = this.getView();
47660         view.init(this);
47661
47662         c.on("click", this.onClick, this);
47663         c.on("dblclick", this.onDblClick, this);
47664         c.on("contextmenu", this.onContextMenu, this);
47665         c.on("keydown", this.onKeyDown, this);
47666
47667         this.relayEvents(c, ["mousedown","mouseup","mouseover","mouseout","keypress"]);
47668
47669         this.getSelectionModel().init(this);
47670
47671         view.render();
47672
47673         if(this.loadMask){
47674             this.loadMask = new Roo.LoadMask(this.container,
47675                     Roo.apply({store:this.dataSource}, this.loadMask));
47676         }
47677         
47678         
47679         if (this.toolbar && this.toolbar.xtype) {
47680             this.toolbar.container = this.getView().getHeaderPanel(true);
47681             this.toolbar = new Roo.Toolbar(this.toolbar);
47682         }
47683         if (this.footer && this.footer.xtype) {
47684             this.footer.dataSource = this.getDataSource();
47685             this.footer.container = this.getView().getFooterPanel(true);
47686             this.footer = Roo.factory(this.footer, Roo);
47687         }
47688         if (this.dropTarget && this.dropTarget.xtype) {
47689             delete this.dropTarget.xtype;
47690             this.dropTarget =  new Ext.dd.DropTarget(this.getView().mainBody, this.dropTarget);
47691         }
47692         
47693         
47694         this.rendered = true;
47695         this.fireEvent('render', this);
47696         return this;
47697     },
47698
47699         /**
47700          * Reconfigures the grid to use a different Store and Column Model.
47701          * The View will be bound to the new objects and refreshed.
47702          * @param {Roo.data.Store} dataSource The new {@link Roo.data.Store} object
47703          * @param {Roo.grid.ColumnModel} The new {@link Roo.grid.ColumnModel} object
47704          */
47705     reconfigure : function(dataSource, colModel){
47706         if(this.loadMask){
47707             this.loadMask.destroy();
47708             this.loadMask = new Roo.LoadMask(this.container,
47709                     Roo.apply({store:dataSource}, this.loadMask));
47710         }
47711         this.view.bind(dataSource, colModel);
47712         this.dataSource = dataSource;
47713         this.colModel = colModel;
47714         this.view.refresh(true);
47715     },
47716
47717     // private
47718     onKeyDown : function(e){
47719         this.fireEvent("keydown", e);
47720     },
47721
47722     /**
47723      * Destroy this grid.
47724      * @param {Boolean} removeEl True to remove the element
47725      */
47726     destroy : function(removeEl, keepListeners){
47727         if(this.loadMask){
47728             this.loadMask.destroy();
47729         }
47730         var c = this.container;
47731         c.removeAllListeners();
47732         this.view.destroy();
47733         this.colModel.purgeListeners();
47734         if(!keepListeners){
47735             this.purgeListeners();
47736         }
47737         c.update("");
47738         if(removeEl === true){
47739             c.remove();
47740         }
47741     },
47742
47743     // private
47744     processEvent : function(name, e){
47745         this.fireEvent(name, e);
47746         var t = e.getTarget();
47747         var v = this.view;
47748         var header = v.findHeaderIndex(t);
47749         if(header !== false){
47750             this.fireEvent("header" + name, this, header, e);
47751         }else{
47752             var row = v.findRowIndex(t);
47753             var cell = v.findCellIndex(t);
47754             if(row !== false){
47755                 this.fireEvent("row" + name, this, row, e);
47756                 if(cell !== false){
47757                     this.fireEvent("cell" + name, this, row, cell, e);
47758                 }
47759             }
47760         }
47761     },
47762
47763     // private
47764     onClick : function(e){
47765         this.processEvent("click", e);
47766     },
47767
47768     // private
47769     onContextMenu : function(e, t){
47770         this.processEvent("contextmenu", e);
47771     },
47772
47773     // private
47774     onDblClick : function(e){
47775         this.processEvent("dblclick", e);
47776     },
47777
47778     // private
47779     walkCells : function(row, col, step, fn, scope){
47780         var cm = this.colModel, clen = cm.getColumnCount();
47781         var ds = this.dataSource, rlen = ds.getCount(), first = true;
47782         if(step < 0){
47783             if(col < 0){
47784                 row--;
47785                 first = false;
47786             }
47787             while(row >= 0){
47788                 if(!first){
47789                     col = clen-1;
47790                 }
47791                 first = false;
47792                 while(col >= 0){
47793                     if(fn.call(scope || this, row, col, cm) === true){
47794                         return [row, col];
47795                     }
47796                     col--;
47797                 }
47798                 row--;
47799             }
47800         } else {
47801             if(col >= clen){
47802                 row++;
47803                 first = false;
47804             }
47805             while(row < rlen){
47806                 if(!first){
47807                     col = 0;
47808                 }
47809                 first = false;
47810                 while(col < clen){
47811                     if(fn.call(scope || this, row, col, cm) === true){
47812                         return [row, col];
47813                     }
47814                     col++;
47815                 }
47816                 row++;
47817             }
47818         }
47819         return null;
47820     },
47821
47822     // private
47823     getSelections : function(){
47824         return this.selModel.getSelections();
47825     },
47826
47827     /**
47828      * Causes the grid to manually recalculate its dimensions. Generally this is done automatically,
47829      * but if manual update is required this method will initiate it.
47830      */
47831     autoSize : function(){
47832         if(this.rendered){
47833             this.view.layout();
47834             if(this.view.adjustForScroll){
47835                 this.view.adjustForScroll();
47836             }
47837         }
47838     },
47839
47840     /**
47841      * Returns the grid's underlying element.
47842      * @return {Element} The element
47843      */
47844     getGridEl : function(){
47845         return this.container;
47846     },
47847
47848     // private for compatibility, overridden by editor grid
47849     stopEditing : function(){},
47850
47851     /**
47852      * Returns the grid's SelectionModel.
47853      * @return {SelectionModel}
47854      */
47855     getSelectionModel : function(){
47856         if(!this.selModel){
47857             this.selModel = new Roo.grid.RowSelectionModel();
47858         }
47859         return this.selModel;
47860     },
47861
47862     /**
47863      * Returns the grid's DataSource.
47864      * @return {DataSource}
47865      */
47866     getDataSource : function(){
47867         return this.dataSource;
47868     },
47869
47870     /**
47871      * Returns the grid's ColumnModel.
47872      * @return {ColumnModel}
47873      */
47874     getColumnModel : function(){
47875         return this.colModel;
47876     },
47877
47878     /**
47879      * Returns the grid's GridView object.
47880      * @return {GridView}
47881      */
47882     getView : function(){
47883         if(!this.view){
47884             this.view = new Roo.grid.GridView(this.viewConfig);
47885         }
47886         return this.view;
47887     },
47888     /**
47889      * Called to get grid's drag proxy text, by default returns this.ddText.
47890      * @return {String}
47891      */
47892     getDragDropText : function(){
47893         var count = this.selModel.getCount();
47894         return String.format(this.ddText, count, count == 1 ? '' : 's');
47895     }
47896 });
47897 /**
47898  * Configures the text is the drag proxy (defaults to "%0 selected row(s)").
47899  * %0 is replaced with the number of selected rows.
47900  * @type String
47901  */
47902 Roo.grid.Grid.prototype.ddText = "{0} selected row{1}";/*
47903  * Based on:
47904  * Ext JS Library 1.1.1
47905  * Copyright(c) 2006-2007, Ext JS, LLC.
47906  *
47907  * Originally Released Under LGPL - original licence link has changed is not relivant.
47908  *
47909  * Fork - LGPL
47910  * <script type="text/javascript">
47911  */
47912  
47913 Roo.grid.AbstractGridView = function(){
47914         this.grid = null;
47915         
47916         this.events = {
47917             "beforerowremoved" : true,
47918             "beforerowsinserted" : true,
47919             "beforerefresh" : true,
47920             "rowremoved" : true,
47921             "rowsinserted" : true,
47922             "rowupdated" : true,
47923             "refresh" : true
47924         };
47925     Roo.grid.AbstractGridView.superclass.constructor.call(this);
47926 };
47927
47928 Roo.extend(Roo.grid.AbstractGridView, Roo.util.Observable, {
47929     rowClass : "x-grid-row",
47930     cellClass : "x-grid-cell",
47931     tdClass : "x-grid-td",
47932     hdClass : "x-grid-hd",
47933     splitClass : "x-grid-hd-split",
47934     
47935         init: function(grid){
47936         this.grid = grid;
47937                 var cid = this.grid.getGridEl().id;
47938         this.colSelector = "#" + cid + " ." + this.cellClass + "-";
47939         this.tdSelector = "#" + cid + " ." + this.tdClass + "-";
47940         this.hdSelector = "#" + cid + " ." + this.hdClass + "-";
47941         this.splitSelector = "#" + cid + " ." + this.splitClass + "-";
47942         },
47943         
47944         getColumnRenderers : function(){
47945         var renderers = [];
47946         var cm = this.grid.colModel;
47947         var colCount = cm.getColumnCount();
47948         for(var i = 0; i < colCount; i++){
47949             renderers[i] = cm.getRenderer(i);
47950         }
47951         return renderers;
47952     },
47953     
47954     getColumnIds : function(){
47955         var ids = [];
47956         var cm = this.grid.colModel;
47957         var colCount = cm.getColumnCount();
47958         for(var i = 0; i < colCount; i++){
47959             ids[i] = cm.getColumnId(i);
47960         }
47961         return ids;
47962     },
47963     
47964     getDataIndexes : function(){
47965         if(!this.indexMap){
47966             this.indexMap = this.buildIndexMap();
47967         }
47968         return this.indexMap.colToData;
47969     },
47970     
47971     getColumnIndexByDataIndex : function(dataIndex){
47972         if(!this.indexMap){
47973             this.indexMap = this.buildIndexMap();
47974         }
47975         return this.indexMap.dataToCol[dataIndex];
47976     },
47977     
47978     /**
47979      * Set a css style for a column dynamically. 
47980      * @param {Number} colIndex The index of the column
47981      * @param {String} name The css property name
47982      * @param {String} value The css value
47983      */
47984     setCSSStyle : function(colIndex, name, value){
47985         var selector = "#" + this.grid.id + " .x-grid-col-" + colIndex;
47986         Roo.util.CSS.updateRule(selector, name, value);
47987     },
47988     
47989     generateRules : function(cm){
47990         var ruleBuf = [], rulesId = this.grid.id + '-cssrules';
47991         Roo.util.CSS.removeStyleSheet(rulesId);
47992         for(var i = 0, len = cm.getColumnCount(); i < len; i++){
47993             var cid = cm.getColumnId(i);
47994             ruleBuf.push(this.colSelector, cid, " {\n", cm.config[i].css, "}\n",
47995                          this.tdSelector, cid, " {\n}\n",
47996                          this.hdSelector, cid, " {\n}\n",
47997                          this.splitSelector, cid, " {\n}\n");
47998         }
47999         return Roo.util.CSS.createStyleSheet(ruleBuf.join(""), rulesId);
48000     }
48001 });/*
48002  * Based on:
48003  * Ext JS Library 1.1.1
48004  * Copyright(c) 2006-2007, Ext JS, LLC.
48005  *
48006  * Originally Released Under LGPL - original licence link has changed is not relivant.
48007  *
48008  * Fork - LGPL
48009  * <script type="text/javascript">
48010  */
48011
48012 // private
48013 // This is a support class used internally by the Grid components
48014 Roo.grid.HeaderDragZone = function(grid, hd, hd2){
48015     this.grid = grid;
48016     this.view = grid.getView();
48017     this.ddGroup = "gridHeader" + this.grid.getGridEl().id;
48018     Roo.grid.HeaderDragZone.superclass.constructor.call(this, hd);
48019     if(hd2){
48020         this.setHandleElId(Roo.id(hd));
48021         this.setOuterHandleElId(Roo.id(hd2));
48022     }
48023     this.scroll = false;
48024 };
48025 Roo.extend(Roo.grid.HeaderDragZone, Roo.dd.DragZone, {
48026     maxDragWidth: 120,
48027     getDragData : function(e){
48028         var t = Roo.lib.Event.getTarget(e);
48029         var h = this.view.findHeaderCell(t);
48030         if(h){
48031             return {ddel: h.firstChild, header:h};
48032         }
48033         return false;
48034     },
48035
48036     onInitDrag : function(e){
48037         this.view.headersDisabled = true;
48038         var clone = this.dragData.ddel.cloneNode(true);
48039         clone.id = Roo.id();
48040         clone.style.width = Math.min(this.dragData.header.offsetWidth,this.maxDragWidth) + "px";
48041         this.proxy.update(clone);
48042         return true;
48043     },
48044
48045     afterValidDrop : function(){
48046         var v = this.view;
48047         setTimeout(function(){
48048             v.headersDisabled = false;
48049         }, 50);
48050     },
48051
48052     afterInvalidDrop : function(){
48053         var v = this.view;
48054         setTimeout(function(){
48055             v.headersDisabled = false;
48056         }, 50);
48057     }
48058 });
48059 /*
48060  * Based on:
48061  * Ext JS Library 1.1.1
48062  * Copyright(c) 2006-2007, Ext JS, LLC.
48063  *
48064  * Originally Released Under LGPL - original licence link has changed is not relivant.
48065  *
48066  * Fork - LGPL
48067  * <script type="text/javascript">
48068  */
48069 // private
48070 // This is a support class used internally by the Grid components
48071 Roo.grid.HeaderDropZone = function(grid, hd, hd2){
48072     this.grid = grid;
48073     this.view = grid.getView();
48074     // split the proxies so they don't interfere with mouse events
48075     this.proxyTop = Roo.DomHelper.append(document.body, {
48076         cls:"col-move-top", html:"&#160;"
48077     }, true);
48078     this.proxyBottom = Roo.DomHelper.append(document.body, {
48079         cls:"col-move-bottom", html:"&#160;"
48080     }, true);
48081     this.proxyTop.hide = this.proxyBottom.hide = function(){
48082         this.setLeftTop(-100,-100);
48083         this.setStyle("visibility", "hidden");
48084     };
48085     this.ddGroup = "gridHeader" + this.grid.getGridEl().id;
48086     // temporarily disabled
48087     //Roo.dd.ScrollManager.register(this.view.scroller.dom);
48088     Roo.grid.HeaderDropZone.superclass.constructor.call(this, grid.getGridEl().dom);
48089 };
48090 Roo.extend(Roo.grid.HeaderDropZone, Roo.dd.DropZone, {
48091     proxyOffsets : [-4, -9],
48092     fly: Roo.Element.fly,
48093
48094     getTargetFromEvent : function(e){
48095         var t = Roo.lib.Event.getTarget(e);
48096         var cindex = this.view.findCellIndex(t);
48097         if(cindex !== false){
48098             return this.view.getHeaderCell(cindex);
48099         }
48100         return null;
48101     },
48102
48103     nextVisible : function(h){
48104         var v = this.view, cm = this.grid.colModel;
48105         h = h.nextSibling;
48106         while(h){
48107             if(!cm.isHidden(v.getCellIndex(h))){
48108                 return h;
48109             }
48110             h = h.nextSibling;
48111         }
48112         return null;
48113     },
48114
48115     prevVisible : function(h){
48116         var v = this.view, cm = this.grid.colModel;
48117         h = h.prevSibling;
48118         while(h){
48119             if(!cm.isHidden(v.getCellIndex(h))){
48120                 return h;
48121             }
48122             h = h.prevSibling;
48123         }
48124         return null;
48125     },
48126
48127     positionIndicator : function(h, n, e){
48128         var x = Roo.lib.Event.getPageX(e);
48129         var r = Roo.lib.Dom.getRegion(n.firstChild);
48130         var px, pt, py = r.top + this.proxyOffsets[1];
48131         if((r.right - x) <= (r.right-r.left)/2){
48132             px = r.right+this.view.borderWidth;
48133             pt = "after";
48134         }else{
48135             px = r.left;
48136             pt = "before";
48137         }
48138         var oldIndex = this.view.getCellIndex(h);
48139         var newIndex = this.view.getCellIndex(n);
48140
48141         if(this.grid.colModel.isFixed(newIndex)){
48142             return false;
48143         }
48144
48145         var locked = this.grid.colModel.isLocked(newIndex);
48146
48147         if(pt == "after"){
48148             newIndex++;
48149         }
48150         if(oldIndex < newIndex){
48151             newIndex--;
48152         }
48153         if(oldIndex == newIndex && (locked == this.grid.colModel.isLocked(oldIndex))){
48154             return false;
48155         }
48156         px +=  this.proxyOffsets[0];
48157         this.proxyTop.setLeftTop(px, py);
48158         this.proxyTop.show();
48159         if(!this.bottomOffset){
48160             this.bottomOffset = this.view.mainHd.getHeight();
48161         }
48162         this.proxyBottom.setLeftTop(px, py+this.proxyTop.dom.offsetHeight+this.bottomOffset);
48163         this.proxyBottom.show();
48164         return pt;
48165     },
48166
48167     onNodeEnter : function(n, dd, e, data){
48168         if(data.header != n){
48169             this.positionIndicator(data.header, n, e);
48170         }
48171     },
48172
48173     onNodeOver : function(n, dd, e, data){
48174         var result = false;
48175         if(data.header != n){
48176             result = this.positionIndicator(data.header, n, e);
48177         }
48178         if(!result){
48179             this.proxyTop.hide();
48180             this.proxyBottom.hide();
48181         }
48182         return result ? this.dropAllowed : this.dropNotAllowed;
48183     },
48184
48185     onNodeOut : function(n, dd, e, data){
48186         this.proxyTop.hide();
48187         this.proxyBottom.hide();
48188     },
48189
48190     onNodeDrop : function(n, dd, e, data){
48191         var h = data.header;
48192         if(h != n){
48193             var cm = this.grid.colModel;
48194             var x = Roo.lib.Event.getPageX(e);
48195             var r = Roo.lib.Dom.getRegion(n.firstChild);
48196             var pt = (r.right - x) <= ((r.right-r.left)/2) ? "after" : "before";
48197             var oldIndex = this.view.getCellIndex(h);
48198             var newIndex = this.view.getCellIndex(n);
48199             var locked = cm.isLocked(newIndex);
48200             if(pt == "after"){
48201                 newIndex++;
48202             }
48203             if(oldIndex < newIndex){
48204                 newIndex--;
48205             }
48206             if(oldIndex == newIndex && (locked == cm.isLocked(oldIndex))){
48207                 return false;
48208             }
48209             cm.setLocked(oldIndex, locked, true);
48210             cm.moveColumn(oldIndex, newIndex);
48211             this.grid.fireEvent("columnmove", oldIndex, newIndex);
48212             return true;
48213         }
48214         return false;
48215     }
48216 });
48217 /*
48218  * Based on:
48219  * Ext JS Library 1.1.1
48220  * Copyright(c) 2006-2007, Ext JS, LLC.
48221  *
48222  * Originally Released Under LGPL - original licence link has changed is not relivant.
48223  *
48224  * Fork - LGPL
48225  * <script type="text/javascript">
48226  */
48227   
48228 /**
48229  * @class Roo.grid.GridView
48230  * @extends Roo.util.Observable
48231  *
48232  * @constructor
48233  * @param {Object} config
48234  */
48235 Roo.grid.GridView = function(config){
48236     Roo.grid.GridView.superclass.constructor.call(this);
48237     this.el = null;
48238
48239     Roo.apply(this, config);
48240 };
48241
48242 Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
48243
48244     /**
48245      * Override this function to apply custom css classes to rows during rendering
48246      * @param {Record} record The record
48247      * @param {Number} index
48248      * @method getRowClass
48249      */
48250     rowClass : "x-grid-row",
48251
48252     cellClass : "x-grid-col",
48253
48254     tdClass : "x-grid-td",
48255
48256     hdClass : "x-grid-hd",
48257
48258     splitClass : "x-grid-split",
48259
48260     sortClasses : ["sort-asc", "sort-desc"],
48261
48262     enableMoveAnim : false,
48263
48264     hlColor: "C3DAF9",
48265
48266     dh : Roo.DomHelper,
48267
48268     fly : Roo.Element.fly,
48269
48270     css : Roo.util.CSS,
48271
48272     borderWidth: 1,
48273
48274     splitOffset: 3,
48275
48276     scrollIncrement : 22,
48277
48278     cellRE: /(?:.*?)x-grid-(?:hd|cell|csplit)-(?:[\d]+)-([\d]+)(?:.*?)/,
48279
48280     findRE: /\s?(?:x-grid-hd|x-grid-col|x-grid-csplit)\s/,
48281
48282     bind : function(ds, cm){
48283         if(this.ds){
48284             this.ds.un("load", this.onLoad, this);
48285             this.ds.un("datachanged", this.onDataChange, this);
48286             this.ds.un("add", this.onAdd, this);
48287             this.ds.un("remove", this.onRemove, this);
48288             this.ds.un("update", this.onUpdate, this);
48289             this.ds.un("clear", this.onClear, this);
48290         }
48291         if(ds){
48292             ds.on("load", this.onLoad, this);
48293             ds.on("datachanged", this.onDataChange, this);
48294             ds.on("add", this.onAdd, this);
48295             ds.on("remove", this.onRemove, this);
48296             ds.on("update", this.onUpdate, this);
48297             ds.on("clear", this.onClear, this);
48298         }
48299         this.ds = ds;
48300
48301         if(this.cm){
48302             this.cm.un("widthchange", this.onColWidthChange, this);
48303             this.cm.un("headerchange", this.onHeaderChange, this);
48304             this.cm.un("hiddenchange", this.onHiddenChange, this);
48305             this.cm.un("columnmoved", this.onColumnMove, this);
48306             this.cm.un("columnlockchange", this.onColumnLock, this);
48307         }
48308         if(cm){
48309             this.generateRules(cm);
48310             cm.on("widthchange", this.onColWidthChange, this);
48311             cm.on("headerchange", this.onHeaderChange, this);
48312             cm.on("hiddenchange", this.onHiddenChange, this);
48313             cm.on("columnmoved", this.onColumnMove, this);
48314             cm.on("columnlockchange", this.onColumnLock, this);
48315         }
48316         this.cm = cm;
48317     },
48318
48319     init: function(grid){
48320         Roo.grid.GridView.superclass.init.call(this, grid);
48321
48322         this.bind(grid.dataSource, grid.colModel);
48323
48324         grid.on("headerclick", this.handleHeaderClick, this);
48325
48326         if(grid.trackMouseOver){
48327             grid.on("mouseover", this.onRowOver, this);
48328             grid.on("mouseout", this.onRowOut, this);
48329         }
48330         grid.cancelTextSelection = function(){};
48331         this.gridId = grid.id;
48332
48333         var tpls = this.templates || {};
48334
48335         if(!tpls.master){
48336             tpls.master = new Roo.Template(
48337                '<div class="x-grid" hidefocus="true">',
48338                 '<a href="#" class="x-grid-focus" tabIndex="-1"></a>',
48339                   '<div class="x-grid-topbar"></div>',
48340                   '<div class="x-grid-scroller"><div></div></div>',
48341                   '<div class="x-grid-locked">',
48342                       '<div class="x-grid-header">{lockedHeader}</div>',
48343                       '<div class="x-grid-body">{lockedBody}</div>',
48344                   "</div>",
48345                   '<div class="x-grid-viewport">',
48346                       '<div class="x-grid-header">{header}</div>',
48347                       '<div class="x-grid-body">{body}</div>',
48348                   "</div>",
48349                   '<div class="x-grid-bottombar"></div>',
48350                  
48351                   '<div class="x-grid-resize-proxy">&#160;</div>',
48352                "</div>"
48353             );
48354             tpls.master.disableformats = true;
48355         }
48356
48357         if(!tpls.header){
48358             tpls.header = new Roo.Template(
48359                '<table border="0" cellspacing="0" cellpadding="0">',
48360                '<tbody><tr class="x-grid-hd-row">{cells}</tr></tbody>',
48361                "</table>{splits}"
48362             );
48363             tpls.header.disableformats = true;
48364         }
48365         tpls.header.compile();
48366
48367         if(!tpls.hcell){
48368             tpls.hcell = new Roo.Template(
48369                 '<td class="x-grid-hd x-grid-td-{id} {cellId}"><div title="{title}" class="x-grid-hd-inner x-grid-hd-{id}">',
48370                 '<div class="x-grid-hd-text" unselectable="on">{value}<img class="x-grid-sort-icon" src="', Roo.BLANK_IMAGE_URL, '" /></div>',
48371                 "</div></td>"
48372              );
48373              tpls.hcell.disableFormats = true;
48374         }
48375         tpls.hcell.compile();
48376
48377         if(!tpls.hsplit){
48378             tpls.hsplit = new Roo.Template('<div class="x-grid-split {splitId} x-grid-split-{id}" style="{style}" unselectable="on">&#160;</div>');
48379             tpls.hsplit.disableFormats = true;
48380         }
48381         tpls.hsplit.compile();
48382
48383         if(!tpls.body){
48384             tpls.body = new Roo.Template(
48385                '<table border="0" cellspacing="0" cellpadding="0">',
48386                "<tbody>{rows}</tbody>",
48387                "</table>"
48388             );
48389             tpls.body.disableFormats = true;
48390         }
48391         tpls.body.compile();
48392
48393         if(!tpls.row){
48394             tpls.row = new Roo.Template('<tr class="x-grid-row {alt}">{cells}</tr>');
48395             tpls.row.disableFormats = true;
48396         }
48397         tpls.row.compile();
48398
48399         if(!tpls.cell){
48400             tpls.cell = new Roo.Template(
48401                 '<td class="x-grid-col x-grid-td-{id} {cellId} {css}" tabIndex="0">',
48402                 '<div class="x-grid-col-{id} x-grid-cell-inner"><div class="x-grid-cell-text" unselectable="on" {attr}>{value}</div></div>',
48403                 "</td>"
48404             );
48405             tpls.cell.disableFormats = true;
48406         }
48407         tpls.cell.compile();
48408
48409         this.templates = tpls;
48410     },
48411
48412     // remap these for backwards compat
48413     onColWidthChange : function(){
48414         this.updateColumns.apply(this, arguments);
48415     },
48416     onHeaderChange : function(){
48417         this.updateHeaders.apply(this, arguments);
48418     }, 
48419     onHiddenChange : function(){
48420         this.handleHiddenChange.apply(this, arguments);
48421     },
48422     onColumnMove : function(){
48423         this.handleColumnMove.apply(this, arguments);
48424     },
48425     onColumnLock : function(){
48426         this.handleLockChange.apply(this, arguments);
48427     },
48428
48429     onDataChange : function(){
48430         this.refresh();
48431         this.updateHeaderSortState();
48432     },
48433
48434     onClear : function(){
48435         this.refresh();
48436     },
48437
48438     onUpdate : function(ds, record){
48439         this.refreshRow(record);
48440     },
48441
48442     refreshRow : function(record){
48443         var ds = this.ds, index;
48444         if(typeof record == 'number'){
48445             index = record;
48446             record = ds.getAt(index);
48447         }else{
48448             index = ds.indexOf(record);
48449         }
48450         this.insertRows(ds, index, index, true);
48451         this.onRemove(ds, record, index+1, true);
48452         this.syncRowHeights(index, index);
48453         this.layout();
48454         this.fireEvent("rowupdated", this, index, record);
48455     },
48456
48457     onAdd : function(ds, records, index){
48458         this.insertRows(ds, index, index + (records.length-1));
48459     },
48460
48461     onRemove : function(ds, record, index, isUpdate){
48462         if(isUpdate !== true){
48463             this.fireEvent("beforerowremoved", this, index, record);
48464         }
48465         var bt = this.getBodyTable(), lt = this.getLockedTable();
48466         if(bt.rows[index]){
48467             bt.firstChild.removeChild(bt.rows[index]);
48468         }
48469         if(lt.rows[index]){
48470             lt.firstChild.removeChild(lt.rows[index]);
48471         }
48472         if(isUpdate !== true){
48473             this.stripeRows(index);
48474             this.syncRowHeights(index, index);
48475             this.layout();
48476             this.fireEvent("rowremoved", this, index, record);
48477         }
48478     },
48479
48480     onLoad : function(){
48481         this.scrollToTop();
48482     },
48483
48484     /**
48485      * Scrolls the grid to the top
48486      */
48487     scrollToTop : function(){
48488         if(this.scroller){
48489             this.scroller.dom.scrollTop = 0;
48490             this.syncScroll();
48491         }
48492     },
48493
48494     /**
48495      * Gets a panel in the header of the grid that can be used for toolbars etc.
48496      * After modifying the contents of this panel a call to grid.autoSize() may be
48497      * required to register any changes in size.
48498      * @param {Boolean} doShow By default the header is hidden. Pass true to show the panel
48499      * @return Roo.Element
48500      */
48501     getHeaderPanel : function(doShow){
48502         if(doShow){
48503             this.headerPanel.show();
48504         }
48505         return this.headerPanel;
48506     },
48507
48508     /**
48509      * Gets a panel in the footer of the grid that can be used for toolbars etc.
48510      * After modifying the contents of this panel a call to grid.autoSize() may be
48511      * required to register any changes in size.
48512      * @param {Boolean} doShow By default the footer is hidden. Pass true to show the panel
48513      * @return Roo.Element
48514      */
48515     getFooterPanel : function(doShow){
48516         if(doShow){
48517             this.footerPanel.show();
48518         }
48519         return this.footerPanel;
48520     },
48521
48522     initElements : function(){
48523         var E = Roo.Element;
48524         var el = this.grid.getGridEl().dom.firstChild;
48525         var cs = el.childNodes;
48526
48527         this.el = new E(el);
48528         
48529          this.focusEl = new E(el.firstChild);
48530         this.focusEl.swallowEvent("click", true);
48531         
48532         this.headerPanel = new E(cs[1]);
48533         this.headerPanel.enableDisplayMode("block");
48534
48535         this.scroller = new E(cs[2]);
48536         this.scrollSizer = new E(this.scroller.dom.firstChild);
48537
48538         this.lockedWrap = new E(cs[3]);
48539         this.lockedHd = new E(this.lockedWrap.dom.firstChild);
48540         this.lockedBody = new E(this.lockedWrap.dom.childNodes[1]);
48541
48542         this.mainWrap = new E(cs[4]);
48543         this.mainHd = new E(this.mainWrap.dom.firstChild);
48544         this.mainBody = new E(this.mainWrap.dom.childNodes[1]);
48545
48546         this.footerPanel = new E(cs[5]);
48547         this.footerPanel.enableDisplayMode("block");
48548
48549         this.resizeProxy = new E(cs[6]);
48550
48551         this.headerSelector = String.format(
48552            '#{0} td.x-grid-hd, #{1} td.x-grid-hd',
48553            this.lockedHd.id, this.mainHd.id
48554         );
48555
48556         this.splitterSelector = String.format(
48557            '#{0} div.x-grid-split, #{1} div.x-grid-split',
48558            this.idToCssName(this.lockedHd.id), this.idToCssName(this.mainHd.id)
48559         );
48560     },
48561     idToCssName : function(s)
48562     {
48563         return s.replace(/[^a-z0-9]+/ig, '-');
48564     },
48565
48566     getHeaderCell : function(index){
48567         return Roo.DomQuery.select(this.headerSelector)[index];
48568     },
48569
48570     getHeaderCellMeasure : function(index){
48571         return this.getHeaderCell(index).firstChild;
48572     },
48573
48574     getHeaderCellText : function(index){
48575         return this.getHeaderCell(index).firstChild.firstChild;
48576     },
48577
48578     getLockedTable : function(){
48579         return this.lockedBody.dom.firstChild;
48580     },
48581
48582     getBodyTable : function(){
48583         return this.mainBody.dom.firstChild;
48584     },
48585
48586     getLockedRow : function(index){
48587         return this.getLockedTable().rows[index];
48588     },
48589
48590     getRow : function(index){
48591         return this.getBodyTable().rows[index];
48592     },
48593
48594     getRowComposite : function(index){
48595         if(!this.rowEl){
48596             this.rowEl = new Roo.CompositeElementLite();
48597         }
48598         var els = [], lrow, mrow;
48599         if(lrow = this.getLockedRow(index)){
48600             els.push(lrow);
48601         }
48602         if(mrow = this.getRow(index)){
48603             els.push(mrow);
48604         }
48605         this.rowEl.elements = els;
48606         return this.rowEl;
48607     },
48608     /**
48609      * Gets the 'td' of the cell
48610      * 
48611      * @param {Integer} rowIndex row to select
48612      * @param {Integer} colIndex column to select
48613      * 
48614      * @return {Object} 
48615      */
48616     getCell : function(rowIndex, colIndex){
48617         var locked = this.cm.getLockedCount();
48618         var source;
48619         if(colIndex < locked){
48620             source = this.lockedBody.dom.firstChild;
48621         }else{
48622             source = this.mainBody.dom.firstChild;
48623             colIndex -= locked;
48624         }
48625         return source.rows[rowIndex].childNodes[colIndex];
48626     },
48627
48628     getCellText : function(rowIndex, colIndex){
48629         return this.getCell(rowIndex, colIndex).firstChild.firstChild;
48630     },
48631
48632     getCellBox : function(cell){
48633         var b = this.fly(cell).getBox();
48634         if(Roo.isOpera){ // opera fails to report the Y
48635             b.y = cell.offsetTop + this.mainBody.getY();
48636         }
48637         return b;
48638     },
48639
48640     getCellIndex : function(cell){
48641         var id = String(cell.className).match(this.cellRE);
48642         if(id){
48643             return parseInt(id[1], 10);
48644         }
48645         return 0;
48646     },
48647
48648     findHeaderIndex : function(n){
48649         var r = Roo.fly(n).findParent("td." + this.hdClass, 6);
48650         return r ? this.getCellIndex(r) : false;
48651     },
48652
48653     findHeaderCell : function(n){
48654         var r = Roo.fly(n).findParent("td." + this.hdClass, 6);
48655         return r ? r : false;
48656     },
48657
48658     findRowIndex : function(n){
48659         if(!n){
48660             return false;
48661         }
48662         var r = Roo.fly(n).findParent("tr." + this.rowClass, 6);
48663         return r ? r.rowIndex : false;
48664     },
48665
48666     findCellIndex : function(node){
48667         var stop = this.el.dom;
48668         while(node && node != stop){
48669             if(this.findRE.test(node.className)){
48670                 return this.getCellIndex(node);
48671             }
48672             node = node.parentNode;
48673         }
48674         return false;
48675     },
48676
48677     getColumnId : function(index){
48678         return this.cm.getColumnId(index);
48679     },
48680
48681     getSplitters : function()
48682     {
48683         if(this.splitterSelector){
48684            return Roo.DomQuery.select(this.splitterSelector);
48685         }else{
48686             return null;
48687       }
48688     },
48689
48690     getSplitter : function(index){
48691         return this.getSplitters()[index];
48692     },
48693
48694     onRowOver : function(e, t){
48695         var row;
48696         if((row = this.findRowIndex(t)) !== false){
48697             this.getRowComposite(row).addClass("x-grid-row-over");
48698         }
48699     },
48700
48701     onRowOut : function(e, t){
48702         var row;
48703         if((row = this.findRowIndex(t)) !== false && row !== this.findRowIndex(e.getRelatedTarget())){
48704             this.getRowComposite(row).removeClass("x-grid-row-over");
48705         }
48706     },
48707
48708     renderHeaders : function(){
48709         var cm = this.cm;
48710         var ct = this.templates.hcell, ht = this.templates.header, st = this.templates.hsplit;
48711         var cb = [], lb = [], sb = [], lsb = [], p = {};
48712         for(var i = 0, len = cm.getColumnCount(); i < len; i++){
48713             p.cellId = "x-grid-hd-0-" + i;
48714             p.splitId = "x-grid-csplit-0-" + i;
48715             p.id = cm.getColumnId(i);
48716             p.title = cm.getColumnTooltip(i) || "";
48717             p.value = cm.getColumnHeader(i) || "";
48718             p.style = (this.grid.enableColumnResize === false || !cm.isResizable(i) || cm.isFixed(i)) ? 'cursor:default' : '';
48719             if(!cm.isLocked(i)){
48720                 cb[cb.length] = ct.apply(p);
48721                 sb[sb.length] = st.apply(p);
48722             }else{
48723                 lb[lb.length] = ct.apply(p);
48724                 lsb[lsb.length] = st.apply(p);
48725             }
48726         }
48727         return [ht.apply({cells: lb.join(""), splits:lsb.join("")}),
48728                 ht.apply({cells: cb.join(""), splits:sb.join("")})];
48729     },
48730
48731     updateHeaders : function(){
48732         var html = this.renderHeaders();
48733         this.lockedHd.update(html[0]);
48734         this.mainHd.update(html[1]);
48735     },
48736
48737     /**
48738      * Focuses the specified row.
48739      * @param {Number} row The row index
48740      */
48741     focusRow : function(row)
48742     {
48743         //Roo.log('GridView.focusRow');
48744         var x = this.scroller.dom.scrollLeft;
48745         this.focusCell(row, 0, false);
48746         this.scroller.dom.scrollLeft = x;
48747     },
48748
48749     /**
48750      * Focuses the specified cell.
48751      * @param {Number} row The row index
48752      * @param {Number} col The column index
48753      * @param {Boolean} hscroll false to disable horizontal scrolling
48754      */
48755     focusCell : function(row, col, hscroll)
48756     {
48757         //Roo.log('GridView.focusCell');
48758         var el = this.ensureVisible(row, col, hscroll);
48759         this.focusEl.alignTo(el, "tl-tl");
48760         if(Roo.isGecko){
48761             this.focusEl.focus();
48762         }else{
48763             this.focusEl.focus.defer(1, this.focusEl);
48764         }
48765     },
48766
48767     /**
48768      * Scrolls the specified cell into view
48769      * @param {Number} row The row index
48770      * @param {Number} col The column index
48771      * @param {Boolean} hscroll false to disable horizontal scrolling
48772      */
48773     ensureVisible : function(row, col, hscroll)
48774     {
48775         //Roo.log('GridView.ensureVisible,' + row + ',' + col);
48776         //return null; //disable for testing.
48777         if(typeof row != "number"){
48778             row = row.rowIndex;
48779         }
48780         if(row < 0 && row >= this.ds.getCount()){
48781             return  null;
48782         }
48783         col = (col !== undefined ? col : 0);
48784         var cm = this.grid.colModel;
48785         while(cm.isHidden(col)){
48786             col++;
48787         }
48788
48789         var el = this.getCell(row, col);
48790         if(!el){
48791             return null;
48792         }
48793         var c = this.scroller.dom;
48794
48795         var ctop = parseInt(el.offsetTop, 10);
48796         var cleft = parseInt(el.offsetLeft, 10);
48797         var cbot = ctop + el.offsetHeight;
48798         var cright = cleft + el.offsetWidth;
48799         
48800         var ch = c.clientHeight - this.mainHd.dom.offsetHeight;
48801         var stop = parseInt(c.scrollTop, 10);
48802         var sleft = parseInt(c.scrollLeft, 10);
48803         var sbot = stop + ch;
48804         var sright = sleft + c.clientWidth;
48805         /*
48806         Roo.log('GridView.ensureVisible:' +
48807                 ' ctop:' + ctop +
48808                 ' c.clientHeight:' + c.clientHeight +
48809                 ' this.mainHd.dom.offsetHeight:' + this.mainHd.dom.offsetHeight +
48810                 ' stop:' + stop +
48811                 ' cbot:' + cbot +
48812                 ' sbot:' + sbot +
48813                 ' ch:' + ch  
48814                 );
48815         */
48816         if(ctop < stop){
48817              c.scrollTop = ctop;
48818             //Roo.log("set scrolltop to ctop DISABLE?");
48819         }else if(cbot > sbot){
48820             //Roo.log("set scrolltop to cbot-ch");
48821             c.scrollTop = cbot-ch;
48822         }
48823         
48824         if(hscroll !== false){
48825             if(cleft < sleft){
48826                 c.scrollLeft = cleft;
48827             }else if(cright > sright){
48828                 c.scrollLeft = cright-c.clientWidth;
48829             }
48830         }
48831          
48832         return el;
48833     },
48834
48835     updateColumns : function(){
48836         this.grid.stopEditing();
48837         var cm = this.grid.colModel, colIds = this.getColumnIds();
48838         //var totalWidth = cm.getTotalWidth();
48839         var pos = 0;
48840         for(var i = 0, len = cm.getColumnCount(); i < len; i++){
48841             //if(cm.isHidden(i)) continue;
48842             var w = cm.getColumnWidth(i);
48843             this.css.updateRule(this.colSelector+this.idToCssName(colIds[i]), "width", (w - this.borderWidth) + "px");
48844             this.css.updateRule(this.hdSelector+this.idToCssName(colIds[i]), "width", (w - this.borderWidth) + "px");
48845         }
48846         this.updateSplitters();
48847     },
48848
48849     generateRules : function(cm){
48850         var ruleBuf = [], rulesId = this.idToCssName(this.grid.id)+ '-cssrules';
48851         Roo.util.CSS.removeStyleSheet(rulesId);
48852         for(var i = 0, len = cm.getColumnCount(); i < len; i++){
48853             var cid = cm.getColumnId(i);
48854             var align = '';
48855             if(cm.config[i].align){
48856                 align = 'text-align:'+cm.config[i].align+';';
48857             }
48858             var hidden = '';
48859             if(cm.isHidden(i)){
48860                 hidden = 'display:none;';
48861             }
48862             var width = "width:" + (cm.getColumnWidth(i) - this.borderWidth) + "px;";
48863             ruleBuf.push(
48864                     this.colSelector, cid, " {\n", cm.config[i].css, align, width, "\n}\n",
48865                     this.hdSelector, cid, " {\n", align, width, "}\n",
48866                     this.tdSelector, cid, " {\n",hidden,"\n}\n",
48867                     this.splitSelector, cid, " {\n", hidden , "\n}\n");
48868         }
48869         return Roo.util.CSS.createStyleSheet(ruleBuf.join(""), rulesId);
48870     },
48871
48872     updateSplitters : function(){
48873         var cm = this.cm, s = this.getSplitters();
48874         if(s){ // splitters not created yet
48875             var pos = 0, locked = true;
48876             for(var i = 0, len = cm.getColumnCount(); i < len; i++){
48877                 if(cm.isHidden(i)) continue;
48878                 var w = cm.getColumnWidth(i); // make sure it's a number
48879                 if(!cm.isLocked(i) && locked){
48880                     pos = 0;
48881                     locked = false;
48882                 }
48883                 pos += w;
48884                 s[i].style.left = (pos-this.splitOffset) + "px";
48885             }
48886         }
48887     },
48888
48889     handleHiddenChange : function(colModel, colIndex, hidden){
48890         if(hidden){
48891             this.hideColumn(colIndex);
48892         }else{
48893             this.unhideColumn(colIndex);
48894         }
48895     },
48896
48897     hideColumn : function(colIndex){
48898         var cid = this.getColumnId(colIndex);
48899         this.css.updateRule(this.tdSelector+this.idToCssName(cid), "display", "none");
48900         this.css.updateRule(this.splitSelector+this.idToCssName(cid), "display", "none");
48901         if(Roo.isSafari){
48902             this.updateHeaders();
48903         }
48904         this.updateSplitters();
48905         this.layout();
48906     },
48907
48908     unhideColumn : function(colIndex){
48909         var cid = this.getColumnId(colIndex);
48910         this.css.updateRule(this.tdSelector+this.idToCssName(cid), "display", "");
48911         this.css.updateRule(this.splitSelector+this.idToCssName(cid), "display", "");
48912
48913         if(Roo.isSafari){
48914             this.updateHeaders();
48915         }
48916         this.updateSplitters();
48917         this.layout();
48918     },
48919
48920     insertRows : function(dm, firstRow, lastRow, isUpdate){
48921         if(firstRow == 0 && lastRow == dm.getCount()-1){
48922             this.refresh();
48923         }else{
48924             if(!isUpdate){
48925                 this.fireEvent("beforerowsinserted", this, firstRow, lastRow);
48926             }
48927             var s = this.getScrollState();
48928             var markup = this.renderRows(firstRow, lastRow);
48929             this.bufferRows(markup[0], this.getLockedTable(), firstRow);
48930             this.bufferRows(markup[1], this.getBodyTable(), firstRow);
48931             this.restoreScroll(s);
48932             if(!isUpdate){
48933                 this.fireEvent("rowsinserted", this, firstRow, lastRow);
48934                 this.syncRowHeights(firstRow, lastRow);
48935                 this.stripeRows(firstRow);
48936                 this.layout();
48937             }
48938         }
48939     },
48940
48941     bufferRows : function(markup, target, index){
48942         var before = null, trows = target.rows, tbody = target.tBodies[0];
48943         if(index < trows.length){
48944             before = trows[index];
48945         }
48946         var b = document.createElement("div");
48947         b.innerHTML = "<table><tbody>"+markup+"</tbody></table>";
48948         var rows = b.firstChild.rows;
48949         for(var i = 0, len = rows.length; i < len; i++){
48950             if(before){
48951                 tbody.insertBefore(rows[0], before);
48952             }else{
48953                 tbody.appendChild(rows[0]);
48954             }
48955         }
48956         b.innerHTML = "";
48957         b = null;
48958     },
48959
48960     deleteRows : function(dm, firstRow, lastRow){
48961         if(dm.getRowCount()<1){
48962             this.fireEvent("beforerefresh", this);
48963             this.mainBody.update("");
48964             this.lockedBody.update("");
48965             this.fireEvent("refresh", this);
48966         }else{
48967             this.fireEvent("beforerowsdeleted", this, firstRow, lastRow);
48968             var bt = this.getBodyTable();
48969             var tbody = bt.firstChild;
48970             var rows = bt.rows;
48971             for(var rowIndex = firstRow; rowIndex <= lastRow; rowIndex++){
48972                 tbody.removeChild(rows[firstRow]);
48973             }
48974             this.stripeRows(firstRow);
48975             this.fireEvent("rowsdeleted", this, firstRow, lastRow);
48976         }
48977     },
48978
48979     updateRows : function(dataSource, firstRow, lastRow){
48980         var s = this.getScrollState();
48981         this.refresh();
48982         this.restoreScroll(s);
48983     },
48984
48985     handleSort : function(dataSource, sortColumnIndex, sortDir, noRefresh){
48986         if(!noRefresh){
48987            this.refresh();
48988         }
48989         this.updateHeaderSortState();
48990     },
48991
48992     getScrollState : function(){
48993         
48994         var sb = this.scroller.dom;
48995         return {left: sb.scrollLeft, top: sb.scrollTop};
48996     },
48997
48998     stripeRows : function(startRow){
48999         if(!this.grid.stripeRows || this.ds.getCount() < 1){
49000             return;
49001         }
49002         startRow = startRow || 0;
49003         var rows = this.getBodyTable().rows;
49004         var lrows = this.getLockedTable().rows;
49005         var cls = ' x-grid-row-alt ';
49006         for(var i = startRow, len = rows.length; i < len; i++){
49007             var row = rows[i], lrow = lrows[i];
49008             var isAlt = ((i+1) % 2 == 0);
49009             var hasAlt = (' '+row.className + ' ').indexOf(cls) != -1;
49010             if(isAlt == hasAlt){
49011                 continue;
49012             }
49013             if(isAlt){
49014                 row.className += " x-grid-row-alt";
49015             }else{
49016                 row.className = row.className.replace("x-grid-row-alt", "");
49017             }
49018             if(lrow){
49019                 lrow.className = row.className;
49020             }
49021         }
49022     },
49023
49024     restoreScroll : function(state){
49025         //Roo.log('GridView.restoreScroll');
49026         var sb = this.scroller.dom;
49027         sb.scrollLeft = state.left;
49028         sb.scrollTop = state.top;
49029         this.syncScroll();
49030     },
49031
49032     syncScroll : function(){
49033         //Roo.log('GridView.syncScroll');
49034         var sb = this.scroller.dom;
49035         var sh = this.mainHd.dom;
49036         var bs = this.mainBody.dom;
49037         var lv = this.lockedBody.dom;
49038         sh.scrollLeft = bs.scrollLeft = sb.scrollLeft;
49039         lv.scrollTop = bs.scrollTop = sb.scrollTop;
49040     },
49041
49042     handleScroll : function(e){
49043         this.syncScroll();
49044         var sb = this.scroller.dom;
49045         this.grid.fireEvent("bodyscroll", sb.scrollLeft, sb.scrollTop);
49046         e.stopEvent();
49047     },
49048
49049     handleWheel : function(e){
49050         var d = e.getWheelDelta();
49051         this.scroller.dom.scrollTop -= d*22;
49052         // set this here to prevent jumpy scrolling on large tables
49053         this.lockedBody.dom.scrollTop = this.mainBody.dom.scrollTop = this.scroller.dom.scrollTop;
49054         e.stopEvent();
49055     },
49056
49057     renderRows : function(startRow, endRow){
49058         // pull in all the crap needed to render rows
49059         var g = this.grid, cm = g.colModel, ds = g.dataSource, stripe = g.stripeRows;
49060         var colCount = cm.getColumnCount();
49061
49062         if(ds.getCount() < 1){
49063             return ["", ""];
49064         }
49065
49066         // build a map for all the columns
49067         var cs = [];
49068         for(var i = 0; i < colCount; i++){
49069             var name = cm.getDataIndex(i);
49070             cs[i] = {
49071                 name : typeof name == 'undefined' ? ds.fields.get(i).name : name,
49072                 renderer : cm.getRenderer(i),
49073                 id : cm.getColumnId(i),
49074                 locked : cm.isLocked(i)
49075             };
49076         }
49077
49078         startRow = startRow || 0;
49079         endRow = typeof endRow == "undefined"? ds.getCount()-1 : endRow;
49080
49081         // records to render
49082         var rs = ds.getRange(startRow, endRow);
49083
49084         return this.doRender(cs, rs, ds, startRow, colCount, stripe);
49085     },
49086
49087     // As much as I hate to duplicate code, this was branched because FireFox really hates
49088     // [].join("") on strings. The performance difference was substantial enough to
49089     // branch this function
49090     doRender : Roo.isGecko ?
49091             function(cs, rs, ds, startRow, colCount, stripe){
49092                 var ts = this.templates, ct = ts.cell, rt = ts.row;
49093                 // buffers
49094                 var buf = "", lbuf = "", cb, lcb, c, p = {}, rp = {}, r, rowIndex;
49095                 
49096                 var hasListener = this.grid.hasListener('rowclass');
49097                 var rowcfg = {};
49098                 for(var j = 0, len = rs.length; j < len; j++){
49099                     r = rs[j]; cb = ""; lcb = ""; rowIndex = (j+startRow);
49100                     for(var i = 0; i < colCount; i++){
49101                         c = cs[i];
49102                         p.cellId = "x-grid-cell-" + rowIndex + "-" + i;
49103                         p.id = c.id;
49104                         p.css = p.attr = "";
49105                         p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
49106                         if(p.value == undefined || p.value === "") p.value = "&#160;";
49107                         if(r.dirty && typeof r.modified[c.name] !== 'undefined'){
49108                             p.css += p.css ? ' x-grid-dirty-cell' : 'x-grid-dirty-cell';
49109                         }
49110                         var markup = ct.apply(p);
49111                         if(!c.locked){
49112                             cb+= markup;
49113                         }else{
49114                             lcb+= markup;
49115                         }
49116                     }
49117                     var alt = [];
49118                     if(stripe && ((rowIndex+1) % 2 == 0)){
49119                         alt.push("x-grid-row-alt")
49120                     }
49121                     if(r.dirty){
49122                         alt.push(  " x-grid-dirty-row");
49123                     }
49124                     rp.cells = lcb;
49125                     if(this.getRowClass){
49126                         alt.push(this.getRowClass(r, rowIndex));
49127                     }
49128                     if (hasListener) {
49129                         rowcfg = {
49130                              
49131                             record: r,
49132                             rowIndex : rowIndex,
49133                             rowClass : ''
49134                         }
49135                         this.grid.fireEvent('rowclass', this, rowcfg);
49136                         alt.push(rowcfg.rowClass);
49137                     }
49138                     rp.alt = alt.join(" ");
49139                     lbuf+= rt.apply(rp);
49140                     rp.cells = cb;
49141                     buf+=  rt.apply(rp);
49142                 }
49143                 return [lbuf, buf];
49144             } :
49145             function(cs, rs, ds, startRow, colCount, stripe){
49146                 var ts = this.templates, ct = ts.cell, rt = ts.row;
49147                 // buffers
49148                 var buf = [], lbuf = [], cb, lcb, c, p = {}, rp = {}, r, rowIndex;
49149                 var hasListener = this.grid.hasListener('rowclass');
49150                 var rowcfg = {};
49151                 for(var j = 0, len = rs.length; j < len; j++){
49152                     r = rs[j]; cb = []; lcb = []; rowIndex = (j+startRow);
49153                     for(var i = 0; i < colCount; i++){
49154                         c = cs[i];
49155                         p.cellId = "x-grid-cell-" + rowIndex + "-" + i;
49156                         p.id = c.id;
49157                         p.css = p.attr = "";
49158                         p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
49159                         if(p.value == undefined || p.value === "") p.value = "&#160;";
49160                         if(r.dirty && typeof r.modified[c.name] !== 'undefined'){
49161                             p.css += p.css ? ' x-grid-dirty-cell' : 'x-grid-dirty-cell';
49162                         }
49163                         var markup = ct.apply(p);
49164                         if(!c.locked){
49165                             cb[cb.length] = markup;
49166                         }else{
49167                             lcb[lcb.length] = markup;
49168                         }
49169                     }
49170                     var alt = [];
49171                     if(stripe && ((rowIndex+1) % 2 == 0)){
49172                         alt.push( "x-grid-row-alt");
49173                     }
49174                     if(r.dirty){
49175                         alt.push(" x-grid-dirty-row");
49176                     }
49177                     rp.cells = lcb;
49178                     if(this.getRowClass){
49179                         alt.push( this.getRowClass(r, rowIndex));
49180                     }
49181                     if (hasListener) {
49182                         rowcfg = {
49183                              
49184                             record: r,
49185                             rowIndex : rowIndex,
49186                             rowClass : ''
49187                         }
49188                         this.grid.fireEvent('rowclass', this, rowcfg);
49189                         alt.push(rowcfg.rowClass);
49190                     }
49191                     rp.alt = alt.join(" ");
49192                     rp.cells = lcb.join("");
49193                     lbuf[lbuf.length] = rt.apply(rp);
49194                     rp.cells = cb.join("");
49195                     buf[buf.length] =  rt.apply(rp);
49196                 }
49197                 return [lbuf.join(""), buf.join("")];
49198             },
49199
49200     renderBody : function(){
49201         var markup = this.renderRows();
49202         var bt = this.templates.body;
49203         return [bt.apply({rows: markup[0]}), bt.apply({rows: markup[1]})];
49204     },
49205
49206     /**
49207      * Refreshes the grid
49208      * @param {Boolean} headersToo
49209      */
49210     refresh : function(headersToo){
49211         this.fireEvent("beforerefresh", this);
49212         this.grid.stopEditing();
49213         var result = this.renderBody();
49214         this.lockedBody.update(result[0]);
49215         this.mainBody.update(result[1]);
49216         if(headersToo === true){
49217             this.updateHeaders();
49218             this.updateColumns();
49219             this.updateSplitters();
49220             this.updateHeaderSortState();
49221         }
49222         this.syncRowHeights();
49223         this.layout();
49224         this.fireEvent("refresh", this);
49225     },
49226
49227     handleColumnMove : function(cm, oldIndex, newIndex){
49228         this.indexMap = null;
49229         var s = this.getScrollState();
49230         this.refresh(true);
49231         this.restoreScroll(s);
49232         this.afterMove(newIndex);
49233     },
49234
49235     afterMove : function(colIndex){
49236         if(this.enableMoveAnim && Roo.enableFx){
49237             this.fly(this.getHeaderCell(colIndex).firstChild).highlight(this.hlColor);
49238         }
49239         // if multisort - fix sortOrder, and reload..
49240         if (this.grid.dataSource.multiSort) {
49241             // the we can call sort again..
49242             var dm = this.grid.dataSource;
49243             var cm = this.grid.colModel;
49244             var so = [];
49245             for(var i = 0; i < cm.config.length; i++ ) {
49246                 
49247                 if ((typeof(dm.sortToggle[cm.config[i].dataIndex]) == 'undefined')) {
49248                     continue; // dont' bother, it's not in sort list or being set.
49249                 }
49250                 
49251                 so.push(cm.config[i].dataIndex);
49252             };
49253             dm.sortOrder = so;
49254             dm.load(dm.lastOptions);
49255             
49256             
49257         }
49258         
49259     },
49260
49261     updateCell : function(dm, rowIndex, dataIndex){
49262         var colIndex = this.getColumnIndexByDataIndex(dataIndex);
49263         if(typeof colIndex == "undefined"){ // not present in grid
49264             return;
49265         }
49266         var cm = this.grid.colModel;
49267         var cell = this.getCell(rowIndex, colIndex);
49268         var cellText = this.getCellText(rowIndex, colIndex);
49269
49270         var p = {
49271             cellId : "x-grid-cell-" + rowIndex + "-" + colIndex,
49272             id : cm.getColumnId(colIndex),
49273             css: colIndex == cm.getColumnCount()-1 ? "x-grid-col-last" : ""
49274         };
49275         var renderer = cm.getRenderer(colIndex);
49276         var val = renderer(dm.getValueAt(rowIndex, dataIndex), p, rowIndex, colIndex, dm);
49277         if(typeof val == "undefined" || val === "") val = "&#160;";
49278         cellText.innerHTML = val;
49279         cell.className = this.cellClass + " " + this.idToCssName(p.cellId) + " " + p.css;
49280         this.syncRowHeights(rowIndex, rowIndex);
49281     },
49282
49283     calcColumnWidth : function(colIndex, maxRowsToMeasure){
49284         var maxWidth = 0;
49285         if(this.grid.autoSizeHeaders){
49286             var h = this.getHeaderCellMeasure(colIndex);
49287             maxWidth = Math.max(maxWidth, h.scrollWidth);
49288         }
49289         var tb, index;
49290         if(this.cm.isLocked(colIndex)){
49291             tb = this.getLockedTable();
49292             index = colIndex;
49293         }else{
49294             tb = this.getBodyTable();
49295             index = colIndex - this.cm.getLockedCount();
49296         }
49297         if(tb && tb.rows){
49298             var rows = tb.rows;
49299             var stopIndex = Math.min(maxRowsToMeasure || rows.length, rows.length);
49300             for(var i = 0; i < stopIndex; i++){
49301                 var cell = rows[i].childNodes[index].firstChild;
49302                 maxWidth = Math.max(maxWidth, cell.scrollWidth);
49303             }
49304         }
49305         return maxWidth + /*margin for error in IE*/ 5;
49306     },
49307     /**
49308      * Autofit a column to its content.
49309      * @param {Number} colIndex
49310      * @param {Boolean} forceMinSize true to force the column to go smaller if possible
49311      */
49312      autoSizeColumn : function(colIndex, forceMinSize, suppressEvent){
49313          if(this.cm.isHidden(colIndex)){
49314              return; // can't calc a hidden column
49315          }
49316         if(forceMinSize){
49317             var cid = this.cm.getColumnId(colIndex);
49318             this.css.updateRule(this.colSelector +this.idToCssName( cid), "width", this.grid.minColumnWidth + "px");
49319            if(this.grid.autoSizeHeaders){
49320                this.css.updateRule(this.hdSelector + this.idToCssName(cid), "width", this.grid.minColumnWidth + "px");
49321            }
49322         }
49323         var newWidth = this.calcColumnWidth(colIndex);
49324         this.cm.setColumnWidth(colIndex,
49325             Math.max(this.grid.minColumnWidth, newWidth), suppressEvent);
49326         if(!suppressEvent){
49327             this.grid.fireEvent("columnresize", colIndex, newWidth);
49328         }
49329     },
49330
49331     /**
49332      * Autofits all columns to their content and then expands to fit any extra space in the grid
49333      */
49334      autoSizeColumns : function(){
49335         var cm = this.grid.colModel;
49336         var colCount = cm.getColumnCount();
49337         for(var i = 0; i < colCount; i++){
49338             this.autoSizeColumn(i, true, true);
49339         }
49340         if(cm.getTotalWidth() < this.scroller.dom.clientWidth){
49341             this.fitColumns();
49342         }else{
49343             this.updateColumns();
49344             this.layout();
49345         }
49346     },
49347
49348     /**
49349      * Autofits all columns to the grid's width proportionate with their current size
49350      * @param {Boolean} reserveScrollSpace Reserve space for a scrollbar
49351      */
49352     fitColumns : function(reserveScrollSpace){
49353         var cm = this.grid.colModel;
49354         var colCount = cm.getColumnCount();
49355         var cols = [];
49356         var width = 0;
49357         var i, w;
49358         for (i = 0; i < colCount; i++){
49359             if(!cm.isHidden(i) && !cm.isFixed(i)){
49360                 w = cm.getColumnWidth(i);
49361                 cols.push(i);
49362                 cols.push(w);
49363                 width += w;
49364             }
49365         }
49366         var avail = Math.min(this.scroller.dom.clientWidth, this.el.getWidth());
49367         if(reserveScrollSpace){
49368             avail -= 17;
49369         }
49370         var frac = (avail - cm.getTotalWidth())/width;
49371         while (cols.length){
49372             w = cols.pop();
49373             i = cols.pop();
49374             cm.setColumnWidth(i, Math.floor(w + w*frac), true);
49375         }
49376         this.updateColumns();
49377         this.layout();
49378     },
49379
49380     onRowSelect : function(rowIndex){
49381         var row = this.getRowComposite(rowIndex);
49382         row.addClass("x-grid-row-selected");
49383     },
49384
49385     onRowDeselect : function(rowIndex){
49386         var row = this.getRowComposite(rowIndex);
49387         row.removeClass("x-grid-row-selected");
49388     },
49389
49390     onCellSelect : function(row, col){
49391         var cell = this.getCell(row, col);
49392         if(cell){
49393             Roo.fly(cell).addClass("x-grid-cell-selected");
49394         }
49395     },
49396
49397     onCellDeselect : function(row, col){
49398         var cell = this.getCell(row, col);
49399         if(cell){
49400             Roo.fly(cell).removeClass("x-grid-cell-selected");
49401         }
49402     },
49403
49404     updateHeaderSortState : function(){
49405         
49406         // sort state can be single { field: xxx, direction : yyy}
49407         // or   { xxx=>ASC , yyy : DESC ..... }
49408         
49409         var mstate = {};
49410         if (!this.ds.multiSort) { 
49411             var state = this.ds.getSortState();
49412             if(!state){
49413                 return;
49414             }
49415             mstate[state.field] = state.direction;
49416             // FIXME... - this is not used here.. but might be elsewhere..
49417             this.sortState = state;
49418             
49419         } else {
49420             mstate = this.ds.sortToggle;
49421         }
49422         //remove existing sort classes..
49423         
49424         var sc = this.sortClasses;
49425         var hds = this.el.select(this.headerSelector).removeClass(sc);
49426         
49427         for(var f in mstate) {
49428         
49429             var sortColumn = this.cm.findColumnIndex(f);
49430             
49431             if(sortColumn != -1){
49432                 var sortDir = mstate[f];        
49433                 hds.item(sortColumn).addClass(sc[sortDir == "DESC" ? 1 : 0]);
49434             }
49435         }
49436         
49437          
49438         
49439     },
49440
49441
49442     handleHeaderClick : function(g, index){
49443         if(this.headersDisabled){
49444             return;
49445         }
49446         var dm = g.dataSource, cm = g.colModel;
49447         if(!cm.isSortable(index)){
49448             return;
49449         }
49450         g.stopEditing();
49451         
49452         if (dm.multiSort) {
49453             // update the sortOrder
49454             var so = [];
49455             for(var i = 0; i < cm.config.length; i++ ) {
49456                 
49457                 if ((typeof(dm.sortToggle[cm.config[i].dataIndex]) == 'undefined') && (index != i)) {
49458                     continue; // dont' bother, it's not in sort list or being set.
49459                 }
49460                 
49461                 so.push(cm.config[i].dataIndex);
49462             };
49463             dm.sortOrder = so;
49464         }
49465         
49466         
49467         dm.sort(cm.getDataIndex(index));
49468     },
49469
49470
49471     destroy : function(){
49472         if(this.colMenu){
49473             this.colMenu.removeAll();
49474             Roo.menu.MenuMgr.unregister(this.colMenu);
49475             this.colMenu.getEl().remove();
49476             delete this.colMenu;
49477         }
49478         if(this.hmenu){
49479             this.hmenu.removeAll();
49480             Roo.menu.MenuMgr.unregister(this.hmenu);
49481             this.hmenu.getEl().remove();
49482             delete this.hmenu;
49483         }
49484         if(this.grid.enableColumnMove){
49485             var dds = Roo.dd.DDM.ids['gridHeader' + this.grid.getGridEl().id];
49486             if(dds){
49487                 for(var dd in dds){
49488                     if(!dds[dd].config.isTarget && dds[dd].dragElId){
49489                         var elid = dds[dd].dragElId;
49490                         dds[dd].unreg();
49491                         Roo.get(elid).remove();
49492                     } else if(dds[dd].config.isTarget){
49493                         dds[dd].proxyTop.remove();
49494                         dds[dd].proxyBottom.remove();
49495                         dds[dd].unreg();
49496                     }
49497                     if(Roo.dd.DDM.locationCache[dd]){
49498                         delete Roo.dd.DDM.locationCache[dd];
49499                     }
49500                 }
49501                 delete Roo.dd.DDM.ids['gridHeader' + this.grid.getGridEl().id];
49502             }
49503         }
49504         Roo.util.CSS.removeStyleSheet(this.idToCssName(this.grid.id) + '-cssrules');
49505         this.bind(null, null);
49506         Roo.EventManager.removeResizeListener(this.onWindowResize, this);
49507     },
49508
49509     handleLockChange : function(){
49510         this.refresh(true);
49511     },
49512
49513     onDenyColumnLock : function(){
49514
49515     },
49516
49517     onDenyColumnHide : function(){
49518
49519     },
49520
49521     handleHdMenuClick : function(item){
49522         var index = this.hdCtxIndex;
49523         var cm = this.cm, ds = this.ds;
49524         switch(item.id){
49525             case "asc":
49526                 ds.sort(cm.getDataIndex(index), "ASC");
49527                 break;
49528             case "desc":
49529                 ds.sort(cm.getDataIndex(index), "DESC");
49530                 break;
49531             case "lock":
49532                 var lc = cm.getLockedCount();
49533                 if(cm.getColumnCount(true) <= lc+1){
49534                     this.onDenyColumnLock();
49535                     return;
49536                 }
49537                 if(lc != index){
49538                     cm.setLocked(index, true, true);
49539                     cm.moveColumn(index, lc);
49540                     this.grid.fireEvent("columnmove", index, lc);
49541                 }else{
49542                     cm.setLocked(index, true);
49543                 }
49544             break;
49545             case "unlock":
49546                 var lc = cm.getLockedCount();
49547                 if((lc-1) != index){
49548                     cm.setLocked(index, false, true);
49549                     cm.moveColumn(index, lc-1);
49550                     this.grid.fireEvent("columnmove", index, lc-1);
49551                 }else{
49552                     cm.setLocked(index, false);
49553                 }
49554             break;
49555             default:
49556                 index = cm.getIndexById(item.id.substr(4));
49557                 if(index != -1){
49558                     if(item.checked && cm.getColumnCount(true) <= 1){
49559                         this.onDenyColumnHide();
49560                         return false;
49561                     }
49562                     cm.setHidden(index, item.checked);
49563                 }
49564         }
49565         return true;
49566     },
49567
49568     beforeColMenuShow : function(){
49569         var cm = this.cm,  colCount = cm.getColumnCount();
49570         this.colMenu.removeAll();
49571         for(var i = 0; i < colCount; i++){
49572             this.colMenu.add(new Roo.menu.CheckItem({
49573                 id: "col-"+cm.getColumnId(i),
49574                 text: cm.getColumnHeader(i),
49575                 checked: !cm.isHidden(i),
49576                 hideOnClick:false
49577             }));
49578         }
49579     },
49580
49581     handleHdCtx : function(g, index, e){
49582         e.stopEvent();
49583         var hd = this.getHeaderCell(index);
49584         this.hdCtxIndex = index;
49585         var ms = this.hmenu.items, cm = this.cm;
49586         ms.get("asc").setDisabled(!cm.isSortable(index));
49587         ms.get("desc").setDisabled(!cm.isSortable(index));
49588         if(this.grid.enableColLock !== false){
49589             ms.get("lock").setDisabled(cm.isLocked(index));
49590             ms.get("unlock").setDisabled(!cm.isLocked(index));
49591         }
49592         this.hmenu.show(hd, "tl-bl");
49593     },
49594
49595     handleHdOver : function(e){
49596         var hd = this.findHeaderCell(e.getTarget());
49597         if(hd && !this.headersDisabled){
49598             if(this.grid.colModel.isSortable(this.getCellIndex(hd))){
49599                this.fly(hd).addClass("x-grid-hd-over");
49600             }
49601         }
49602     },
49603
49604     handleHdOut : function(e){
49605         var hd = this.findHeaderCell(e.getTarget());
49606         if(hd){
49607             this.fly(hd).removeClass("x-grid-hd-over");
49608         }
49609     },
49610
49611     handleSplitDblClick : function(e, t){
49612         var i = this.getCellIndex(t);
49613         if(this.grid.enableColumnResize !== false && this.cm.isResizable(i) && !this.cm.isFixed(i)){
49614             this.autoSizeColumn(i, true);
49615             this.layout();
49616         }
49617     },
49618
49619     render : function(){
49620
49621         var cm = this.cm;
49622         var colCount = cm.getColumnCount();
49623
49624         if(this.grid.monitorWindowResize === true){
49625             Roo.EventManager.onWindowResize(this.onWindowResize, this, true);
49626         }
49627         var header = this.renderHeaders();
49628         var body = this.templates.body.apply({rows:""});
49629         var html = this.templates.master.apply({
49630             lockedBody: body,
49631             body: body,
49632             lockedHeader: header[0],
49633             header: header[1]
49634         });
49635
49636         //this.updateColumns();
49637
49638         this.grid.getGridEl().dom.innerHTML = html;
49639
49640         this.initElements();
49641         
49642         // a kludge to fix the random scolling effect in webkit
49643         this.el.on("scroll", function() {
49644             this.el.dom.scrollTop=0; // hopefully not recursive..
49645         },this);
49646
49647         this.scroller.on("scroll", this.handleScroll, this);
49648         this.lockedBody.on("mousewheel", this.handleWheel, this);
49649         this.mainBody.on("mousewheel", this.handleWheel, this);
49650
49651         this.mainHd.on("mouseover", this.handleHdOver, this);
49652         this.mainHd.on("mouseout", this.handleHdOut, this);
49653         this.mainHd.on("dblclick", this.handleSplitDblClick, this,
49654                 {delegate: "."+this.splitClass});
49655
49656         this.lockedHd.on("mouseover", this.handleHdOver, this);
49657         this.lockedHd.on("mouseout", this.handleHdOut, this);
49658         this.lockedHd.on("dblclick", this.handleSplitDblClick, this,
49659                 {delegate: "."+this.splitClass});
49660
49661         if(this.grid.enableColumnResize !== false && Roo.grid.SplitDragZone){
49662             new Roo.grid.SplitDragZone(this.grid, this.lockedHd.dom, this.mainHd.dom);
49663         }
49664
49665         this.updateSplitters();
49666
49667         if(this.grid.enableColumnMove && Roo.grid.HeaderDragZone){
49668             new Roo.grid.HeaderDragZone(this.grid, this.lockedHd.dom, this.mainHd.dom);
49669             new Roo.grid.HeaderDropZone(this.grid, this.lockedHd.dom, this.mainHd.dom);
49670         }
49671
49672         if(this.grid.enableCtxMenu !== false && Roo.menu.Menu){
49673             this.hmenu = new Roo.menu.Menu({id: this.grid.id + "-hctx"});
49674             this.hmenu.add(
49675                 {id:"asc", text: this.sortAscText, cls: "xg-hmenu-sort-asc"},
49676                 {id:"desc", text: this.sortDescText, cls: "xg-hmenu-sort-desc"}
49677             );
49678             if(this.grid.enableColLock !== false){
49679                 this.hmenu.add('-',
49680                     {id:"lock", text: this.lockText, cls: "xg-hmenu-lock"},
49681                     {id:"unlock", text: this.unlockText, cls: "xg-hmenu-unlock"}
49682                 );
49683             }
49684             if(this.grid.enableColumnHide !== false){
49685
49686                 this.colMenu = new Roo.menu.Menu({id:this.grid.id + "-hcols-menu"});
49687                 this.colMenu.on("beforeshow", this.beforeColMenuShow, this);
49688                 this.colMenu.on("itemclick", this.handleHdMenuClick, this);
49689
49690                 this.hmenu.add('-',
49691                     {id:"columns", text: this.columnsText, menu: this.colMenu}
49692                 );
49693             }
49694             this.hmenu.on("itemclick", this.handleHdMenuClick, this);
49695
49696             this.grid.on("headercontextmenu", this.handleHdCtx, this);
49697         }
49698
49699         if((this.grid.enableDragDrop || this.grid.enableDrag) && Roo.grid.GridDragZone){
49700             this.dd = new Roo.grid.GridDragZone(this.grid, {
49701                 ddGroup : this.grid.ddGroup || 'GridDD'
49702             });
49703         }
49704
49705         /*
49706         for(var i = 0; i < colCount; i++){
49707             if(cm.isHidden(i)){
49708                 this.hideColumn(i);
49709             }
49710             if(cm.config[i].align){
49711                 this.css.updateRule(this.colSelector + i, "textAlign", cm.config[i].align);
49712                 this.css.updateRule(this.hdSelector + i, "textAlign", cm.config[i].align);
49713             }
49714         }*/
49715         
49716         this.updateHeaderSortState();
49717
49718         this.beforeInitialResize();
49719         this.layout(true);
49720
49721         // two part rendering gives faster view to the user
49722         this.renderPhase2.defer(1, this);
49723     },
49724
49725     renderPhase2 : function(){
49726         // render the rows now
49727         this.refresh();
49728         if(this.grid.autoSizeColumns){
49729             this.autoSizeColumns();
49730         }
49731     },
49732
49733     beforeInitialResize : function(){
49734
49735     },
49736
49737     onColumnSplitterMoved : function(i, w){
49738         this.userResized = true;
49739         var cm = this.grid.colModel;
49740         cm.setColumnWidth(i, w, true);
49741         var cid = cm.getColumnId(i);
49742         this.css.updateRule(this.colSelector + this.idToCssName(cid), "width", (w-this.borderWidth) + "px");
49743         this.css.updateRule(this.hdSelector + this.idToCssName(cid), "width", (w-this.borderWidth) + "px");
49744         this.updateSplitters();
49745         this.layout();
49746         this.grid.fireEvent("columnresize", i, w);
49747     },
49748
49749     syncRowHeights : function(startIndex, endIndex){
49750         if(this.grid.enableRowHeightSync === true && this.cm.getLockedCount() > 0){
49751             startIndex = startIndex || 0;
49752             var mrows = this.getBodyTable().rows;
49753             var lrows = this.getLockedTable().rows;
49754             var len = mrows.length-1;
49755             endIndex = Math.min(endIndex || len, len);
49756             for(var i = startIndex; i <= endIndex; i++){
49757                 var m = mrows[i], l = lrows[i];
49758                 var h = Math.max(m.offsetHeight, l.offsetHeight);
49759                 m.style.height = l.style.height = h + "px";
49760             }
49761         }
49762     },
49763
49764     layout : function(initialRender, is2ndPass){
49765         var g = this.grid;
49766         var auto = g.autoHeight;
49767         var scrollOffset = 16;
49768         var c = g.getGridEl(), cm = this.cm,
49769                 expandCol = g.autoExpandColumn,
49770                 gv = this;
49771         //c.beginMeasure();
49772
49773         if(!c.dom.offsetWidth){ // display:none?
49774             if(initialRender){
49775                 this.lockedWrap.show();
49776                 this.mainWrap.show();
49777             }
49778             return;
49779         }
49780
49781         var hasLock = this.cm.isLocked(0);
49782
49783         var tbh = this.headerPanel.getHeight();
49784         var bbh = this.footerPanel.getHeight();
49785
49786         if(auto){
49787             var ch = this.getBodyTable().offsetHeight + tbh + bbh + this.mainHd.getHeight();
49788             var newHeight = ch + c.getBorderWidth("tb");
49789             if(g.maxHeight){
49790                 newHeight = Math.min(g.maxHeight, newHeight);
49791             }
49792             c.setHeight(newHeight);
49793         }
49794
49795         if(g.autoWidth){
49796             c.setWidth(cm.getTotalWidth()+c.getBorderWidth('lr'));
49797         }
49798
49799         var s = this.scroller;
49800
49801         var csize = c.getSize(true);
49802
49803         this.el.setSize(csize.width, csize.height);
49804
49805         this.headerPanel.setWidth(csize.width);
49806         this.footerPanel.setWidth(csize.width);
49807
49808         var hdHeight = this.mainHd.getHeight();
49809         var vw = csize.width;
49810         var vh = csize.height - (tbh + bbh);
49811
49812         s.setSize(vw, vh);
49813
49814         var bt = this.getBodyTable();
49815         var ltWidth = hasLock ?
49816                       Math.max(this.getLockedTable().offsetWidth, this.lockedHd.dom.firstChild.offsetWidth) : 0;
49817
49818         var scrollHeight = bt.offsetHeight;
49819         var scrollWidth = ltWidth + bt.offsetWidth;
49820         var vscroll = false, hscroll = false;
49821
49822         this.scrollSizer.setSize(scrollWidth, scrollHeight+hdHeight);
49823
49824         var lw = this.lockedWrap, mw = this.mainWrap;
49825         var lb = this.lockedBody, mb = this.mainBody;
49826
49827         setTimeout(function(){
49828             var t = s.dom.offsetTop;
49829             var w = s.dom.clientWidth,
49830                 h = s.dom.clientHeight;
49831
49832             lw.setTop(t);
49833             lw.setSize(ltWidth, h);
49834
49835             mw.setLeftTop(ltWidth, t);
49836             mw.setSize(w-ltWidth, h);
49837
49838             lb.setHeight(h-hdHeight);
49839             mb.setHeight(h-hdHeight);
49840
49841             if(is2ndPass !== true && !gv.userResized && expandCol){
49842                 // high speed resize without full column calculation
49843                 
49844                 var ci = cm.getIndexById(expandCol);
49845                 if (ci < 0) {
49846                     ci = cm.findColumnIndex(expandCol);
49847                 }
49848                 ci = Math.max(0, ci); // make sure it's got at least the first col.
49849                 var expandId = cm.getColumnId(ci);
49850                 var  tw = cm.getTotalWidth(false);
49851                 var currentWidth = cm.getColumnWidth(ci);
49852                 var cw = Math.min(Math.max(((w-tw)+currentWidth-2)-/*scrollbar*/(w <= s.dom.offsetWidth ? 0 : 18), g.autoExpandMin), g.autoExpandMax);
49853                 if(currentWidth != cw){
49854                     cm.setColumnWidth(ci, cw, true);
49855                     gv.css.updateRule(gv.colSelector+gv.idToCssName(expandId), "width", (cw - gv.borderWidth) + "px");
49856                     gv.css.updateRule(gv.hdSelector+gv.idToCssName(expandId), "width", (cw - gv.borderWidth) + "px");
49857                     gv.updateSplitters();
49858                     gv.layout(false, true);
49859                 }
49860             }
49861
49862             if(initialRender){
49863                 lw.show();
49864                 mw.show();
49865             }
49866             //c.endMeasure();
49867         }, 10);
49868     },
49869
49870     onWindowResize : function(){
49871         if(!this.grid.monitorWindowResize || this.grid.autoHeight){
49872             return;
49873         }
49874         this.layout();
49875     },
49876
49877     appendFooter : function(parentEl){
49878         return null;
49879     },
49880
49881     sortAscText : "Sort Ascending",
49882     sortDescText : "Sort Descending",
49883     lockText : "Lock Column",
49884     unlockText : "Unlock Column",
49885     columnsText : "Columns"
49886 });
49887
49888
49889 Roo.grid.GridView.ColumnDragZone = function(grid, hd){
49890     Roo.grid.GridView.ColumnDragZone.superclass.constructor.call(this, grid, hd, null);
49891     this.proxy.el.addClass('x-grid3-col-dd');
49892 };
49893
49894 Roo.extend(Roo.grid.GridView.ColumnDragZone, Roo.grid.HeaderDragZone, {
49895     handleMouseDown : function(e){
49896
49897     },
49898
49899     callHandleMouseDown : function(e){
49900         Roo.grid.GridView.ColumnDragZone.superclass.handleMouseDown.call(this, e);
49901     }
49902 });
49903 /*
49904  * Based on:
49905  * Ext JS Library 1.1.1
49906  * Copyright(c) 2006-2007, Ext JS, LLC.
49907  *
49908  * Originally Released Under LGPL - original licence link has changed is not relivant.
49909  *
49910  * Fork - LGPL
49911  * <script type="text/javascript">
49912  */
49913  
49914 // private
49915 // This is a support class used internally by the Grid components
49916 Roo.grid.SplitDragZone = function(grid, hd, hd2){
49917     this.grid = grid;
49918     this.view = grid.getView();
49919     this.proxy = this.view.resizeProxy;
49920     Roo.grid.SplitDragZone.superclass.constructor.call(this, hd,
49921         "gridSplitters" + this.grid.getGridEl().id, {
49922         dragElId : Roo.id(this.proxy.dom), resizeFrame:false
49923     });
49924     this.setHandleElId(Roo.id(hd));
49925     this.setOuterHandleElId(Roo.id(hd2));
49926     this.scroll = false;
49927 };
49928 Roo.extend(Roo.grid.SplitDragZone, Roo.dd.DDProxy, {
49929     fly: Roo.Element.fly,
49930
49931     b4StartDrag : function(x, y){
49932         this.view.headersDisabled = true;
49933         this.proxy.setHeight(this.view.mainWrap.getHeight());
49934         var w = this.cm.getColumnWidth(this.cellIndex);
49935         var minw = Math.max(w-this.grid.minColumnWidth, 0);
49936         this.resetConstraints();
49937         this.setXConstraint(minw, 1000);
49938         this.setYConstraint(0, 0);
49939         this.minX = x - minw;
49940         this.maxX = x + 1000;
49941         this.startPos = x;
49942         Roo.dd.DDProxy.prototype.b4StartDrag.call(this, x, y);
49943     },
49944
49945
49946     handleMouseDown : function(e){
49947         ev = Roo.EventObject.setEvent(e);
49948         var t = this.fly(ev.getTarget());
49949         if(t.hasClass("x-grid-split")){
49950             this.cellIndex = this.view.getCellIndex(t.dom);
49951             this.split = t.dom;
49952             this.cm = this.grid.colModel;
49953             if(this.cm.isResizable(this.cellIndex) && !this.cm.isFixed(this.cellIndex)){
49954                 Roo.grid.SplitDragZone.superclass.handleMouseDown.apply(this, arguments);
49955             }
49956         }
49957     },
49958
49959     endDrag : function(e){
49960         this.view.headersDisabled = false;
49961         var endX = Math.max(this.minX, Roo.lib.Event.getPageX(e));
49962         var diff = endX - this.startPos;
49963         this.view.onColumnSplitterMoved(this.cellIndex, this.cm.getColumnWidth(this.cellIndex)+diff);
49964     },
49965
49966     autoOffset : function(){
49967         this.setDelta(0,0);
49968     }
49969 });/*
49970  * Based on:
49971  * Ext JS Library 1.1.1
49972  * Copyright(c) 2006-2007, Ext JS, LLC.
49973  *
49974  * Originally Released Under LGPL - original licence link has changed is not relivant.
49975  *
49976  * Fork - LGPL
49977  * <script type="text/javascript">
49978  */
49979  
49980 // private
49981 // This is a support class used internally by the Grid components
49982 Roo.grid.GridDragZone = function(grid, config){
49983     this.view = grid.getView();
49984     Roo.grid.GridDragZone.superclass.constructor.call(this, this.view.mainBody.dom, config);
49985     if(this.view.lockedBody){
49986         this.setHandleElId(Roo.id(this.view.mainBody.dom));
49987         this.setOuterHandleElId(Roo.id(this.view.lockedBody.dom));
49988     }
49989     this.scroll = false;
49990     this.grid = grid;
49991     this.ddel = document.createElement('div');
49992     this.ddel.className = 'x-grid-dd-wrap';
49993 };
49994
49995 Roo.extend(Roo.grid.GridDragZone, Roo.dd.DragZone, {
49996     ddGroup : "GridDD",
49997
49998     getDragData : function(e){
49999         var t = Roo.lib.Event.getTarget(e);
50000         var rowIndex = this.view.findRowIndex(t);
50001         if(rowIndex !== false){
50002             var sm = this.grid.selModel;
50003             //if(!sm.isSelected(rowIndex) || e.hasModifier()){
50004               //  sm.mouseDown(e, t);
50005             //}
50006             if (e.hasModifier()){
50007                 sm.handleMouseDown(e, t); // non modifier buttons are handled by row select.
50008             }
50009             return {grid: this.grid, ddel: this.ddel, rowIndex: rowIndex, selections:sm.getSelections()};
50010         }
50011         return false;
50012     },
50013
50014     onInitDrag : function(e){
50015         var data = this.dragData;
50016         this.ddel.innerHTML = this.grid.getDragDropText();
50017         this.proxy.update(this.ddel);
50018         // fire start drag?
50019     },
50020
50021     afterRepair : function(){
50022         this.dragging = false;
50023     },
50024
50025     getRepairXY : function(e, data){
50026         return false;
50027     },
50028
50029     onEndDrag : function(data, e){
50030         // fire end drag?
50031     },
50032
50033     onValidDrop : function(dd, e, id){
50034         // fire drag drop?
50035         this.hideProxy();
50036     },
50037
50038     beforeInvalidDrop : function(e, id){
50039
50040     }
50041 });/*
50042  * Based on:
50043  * Ext JS Library 1.1.1
50044  * Copyright(c) 2006-2007, Ext JS, LLC.
50045  *
50046  * Originally Released Under LGPL - original licence link has changed is not relivant.
50047  *
50048  * Fork - LGPL
50049  * <script type="text/javascript">
50050  */
50051  
50052
50053 /**
50054  * @class Roo.grid.ColumnModel
50055  * @extends Roo.util.Observable
50056  * This is the default implementation of a ColumnModel used by the Grid. It defines
50057  * the columns in the grid.
50058  * <br>Usage:<br>
50059  <pre><code>
50060  var colModel = new Roo.grid.ColumnModel([
50061         {header: "Ticker", width: 60, sortable: true, locked: true},
50062         {header: "Company Name", width: 150, sortable: true},
50063         {header: "Market Cap.", width: 100, sortable: true},
50064         {header: "$ Sales", width: 100, sortable: true, renderer: money},
50065         {header: "Employees", width: 100, sortable: true, resizable: false}
50066  ]);
50067  </code></pre>
50068  * <p>
50069  
50070  * The config options listed for this class are options which may appear in each
50071  * individual column definition.
50072  * <br/>RooJS Fix - column id's are not sequential but use Roo.id() - fixes bugs with layouts.
50073  * @constructor
50074  * @param {Object} config An Array of column config objects. See this class's
50075  * config objects for details.
50076 */
50077 Roo.grid.ColumnModel = function(config){
50078         /**
50079      * The config passed into the constructor
50080      */
50081     this.config = config;
50082     this.lookup = {};
50083
50084     // if no id, create one
50085     // if the column does not have a dataIndex mapping,
50086     // map it to the order it is in the config
50087     for(var i = 0, len = config.length; i < len; i++){
50088         var c = config[i];
50089         if(typeof c.dataIndex == "undefined"){
50090             c.dataIndex = i;
50091         }
50092         if(typeof c.renderer == "string"){
50093             c.renderer = Roo.util.Format[c.renderer];
50094         }
50095         if(typeof c.id == "undefined"){
50096             c.id = Roo.id();
50097         }
50098         if(c.editor && c.editor.xtype){
50099             c.editor  = Roo.factory(c.editor, Roo.grid);
50100         }
50101         if(c.editor && c.editor.isFormField){
50102             c.editor = new Roo.grid.GridEditor(c.editor);
50103         }
50104         this.lookup[c.id] = c;
50105     }
50106
50107     /**
50108      * The width of columns which have no width specified (defaults to 100)
50109      * @type Number
50110      */
50111     this.defaultWidth = 100;
50112
50113     /**
50114      * Default sortable of columns which have no sortable specified (defaults to false)
50115      * @type Boolean
50116      */
50117     this.defaultSortable = false;
50118
50119     this.addEvents({
50120         /**
50121              * @event widthchange
50122              * Fires when the width of a column changes.
50123              * @param {ColumnModel} this
50124              * @param {Number} columnIndex The column index
50125              * @param {Number} newWidth The new width
50126              */
50127             "widthchange": true,
50128         /**
50129              * @event headerchange
50130              * Fires when the text of a header changes.
50131              * @param {ColumnModel} this
50132              * @param {Number} columnIndex The column index
50133              * @param {Number} newText The new header text
50134              */
50135             "headerchange": true,
50136         /**
50137              * @event hiddenchange
50138              * Fires when a column is hidden or "unhidden".
50139              * @param {ColumnModel} this
50140              * @param {Number} columnIndex The column index
50141              * @param {Boolean} hidden true if hidden, false otherwise
50142              */
50143             "hiddenchange": true,
50144             /**
50145          * @event columnmoved
50146          * Fires when a column is moved.
50147          * @param {ColumnModel} this
50148          * @param {Number} oldIndex
50149          * @param {Number} newIndex
50150          */
50151         "columnmoved" : true,
50152         /**
50153          * @event columlockchange
50154          * Fires when a column's locked state is changed
50155          * @param {ColumnModel} this
50156          * @param {Number} colIndex
50157          * @param {Boolean} locked true if locked
50158          */
50159         "columnlockchange" : true
50160     });
50161     Roo.grid.ColumnModel.superclass.constructor.call(this);
50162 };
50163 Roo.extend(Roo.grid.ColumnModel, Roo.util.Observable, {
50164     /**
50165      * @cfg {String} header The header text to display in the Grid view.
50166      */
50167     /**
50168      * @cfg {String} dataIndex (Optional) The name of the field in the grid's {@link Roo.data.Store}'s
50169      * {@link Roo.data.Record} definition from which to draw the column's value. If not
50170      * specified, the column's index is used as an index into the Record's data Array.
50171      */
50172     /**
50173      * @cfg {Number} width (Optional) The initial width in pixels of the column. Using this
50174      * instead of {@link Roo.grid.Grid#autoSizeColumns} is more efficient.
50175      */
50176     /**
50177      * @cfg {Boolean} sortable (Optional) True if sorting is to be allowed on this column.
50178      * Defaults to the value of the {@link #defaultSortable} property.
50179      * Whether local/remote sorting is used is specified in {@link Roo.data.Store#remoteSort}.
50180      */
50181     /**
50182      * @cfg {Boolean} locked (Optional) True to lock the column in place while scrolling the Grid.  Defaults to false.
50183      */
50184     /**
50185      * @cfg {Boolean} fixed (Optional) True if the column width cannot be changed.  Defaults to false.
50186      */
50187     /**
50188      * @cfg {Boolean} resizable (Optional) False to disable column resizing. Defaults to true.
50189      */
50190     /**
50191      * @cfg {Boolean} hidden (Optional) True to hide the column. Defaults to false.
50192      */
50193     /**
50194      * @cfg {Function} renderer (Optional) A function used to generate HTML markup for a cell
50195      * given the cell's data value. See {@link #setRenderer}. If not specified, the
50196      * default renderer uses the raw data value.
50197      */
50198        /**
50199      * @cfg {Roo.grid.GridEditor} editor (Optional) For grid editors - returns the grid editor 
50200      */
50201     /**
50202      * @cfg {String} align (Optional) Set the CSS text-align property of the column.  Defaults to undefined.
50203      */
50204
50205     /**
50206      * Returns the id of the column at the specified index.
50207      * @param {Number} index The column index
50208      * @return {String} the id
50209      */
50210     getColumnId : function(index){
50211         return this.config[index].id;
50212     },
50213
50214     /**
50215      * Returns the column for a specified id.
50216      * @param {String} id The column id
50217      * @return {Object} the column
50218      */
50219     getColumnById : function(id){
50220         return this.lookup[id];
50221     },
50222
50223     
50224     /**
50225      * Returns the column for a specified dataIndex.
50226      * @param {String} dataIndex The column dataIndex
50227      * @return {Object|Boolean} the column or false if not found
50228      */
50229     getColumnByDataIndex: function(dataIndex){
50230         var index = this.findColumnIndex(dataIndex);
50231         return index > -1 ? this.config[index] : false;
50232     },
50233     
50234     /**
50235      * Returns the index for a specified column id.
50236      * @param {String} id The column id
50237      * @return {Number} the index, or -1 if not found
50238      */
50239     getIndexById : function(id){
50240         for(var i = 0, len = this.config.length; i < len; i++){
50241             if(this.config[i].id == id){
50242                 return i;
50243             }
50244         }
50245         return -1;
50246     },
50247     
50248     /**
50249      * Returns the index for a specified column dataIndex.
50250      * @param {String} dataIndex The column dataIndex
50251      * @return {Number} the index, or -1 if not found
50252      */
50253     
50254     findColumnIndex : function(dataIndex){
50255         for(var i = 0, len = this.config.length; i < len; i++){
50256             if(this.config[i].dataIndex == dataIndex){
50257                 return i;
50258             }
50259         }
50260         return -1;
50261     },
50262     
50263     
50264     moveColumn : function(oldIndex, newIndex){
50265         var c = this.config[oldIndex];
50266         this.config.splice(oldIndex, 1);
50267         this.config.splice(newIndex, 0, c);
50268         this.dataMap = null;
50269         this.fireEvent("columnmoved", this, oldIndex, newIndex);
50270     },
50271
50272     isLocked : function(colIndex){
50273         return this.config[colIndex].locked === true;
50274     },
50275
50276     setLocked : function(colIndex, value, suppressEvent){
50277         if(this.isLocked(colIndex) == value){
50278             return;
50279         }
50280         this.config[colIndex].locked = value;
50281         if(!suppressEvent){
50282             this.fireEvent("columnlockchange", this, colIndex, value);
50283         }
50284     },
50285
50286     getTotalLockedWidth : function(){
50287         var totalWidth = 0;
50288         for(var i = 0; i < this.config.length; i++){
50289             if(this.isLocked(i) && !this.isHidden(i)){
50290                 this.totalWidth += this.getColumnWidth(i);
50291             }
50292         }
50293         return totalWidth;
50294     },
50295
50296     getLockedCount : function(){
50297         for(var i = 0, len = this.config.length; i < len; i++){
50298             if(!this.isLocked(i)){
50299                 return i;
50300             }
50301         }
50302     },
50303
50304     /**
50305      * Returns the number of columns.
50306      * @return {Number}
50307      */
50308     getColumnCount : function(visibleOnly){
50309         if(visibleOnly === true){
50310             var c = 0;
50311             for(var i = 0, len = this.config.length; i < len; i++){
50312                 if(!this.isHidden(i)){
50313                     c++;
50314                 }
50315             }
50316             return c;
50317         }
50318         return this.config.length;
50319     },
50320
50321     /**
50322      * Returns the column configs that return true by the passed function that is called with (columnConfig, index)
50323      * @param {Function} fn
50324      * @param {Object} scope (optional)
50325      * @return {Array} result
50326      */
50327     getColumnsBy : function(fn, scope){
50328         var r = [];
50329         for(var i = 0, len = this.config.length; i < len; i++){
50330             var c = this.config[i];
50331             if(fn.call(scope||this, c, i) === true){
50332                 r[r.length] = c;
50333             }
50334         }
50335         return r;
50336     },
50337
50338     /**
50339      * Returns true if the specified column is sortable.
50340      * @param {Number} col The column index
50341      * @return {Boolean}
50342      */
50343     isSortable : function(col){
50344         if(typeof this.config[col].sortable == "undefined"){
50345             return this.defaultSortable;
50346         }
50347         return this.config[col].sortable;
50348     },
50349
50350     /**
50351      * Returns the rendering (formatting) function defined for the column.
50352      * @param {Number} col The column index.
50353      * @return {Function} The function used to render the cell. See {@link #setRenderer}.
50354      */
50355     getRenderer : function(col){
50356         if(!this.config[col].renderer){
50357             return Roo.grid.ColumnModel.defaultRenderer;
50358         }
50359         return this.config[col].renderer;
50360     },
50361
50362     /**
50363      * Sets the rendering (formatting) function for a column.
50364      * @param {Number} col The column index
50365      * @param {Function} fn The function to use to process the cell's raw data
50366      * to return HTML markup for the grid view. The render function is called with
50367      * the following parameters:<ul>
50368      * <li>Data value.</li>
50369      * <li>Cell metadata. An object in which you may set the following attributes:<ul>
50370      * <li>css A CSS style string to apply to the table cell.</li>
50371      * <li>attr An HTML attribute definition string to apply to the data container element <i>within</i> the table cell.</li></ul>
50372      * <li>The {@link Roo.data.Record} from which the data was extracted.</li>
50373      * <li>Row index</li>
50374      * <li>Column index</li>
50375      * <li>The {@link Roo.data.Store} object from which the Record was extracted</li></ul>
50376      */
50377     setRenderer : function(col, fn){
50378         this.config[col].renderer = fn;
50379     },
50380
50381     /**
50382      * Returns the width for the specified column.
50383      * @param {Number} col The column index
50384      * @return {Number}
50385      */
50386     getColumnWidth : function(col){
50387         return this.config[col].width * 1 || this.defaultWidth;
50388     },
50389
50390     /**
50391      * Sets the width for a column.
50392      * @param {Number} col The column index
50393      * @param {Number} width The new width
50394      */
50395     setColumnWidth : function(col, width, suppressEvent){
50396         this.config[col].width = width;
50397         this.totalWidth = null;
50398         if(!suppressEvent){
50399              this.fireEvent("widthchange", this, col, width);
50400         }
50401     },
50402
50403     /**
50404      * Returns the total width of all columns.
50405      * @param {Boolean} includeHidden True to include hidden column widths
50406      * @return {Number}
50407      */
50408     getTotalWidth : function(includeHidden){
50409         if(!this.totalWidth){
50410             this.totalWidth = 0;
50411             for(var i = 0, len = this.config.length; i < len; i++){
50412                 if(includeHidden || !this.isHidden(i)){
50413                     this.totalWidth += this.getColumnWidth(i);
50414                 }
50415             }
50416         }
50417         return this.totalWidth;
50418     },
50419
50420     /**
50421      * Returns the header for the specified column.
50422      * @param {Number} col The column index
50423      * @return {String}
50424      */
50425     getColumnHeader : function(col){
50426         return this.config[col].header;
50427     },
50428
50429     /**
50430      * Sets the header for a column.
50431      * @param {Number} col The column index
50432      * @param {String} header The new header
50433      */
50434     setColumnHeader : function(col, header){
50435         this.config[col].header = header;
50436         this.fireEvent("headerchange", this, col, header);
50437     },
50438
50439     /**
50440      * Returns the tooltip for the specified column.
50441      * @param {Number} col The column index
50442      * @return {String}
50443      */
50444     getColumnTooltip : function(col){
50445             return this.config[col].tooltip;
50446     },
50447     /**
50448      * Sets the tooltip for a column.
50449      * @param {Number} col The column index
50450      * @param {String} tooltip The new tooltip
50451      */
50452     setColumnTooltip : function(col, tooltip){
50453             this.config[col].tooltip = tooltip;
50454     },
50455
50456     /**
50457      * Returns the dataIndex for the specified column.
50458      * @param {Number} col The column index
50459      * @return {Number}
50460      */
50461     getDataIndex : function(col){
50462         return this.config[col].dataIndex;
50463     },
50464
50465     /**
50466      * Sets the dataIndex for a column.
50467      * @param {Number} col The column index
50468      * @param {Number} dataIndex The new dataIndex
50469      */
50470     setDataIndex : function(col, dataIndex){
50471         this.config[col].dataIndex = dataIndex;
50472     },
50473
50474     
50475     
50476     /**
50477      * Returns true if the cell is editable.
50478      * @param {Number} colIndex The column index
50479      * @param {Number} rowIndex The row index
50480      * @return {Boolean}
50481      */
50482     isCellEditable : function(colIndex, rowIndex){
50483         return (this.config[colIndex].editable || (typeof this.config[colIndex].editable == "undefined" && this.config[colIndex].editor)) ? true : false;
50484     },
50485
50486     /**
50487      * Returns the editor defined for the cell/column.
50488      * return false or null to disable editing.
50489      * @param {Number} colIndex The column index
50490      * @param {Number} rowIndex The row index
50491      * @return {Object}
50492      */
50493     getCellEditor : function(colIndex, rowIndex){
50494         return this.config[colIndex].editor;
50495     },
50496
50497     /**
50498      * Sets if a column is editable.
50499      * @param {Number} col The column index
50500      * @param {Boolean} editable True if the column is editable
50501      */
50502     setEditable : function(col, editable){
50503         this.config[col].editable = editable;
50504     },
50505
50506
50507     /**
50508      * Returns true if the column is hidden.
50509      * @param {Number} colIndex The column index
50510      * @return {Boolean}
50511      */
50512     isHidden : function(colIndex){
50513         return this.config[colIndex].hidden;
50514     },
50515
50516
50517     /**
50518      * Returns true if the column width cannot be changed
50519      */
50520     isFixed : function(colIndex){
50521         return this.config[colIndex].fixed;
50522     },
50523
50524     /**
50525      * Returns true if the column can be resized
50526      * @return {Boolean}
50527      */
50528     isResizable : function(colIndex){
50529         return colIndex >= 0 && this.config[colIndex].resizable !== false && this.config[colIndex].fixed !== true;
50530     },
50531     /**
50532      * Sets if a column is hidden.
50533      * @param {Number} colIndex The column index
50534      * @param {Boolean} hidden True if the column is hidden
50535      */
50536     setHidden : function(colIndex, hidden){
50537         this.config[colIndex].hidden = hidden;
50538         this.totalWidth = null;
50539         this.fireEvent("hiddenchange", this, colIndex, hidden);
50540     },
50541
50542     /**
50543      * Sets the editor for a column.
50544      * @param {Number} col The column index
50545      * @param {Object} editor The editor object
50546      */
50547     setEditor : function(col, editor){
50548         this.config[col].editor = editor;
50549     }
50550 });
50551
50552 Roo.grid.ColumnModel.defaultRenderer = function(value){
50553         if(typeof value == "string" && value.length < 1){
50554             return "&#160;";
50555         }
50556         return value;
50557 };
50558
50559 // Alias for backwards compatibility
50560 Roo.grid.DefaultColumnModel = Roo.grid.ColumnModel;
50561 /*
50562  * Based on:
50563  * Ext JS Library 1.1.1
50564  * Copyright(c) 2006-2007, Ext JS, LLC.
50565  *
50566  * Originally Released Under LGPL - original licence link has changed is not relivant.
50567  *
50568  * Fork - LGPL
50569  * <script type="text/javascript">
50570  */
50571
50572 /**
50573  * @class Roo.grid.AbstractSelectionModel
50574  * @extends Roo.util.Observable
50575  * Abstract base class for grid SelectionModels.  It provides the interface that should be
50576  * implemented by descendant classes.  This class should not be directly instantiated.
50577  * @constructor
50578  */
50579 Roo.grid.AbstractSelectionModel = function(){
50580     this.locked = false;
50581     Roo.grid.AbstractSelectionModel.superclass.constructor.call(this);
50582 };
50583
50584 Roo.extend(Roo.grid.AbstractSelectionModel, Roo.util.Observable,  {
50585     /** @ignore Called by the grid automatically. Do not call directly. */
50586     init : function(grid){
50587         this.grid = grid;
50588         this.initEvents();
50589     },
50590
50591     /**
50592      * Locks the selections.
50593      */
50594     lock : function(){
50595         this.locked = true;
50596     },
50597
50598     /**
50599      * Unlocks the selections.
50600      */
50601     unlock : function(){
50602         this.locked = false;
50603     },
50604
50605     /**
50606      * Returns true if the selections are locked.
50607      * @return {Boolean}
50608      */
50609     isLocked : function(){
50610         return this.locked;
50611     }
50612 });/*
50613  * Based on:
50614  * Ext JS Library 1.1.1
50615  * Copyright(c) 2006-2007, Ext JS, LLC.
50616  *
50617  * Originally Released Under LGPL - original licence link has changed is not relivant.
50618  *
50619  * Fork - LGPL
50620  * <script type="text/javascript">
50621  */
50622 /**
50623  * @extends Roo.grid.AbstractSelectionModel
50624  * @class Roo.grid.RowSelectionModel
50625  * The default SelectionModel used by {@link Roo.grid.Grid}.
50626  * It supports multiple selections and keyboard selection/navigation. 
50627  * @constructor
50628  * @param {Object} config
50629  */
50630 Roo.grid.RowSelectionModel = function(config){
50631     Roo.apply(this, config);
50632     this.selections = new Roo.util.MixedCollection(false, function(o){
50633         return o.id;
50634     });
50635
50636     this.last = false;
50637     this.lastActive = false;
50638
50639     this.addEvents({
50640         /**
50641              * @event selectionchange
50642              * Fires when the selection changes
50643              * @param {SelectionModel} this
50644              */
50645             "selectionchange" : true,
50646         /**
50647              * @event afterselectionchange
50648              * Fires after the selection changes (eg. by key press or clicking)
50649              * @param {SelectionModel} this
50650              */
50651             "afterselectionchange" : true,
50652         /**
50653              * @event beforerowselect
50654              * Fires when a row is selected being selected, return false to cancel.
50655              * @param {SelectionModel} this
50656              * @param {Number} rowIndex The selected index
50657              * @param {Boolean} keepExisting False if other selections will be cleared
50658              */
50659             "beforerowselect" : true,
50660         /**
50661              * @event rowselect
50662              * Fires when a row is selected.
50663              * @param {SelectionModel} this
50664              * @param {Number} rowIndex The selected index
50665              * @param {Roo.data.Record} r The record
50666              */
50667             "rowselect" : true,
50668         /**
50669              * @event rowdeselect
50670              * Fires when a row is deselected.
50671              * @param {SelectionModel} this
50672              * @param {Number} rowIndex The selected index
50673              */
50674         "rowdeselect" : true
50675     });
50676     Roo.grid.RowSelectionModel.superclass.constructor.call(this);
50677     this.locked = false;
50678 };
50679
50680 Roo.extend(Roo.grid.RowSelectionModel, Roo.grid.AbstractSelectionModel,  {
50681     /**
50682      * @cfg {Boolean} singleSelect
50683      * True to allow selection of only one row at a time (defaults to false)
50684      */
50685     singleSelect : false,
50686
50687     // private
50688     initEvents : function(){
50689
50690         if(!this.grid.enableDragDrop && !this.grid.enableDrag){
50691             this.grid.on("mousedown", this.handleMouseDown, this);
50692         }else{ // allow click to work like normal
50693             this.grid.on("rowclick", this.handleDragableRowClick, this);
50694         }
50695
50696         this.rowNav = new Roo.KeyNav(this.grid.getGridEl(), {
50697             "up" : function(e){
50698                 if(!e.shiftKey){
50699                     this.selectPrevious(e.shiftKey);
50700                 }else if(this.last !== false && this.lastActive !== false){
50701                     var last = this.last;
50702                     this.selectRange(this.last,  this.lastActive-1);
50703                     this.grid.getView().focusRow(this.lastActive);
50704                     if(last !== false){
50705                         this.last = last;
50706                     }
50707                 }else{
50708                     this.selectFirstRow();
50709                 }
50710                 this.fireEvent("afterselectionchange", this);
50711             },
50712             "down" : function(e){
50713                 if(!e.shiftKey){
50714                     this.selectNext(e.shiftKey);
50715                 }else if(this.last !== false && this.lastActive !== false){
50716                     var last = this.last;
50717                     this.selectRange(this.last,  this.lastActive+1);
50718                     this.grid.getView().focusRow(this.lastActive);
50719                     if(last !== false){
50720                         this.last = last;
50721                     }
50722                 }else{
50723                     this.selectFirstRow();
50724                 }
50725                 this.fireEvent("afterselectionchange", this);
50726             },
50727             scope: this
50728         });
50729
50730         var view = this.grid.view;
50731         view.on("refresh", this.onRefresh, this);
50732         view.on("rowupdated", this.onRowUpdated, this);
50733         view.on("rowremoved", this.onRemove, this);
50734     },
50735
50736     // private
50737     onRefresh : function(){
50738         var ds = this.grid.dataSource, i, v = this.grid.view;
50739         var s = this.selections;
50740         s.each(function(r){
50741             if((i = ds.indexOfId(r.id)) != -1){
50742                 v.onRowSelect(i);
50743             }else{
50744                 s.remove(r);
50745             }
50746         });
50747     },
50748
50749     // private
50750     onRemove : function(v, index, r){
50751         this.selections.remove(r);
50752     },
50753
50754     // private
50755     onRowUpdated : function(v, index, r){
50756         if(this.isSelected(r)){
50757             v.onRowSelect(index);
50758         }
50759     },
50760
50761     /**
50762      * Select records.
50763      * @param {Array} records The records to select
50764      * @param {Boolean} keepExisting (optional) True to keep existing selections
50765      */
50766     selectRecords : function(records, keepExisting){
50767         if(!keepExisting){
50768             this.clearSelections();
50769         }
50770         var ds = this.grid.dataSource;
50771         for(var i = 0, len = records.length; i < len; i++){
50772             this.selectRow(ds.indexOf(records[i]), true);
50773         }
50774     },
50775
50776     /**
50777      * Gets the number of selected rows.
50778      * @return {Number}
50779      */
50780     getCount : function(){
50781         return this.selections.length;
50782     },
50783
50784     /**
50785      * Selects the first row in the grid.
50786      */
50787     selectFirstRow : function(){
50788         this.selectRow(0);
50789     },
50790
50791     /**
50792      * Select the last row.
50793      * @param {Boolean} keepExisting (optional) True to keep existing selections
50794      */
50795     selectLastRow : function(keepExisting){
50796         this.selectRow(this.grid.dataSource.getCount() - 1, keepExisting);
50797     },
50798
50799     /**
50800      * Selects the row immediately following the last selected row.
50801      * @param {Boolean} keepExisting (optional) True to keep existing selections
50802      */
50803     selectNext : function(keepExisting){
50804         if(this.last !== false && (this.last+1) < this.grid.dataSource.getCount()){
50805             this.selectRow(this.last+1, keepExisting);
50806             this.grid.getView().focusRow(this.last);
50807         }
50808     },
50809
50810     /**
50811      * Selects the row that precedes the last selected row.
50812      * @param {Boolean} keepExisting (optional) True to keep existing selections
50813      */
50814     selectPrevious : function(keepExisting){
50815         if(this.last){
50816             this.selectRow(this.last-1, keepExisting);
50817             this.grid.getView().focusRow(this.last);
50818         }
50819     },
50820
50821     /**
50822      * Returns the selected records
50823      * @return {Array} Array of selected records
50824      */
50825     getSelections : function(){
50826         return [].concat(this.selections.items);
50827     },
50828
50829     /**
50830      * Returns the first selected record.
50831      * @return {Record}
50832      */
50833     getSelected : function(){
50834         return this.selections.itemAt(0);
50835     },
50836
50837
50838     /**
50839      * Clears all selections.
50840      */
50841     clearSelections : function(fast){
50842         if(this.locked) return;
50843         if(fast !== true){
50844             var ds = this.grid.dataSource;
50845             var s = this.selections;
50846             s.each(function(r){
50847                 this.deselectRow(ds.indexOfId(r.id));
50848             }, this);
50849             s.clear();
50850         }else{
50851             this.selections.clear();
50852         }
50853         this.last = false;
50854     },
50855
50856
50857     /**
50858      * Selects all rows.
50859      */
50860     selectAll : function(){
50861         if(this.locked) return;
50862         this.selections.clear();
50863         for(var i = 0, len = this.grid.dataSource.getCount(); i < len; i++){
50864             this.selectRow(i, true);
50865         }
50866     },
50867
50868     /**
50869      * Returns True if there is a selection.
50870      * @return {Boolean}
50871      */
50872     hasSelection : function(){
50873         return this.selections.length > 0;
50874     },
50875
50876     /**
50877      * Returns True if the specified row is selected.
50878      * @param {Number/Record} record The record or index of the record to check
50879      * @return {Boolean}
50880      */
50881     isSelected : function(index){
50882         var r = typeof index == "number" ? this.grid.dataSource.getAt(index) : index;
50883         return (r && this.selections.key(r.id) ? true : false);
50884     },
50885
50886     /**
50887      * Returns True if the specified record id is selected.
50888      * @param {String} id The id of record to check
50889      * @return {Boolean}
50890      */
50891     isIdSelected : function(id){
50892         return (this.selections.key(id) ? true : false);
50893     },
50894
50895     // private
50896     handleMouseDown : function(e, t){
50897         var view = this.grid.getView(), rowIndex;
50898         if(this.isLocked() || (rowIndex = view.findRowIndex(t)) === false){
50899             return;
50900         };
50901         if(e.shiftKey && this.last !== false){
50902             var last = this.last;
50903             this.selectRange(last, rowIndex, e.ctrlKey);
50904             this.last = last; // reset the last
50905             view.focusRow(rowIndex);
50906         }else{
50907             var isSelected = this.isSelected(rowIndex);
50908             if(e.button !== 0 && isSelected){
50909                 view.focusRow(rowIndex);
50910             }else if(e.ctrlKey && isSelected){
50911                 this.deselectRow(rowIndex);
50912             }else if(!isSelected){
50913                 this.selectRow(rowIndex, e.button === 0 && (e.ctrlKey || e.shiftKey));
50914                 view.focusRow(rowIndex);
50915             }
50916         }
50917         this.fireEvent("afterselectionchange", this);
50918     },
50919     // private
50920     handleDragableRowClick :  function(grid, rowIndex, e) 
50921     {
50922         if(e.button === 0 && !e.shiftKey && !e.ctrlKey) {
50923             this.selectRow(rowIndex, false);
50924             grid.view.focusRow(rowIndex);
50925              this.fireEvent("afterselectionchange", this);
50926         }
50927     },
50928     
50929     /**
50930      * Selects multiple rows.
50931      * @param {Array} rows Array of the indexes of the row to select
50932      * @param {Boolean} keepExisting (optional) True to keep existing selections
50933      */
50934     selectRows : function(rows, keepExisting){
50935         if(!keepExisting){
50936             this.clearSelections();
50937         }
50938         for(var i = 0, len = rows.length; i < len; i++){
50939             this.selectRow(rows[i], true);
50940         }
50941     },
50942
50943     /**
50944      * Selects a range of rows. All rows in between startRow and endRow are also selected.
50945      * @param {Number} startRow The index of the first row in the range
50946      * @param {Number} endRow The index of the last row in the range
50947      * @param {Boolean} keepExisting (optional) True to retain existing selections
50948      */
50949     selectRange : function(startRow, endRow, keepExisting){
50950         if(this.locked) return;
50951         if(!keepExisting){
50952             this.clearSelections();
50953         }
50954         if(startRow <= endRow){
50955             for(var i = startRow; i <= endRow; i++){
50956                 this.selectRow(i, true);
50957             }
50958         }else{
50959             for(var i = startRow; i >= endRow; i--){
50960                 this.selectRow(i, true);
50961             }
50962         }
50963     },
50964
50965     /**
50966      * Deselects a range of rows. All rows in between startRow and endRow are also deselected.
50967      * @param {Number} startRow The index of the first row in the range
50968      * @param {Number} endRow The index of the last row in the range
50969      */
50970     deselectRange : function(startRow, endRow, preventViewNotify){
50971         if(this.locked) return;
50972         for(var i = startRow; i <= endRow; i++){
50973             this.deselectRow(i, preventViewNotify);
50974         }
50975     },
50976
50977     /**
50978      * Selects a row.
50979      * @param {Number} row The index of the row to select
50980      * @param {Boolean} keepExisting (optional) True to keep existing selections
50981      */
50982     selectRow : function(index, keepExisting, preventViewNotify){
50983         if(this.locked || (index < 0 || index >= this.grid.dataSource.getCount())) return;
50984         if(this.fireEvent("beforerowselect", this, index, keepExisting) !== false){
50985             if(!keepExisting || this.singleSelect){
50986                 this.clearSelections();
50987             }
50988             var r = this.grid.dataSource.getAt(index);
50989             this.selections.add(r);
50990             this.last = this.lastActive = index;
50991             if(!preventViewNotify){
50992                 this.grid.getView().onRowSelect(index);
50993             }
50994             this.fireEvent("rowselect", this, index, r);
50995             this.fireEvent("selectionchange", this);
50996         }
50997     },
50998
50999     /**
51000      * Deselects a row.
51001      * @param {Number} row The index of the row to deselect
51002      */
51003     deselectRow : function(index, preventViewNotify){
51004         if(this.locked) return;
51005         if(this.last == index){
51006             this.last = false;
51007         }
51008         if(this.lastActive == index){
51009             this.lastActive = false;
51010         }
51011         var r = this.grid.dataSource.getAt(index);
51012         this.selections.remove(r);
51013         if(!preventViewNotify){
51014             this.grid.getView().onRowDeselect(index);
51015         }
51016         this.fireEvent("rowdeselect", this, index);
51017         this.fireEvent("selectionchange", this);
51018     },
51019
51020     // private
51021     restoreLast : function(){
51022         if(this._last){
51023             this.last = this._last;
51024         }
51025     },
51026
51027     // private
51028     acceptsNav : function(row, col, cm){
51029         return !cm.isHidden(col) && cm.isCellEditable(col, row);
51030     },
51031
51032     // private
51033     onEditorKey : function(field, e){
51034         var k = e.getKey(), newCell, g = this.grid, ed = g.activeEditor;
51035         if(k == e.TAB){
51036             e.stopEvent();
51037             ed.completeEdit();
51038             if(e.shiftKey){
51039                 newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this);
51040             }else{
51041                 newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
51042             }
51043         }else if(k == e.ENTER && !e.ctrlKey){
51044             e.stopEvent();
51045             ed.completeEdit();
51046             if(e.shiftKey){
51047                 newCell = g.walkCells(ed.row-1, ed.col, -1, this.acceptsNav, this);
51048             }else{
51049                 newCell = g.walkCells(ed.row+1, ed.col, 1, this.acceptsNav, this);
51050             }
51051         }else if(k == e.ESC){
51052             ed.cancelEdit();
51053         }
51054         if(newCell){
51055             g.startEditing(newCell[0], newCell[1]);
51056         }
51057     }
51058 });/*
51059  * Based on:
51060  * Ext JS Library 1.1.1
51061  * Copyright(c) 2006-2007, Ext JS, LLC.
51062  *
51063  * Originally Released Under LGPL - original licence link has changed is not relivant.
51064  *
51065  * Fork - LGPL
51066  * <script type="text/javascript">
51067  */
51068 /**
51069  * @class Roo.grid.CellSelectionModel
51070  * @extends Roo.grid.AbstractSelectionModel
51071  * This class provides the basic implementation for cell selection in a grid.
51072  * @constructor
51073  * @param {Object} config The object containing the configuration of this model.
51074  */
51075 Roo.grid.CellSelectionModel = function(config){
51076     Roo.apply(this, config);
51077
51078     this.selection = null;
51079
51080     this.addEvents({
51081         /**
51082              * @event beforerowselect
51083              * Fires before a cell is selected.
51084              * @param {SelectionModel} this
51085              * @param {Number} rowIndex The selected row index
51086              * @param {Number} colIndex The selected cell index
51087              */
51088             "beforecellselect" : true,
51089         /**
51090              * @event cellselect
51091              * Fires when a cell is selected.
51092              * @param {SelectionModel} this
51093              * @param {Number} rowIndex The selected row index
51094              * @param {Number} colIndex The selected cell index
51095              */
51096             "cellselect" : true,
51097         /**
51098              * @event selectionchange
51099              * Fires when the active selection changes.
51100              * @param {SelectionModel} this
51101              * @param {Object} selection null for no selection or an object (o) with two properties
51102                 <ul>
51103                 <li>o.record: the record object for the row the selection is in</li>
51104                 <li>o.cell: An array of [rowIndex, columnIndex]</li>
51105                 </ul>
51106              */
51107             "selectionchange" : true
51108     });
51109     Roo.grid.CellSelectionModel.superclass.constructor.call(this);
51110 };
51111
51112 Roo.extend(Roo.grid.CellSelectionModel, Roo.grid.AbstractSelectionModel,  {
51113
51114     /** @ignore */
51115     initEvents : function(){
51116         this.grid.on("mousedown", this.handleMouseDown, this);
51117         this.grid.getGridEl().on(Roo.isIE ? "keydown" : "keypress", this.handleKeyDown, this);
51118         var view = this.grid.view;
51119         view.on("refresh", this.onViewChange, this);
51120         view.on("rowupdated", this.onRowUpdated, this);
51121         view.on("beforerowremoved", this.clearSelections, this);
51122         view.on("beforerowsinserted", this.clearSelections, this);
51123         if(this.grid.isEditor){
51124             this.grid.on("beforeedit", this.beforeEdit,  this);
51125         }
51126     },
51127
51128         //private
51129     beforeEdit : function(e){
51130         this.select(e.row, e.column, false, true, e.record);
51131     },
51132
51133         //private
51134     onRowUpdated : function(v, index, r){
51135         if(this.selection && this.selection.record == r){
51136             v.onCellSelect(index, this.selection.cell[1]);
51137         }
51138     },
51139
51140         //private
51141     onViewChange : function(){
51142         this.clearSelections(true);
51143     },
51144
51145         /**
51146          * Returns the currently selected cell,.
51147          * @return {Array} The selected cell (row, column) or null if none selected.
51148          */
51149     getSelectedCell : function(){
51150         return this.selection ? this.selection.cell : null;
51151     },
51152
51153     /**
51154      * Clears all selections.
51155      * @param {Boolean} true to prevent the gridview from being notified about the change.
51156      */
51157     clearSelections : function(preventNotify){
51158         var s = this.selection;
51159         if(s){
51160             if(preventNotify !== true){
51161                 this.grid.view.onCellDeselect(s.cell[0], s.cell[1]);
51162             }
51163             this.selection = null;
51164             this.fireEvent("selectionchange", this, null);
51165         }
51166     },
51167
51168     /**
51169      * Returns true if there is a selection.
51170      * @return {Boolean}
51171      */
51172     hasSelection : function(){
51173         return this.selection ? true : false;
51174     },
51175
51176     /** @ignore */
51177     handleMouseDown : function(e, t){
51178         var v = this.grid.getView();
51179         if(this.isLocked()){
51180             return;
51181         };
51182         var row = v.findRowIndex(t);
51183         var cell = v.findCellIndex(t);
51184         if(row !== false && cell !== false){
51185             this.select(row, cell);
51186         }
51187     },
51188
51189     /**
51190      * Selects a cell.
51191      * @param {Number} rowIndex
51192      * @param {Number} collIndex
51193      */
51194     select : function(rowIndex, colIndex, preventViewNotify, preventFocus, /*internal*/ r){
51195         if(this.fireEvent("beforecellselect", this, rowIndex, colIndex) !== false){
51196             this.clearSelections();
51197             r = r || this.grid.dataSource.getAt(rowIndex);
51198             this.selection = {
51199                 record : r,
51200                 cell : [rowIndex, colIndex]
51201             };
51202             if(!preventViewNotify){
51203                 var v = this.grid.getView();
51204                 v.onCellSelect(rowIndex, colIndex);
51205                 if(preventFocus !== true){
51206                     v.focusCell(rowIndex, colIndex);
51207                 }
51208             }
51209             this.fireEvent("cellselect", this, rowIndex, colIndex);
51210             this.fireEvent("selectionchange", this, this.selection);
51211         }
51212     },
51213
51214         //private
51215     isSelectable : function(rowIndex, colIndex, cm){
51216         return !cm.isHidden(colIndex);
51217     },
51218
51219     /** @ignore */
51220     handleKeyDown : function(e){
51221         //Roo.log('Cell Sel Model handleKeyDown');
51222         if(!e.isNavKeyPress()){
51223             return;
51224         }
51225         var g = this.grid, s = this.selection;
51226         if(!s){
51227             e.stopEvent();
51228             var cell = g.walkCells(0, 0, 1, this.isSelectable,  this);
51229             if(cell){
51230                 this.select(cell[0], cell[1]);
51231             }
51232             return;
51233         }
51234         var sm = this;
51235         var walk = function(row, col, step){
51236             return g.walkCells(row, col, step, sm.isSelectable,  sm);
51237         };
51238         var k = e.getKey(), r = s.cell[0], c = s.cell[1];
51239         var newCell;
51240
51241         switch(k){
51242             case e.TAB:
51243                 // handled by onEditorKey
51244                 if (g.isEditor && g.editing) {
51245                     return;
51246                 }
51247                 if(e.shiftKey){
51248                      newCell = walk(r, c-1, -1);
51249                 }else{
51250                      newCell = walk(r, c+1, 1);
51251                 }
51252              break;
51253              case e.DOWN:
51254                  newCell = walk(r+1, c, 1);
51255              break;
51256              case e.UP:
51257                  newCell = walk(r-1, c, -1);
51258              break;
51259              case e.RIGHT:
51260                  newCell = walk(r, c+1, 1);
51261              break;
51262              case e.LEFT:
51263                  newCell = walk(r, c-1, -1);
51264              break;
51265              case e.ENTER:
51266                  if(g.isEditor && !g.editing){
51267                     g.startEditing(r, c);
51268                     e.stopEvent();
51269                     return;
51270                 }
51271              break;
51272         };
51273         if(newCell){
51274             this.select(newCell[0], newCell[1]);
51275             e.stopEvent();
51276         }
51277     },
51278
51279     acceptsNav : function(row, col, cm){
51280         return !cm.isHidden(col) && cm.isCellEditable(col, row);
51281     },
51282     /**
51283      * Selects a cell.
51284      * @param {Number} field (not used) - as it's normally used as a listener
51285      * @param {Number} e - event - fake it by using
51286      *
51287      * var e = Roo.EventObjectImpl.prototype;
51288      * e.keyCode = e.TAB
51289      *
51290      * 
51291      */
51292     onEditorKey : function(field, e){
51293         
51294         var k = e.getKey(), newCell, g = this.grid, ed = g.activeEditor;
51295         ///Roo.log('onEditorKey' + k);
51296         if (!ed) {
51297             
51298             
51299             
51300         }
51301         if(k == e.TAB){
51302             if(e.shiftKey){
51303                 newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this);
51304             }else{
51305                 newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
51306             }
51307             
51308             e.stopEvent();
51309             
51310         }else if(k == e.ENTER &&  !e.ctrlKey){
51311             ed.completeEdit();
51312             e.stopEvent();
51313             newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
51314         }else if(k == e.ESC){
51315             ed.cancelEdit();
51316         }
51317         
51318         
51319         if(newCell){
51320             //Roo.log('next cell after edit');
51321             g.startEditing.defer(100, g, [newCell[0], newCell[1]]);
51322         }
51323     }
51324 });/*
51325  * Based on:
51326  * Ext JS Library 1.1.1
51327  * Copyright(c) 2006-2007, Ext JS, LLC.
51328  *
51329  * Originally Released Under LGPL - original licence link has changed is not relivant.
51330  *
51331  * Fork - LGPL
51332  * <script type="text/javascript">
51333  */
51334  
51335 /**
51336  * @class Roo.grid.EditorGrid
51337  * @extends Roo.grid.Grid
51338  * Class for creating and editable grid.
51339  * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered - 
51340  * The container MUST have some type of size defined for the grid to fill. The container will be 
51341  * automatically set to position relative if it isn't already.
51342  * @param {Object} dataSource The data model to bind to
51343  * @param {Object} colModel The column model with info about this grid's columns
51344  */
51345 Roo.grid.EditorGrid = function(container, config){
51346     Roo.grid.EditorGrid.superclass.constructor.call(this, container, config);
51347     this.getGridEl().addClass("xedit-grid");
51348
51349     if(!this.selModel){
51350         this.selModel = new Roo.grid.CellSelectionModel();
51351     }
51352
51353     this.activeEditor = null;
51354
51355         this.addEvents({
51356             /**
51357              * @event beforeedit
51358              * Fires before cell editing is triggered. The edit event object has the following properties <br />
51359              * <ul style="padding:5px;padding-left:16px;">
51360              * <li>grid - This grid</li>
51361              * <li>record - The record being edited</li>
51362              * <li>field - The field name being edited</li>
51363              * <li>value - The value for the field being edited.</li>
51364              * <li>row - The grid row index</li>
51365              * <li>column - The grid column index</li>
51366              * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
51367              * </ul>
51368              * @param {Object} e An edit event (see above for description)
51369              */
51370             "beforeedit" : true,
51371             /**
51372              * @event afteredit
51373              * Fires after a cell is edited. <br />
51374              * <ul style="padding:5px;padding-left:16px;">
51375              * <li>grid - This grid</li>
51376              * <li>record - The record being edited</li>
51377              * <li>field - The field name being edited</li>
51378              * <li>value - The value being set</li>
51379              * <li>originalValue - The original value for the field, before the edit.</li>
51380              * <li>row - The grid row index</li>
51381              * <li>column - The grid column index</li>
51382              * </ul>
51383              * @param {Object} e An edit event (see above for description)
51384              */
51385             "afteredit" : true,
51386             /**
51387              * @event validateedit
51388              * Fires after a cell is edited, but before the value is set in the record. 
51389          * You can use this to modify the value being set in the field, Return false
51390              * to cancel the change. The edit event object has the following properties <br />
51391              * <ul style="padding:5px;padding-left:16px;">
51392          * <li>editor - This editor</li>
51393              * <li>grid - This grid</li>
51394              * <li>record - The record being edited</li>
51395              * <li>field - The field name being edited</li>
51396              * <li>value - The value being set</li>
51397              * <li>originalValue - The original value for the field, before the edit.</li>
51398              * <li>row - The grid row index</li>
51399              * <li>column - The grid column index</li>
51400              * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
51401              * </ul>
51402              * @param {Object} e An edit event (see above for description)
51403              */
51404             "validateedit" : true
51405         });
51406     this.on("bodyscroll", this.stopEditing,  this);
51407     this.on(this.clicksToEdit == 1 ? "cellclick" : "celldblclick", this.onCellDblClick,  this);
51408 };
51409
51410 Roo.extend(Roo.grid.EditorGrid, Roo.grid.Grid, {
51411     /**
51412      * @cfg {Number} clicksToEdit
51413      * The number of clicks on a cell required to display the cell's editor (defaults to 2)
51414      */
51415     clicksToEdit: 2,
51416
51417     // private
51418     isEditor : true,
51419     // private
51420     trackMouseOver: false, // causes very odd FF errors
51421
51422     onCellDblClick : function(g, row, col){
51423         this.startEditing(row, col);
51424     },
51425
51426     onEditComplete : function(ed, value, startValue){
51427         this.editing = false;
51428         this.activeEditor = null;
51429         ed.un("specialkey", this.selModel.onEditorKey, this.selModel);
51430         var r = ed.record;
51431         var field = this.colModel.getDataIndex(ed.col);
51432         var e = {
51433             grid: this,
51434             record: r,
51435             field: field,
51436             originalValue: startValue,
51437             value: value,
51438             row: ed.row,
51439             column: ed.col,
51440             cancel:false,
51441             editor: ed
51442         };
51443         var cell = Roo.get(this.view.getCell(ed.row,ed.col))
51444         cell.show();
51445           
51446         if(String(value) !== String(startValue)){
51447             
51448             if(this.fireEvent("validateedit", e) !== false && !e.cancel){
51449                 r.set(field, e.value);
51450                 // if we are dealing with a combo box..
51451                 // then we also set the 'name' colum to be the displayField
51452                 if (ed.field.displayField && ed.field.name) {
51453                     r.set(ed.field.name, ed.field.el.dom.value);
51454                 }
51455                 
51456                 delete e.cancel; //?? why!!!
51457                 this.fireEvent("afteredit", e);
51458             }
51459         } else {
51460             this.fireEvent("afteredit", e); // always fire it!
51461         }
51462         this.view.focusCell(ed.row, ed.col);
51463     },
51464
51465     /**
51466      * Starts editing the specified for the specified row/column
51467      * @param {Number} rowIndex
51468      * @param {Number} colIndex
51469      */
51470     startEditing : function(row, col){
51471         this.stopEditing();
51472         if(this.colModel.isCellEditable(col, row)){
51473             this.view.ensureVisible(row, col, true);
51474           
51475             var r = this.dataSource.getAt(row);
51476             var field = this.colModel.getDataIndex(col);
51477             var cell = Roo.get(this.view.getCell(row,col));
51478             var e = {
51479                 grid: this,
51480                 record: r,
51481                 field: field,
51482                 value: r.data[field],
51483                 row: row,
51484                 column: col,
51485                 cancel:false 
51486             };
51487             if(this.fireEvent("beforeedit", e) !== false && !e.cancel){
51488                 this.editing = true;
51489                 var ed = this.colModel.getCellEditor(col, row);
51490                 
51491                 if (!ed) {
51492                     return;
51493                 }
51494                 if(!ed.rendered){
51495                     ed.render(ed.parentEl || document.body);
51496                 }
51497                 ed.field.reset();
51498                
51499                 cell.hide();
51500                 
51501                 (function(){ // complex but required for focus issues in safari, ie and opera
51502                     ed.row = row;
51503                     ed.col = col;
51504                     ed.record = r;
51505                     ed.on("complete",   this.onEditComplete,        this,       {single: true});
51506                     ed.on("specialkey", this.selModel.onEditorKey,  this.selModel);
51507                     this.activeEditor = ed;
51508                     var v = r.data[field];
51509                     ed.startEdit(this.view.getCell(row, col), v);
51510                     // combo's with 'displayField and name set
51511                     if (ed.field.displayField && ed.field.name) {
51512                         ed.field.el.dom.value = r.data[ed.field.name];
51513                     }
51514                     
51515                     
51516                 }).defer(50, this);
51517             }
51518         }
51519     },
51520         
51521     /**
51522      * Stops any active editing
51523      */
51524     stopEditing : function(){
51525         if(this.activeEditor){
51526             this.activeEditor.completeEdit();
51527         }
51528         this.activeEditor = null;
51529     }
51530 });/*
51531  * Based on:
51532  * Ext JS Library 1.1.1
51533  * Copyright(c) 2006-2007, Ext JS, LLC.
51534  *
51535  * Originally Released Under LGPL - original licence link has changed is not relivant.
51536  *
51537  * Fork - LGPL
51538  * <script type="text/javascript">
51539  */
51540
51541 // private - not really -- you end up using it !
51542 // This is a support class used internally by the Grid components
51543
51544 /**
51545  * @class Roo.grid.GridEditor
51546  * @extends Roo.Editor
51547  * Class for creating and editable grid elements.
51548  * @param {Object} config any settings (must include field)
51549  */
51550 Roo.grid.GridEditor = function(field, config){
51551     if (!config && field.field) {
51552         config = field;
51553         field = Roo.factory(config.field, Roo.form);
51554     }
51555     Roo.grid.GridEditor.superclass.constructor.call(this, field, config);
51556     field.monitorTab = false;
51557 };
51558
51559 Roo.extend(Roo.grid.GridEditor, Roo.Editor, {
51560     
51561     /**
51562      * @cfg {Roo.form.Field} field Field to wrap (or xtyped)
51563      */
51564     
51565     alignment: "tl-tl",
51566     autoSize: "width",
51567     hideEl : false,
51568     cls: "x-small-editor x-grid-editor",
51569     shim:false,
51570     shadow:"frame"
51571 });/*
51572  * Based on:
51573  * Ext JS Library 1.1.1
51574  * Copyright(c) 2006-2007, Ext JS, LLC.
51575  *
51576  * Originally Released Under LGPL - original licence link has changed is not relivant.
51577  *
51578  * Fork - LGPL
51579  * <script type="text/javascript">
51580  */
51581   
51582
51583   
51584 Roo.grid.PropertyRecord = Roo.data.Record.create([
51585     {name:'name',type:'string'},  'value'
51586 ]);
51587
51588
51589 Roo.grid.PropertyStore = function(grid, source){
51590     this.grid = grid;
51591     this.store = new Roo.data.Store({
51592         recordType : Roo.grid.PropertyRecord
51593     });
51594     this.store.on('update', this.onUpdate,  this);
51595     if(source){
51596         this.setSource(source);
51597     }
51598     Roo.grid.PropertyStore.superclass.constructor.call(this);
51599 };
51600
51601
51602
51603 Roo.extend(Roo.grid.PropertyStore, Roo.util.Observable, {
51604     setSource : function(o){
51605         this.source = o;
51606         this.store.removeAll();
51607         var data = [];
51608         for(var k in o){
51609             if(this.isEditableValue(o[k])){
51610                 data.push(new Roo.grid.PropertyRecord({name: k, value: o[k]}, k));
51611             }
51612         }
51613         this.store.loadRecords({records: data}, {}, true);
51614     },
51615
51616     onUpdate : function(ds, record, type){
51617         if(type == Roo.data.Record.EDIT){
51618             var v = record.data['value'];
51619             var oldValue = record.modified['value'];
51620             if(this.grid.fireEvent('beforepropertychange', this.source, record.id, v, oldValue) !== false){
51621                 this.source[record.id] = v;
51622                 record.commit();
51623                 this.grid.fireEvent('propertychange', this.source, record.id, v, oldValue);
51624             }else{
51625                 record.reject();
51626             }
51627         }
51628     },
51629
51630     getProperty : function(row){
51631        return this.store.getAt(row);
51632     },
51633
51634     isEditableValue: function(val){
51635         if(val && val instanceof Date){
51636             return true;
51637         }else if(typeof val == 'object' || typeof val == 'function'){
51638             return false;
51639         }
51640         return true;
51641     },
51642
51643     setValue : function(prop, value){
51644         this.source[prop] = value;
51645         this.store.getById(prop).set('value', value);
51646     },
51647
51648     getSource : function(){
51649         return this.source;
51650     }
51651 });
51652
51653 Roo.grid.PropertyColumnModel = function(grid, store){
51654     this.grid = grid;
51655     var g = Roo.grid;
51656     g.PropertyColumnModel.superclass.constructor.call(this, [
51657         {header: this.nameText, sortable: true, dataIndex:'name', id: 'name'},
51658         {header: this.valueText, resizable:false, dataIndex: 'value', id: 'value'}
51659     ]);
51660     this.store = store;
51661     this.bselect = Roo.DomHelper.append(document.body, {
51662         tag: 'select', style:'display:none', cls: 'x-grid-editor', children: [
51663             {tag: 'option', value: 'true', html: 'true'},
51664             {tag: 'option', value: 'false', html: 'false'}
51665         ]
51666     });
51667     Roo.id(this.bselect);
51668     var f = Roo.form;
51669     this.editors = {
51670         'date' : new g.GridEditor(new f.DateField({selectOnFocus:true})),
51671         'string' : new g.GridEditor(new f.TextField({selectOnFocus:true})),
51672         'number' : new g.GridEditor(new f.NumberField({selectOnFocus:true, style:'text-align:left;'})),
51673         'int' : new g.GridEditor(new f.NumberField({selectOnFocus:true, allowDecimals:false, style:'text-align:left;'})),
51674         'boolean' : new g.GridEditor(new f.Field({el:this.bselect,selectOnFocus:true}))
51675     };
51676     this.renderCellDelegate = this.renderCell.createDelegate(this);
51677     this.renderPropDelegate = this.renderProp.createDelegate(this);
51678 };
51679
51680 Roo.extend(Roo.grid.PropertyColumnModel, Roo.grid.ColumnModel, {
51681     
51682     
51683     nameText : 'Name',
51684     valueText : 'Value',
51685     
51686     dateFormat : 'm/j/Y',
51687     
51688     
51689     renderDate : function(dateVal){
51690         return dateVal.dateFormat(this.dateFormat);
51691     },
51692
51693     renderBool : function(bVal){
51694         return bVal ? 'true' : 'false';
51695     },
51696
51697     isCellEditable : function(colIndex, rowIndex){
51698         return colIndex == 1;
51699     },
51700
51701     getRenderer : function(col){
51702         return col == 1 ?
51703             this.renderCellDelegate : this.renderPropDelegate;
51704     },
51705
51706     renderProp : function(v){
51707         return this.getPropertyName(v);
51708     },
51709
51710     renderCell : function(val){
51711         var rv = val;
51712         if(val instanceof Date){
51713             rv = this.renderDate(val);
51714         }else if(typeof val == 'boolean'){
51715             rv = this.renderBool(val);
51716         }
51717         return Roo.util.Format.htmlEncode(rv);
51718     },
51719
51720     getPropertyName : function(name){
51721         var pn = this.grid.propertyNames;
51722         return pn && pn[name] ? pn[name] : name;
51723     },
51724
51725     getCellEditor : function(colIndex, rowIndex){
51726         var p = this.store.getProperty(rowIndex);
51727         var n = p.data['name'], val = p.data['value'];
51728         
51729         if(typeof(this.grid.customEditors[n]) == 'string'){
51730             return this.editors[this.grid.customEditors[n]];
51731         }
51732         if(typeof(this.grid.customEditors[n]) != 'undefined'){
51733             return this.grid.customEditors[n];
51734         }
51735         if(val instanceof Date){
51736             return this.editors['date'];
51737         }else if(typeof val == 'number'){
51738             return this.editors['number'];
51739         }else if(typeof val == 'boolean'){
51740             return this.editors['boolean'];
51741         }else{
51742             return this.editors['string'];
51743         }
51744     }
51745 });
51746
51747 /**
51748  * @class Roo.grid.PropertyGrid
51749  * @extends Roo.grid.EditorGrid
51750  * This class represents the  interface of a component based property grid control.
51751  * <br><br>Usage:<pre><code>
51752  var grid = new Roo.grid.PropertyGrid("my-container-id", {
51753       
51754  });
51755  // set any options
51756  grid.render();
51757  * </code></pre>
51758   
51759  * @constructor
51760  * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered -
51761  * The container MUST have some type of size defined for the grid to fill. The container will be
51762  * automatically set to position relative if it isn't already.
51763  * @param {Object} config A config object that sets properties on this grid.
51764  */
51765 Roo.grid.PropertyGrid = function(container, config){
51766     config = config || {};
51767     var store = new Roo.grid.PropertyStore(this);
51768     this.store = store;
51769     var cm = new Roo.grid.PropertyColumnModel(this, store);
51770     store.store.sort('name', 'ASC');
51771     Roo.grid.PropertyGrid.superclass.constructor.call(this, container, Roo.apply({
51772         ds: store.store,
51773         cm: cm,
51774         enableColLock:false,
51775         enableColumnMove:false,
51776         stripeRows:false,
51777         trackMouseOver: false,
51778         clicksToEdit:1
51779     }, config));
51780     this.getGridEl().addClass('x-props-grid');
51781     this.lastEditRow = null;
51782     this.on('columnresize', this.onColumnResize, this);
51783     this.addEvents({
51784          /**
51785              * @event beforepropertychange
51786              * Fires before a property changes (return false to stop?)
51787              * @param {Roo.grid.PropertyGrid} grid property grid? (check could be store)
51788              * @param {String} id Record Id
51789              * @param {String} newval New Value
51790          * @param {String} oldval Old Value
51791              */
51792         "beforepropertychange": true,
51793         /**
51794              * @event propertychange
51795              * Fires after a property changes
51796              * @param {Roo.grid.PropertyGrid} grid property grid? (check could be store)
51797              * @param {String} id Record Id
51798              * @param {String} newval New Value
51799          * @param {String} oldval Old Value
51800              */
51801         "propertychange": true
51802     });
51803     this.customEditors = this.customEditors || {};
51804 };
51805 Roo.extend(Roo.grid.PropertyGrid, Roo.grid.EditorGrid, {
51806     
51807      /**
51808      * @cfg {Object} customEditors map of colnames=> custom editors.
51809      * the custom editor can be one of the standard ones (date|string|number|int|boolean), or a
51810      * grid editor eg. Roo.grid.GridEditor(new Roo.form.TextArea({selectOnFocus:true})),
51811      * false disables editing of the field.
51812          */
51813     
51814       /**
51815      * @cfg {Object} propertyNames map of property Names to their displayed value
51816          */
51817     
51818     render : function(){
51819         Roo.grid.PropertyGrid.superclass.render.call(this);
51820         this.autoSize.defer(100, this);
51821     },
51822
51823     autoSize : function(){
51824         Roo.grid.PropertyGrid.superclass.autoSize.call(this);
51825         if(this.view){
51826             this.view.fitColumns();
51827         }
51828     },
51829
51830     onColumnResize : function(){
51831         this.colModel.setColumnWidth(1, this.container.getWidth(true)-this.colModel.getColumnWidth(0));
51832         this.autoSize();
51833     },
51834     /**
51835      * Sets the data for the Grid
51836      * accepts a Key => Value object of all the elements avaiable.
51837      * @param {Object} data  to appear in grid.
51838      */
51839     setSource : function(source){
51840         this.store.setSource(source);
51841         //this.autoSize();
51842     },
51843     /**
51844      * Gets all the data from the grid.
51845      * @return {Object} data  data stored in grid
51846      */
51847     getSource : function(){
51848         return this.store.getSource();
51849     }
51850 });/*
51851  * Based on:
51852  * Ext JS Library 1.1.1
51853  * Copyright(c) 2006-2007, Ext JS, LLC.
51854  *
51855  * Originally Released Under LGPL - original licence link has changed is not relivant.
51856  *
51857  * Fork - LGPL
51858  * <script type="text/javascript">
51859  */
51860  
51861 /**
51862  * @class Roo.LoadMask
51863  * A simple utility class for generically masking elements while loading data.  If the element being masked has
51864  * an underlying {@link Roo.data.Store}, the masking will be automatically synchronized with the store's loading
51865  * process and the mask element will be cached for reuse.  For all other elements, this mask will replace the
51866  * element's UpdateManager load indicator and will be destroyed after the initial load.
51867  * @constructor
51868  * Create a new LoadMask
51869  * @param {String/HTMLElement/Roo.Element} el The element or DOM node, or its id
51870  * @param {Object} config The config object
51871  */
51872 Roo.LoadMask = function(el, config){
51873     this.el = Roo.get(el);
51874     Roo.apply(this, config);
51875     if(this.store){
51876         this.store.on('beforeload', this.onBeforeLoad, this);
51877         this.store.on('load', this.onLoad, this);
51878         this.store.on('loadexception', this.onLoad, this);
51879         this.removeMask = false;
51880     }else{
51881         var um = this.el.getUpdateManager();
51882         um.showLoadIndicator = false; // disable the default indicator
51883         um.on('beforeupdate', this.onBeforeLoad, this);
51884         um.on('update', this.onLoad, this);
51885         um.on('failure', this.onLoad, this);
51886         this.removeMask = true;
51887     }
51888 };
51889
51890 Roo.LoadMask.prototype = {
51891     /**
51892      * @cfg {Boolean} removeMask
51893      * True to create a single-use mask that is automatically destroyed after loading (useful for page loads),
51894      * False to persist the mask element reference for multiple uses (e.g., for paged data widgets).  Defaults to false.
51895      */
51896     /**
51897      * @cfg {String} msg
51898      * The text to display in a centered loading message box (defaults to 'Loading...')
51899      */
51900     msg : 'Loading...',
51901     /**
51902      * @cfg {String} msgCls
51903      * The CSS class to apply to the loading message element (defaults to "x-mask-loading")
51904      */
51905     msgCls : 'x-mask-loading',
51906
51907     /**
51908      * Read-only. True if the mask is currently disabled so that it will not be displayed (defaults to false)
51909      * @type Boolean
51910      */
51911     disabled: false,
51912
51913     /**
51914      * Disables the mask to prevent it from being displayed
51915      */
51916     disable : function(){
51917        this.disabled = true;
51918     },
51919
51920     /**
51921      * Enables the mask so that it can be displayed
51922      */
51923     enable : function(){
51924         this.disabled = false;
51925     },
51926
51927     // private
51928     onLoad : function(){
51929         this.el.unmask(this.removeMask);
51930     },
51931
51932     // private
51933     onBeforeLoad : function(){
51934         if(!this.disabled){
51935             this.el.mask(this.msg, this.msgCls);
51936         }
51937     },
51938
51939     // private
51940     destroy : function(){
51941         if(this.store){
51942             this.store.un('beforeload', this.onBeforeLoad, this);
51943             this.store.un('load', this.onLoad, this);
51944             this.store.un('loadexception', this.onLoad, this);
51945         }else{
51946             var um = this.el.getUpdateManager();
51947             um.un('beforeupdate', this.onBeforeLoad, this);
51948             um.un('update', this.onLoad, this);
51949             um.un('failure', this.onLoad, this);
51950         }
51951     }
51952 };/*
51953  * Based on:
51954  * Ext JS Library 1.1.1
51955  * Copyright(c) 2006-2007, Ext JS, LLC.
51956  *
51957  * Originally Released Under LGPL - original licence link has changed is not relivant.
51958  *
51959  * Fork - LGPL
51960  * <script type="text/javascript">
51961  */
51962 Roo.XTemplate = function(){
51963     Roo.XTemplate.superclass.constructor.apply(this, arguments);
51964     var s = this.html;
51965
51966     s = ['<tpl>', s, '</tpl>'].join('');
51967
51968     var re = /<tpl\b[^>]*>((?:(?=([^<]+))\2|<(?!tpl\b[^>]*>))*?)<\/tpl>/;
51969
51970     var nameRe = /^<tpl\b[^>]*?for="(.*?)"/;
51971     var ifRe = /^<tpl\b[^>]*?if="(.*?)"/;
51972     var execRe = /^<tpl\b[^>]*?exec="(.*?)"/;
51973     var m, id = 0;
51974     var tpls = [];
51975
51976     while(m = s.match(re)){
51977        var m2 = m[0].match(nameRe);
51978        var m3 = m[0].match(ifRe);
51979        var m4 = m[0].match(execRe);
51980        var exp = null, fn = null, exec = null;
51981        var name = m2 && m2[1] ? m2[1] : '';
51982        if(m3){
51983            exp = m3 && m3[1] ? m3[1] : null;
51984            if(exp){
51985                fn = new Function('values', 'parent', 'with(values){ return '+(Roo.util.Format.htmlDecode(exp))+'; }');
51986            }
51987        }
51988        if(m4){
51989            exp = m4 && m4[1] ? m4[1] : null;
51990            if(exp){
51991                exec = new Function('values', 'parent', 'with(values){ '+(Roo.util.Format.htmlDecode(exp))+'; }');
51992            }
51993        }
51994        if(name){
51995            switch(name){
51996                case '.': name = new Function('values', 'parent', 'with(values){ return values; }'); break;
51997                case '..': name = new Function('values', 'parent', 'with(values){ return parent; }'); break;
51998                default: name = new Function('values', 'parent', 'with(values){ return '+name+'; }');
51999            }
52000        }
52001        tpls.push({
52002             id: id,
52003             target: name,
52004             exec: exec,
52005             test: fn,
52006             body: m[1]||''
52007         });
52008        s = s.replace(m[0], '{xtpl'+ id + '}');
52009        ++id;
52010     }
52011     for(var i = tpls.length-1; i >= 0; --i){
52012         this.compileTpl(tpls[i]);
52013     }
52014     this.master = tpls[tpls.length-1];
52015     this.tpls = tpls;
52016 };
52017 Roo.extend(Roo.XTemplate, Roo.Template, {
52018
52019     re : /\{([\w-\.]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
52020
52021     applySubTemplate : function(id, values, parent){
52022         var t = this.tpls[id];
52023         if(t.test && !t.test.call(this, values, parent)){
52024             return '';
52025         }
52026         if(t.exec && t.exec.call(this, values, parent)){
52027             return '';
52028         }
52029         var vs = t.target ? t.target.call(this, values, parent) : values;
52030         parent = t.target ? values : parent;
52031         if(t.target && vs instanceof Array){
52032             var buf = [];
52033             for(var i = 0, len = vs.length; i < len; i++){
52034                 buf[buf.length] = t.compiled.call(this, vs[i], parent);
52035             }
52036             return buf.join('');
52037         }
52038         return t.compiled.call(this, vs, parent);
52039     },
52040
52041     compileTpl : function(tpl){
52042         var fm = Roo.util.Format;
52043         var useF = this.disableFormats !== true;
52044         var sep = Roo.isGecko ? "+" : ",";
52045         var fn = function(m, name, format, args){
52046             if(name.substr(0, 4) == 'xtpl'){
52047                 return "'"+ sep +'this.applySubTemplate('+name.substr(4)+', values, parent)'+sep+"'";
52048             }
52049             var v;
52050             if(name.indexOf('.') != -1){
52051                 v = name;
52052             }else{
52053                 v = "values['" + name + "']";
52054             }
52055             if(format && useF){
52056                 args = args ? ',' + args : "";
52057                 if(format.substr(0, 5) != "this."){
52058                     format = "fm." + format + '(';
52059                 }else{
52060                     format = 'this.call("'+ format.substr(5) + '", ';
52061                     args = ", values";
52062                 }
52063             }else{
52064                 args= ''; format = "("+v+" === undefined ? '' : ";
52065             }
52066             return "'"+ sep + format + v + args + ")"+sep+"'";
52067         };
52068         var body;
52069         // branched to use + in gecko and [].join() in others
52070         if(Roo.isGecko){
52071             body = "tpl.compiled = function(values, parent){ return '" +
52072                    tpl.body.replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn) +
52073                     "';};";
52074         }else{
52075             body = ["tpl.compiled = function(values, parent){ return ['"];
52076             body.push(tpl.body.replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn));
52077             body.push("'].join('');};");
52078             body = body.join('');
52079         }
52080         /** eval:var:zzzzzzz */
52081         eval(body);
52082         return this;
52083     },
52084
52085     applyTemplate : function(values){
52086         return this.master.compiled.call(this, values, {});
52087         var s = this.subs;
52088     },
52089
52090     apply : function(){
52091         return this.applyTemplate.apply(this, arguments);
52092     },
52093
52094     compile : function(){return this;}
52095 });
52096
52097 Roo.XTemplate.from = function(el){
52098     el = Roo.getDom(el);
52099     return new Roo.XTemplate(el.value || el.innerHTML);
52100 };/*
52101  * Original code for Roojs - LGPL
52102  * <script type="text/javascript">
52103  */
52104  
52105 /**
52106  * @class Roo.XComponent
52107  * A delayed Element creator...
52108  * Or a way to group chunks of interface together.
52109  * 
52110  * Mypart.xyx = new Roo.XComponent({
52111
52112     parent : 'Mypart.xyz', // empty == document.element.!!
52113     order : '001',
52114     name : 'xxxx'
52115     region : 'xxxx'
52116     disabled : function() {} 
52117      
52118     tree : function() { // return an tree of xtype declared components
52119         var MODULE = this;
52120         return 
52121         {
52122             xtype : 'NestedLayoutPanel',
52123             // technicall
52124         }
52125      ]
52126  *})
52127  *
52128  *
52129  * It can be used to build a big heiracy, with parent etc.
52130  * or you can just use this to render a single compoent to a dom element
52131  * MYPART.render(Roo.Element | String(id) | dom_element )
52132  * 
52133  * @extends Roo.util.Observable
52134  * @constructor
52135  * @param cfg {Object} configuration of component
52136  * 
52137  */
52138 Roo.XComponent = function(cfg) {
52139     Roo.apply(this, cfg);
52140     this.addEvents({ 
52141         /**
52142              * @event built
52143              * Fires when this the componnt is built
52144              * @param {Roo.XComponent} c the component
52145              */
52146         'built' : true,
52147         /**
52148              * @event buildcomplete
52149              * Fires on the top level element when all elements have been built
52150              * @param {Roo.XComponent} c the top level component.
52151          */
52152         'buildcomplete' : true
52153         
52154     });
52155     this.region = this.region || 'center'; // default..
52156     Roo.XComponent.register(this);
52157     this.modules = false;
52158     this.el = false; // where the layout goes..
52159     
52160     
52161 }
52162 Roo.extend(Roo.XComponent, Roo.util.Observable, {
52163     /**
52164      * @property el
52165      * The created element (with Roo.factory())
52166      * @type {Roo.Layout}
52167      */
52168     el  : false,
52169     
52170     /**
52171      * @property el
52172      * for BC  - use el in new code
52173      * @type {Roo.Layout}
52174      */
52175     panel : false,
52176     
52177     /**
52178      * @property layout
52179      * for BC  - use el in new code
52180      * @type {Roo.Layout}
52181      */
52182     layout : false,
52183     
52184      /**
52185      * @cfg {Function|boolean} disabled
52186      * If this module is disabled by some rule, return true from the funtion
52187      */
52188     disabled : false,
52189     
52190     /**
52191      * @cfg {String} parent 
52192      * Name of parent element which it get xtype added to..
52193      */
52194     parent: false,
52195     
52196     /**
52197      * @cfg {String} order
52198      * Used to set the order in which elements are created (usefull for multiple tabs)
52199      */
52200     
52201     order : false,
52202     /**
52203      * @cfg {String} name
52204      * String to display while loading.
52205      */
52206     name : false,
52207     /**
52208      * @cfg {String} region
52209      * Region to render component to (defaults to center)
52210      */
52211     region : 'center',
52212     
52213     /**
52214      * @cfg {Array} items
52215      * A single item array - the first element is the root of the tree..
52216      * It's done this way to stay compatible with the Xtype system...
52217      */
52218     items : false,
52219     
52220     
52221      /**
52222      * render
52223      * render element to dom or tree
52224      * @param {Roo.Element|String|DomElement} optional render to if parent is not set.
52225      */
52226     
52227     render : function(el)
52228     {
52229         
52230         el = el || false;
52231         var hp = this.parent ? 1 : 0;
52232         
52233         if (!el && typeof(this.parent) == 'string' && this.parent.substring(0,1) == '#') {
52234             // if parent is a '#.....' string, then let's use that..
52235             var ename = this.parent.substr(1)
52236             this.parent = false;
52237             el = Roo.get(ename);
52238             if (!el) {
52239                 Roo.log("Warning - element can not be found :#" + ename );
52240                 return;
52241             }
52242         }
52243         
52244         
52245         if (!this.parent) {
52246             
52247             el = el ? Roo.get(el) : false;
52248             
52249             // it's a top level one..
52250             this.parent =  {
52251                 el : new Roo.BorderLayout(el || document.body, {
52252                 
52253                      center: {
52254                          titlebar: false,
52255                          autoScroll:false,
52256                          closeOnTab: true,
52257                          tabPosition: 'top',
52258                           //resizeTabs: true,
52259                          alwaysShowTabs: el && hp? false :  true,
52260                          hideTabs: el || !hp ? true :  false,
52261                          minTabWidth: 140
52262                      }
52263                  })
52264             }
52265         }
52266         
52267         
52268             
52269         var tree = this.tree();
52270         tree.region = tree.region || this.region;
52271         this.el = this.parent.el.addxtype(tree);
52272         this.fireEvent('built', this);
52273         
52274         this.panel = this.el;
52275         this.layout = this.panel.layout;    
52276          
52277     }
52278     
52279 });
52280
52281 Roo.apply(Roo.XComponent, {
52282     
52283     /**
52284      * @property  buildCompleted
52285      * True when the builder has completed building the interface.
52286      * @type Boolean
52287      */
52288     buildCompleted : false,
52289      
52290     /**
52291      * @property  topModule
52292      * the upper most module - uses document.element as it's constructor.
52293      * @type Object
52294      */
52295      
52296     topModule  : false,
52297       
52298     /**
52299      * @property  modules
52300      * array of modules to be created by registration system.
52301      * @type {Array} of Roo.XComponent
52302      */
52303     
52304     modules : [],
52305     /**
52306      * @property  elmodules
52307      * array of modules to be created by which use #ID 
52308      * @type {Array} of Roo.XComponent
52309      */
52310      
52311     elmodules : [],
52312
52313     
52314     /**
52315      * Register components to be built later.
52316      *
52317      * This solves the following issues
52318      * - Building is not done on page load, but after an authentication process has occured.
52319      * - Interface elements are registered on page load
52320      * - Parent Interface elements may not be loaded before child, so this handles that..
52321      * 
52322      *
52323      * example:
52324      * 
52325      * MyApp.register({
52326           order : '000001',
52327           module : 'Pman.Tab.projectMgr',
52328           region : 'center',
52329           parent : 'Pman.layout',
52330           disabled : false,  // or use a function..
52331         })
52332      
52333      * * @param {Object} details about module
52334      */
52335     register : function(obj) {
52336         this.modules.push(obj);
52337          
52338     },
52339     /**
52340      * convert a string to an object..
52341      * eg. 'AAA.BBB' -> finds AAA.BBB
52342
52343      */
52344     
52345     toObject : function(str)
52346     {
52347         if (!str || typeof(str) == 'object') {
52348             return str;
52349         }
52350         if (str.substring(0,1) == '#') {
52351             return str;
52352         }
52353
52354         var ar = str.split('.');
52355         var rt, o;
52356         rt = ar.shift();
52357             /** eval:var:o */
52358         try {
52359             eval('if (typeof ' + rt + ' == "undefined"){ o = false;} o = ' + rt + ';');
52360         } catch (e) {
52361             throw "Module not found : " + str;
52362         }
52363         
52364         if (o === false) {
52365             throw "Module not found : " + str;
52366         }
52367         Roo.each(ar, function(e) {
52368             if (typeof(o[e]) == 'undefined') {
52369                 throw "Module not found : " + str;
52370             }
52371             o = o[e];
52372         });
52373         
52374         return o;
52375         
52376     },
52377     
52378     
52379     /**
52380      * move modules into their correct place in the tree..
52381      * 
52382      */
52383     preBuild : function ()
52384     {
52385         var _t = this;
52386         Roo.each(this.modules , function (obj)
52387         {
52388             var opar = obj.parent;
52389             try { 
52390                 obj.parent = this.toObject(opar);
52391             } catch(e) {
52392                 Roo.log(e.toString());
52393                 return;
52394             }
52395             
52396             if (!obj.parent) {
52397                 this.topModule = obj;
52398                 return;
52399             }
52400             if (typeof(obj.parent) == 'string') {
52401                 this.elmodules.push(obj);
52402                 return;
52403             }
52404             if (obj.parent.constructor != Roo.XComponent) {
52405                 Roo.log("Object Parent is not instance of XComponent:" + obj.name)
52406             }
52407             if (!obj.parent.modules) {
52408                 obj.parent.modules = new Roo.util.MixedCollection(false, 
52409                     function(o) { return o.order + '' }
52410                 );
52411             }
52412             
52413             obj.parent.modules.add(obj);
52414         }, this);
52415     },
52416     
52417      /**
52418      * make a list of modules to build.
52419      * @return {Array} list of modules. 
52420      */ 
52421     
52422     buildOrder : function()
52423     {
52424         var _this = this;
52425         var cmp = function(a,b) {   
52426             return String(a).toUpperCase() > String(b).toUpperCase() ? 1 : -1;
52427         };
52428         if ((!this.topModule || !this.topModule.modules) && !this.elmodules.length) {
52429             throw "No top level modules to build";
52430         }
52431         
52432         // make a flat list in order of modules to build.
52433         var mods = this.topModule ? [ this.topModule ] : [];
52434         Roo.each(this.elmodules,function(e) { mods.push(e) });
52435
52436         
52437         // add modules to their parents..
52438         var addMod = function(m) {
52439            // Roo.debug && Roo.log(m.modKey);
52440             
52441             mods.push(m);
52442             if (m.modules) {
52443                 m.modules.keySort('ASC',  cmp );
52444                 m.modules.each(addMod);
52445             }
52446             // not sure if this is used any more..
52447             if (m.finalize) {
52448                 m.finalize.name = m.name + " (clean up) ";
52449                 mods.push(m.finalize);
52450             }
52451             
52452         }
52453         if (this.topModule) { 
52454             this.topModule.modules.keySort('ASC',  cmp );
52455             this.topModule.modules.each(addMod);
52456         }
52457         return mods;
52458     },
52459     
52460      /**
52461      * Build the registered modules.
52462      * @param {Object} parent element.
52463      * @param {Function} optional method to call after module has been added.
52464      * 
52465      */ 
52466    
52467     build : function() 
52468     {
52469         
52470         this.preBuild();
52471         var mods = this.buildOrder();
52472       
52473         //this.allmods = mods;
52474         //Roo.debug && Roo.log(mods);
52475         //return;
52476         if (!mods.length) { // should not happen
52477             throw "NO modules!!!";
52478         }
52479         
52480         
52481         
52482         // flash it up as modal - so we store the mask!?
52483         Roo.MessageBox.show({ title: 'loading' });
52484         Roo.MessageBox.show({
52485            title: "Please wait...",
52486            msg: "Building Interface...",
52487            width:450,
52488            progress:true,
52489            closable:false,
52490            modal: false
52491           
52492         });
52493         var total = mods.length;
52494         
52495         var _this = this;
52496         var progressRun = function() {
52497             if (!mods.length) {
52498                 Roo.debug && Roo.log('hide?');
52499                 Roo.MessageBox.hide();
52500                 if (_this.topModule) { 
52501                     _this.topModule.fireEvent('buildcomplete', _this.topModule);
52502                 }
52503                 // THE END...
52504                 return false;   
52505             }
52506             
52507             var m = mods.shift();
52508             
52509             
52510             Roo.debug && Roo.log(m);
52511             // not sure if this is supported any more.. - modules that are are just function
52512             if (typeof(m) == 'function') { 
52513                 m.call(this);
52514                 return progressRun.defer(10, _this);
52515             } 
52516             
52517             
52518             
52519             Roo.MessageBox.updateProgress(
52520                 (total  - mods.length)/total,  "Building Interface " + (total  - mods.length) + 
52521                     " of " + total + 
52522                     (m.name ? (' - ' + m.name) : '')
52523                     );
52524             
52525          
52526             // is the module disabled?
52527             var disabled = (typeof(m.disabled) == 'function') ?
52528                 m.disabled.call(m.module.disabled) : m.disabled;    
52529             
52530             
52531             if (disabled) {
52532                 return progressRun(); // we do not update the display!
52533             }
52534             
52535             // now build 
52536             
52537             m.render();
52538             // it's 10 on top level, and 1 on others??? why...
52539             return progressRun.defer(10, _this);
52540              
52541         }
52542         progressRun.defer(1, _this);
52543      
52544         
52545         
52546     }
52547     
52548      
52549    
52550     
52551     
52552 });
52553  //<script type="text/javascript">
52554
52555
52556 /**
52557  * @class Roo.Login
52558  * @extends Roo.LayoutDialog
52559  * A generic Login Dialog..... - only one needed in theory!?!?
52560  *
52561  * Fires XComponent builder on success...
52562  * 
52563  * Sends 
52564  *    username,password, lang = for login actions.
52565  *    check = 1 for periodic checking that sesion is valid.
52566  *    passwordRequest = email request password
52567  *    logout = 1 = to logout
52568  * 
52569  * Affects: (this id="????" elements)
52570  *   loading  (removed) (used to indicate application is loading)
52571  *   loading-mask (hides) (used to hide application when it's building loading)
52572  *   
52573  * 
52574  * Usage: 
52575  *    
52576  * 
52577  * Myapp.login = Roo.Login({
52578      url: xxxx,
52579    
52580      realm : 'Myapp', 
52581      
52582      
52583      method : 'POST',
52584      
52585      
52586      * 
52587  })
52588  * 
52589  * 
52590  * 
52591  **/
52592  
52593 Roo.Login = function(cfg)
52594 {
52595     this.addEvents({
52596         'refreshed' : true
52597     });
52598     
52599     Roo.apply(this,cfg);
52600     
52601     Roo.onReady(function() {
52602         this.onLoad();
52603     }, this);
52604     // call parent..
52605     
52606    
52607     Roo.Login.superclass.constructor.call(this, this);
52608     //this.addxtype(this.items[0]);
52609     
52610     
52611 }
52612
52613
52614 Roo.extend(Roo.Login, Roo.LayoutDialog, {
52615     
52616     /**
52617      * @cfg {String} method
52618      * Method used to query for login details.
52619      */
52620     
52621     method : 'POST',
52622     /**
52623      * @cfg {String} url
52624      * URL to query login data. - eg. baseURL + '/Login.php'
52625      */
52626     url : '',
52627     
52628     /**
52629      * @property user
52630      * The user data - if user.id < 0 then login will be bypassed. (used for inital setup situation.
52631      * @type {Object} 
52632      */
52633     user : false,
52634     /**
52635      * @property checkFails
52636      * Number of times we have attempted to get authentication check, and failed.
52637      * @type {Number} 
52638      */
52639     checkFails : 0,
52640       /**
52641      * @property intervalID
52642      * The window interval that does the constant login checking.
52643      * @type {Number} 
52644      */
52645     intervalID : 0,
52646     
52647     
52648     onLoad : function() // called on page load...
52649     {
52650         // load 
52651          
52652         if (Roo.get('loading')) { // clear any loading indicator..
52653             Roo.get('loading').remove();
52654         }
52655         
52656         //this.switchLang('en'); // set the language to english..
52657        
52658         this.check({
52659             success:  function(response, opts)  {  // check successfull...
52660             
52661                 var res = this.processResponse(response);
52662                 this.checkFails =0;
52663                 if (!res.success) { // error!
52664                     this.checkFails = 5;
52665                     //console.log('call failure');
52666                     return this.failure(response,opts);
52667                 }
52668                 
52669                 if (!res.data.id) { // id=0 == login failure.
52670                     return this.show();
52671                 }
52672                 
52673                               
52674                         //console.log(success);
52675                 this.fillAuth(res.data);   
52676                 this.checkFails =0;
52677                 Roo.XComponent.build();
52678             },
52679             failure : this.show
52680         });
52681         
52682     }, 
52683     
52684     
52685     check: function(cfg) // called every so often to refresh cookie etc..
52686     {
52687         if (cfg.again) { // could be undefined..
52688             this.checkFails++;
52689         } else {
52690             this.checkFails = 0;
52691         }
52692         var _this = this;
52693         if (this.sending) {
52694             if ( this.checkFails > 4) {
52695                 Roo.MessageBox.alert("Error",  
52696                     "Error getting authentication status. - try reloading, or wait a while", function() {
52697                         _this.sending = false;
52698                     }); 
52699                 return;
52700             }
52701             cfg.again = true;
52702             _this.check.defer(10000, _this, [ cfg ]); // check in 10 secs.
52703             return;
52704         }
52705         this.sending = true;
52706         
52707         Roo.Ajax.request({  
52708             url: this.url,
52709             params: {
52710                 getAuthUser: true
52711             },  
52712             method: this.method,
52713             success:  cfg.success || this.success,
52714             failure : cfg.failure || this.failure,
52715             scope : this,
52716             callCfg : cfg
52717               
52718         });  
52719     }, 
52720     
52721     
52722     logout: function()
52723     {
52724         window.onbeforeunload = function() { }; // false does not work for IE..
52725         this.user = false;
52726         var _this = this;
52727         
52728         Roo.Ajax.request({  
52729             url: this.url,
52730             params: {
52731                 logout: 1
52732             },  
52733             method: 'GET',
52734             failure : function() {
52735                 Roo.MessageBox.alert("Error", "Error logging out. - continuing anyway.", function() {
52736                     document.location = document.location.toString() + '?ts=' + Math.random();
52737                 });
52738                 
52739             },
52740             success : function() {
52741                 _this.user = false;
52742                 this.checkFails =0;
52743                 // fixme..
52744                 document.location = document.location.toString() + '?ts=' + Math.random();
52745             }
52746               
52747               
52748         }); 
52749     },
52750     
52751     processResponse : function (response)
52752     {
52753         var res = '';
52754         try {
52755             res = Roo.decode(response.responseText);
52756             // oops...
52757             if (typeof(res) != 'object') {
52758                 res = { success : false, errorMsg : res, errors : true };
52759             }
52760             if (typeof(res.success) == 'undefined') {
52761                 res.success = false;
52762             }
52763             
52764         } catch(e) {
52765             res = { success : false,  errorMsg : response.responseText, errors : true };
52766         }
52767         return res;
52768     },
52769     
52770     success : function(response, opts)  // check successfull...
52771     {  
52772         this.sending = false;
52773         var res = this.processResponse(response);
52774         if (!res.success) {
52775             return this.failure(response, opts);
52776         }
52777         if (!res.data || !res.data.id) {
52778             return this.failure(response,opts);
52779         }
52780         //console.log(res);
52781         this.fillAuth(res.data);
52782         
52783         this.checkFails =0;
52784         
52785     },
52786     
52787     
52788     failure : function (response, opts) // called if login 'check' fails.. (causes re-check)
52789     {
52790         this.authUser = -1;
52791         this.sending = false;
52792         var res = this.processResponse(response);
52793         //console.log(res);
52794         if ( this.checkFails > 2) {
52795         
52796             Roo.MessageBox.alert("Error", res.errorMsg ? res.errorMsg : 
52797                 "Error getting authentication status. - try reloading"); 
52798             return;
52799         }
52800         opts.callCfg.again = true;
52801         this.check.defer(1000, this, [ opts.callCfg ]);
52802         return;  
52803     },
52804     
52805     
52806     
52807     fillAuth: function(au) {
52808         this.startAuthCheck();
52809         this.authUserId = au.id;
52810         this.authUser = au;
52811         this.lastChecked = new Date();
52812         this.fireEvent('refreshed', au);
52813         //Pman.Tab.FaxQueue.newMaxId(au.faxMax);
52814         //Pman.Tab.FaxTab.setTitle(au.faxNumPending);
52815         au.lang = au.lang || 'en';
52816         //this.switchLang(Roo.state.Manager.get('Pman.Login.lang', 'en'));
52817         Roo.state.Manager.set( this.realm + 'lang' , au.lang);
52818         this.switchLang(au.lang );
52819         
52820      
52821         // open system... - -on setyp..
52822         if (this.authUserId  < 0) {
52823             Roo.MessageBox.alert("Warning", 
52824                 "This is an open system - please set up a admin user with a password.");  
52825         }
52826          
52827         //Pman.onload(); // which should do nothing if it's a re-auth result...
52828         
52829              
52830     },
52831     
52832     startAuthCheck : function() // starter for timeout checking..
52833     {
52834         if (this.intervalID) { // timer already in place...
52835             return false;
52836         }
52837         var _this = this;
52838         this.intervalID =  window.setInterval(function() {
52839               _this.check(false);
52840             }, 120000); // every 120 secs = 2mins..
52841         
52842         
52843     },
52844          
52845     
52846     switchLang : function (lang) 
52847     {
52848         _T = typeof(_T) == 'undefined' ? false : _T;
52849           if (!_T || !lang.length) {
52850             return;
52851         }
52852         
52853         if (!_T && lang != 'en') {
52854             Roo.MessageBox.alert("Sorry", "Language not available yet (" + lang +')');
52855             return;
52856         }
52857         
52858         if (typeof(_T.en) == 'undefined') {
52859             _T.en = {};
52860             Roo.apply(_T.en, _T);
52861         }
52862         
52863         if (typeof(_T[lang]) == 'undefined') {
52864             Roo.MessageBox.alert("Sorry", "Language not available yet (" + lang +')');
52865             return;
52866         }
52867         
52868         
52869         Roo.apply(_T, _T[lang]);
52870         // just need to set the text values for everything...
52871         var _this = this;
52872         /* this will not work ...
52873         if (this.form) { 
52874             
52875                
52876             function formLabel(name, val) {
52877                 _this.form.findField(name).fieldEl.child('label').dom.innerHTML  = val;
52878             }
52879             
52880             formLabel('password', "Password"+':');
52881             formLabel('username', "Email Address"+':');
52882             formLabel('lang', "Language"+':');
52883             this.dialog.setTitle("Login");
52884             this.dialog.buttons[0].setText("Forgot Password");
52885             this.dialog.buttons[1].setText("Login");
52886         }
52887         */
52888         
52889         
52890     },
52891     
52892     
52893     title: "Login",
52894     modal: true,
52895     width:  350,
52896     //height: 230,
52897     height: 180,
52898     shadow: true,
52899     minWidth:200,
52900     minHeight:180,
52901     //proxyDrag: true,
52902     closable: false,
52903     draggable: false,
52904     collapsible: false,
52905     resizable: false,
52906     center: {  // needed??
52907         autoScroll:false,
52908         titlebar: false,
52909        // tabPosition: 'top',
52910         hideTabs: true,
52911         closeOnTab: true,
52912         alwaysShowTabs: false
52913     } ,
52914     listeners : {
52915         
52916         show  : function(dlg)
52917         {
52918             //console.log(this);
52919             this.form = this.layout.getRegion('center').activePanel.form;
52920             this.form.dialog = dlg;
52921             this.buttons[0].form = this.form;
52922             this.buttons[0].dialog = dlg;
52923             this.buttons[1].form = this.form;
52924             this.buttons[1].dialog = dlg;
52925            
52926            //this.resizeToLogo.defer(1000,this);
52927             // this is all related to resizing for logos..
52928             //var sz = Roo.get(Pman.Login.form.el.query('img')[0]).getSize();
52929            //// if (!sz) {
52930              //   this.resizeToLogo.defer(1000,this);
52931              //   return;
52932            // }
52933             //var w = Ext.lib.Dom.getViewWidth() - 100;
52934             //var h = Ext.lib.Dom.getViewHeight() - 100;
52935             //this.resizeTo(Math.max(350, Math.min(sz.width + 30, w)),Math.min(sz.height+200, h));
52936             //this.center();
52937             if (this.disabled) {
52938                 this.hide();
52939                 return;
52940             }
52941             
52942             if (this.user.id < 0) { // used for inital setup situations.
52943                 return;
52944             }
52945             
52946             if (this.intervalID) {
52947                 // remove the timer
52948                 window.clearInterval(this.intervalID);
52949                 this.intervalID = false;
52950             }
52951             
52952             
52953             if (Roo.get('loading')) {
52954                 Roo.get('loading').remove();
52955             }
52956             if (Roo.get('loading-mask')) {
52957                 Roo.get('loading-mask').hide();
52958             }
52959             
52960             //incomming._node = tnode;
52961             this.form.reset();
52962             //this.dialog.modal = !modal;
52963             //this.dialog.show();
52964             this.el.unmask(); 
52965             
52966             
52967             this.form.setValues({
52968                 'username' : Roo.state.Manager.get(this.realm + '.username', ''),
52969                 'lang' : Roo.state.Manager.get(this.realm + '.lang', 'en')
52970             });
52971             
52972             this.switchLang(Roo.state.Manager.get(this.realm + '.lang', 'en'));
52973             if (this.form.findField('username').getValue().length > 0 ){
52974                 this.form.findField('password').focus();
52975             } else {
52976                this.form.findField('username').focus();
52977             }
52978     
52979         }
52980     },
52981     items : [
52982          {
52983        
52984             xtype : 'ContentPanel',
52985             xns : Roo,
52986             region: 'center',
52987             fitToFrame : true,
52988             
52989             items : [
52990     
52991                 {
52992                
52993                     xtype : 'Form',
52994                     xns : Roo.form,
52995                     labelWidth: 100,
52996                     style : 'margin: 10px;',
52997                     
52998                     listeners : {
52999                         actionfailed : function(f, act) {
53000                             // form can return { errors: .... }
53001                                 
53002                             //act.result.errors // invalid form element list...
53003                             //act.result.errorMsg// invalid form element list...
53004                             
53005                             this.dialog.el.unmask();
53006                             Roo.MessageBox.alert("Error", act.result.errorMsg ? act.result.errorMsg : 
53007                                         "Login failed - communication error - try again.");
53008                                       
53009                         },
53010                         actioncomplete: function(re, act) {
53011                              
53012                             Roo.state.Manager.set(
53013                                 this.dialog.realm + '.username',  
53014                                     this.findField('username').getValue()
53015                             );
53016                             Roo.state.Manager.set(
53017                                 this.dialog.realm + '.lang',  
53018                                 this.findField('lang').getValue() 
53019                             );
53020                             
53021                             this.dialog.fillAuth(act.result.data);
53022                               
53023                             this.dialog.hide();
53024                             
53025                             if (Roo.get('loading-mask')) {
53026                                 Roo.get('loading-mask').show();
53027                             }
53028                             Roo.XComponent.build();
53029                             
53030                              
53031                             
53032                         }
53033                     },
53034                     items : [
53035                         {
53036                             xtype : 'TextField',
53037                             xns : Roo.form,
53038                             fieldLabel: "Email Address",
53039                             name: 'username',
53040                             width:200,
53041                             autoCreate : {tag: "input", type: "text", size: "20"}
53042                         },
53043                         {
53044                             xtype : 'TextField',
53045                             xns : Roo.form,
53046                             fieldLabel: "Password",
53047                             inputType: 'password',
53048                             name: 'password',
53049                             width:200,
53050                             autoCreate : {tag: "input", type: "text", size: "20"},
53051                             listeners : {
53052                                 specialkey : function(e,ev) {
53053                                     if (ev.keyCode == 13) {
53054                                         this.form.dialog.el.mask("Logging in");
53055                                         this.form.doAction('submit', {
53056                                             url: this.form.dialog.url,
53057                                             method: this.form.dialog.method
53058                                         });
53059                                     }
53060                                 }
53061                             }  
53062                         },
53063                         {
53064                             xtype : 'ComboBox',
53065                             xns : Roo.form,
53066                             fieldLabel: "Language",
53067                             name : 'langdisp',
53068                             store: {
53069                                 xtype : 'SimpleStore',
53070                                 fields: ['lang', 'ldisp'],
53071                                 data : [
53072                                     [ 'en', 'English' ],
53073                                     [ 'zh_HK' , '\u7E41\u4E2D' ],
53074                                     [ 'zh_CN', '\u7C21\u4E2D' ]
53075                                 ]
53076                             },
53077                             
53078                             valueField : 'lang',
53079                             hiddenName:  'lang',
53080                             width: 200,
53081                             displayField:'ldisp',
53082                             typeAhead: false,
53083                             editable: false,
53084                             mode: 'local',
53085                             triggerAction: 'all',
53086                             emptyText:'Select a Language...',
53087                             selectOnFocus:true,
53088                             listeners : {
53089                                 select :  function(cb, rec, ix) {
53090                                     this.form.switchLang(rec.data.lang);
53091                                 }
53092                             }
53093                         
53094                         }
53095                     ]
53096                 }
53097                   
53098                 
53099             ]
53100         }
53101     ],
53102     buttons : [
53103         {
53104             xtype : 'Button',
53105             xns : 'Roo',
53106             text : "Forgot Password",
53107             listeners : {
53108                 click : function() {
53109                     //console.log(this);
53110                     var n = this.form.findField('username').getValue();
53111                     if (!n.length) {
53112                         Roo.MessageBox.alert("Error", "Fill in your email address");
53113                         return;
53114                     }
53115                     Roo.Ajax.request({
53116                         url: this.dialog.url,
53117                         params: {
53118                             passwordRequest: n
53119                         },
53120                         method: this.dialog.method,
53121                         success:  function(response, opts)  {  // check successfull...
53122                         
53123                             var res = this.dialog.processResponse(response);
53124                             if (!res.success) { // error!
53125                                Roo.MessageBox.alert("Error" ,
53126                                     res.errorMsg ? res.errorMsg  : "Problem Requesting Password Reset");
53127                                return;
53128                             }
53129                             Roo.MessageBox.alert("Notice" ,
53130                                 "Please check you email for the Password Reset message");
53131                         },
53132                         failure : function() {
53133                             Roo.MessageBox.alert("Error" , "Problem Requesting Password Reset");
53134                         }
53135                         
53136                     });
53137                 }
53138             }
53139         },
53140         {
53141             xtype : 'Button',
53142             xns : 'Roo',
53143             text : "Login",
53144             listeners : {
53145                 
53146                 click : function () {
53147                         
53148                     this.dialog.el.mask("Logging in");
53149                     this.form.doAction('submit', {
53150                             url: this.dialog.url,
53151                             method: this.dialog.method
53152                     });
53153                 }
53154             }
53155         }
53156     ]
53157   
53158   
53159 })
53160  
53161
53162
53163