Fix #6141 - super script and subscribe
[roojs1] / roojs-ui-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  * @class Roo.data.SortTypes
15  * @singleton
16  * Defines the default sorting (casting?) comparison functions used when sorting data.
17  */
18 Roo.data.SortTypes = {
19     /**
20      * Default sort that does nothing
21      * @param {Mixed} s The value being converted
22      * @return {Mixed} The comparison value
23      */
24     none : function(s){
25         return s;
26     },
27     
28     /**
29      * The regular expression used to strip tags
30      * @type {RegExp}
31      * @property
32      */
33     stripTagsRE : /<\/?[^>]+>/gi,
34     
35     /**
36      * Strips all HTML tags to sort on text only
37      * @param {Mixed} s The value being converted
38      * @return {String} The comparison value
39      */
40     asText : function(s){
41         return String(s).replace(this.stripTagsRE, "");
42     },
43     
44     /**
45      * Strips all HTML tags to sort on text only - Case insensitive
46      * @param {Mixed} s The value being converted
47      * @return {String} The comparison value
48      */
49     asUCText : function(s){
50         return String(s).toUpperCase().replace(this.stripTagsRE, "");
51     },
52     
53     /**
54      * Case insensitive string
55      * @param {Mixed} s The value being converted
56      * @return {String} The comparison value
57      */
58     asUCString : function(s) {
59         return String(s).toUpperCase();
60     },
61     
62     /**
63      * Date sorting
64      * @param {Mixed} s The value being converted
65      * @return {Number} The comparison value
66      */
67     asDate : function(s) {
68         if(!s){
69             return 0;
70         }
71         if(s instanceof Date){
72             return s.getTime();
73         }
74         return Date.parse(String(s));
75     },
76     
77     /**
78      * Float sorting
79      * @param {Mixed} s The value being converted
80      * @return {Float} The comparison value
81      */
82     asFloat : function(s) {
83         var val = parseFloat(String(s).replace(/,/g, ""));
84         if(isNaN(val)) {
85             val = 0;
86         }
87         return val;
88     },
89     
90     /**
91      * Integer sorting
92      * @param {Mixed} s The value being converted
93      * @return {Number} The comparison value
94      */
95     asInt : function(s) {
96         var val = parseInt(String(s).replace(/,/g, ""));
97         if(isNaN(val)) {
98             val = 0;
99         }
100         return val;
101     }
102 };/*
103  * Based on:
104  * Ext JS Library 1.1.1
105  * Copyright(c) 2006-2007, Ext JS, LLC.
106  *
107  * Originally Released Under LGPL - original licence link has changed is not relivant.
108  *
109  * Fork - LGPL
110  * <script type="text/javascript">
111  */
112
113 /**
114 * @class Roo.data.Record
115  * Instances of this class encapsulate both record <em>definition</em> information, and record
116  * <em>value</em> information for use in {@link Roo.data.Store} objects, or any code which needs
117  * to access Records cached in an {@link Roo.data.Store} object.<br>
118  * <p>
119  * Constructors for this class are generated by passing an Array of field definition objects to {@link #create}.
120  * Instances are usually only created by {@link Roo.data.Reader} implementations when processing unformatted data
121  * objects.<br>
122  * <p>
123  * Record objects generated by this constructor inherit all the methods of Roo.data.Record listed below.
124  * @constructor
125  * This constructor should not be used to create Record objects. Instead, use the constructor generated by
126  * {@link #create}. The parameters are the same.
127  * @param {Array} data An associative Array of data values keyed by the field name.
128  * @param {Object} id (Optional) The id of the record. This id should be unique, and is used by the
129  * {@link Roo.data.Store} object which owns the Record to index its collection of Records. If
130  * not specified an integer id is generated.
131  */
132 Roo.data.Record = function(data, id){
133     this.id = (id || id === 0) ? id : ++Roo.data.Record.AUTO_ID;
134     this.data = data;
135 };
136
137 /**
138  * Generate a constructor for a specific record layout.
139  * @param {Array} o An Array of field definition objects which specify field names, and optionally,
140  * data types, and a mapping for an {@link Roo.data.Reader} to extract the field's value from a data object.
141  * Each field definition object may contain the following properties: <ul>
142  * <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,
143  * for example the <em>dataIndex</em> property in column definition objects passed to {@link Roo.grid.ColumnModel}</p></li>
144  * <li><b>mapping</b> : String<p style="margin-left:1em">(Optional) A path specification for use by the {@link Roo.data.Reader} implementation
145  * that is creating the Record to access the data value from the data object. If an {@link Roo.data.JsonReader}
146  * is being used, then this is a string containing the javascript expression to reference the data relative to 
147  * the record item's root. If an {@link Roo.data.XmlReader} is being used, this is an {@link Roo.DomQuery} path
148  * to the data item relative to the record element. If the mapping expression is the same as the field name,
149  * this may be omitted.</p></li>
150  * <li><b>type</b> : String<p style="margin-left:1em">(Optional) The data type for conversion to displayable value. Possible values are
151  * <ul><li>auto (Default, implies no conversion)</li>
152  * <li>string</li>
153  * <li>int</li>
154  * <li>float</li>
155  * <li>boolean</li>
156  * <li>date</li></ul></p></li>
157  * <li><b>sortType</b> : Mixed<p style="margin-left:1em">(Optional) A member of {@link Roo.data.SortTypes}.</p></li>
158  * <li><b>sortDir</b> : String<p style="margin-left:1em">(Optional) Initial direction to sort. "ASC" or "DESC"</p></li>
159  * <li><b>convert</b> : Function<p style="margin-left:1em">(Optional) A function which converts the value provided
160  * by the Reader into an object that will be stored in the Record. It is passed the
161  * following parameters:<ul>
162  * <li><b>v</b> : Mixed<p style="margin-left:1em">The data value as read by the Reader.</p></li>
163  * </ul></p></li>
164  * <li><b>dateFormat</b> : String<p style="margin-left:1em">(Optional) A format String for the Date.parseDate function.</p></li>
165  * </ul>
166  * <br>usage:<br><pre><code>
167 var TopicRecord = Roo.data.Record.create(
168     {name: 'title', mapping: 'topic_title'},
169     {name: 'author', mapping: 'username'},
170     {name: 'totalPosts', mapping: 'topic_replies', type: 'int'},
171     {name: 'lastPost', mapping: 'post_time', type: 'date'},
172     {name: 'lastPoster', mapping: 'user2'},
173     {name: 'excerpt', mapping: 'post_text'}
174 );
175
176 var myNewRecord = new TopicRecord({
177     title: 'Do my job please',
178     author: 'noobie',
179     totalPosts: 1,
180     lastPost: new Date(),
181     lastPoster: 'Animal',
182     excerpt: 'No way dude!'
183 });
184 myStore.add(myNewRecord);
185 </code></pre>
186  * @method create
187  * @static
188  */
189 Roo.data.Record.create = function(o){
190     var f = function(){
191         f.superclass.constructor.apply(this, arguments);
192     };
193     Roo.extend(f, Roo.data.Record);
194     var p = f.prototype;
195     p.fields = new Roo.util.MixedCollection(false, function(field){
196         return field.name;
197     });
198     for(var i = 0, len = o.length; i < len; i++){
199         p.fields.add(new Roo.data.Field(o[i]));
200     }
201     f.getField = function(name){
202         return p.fields.get(name);  
203     };
204     return f;
205 };
206
207 Roo.data.Record.AUTO_ID = 1000;
208 Roo.data.Record.EDIT = 'edit';
209 Roo.data.Record.REJECT = 'reject';
210 Roo.data.Record.COMMIT = 'commit';
211
212 Roo.data.Record.prototype = {
213     /**
214      * Readonly flag - true if this record has been modified.
215      * @type Boolean
216      */
217     dirty : false,
218     editing : false,
219     error: null,
220     modified: null,
221
222     // private
223     join : function(store){
224         this.store = store;
225     },
226
227     /**
228      * Set the named field to the specified value.
229      * @param {String} name The name of the field to set.
230      * @param {Object} value The value to set the field to.
231      */
232     set : function(name, value){
233         if(this.data[name] == value){
234             return;
235         }
236         this.dirty = true;
237         if(!this.modified){
238             this.modified = {};
239         }
240         if(typeof this.modified[name] == 'undefined'){
241             this.modified[name] = this.data[name];
242         }
243         this.data[name] = value;
244         if(!this.editing && this.store){
245             this.store.afterEdit(this);
246         }       
247     },
248
249     /**
250      * Get the value of the named field.
251      * @param {String} name The name of the field to get the value of.
252      * @return {Object} The value of the field.
253      */
254     get : function(name){
255         return this.data[name]; 
256     },
257
258     // private
259     beginEdit : function(){
260         this.editing = true;
261         this.modified = {}; 
262     },
263
264     // private
265     cancelEdit : function(){
266         this.editing = false;
267         delete this.modified;
268     },
269
270     // private
271     endEdit : function(){
272         this.editing = false;
273         if(this.dirty && this.store){
274             this.store.afterEdit(this);
275         }
276     },
277
278     /**
279      * Usually called by the {@link Roo.data.Store} which owns the Record.
280      * Rejects all changes made to the Record since either creation, or the last commit operation.
281      * Modified fields are reverted to their original values.
282      * <p>
283      * Developers should subscribe to the {@link Roo.data.Store#update} event to have their code notified
284      * of reject operations.
285      */
286     reject : function(){
287         var m = this.modified;
288         for(var n in m){
289             if(typeof m[n] != "function"){
290                 this.data[n] = m[n];
291             }
292         }
293         this.dirty = false;
294         delete this.modified;
295         this.editing = false;
296         if(this.store){
297             this.store.afterReject(this);
298         }
299     },
300
301     /**
302      * Usually called by the {@link Roo.data.Store} which owns the Record.
303      * Commits all changes made to the Record since either creation, or the last commit operation.
304      * <p>
305      * Developers should subscribe to the {@link Roo.data.Store#update} event to have their code notified
306      * of commit operations.
307      */
308     commit : function(){
309         this.dirty = false;
310         delete this.modified;
311         this.editing = false;
312         if(this.store){
313             this.store.afterCommit(this);
314         }
315     },
316
317     // private
318     hasError : function(){
319         return this.error != null;
320     },
321
322     // private
323     clearError : function(){
324         this.error = null;
325     },
326
327     /**
328      * Creates a copy of this record.
329      * @param {String} id (optional) A new record id if you don't want to use this record's id
330      * @return {Record}
331      */
332     copy : function(newId) {
333         return new this.constructor(Roo.apply({}, this.data), newId || this.id);
334     }
335 };/*
336  * Based on:
337  * Ext JS Library 1.1.1
338  * Copyright(c) 2006-2007, Ext JS, LLC.
339  *
340  * Originally Released Under LGPL - original licence link has changed is not relivant.
341  *
342  * Fork - LGPL
343  * <script type="text/javascript">
344  */
345
346
347
348 /**
349  * @class Roo.data.Store
350  * @extends Roo.util.Observable
351  * The Store class encapsulates a client side cache of {@link Roo.data.Record} objects which provide input data
352  * for widgets such as the Roo.grid.Grid, or the Roo.form.ComboBox.<br>
353  * <p>
354  * 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
355  * has no knowledge of the format of the data returned by the Proxy.<br>
356  * <p>
357  * A Store object uses its configured implementation of {@link Roo.data.DataReader} to create {@link Roo.data.Record}
358  * instances from the data object. These records are cached and made available through accessor functions.
359  * @constructor
360  * Creates a new Store.
361  * @param {Object} config A config object containing the objects needed for the Store to access data,
362  * and read the data into Records.
363  */
364 Roo.data.Store = function(config){
365     this.data = new Roo.util.MixedCollection(false);
366     this.data.getKey = function(o){
367         return o.id;
368     };
369     this.baseParams = {};
370     // private
371     this.paramNames = {
372         "start" : "start",
373         "limit" : "limit",
374         "sort" : "sort",
375         "dir" : "dir",
376         "multisort" : "_multisort"
377     };
378
379     if(config && config.data){
380         this.inlineData = config.data;
381         delete config.data;
382     }
383
384     Roo.apply(this, config);
385     
386     if(this.reader){ // reader passed
387         this.reader = Roo.factory(this.reader, Roo.data);
388         this.reader.xmodule = this.xmodule || false;
389         if(!this.recordType){
390             this.recordType = this.reader.recordType;
391         }
392         if(this.reader.onMetaChange){
393             this.reader.onMetaChange = this.onMetaChange.createDelegate(this);
394         }
395     }
396
397     if(this.recordType){
398         this.fields = this.recordType.prototype.fields;
399     }
400     this.modified = [];
401
402     this.addEvents({
403         /**
404          * @event datachanged
405          * Fires when the data cache has changed, and a widget which is using this Store
406          * as a Record cache should refresh its view.
407          * @param {Store} this
408          */
409         datachanged : true,
410         /**
411          * @event metachange
412          * Fires when this store's reader provides new metadata (fields). This is currently only support for JsonReaders.
413          * @param {Store} this
414          * @param {Object} meta The JSON metadata
415          */
416         metachange : true,
417         /**
418          * @event add
419          * Fires when Records have been added to the Store
420          * @param {Store} this
421          * @param {Roo.data.Record[]} records The array of Records added
422          * @param {Number} index The index at which the record(s) were added
423          */
424         add : true,
425         /**
426          * @event remove
427          * Fires when a Record has been removed from the Store
428          * @param {Store} this
429          * @param {Roo.data.Record} record The Record that was removed
430          * @param {Number} index The index at which the record was removed
431          */
432         remove : true,
433         /**
434          * @event update
435          * Fires when a Record has been updated
436          * @param {Store} this
437          * @param {Roo.data.Record} record The Record that was updated
438          * @param {String} operation The update operation being performed.  Value may be one of:
439          * <pre><code>
440  Roo.data.Record.EDIT
441  Roo.data.Record.REJECT
442  Roo.data.Record.COMMIT
443          * </code></pre>
444          */
445         update : true,
446         /**
447          * @event clear
448          * Fires when the data cache has been cleared.
449          * @param {Store} this
450          */
451         clear : true,
452         /**
453          * @event beforeload
454          * Fires before a request is made for a new data object.  If the beforeload handler returns false
455          * the load action will be canceled.
456          * @param {Store} this
457          * @param {Object} options The loading options that were specified (see {@link #load} for details)
458          */
459         beforeload : true,
460         /**
461          * @event beforeloadadd
462          * Fires after a new set of Records has been loaded.
463          * @param {Store} this
464          * @param {Roo.data.Record[]} records The Records that were loaded
465          * @param {Object} options The loading options that were specified (see {@link #load} for details)
466          */
467         beforeloadadd : true,
468         /**
469          * @event load
470          * Fires after a new set of Records has been loaded, before they are added to the store.
471          * @param {Store} this
472          * @param {Roo.data.Record[]} records The Records that were loaded
473          * @param {Object} options The loading options that were specified (see {@link #load} for details)
474          * @params {Object} return from reader
475          */
476         load : true,
477         /**
478          * @event loadexception
479          * Fires if an exception occurs in the Proxy during loading.
480          * Called with the signature of the Proxy's "loadexception" event.
481          * If you return Json { data: [] , success: false, .... } then this will be thrown with the following args
482          * 
483          * @param {Proxy} 
484          * @param {Object} return from JsonData.reader() - success, totalRecords, records
485          * @param {Object} load options 
486          * @param {Object} jsonData from your request (normally this contains the Exception)
487          */
488         loadexception : true
489     });
490     
491     if(this.proxy){
492         this.proxy = Roo.factory(this.proxy, Roo.data);
493         this.proxy.xmodule = this.xmodule || false;
494         this.relayEvents(this.proxy,  ["loadexception"]);
495     }
496     this.sortToggle = {};
497     this.sortOrder = []; // array of order of sorting - updated by grid if multisort is enabled.
498
499     Roo.data.Store.superclass.constructor.call(this);
500
501     if(this.inlineData){
502         this.loadData(this.inlineData);
503         delete this.inlineData;
504     }
505 };
506
507 Roo.extend(Roo.data.Store, Roo.util.Observable, {
508      /**
509     * @cfg {boolean} isLocal   flag if data is locally available (and can be always looked up
510     * without a remote query - used by combo/forms at present.
511     */
512     
513     /**
514     * @cfg {Roo.data.DataProxy} proxy The Proxy object which provides access to a data object.
515     */
516     /**
517     * @cfg {Array} data Inline data to be loaded when the store is initialized.
518     */
519     /**
520     * @cfg {Roo.data.Reader} reader The Reader object which processes the data object and returns
521     * an Array of Roo.data.record objects which are cached keyed by their <em>id</em> property.
522     */
523     /**
524     * @cfg {Object} baseParams An object containing properties which are to be sent as parameters
525     * on any HTTP request
526     */
527     /**
528     * @cfg {Object} sortInfo A config object in the format: {field: "fieldName", direction: "ASC|DESC"}
529     */
530     /**
531     * @cfg {Boolean} multiSort enable multi column sorting (sort is based on the order of columns, remote only at present)
532     */
533     multiSort: false,
534     /**
535     * @cfg {boolean} remoteSort True if sorting is to be handled by requesting the Proxy to provide a refreshed
536     * version of the data object in sorted order, as opposed to sorting the Record cache in place (defaults to false).
537     */
538     remoteSort : false,
539
540     /**
541     * @cfg {boolean} pruneModifiedRecords True to clear all modified record information each time the store is
542      * loaded or when a record is removed. (defaults to false).
543     */
544     pruneModifiedRecords : false,
545
546     // private
547     lastOptions : null,
548
549     /**
550      * Add Records to the Store and fires the add event.
551      * @param {Roo.data.Record[]} records An Array of Roo.data.Record objects to add to the cache.
552      */
553     add : function(records){
554         records = [].concat(records);
555         for(var i = 0, len = records.length; i < len; i++){
556             records[i].join(this);
557         }
558         var index = this.data.length;
559         this.data.addAll(records);
560         this.fireEvent("add", this, records, index);
561     },
562
563     /**
564      * Remove a Record from the Store and fires the remove event.
565      * @param {Ext.data.Record} record The Roo.data.Record object to remove from the cache.
566      */
567     remove : function(record){
568         var index = this.data.indexOf(record);
569         this.data.removeAt(index);
570  
571         if(this.pruneModifiedRecords){
572             this.modified.remove(record);
573         }
574         this.fireEvent("remove", this, record, index);
575     },
576
577     /**
578      * Remove all Records from the Store and fires the clear event.
579      */
580     removeAll : function(){
581         this.data.clear();
582         if(this.pruneModifiedRecords){
583             this.modified = [];
584         }
585         this.fireEvent("clear", this);
586     },
587
588     /**
589      * Inserts Records to the Store at the given index and fires the add event.
590      * @param {Number} index The start index at which to insert the passed Records.
591      * @param {Roo.data.Record[]} records An Array of Roo.data.Record objects to add to the cache.
592      */
593     insert : function(index, records){
594         records = [].concat(records);
595         for(var i = 0, len = records.length; i < len; i++){
596             this.data.insert(index, records[i]);
597             records[i].join(this);
598         }
599         this.fireEvent("add", this, records, index);
600     },
601
602     /**
603      * Get the index within the cache of the passed Record.
604      * @param {Roo.data.Record} record The Roo.data.Record object to to find.
605      * @return {Number} The index of the passed Record. Returns -1 if not found.
606      */
607     indexOf : function(record){
608         return this.data.indexOf(record);
609     },
610
611     /**
612      * Get the index within the cache of the Record with the passed id.
613      * @param {String} id The id of the Record to find.
614      * @return {Number} The index of the Record. Returns -1 if not found.
615      */
616     indexOfId : function(id){
617         return this.data.indexOfKey(id);
618     },
619
620     /**
621      * Get the Record with the specified id.
622      * @param {String} id The id of the Record to find.
623      * @return {Roo.data.Record} The Record with the passed id. Returns undefined if not found.
624      */
625     getById : function(id){
626         return this.data.key(id);
627     },
628
629     /**
630      * Get the Record at the specified index.
631      * @param {Number} index The index of the Record to find.
632      * @return {Roo.data.Record} The Record at the passed index. Returns undefined if not found.
633      */
634     getAt : function(index){
635         return this.data.itemAt(index);
636     },
637
638     /**
639      * Returns a range of Records between specified indices.
640      * @param {Number} startIndex (optional) The starting index (defaults to 0)
641      * @param {Number} endIndex (optional) The ending index (defaults to the last Record in the Store)
642      * @return {Roo.data.Record[]} An array of Records
643      */
644     getRange : function(start, end){
645         return this.data.getRange(start, end);
646     },
647
648     // private
649     storeOptions : function(o){
650         o = Roo.apply({}, o);
651         delete o.callback;
652         delete o.scope;
653         this.lastOptions = o;
654     },
655
656     /**
657      * Loads the Record cache from the configured Proxy using the configured Reader.
658      * <p>
659      * If using remote paging, then the first load call must specify the <em>start</em>
660      * and <em>limit</em> properties in the options.params property to establish the initial
661      * position within the dataset, and the number of Records to cache on each read from the Proxy.
662      * <p>
663      * <strong>It is important to note that for remote data sources, loading is asynchronous,
664      * and this call will return before the new data has been loaded. Perform any post-processing
665      * in a callback function, or in a "load" event handler.</strong>
666      * <p>
667      * @param {Object} options An object containing properties which control loading options:<ul>
668      * <li>params {Object} An object containing properties to pass as HTTP parameters to a remote data source.</li>
669      * <li>callback {Function} A function to be called after the Records have been loaded. The callback is
670      * passed the following arguments:<ul>
671      * <li>r : Roo.data.Record[]</li>
672      * <li>options: Options object from the load call</li>
673      * <li>success: Boolean success indicator</li></ul></li>
674      * <li>scope {Object} Scope with which to call the callback (defaults to the Store object)</li>
675      * <li>add {Boolean} indicator to append loaded records rather than replace the current cache.</li>
676      * </ul>
677      */
678     load : function(options){
679         options = options || {};
680         if(this.fireEvent("beforeload", this, options) !== false){
681             this.storeOptions(options);
682             var p = Roo.apply(options.params || {}, this.baseParams);
683             // if meta was not loaded from remote source.. try requesting it.
684             if (!this.reader.metaFromRemote) {
685                 p._requestMeta = 1;
686             }
687             if(this.sortInfo && this.remoteSort){
688                 var pn = this.paramNames;
689                 p[pn["sort"]] = this.sortInfo.field;
690                 p[pn["dir"]] = this.sortInfo.direction;
691             }
692             if (this.multiSort) {
693                 var pn = this.paramNames;
694                 p[pn["multisort"]] = Roo.encode( { sort : this.sortToggle, order: this.sortOrder });
695             }
696             
697             this.proxy.load(p, this.reader, this.loadRecords, this, options);
698         }
699     },
700
701     /**
702      * Reloads the Record cache from the configured Proxy using the configured Reader and
703      * the options from the last load operation performed.
704      * @param {Object} options (optional) An object containing properties which may override the options
705      * used in the last load operation. See {@link #load} for details (defaults to null, in which case
706      * the most recently used options are reused).
707      */
708     reload : function(options){
709         this.load(Roo.applyIf(options||{}, this.lastOptions));
710     },
711
712     // private
713     // Called as a callback by the Reader during a load operation.
714     loadRecords : function(o, options, success){
715         if(!o || success === false){
716             if(success !== false){
717                 this.fireEvent("load", this, [], options, o);
718             }
719             if(options.callback){
720                 options.callback.call(options.scope || this, [], options, false);
721             }
722             return;
723         }
724         // if data returned failure - throw an exception.
725         if (o.success === false) {
726             // show a message if no listener is registered.
727             if (!this.hasListener('loadexception') && typeof(o.raw.errorMsg) != 'undefined') {
728                     Roo.MessageBox.alert("Error loading",o.raw.errorMsg);
729             }
730             // loadmask wil be hooked into this..
731             this.fireEvent("loadexception", this, o, options, o.raw.errorMsg);
732             return;
733         }
734         var r = o.records, t = o.totalRecords || r.length;
735         
736         this.fireEvent("beforeloadadd", this, r, options, o);
737         
738         if(!options || options.add !== true){
739             if(this.pruneModifiedRecords){
740                 this.modified = [];
741             }
742             for(var i = 0, len = r.length; i < len; i++){
743                 r[i].join(this);
744             }
745             if(this.snapshot){
746                 this.data = this.snapshot;
747                 delete this.snapshot;
748             }
749             this.data.clear();
750             this.data.addAll(r);
751             this.totalLength = t;
752             this.applySort();
753             this.fireEvent("datachanged", this);
754         }else{
755             this.totalLength = Math.max(t, this.data.length+r.length);
756             this.add(r);
757         }
758         
759         if(this.parent && !Roo.isIOS && !this.useNativeIOS && this.parent.emptyTitle.length) {
760                 
761             var e = new Roo.data.Record({});
762
763             e.set(this.parent.displayField, this.parent.emptyTitle);
764             e.set(this.parent.valueField, '');
765
766             this.insert(0, e);
767         }
768             
769         this.fireEvent("load", this, r, options, o);
770         if(options.callback){
771             options.callback.call(options.scope || this, r, options, true);
772         }
773     },
774
775
776     /**
777      * Loads data from a passed data block. A Reader which understands the format of the data
778      * must have been configured in the constructor.
779      * @param {Object} data The data block from which to read the Records.  The format of the data expected
780      * is dependent on the type of Reader that is configured and should correspond to that Reader's readRecords parameter.
781      * @param {Boolean} append (Optional) True to append the new Records rather than replace the existing cache.
782      */
783     loadData : function(o, append){
784         var r = this.reader.readRecords(o);
785         this.loadRecords(r, {add: append}, true);
786     },
787
788     /**
789      * Gets the number of cached records.
790      * <p>
791      * <em>If using paging, this may not be the total size of the dataset. If the data object
792      * used by the Reader contains the dataset size, then the getTotalCount() function returns
793      * the data set size</em>
794      */
795     getCount : function(){
796         return this.data.length || 0;
797     },
798
799     /**
800      * Gets the total number of records in the dataset as returned by the server.
801      * <p>
802      * <em>If using paging, for this to be accurate, the data object used by the Reader must contain
803      * the dataset size</em>
804      */
805     getTotalCount : function(){
806         return this.totalLength || 0;
807     },
808
809     /**
810      * Returns the sort state of the Store as an object with two properties:
811      * <pre><code>
812  field {String} The name of the field by which the Records are sorted
813  direction {String} The sort order, "ASC" or "DESC"
814      * </code></pre>
815      */
816     getSortState : function(){
817         return this.sortInfo;
818     },
819
820     // private
821     applySort : function(){
822         if(this.sortInfo && !this.remoteSort){
823             var s = this.sortInfo, f = s.field;
824             var st = this.fields.get(f).sortType;
825             var fn = function(r1, r2){
826                 var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
827                 return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
828             };
829             this.data.sort(s.direction, fn);
830             if(this.snapshot && this.snapshot != this.data){
831                 this.snapshot.sort(s.direction, fn);
832             }
833         }
834     },
835
836     /**
837      * Sets the default sort column and order to be used by the next load operation.
838      * @param {String} fieldName The name of the field to sort by.
839      * @param {String} dir (optional) The sort order, "ASC" or "DESC" (defaults to "ASC")
840      */
841     setDefaultSort : function(field, dir){
842         this.sortInfo = {field: field, direction: dir ? dir.toUpperCase() : "ASC"};
843     },
844
845     /**
846      * Sort the Records.
847      * If remote sorting is used, the sort is performed on the server, and the cache is
848      * reloaded. If local sorting is used, the cache is sorted internally.
849      * @param {String} fieldName The name of the field to sort by.
850      * @param {String} dir (optional) The sort order, "ASC" or "DESC" (defaults to "ASC")
851      */
852     sort : function(fieldName, dir){
853         var f = this.fields.get(fieldName);
854         if(!dir){
855             this.sortToggle[f.name] = this.sortToggle[f.name] || f.sortDir;
856             
857             if(this.multiSort || (this.sortInfo && this.sortInfo.field == f.name) ){ // toggle sort dir
858                 dir = (this.sortToggle[f.name] || "ASC").toggle("ASC", "DESC");
859             }else{
860                 dir = f.sortDir;
861             }
862         }
863         this.sortToggle[f.name] = dir;
864         this.sortInfo = {field: f.name, direction: dir};
865         if(!this.remoteSort){
866             this.applySort();
867             this.fireEvent("datachanged", this);
868         }else{
869             this.load(this.lastOptions);
870         }
871     },
872
873     /**
874      * Calls the specified function for each of the Records in the cache.
875      * @param {Function} fn The function to call. The Record is passed as the first parameter.
876      * Returning <em>false</em> aborts and exits the iteration.
877      * @param {Object} scope (optional) The scope in which to call the function (defaults to the Record).
878      */
879     each : function(fn, scope){
880         this.data.each(fn, scope);
881     },
882
883     /**
884      * Gets all records modified since the last commit.  Modified records are persisted across load operations
885      * (e.g., during paging).
886      * @return {Roo.data.Record[]} An array of Records containing outstanding modifications.
887      */
888     getModifiedRecords : function(){
889         return this.modified;
890     },
891
892     // private
893     createFilterFn : function(property, value, anyMatch){
894         if(!value.exec){ // not a regex
895             value = String(value);
896             if(value.length == 0){
897                 return false;
898             }
899             value = new RegExp((anyMatch === true ? '' : '^') + Roo.escapeRe(value), "i");
900         }
901         return function(r){
902             return value.test(r.data[property]);
903         };
904     },
905
906     /**
907      * Sums the value of <i>property</i> for each record between start and end and returns the result.
908      * @param {String} property A field on your records
909      * @param {Number} start The record index to start at (defaults to 0)
910      * @param {Number} end The last record index to include (defaults to length - 1)
911      * @return {Number} The sum
912      */
913     sum : function(property, start, end){
914         var rs = this.data.items, v = 0;
915         start = start || 0;
916         end = (end || end === 0) ? end : rs.length-1;
917
918         for(var i = start; i <= end; i++){
919             v += (rs[i].data[property] || 0);
920         }
921         return v;
922     },
923
924     /**
925      * Filter the records by a specified property.
926      * @param {String} field A field on your records
927      * @param {String/RegExp} value Either a string that the field
928      * should start with or a RegExp to test against the field
929      * @param {Boolean} anyMatch True to match any part not just the beginning
930      */
931     filter : function(property, value, anyMatch){
932         var fn = this.createFilterFn(property, value, anyMatch);
933         return fn ? this.filterBy(fn) : this.clearFilter();
934     },
935
936     /**
937      * Filter by a function. The specified function will be called with each
938      * record in this data source. If the function returns true the record is included,
939      * otherwise it is filtered.
940      * @param {Function} fn The function to be called, it will receive 2 args (record, id)
941      * @param {Object} scope (optional) The scope of the function (defaults to this)
942      */
943     filterBy : function(fn, scope){
944         this.snapshot = this.snapshot || this.data;
945         this.data = this.queryBy(fn, scope||this);
946         this.fireEvent("datachanged", this);
947     },
948
949     /**
950      * Query the records by a specified property.
951      * @param {String} field A field on your records
952      * @param {String/RegExp} value Either a string that the field
953      * should start with or a RegExp to test against the field
954      * @param {Boolean} anyMatch True to match any part not just the beginning
955      * @return {MixedCollection} Returns an Roo.util.MixedCollection of the matched records
956      */
957     query : function(property, value, anyMatch){
958         var fn = this.createFilterFn(property, value, anyMatch);
959         return fn ? this.queryBy(fn) : this.data.clone();
960     },
961
962     /**
963      * Query by a function. The specified function will be called with each
964      * record in this data source. If the function returns true the record is included
965      * in the results.
966      * @param {Function} fn The function to be called, it will receive 2 args (record, id)
967      * @param {Object} scope (optional) The scope of the function (defaults to this)
968       @return {MixedCollection} Returns an Roo.util.MixedCollection of the matched records
969      **/
970     queryBy : function(fn, scope){
971         var data = this.snapshot || this.data;
972         return data.filterBy(fn, scope||this);
973     },
974
975     /**
976      * Collects unique values for a particular dataIndex from this store.
977      * @param {String} dataIndex The property to collect
978      * @param {Boolean} allowNull (optional) Pass true to allow null, undefined or empty string values
979      * @param {Boolean} bypassFilter (optional) Pass true to collect from all records, even ones which are filtered
980      * @return {Array} An array of the unique values
981      **/
982     collect : function(dataIndex, allowNull, bypassFilter){
983         var d = (bypassFilter === true && this.snapshot) ?
984                 this.snapshot.items : this.data.items;
985         var v, sv, r = [], l = {};
986         for(var i = 0, len = d.length; i < len; i++){
987             v = d[i].data[dataIndex];
988             sv = String(v);
989             if((allowNull || !Roo.isEmpty(v)) && !l[sv]){
990                 l[sv] = true;
991                 r[r.length] = v;
992             }
993         }
994         return r;
995     },
996
997     /**
998      * Revert to a view of the Record cache with no filtering applied.
999      * @param {Boolean} suppressEvent If true the filter is cleared silently without notifying listeners
1000      */
1001     clearFilter : function(suppressEvent){
1002         if(this.snapshot && this.snapshot != this.data){
1003             this.data = this.snapshot;
1004             delete this.snapshot;
1005             if(suppressEvent !== true){
1006                 this.fireEvent("datachanged", this);
1007             }
1008         }
1009     },
1010
1011     // private
1012     afterEdit : function(record){
1013         if(this.modified.indexOf(record) == -1){
1014             this.modified.push(record);
1015         }
1016         this.fireEvent("update", this, record, Roo.data.Record.EDIT);
1017     },
1018     
1019     // private
1020     afterReject : function(record){
1021         this.modified.remove(record);
1022         this.fireEvent("update", this, record, Roo.data.Record.REJECT);
1023     },
1024
1025     // private
1026     afterCommit : function(record){
1027         this.modified.remove(record);
1028         this.fireEvent("update", this, record, Roo.data.Record.COMMIT);
1029     },
1030
1031     /**
1032      * Commit all Records with outstanding changes. To handle updates for changes, subscribe to the
1033      * Store's "update" event, and perform updating when the third parameter is Roo.data.Record.COMMIT.
1034      */
1035     commitChanges : function(){
1036         var m = this.modified.slice(0);
1037         this.modified = [];
1038         for(var i = 0, len = m.length; i < len; i++){
1039             m[i].commit();
1040         }
1041     },
1042
1043     /**
1044      * Cancel outstanding changes on all changed records.
1045      */
1046     rejectChanges : function(){
1047         var m = this.modified.slice(0);
1048         this.modified = [];
1049         for(var i = 0, len = m.length; i < len; i++){
1050             m[i].reject();
1051         }
1052     },
1053
1054     onMetaChange : function(meta, rtype, o){
1055         this.recordType = rtype;
1056         this.fields = rtype.prototype.fields;
1057         delete this.snapshot;
1058         this.sortInfo = meta.sortInfo || this.sortInfo;
1059         this.modified = [];
1060         this.fireEvent('metachange', this, this.reader.meta);
1061     },
1062     
1063     moveIndex : function(data, type)
1064     {
1065         var index = this.indexOf(data);
1066         
1067         var newIndex = index + type;
1068         
1069         this.remove(data);
1070         
1071         this.insert(newIndex, data);
1072         
1073     }
1074 });/*
1075  * Based on:
1076  * Ext JS Library 1.1.1
1077  * Copyright(c) 2006-2007, Ext JS, LLC.
1078  *
1079  * Originally Released Under LGPL - original licence link has changed is not relivant.
1080  *
1081  * Fork - LGPL
1082  * <script type="text/javascript">
1083  */
1084
1085 /**
1086  * @class Roo.data.SimpleStore
1087  * @extends Roo.data.Store
1088  * Small helper class to make creating Stores from Array data easier.
1089  * @cfg {Number} id The array index of the record id. Leave blank to auto generate ids.
1090  * @cfg {Array} fields An array of field definition objects, or field name strings.
1091  * @cfg {Array} data The multi-dimensional array of data
1092  * @constructor
1093  * @param {Object} config
1094  */
1095 Roo.data.SimpleStore = function(config){
1096     Roo.data.SimpleStore.superclass.constructor.call(this, {
1097         isLocal : true,
1098         reader: new Roo.data.ArrayReader({
1099                 id: config.id
1100             },
1101             Roo.data.Record.create(config.fields)
1102         ),
1103         proxy : new Roo.data.MemoryProxy(config.data)
1104     });
1105     this.load();
1106 };
1107 Roo.extend(Roo.data.SimpleStore, Roo.data.Store);/*
1108  * Based on:
1109  * Ext JS Library 1.1.1
1110  * Copyright(c) 2006-2007, Ext JS, LLC.
1111  *
1112  * Originally Released Under LGPL - original licence link has changed is not relivant.
1113  *
1114  * Fork - LGPL
1115  * <script type="text/javascript">
1116  */
1117
1118 /**
1119 /**
1120  * @extends Roo.data.Store
1121  * @class Roo.data.JsonStore
1122  * Small helper class to make creating Stores for JSON data easier. <br/>
1123 <pre><code>
1124 var store = new Roo.data.JsonStore({
1125     url: 'get-images.php',
1126     root: 'images',
1127     fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}]
1128 });
1129 </code></pre>
1130  * <b>Note: Although they are not listed, this class inherits all of the config options of Store,
1131  * JsonReader and HttpProxy (unless inline data is provided).</b>
1132  * @cfg {Array} fields An array of field definition objects, or field name strings.
1133  * @constructor
1134  * @param {Object} config
1135  */
1136 Roo.data.JsonStore = function(c){
1137     Roo.data.JsonStore.superclass.constructor.call(this, Roo.apply(c, {
1138         proxy: !c.data ? new Roo.data.HttpProxy({url: c.url}) : undefined,
1139         reader: new Roo.data.JsonReader(c, c.fields)
1140     }));
1141 };
1142 Roo.extend(Roo.data.JsonStore, Roo.data.Store);/*
1143  * Based on:
1144  * Ext JS Library 1.1.1
1145  * Copyright(c) 2006-2007, Ext JS, LLC.
1146  *
1147  * Originally Released Under LGPL - original licence link has changed is not relivant.
1148  *
1149  * Fork - LGPL
1150  * <script type="text/javascript">
1151  */
1152
1153  
1154 Roo.data.Field = function(config){
1155     if(typeof config == "string"){
1156         config = {name: config};
1157     }
1158     Roo.apply(this, config);
1159     
1160     if(!this.type){
1161         this.type = "auto";
1162     }
1163     
1164     var st = Roo.data.SortTypes;
1165     // named sortTypes are supported, here we look them up
1166     if(typeof this.sortType == "string"){
1167         this.sortType = st[this.sortType];
1168     }
1169     
1170     // set default sortType for strings and dates
1171     if(!this.sortType){
1172         switch(this.type){
1173             case "string":
1174                 this.sortType = st.asUCString;
1175                 break;
1176             case "date":
1177                 this.sortType = st.asDate;
1178                 break;
1179             default:
1180                 this.sortType = st.none;
1181         }
1182     }
1183
1184     // define once
1185     var stripRe = /[\$,%]/g;
1186
1187     // prebuilt conversion function for this field, instead of
1188     // switching every time we're reading a value
1189     if(!this.convert){
1190         var cv, dateFormat = this.dateFormat;
1191         switch(this.type){
1192             case "":
1193             case "auto":
1194             case undefined:
1195                 cv = function(v){ return v; };
1196                 break;
1197             case "string":
1198                 cv = function(v){ return (v === undefined || v === null) ? '' : String(v); };
1199                 break;
1200             case "int":
1201                 cv = function(v){
1202                     return v !== undefined && v !== null && v !== '' ?
1203                            parseInt(String(v).replace(stripRe, ""), 10) : '';
1204                     };
1205                 break;
1206             case "float":
1207                 cv = function(v){
1208                     return v !== undefined && v !== null && v !== '' ?
1209                            parseFloat(String(v).replace(stripRe, ""), 10) : ''; 
1210                     };
1211                 break;
1212             case "bool":
1213             case "boolean":
1214                 cv = function(v){ return v === true || v === "true" || v == 1; };
1215                 break;
1216             case "date":
1217                 cv = function(v){
1218                     if(!v){
1219                         return '';
1220                     }
1221                     if(v instanceof Date){
1222                         return v;
1223                     }
1224                     if(dateFormat){
1225                         if(dateFormat == "timestamp"){
1226                             return new Date(v*1000);
1227                         }
1228                         return Date.parseDate(v, dateFormat);
1229                     }
1230                     var parsed = Date.parse(v);
1231                     return parsed ? new Date(parsed) : null;
1232                 };
1233              break;
1234             
1235         }
1236         this.convert = cv;
1237     }
1238 };
1239
1240 Roo.data.Field.prototype = {
1241     dateFormat: null,
1242     defaultValue: "",
1243     mapping: null,
1244     sortType : null,
1245     sortDir : "ASC"
1246 };/*
1247  * Based on:
1248  * Ext JS Library 1.1.1
1249  * Copyright(c) 2006-2007, Ext JS, LLC.
1250  *
1251  * Originally Released Under LGPL - original licence link has changed is not relivant.
1252  *
1253  * Fork - LGPL
1254  * <script type="text/javascript">
1255  */
1256  
1257 // Base class for reading structured data from a data source.  This class is intended to be
1258 // extended (see ArrayReader, JsonReader and XmlReader) and should not be created directly.
1259
1260 /**
1261  * @class Roo.data.DataReader
1262  * Base class for reading structured data from a data source.  This class is intended to be
1263  * extended (see {Roo.data.ArrayReader}, {Roo.data.JsonReader} and {Roo.data.XmlReader}) and should not be created directly.
1264  */
1265
1266 Roo.data.DataReader = function(meta, recordType){
1267     
1268     this.meta = meta;
1269     
1270     this.recordType = recordType instanceof Array ? 
1271         Roo.data.Record.create(recordType) : recordType;
1272 };
1273
1274 Roo.data.DataReader.prototype = {
1275      /**
1276      * Create an empty record
1277      * @param {Object} data (optional) - overlay some values
1278      * @return {Roo.data.Record} record created.
1279      */
1280     newRow :  function(d) {
1281         var da =  {};
1282         this.recordType.prototype.fields.each(function(c) {
1283             switch( c.type) {
1284                 case 'int' : da[c.name] = 0; break;
1285                 case 'date' : da[c.name] = new Date(); break;
1286                 case 'float' : da[c.name] = 0.0; break;
1287                 case 'boolean' : da[c.name] = false; break;
1288                 default : da[c.name] = ""; break;
1289             }
1290             
1291         });
1292         return new this.recordType(Roo.apply(da, d));
1293     }
1294     
1295 };/*
1296  * Based on:
1297  * Ext JS Library 1.1.1
1298  * Copyright(c) 2006-2007, Ext JS, LLC.
1299  *
1300  * Originally Released Under LGPL - original licence link has changed is not relivant.
1301  *
1302  * Fork - LGPL
1303  * <script type="text/javascript">
1304  */
1305
1306 /**
1307  * @class Roo.data.DataProxy
1308  * @extends Roo.data.Observable
1309  * This class is an abstract base class for implementations which provide retrieval of
1310  * unformatted data objects.<br>
1311  * <p>
1312  * DataProxy implementations are usually used in conjunction with an implementation of Roo.data.DataReader
1313  * (of the appropriate type which knows how to parse the data object) to provide a block of
1314  * {@link Roo.data.Records} to an {@link Roo.data.Store}.<br>
1315  * <p>
1316  * Custom implementations must implement the load method as described in
1317  * {@link Roo.data.HttpProxy#load}.
1318  */
1319 Roo.data.DataProxy = function(){
1320     this.addEvents({
1321         /**
1322          * @event beforeload
1323          * Fires before a network request is made to retrieve a data object.
1324          * @param {Object} This DataProxy object.
1325          * @param {Object} params The params parameter to the load function.
1326          */
1327         beforeload : true,
1328         /**
1329          * @event load
1330          * Fires before the load method's callback is called.
1331          * @param {Object} This DataProxy object.
1332          * @param {Object} o The data object.
1333          * @param {Object} arg The callback argument object passed to the load function.
1334          */
1335         load : true,
1336         /**
1337          * @event loadexception
1338          * Fires if an Exception occurs during data retrieval.
1339          * @param {Object} This DataProxy object.
1340          * @param {Object} o The data object.
1341          * @param {Object} arg The callback argument object passed to the load function.
1342          * @param {Object} e The Exception.
1343          */
1344         loadexception : true
1345     });
1346     Roo.data.DataProxy.superclass.constructor.call(this);
1347 };
1348
1349 Roo.extend(Roo.data.DataProxy, Roo.util.Observable);
1350
1351     /**
1352      * @cfg {void} listeners (Not available) Constructor blocks listeners from being set
1353      */
1354 /*
1355  * Based on:
1356  * Ext JS Library 1.1.1
1357  * Copyright(c) 2006-2007, Ext JS, LLC.
1358  *
1359  * Originally Released Under LGPL - original licence link has changed is not relivant.
1360  *
1361  * Fork - LGPL
1362  * <script type="text/javascript">
1363  */
1364 /**
1365  * @class Roo.data.MemoryProxy
1366  * An implementation of Roo.data.DataProxy that simply passes the data specified in its constructor
1367  * to the Reader when its load method is called.
1368  * @constructor
1369  * @param {Object} data The data object which the Reader uses to construct a block of Roo.data.Records.
1370  */
1371 Roo.data.MemoryProxy = function(data){
1372     if (data.data) {
1373         data = data.data;
1374     }
1375     Roo.data.MemoryProxy.superclass.constructor.call(this);
1376     this.data = data;
1377 };
1378
1379 Roo.extend(Roo.data.MemoryProxy, Roo.data.DataProxy, {
1380     
1381     /**
1382      * Load data from the requested source (in this case an in-memory
1383      * data object passed to the constructor), read the data object into
1384      * a block of Roo.data.Records using the passed Roo.data.DataReader implementation, and
1385      * process that block using the passed callback.
1386      * @param {Object} params This parameter is not used by the MemoryProxy class.
1387      * @param {Roo.data.DataReader} reader The Reader object which converts the data
1388      * object into a block of Roo.data.Records.
1389      * @param {Function} callback The function into which to pass the block of Roo.data.records.
1390      * The function must be passed <ul>
1391      * <li>The Record block object</li>
1392      * <li>The "arg" argument from the load function</li>
1393      * <li>A boolean success indicator</li>
1394      * </ul>
1395      * @param {Object} scope The scope in which to call the callback
1396      * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
1397      */
1398     load : function(params, reader, callback, scope, arg){
1399         params = params || {};
1400         var result;
1401         try {
1402             result = reader.readRecords(params.data ? params.data :this.data);
1403         }catch(e){
1404             this.fireEvent("loadexception", this, arg, null, e);
1405             callback.call(scope, null, arg, false);
1406             return;
1407         }
1408         callback.call(scope, result, arg, true);
1409     },
1410     
1411     // private
1412     update : function(params, records){
1413         
1414     }
1415 });/*
1416  * Based on:
1417  * Ext JS Library 1.1.1
1418  * Copyright(c) 2006-2007, Ext JS, LLC.
1419  *
1420  * Originally Released Under LGPL - original licence link has changed is not relivant.
1421  *
1422  * Fork - LGPL
1423  * <script type="text/javascript">
1424  */
1425 /**
1426  * @class Roo.data.HttpProxy
1427  * @extends Roo.data.DataProxy
1428  * An implementation of {@link Roo.data.DataProxy} that reads a data object from an {@link Roo.data.Connection} object
1429  * configured to reference a certain URL.<br><br>
1430  * <p>
1431  * <em>Note that this class cannot be used to retrieve data from a domain other than the domain
1432  * from which the running page was served.<br><br>
1433  * <p>
1434  * For cross-domain access to remote data, use an {@link Roo.data.ScriptTagProxy}.</em><br><br>
1435  * <p>
1436  * Be aware that to enable the browser to parse an XML document, the server must set
1437  * the Content-Type header in the HTTP response to "text/xml".
1438  * @constructor
1439  * @param {Object} conn Connection config options to add to each request (e.g. {url: 'foo.php'} or
1440  * an {@link Roo.data.Connection} object.  If a Connection config is passed, the singleton {@link Roo.Ajax} object
1441  * will be used to make the request.
1442  */
1443 Roo.data.HttpProxy = function(conn){
1444     Roo.data.HttpProxy.superclass.constructor.call(this);
1445     // is conn a conn config or a real conn?
1446     this.conn = conn;
1447     this.useAjax = !conn || !conn.events;
1448   
1449 };
1450
1451 Roo.extend(Roo.data.HttpProxy, Roo.data.DataProxy, {
1452     // thse are take from connection...
1453     
1454     /**
1455      * @cfg {String} url (Optional) The default URL to be used for requests to the server. (defaults to undefined)
1456      */
1457     /**
1458      * @cfg {Object} extraParams (Optional) An object containing properties which are used as
1459      * extra parameters to each request made by this object. (defaults to undefined)
1460      */
1461     /**
1462      * @cfg {Object} defaultHeaders (Optional) An object containing request headers which are added
1463      *  to each request made by this object. (defaults to undefined)
1464      */
1465     /**
1466      * @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)
1467      */
1468     /**
1469      * @cfg {Number} timeout (Optional) The timeout in milliseconds to be used for requests. (defaults to 30000)
1470      */
1471      /**
1472      * @cfg {Boolean} autoAbort (Optional) Whether this request should abort any pending requests. (defaults to false)
1473      * @type Boolean
1474      */
1475   
1476
1477     /**
1478      * @cfg {Boolean} disableCaching (Optional) True to add a unique cache-buster param to GET requests. (defaults to true)
1479      * @type Boolean
1480      */
1481     /**
1482      * Return the {@link Roo.data.Connection} object being used by this Proxy.
1483      * @return {Connection} The Connection object. This object may be used to subscribe to events on
1484      * a finer-grained basis than the DataProxy events.
1485      */
1486     getConnection : function(){
1487         return this.useAjax ? Roo.Ajax : this.conn;
1488     },
1489
1490     /**
1491      * Load data from the configured {@link Roo.data.Connection}, read the data object into
1492      * a block of Roo.data.Records using the passed {@link Roo.data.DataReader} implementation, and
1493      * process that block using the passed callback.
1494      * @param {Object} params An object containing properties which are to be used as HTTP parameters
1495      * for the request to the remote server.
1496      * @param {Roo.data.DataReader} reader The Reader object which converts the data
1497      * object into a block of Roo.data.Records.
1498      * @param {Function} callback The function into which to pass the block of Roo.data.Records.
1499      * The function must be passed <ul>
1500      * <li>The Record block object</li>
1501      * <li>The "arg" argument from the load function</li>
1502      * <li>A boolean success indicator</li>
1503      * </ul>
1504      * @param {Object} scope The scope in which to call the callback
1505      * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
1506      */
1507     load : function(params, reader, callback, scope, arg){
1508         if(this.fireEvent("beforeload", this, params) !== false){
1509             var  o = {
1510                 params : params || {},
1511                 request: {
1512                     callback : callback,
1513                     scope : scope,
1514                     arg : arg
1515                 },
1516                 reader: reader,
1517                 callback : this.loadResponse,
1518                 scope: this
1519             };
1520             if(this.useAjax){
1521                 Roo.applyIf(o, this.conn);
1522                 if(this.activeRequest){
1523                     Roo.Ajax.abort(this.activeRequest);
1524                 }
1525                 this.activeRequest = Roo.Ajax.request(o);
1526             }else{
1527                 this.conn.request(o);
1528             }
1529         }else{
1530             callback.call(scope||this, null, arg, false);
1531         }
1532     },
1533
1534     // private
1535     loadResponse : function(o, success, response){
1536         delete this.activeRequest;
1537         if(!success){
1538             this.fireEvent("loadexception", this, o, response);
1539             o.request.callback.call(o.request.scope, null, o.request.arg, false);
1540             return;
1541         }
1542         var result;
1543         try {
1544             result = o.reader.read(response);
1545         }catch(e){
1546             this.fireEvent("loadexception", this, o, response, e);
1547             o.request.callback.call(o.request.scope, null, o.request.arg, false);
1548             return;
1549         }
1550         
1551         this.fireEvent("load", this, o, o.request.arg);
1552         o.request.callback.call(o.request.scope, result, o.request.arg, true);
1553     },
1554
1555     // private
1556     update : function(dataSet){
1557
1558     },
1559
1560     // private
1561     updateResponse : function(dataSet){
1562
1563     }
1564 });/*
1565  * Based on:
1566  * Ext JS Library 1.1.1
1567  * Copyright(c) 2006-2007, Ext JS, LLC.
1568  *
1569  * Originally Released Under LGPL - original licence link has changed is not relivant.
1570  *
1571  * Fork - LGPL
1572  * <script type="text/javascript">
1573  */
1574
1575 /**
1576  * @class Roo.data.ScriptTagProxy
1577  * An implementation of Roo.data.DataProxy that reads a data object from a URL which may be in a domain
1578  * other than the originating domain of the running page.<br><br>
1579  * <p>
1580  * <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
1581  * of the running page, you must use this class, rather than DataProxy.</em><br><br>
1582  * <p>
1583  * The content passed back from a server resource requested by a ScriptTagProxy is executable JavaScript
1584  * source code that is used as the source inside a &lt;script> tag.<br><br>
1585  * <p>
1586  * In order for the browser to process the returned data, the server must wrap the data object
1587  * with a call to a callback function, the name of which is passed as a parameter by the ScriptTagProxy.
1588  * Below is a Java example for a servlet which returns data for either a ScriptTagProxy, or an HttpProxy
1589  * depending on whether the callback name was passed:
1590  * <p>
1591  * <pre><code>
1592 boolean scriptTag = false;
1593 String cb = request.getParameter("callback");
1594 if (cb != null) {
1595     scriptTag = true;
1596     response.setContentType("text/javascript");
1597 } else {
1598     response.setContentType("application/x-json");
1599 }
1600 Writer out = response.getWriter();
1601 if (scriptTag) {
1602     out.write(cb + "(");
1603 }
1604 out.print(dataBlock.toJsonString());
1605 if (scriptTag) {
1606     out.write(");");
1607 }
1608 </pre></code>
1609  *
1610  * @constructor
1611  * @param {Object} config A configuration object.
1612  */
1613 Roo.data.ScriptTagProxy = function(config){
1614     Roo.data.ScriptTagProxy.superclass.constructor.call(this);
1615     Roo.apply(this, config);
1616     this.head = document.getElementsByTagName("head")[0];
1617 };
1618
1619 Roo.data.ScriptTagProxy.TRANS_ID = 1000;
1620
1621 Roo.extend(Roo.data.ScriptTagProxy, Roo.data.DataProxy, {
1622     /**
1623      * @cfg {String} url The URL from which to request the data object.
1624      */
1625     /**
1626      * @cfg {Number} timeout (Optional) The number of milliseconds to wait for a response. Defaults to 30 seconds.
1627      */
1628     timeout : 30000,
1629     /**
1630      * @cfg {String} callbackParam (Optional) The name of the parameter to pass to the server which tells
1631      * the server the name of the callback function set up by the load call to process the returned data object.
1632      * Defaults to "callback".<p>The server-side processing must read this parameter value, and generate
1633      * javascript output which calls this named function passing the data object as its only parameter.
1634      */
1635     callbackParam : "callback",
1636     /**
1637      *  @cfg {Boolean} nocache (Optional) Defaults to true. Disable cacheing by adding a unique parameter
1638      * name to the request.
1639      */
1640     nocache : true,
1641
1642     /**
1643      * Load data from the configured URL, read the data object into
1644      * a block of Roo.data.Records using the passed Roo.data.DataReader implementation, and
1645      * process that block using the passed callback.
1646      * @param {Object} params An object containing properties which are to be used as HTTP parameters
1647      * for the request to the remote server.
1648      * @param {Roo.data.DataReader} reader The Reader object which converts the data
1649      * object into a block of Roo.data.Records.
1650      * @param {Function} callback The function into which to pass the block of Roo.data.Records.
1651      * The function must be passed <ul>
1652      * <li>The Record block object</li>
1653      * <li>The "arg" argument from the load function</li>
1654      * <li>A boolean success indicator</li>
1655      * </ul>
1656      * @param {Object} scope The scope in which to call the callback
1657      * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
1658      */
1659     load : function(params, reader, callback, scope, arg){
1660         if(this.fireEvent("beforeload", this, params) !== false){
1661
1662             var p = Roo.urlEncode(Roo.apply(params, this.extraParams));
1663
1664             var url = this.url;
1665             url += (url.indexOf("?") != -1 ? "&" : "?") + p;
1666             if(this.nocache){
1667                 url += "&_dc=" + (new Date().getTime());
1668             }
1669             var transId = ++Roo.data.ScriptTagProxy.TRANS_ID;
1670             var trans = {
1671                 id : transId,
1672                 cb : "stcCallback"+transId,
1673                 scriptId : "stcScript"+transId,
1674                 params : params,
1675                 arg : arg,
1676                 url : url,
1677                 callback : callback,
1678                 scope : scope,
1679                 reader : reader
1680             };
1681             var conn = this;
1682
1683             window[trans.cb] = function(o){
1684                 conn.handleResponse(o, trans);
1685             };
1686
1687             url += String.format("&{0}={1}", this.callbackParam, trans.cb);
1688
1689             if(this.autoAbort !== false){
1690                 this.abort();
1691             }
1692
1693             trans.timeoutId = this.handleFailure.defer(this.timeout, this, [trans]);
1694
1695             var script = document.createElement("script");
1696             script.setAttribute("src", url);
1697             script.setAttribute("type", "text/javascript");
1698             script.setAttribute("id", trans.scriptId);
1699             this.head.appendChild(script);
1700
1701             this.trans = trans;
1702         }else{
1703             callback.call(scope||this, null, arg, false);
1704         }
1705     },
1706
1707     // private
1708     isLoading : function(){
1709         return this.trans ? true : false;
1710     },
1711
1712     /**
1713      * Abort the current server request.
1714      */
1715     abort : function(){
1716         if(this.isLoading()){
1717             this.destroyTrans(this.trans);
1718         }
1719     },
1720
1721     // private
1722     destroyTrans : function(trans, isLoaded){
1723         this.head.removeChild(document.getElementById(trans.scriptId));
1724         clearTimeout(trans.timeoutId);
1725         if(isLoaded){
1726             window[trans.cb] = undefined;
1727             try{
1728                 delete window[trans.cb];
1729             }catch(e){}
1730         }else{
1731             // if hasn't been loaded, wait for load to remove it to prevent script error
1732             window[trans.cb] = function(){
1733                 window[trans.cb] = undefined;
1734                 try{
1735                     delete window[trans.cb];
1736                 }catch(e){}
1737             };
1738         }
1739     },
1740
1741     // private
1742     handleResponse : function(o, trans){
1743         this.trans = false;
1744         this.destroyTrans(trans, true);
1745         var result;
1746         try {
1747             result = trans.reader.readRecords(o);
1748         }catch(e){
1749             this.fireEvent("loadexception", this, o, trans.arg, e);
1750             trans.callback.call(trans.scope||window, null, trans.arg, false);
1751             return;
1752         }
1753         this.fireEvent("load", this, o, trans.arg);
1754         trans.callback.call(trans.scope||window, result, trans.arg, true);
1755     },
1756
1757     // private
1758     handleFailure : function(trans){
1759         this.trans = false;
1760         this.destroyTrans(trans, false);
1761         this.fireEvent("loadexception", this, null, trans.arg);
1762         trans.callback.call(trans.scope||window, null, trans.arg, false);
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 /**
1776  * @class Roo.data.JsonReader
1777  * @extends Roo.data.DataReader
1778  * Data reader class to create an Array of Roo.data.Record objects from a JSON response
1779  * based on mappings in a provided Roo.data.Record constructor.
1780  * 
1781  * The default behaviour of a store is to send ?_requestMeta=1, unless the class has recieved 'metaData' property
1782  * in the reply previously. 
1783  * 
1784  * <p>
1785  * Example code:
1786  * <pre><code>
1787 var RecordDef = Roo.data.Record.create([
1788     {name: 'name', mapping: 'name'},     // "mapping" property not needed if it's the same as "name"
1789     {name: 'occupation'}                 // This field will use "occupation" as the mapping.
1790 ]);
1791 var myReader = new Roo.data.JsonReader({
1792     totalProperty: "results",    // The property which contains the total dataset size (optional)
1793     root: "rows",                // The property which contains an Array of row objects
1794     id: "id"                     // The property within each row object that provides an ID for the record (optional)
1795 }, RecordDef);
1796 </code></pre>
1797  * <p>
1798  * This would consume a JSON file like this:
1799  * <pre><code>
1800 { 'results': 2, 'rows': [
1801     { 'id': 1, 'name': 'Bill', occupation: 'Gardener' },
1802     { 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' } ]
1803 }
1804 </code></pre>
1805  * @cfg {String} totalProperty Name of the property from which to retrieve the total number of records
1806  * in the dataset. This is only needed if the whole dataset is not passed in one go, but is being
1807  * paged from the remote server.
1808  * @cfg {String} successProperty Name of the property from which to retrieve the success attribute used by forms.
1809  * @cfg {String} root name of the property which contains the Array of row objects.
1810  * @cfg {String} id Name of the property within a row object that contains a record identifier value.
1811  * @cfg {Array} fields Array of field definition objects
1812  * @constructor
1813  * Create a new JsonReader
1814  * @param {Object} meta Metadata configuration options
1815  * @param {Object} recordType Either an Array of field definition objects,
1816  * or an {@link Roo.data.Record} object created using {@link Roo.data.Record#create}.
1817  */
1818 Roo.data.JsonReader = function(meta, recordType){
1819     
1820     meta = meta || {};
1821     // set some defaults:
1822     Roo.applyIf(meta, {
1823         totalProperty: 'total',
1824         successProperty : 'success',
1825         root : 'data',
1826         id : 'id'
1827     });
1828     
1829     Roo.data.JsonReader.superclass.constructor.call(this, meta, recordType||meta.fields);
1830 };
1831 Roo.extend(Roo.data.JsonReader, Roo.data.DataReader, {
1832     
1833     /**
1834      * @prop {Boolean} metaFromRemote  - if the meta data was loaded from the remote source.
1835      * Used by Store query builder to append _requestMeta to params.
1836      * 
1837      */
1838     metaFromRemote : false,
1839     /**
1840      * This method is only used by a DataProxy which has retrieved data from a remote server.
1841      * @param {Object} response The XHR object which contains the JSON data in its responseText.
1842      * @return {Object} data A data block which is used by an Roo.data.Store object as
1843      * a cache of Roo.data.Records.
1844      */
1845     read : function(response){
1846         var json = response.responseText;
1847        
1848         var o = /* eval:var:o */ eval("("+json+")");
1849         if(!o) {
1850             throw {message: "JsonReader.read: Json object not found"};
1851         }
1852         
1853         if(o.metaData){
1854             
1855             delete this.ef;
1856             this.metaFromRemote = true;
1857             this.meta = o.metaData;
1858             this.recordType = Roo.data.Record.create(o.metaData.fields);
1859             this.onMetaChange(this.meta, this.recordType, o);
1860         }
1861         return this.readRecords(o);
1862     },
1863
1864     // private function a store will implement
1865     onMetaChange : function(meta, recordType, o){
1866
1867     },
1868
1869     /**
1870          * @ignore
1871          */
1872     simpleAccess: function(obj, subsc) {
1873         return obj[subsc];
1874     },
1875
1876         /**
1877          * @ignore
1878          */
1879     getJsonAccessor: function(){
1880         var re = /[\[\.]/;
1881         return function(expr) {
1882             try {
1883                 return(re.test(expr))
1884                     ? new Function("obj", "return obj." + expr)
1885                     : function(obj){
1886                         return obj[expr];
1887                     };
1888             } catch(e){}
1889             return Roo.emptyFn;
1890         };
1891     }(),
1892
1893     /**
1894      * Create a data block containing Roo.data.Records from an XML document.
1895      * @param {Object} o An object which contains an Array of row objects in the property specified
1896      * in the config as 'root, and optionally a property, specified in the config as 'totalProperty'
1897      * which contains the total size of the dataset.
1898      * @return {Object} data A data block which is used by an Roo.data.Store object as
1899      * a cache of Roo.data.Records.
1900      */
1901     readRecords : function(o){
1902         /**
1903          * After any data loads, the raw JSON data is available for further custom processing.
1904          * @type Object
1905          */
1906         this.o = o;
1907         var s = this.meta, Record = this.recordType,
1908             f = Record ? Record.prototype.fields : null, fi = f ? f.items : [], fl = f ? f.length : 0;
1909
1910 //      Generate extraction functions for the totalProperty, the root, the id, and for each field
1911         if (!this.ef) {
1912             if(s.totalProperty) {
1913                     this.getTotal = this.getJsonAccessor(s.totalProperty);
1914                 }
1915                 if(s.successProperty) {
1916                     this.getSuccess = this.getJsonAccessor(s.successProperty);
1917                 }
1918                 this.getRoot = s.root ? this.getJsonAccessor(s.root) : function(p){return p;};
1919                 if (s.id) {
1920                         var g = this.getJsonAccessor(s.id);
1921                         this.getId = function(rec) {
1922                                 var r = g(rec);  
1923                                 return (r === undefined || r === "") ? null : r;
1924                         };
1925                 } else {
1926                         this.getId = function(){return null;};
1927                 }
1928             this.ef = [];
1929             for(var jj = 0; jj < fl; jj++){
1930                 f = fi[jj];
1931                 var map = (f.mapping !== undefined && f.mapping !== null) ? f.mapping : f.name;
1932                 this.ef[jj] = this.getJsonAccessor(map);
1933             }
1934         }
1935
1936         var root = this.getRoot(o), c = root.length, totalRecords = c, success = true;
1937         if(s.totalProperty){
1938             var vt = parseInt(this.getTotal(o), 10);
1939             if(!isNaN(vt)){
1940                 totalRecords = vt;
1941             }
1942         }
1943         if(s.successProperty){
1944             var vs = this.getSuccess(o);
1945             if(vs === false || vs === 'false'){
1946                 success = false;
1947             }
1948         }
1949         var records = [];
1950         for(var i = 0; i < c; i++){
1951                 var n = root[i];
1952             var values = {};
1953             var id = this.getId(n);
1954             for(var j = 0; j < fl; j++){
1955                 f = fi[j];
1956             var v = this.ef[j](n);
1957             if (!f.convert) {
1958                 Roo.log('missing convert for ' + f.name);
1959                 Roo.log(f);
1960                 continue;
1961             }
1962             values[f.name] = f.convert((v !== undefined) ? v : f.defaultValue);
1963             }
1964             var record = new Record(values, id);
1965             record.json = n;
1966             records[i] = record;
1967         }
1968         return {
1969             raw : o,
1970             success : success,
1971             records : records,
1972             totalRecords : totalRecords
1973         };
1974     }
1975 });/*
1976  * Based on:
1977  * Ext JS Library 1.1.1
1978  * Copyright(c) 2006-2007, Ext JS, LLC.
1979  *
1980  * Originally Released Under LGPL - original licence link has changed is not relivant.
1981  *
1982  * Fork - LGPL
1983  * <script type="text/javascript">
1984  */
1985
1986 /**
1987  * @class Roo.data.XmlReader
1988  * @extends Roo.data.DataReader
1989  * Data reader class to create an Array of {@link Roo.data.Record} objects from an XML document
1990  * based on mappings in a provided Roo.data.Record constructor.<br><br>
1991  * <p>
1992  * <em>Note that in order for the browser to parse a returned XML document, the Content-Type
1993  * header in the HTTP response must be set to "text/xml".</em>
1994  * <p>
1995  * Example code:
1996  * <pre><code>
1997 var RecordDef = Roo.data.Record.create([
1998    {name: 'name', mapping: 'name'},     // "mapping" property not needed if it's the same as "name"
1999    {name: 'occupation'}                 // This field will use "occupation" as the mapping.
2000 ]);
2001 var myReader = new Roo.data.XmlReader({
2002    totalRecords: "results", // The element which contains the total dataset size (optional)
2003    record: "row",           // The repeated element which contains row information
2004    id: "id"                 // The element within the row that provides an ID for the record (optional)
2005 }, RecordDef);
2006 </code></pre>
2007  * <p>
2008  * This would consume an XML file like this:
2009  * <pre><code>
2010 &lt;?xml?>
2011 &lt;dataset>
2012  &lt;results>2&lt;/results>
2013  &lt;row>
2014    &lt;id>1&lt;/id>
2015    &lt;name>Bill&lt;/name>
2016    &lt;occupation>Gardener&lt;/occupation>
2017  &lt;/row>
2018  &lt;row>
2019    &lt;id>2&lt;/id>
2020    &lt;name>Ben&lt;/name>
2021    &lt;occupation>Horticulturalist&lt;/occupation>
2022  &lt;/row>
2023 &lt;/dataset>
2024 </code></pre>
2025  * @cfg {String} totalRecords The DomQuery path from which to retrieve the total number of records
2026  * in the dataset. This is only needed if the whole dataset is not passed in one go, but is being
2027  * paged from the remote server.
2028  * @cfg {String} record The DomQuery path to the repeated element which contains record information.
2029  * @cfg {String} success The DomQuery path to the success attribute used by forms.
2030  * @cfg {String} id The DomQuery path relative from the record element to the element that contains
2031  * a record identifier value.
2032  * @constructor
2033  * Create a new XmlReader
2034  * @param {Object} meta Metadata configuration options
2035  * @param {Mixed} recordType The definition of the data record type to produce.  This can be either a valid
2036  * Record subclass created with {@link Roo.data.Record#create}, or an array of objects with which to call
2037  * Roo.data.Record.create.  See the {@link Roo.data.Record} class for more details.
2038  */
2039 Roo.data.XmlReader = function(meta, recordType){
2040     meta = meta || {};
2041     Roo.data.XmlReader.superclass.constructor.call(this, meta, recordType||meta.fields);
2042 };
2043 Roo.extend(Roo.data.XmlReader, Roo.data.DataReader, {
2044     /**
2045      * This method is only used by a DataProxy which has retrieved data from a remote server.
2046          * @param {Object} response The XHR object which contains the parsed XML document.  The response is expected
2047          * to contain a method called 'responseXML' that returns an XML document object.
2048      * @return {Object} records A data block which is used by an {@link Roo.data.Store} as
2049      * a cache of Roo.data.Records.
2050      */
2051     read : function(response){
2052         var doc = response.responseXML;
2053         if(!doc) {
2054             throw {message: "XmlReader.read: XML Document not available"};
2055         }
2056         return this.readRecords(doc);
2057     },
2058
2059     /**
2060      * Create a data block containing Roo.data.Records from an XML document.
2061          * @param {Object} doc A parsed XML document.
2062      * @return {Object} records A data block which is used by an {@link Roo.data.Store} as
2063      * a cache of Roo.data.Records.
2064      */
2065     readRecords : function(doc){
2066         /**
2067          * After any data loads/reads, the raw XML Document is available for further custom processing.
2068          * @type XMLDocument
2069          */
2070         this.xmlData = doc;
2071         var root = doc.documentElement || doc;
2072         var q = Roo.DomQuery;
2073         var recordType = this.recordType, fields = recordType.prototype.fields;
2074         var sid = this.meta.id;
2075         var totalRecords = 0, success = true;
2076         if(this.meta.totalRecords){
2077             totalRecords = q.selectNumber(this.meta.totalRecords, root, 0);
2078         }
2079         
2080         if(this.meta.success){
2081             var sv = q.selectValue(this.meta.success, root, true);
2082             success = sv !== false && sv !== 'false';
2083         }
2084         var records = [];
2085         var ns = q.select(this.meta.record, root);
2086         for(var i = 0, len = ns.length; i < len; i++) {
2087                 var n = ns[i];
2088                 var values = {};
2089                 var id = sid ? q.selectValue(sid, n) : undefined;
2090                 for(var j = 0, jlen = fields.length; j < jlen; j++){
2091                     var f = fields.items[j];
2092                 var v = q.selectValue(f.mapping || f.name, n, f.defaultValue);
2093                     v = f.convert(v);
2094                     values[f.name] = v;
2095                 }
2096                 var record = new recordType(values, id);
2097                 record.node = n;
2098                 records[records.length] = record;
2099             }
2100
2101             return {
2102                 success : success,
2103                 records : records,
2104                 totalRecords : totalRecords || records.length
2105             };
2106     }
2107 });/*
2108  * Based on:
2109  * Ext JS Library 1.1.1
2110  * Copyright(c) 2006-2007, Ext JS, LLC.
2111  *
2112  * Originally Released Under LGPL - original licence link has changed is not relivant.
2113  *
2114  * Fork - LGPL
2115  * <script type="text/javascript">
2116  */
2117
2118 /**
2119  * @class Roo.data.ArrayReader
2120  * @extends Roo.data.DataReader
2121  * Data reader class to create an Array of Roo.data.Record objects from an Array.
2122  * Each element of that Array represents a row of data fields. The
2123  * fields are pulled into a Record object using as a subscript, the <em>mapping</em> property
2124  * of the field definition if it exists, or the field's ordinal position in the definition.<br>
2125  * <p>
2126  * Example code:.
2127  * <pre><code>
2128 var RecordDef = Roo.data.Record.create([
2129     {name: 'name', mapping: 1},         // "mapping" only needed if an "id" field is present which
2130     {name: 'occupation', mapping: 2}    // precludes using the ordinal position as the index.
2131 ]);
2132 var myReader = new Roo.data.ArrayReader({
2133     id: 0                     // The subscript within row Array that provides an ID for the Record (optional)
2134 }, RecordDef);
2135 </code></pre>
2136  * <p>
2137  * This would consume an Array like this:
2138  * <pre><code>
2139 [ [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist'] ]
2140   </code></pre>
2141  
2142  * @constructor
2143  * Create a new JsonReader
2144  * @param {Object} meta Metadata configuration options.
2145  * @param {Object|Array} recordType Either an Array of field definition objects
2146  * 
2147  * @cfg {Array} fields Array of field definition objects
2148  * @cfg {String} id Name of the property within a row object that contains a record identifier value.
2149  * as specified to {@link Roo.data.Record#create},
2150  * or an {@link Roo.data.Record} object
2151  *
2152  * 
2153  * created using {@link Roo.data.Record#create}.
2154  */
2155 Roo.data.ArrayReader = function(meta, recordType){
2156     
2157      
2158     Roo.data.ArrayReader.superclass.constructor.call(this, meta, recordType||meta.fields);
2159 };
2160
2161 Roo.extend(Roo.data.ArrayReader, Roo.data.JsonReader, {
2162     /**
2163      * Create a data block containing Roo.data.Records from an XML document.
2164      * @param {Object} o An Array of row objects which represents the dataset.
2165      * @return {Object} A data block which is used by an {@link Roo.data.Store} object as
2166      * a cache of Roo.data.Records.
2167      */
2168     readRecords : function(o){
2169         var sid = this.meta ? this.meta.id : null;
2170         var recordType = this.recordType, fields = recordType.prototype.fields;
2171         var records = [];
2172         var root = o;
2173             for(var i = 0; i < root.length; i++){
2174                     var n = root[i];
2175                 var values = {};
2176                 var id = ((sid || sid === 0) && n[sid] !== undefined && n[sid] !== "" ? n[sid] : null);
2177                 for(var j = 0, jlen = fields.length; j < jlen; j++){
2178                 var f = fields.items[j];
2179                 var k = f.mapping !== undefined && f.mapping !== null ? f.mapping : j;
2180                 var v = n[k] !== undefined ? n[k] : f.defaultValue;
2181                 v = f.convert(v);
2182                 values[f.name] = v;
2183             }
2184                 var record = new recordType(values, id);
2185                 record.json = n;
2186                 records[records.length] = record;
2187             }
2188             return {
2189                 records : records,
2190                 totalRecords : records.length
2191             };
2192     }
2193 });/*
2194  * Based on:
2195  * Ext JS Library 1.1.1
2196  * Copyright(c) 2006-2007, Ext JS, LLC.
2197  *
2198  * Originally Released Under LGPL - original licence link has changed is not relivant.
2199  *
2200  * Fork - LGPL
2201  * <script type="text/javascript">
2202  */
2203
2204
2205 /**
2206  * @class Roo.data.Tree
2207  * @extends Roo.util.Observable
2208  * Represents a tree data structure and bubbles all the events for its nodes. The nodes
2209  * in the tree have most standard DOM functionality.
2210  * @constructor
2211  * @param {Node} root (optional) The root node
2212  */
2213 Roo.data.Tree = function(root){
2214    this.nodeHash = {};
2215    /**
2216     * The root node for this tree
2217     * @type Node
2218     */
2219    this.root = null;
2220    if(root){
2221        this.setRootNode(root);
2222    }
2223    this.addEvents({
2224        /**
2225         * @event append
2226         * Fires when a new child node is appended to a node in this tree.
2227         * @param {Tree} tree The owner tree
2228         * @param {Node} parent The parent node
2229         * @param {Node} node The newly appended node
2230         * @param {Number} index The index of the newly appended node
2231         */
2232        "append" : true,
2233        /**
2234         * @event remove
2235         * Fires when a child node is removed from a node in this tree.
2236         * @param {Tree} tree The owner tree
2237         * @param {Node} parent The parent node
2238         * @param {Node} node The child node removed
2239         */
2240        "remove" : true,
2241        /**
2242         * @event move
2243         * Fires when a node is moved to a new location in the tree
2244         * @param {Tree} tree The owner tree
2245         * @param {Node} node The node moved
2246         * @param {Node} oldParent The old parent of this node
2247         * @param {Node} newParent The new parent of this node
2248         * @param {Number} index The index it was moved to
2249         */
2250        "move" : true,
2251        /**
2252         * @event insert
2253         * Fires when a new child node is inserted in a node in this tree.
2254         * @param {Tree} tree The owner tree
2255         * @param {Node} parent The parent node
2256         * @param {Node} node The child node inserted
2257         * @param {Node} refNode The child node the node was inserted before
2258         */
2259        "insert" : true,
2260        /**
2261         * @event beforeappend
2262         * Fires before a new child is appended to a node in this tree, return false to cancel the append.
2263         * @param {Tree} tree The owner tree
2264         * @param {Node} parent The parent node
2265         * @param {Node} node The child node to be appended
2266         */
2267        "beforeappend" : true,
2268        /**
2269         * @event beforeremove
2270         * Fires before a child is removed from a node in this tree, return false to cancel the remove.
2271         * @param {Tree} tree The owner tree
2272         * @param {Node} parent The parent node
2273         * @param {Node} node The child node to be removed
2274         */
2275        "beforeremove" : true,
2276        /**
2277         * @event beforemove
2278         * Fires before a node is moved to a new location in the tree. Return false to cancel the move.
2279         * @param {Tree} tree The owner tree
2280         * @param {Node} node The node being moved
2281         * @param {Node} oldParent The parent of the node
2282         * @param {Node} newParent The new parent the node is moving to
2283         * @param {Number} index The index it is being moved to
2284         */
2285        "beforemove" : true,
2286        /**
2287         * @event beforeinsert
2288         * Fires before a new child is inserted in a node in this tree, return false to cancel the insert.
2289         * @param {Tree} tree The owner tree
2290         * @param {Node} parent The parent node
2291         * @param {Node} node The child node to be inserted
2292         * @param {Node} refNode The child node the node is being inserted before
2293         */
2294        "beforeinsert" : true
2295    });
2296
2297     Roo.data.Tree.superclass.constructor.call(this);
2298 };
2299
2300 Roo.extend(Roo.data.Tree, Roo.util.Observable, {
2301     pathSeparator: "/",
2302
2303     proxyNodeEvent : function(){
2304         return this.fireEvent.apply(this, arguments);
2305     },
2306
2307     /**
2308      * Returns the root node for this tree.
2309      * @return {Node}
2310      */
2311     getRootNode : function(){
2312         return this.root;
2313     },
2314
2315     /**
2316      * Sets the root node for this tree.
2317      * @param {Node} node
2318      * @return {Node}
2319      */
2320     setRootNode : function(node){
2321         this.root = node;
2322         node.ownerTree = this;
2323         node.isRoot = true;
2324         this.registerNode(node);
2325         return node;
2326     },
2327
2328     /**
2329      * Gets a node in this tree by its id.
2330      * @param {String} id
2331      * @return {Node}
2332      */
2333     getNodeById : function(id){
2334         return this.nodeHash[id];
2335     },
2336
2337     registerNode : function(node){
2338         this.nodeHash[node.id] = node;
2339     },
2340
2341     unregisterNode : function(node){
2342         delete this.nodeHash[node.id];
2343     },
2344
2345     toString : function(){
2346         return "[Tree"+(this.id?" "+this.id:"")+"]";
2347     }
2348 });
2349
2350 /**
2351  * @class Roo.data.Node
2352  * @extends Roo.util.Observable
2353  * @cfg {Boolean} leaf true if this node is a leaf and does not have children
2354  * @cfg {String} id The id for this node. If one is not specified, one is generated.
2355  * @constructor
2356  * @param {Object} attributes The attributes/config for the node
2357  */
2358 Roo.data.Node = function(attributes){
2359     /**
2360      * The attributes supplied for the node. You can use this property to access any custom attributes you supplied.
2361      * @type {Object}
2362      */
2363     this.attributes = attributes || {};
2364     this.leaf = this.attributes.leaf;
2365     /**
2366      * The node id. @type String
2367      */
2368     this.id = this.attributes.id;
2369     if(!this.id){
2370         this.id = Roo.id(null, "ynode-");
2371         this.attributes.id = this.id;
2372     }
2373      
2374     
2375     /**
2376      * All child nodes of this node. @type Array
2377      */
2378     this.childNodes = [];
2379     if(!this.childNodes.indexOf){ // indexOf is a must
2380         this.childNodes.indexOf = function(o){
2381             for(var i = 0, len = this.length; i < len; i++){
2382                 if(this[i] == o) {
2383                     return i;
2384                 }
2385             }
2386             return -1;
2387         };
2388     }
2389     /**
2390      * The parent node for this node. @type Node
2391      */
2392     this.parentNode = null;
2393     /**
2394      * The first direct child node of this node, or null if this node has no child nodes. @type Node
2395      */
2396     this.firstChild = null;
2397     /**
2398      * The last direct child node of this node, or null if this node has no child nodes. @type Node
2399      */
2400     this.lastChild = null;
2401     /**
2402      * The node immediately preceding this node in the tree, or null if there is no sibling node. @type Node
2403      */
2404     this.previousSibling = null;
2405     /**
2406      * The node immediately following this node in the tree, or null if there is no sibling node. @type Node
2407      */
2408     this.nextSibling = null;
2409
2410     this.addEvents({
2411        /**
2412         * @event append
2413         * Fires when a new child node is appended
2414         * @param {Tree} tree The owner tree
2415         * @param {Node} this This node
2416         * @param {Node} node The newly appended node
2417         * @param {Number} index The index of the newly appended node
2418         */
2419        "append" : true,
2420        /**
2421         * @event remove
2422         * Fires when a child node is removed
2423         * @param {Tree} tree The owner tree
2424         * @param {Node} this This node
2425         * @param {Node} node The removed node
2426         */
2427        "remove" : true,
2428        /**
2429         * @event move
2430         * Fires when this node is moved to a new location in the tree
2431         * @param {Tree} tree The owner tree
2432         * @param {Node} this This node
2433         * @param {Node} oldParent The old parent of this node
2434         * @param {Node} newParent The new parent of this node
2435         * @param {Number} index The index it was moved to
2436         */
2437        "move" : true,
2438        /**
2439         * @event insert
2440         * Fires when a new child node is inserted.
2441         * @param {Tree} tree The owner tree
2442         * @param {Node} this This node
2443         * @param {Node} node The child node inserted
2444         * @param {Node} refNode The child node the node was inserted before
2445         */
2446        "insert" : true,
2447        /**
2448         * @event beforeappend
2449         * Fires before a new child is appended, return false to cancel the append.
2450         * @param {Tree} tree The owner tree
2451         * @param {Node} this This node
2452         * @param {Node} node The child node to be appended
2453         */
2454        "beforeappend" : true,
2455        /**
2456         * @event beforeremove
2457         * Fires before a child is removed, return false to cancel the remove.
2458         * @param {Tree} tree The owner tree
2459         * @param {Node} this This node
2460         * @param {Node} node The child node to be removed
2461         */
2462        "beforeremove" : true,
2463        /**
2464         * @event beforemove
2465         * Fires before this node is moved to a new location in the tree. Return false to cancel the move.
2466         * @param {Tree} tree The owner tree
2467         * @param {Node} this This node
2468         * @param {Node} oldParent The parent of this node
2469         * @param {Node} newParent The new parent this node is moving to
2470         * @param {Number} index The index it is being moved to
2471         */
2472        "beforemove" : true,
2473        /**
2474         * @event beforeinsert
2475         * Fires before a new child is inserted, return false to cancel the insert.
2476         * @param {Tree} tree The owner tree
2477         * @param {Node} this This node
2478         * @param {Node} node The child node to be inserted
2479         * @param {Node} refNode The child node the node is being inserted before
2480         */
2481        "beforeinsert" : true
2482    });
2483     this.listeners = this.attributes.listeners;
2484     Roo.data.Node.superclass.constructor.call(this);
2485 };
2486
2487 Roo.extend(Roo.data.Node, Roo.util.Observable, {
2488     fireEvent : function(evtName){
2489         // first do standard event for this node
2490         if(Roo.data.Node.superclass.fireEvent.apply(this, arguments) === false){
2491             return false;
2492         }
2493         // then bubble it up to the tree if the event wasn't cancelled
2494         var ot = this.getOwnerTree();
2495         if(ot){
2496             if(ot.proxyNodeEvent.apply(ot, arguments) === false){
2497                 return false;
2498             }
2499         }
2500         return true;
2501     },
2502
2503     /**
2504      * Returns true if this node is a leaf
2505      * @return {Boolean}
2506      */
2507     isLeaf : function(){
2508         return this.leaf === true;
2509     },
2510
2511     // private
2512     setFirstChild : function(node){
2513         this.firstChild = node;
2514     },
2515
2516     //private
2517     setLastChild : function(node){
2518         this.lastChild = node;
2519     },
2520
2521
2522     /**
2523      * Returns true if this node is the last child of its parent
2524      * @return {Boolean}
2525      */
2526     isLast : function(){
2527        return (!this.parentNode ? true : this.parentNode.lastChild == this);
2528     },
2529
2530     /**
2531      * Returns true if this node is the first child of its parent
2532      * @return {Boolean}
2533      */
2534     isFirst : function(){
2535        return (!this.parentNode ? true : this.parentNode.firstChild == this);
2536     },
2537
2538     hasChildNodes : function(){
2539         return !this.isLeaf() && this.childNodes.length > 0;
2540     },
2541
2542     /**
2543      * Insert node(s) as the last child node of this node.
2544      * @param {Node/Array} node The node or Array of nodes to append
2545      * @return {Node} The appended node if single append, or null if an array was passed
2546      */
2547     appendChild : function(node){
2548         var multi = false;
2549         if(node instanceof Array){
2550             multi = node;
2551         }else if(arguments.length > 1){
2552             multi = arguments;
2553         }
2554         
2555         // if passed an array or multiple args do them one by one
2556         if(multi){
2557             for(var i = 0, len = multi.length; i < len; i++) {
2558                 this.appendChild(multi[i]);
2559             }
2560         }else{
2561             if(this.fireEvent("beforeappend", this.ownerTree, this, node) === false){
2562                 return false;
2563             }
2564             var index = this.childNodes.length;
2565             var oldParent = node.parentNode;
2566             // it's a move, make sure we move it cleanly
2567             if(oldParent){
2568                 if(node.fireEvent("beforemove", node.getOwnerTree(), node, oldParent, this, index) === false){
2569                     return false;
2570                 }
2571                 oldParent.removeChild(node);
2572             }
2573             
2574             index = this.childNodes.length;
2575             if(index == 0){
2576                 this.setFirstChild(node);
2577             }
2578             this.childNodes.push(node);
2579             node.parentNode = this;
2580             var ps = this.childNodes[index-1];
2581             if(ps){
2582                 node.previousSibling = ps;
2583                 ps.nextSibling = node;
2584             }else{
2585                 node.previousSibling = null;
2586             }
2587             node.nextSibling = null;
2588             this.setLastChild(node);
2589             node.setOwnerTree(this.getOwnerTree());
2590             this.fireEvent("append", this.ownerTree, this, node, index);
2591             if(this.ownerTree) {
2592                 this.ownerTree.fireEvent("appendnode", this, node, index);
2593             }
2594             if(oldParent){
2595                 node.fireEvent("move", this.ownerTree, node, oldParent, this, index);
2596             }
2597             return node;
2598         }
2599     },
2600
2601     /**
2602      * Removes a child node from this node.
2603      * @param {Node} node The node to remove
2604      * @return {Node} The removed node
2605      */
2606     removeChild : function(node){
2607         var index = this.childNodes.indexOf(node);
2608         if(index == -1){
2609             return false;
2610         }
2611         if(this.fireEvent("beforeremove", this.ownerTree, this, node) === false){
2612             return false;
2613         }
2614
2615         // remove it from childNodes collection
2616         this.childNodes.splice(index, 1);
2617
2618         // update siblings
2619         if(node.previousSibling){
2620             node.previousSibling.nextSibling = node.nextSibling;
2621         }
2622         if(node.nextSibling){
2623             node.nextSibling.previousSibling = node.previousSibling;
2624         }
2625
2626         // update child refs
2627         if(this.firstChild == node){
2628             this.setFirstChild(node.nextSibling);
2629         }
2630         if(this.lastChild == node){
2631             this.setLastChild(node.previousSibling);
2632         }
2633
2634         node.setOwnerTree(null);
2635         // clear any references from the node
2636         node.parentNode = null;
2637         node.previousSibling = null;
2638         node.nextSibling = null;
2639         this.fireEvent("remove", this.ownerTree, this, node);
2640         return node;
2641     },
2642
2643     /**
2644      * Inserts the first node before the second node in this nodes childNodes collection.
2645      * @param {Node} node The node to insert
2646      * @param {Node} refNode The node to insert before (if null the node is appended)
2647      * @return {Node} The inserted node
2648      */
2649     insertBefore : function(node, refNode){
2650         if(!refNode){ // like standard Dom, refNode can be null for append
2651             return this.appendChild(node);
2652         }
2653         // nothing to do
2654         if(node == refNode){
2655             return false;
2656         }
2657
2658         if(this.fireEvent("beforeinsert", this.ownerTree, this, node, refNode) === false){
2659             return false;
2660         }
2661         var index = this.childNodes.indexOf(refNode);
2662         var oldParent = node.parentNode;
2663         var refIndex = index;
2664
2665         // when moving internally, indexes will change after remove
2666         if(oldParent == this && this.childNodes.indexOf(node) < index){
2667             refIndex--;
2668         }
2669
2670         // it's a move, make sure we move it cleanly
2671         if(oldParent){
2672             if(node.fireEvent("beforemove", node.getOwnerTree(), node, oldParent, this, index, refNode) === false){
2673                 return false;
2674             }
2675             oldParent.removeChild(node);
2676         }
2677         if(refIndex == 0){
2678             this.setFirstChild(node);
2679         }
2680         this.childNodes.splice(refIndex, 0, node);
2681         node.parentNode = this;
2682         var ps = this.childNodes[refIndex-1];
2683         if(ps){
2684             node.previousSibling = ps;
2685             ps.nextSibling = node;
2686         }else{
2687             node.previousSibling = null;
2688         }
2689         node.nextSibling = refNode;
2690         refNode.previousSibling = node;
2691         node.setOwnerTree(this.getOwnerTree());
2692         this.fireEvent("insert", this.ownerTree, this, node, refNode);
2693         if(oldParent){
2694             node.fireEvent("move", this.ownerTree, node, oldParent, this, refIndex, refNode);
2695         }
2696         return node;
2697     },
2698
2699     /**
2700      * Returns the child node at the specified index.
2701      * @param {Number} index
2702      * @return {Node}
2703      */
2704     item : function(index){
2705         return this.childNodes[index];
2706     },
2707
2708     /**
2709      * Replaces one child node in this node with another.
2710      * @param {Node} newChild The replacement node
2711      * @param {Node} oldChild The node to replace
2712      * @return {Node} The replaced node
2713      */
2714     replaceChild : function(newChild, oldChild){
2715         this.insertBefore(newChild, oldChild);
2716         this.removeChild(oldChild);
2717         return oldChild;
2718     },
2719
2720     /**
2721      * Returns the index of a child node
2722      * @param {Node} node
2723      * @return {Number} The index of the node or -1 if it was not found
2724      */
2725     indexOf : function(child){
2726         return this.childNodes.indexOf(child);
2727     },
2728
2729     /**
2730      * Returns the tree this node is in.
2731      * @return {Tree}
2732      */
2733     getOwnerTree : function(){
2734         // if it doesn't have one, look for one
2735         if(!this.ownerTree){
2736             var p = this;
2737             while(p){
2738                 if(p.ownerTree){
2739                     this.ownerTree = p.ownerTree;
2740                     break;
2741                 }
2742                 p = p.parentNode;
2743             }
2744         }
2745         return this.ownerTree;
2746     },
2747
2748     /**
2749      * Returns depth of this node (the root node has a depth of 0)
2750      * @return {Number}
2751      */
2752     getDepth : function(){
2753         var depth = 0;
2754         var p = this;
2755         while(p.parentNode){
2756             ++depth;
2757             p = p.parentNode;
2758         }
2759         return depth;
2760     },
2761
2762     // private
2763     setOwnerTree : function(tree){
2764         // if it's move, we need to update everyone
2765         if(tree != this.ownerTree){
2766             if(this.ownerTree){
2767                 this.ownerTree.unregisterNode(this);
2768             }
2769             this.ownerTree = tree;
2770             var cs = this.childNodes;
2771             for(var i = 0, len = cs.length; i < len; i++) {
2772                 cs[i].setOwnerTree(tree);
2773             }
2774             if(tree){
2775                 tree.registerNode(this);
2776             }
2777         }
2778     },
2779
2780     /**
2781      * Returns the path for this node. The path can be used to expand or select this node programmatically.
2782      * @param {String} attr (optional) The attr to use for the path (defaults to the node's id)
2783      * @return {String} The path
2784      */
2785     getPath : function(attr){
2786         attr = attr || "id";
2787         var p = this.parentNode;
2788         var b = [this.attributes[attr]];
2789         while(p){
2790             b.unshift(p.attributes[attr]);
2791             p = p.parentNode;
2792         }
2793         var sep = this.getOwnerTree().pathSeparator;
2794         return sep + b.join(sep);
2795     },
2796
2797     /**
2798      * Bubbles up the tree from this node, calling the specified function with each node. The scope (<i>this</i>) of
2799      * function call will be the scope provided or the current node. The arguments to the function
2800      * will be the args provided or the current node. If the function returns false at any point,
2801      * the bubble is stopped.
2802      * @param {Function} fn The function to call
2803      * @param {Object} scope (optional) The scope of the function (defaults to current node)
2804      * @param {Array} args (optional) The args to call the function with (default to passing the current node)
2805      */
2806     bubble : function(fn, scope, args){
2807         var p = this;
2808         while(p){
2809             if(fn.call(scope || p, args || p) === false){
2810                 break;
2811             }
2812             p = p.parentNode;
2813         }
2814     },
2815
2816     /**
2817      * Cascades down the tree from this node, calling the specified function with each node. The scope (<i>this</i>) of
2818      * function call will be the scope provided or the current node. The arguments to the function
2819      * will be the args provided or the current node. If the function returns false at any point,
2820      * the cascade is stopped on that branch.
2821      * @param {Function} fn The function to call
2822      * @param {Object} scope (optional) The scope of the function (defaults to current node)
2823      * @param {Array} args (optional) The args to call the function with (default to passing the current node)
2824      */
2825     cascade : function(fn, scope, args){
2826         if(fn.call(scope || this, args || this) !== false){
2827             var cs = this.childNodes;
2828             for(var i = 0, len = cs.length; i < len; i++) {
2829                 cs[i].cascade(fn, scope, args);
2830             }
2831         }
2832     },
2833
2834     /**
2835      * Interates the child nodes of this node, calling the specified function with each node. The scope (<i>this</i>) of
2836      * function call will be the scope provided or the current node. The arguments to the function
2837      * will be the args provided or the current node. If the function returns false at any point,
2838      * the iteration stops.
2839      * @param {Function} fn The function to call
2840      * @param {Object} scope (optional) The scope of the function (defaults to current node)
2841      * @param {Array} args (optional) The args to call the function with (default to passing the current node)
2842      */
2843     eachChild : function(fn, scope, args){
2844         var cs = this.childNodes;
2845         for(var i = 0, len = cs.length; i < len; i++) {
2846                 if(fn.call(scope || this, args || cs[i]) === false){
2847                     break;
2848                 }
2849         }
2850     },
2851
2852     /**
2853      * Finds the first child that has the attribute with the specified value.
2854      * @param {String} attribute The attribute name
2855      * @param {Mixed} value The value to search for
2856      * @return {Node} The found child or null if none was found
2857      */
2858     findChild : function(attribute, value){
2859         var cs = this.childNodes;
2860         for(var i = 0, len = cs.length; i < len; i++) {
2861                 if(cs[i].attributes[attribute] == value){
2862                     return cs[i];
2863                 }
2864         }
2865         return null;
2866     },
2867
2868     /**
2869      * Finds the first child by a custom function. The child matches if the function passed
2870      * returns true.
2871      * @param {Function} fn
2872      * @param {Object} scope (optional)
2873      * @return {Node} The found child or null if none was found
2874      */
2875     findChildBy : function(fn, scope){
2876         var cs = this.childNodes;
2877         for(var i = 0, len = cs.length; i < len; i++) {
2878                 if(fn.call(scope||cs[i], cs[i]) === true){
2879                     return cs[i];
2880                 }
2881         }
2882         return null;
2883     },
2884
2885     /**
2886      * Sorts this nodes children using the supplied sort function
2887      * @param {Function} fn
2888      * @param {Object} scope (optional)
2889      */
2890     sort : function(fn, scope){
2891         var cs = this.childNodes;
2892         var len = cs.length;
2893         if(len > 0){
2894             var sortFn = scope ? function(){fn.apply(scope, arguments);} : fn;
2895             cs.sort(sortFn);
2896             for(var i = 0; i < len; i++){
2897                 var n = cs[i];
2898                 n.previousSibling = cs[i-1];
2899                 n.nextSibling = cs[i+1];
2900                 if(i == 0){
2901                     this.setFirstChild(n);
2902                 }
2903                 if(i == len-1){
2904                     this.setLastChild(n);
2905                 }
2906             }
2907         }
2908     },
2909
2910     /**
2911      * Returns true if this node is an ancestor (at any point) of the passed node.
2912      * @param {Node} node
2913      * @return {Boolean}
2914      */
2915     contains : function(node){
2916         return node.isAncestor(this);
2917     },
2918
2919     /**
2920      * Returns true if the passed node is an ancestor (at any point) of this node.
2921      * @param {Node} node
2922      * @return {Boolean}
2923      */
2924     isAncestor : function(node){
2925         var p = this.parentNode;
2926         while(p){
2927             if(p == node){
2928                 return true;
2929             }
2930             p = p.parentNode;
2931         }
2932         return false;
2933     },
2934
2935     toString : function(){
2936         return "[Node"+(this.id?" "+this.id:"")+"]";
2937     }
2938 });/*
2939  * Based on:
2940  * Ext JS Library 1.1.1
2941  * Copyright(c) 2006-2007, Ext JS, LLC.
2942  *
2943  * Originally Released Under LGPL - original licence link has changed is not relivant.
2944  *
2945  * Fork - LGPL
2946  * <script type="text/javascript">
2947  */
2948  (function(){ 
2949 /**
2950  * @class Roo.Layer
2951  * @extends Roo.Element
2952  * An extended {@link Roo.Element} object that supports a shadow and shim, constrain to viewport and
2953  * automatic maintaining of shadow/shim positions.
2954  * @cfg {Boolean} shim False to disable the iframe shim in browsers which need one (defaults to true)
2955  * @cfg {String/Boolean} shadow True to create a shadow element with default class "x-layer-shadow", or
2956  * you can pass a string with a CSS class name. False turns off the shadow.
2957  * @cfg {Object} dh DomHelper object config to create element with (defaults to {tag: "div", cls: "x-layer"}).
2958  * @cfg {Boolean} constrain False to disable constrain to viewport (defaults to true)
2959  * @cfg {String} cls CSS class to add to the element
2960  * @cfg {Number} zindex Starting z-index (defaults to 11000)
2961  * @cfg {Number} shadowOffset Number of pixels to offset the shadow (defaults to 3)
2962  * @constructor
2963  * @param {Object} config An object with config options.
2964  * @param {String/HTMLElement} existingEl (optional) Uses an existing DOM element. If the element is not found it creates it.
2965  */
2966
2967 Roo.Layer = function(config, existingEl){
2968     config = config || {};
2969     var dh = Roo.DomHelper;
2970     var cp = config.parentEl, pel = cp ? Roo.getDom(cp) : document.body;
2971     if(existingEl){
2972         this.dom = Roo.getDom(existingEl);
2973     }
2974     if(!this.dom){
2975         var o = config.dh || {tag: "div", cls: "x-layer"};
2976         this.dom = dh.append(pel, o);
2977     }
2978     if(config.cls){
2979         this.addClass(config.cls);
2980     }
2981     this.constrain = config.constrain !== false;
2982     this.visibilityMode = Roo.Element.VISIBILITY;
2983     if(config.id){
2984         this.id = this.dom.id = config.id;
2985     }else{
2986         this.id = Roo.id(this.dom);
2987     }
2988     this.zindex = config.zindex || this.getZIndex();
2989     this.position("absolute", this.zindex);
2990     if(config.shadow){
2991         this.shadowOffset = config.shadowOffset || 4;
2992         this.shadow = new Roo.Shadow({
2993             offset : this.shadowOffset,
2994             mode : config.shadow
2995         });
2996     }else{
2997         this.shadowOffset = 0;
2998     }
2999     this.useShim = config.shim !== false && Roo.useShims;
3000     this.useDisplay = config.useDisplay;
3001     this.hide();
3002 };
3003
3004 var supr = Roo.Element.prototype;
3005
3006 // shims are shared among layer to keep from having 100 iframes
3007 var shims = [];
3008
3009 Roo.extend(Roo.Layer, Roo.Element, {
3010
3011     getZIndex : function(){
3012         return this.zindex || parseInt(this.getStyle("z-index"), 10) || 11000;
3013     },
3014
3015     getShim : function(){
3016         if(!this.useShim){
3017             return null;
3018         }
3019         if(this.shim){
3020             return this.shim;
3021         }
3022         var shim = shims.shift();
3023         if(!shim){
3024             shim = this.createShim();
3025             shim.enableDisplayMode('block');
3026             shim.dom.style.display = 'none';
3027             shim.dom.style.visibility = 'visible';
3028         }
3029         var pn = this.dom.parentNode;
3030         if(shim.dom.parentNode != pn){
3031             pn.insertBefore(shim.dom, this.dom);
3032         }
3033         shim.setStyle('z-index', this.getZIndex()-2);
3034         this.shim = shim;
3035         return shim;
3036     },
3037
3038     hideShim : function(){
3039         if(this.shim){
3040             this.shim.setDisplayed(false);
3041             shims.push(this.shim);
3042             delete this.shim;
3043         }
3044     },
3045
3046     disableShadow : function(){
3047         if(this.shadow){
3048             this.shadowDisabled = true;
3049             this.shadow.hide();
3050             this.lastShadowOffset = this.shadowOffset;
3051             this.shadowOffset = 0;
3052         }
3053     },
3054
3055     enableShadow : function(show){
3056         if(this.shadow){
3057             this.shadowDisabled = false;
3058             this.shadowOffset = this.lastShadowOffset;
3059             delete this.lastShadowOffset;
3060             if(show){
3061                 this.sync(true);
3062             }
3063         }
3064     },
3065
3066     // private
3067     // this code can execute repeatedly in milliseconds (i.e. during a drag) so
3068     // code size was sacrificed for effeciency (e.g. no getBox/setBox, no XY calls)
3069     sync : function(doShow){
3070         var sw = this.shadow;
3071         if(!this.updating && this.isVisible() && (sw || this.useShim)){
3072             var sh = this.getShim();
3073
3074             var w = this.getWidth(),
3075                 h = this.getHeight();
3076
3077             var l = this.getLeft(true),
3078                 t = this.getTop(true);
3079
3080             if(sw && !this.shadowDisabled){
3081                 if(doShow && !sw.isVisible()){
3082                     sw.show(this);
3083                 }else{
3084                     sw.realign(l, t, w, h);
3085                 }
3086                 if(sh){
3087                     if(doShow){
3088                        sh.show();
3089                     }
3090                     // fit the shim behind the shadow, so it is shimmed too
3091                     var a = sw.adjusts, s = sh.dom.style;
3092                     s.left = (Math.min(l, l+a.l))+"px";
3093                     s.top = (Math.min(t, t+a.t))+"px";
3094                     s.width = (w+a.w)+"px";
3095                     s.height = (h+a.h)+"px";
3096                 }
3097             }else if(sh){
3098                 if(doShow){
3099                    sh.show();
3100                 }
3101                 sh.setSize(w, h);
3102                 sh.setLeftTop(l, t);
3103             }
3104             
3105         }
3106     },
3107
3108     // private
3109     destroy : function(){
3110         this.hideShim();
3111         if(this.shadow){
3112             this.shadow.hide();
3113         }
3114         this.removeAllListeners();
3115         var pn = this.dom.parentNode;
3116         if(pn){
3117             pn.removeChild(this.dom);
3118         }
3119         Roo.Element.uncache(this.id);
3120     },
3121
3122     remove : function(){
3123         this.destroy();
3124     },
3125
3126     // private
3127     beginUpdate : function(){
3128         this.updating = true;
3129     },
3130
3131     // private
3132     endUpdate : function(){
3133         this.updating = false;
3134         this.sync(true);
3135     },
3136
3137     // private
3138     hideUnders : function(negOffset){
3139         if(this.shadow){
3140             this.shadow.hide();
3141         }
3142         this.hideShim();
3143     },
3144
3145     // private
3146     constrainXY : function(){
3147         if(this.constrain){
3148             var vw = Roo.lib.Dom.getViewWidth(),
3149                 vh = Roo.lib.Dom.getViewHeight();
3150             var s = Roo.get(document).getScroll();
3151
3152             var xy = this.getXY();
3153             var x = xy[0], y = xy[1];   
3154             var w = this.dom.offsetWidth+this.shadowOffset, h = this.dom.offsetHeight+this.shadowOffset;
3155             // only move it if it needs it
3156             var moved = false;
3157             // first validate right/bottom
3158             if((x + w) > vw+s.left){
3159                 x = vw - w - this.shadowOffset;
3160                 moved = true;
3161             }
3162             if((y + h) > vh+s.top){
3163                 y = vh - h - this.shadowOffset;
3164                 moved = true;
3165             }
3166             // then make sure top/left isn't negative
3167             if(x < s.left){
3168                 x = s.left;
3169                 moved = true;
3170             }
3171             if(y < s.top){
3172                 y = s.top;
3173                 moved = true;
3174             }
3175             if(moved){
3176                 if(this.avoidY){
3177                     var ay = this.avoidY;
3178                     if(y <= ay && (y+h) >= ay){
3179                         y = ay-h-5;   
3180                     }
3181                 }
3182                 xy = [x, y];
3183                 this.storeXY(xy);
3184                 supr.setXY.call(this, xy);
3185                 this.sync();
3186             }
3187         }
3188     },
3189
3190     isVisible : function(){
3191         return this.visible;    
3192     },
3193
3194     // private
3195     showAction : function(){
3196         this.visible = true; // track visibility to prevent getStyle calls
3197         if(this.useDisplay === true){
3198             this.setDisplayed("");
3199         }else if(this.lastXY){
3200             supr.setXY.call(this, this.lastXY);
3201         }else if(this.lastLT){
3202             supr.setLeftTop.call(this, this.lastLT[0], this.lastLT[1]);
3203         }
3204     },
3205
3206     // private
3207     hideAction : function(){
3208         this.visible = false;
3209         if(this.useDisplay === true){
3210             this.setDisplayed(false);
3211         }else{
3212             this.setLeftTop(-10000,-10000);
3213         }
3214     },
3215
3216     // overridden Element method
3217     setVisible : function(v, a, d, c, e){
3218         if(v){
3219             this.showAction();
3220         }
3221         if(a && v){
3222             var cb = function(){
3223                 this.sync(true);
3224                 if(c){
3225                     c();
3226                 }
3227             }.createDelegate(this);
3228             supr.setVisible.call(this, true, true, d, cb, e);
3229         }else{
3230             if(!v){
3231                 this.hideUnders(true);
3232             }
3233             var cb = c;
3234             if(a){
3235                 cb = function(){
3236                     this.hideAction();
3237                     if(c){
3238                         c();
3239                     }
3240                 }.createDelegate(this);
3241             }
3242             supr.setVisible.call(this, v, a, d, cb, e);
3243             if(v){
3244                 this.sync(true);
3245             }else if(!a){
3246                 this.hideAction();
3247             }
3248         }
3249     },
3250
3251     storeXY : function(xy){
3252         delete this.lastLT;
3253         this.lastXY = xy;
3254     },
3255
3256     storeLeftTop : function(left, top){
3257         delete this.lastXY;
3258         this.lastLT = [left, top];
3259     },
3260
3261     // private
3262     beforeFx : function(){
3263         this.beforeAction();
3264         return Roo.Layer.superclass.beforeFx.apply(this, arguments);
3265     },
3266
3267     // private
3268     afterFx : function(){
3269         Roo.Layer.superclass.afterFx.apply(this, arguments);
3270         this.sync(this.isVisible());
3271     },
3272
3273     // private
3274     beforeAction : function(){
3275         if(!this.updating && this.shadow){
3276             this.shadow.hide();
3277         }
3278     },
3279
3280     // overridden Element method
3281     setLeft : function(left){
3282         this.storeLeftTop(left, this.getTop(true));
3283         supr.setLeft.apply(this, arguments);
3284         this.sync();
3285     },
3286
3287     setTop : function(top){
3288         this.storeLeftTop(this.getLeft(true), top);
3289         supr.setTop.apply(this, arguments);
3290         this.sync();
3291     },
3292
3293     setLeftTop : function(left, top){
3294         this.storeLeftTop(left, top);
3295         supr.setLeftTop.apply(this, arguments);
3296         this.sync();
3297     },
3298
3299     setXY : function(xy, a, d, c, e){
3300         this.fixDisplay();
3301         this.beforeAction();
3302         this.storeXY(xy);
3303         var cb = this.createCB(c);
3304         supr.setXY.call(this, xy, a, d, cb, e);
3305         if(!a){
3306             cb();
3307         }
3308     },
3309
3310     // private
3311     createCB : function(c){
3312         var el = this;
3313         return function(){
3314             el.constrainXY();
3315             el.sync(true);
3316             if(c){
3317                 c();
3318             }
3319         };
3320     },
3321
3322     // overridden Element method
3323     setX : function(x, a, d, c, e){
3324         this.setXY([x, this.getY()], a, d, c, e);
3325     },
3326
3327     // overridden Element method
3328     setY : function(y, a, d, c, e){
3329         this.setXY([this.getX(), y], a, d, c, e);
3330     },
3331
3332     // overridden Element method
3333     setSize : function(w, h, a, d, c, e){
3334         this.beforeAction();
3335         var cb = this.createCB(c);
3336         supr.setSize.call(this, w, h, a, d, cb, e);
3337         if(!a){
3338             cb();
3339         }
3340     },
3341
3342     // overridden Element method
3343     setWidth : function(w, a, d, c, e){
3344         this.beforeAction();
3345         var cb = this.createCB(c);
3346         supr.setWidth.call(this, w, a, d, cb, e);
3347         if(!a){
3348             cb();
3349         }
3350     },
3351
3352     // overridden Element method
3353     setHeight : function(h, a, d, c, e){
3354         this.beforeAction();
3355         var cb = this.createCB(c);
3356         supr.setHeight.call(this, h, a, d, cb, e);
3357         if(!a){
3358             cb();
3359         }
3360     },
3361
3362     // overridden Element method
3363     setBounds : function(x, y, w, h, a, d, c, e){
3364         this.beforeAction();
3365         var cb = this.createCB(c);
3366         if(!a){
3367             this.storeXY([x, y]);
3368             supr.setXY.call(this, [x, y]);
3369             supr.setSize.call(this, w, h, a, d, cb, e);
3370             cb();
3371         }else{
3372             supr.setBounds.call(this, x, y, w, h, a, d, cb, e);
3373         }
3374         return this;
3375     },
3376     
3377     /**
3378      * Sets the z-index of this layer and adjusts any shadow and shim z-indexes. The layer z-index is automatically
3379      * incremented by two more than the value passed in so that it always shows above any shadow or shim (the shadow
3380      * element, if any, will be assigned z-index + 1, and the shim element, if any, will be assigned the unmodified z-index).
3381      * @param {Number} zindex The new z-index to set
3382      * @return {this} The Layer
3383      */
3384     setZIndex : function(zindex){
3385         this.zindex = zindex;
3386         this.setStyle("z-index", zindex + 2);
3387         if(this.shadow){
3388             this.shadow.setZIndex(zindex + 1);
3389         }
3390         if(this.shim){
3391             this.shim.setStyle("z-index", zindex);
3392         }
3393     }
3394 });
3395 })();/*
3396  * Based on:
3397  * Ext JS Library 1.1.1
3398  * Copyright(c) 2006-2007, Ext JS, LLC.
3399  *
3400  * Originally Released Under LGPL - original licence link has changed is not relivant.
3401  *
3402  * Fork - LGPL
3403  * <script type="text/javascript">
3404  */
3405
3406
3407 /**
3408  * @class Roo.Shadow
3409  * Simple class that can provide a shadow effect for any element.  Note that the element MUST be absolutely positioned,
3410  * and the shadow does not provide any shimming.  This should be used only in simple cases -- for more advanced
3411  * functionality that can also provide the same shadow effect, see the {@link Roo.Layer} class.
3412  * @constructor
3413  * Create a new Shadow
3414  * @param {Object} config The config object
3415  */
3416 Roo.Shadow = function(config){
3417     Roo.apply(this, config);
3418     if(typeof this.mode != "string"){
3419         this.mode = this.defaultMode;
3420     }
3421     var o = this.offset, a = {h: 0};
3422     var rad = Math.floor(this.offset/2);
3423     switch(this.mode.toLowerCase()){ // all this hideous nonsense calculates the various offsets for shadows
3424         case "drop":
3425             a.w = 0;
3426             a.l = a.t = o;
3427             a.t -= 1;
3428             if(Roo.isIE){
3429                 a.l -= this.offset + rad;
3430                 a.t -= this.offset + rad;
3431                 a.w -= rad;
3432                 a.h -= rad;
3433                 a.t += 1;
3434             }
3435         break;
3436         case "sides":
3437             a.w = (o*2);
3438             a.l = -o;
3439             a.t = o-1;
3440             if(Roo.isIE){
3441                 a.l -= (this.offset - rad);
3442                 a.t -= this.offset + rad;
3443                 a.l += 1;
3444                 a.w -= (this.offset - rad)*2;
3445                 a.w -= rad + 1;
3446                 a.h -= 1;
3447             }
3448         break;
3449         case "frame":
3450             a.w = a.h = (o*2);
3451             a.l = a.t = -o;
3452             a.t += 1;
3453             a.h -= 2;
3454             if(Roo.isIE){
3455                 a.l -= (this.offset - rad);
3456                 a.t -= (this.offset - rad);
3457                 a.l += 1;
3458                 a.w -= (this.offset + rad + 1);
3459                 a.h -= (this.offset + rad);
3460                 a.h += 1;
3461             }
3462         break;
3463     };
3464
3465     this.adjusts = a;
3466 };
3467
3468 Roo.Shadow.prototype = {
3469     /**
3470      * @cfg {String} mode
3471      * The shadow display mode.  Supports the following options:<br />
3472      * sides: Shadow displays on both sides and bottom only<br />
3473      * frame: Shadow displays equally on all four sides<br />
3474      * drop: Traditional bottom-right drop shadow (default)
3475      */
3476     /**
3477      * @cfg {String} offset
3478      * The number of pixels to offset the shadow from the element (defaults to 4)
3479      */
3480     offset: 4,
3481
3482     // private
3483     defaultMode: "drop",
3484
3485     /**
3486      * Displays the shadow under the target element
3487      * @param {String/HTMLElement/Element} targetEl The id or element under which the shadow should display
3488      */
3489     show : function(target){
3490         target = Roo.get(target);
3491         if(!this.el){
3492             this.el = Roo.Shadow.Pool.pull();
3493             if(this.el.dom.nextSibling != target.dom){
3494                 this.el.insertBefore(target);
3495             }
3496         }
3497         this.el.setStyle("z-index", this.zIndex || parseInt(target.getStyle("z-index"), 10)-1);
3498         if(Roo.isIE){
3499             this.el.dom.style.filter="progid:DXImageTransform.Microsoft.alpha(opacity=50) progid:DXImageTransform.Microsoft.Blur(pixelradius="+(this.offset)+")";
3500         }
3501         this.realign(
3502             target.getLeft(true),
3503             target.getTop(true),
3504             target.getWidth(),
3505             target.getHeight()
3506         );
3507         this.el.dom.style.display = "block";
3508     },
3509
3510     /**
3511      * Returns true if the shadow is visible, else false
3512      */
3513     isVisible : function(){
3514         return this.el ? true : false;  
3515     },
3516
3517     /**
3518      * Direct alignment when values are already available. Show must be called at least once before
3519      * calling this method to ensure it is initialized.
3520      * @param {Number} left The target element left position
3521      * @param {Number} top The target element top position
3522      * @param {Number} width The target element width
3523      * @param {Number} height The target element height
3524      */
3525     realign : function(l, t, w, h){
3526         if(!this.el){
3527             return;
3528         }
3529         var a = this.adjusts, d = this.el.dom, s = d.style;
3530         var iea = 0;
3531         s.left = (l+a.l)+"px";
3532         s.top = (t+a.t)+"px";
3533         var sw = (w+a.w), sh = (h+a.h), sws = sw +"px", shs = sh + "px";
3534  
3535         if(s.width != sws || s.height != shs){
3536             s.width = sws;
3537             s.height = shs;
3538             if(!Roo.isIE){
3539                 var cn = d.childNodes;
3540                 var sww = Math.max(0, (sw-12))+"px";
3541                 cn[0].childNodes[1].style.width = sww;
3542                 cn[1].childNodes[1].style.width = sww;
3543                 cn[2].childNodes[1].style.width = sww;
3544                 cn[1].style.height = Math.max(0, (sh-12))+"px";
3545             }
3546         }
3547     },
3548
3549     /**
3550      * Hides this shadow
3551      */
3552     hide : function(){
3553         if(this.el){
3554             this.el.dom.style.display = "none";
3555             Roo.Shadow.Pool.push(this.el);
3556             delete this.el;
3557         }
3558     },
3559
3560     /**
3561      * Adjust the z-index of this shadow
3562      * @param {Number} zindex The new z-index
3563      */
3564     setZIndex : function(z){
3565         this.zIndex = z;
3566         if(this.el){
3567             this.el.setStyle("z-index", z);
3568         }
3569     }
3570 };
3571
3572 // Private utility class that manages the internal Shadow cache
3573 Roo.Shadow.Pool = function(){
3574     var p = [];
3575     var markup = Roo.isIE ?
3576                  '<div class="x-ie-shadow"></div>' :
3577                  '<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>';
3578     return {
3579         pull : function(){
3580             var sh = p.shift();
3581             if(!sh){
3582                 sh = Roo.get(Roo.DomHelper.insertHtml("beforeBegin", document.body.firstChild, markup));
3583                 sh.autoBoxAdjust = false;
3584             }
3585             return sh;
3586         },
3587
3588         push : function(sh){
3589             p.push(sh);
3590         }
3591     };
3592 }();/*
3593  * Based on:
3594  * Ext JS Library 1.1.1
3595  * Copyright(c) 2006-2007, Ext JS, LLC.
3596  *
3597  * Originally Released Under LGPL - original licence link has changed is not relivant.
3598  *
3599  * Fork - LGPL
3600  * <script type="text/javascript">
3601  */
3602
3603
3604 /**
3605  * @class Roo.SplitBar
3606  * @extends Roo.util.Observable
3607  * Creates draggable splitter bar functionality from two elements (element to be dragged and element to be resized).
3608  * <br><br>
3609  * Usage:
3610  * <pre><code>
3611 var split = new Roo.SplitBar("elementToDrag", "elementToSize",
3612                    Roo.SplitBar.HORIZONTAL, Roo.SplitBar.LEFT);
3613 split.setAdapter(new Roo.SplitBar.AbsoluteLayoutAdapter("container"));
3614 split.minSize = 100;
3615 split.maxSize = 600;
3616 split.animate = true;
3617 split.on('moved', splitterMoved);
3618 </code></pre>
3619  * @constructor
3620  * Create a new SplitBar
3621  * @param {String/HTMLElement/Roo.Element} dragElement The element to be dragged and act as the SplitBar. 
3622  * @param {String/HTMLElement/Roo.Element} resizingElement The element to be resized based on where the SplitBar element is dragged 
3623  * @param {Number} orientation (optional) Either Roo.SplitBar.HORIZONTAL or Roo.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
3624  * @param {Number} placement (optional) Either Roo.SplitBar.LEFT or Roo.SplitBar.RIGHT for horizontal or  
3625                         Roo.SplitBar.TOP or Roo.SplitBar.BOTTOM for vertical. (By default, this is determined automatically by the initial
3626                         position of the SplitBar).
3627  */
3628 Roo.SplitBar = function(dragElement, resizingElement, orientation, placement, existingProxy){
3629     
3630     /** @private */
3631     this.el = Roo.get(dragElement, true);
3632     this.el.dom.unselectable = "on";
3633     /** @private */
3634     this.resizingEl = Roo.get(resizingElement, true);
3635
3636     /**
3637      * @private
3638      * The orientation of the split. Either Roo.SplitBar.HORIZONTAL or Roo.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
3639      * Note: If this is changed after creating the SplitBar, the placement property must be manually updated
3640      * @type Number
3641      */
3642     this.orientation = orientation || Roo.SplitBar.HORIZONTAL;
3643     
3644     /**
3645      * The minimum size of the resizing element. (Defaults to 0)
3646      * @type Number
3647      */
3648     this.minSize = 0;
3649     
3650     /**
3651      * The maximum size of the resizing element. (Defaults to 2000)
3652      * @type Number
3653      */
3654     this.maxSize = 2000;
3655     
3656     /**
3657      * Whether to animate the transition to the new size
3658      * @type Boolean
3659      */
3660     this.animate = false;
3661     
3662     /**
3663      * Whether to create a transparent shim that overlays the page when dragging, enables dragging across iframes.
3664      * @type Boolean
3665      */
3666     this.useShim = false;
3667     
3668     /** @private */
3669     this.shim = null;
3670     
3671     if(!existingProxy){
3672         /** @private */
3673         this.proxy = Roo.SplitBar.createProxy(this.orientation);
3674     }else{
3675         this.proxy = Roo.get(existingProxy).dom;
3676     }
3677     /** @private */
3678     this.dd = new Roo.dd.DDProxy(this.el.dom.id, "XSplitBars", {dragElId : this.proxy.id});
3679     
3680     /** @private */
3681     this.dd.b4StartDrag = this.onStartProxyDrag.createDelegate(this);
3682     
3683     /** @private */
3684     this.dd.endDrag = this.onEndProxyDrag.createDelegate(this);
3685     
3686     /** @private */
3687     this.dragSpecs = {};
3688     
3689     /**
3690      * @private The adapter to use to positon and resize elements
3691      */
3692     this.adapter = new Roo.SplitBar.BasicLayoutAdapter();
3693     this.adapter.init(this);
3694     
3695     if(this.orientation == Roo.SplitBar.HORIZONTAL){
3696         /** @private */
3697         this.placement = placement || (this.el.getX() > this.resizingEl.getX() ? Roo.SplitBar.LEFT : Roo.SplitBar.RIGHT);
3698         this.el.addClass("x-splitbar-h");
3699     }else{
3700         /** @private */
3701         this.placement = placement || (this.el.getY() > this.resizingEl.getY() ? Roo.SplitBar.TOP : Roo.SplitBar.BOTTOM);
3702         this.el.addClass("x-splitbar-v");
3703     }
3704     
3705     this.addEvents({
3706         /**
3707          * @event resize
3708          * Fires when the splitter is moved (alias for {@link #event-moved})
3709          * @param {Roo.SplitBar} this
3710          * @param {Number} newSize the new width or height
3711          */
3712         "resize" : true,
3713         /**
3714          * @event moved
3715          * Fires when the splitter is moved
3716          * @param {Roo.SplitBar} this
3717          * @param {Number} newSize the new width or height
3718          */
3719         "moved" : true,
3720         /**
3721          * @event beforeresize
3722          * Fires before the splitter is dragged
3723          * @param {Roo.SplitBar} this
3724          */
3725         "beforeresize" : true,
3726
3727         "beforeapply" : true
3728     });
3729
3730     Roo.util.Observable.call(this);
3731 };
3732
3733 Roo.extend(Roo.SplitBar, Roo.util.Observable, {
3734     onStartProxyDrag : function(x, y){
3735         this.fireEvent("beforeresize", this);
3736         if(!this.overlay){
3737             var o = Roo.DomHelper.insertFirst(document.body,  {cls: "x-drag-overlay", html: "&#160;"}, true);
3738             o.unselectable();
3739             o.enableDisplayMode("block");
3740             // all splitbars share the same overlay
3741             Roo.SplitBar.prototype.overlay = o;
3742         }
3743         this.overlay.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
3744         this.overlay.show();
3745         Roo.get(this.proxy).setDisplayed("block");
3746         var size = this.adapter.getElementSize(this);
3747         this.activeMinSize = this.getMinimumSize();;
3748         this.activeMaxSize = this.getMaximumSize();;
3749         var c1 = size - this.activeMinSize;
3750         var c2 = Math.max(this.activeMaxSize - size, 0);
3751         if(this.orientation == Roo.SplitBar.HORIZONTAL){
3752             this.dd.resetConstraints();
3753             this.dd.setXConstraint(
3754                 this.placement == Roo.SplitBar.LEFT ? c1 : c2, 
3755                 this.placement == Roo.SplitBar.LEFT ? c2 : c1
3756             );
3757             this.dd.setYConstraint(0, 0);
3758         }else{
3759             this.dd.resetConstraints();
3760             this.dd.setXConstraint(0, 0);
3761             this.dd.setYConstraint(
3762                 this.placement == Roo.SplitBar.TOP ? c1 : c2, 
3763                 this.placement == Roo.SplitBar.TOP ? c2 : c1
3764             );
3765          }
3766         this.dragSpecs.startSize = size;
3767         this.dragSpecs.startPoint = [x, y];
3768         Roo.dd.DDProxy.prototype.b4StartDrag.call(this.dd, x, y);
3769     },
3770     
3771     /** 
3772      * @private Called after the drag operation by the DDProxy
3773      */
3774     onEndProxyDrag : function(e){
3775         Roo.get(this.proxy).setDisplayed(false);
3776         var endPoint = Roo.lib.Event.getXY(e);
3777         if(this.overlay){
3778             this.overlay.hide();
3779         }
3780         var newSize;
3781         if(this.orientation == Roo.SplitBar.HORIZONTAL){
3782             newSize = this.dragSpecs.startSize + 
3783                 (this.placement == Roo.SplitBar.LEFT ?
3784                     endPoint[0] - this.dragSpecs.startPoint[0] :
3785                     this.dragSpecs.startPoint[0] - endPoint[0]
3786                 );
3787         }else{
3788             newSize = this.dragSpecs.startSize + 
3789                 (this.placement == Roo.SplitBar.TOP ?
3790                     endPoint[1] - this.dragSpecs.startPoint[1] :
3791                     this.dragSpecs.startPoint[1] - endPoint[1]
3792                 );
3793         }
3794         newSize = Math.min(Math.max(newSize, this.activeMinSize), this.activeMaxSize);
3795         if(newSize != this.dragSpecs.startSize){
3796             if(this.fireEvent('beforeapply', this, newSize) !== false){
3797                 this.adapter.setElementSize(this, newSize);
3798                 this.fireEvent("moved", this, newSize);
3799                 this.fireEvent("resize", this, newSize);
3800             }
3801         }
3802     },
3803     
3804     /**
3805      * Get the adapter this SplitBar uses
3806      * @return The adapter object
3807      */
3808     getAdapter : function(){
3809         return this.adapter;
3810     },
3811     
3812     /**
3813      * Set the adapter this SplitBar uses
3814      * @param {Object} adapter A SplitBar adapter object
3815      */
3816     setAdapter : function(adapter){
3817         this.adapter = adapter;
3818         this.adapter.init(this);
3819     },
3820     
3821     /**
3822      * Gets the minimum size for the resizing element
3823      * @return {Number} The minimum size
3824      */
3825     getMinimumSize : function(){
3826         return this.minSize;
3827     },
3828     
3829     /**
3830      * Sets the minimum size for the resizing element
3831      * @param {Number} minSize The minimum size
3832      */
3833     setMinimumSize : function(minSize){
3834         this.minSize = minSize;
3835     },
3836     
3837     /**
3838      * Gets the maximum size for the resizing element
3839      * @return {Number} The maximum size
3840      */
3841     getMaximumSize : function(){
3842         return this.maxSize;
3843     },
3844     
3845     /**
3846      * Sets the maximum size for the resizing element
3847      * @param {Number} maxSize The maximum size
3848      */
3849     setMaximumSize : function(maxSize){
3850         this.maxSize = maxSize;
3851     },
3852     
3853     /**
3854      * Sets the initialize size for the resizing element
3855      * @param {Number} size The initial size
3856      */
3857     setCurrentSize : function(size){
3858         var oldAnimate = this.animate;
3859         this.animate = false;
3860         this.adapter.setElementSize(this, size);
3861         this.animate = oldAnimate;
3862     },
3863     
3864     /**
3865      * Destroy this splitbar. 
3866      * @param {Boolean} removeEl True to remove the element
3867      */
3868     destroy : function(removeEl){
3869         if(this.shim){
3870             this.shim.remove();
3871         }
3872         this.dd.unreg();
3873         this.proxy.parentNode.removeChild(this.proxy);
3874         if(removeEl){
3875             this.el.remove();
3876         }
3877     }
3878 });
3879
3880 /**
3881  * @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.
3882  */
3883 Roo.SplitBar.createProxy = function(dir){
3884     var proxy = new Roo.Element(document.createElement("div"));
3885     proxy.unselectable();
3886     var cls = 'x-splitbar-proxy';
3887     proxy.addClass(cls + ' ' + (dir == Roo.SplitBar.HORIZONTAL ? cls +'-h' : cls + '-v'));
3888     document.body.appendChild(proxy.dom);
3889     return proxy.dom;
3890 };
3891
3892 /** 
3893  * @class Roo.SplitBar.BasicLayoutAdapter
3894  * Default Adapter. It assumes the splitter and resizing element are not positioned
3895  * elements and only gets/sets the width of the element. Generally used for table based layouts.
3896  */
3897 Roo.SplitBar.BasicLayoutAdapter = function(){
3898 };
3899
3900 Roo.SplitBar.BasicLayoutAdapter.prototype = {
3901     // do nothing for now
3902     init : function(s){
3903     
3904     },
3905     /**
3906      * Called before drag operations to get the current size of the resizing element. 
3907      * @param {Roo.SplitBar} s The SplitBar using this adapter
3908      */
3909      getElementSize : function(s){
3910         if(s.orientation == Roo.SplitBar.HORIZONTAL){
3911             return s.resizingEl.getWidth();
3912         }else{
3913             return s.resizingEl.getHeight();
3914         }
3915     },
3916     
3917     /**
3918      * Called after drag operations to set the size of the resizing element.
3919      * @param {Roo.SplitBar} s The SplitBar using this adapter
3920      * @param {Number} newSize The new size to set
3921      * @param {Function} onComplete A function to be invoked when resizing is complete
3922      */
3923     setElementSize : function(s, newSize, onComplete){
3924         if(s.orientation == Roo.SplitBar.HORIZONTAL){
3925             if(!s.animate){
3926                 s.resizingEl.setWidth(newSize);
3927                 if(onComplete){
3928                     onComplete(s, newSize);
3929                 }
3930             }else{
3931                 s.resizingEl.setWidth(newSize, true, .1, onComplete, 'easeOut');
3932             }
3933         }else{
3934             
3935             if(!s.animate){
3936                 s.resizingEl.setHeight(newSize);
3937                 if(onComplete){
3938                     onComplete(s, newSize);
3939                 }
3940             }else{
3941                 s.resizingEl.setHeight(newSize, true, .1, onComplete, 'easeOut');
3942             }
3943         }
3944     }
3945 };
3946
3947 /** 
3948  *@class Roo.SplitBar.AbsoluteLayoutAdapter
3949  * @extends Roo.SplitBar.BasicLayoutAdapter
3950  * Adapter that  moves the splitter element to align with the resized sizing element. 
3951  * Used with an absolute positioned SplitBar.
3952  * @param {String/HTMLElement/Roo.Element} container The container that wraps around the absolute positioned content. If it's
3953  * document.body, make sure you assign an id to the body element.
3954  */
3955 Roo.SplitBar.AbsoluteLayoutAdapter = function(container){
3956     this.basic = new Roo.SplitBar.BasicLayoutAdapter();
3957     this.container = Roo.get(container);
3958 };
3959
3960 Roo.SplitBar.AbsoluteLayoutAdapter.prototype = {
3961     init : function(s){
3962         this.basic.init(s);
3963     },
3964     
3965     getElementSize : function(s){
3966         return this.basic.getElementSize(s);
3967     },
3968     
3969     setElementSize : function(s, newSize, onComplete){
3970         this.basic.setElementSize(s, newSize, this.moveSplitter.createDelegate(this, [s]));
3971     },
3972     
3973     moveSplitter : function(s){
3974         var yes = Roo.SplitBar;
3975         switch(s.placement){
3976             case yes.LEFT:
3977                 s.el.setX(s.resizingEl.getRight());
3978                 break;
3979             case yes.RIGHT:
3980                 s.el.setStyle("right", (this.container.getWidth() - s.resizingEl.getLeft()) + "px");
3981                 break;
3982             case yes.TOP:
3983                 s.el.setY(s.resizingEl.getBottom());
3984                 break;
3985             case yes.BOTTOM:
3986                 s.el.setY(s.resizingEl.getTop() - s.el.getHeight());
3987                 break;
3988         }
3989     }
3990 };
3991
3992 /**
3993  * Orientation constant - Create a vertical SplitBar
3994  * @static
3995  * @type Number
3996  */
3997 Roo.SplitBar.VERTICAL = 1;
3998
3999 /**
4000  * Orientation constant - Create a horizontal SplitBar
4001  * @static
4002  * @type Number
4003  */
4004 Roo.SplitBar.HORIZONTAL = 2;
4005
4006 /**
4007  * Placement constant - The resizing element is to the left of the splitter element
4008  * @static
4009  * @type Number
4010  */
4011 Roo.SplitBar.LEFT = 1;
4012
4013 /**
4014  * Placement constant - The resizing element is to the right of the splitter element
4015  * @static
4016  * @type Number
4017  */
4018 Roo.SplitBar.RIGHT = 2;
4019
4020 /**
4021  * Placement constant - The resizing element is positioned above the splitter element
4022  * @static
4023  * @type Number
4024  */
4025 Roo.SplitBar.TOP = 3;
4026
4027 /**
4028  * Placement constant - The resizing element is positioned under splitter element
4029  * @static
4030  * @type Number
4031  */
4032 Roo.SplitBar.BOTTOM = 4;
4033 /*
4034  * Based on:
4035  * Ext JS Library 1.1.1
4036  * Copyright(c) 2006-2007, Ext JS, LLC.
4037  *
4038  * Originally Released Under LGPL - original licence link has changed is not relivant.
4039  *
4040  * Fork - LGPL
4041  * <script type="text/javascript">
4042  */
4043
4044 /**
4045  * @class Roo.View
4046  * @extends Roo.util.Observable
4047  * Create a "View" for an element based on a data model or UpdateManager and the supplied DomHelper template. 
4048  * This class also supports single and multi selection modes. <br>
4049  * Create a data model bound view:
4050  <pre><code>
4051  var store = new Roo.data.Store(...);
4052
4053  var view = new Roo.View({
4054     el : "my-element",
4055     tpl : '&lt;div id="{0}"&gt;{2} - {1}&lt;/div&gt;', // auto create template
4056  
4057     singleSelect: true,
4058     selectedClass: "ydataview-selected",
4059     store: store
4060  });
4061
4062  // listen for node click?
4063  view.on("click", function(vw, index, node, e){
4064  alert('Node "' + node.id + '" at index: ' + index + " was clicked.");
4065  });
4066
4067  // load XML data
4068  dataModel.load("foobar.xml");
4069  </code></pre>
4070  For an example of creating a JSON/UpdateManager view, see {@link Roo.JsonView}.
4071  * <br><br>
4072  * <b>Note: The root of your template must be a single node. Table/row implementations may work but are not supported due to
4073  * IE"s limited insertion support with tables and Opera"s faulty event bubbling.</b>
4074  * 
4075  * Note: old style constructor is still suported (container, template, config)
4076  * 
4077  * @constructor
4078  * Create a new View
4079  * @param {Object} config The config object
4080  * 
4081  */
4082 Roo.View = function(config, depreciated_tpl, depreciated_config){
4083     
4084     this.parent = false;
4085     
4086     if (typeof(depreciated_tpl) == 'undefined') {
4087         // new way.. - universal constructor.
4088         Roo.apply(this, config);
4089         this.el  = Roo.get(this.el);
4090     } else {
4091         // old format..
4092         this.el  = Roo.get(config);
4093         this.tpl = depreciated_tpl;
4094         Roo.apply(this, depreciated_config);
4095     }
4096     this.wrapEl  = this.el.wrap().wrap();
4097     ///this.el = this.wrapEla.appendChild(document.createElement("div"));
4098     
4099     
4100     if(typeof(this.tpl) == "string"){
4101         this.tpl = new Roo.Template(this.tpl);
4102     } else {
4103         // support xtype ctors..
4104         this.tpl = new Roo.factory(this.tpl, Roo);
4105     }
4106     
4107     
4108     this.tpl.compile();
4109     
4110     /** @private */
4111     this.addEvents({
4112         /**
4113          * @event beforeclick
4114          * Fires before a click is processed. Returns false to cancel the default action.
4115          * @param {Roo.View} this
4116          * @param {Number} index The index of the target node
4117          * @param {HTMLElement} node The target node
4118          * @param {Roo.EventObject} e The raw event object
4119          */
4120             "beforeclick" : true,
4121         /**
4122          * @event click
4123          * Fires when a template node is clicked.
4124          * @param {Roo.View} this
4125          * @param {Number} index The index of the target node
4126          * @param {HTMLElement} node The target node
4127          * @param {Roo.EventObject} e The raw event object
4128          */
4129             "click" : true,
4130         /**
4131          * @event dblclick
4132          * Fires when a template node is double clicked.
4133          * @param {Roo.View} this
4134          * @param {Number} index The index of the target node
4135          * @param {HTMLElement} node The target node
4136          * @param {Roo.EventObject} e The raw event object
4137          */
4138             "dblclick" : true,
4139         /**
4140          * @event contextmenu
4141          * Fires when a template node is right clicked.
4142          * @param {Roo.View} this
4143          * @param {Number} index The index of the target node
4144          * @param {HTMLElement} node The target node
4145          * @param {Roo.EventObject} e The raw event object
4146          */
4147             "contextmenu" : true,
4148         /**
4149          * @event selectionchange
4150          * Fires when the selected nodes change.
4151          * @param {Roo.View} this
4152          * @param {Array} selections Array of the selected nodes
4153          */
4154             "selectionchange" : true,
4155     
4156         /**
4157          * @event beforeselect
4158          * Fires before a selection is made. If any handlers return false, the selection is cancelled.
4159          * @param {Roo.View} this
4160          * @param {HTMLElement} node The node to be selected
4161          * @param {Array} selections Array of currently selected nodes
4162          */
4163             "beforeselect" : true,
4164         /**
4165          * @event preparedata
4166          * Fires on every row to render, to allow you to change the data.
4167          * @param {Roo.View} this
4168          * @param {Object} data to be rendered (change this)
4169          */
4170           "preparedata" : true
4171           
4172           
4173         });
4174
4175
4176
4177     this.el.on({
4178         "click": this.onClick,
4179         "dblclick": this.onDblClick,
4180         "contextmenu": this.onContextMenu,
4181         scope:this
4182     });
4183
4184     this.selections = [];
4185     this.nodes = [];
4186     this.cmp = new Roo.CompositeElementLite([]);
4187     if(this.store){
4188         this.store = Roo.factory(this.store, Roo.data);
4189         this.setStore(this.store, true);
4190     }
4191     
4192     if ( this.footer && this.footer.xtype) {
4193            
4194          var fctr = this.wrapEl.appendChild(document.createElement("div"));
4195         
4196         this.footer.dataSource = this.store;
4197         this.footer.container = fctr;
4198         this.footer = Roo.factory(this.footer, Roo);
4199         fctr.insertFirst(this.el);
4200         
4201         // this is a bit insane - as the paging toolbar seems to detach the el..
4202 //        dom.parentNode.parentNode.parentNode
4203          // they get detached?
4204     }
4205     
4206     
4207     Roo.View.superclass.constructor.call(this);
4208     
4209     
4210 };
4211
4212 Roo.extend(Roo.View, Roo.util.Observable, {
4213     
4214      /**
4215      * @cfg {Roo.data.Store} store Data store to load data from.
4216      */
4217     store : false,
4218     
4219     /**
4220      * @cfg {String|Roo.Element} el The container element.
4221      */
4222     el : '',
4223     
4224     /**
4225      * @cfg {String|Roo.Template} tpl The template used by this View 
4226      */
4227     tpl : false,
4228     /**
4229      * @cfg {String} dataName the named area of the template to use as the data area
4230      *                          Works with domtemplates roo-name="name"
4231      */
4232     dataName: false,
4233     /**
4234      * @cfg {String} selectedClass The css class to add to selected nodes
4235      */
4236     selectedClass : "x-view-selected",
4237      /**
4238      * @cfg {String} emptyText The empty text to show when nothing is loaded.
4239      */
4240     emptyText : "",
4241     
4242     /**
4243      * @cfg {String} text to display on mask (default Loading)
4244      */
4245     mask : false,
4246     /**
4247      * @cfg {Boolean} multiSelect Allow multiple selection
4248      */
4249     multiSelect : false,
4250     /**
4251      * @cfg {Boolean} singleSelect Allow single selection
4252      */
4253     singleSelect:  false,
4254     
4255     /**
4256      * @cfg {Boolean} toggleSelect - selecting 
4257      */
4258     toggleSelect : false,
4259     
4260     /**
4261      * @cfg {Boolean} tickable - selecting 
4262      */
4263     tickable : false,
4264     
4265     /**
4266      * Returns the element this view is bound to.
4267      * @return {Roo.Element}
4268      */
4269     getEl : function(){
4270         return this.wrapEl;
4271     },
4272     
4273     
4274
4275     /**
4276      * Refreshes the view. - called by datachanged on the store. - do not call directly.
4277      */
4278     refresh : function(){
4279         //Roo.log('refresh');
4280         var t = this.tpl;
4281         
4282         // if we are using something like 'domtemplate', then
4283         // the what gets used is:
4284         // t.applySubtemplate(NAME, data, wrapping data..)
4285         // the outer template then get' applied with
4286         //     the store 'extra data'
4287         // and the body get's added to the
4288         //      roo-name="data" node?
4289         //      <span class='roo-tpl-{name}'></span> ?????
4290         
4291         
4292         
4293         this.clearSelections();
4294         this.el.update("");
4295         var html = [];
4296         var records = this.store.getRange();
4297         if(records.length < 1) {
4298             
4299             // is this valid??  = should it render a template??
4300             
4301             this.el.update(this.emptyText);
4302             return;
4303         }
4304         var el = this.el;
4305         if (this.dataName) {
4306             this.el.update(t.apply(this.store.meta)); //????
4307             el = this.el.child('.roo-tpl-' + this.dataName);
4308         }
4309         
4310         for(var i = 0, len = records.length; i < len; i++){
4311             var data = this.prepareData(records[i].data, i, records[i]);
4312             this.fireEvent("preparedata", this, data, i, records[i]);
4313             
4314             var d = Roo.apply({}, data);
4315             
4316             if(this.tickable){
4317                 Roo.apply(d, {'roo-id' : Roo.id()});
4318                 
4319                 var _this = this;
4320             
4321                 Roo.each(this.parent.item, function(item){
4322                     if(item[_this.parent.valueField] != data[_this.parent.valueField]){
4323                         return;
4324                     }
4325                     Roo.apply(d, {'roo-data-checked' : 'checked'});
4326                 });
4327             }
4328             
4329             html[html.length] = Roo.util.Format.trim(
4330                 this.dataName ?
4331                     t.applySubtemplate(this.dataName, d, this.store.meta) :
4332                     t.apply(d)
4333             );
4334         }
4335         
4336         
4337         
4338         el.update(html.join(""));
4339         this.nodes = el.dom.childNodes;
4340         this.updateIndexes(0);
4341     },
4342     
4343
4344     /**
4345      * Function to override to reformat the data that is sent to
4346      * the template for each node.
4347      * DEPRICATED - use the preparedata event handler.
4348      * @param {Array/Object} data The raw data (array of colData for a data model bound view or
4349      * a JSON object for an UpdateManager bound view).
4350      */
4351     prepareData : function(data, index, record)
4352     {
4353         this.fireEvent("preparedata", this, data, index, record);
4354         return data;
4355     },
4356
4357     onUpdate : function(ds, record){
4358         // Roo.log('on update');   
4359         this.clearSelections();
4360         var index = this.store.indexOf(record);
4361         var n = this.nodes[index];
4362         this.tpl.insertBefore(n, this.prepareData(record.data, index, record));
4363         n.parentNode.removeChild(n);
4364         this.updateIndexes(index, index);
4365     },
4366
4367     
4368     
4369 // --------- FIXME     
4370     onAdd : function(ds, records, index)
4371     {
4372         //Roo.log(['on Add', ds, records, index] );        
4373         this.clearSelections();
4374         if(this.nodes.length == 0){
4375             this.refresh();
4376             return;
4377         }
4378         var n = this.nodes[index];
4379         for(var i = 0, len = records.length; i < len; i++){
4380             var d = this.prepareData(records[i].data, i, records[i]);
4381             if(n){
4382                 this.tpl.insertBefore(n, d);
4383             }else{
4384                 
4385                 this.tpl.append(this.el, d);
4386             }
4387         }
4388         this.updateIndexes(index);
4389     },
4390
4391     onRemove : function(ds, record, index){
4392        // Roo.log('onRemove');
4393         this.clearSelections();
4394         var el = this.dataName  ?
4395             this.el.child('.roo-tpl-' + this.dataName) :
4396             this.el; 
4397         
4398         el.dom.removeChild(this.nodes[index]);
4399         this.updateIndexes(index);
4400     },
4401
4402     /**
4403      * Refresh an individual node.
4404      * @param {Number} index
4405      */
4406     refreshNode : function(index){
4407         this.onUpdate(this.store, this.store.getAt(index));
4408     },
4409
4410     updateIndexes : function(startIndex, endIndex){
4411         var ns = this.nodes;
4412         startIndex = startIndex || 0;
4413         endIndex = endIndex || ns.length - 1;
4414         for(var i = startIndex; i <= endIndex; i++){
4415             ns[i].nodeIndex = i;
4416         }
4417     },
4418
4419     /**
4420      * Changes the data store this view uses and refresh the view.
4421      * @param {Store} store
4422      */
4423     setStore : function(store, initial){
4424         if(!initial && this.store){
4425             this.store.un("datachanged", this.refresh);
4426             this.store.un("add", this.onAdd);
4427             this.store.un("remove", this.onRemove);
4428             this.store.un("update", this.onUpdate);
4429             this.store.un("clear", this.refresh);
4430             this.store.un("beforeload", this.onBeforeLoad);
4431             this.store.un("load", this.onLoad);
4432             this.store.un("loadexception", this.onLoad);
4433         }
4434         if(store){
4435           
4436             store.on("datachanged", this.refresh, this);
4437             store.on("add", this.onAdd, this);
4438             store.on("remove", this.onRemove, this);
4439             store.on("update", this.onUpdate, this);
4440             store.on("clear", this.refresh, this);
4441             store.on("beforeload", this.onBeforeLoad, this);
4442             store.on("load", this.onLoad, this);
4443             store.on("loadexception", this.onLoad, this);
4444         }
4445         
4446         if(store){
4447             this.refresh();
4448         }
4449     },
4450     /**
4451      * onbeforeLoad - masks the loading area.
4452      *
4453      */
4454     onBeforeLoad : function(store,opts)
4455     {
4456          //Roo.log('onBeforeLoad');   
4457         if (!opts.add) {
4458             this.el.update("");
4459         }
4460         this.el.mask(this.mask ? this.mask : "Loading" ); 
4461     },
4462     onLoad : function ()
4463     {
4464         this.el.unmask();
4465     },
4466     
4467
4468     /**
4469      * Returns the template node the passed child belongs to or null if it doesn't belong to one.
4470      * @param {HTMLElement} node
4471      * @return {HTMLElement} The template node
4472      */
4473     findItemFromChild : function(node){
4474         var el = this.dataName  ?
4475             this.el.child('.roo-tpl-' + this.dataName,true) :
4476             this.el.dom; 
4477         
4478         if(!node || node.parentNode == el){
4479                     return node;
4480             }
4481             var p = node.parentNode;
4482             while(p && p != el){
4483             if(p.parentNode == el){
4484                 return p;
4485             }
4486             p = p.parentNode;
4487         }
4488             return null;
4489     },
4490
4491     /** @ignore */
4492     onClick : function(e){
4493         var item = this.findItemFromChild(e.getTarget());
4494         if(item){
4495             var index = this.indexOf(item);
4496             if(this.onItemClick(item, index, e) !== false){
4497                 this.fireEvent("click", this, index, item, e);
4498             }
4499         }else{
4500             this.clearSelections();
4501         }
4502     },
4503
4504     /** @ignore */
4505     onContextMenu : function(e){
4506         var item = this.findItemFromChild(e.getTarget());
4507         if(item){
4508             this.fireEvent("contextmenu", this, this.indexOf(item), item, e);
4509         }
4510     },
4511
4512     /** @ignore */
4513     onDblClick : function(e){
4514         var item = this.findItemFromChild(e.getTarget());
4515         if(item){
4516             this.fireEvent("dblclick", this, this.indexOf(item), item, e);
4517         }
4518     },
4519
4520     onItemClick : function(item, index, e)
4521     {
4522         if(this.fireEvent("beforeclick", this, index, item, e) === false){
4523             return false;
4524         }
4525         if (this.toggleSelect) {
4526             var m = this.isSelected(item) ? 'unselect' : 'select';
4527             //Roo.log(m);
4528             var _t = this;
4529             _t[m](item, true, false);
4530             return true;
4531         }
4532         if(this.multiSelect || this.singleSelect){
4533             if(this.multiSelect && e.shiftKey && this.lastSelection){
4534                 this.select(this.getNodes(this.indexOf(this.lastSelection), index), false);
4535             }else{
4536                 this.select(item, this.multiSelect && e.ctrlKey);
4537                 this.lastSelection = item;
4538             }
4539             
4540             if(!this.tickable){
4541                 e.preventDefault();
4542             }
4543             
4544         }
4545         return true;
4546     },
4547
4548     /**
4549      * Get the number of selected nodes.
4550      * @return {Number}
4551      */
4552     getSelectionCount : function(){
4553         return this.selections.length;
4554     },
4555
4556     /**
4557      * Get the currently selected nodes.
4558      * @return {Array} An array of HTMLElements
4559      */
4560     getSelectedNodes : function(){
4561         return this.selections;
4562     },
4563
4564     /**
4565      * Get the indexes of the selected nodes.
4566      * @return {Array}
4567      */
4568     getSelectedIndexes : function(){
4569         var indexes = [], s = this.selections;
4570         for(var i = 0, len = s.length; i < len; i++){
4571             indexes.push(s[i].nodeIndex);
4572         }
4573         return indexes;
4574     },
4575
4576     /**
4577      * Clear all selections
4578      * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange event
4579      */
4580     clearSelections : function(suppressEvent){
4581         if(this.nodes && (this.multiSelect || this.singleSelect) && this.selections.length > 0){
4582             this.cmp.elements = this.selections;
4583             this.cmp.removeClass(this.selectedClass);
4584             this.selections = [];
4585             if(!suppressEvent){
4586                 this.fireEvent("selectionchange", this, this.selections);
4587             }
4588         }
4589     },
4590
4591     /**
4592      * Returns true if the passed node is selected
4593      * @param {HTMLElement/Number} node The node or node index
4594      * @return {Boolean}
4595      */
4596     isSelected : function(node){
4597         var s = this.selections;
4598         if(s.length < 1){
4599             return false;
4600         }
4601         node = this.getNode(node);
4602         return s.indexOf(node) !== -1;
4603     },
4604
4605     /**
4606      * Selects nodes.
4607      * @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
4608      * @param {Boolean} keepExisting (optional) true to keep existing selections
4609      * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange vent
4610      */
4611     select : function(nodeInfo, keepExisting, suppressEvent){
4612         if(nodeInfo instanceof Array){
4613             if(!keepExisting){
4614                 this.clearSelections(true);
4615             }
4616             for(var i = 0, len = nodeInfo.length; i < len; i++){
4617                 this.select(nodeInfo[i], true, true);
4618             }
4619             return;
4620         } 
4621         var node = this.getNode(nodeInfo);
4622         if(!node || this.isSelected(node)){
4623             return; // already selected.
4624         }
4625         if(!keepExisting){
4626             this.clearSelections(true);
4627         }
4628         
4629         if(this.fireEvent("beforeselect", this, node, this.selections) !== false){
4630             Roo.fly(node).addClass(this.selectedClass);
4631             this.selections.push(node);
4632             if(!suppressEvent){
4633                 this.fireEvent("selectionchange", this, this.selections);
4634             }
4635         }
4636         
4637         
4638     },
4639       /**
4640      * Unselects nodes.
4641      * @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
4642      * @param {Boolean} keepExisting (optional) true IGNORED (for campatibility with select)
4643      * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange vent
4644      */
4645     unselect : function(nodeInfo, keepExisting, suppressEvent)
4646     {
4647         if(nodeInfo instanceof Array){
4648             Roo.each(this.selections, function(s) {
4649                 this.unselect(s, nodeInfo);
4650             }, this);
4651             return;
4652         }
4653         var node = this.getNode(nodeInfo);
4654         if(!node || !this.isSelected(node)){
4655             //Roo.log("not selected");
4656             return; // not selected.
4657         }
4658         // fireevent???
4659         var ns = [];
4660         Roo.each(this.selections, function(s) {
4661             if (s == node ) {
4662                 Roo.fly(node).removeClass(this.selectedClass);
4663
4664                 return;
4665             }
4666             ns.push(s);
4667         },this);
4668         
4669         this.selections= ns;
4670         this.fireEvent("selectionchange", this, this.selections);
4671     },
4672
4673     /**
4674      * Gets a template node.
4675      * @param {HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node or the id of a template node
4676      * @return {HTMLElement} The node or null if it wasn't found
4677      */
4678     getNode : function(nodeInfo){
4679         if(typeof nodeInfo == "string"){
4680             return document.getElementById(nodeInfo);
4681         }else if(typeof nodeInfo == "number"){
4682             return this.nodes[nodeInfo];
4683         }
4684         return nodeInfo;
4685     },
4686
4687     /**
4688      * Gets a range template nodes.
4689      * @param {Number} startIndex
4690      * @param {Number} endIndex
4691      * @return {Array} An array of nodes
4692      */
4693     getNodes : function(start, end){
4694         var ns = this.nodes;
4695         start = start || 0;
4696         end = typeof end == "undefined" ? ns.length - 1 : end;
4697         var nodes = [];
4698         if(start <= end){
4699             for(var i = start; i <= end; i++){
4700                 nodes.push(ns[i]);
4701             }
4702         } else{
4703             for(var i = start; i >= end; i--){
4704                 nodes.push(ns[i]);
4705             }
4706         }
4707         return nodes;
4708     },
4709
4710     /**
4711      * Finds the index of the passed node
4712      * @param {HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node or the id of a template node
4713      * @return {Number} The index of the node or -1
4714      */
4715     indexOf : function(node){
4716         node = this.getNode(node);
4717         if(typeof node.nodeIndex == "number"){
4718             return node.nodeIndex;
4719         }
4720         var ns = this.nodes;
4721         for(var i = 0, len = ns.length; i < len; i++){
4722             if(ns[i] == node){
4723                 return i;
4724             }
4725         }
4726         return -1;
4727     }
4728 });
4729 /*
4730  * Based on:
4731  * Ext JS Library 1.1.1
4732  * Copyright(c) 2006-2007, Ext JS, LLC.
4733  *
4734  * Originally Released Under LGPL - original licence link has changed is not relivant.
4735  *
4736  * Fork - LGPL
4737  * <script type="text/javascript">
4738  */
4739
4740 /**
4741  * @class Roo.JsonView
4742  * @extends Roo.View
4743  * Shortcut class to create a JSON + {@link Roo.UpdateManager} template view. Usage:
4744 <pre><code>
4745 var view = new Roo.JsonView({
4746     container: "my-element",
4747     tpl: '&lt;div id="{id}"&gt;{foo} - {bar}&lt;/div&gt;', // auto create template
4748     multiSelect: true, 
4749     jsonRoot: "data" 
4750 });
4751
4752 // listen for node click?
4753 view.on("click", function(vw, index, node, e){
4754     alert('Node "' + node.id + '" at index: ' + index + " was clicked.");
4755 });
4756
4757 // direct load of JSON data
4758 view.load("foobar.php");
4759
4760 // Example from my blog list
4761 var tpl = new Roo.Template(
4762     '&lt;div class="entry"&gt;' +
4763     '&lt;a class="entry-title" href="{link}"&gt;{title}&lt;/a&gt;' +
4764     "&lt;h4&gt;{date} by {author} | {comments} Comments&lt;/h4&gt;{description}" +
4765     "&lt;/div&gt;&lt;hr /&gt;"
4766 );
4767
4768 var moreView = new Roo.JsonView({
4769     container :  "entry-list", 
4770     template : tpl,
4771     jsonRoot: "posts"
4772 });
4773 moreView.on("beforerender", this.sortEntries, this);
4774 moreView.load({
4775     url: "/blog/get-posts.php",
4776     params: "allposts=true",
4777     text: "Loading Blog Entries..."
4778 });
4779 </code></pre>
4780
4781 * Note: old code is supported with arguments : (container, template, config)
4782
4783
4784  * @constructor
4785  * Create a new JsonView
4786  * 
4787  * @param {Object} config The config object
4788  * 
4789  */
4790 Roo.JsonView = function(config, depreciated_tpl, depreciated_config){
4791     
4792     
4793     Roo.JsonView.superclass.constructor.call(this, config, depreciated_tpl, depreciated_config);
4794
4795     var um = this.el.getUpdateManager();
4796     um.setRenderer(this);
4797     um.on("update", this.onLoad, this);
4798     um.on("failure", this.onLoadException, this);
4799
4800     /**
4801      * @event beforerender
4802      * Fires before rendering of the downloaded JSON data.
4803      * @param {Roo.JsonView} this
4804      * @param {Object} data The JSON data loaded
4805      */
4806     /**
4807      * @event load
4808      * Fires when data is loaded.
4809      * @param {Roo.JsonView} this
4810      * @param {Object} data The JSON data loaded
4811      * @param {Object} response The raw Connect response object
4812      */
4813     /**
4814      * @event loadexception
4815      * Fires when loading fails.
4816      * @param {Roo.JsonView} this
4817      * @param {Object} response The raw Connect response object
4818      */
4819     this.addEvents({
4820         'beforerender' : true,
4821         'load' : true,
4822         'loadexception' : true
4823     });
4824 };
4825 Roo.extend(Roo.JsonView, Roo.View, {
4826     /**
4827      * @type {String} The root property in the loaded JSON object that contains the data
4828      */
4829     jsonRoot : "",
4830
4831     /**
4832      * Refreshes the view.
4833      */
4834     refresh : function(){
4835         this.clearSelections();
4836         this.el.update("");
4837         var html = [];
4838         var o = this.jsonData;
4839         if(o && o.length > 0){
4840             for(var i = 0, len = o.length; i < len; i++){
4841                 var data = this.prepareData(o[i], i, o);
4842                 html[html.length] = this.tpl.apply(data);
4843             }
4844         }else{
4845             html.push(this.emptyText);
4846         }
4847         this.el.update(html.join(""));
4848         this.nodes = this.el.dom.childNodes;
4849         this.updateIndexes(0);
4850     },
4851
4852     /**
4853      * 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.
4854      * @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:
4855      <pre><code>
4856      view.load({
4857          url: "your-url.php",
4858          params: {param1: "foo", param2: "bar"}, // or a URL encoded string
4859          callback: yourFunction,
4860          scope: yourObject, //(optional scope)
4861          discardUrl: false,
4862          nocache: false,
4863          text: "Loading...",
4864          timeout: 30,
4865          scripts: false
4866      });
4867      </code></pre>
4868      * The only required property is <i>url</i>. The optional properties <i>nocache</i>, <i>text</i> and <i>scripts</i>
4869      * 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.
4870      * @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}
4871      * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
4872      * @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.
4873      */
4874     load : function(){
4875         var um = this.el.getUpdateManager();
4876         um.update.apply(um, arguments);
4877     },
4878
4879     // note - render is a standard framework call...
4880     // using it for the response is really flaky... - it's called by UpdateManager normally, except when called by the XComponent/addXtype.
4881     render : function(el, response){
4882         
4883         this.clearSelections();
4884         this.el.update("");
4885         var o;
4886         try{
4887             if (response != '') {
4888                 o = Roo.util.JSON.decode(response.responseText);
4889                 if(this.jsonRoot){
4890                     
4891                     o = o[this.jsonRoot];
4892                 }
4893             }
4894         } catch(e){
4895         }
4896         /**
4897          * The current JSON data or null
4898          */
4899         this.jsonData = o;
4900         this.beforeRender();
4901         this.refresh();
4902     },
4903
4904 /**
4905  * Get the number of records in the current JSON dataset
4906  * @return {Number}
4907  */
4908     getCount : function(){
4909         return this.jsonData ? this.jsonData.length : 0;
4910     },
4911
4912 /**
4913  * Returns the JSON object for the specified node(s)
4914  * @param {HTMLElement/Array} node The node or an array of nodes
4915  * @return {Object/Array} If you pass in an array, you get an array back, otherwise
4916  * you get the JSON object for the node
4917  */
4918     getNodeData : function(node){
4919         if(node instanceof Array){
4920             var data = [];
4921             for(var i = 0, len = node.length; i < len; i++){
4922                 data.push(this.getNodeData(node[i]));
4923             }
4924             return data;
4925         }
4926         return this.jsonData[this.indexOf(node)] || null;
4927     },
4928
4929     beforeRender : function(){
4930         this.snapshot = this.jsonData;
4931         if(this.sortInfo){
4932             this.sort.apply(this, this.sortInfo);
4933         }
4934         this.fireEvent("beforerender", this, this.jsonData);
4935     },
4936
4937     onLoad : function(el, o){
4938         this.fireEvent("load", this, this.jsonData, o);
4939     },
4940
4941     onLoadException : function(el, o){
4942         this.fireEvent("loadexception", this, o);
4943     },
4944
4945 /**
4946  * Filter the data by a specific property.
4947  * @param {String} property A property on your JSON objects
4948  * @param {String/RegExp} value Either string that the property values
4949  * should start with, or a RegExp to test against the property
4950  */
4951     filter : function(property, value){
4952         if(this.jsonData){
4953             var data = [];
4954             var ss = this.snapshot;
4955             if(typeof value == "string"){
4956                 var vlen = value.length;
4957                 if(vlen == 0){
4958                     this.clearFilter();
4959                     return;
4960                 }
4961                 value = value.toLowerCase();
4962                 for(var i = 0, len = ss.length; i < len; i++){
4963                     var o = ss[i];
4964                     if(o[property].substr(0, vlen).toLowerCase() == value){
4965                         data.push(o);
4966                     }
4967                 }
4968             } else if(value.exec){ // regex?
4969                 for(var i = 0, len = ss.length; i < len; i++){
4970                     var o = ss[i];
4971                     if(value.test(o[property])){
4972                         data.push(o);
4973                     }
4974                 }
4975             } else{
4976                 return;
4977             }
4978             this.jsonData = data;
4979             this.refresh();
4980         }
4981     },
4982
4983 /**
4984  * Filter by a function. The passed function will be called with each
4985  * object in the current dataset. If the function returns true the value is kept,
4986  * otherwise it is filtered.
4987  * @param {Function} fn
4988  * @param {Object} scope (optional) The scope of the function (defaults to this JsonView)
4989  */
4990     filterBy : function(fn, scope){
4991         if(this.jsonData){
4992             var data = [];
4993             var ss = this.snapshot;
4994             for(var i = 0, len = ss.length; i < len; i++){
4995                 var o = ss[i];
4996                 if(fn.call(scope || this, o)){
4997                     data.push(o);
4998                 }
4999             }
5000             this.jsonData = data;
5001             this.refresh();
5002         }
5003     },
5004
5005 /**
5006  * Clears the current filter.
5007  */
5008     clearFilter : function(){
5009         if(this.snapshot && this.jsonData != this.snapshot){
5010             this.jsonData = this.snapshot;
5011             this.refresh();
5012         }
5013     },
5014
5015
5016 /**
5017  * Sorts the data for this view and refreshes it.
5018  * @param {String} property A property on your JSON objects to sort on
5019  * @param {String} direction (optional) "desc" or "asc" (defaults to "asc")
5020  * @param {Function} sortType (optional) A function to call to convert the data to a sortable value.
5021  */
5022     sort : function(property, dir, sortType){
5023         this.sortInfo = Array.prototype.slice.call(arguments, 0);
5024         if(this.jsonData){
5025             var p = property;
5026             var dsc = dir && dir.toLowerCase() == "desc";
5027             var f = function(o1, o2){
5028                 var v1 = sortType ? sortType(o1[p]) : o1[p];
5029                 var v2 = sortType ? sortType(o2[p]) : o2[p];
5030                 ;
5031                 if(v1 < v2){
5032                     return dsc ? +1 : -1;
5033                 } else if(v1 > v2){
5034                     return dsc ? -1 : +1;
5035                 } else{
5036                     return 0;
5037                 }
5038             };
5039             this.jsonData.sort(f);
5040             this.refresh();
5041             if(this.jsonData != this.snapshot){
5042                 this.snapshot.sort(f);
5043             }
5044         }
5045     }
5046 });/*
5047  * Based on:
5048  * Ext JS Library 1.1.1
5049  * Copyright(c) 2006-2007, Ext JS, LLC.
5050  *
5051  * Originally Released Under LGPL - original licence link has changed is not relivant.
5052  *
5053  * Fork - LGPL
5054  * <script type="text/javascript">
5055  */
5056  
5057
5058 /**
5059  * @class Roo.ColorPalette
5060  * @extends Roo.Component
5061  * Simple color palette class for choosing colors.  The palette can be rendered to any container.<br />
5062  * Here's an example of typical usage:
5063  * <pre><code>
5064 var cp = new Roo.ColorPalette({value:'993300'});  // initial selected color
5065 cp.render('my-div');
5066
5067 cp.on('select', function(palette, selColor){
5068     // do something with selColor
5069 });
5070 </code></pre>
5071  * @constructor
5072  * Create a new ColorPalette
5073  * @param {Object} config The config object
5074  */
5075 Roo.ColorPalette = function(config){
5076     Roo.ColorPalette.superclass.constructor.call(this, config);
5077     this.addEvents({
5078         /**
5079              * @event select
5080              * Fires when a color is selected
5081              * @param {ColorPalette} this
5082              * @param {String} color The 6-digit color hex code (without the # symbol)
5083              */
5084         select: true
5085     });
5086
5087     if(this.handler){
5088         this.on("select", this.handler, this.scope, true);
5089     }
5090 };
5091 Roo.extend(Roo.ColorPalette, Roo.Component, {
5092     /**
5093      * @cfg {String} itemCls
5094      * The CSS class to apply to the containing element (defaults to "x-color-palette")
5095      */
5096     itemCls : "x-color-palette",
5097     /**
5098      * @cfg {String} value
5099      * The initial color to highlight (should be a valid 6-digit color hex code without the # symbol).  Note that
5100      * the hex codes are case-sensitive.
5101      */
5102     value : null,
5103     clickEvent:'click',
5104     // private
5105     ctype: "Roo.ColorPalette",
5106
5107     /**
5108      * @cfg {Boolean} allowReselect If set to true then reselecting a color that is already selected fires the selection event
5109      */
5110     allowReselect : false,
5111
5112     /**
5113      * <p>An array of 6-digit color hex code strings (without the # symbol).  This array can contain any number
5114      * of colors, and each hex code should be unique.  The width of the palette is controlled via CSS by adjusting
5115      * the width property of the 'x-color-palette' class (or assigning a custom class), so you can balance the number
5116      * of colors with the width setting until the box is symmetrical.</p>
5117      * <p>You can override individual colors if needed:</p>
5118      * <pre><code>
5119 var cp = new Roo.ColorPalette();
5120 cp.colors[0] = "FF0000";  // change the first box to red
5121 </code></pre>
5122
5123 Or you can provide a custom array of your own for complete control:
5124 <pre><code>
5125 var cp = new Roo.ColorPalette();
5126 cp.colors = ["000000", "993300", "333300"];
5127 </code></pre>
5128      * @type Array
5129      */
5130     colors : [
5131         "000000", "993300", "333300", "003300", "003366", "000080", "333399", "333333",
5132         "800000", "FF6600", "808000", "008000", "008080", "0000FF", "666699", "808080",
5133         "FF0000", "FF9900", "99CC00", "339966", "33CCCC", "3366FF", "800080", "969696",
5134         "FF00FF", "FFCC00", "FFFF00", "00FF00", "00FFFF", "00CCFF", "993366", "C0C0C0",
5135         "FF99CC", "FFCC99", "FFFF99", "CCFFCC", "CCFFFF", "99CCFF", "CC99FF", "FFFFFF"
5136     ],
5137
5138     // private
5139     onRender : function(container, position){
5140         var t = new Roo.MasterTemplate(
5141             '<tpl><a href="#" class="color-{0}" hidefocus="on"><em><span style="background:#{0}" unselectable="on">&#160;</span></em></a></tpl>'
5142         );
5143         var c = this.colors;
5144         for(var i = 0, len = c.length; i < len; i++){
5145             t.add([c[i]]);
5146         }
5147         var el = document.createElement("div");
5148         el.className = this.itemCls;
5149         t.overwrite(el);
5150         container.dom.insertBefore(el, position);
5151         this.el = Roo.get(el);
5152         this.el.on(this.clickEvent, this.handleClick,  this, {delegate: "a"});
5153         if(this.clickEvent != 'click'){
5154             this.el.on('click', Roo.emptyFn,  this, {delegate: "a", preventDefault:true});
5155         }
5156     },
5157
5158     // private
5159     afterRender : function(){
5160         Roo.ColorPalette.superclass.afterRender.call(this);
5161         if(this.value){
5162             var s = this.value;
5163             this.value = null;
5164             this.select(s);
5165         }
5166     },
5167
5168     // private
5169     handleClick : function(e, t){
5170         e.preventDefault();
5171         if(!this.disabled){
5172             var c = t.className.match(/(?:^|\s)color-(.{6})(?:\s|$)/)[1];
5173             this.select(c.toUpperCase());
5174         }
5175     },
5176
5177     /**
5178      * Selects the specified color in the palette (fires the select event)
5179      * @param {String} color A valid 6-digit color hex code (# will be stripped if included)
5180      */
5181     select : function(color){
5182         color = color.replace("#", "");
5183         if(color != this.value || this.allowReselect){
5184             var el = this.el;
5185             if(this.value){
5186                 el.child("a.color-"+this.value).removeClass("x-color-palette-sel");
5187             }
5188             el.child("a.color-"+color).addClass("x-color-palette-sel");
5189             this.value = color;
5190             this.fireEvent("select", this, color);
5191         }
5192     }
5193 });/*
5194  * Based on:
5195  * Ext JS Library 1.1.1
5196  * Copyright(c) 2006-2007, Ext JS, LLC.
5197  *
5198  * Originally Released Under LGPL - original licence link has changed is not relivant.
5199  *
5200  * Fork - LGPL
5201  * <script type="text/javascript">
5202  */
5203  
5204 /**
5205  * @class Roo.DatePicker
5206  * @extends Roo.Component
5207  * Simple date picker class.
5208  * @constructor
5209  * Create a new DatePicker
5210  * @param {Object} config The config object
5211  */
5212 Roo.DatePicker = function(config){
5213     Roo.DatePicker.superclass.constructor.call(this, config);
5214
5215     this.value = config && config.value ?
5216                  config.value.clearTime() : new Date().clearTime();
5217
5218     this.addEvents({
5219         /**
5220              * @event select
5221              * Fires when a date is selected
5222              * @param {DatePicker} this
5223              * @param {Date} date The selected date
5224              */
5225         'select': true,
5226         /**
5227              * @event monthchange
5228              * Fires when the displayed month changes 
5229              * @param {DatePicker} this
5230              * @param {Date} date The selected month
5231              */
5232         'monthchange': true
5233     });
5234
5235     if(this.handler){
5236         this.on("select", this.handler,  this.scope || this);
5237     }
5238     // build the disabledDatesRE
5239     if(!this.disabledDatesRE && this.disabledDates){
5240         var dd = this.disabledDates;
5241         var re = "(?:";
5242         for(var i = 0; i < dd.length; i++){
5243             re += dd[i];
5244             if(i != dd.length-1) {
5245                 re += "|";
5246             }
5247         }
5248         this.disabledDatesRE = new RegExp(re + ")");
5249     }
5250 };
5251
5252 Roo.extend(Roo.DatePicker, Roo.Component, {
5253     /**
5254      * @cfg {String} todayText
5255      * The text to display on the button that selects the current date (defaults to "Today")
5256      */
5257     todayText : "Today",
5258     /**
5259      * @cfg {String} okText
5260      * The text to display on the ok button
5261      */
5262     okText : "&#160;OK&#160;", // &#160; to give the user extra clicking room
5263     /**
5264      * @cfg {String} cancelText
5265      * The text to display on the cancel button
5266      */
5267     cancelText : "Cancel",
5268     /**
5269      * @cfg {String} todayTip
5270      * The tooltip to display for the button that selects the current date (defaults to "{current date} (Spacebar)")
5271      */
5272     todayTip : "{0} (Spacebar)",
5273     /**
5274      * @cfg {Date} minDate
5275      * Minimum allowable date (JavaScript date object, defaults to null)
5276      */
5277     minDate : null,
5278     /**
5279      * @cfg {Date} maxDate
5280      * Maximum allowable date (JavaScript date object, defaults to null)
5281      */
5282     maxDate : null,
5283     /**
5284      * @cfg {String} minText
5285      * The error text to display if the minDate validation fails (defaults to "This date is before the minimum date")
5286      */
5287     minText : "This date is before the minimum date",
5288     /**
5289      * @cfg {String} maxText
5290      * The error text to display if the maxDate validation fails (defaults to "This date is after the maximum date")
5291      */
5292     maxText : "This date is after the maximum date",
5293     /**
5294      * @cfg {String} format
5295      * The default date format string which can be overriden for localization support.  The format must be
5296      * valid according to {@link Date#parseDate} (defaults to 'm/d/y').
5297      */
5298     format : "m/d/y",
5299     /**
5300      * @cfg {Array} disabledDays
5301      * An array of days to disable, 0-based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
5302      */
5303     disabledDays : null,
5304     /**
5305      * @cfg {String} disabledDaysText
5306      * The tooltip to display when the date falls on a disabled day (defaults to "")
5307      */
5308     disabledDaysText : "",
5309     /**
5310      * @cfg {RegExp} disabledDatesRE
5311      * JavaScript regular expression used to disable a pattern of dates (defaults to null)
5312      */
5313     disabledDatesRE : null,
5314     /**
5315      * @cfg {String} disabledDatesText
5316      * The tooltip text to display when the date falls on a disabled date (defaults to "")
5317      */
5318     disabledDatesText : "",
5319     /**
5320      * @cfg {Boolean} constrainToViewport
5321      * True to constrain the date picker to the viewport (defaults to true)
5322      */
5323     constrainToViewport : true,
5324     /**
5325      * @cfg {Array} monthNames
5326      * An array of textual month names which can be overriden for localization support (defaults to Date.monthNames)
5327      */
5328     monthNames : Date.monthNames,
5329     /**
5330      * @cfg {Array} dayNames
5331      * An array of textual day names which can be overriden for localization support (defaults to Date.dayNames)
5332      */
5333     dayNames : Date.dayNames,
5334     /**
5335      * @cfg {String} nextText
5336      * The next month navigation button tooltip (defaults to 'Next Month (Control+Right)')
5337      */
5338     nextText: 'Next Month (Control+Right)',
5339     /**
5340      * @cfg {String} prevText
5341      * The previous month navigation button tooltip (defaults to 'Previous Month (Control+Left)')
5342      */
5343     prevText: 'Previous Month (Control+Left)',
5344     /**
5345      * @cfg {String} monthYearText
5346      * The header month selector tooltip (defaults to 'Choose a month (Control+Up/Down to move years)')
5347      */
5348     monthYearText: 'Choose a month (Control+Up/Down to move years)',
5349     /**
5350      * @cfg {Number} startDay
5351      * Day index at which the week should begin, 0-based (defaults to 0, which is Sunday)
5352      */
5353     startDay : 0,
5354     /**
5355      * @cfg {Bool} showClear
5356      * Show a clear button (usefull for date form elements that can be blank.)
5357      */
5358     
5359     showClear: false,
5360     
5361     /**
5362      * Sets the value of the date field
5363      * @param {Date} value The date to set
5364      */
5365     setValue : function(value){
5366         var old = this.value;
5367         
5368         if (typeof(value) == 'string') {
5369          
5370             value = Date.parseDate(value, this.format);
5371         }
5372         if (!value) {
5373             value = new Date();
5374         }
5375         
5376         this.value = value.clearTime(true);
5377         if(this.el){
5378             this.update(this.value);
5379         }
5380     },
5381
5382     /**
5383      * Gets the current selected value of the date field
5384      * @return {Date} The selected date
5385      */
5386     getValue : function(){
5387         return this.value;
5388     },
5389
5390     // private
5391     focus : function(){
5392         if(this.el){
5393             this.update(this.activeDate);
5394         }
5395     },
5396
5397     // privateval
5398     onRender : function(container, position){
5399         
5400         var m = [
5401              '<table cellspacing="0">',
5402                 '<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>',
5403                 '<tr><td colspan="3"><table class="x-date-inner" cellspacing="0"><thead><tr>'];
5404         var dn = this.dayNames;
5405         for(var i = 0; i < 7; i++){
5406             var d = this.startDay+i;
5407             if(d > 6){
5408                 d = d-7;
5409             }
5410             m.push("<th><span>", dn[d].substr(0,1), "</span></th>");
5411         }
5412         m[m.length] = "</tr></thead><tbody><tr>";
5413         for(var i = 0; i < 42; i++) {
5414             if(i % 7 == 0 && i != 0){
5415                 m[m.length] = "</tr><tr>";
5416             }
5417             m[m.length] = '<td><a href="#" hidefocus="on" class="x-date-date" tabIndex="1"><em><span></span></em></a></td>';
5418         }
5419         m[m.length] = '</tr></tbody></table></td></tr><tr>'+
5420             '<td colspan="3" class="x-date-bottom" align="center"></td></tr></table><div class="x-date-mp"></div>';
5421
5422         var el = document.createElement("div");
5423         el.className = "x-date-picker";
5424         el.innerHTML = m.join("");
5425
5426         container.dom.insertBefore(el, position);
5427
5428         this.el = Roo.get(el);
5429         this.eventEl = Roo.get(el.firstChild);
5430
5431         new Roo.util.ClickRepeater(this.el.child("td.x-date-left a"), {
5432             handler: this.showPrevMonth,
5433             scope: this,
5434             preventDefault:true,
5435             stopDefault:true
5436         });
5437
5438         new Roo.util.ClickRepeater(this.el.child("td.x-date-right a"), {
5439             handler: this.showNextMonth,
5440             scope: this,
5441             preventDefault:true,
5442             stopDefault:true
5443         });
5444
5445         this.eventEl.on("mousewheel", this.handleMouseWheel,  this);
5446
5447         this.monthPicker = this.el.down('div.x-date-mp');
5448         this.monthPicker.enableDisplayMode('block');
5449         
5450         var kn = new Roo.KeyNav(this.eventEl, {
5451             "left" : function(e){
5452                 e.ctrlKey ?
5453                     this.showPrevMonth() :
5454                     this.update(this.activeDate.add("d", -1));
5455             },
5456
5457             "right" : function(e){
5458                 e.ctrlKey ?
5459                     this.showNextMonth() :
5460                     this.update(this.activeDate.add("d", 1));
5461             },
5462
5463             "up" : function(e){
5464                 e.ctrlKey ?
5465                     this.showNextYear() :
5466                     this.update(this.activeDate.add("d", -7));
5467             },
5468
5469             "down" : function(e){
5470                 e.ctrlKey ?
5471                     this.showPrevYear() :
5472                     this.update(this.activeDate.add("d", 7));
5473             },
5474
5475             "pageUp" : function(e){
5476                 this.showNextMonth();
5477             },
5478
5479             "pageDown" : function(e){
5480                 this.showPrevMonth();
5481             },
5482
5483             "enter" : function(e){
5484                 e.stopPropagation();
5485                 return true;
5486             },
5487
5488             scope : this
5489         });
5490
5491         this.eventEl.on("click", this.handleDateClick,  this, {delegate: "a.x-date-date"});
5492
5493         this.eventEl.addKeyListener(Roo.EventObject.SPACE, this.selectToday,  this);
5494
5495         this.el.unselectable();
5496         
5497         this.cells = this.el.select("table.x-date-inner tbody td");
5498         this.textNodes = this.el.query("table.x-date-inner tbody span");
5499
5500         this.mbtn = new Roo.Button(this.el.child("td.x-date-middle", true), {
5501             text: "&#160;",
5502             tooltip: this.monthYearText
5503         });
5504
5505         this.mbtn.on('click', this.showMonthPicker, this);
5506         this.mbtn.el.child(this.mbtn.menuClassTarget).addClass("x-btn-with-menu");
5507
5508
5509         var today = (new Date()).dateFormat(this.format);
5510         
5511         var baseTb = new Roo.Toolbar(this.el.child("td.x-date-bottom", true));
5512         if (this.showClear) {
5513             baseTb.add( new Roo.Toolbar.Fill());
5514         }
5515         baseTb.add({
5516             text: String.format(this.todayText, today),
5517             tooltip: String.format(this.todayTip, today),
5518             handler: this.selectToday,
5519             scope: this
5520         });
5521         
5522         //var todayBtn = new Roo.Button(this.el.child("td.x-date-bottom", true), {
5523             
5524         //});
5525         if (this.showClear) {
5526             
5527             baseTb.add( new Roo.Toolbar.Fill());
5528             baseTb.add({
5529                 text: '&#160;',
5530                 cls: 'x-btn-icon x-btn-clear',
5531                 handler: function() {
5532                     //this.value = '';
5533                     this.fireEvent("select", this, '');
5534                 },
5535                 scope: this
5536             });
5537         }
5538         
5539         
5540         if(Roo.isIE){
5541             this.el.repaint();
5542         }
5543         this.update(this.value);
5544     },
5545
5546     createMonthPicker : function(){
5547         if(!this.monthPicker.dom.firstChild){
5548             var buf = ['<table border="0" cellspacing="0">'];
5549             for(var i = 0; i < 6; i++){
5550                 buf.push(
5551                     '<tr><td class="x-date-mp-month"><a href="#">', this.monthNames[i].substr(0, 3), '</a></td>',
5552                     '<td class="x-date-mp-month x-date-mp-sep"><a href="#">', this.monthNames[i+6].substr(0, 3), '</a></td>',
5553                     i == 0 ?
5554                     '<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>' :
5555                     '<td class="x-date-mp-year"><a href="#"></a></td><td class="x-date-mp-year"><a href="#"></a></td></tr>'
5556                 );
5557             }
5558             buf.push(
5559                 '<tr class="x-date-mp-btns"><td colspan="4"><button type="button" class="x-date-mp-ok">',
5560                     this.okText,
5561                     '</button><button type="button" class="x-date-mp-cancel">',
5562                     this.cancelText,
5563                     '</button></td></tr>',
5564                 '</table>'
5565             );
5566             this.monthPicker.update(buf.join(''));
5567             this.monthPicker.on('click', this.onMonthClick, this);
5568             this.monthPicker.on('dblclick', this.onMonthDblClick, this);
5569
5570             this.mpMonths = this.monthPicker.select('td.x-date-mp-month');
5571             this.mpYears = this.monthPicker.select('td.x-date-mp-year');
5572
5573             this.mpMonths.each(function(m, a, i){
5574                 i += 1;
5575                 if((i%2) == 0){
5576                     m.dom.xmonth = 5 + Math.round(i * .5);
5577                 }else{
5578                     m.dom.xmonth = Math.round((i-1) * .5);
5579                 }
5580             });
5581         }
5582     },
5583
5584     showMonthPicker : function(){
5585         this.createMonthPicker();
5586         var size = this.el.getSize();
5587         this.monthPicker.setSize(size);
5588         this.monthPicker.child('table').setSize(size);
5589
5590         this.mpSelMonth = (this.activeDate || this.value).getMonth();
5591         this.updateMPMonth(this.mpSelMonth);
5592         this.mpSelYear = (this.activeDate || this.value).getFullYear();
5593         this.updateMPYear(this.mpSelYear);
5594
5595         this.monthPicker.slideIn('t', {duration:.2});
5596     },
5597
5598     updateMPYear : function(y){
5599         this.mpyear = y;
5600         var ys = this.mpYears.elements;
5601         for(var i = 1; i <= 10; i++){
5602             var td = ys[i-1], y2;
5603             if((i%2) == 0){
5604                 y2 = y + Math.round(i * .5);
5605                 td.firstChild.innerHTML = y2;
5606                 td.xyear = y2;
5607             }else{
5608                 y2 = y - (5-Math.round(i * .5));
5609                 td.firstChild.innerHTML = y2;
5610                 td.xyear = y2;
5611             }
5612             this.mpYears.item(i-1)[y2 == this.mpSelYear ? 'addClass' : 'removeClass']('x-date-mp-sel');
5613         }
5614     },
5615
5616     updateMPMonth : function(sm){
5617         this.mpMonths.each(function(m, a, i){
5618             m[m.dom.xmonth == sm ? 'addClass' : 'removeClass']('x-date-mp-sel');
5619         });
5620     },
5621
5622     selectMPMonth: function(m){
5623         
5624     },
5625
5626     onMonthClick : function(e, t){
5627         e.stopEvent();
5628         var el = new Roo.Element(t), pn;
5629         if(el.is('button.x-date-mp-cancel')){
5630             this.hideMonthPicker();
5631         }
5632         else if(el.is('button.x-date-mp-ok')){
5633             this.update(new Date(this.mpSelYear, this.mpSelMonth, (this.activeDate || this.value).getDate()));
5634             this.hideMonthPicker();
5635         }
5636         else if(pn = el.up('td.x-date-mp-month', 2)){
5637             this.mpMonths.removeClass('x-date-mp-sel');
5638             pn.addClass('x-date-mp-sel');
5639             this.mpSelMonth = pn.dom.xmonth;
5640         }
5641         else if(pn = el.up('td.x-date-mp-year', 2)){
5642             this.mpYears.removeClass('x-date-mp-sel');
5643             pn.addClass('x-date-mp-sel');
5644             this.mpSelYear = pn.dom.xyear;
5645         }
5646         else if(el.is('a.x-date-mp-prev')){
5647             this.updateMPYear(this.mpyear-10);
5648         }
5649         else if(el.is('a.x-date-mp-next')){
5650             this.updateMPYear(this.mpyear+10);
5651         }
5652     },
5653
5654     onMonthDblClick : function(e, t){
5655         e.stopEvent();
5656         var el = new Roo.Element(t), pn;
5657         if(pn = el.up('td.x-date-mp-month', 2)){
5658             this.update(new Date(this.mpSelYear, pn.dom.xmonth, (this.activeDate || this.value).getDate()));
5659             this.hideMonthPicker();
5660         }
5661         else if(pn = el.up('td.x-date-mp-year', 2)){
5662             this.update(new Date(pn.dom.xyear, this.mpSelMonth, (this.activeDate || this.value).getDate()));
5663             this.hideMonthPicker();
5664         }
5665     },
5666
5667     hideMonthPicker : function(disableAnim){
5668         if(this.monthPicker){
5669             if(disableAnim === true){
5670                 this.monthPicker.hide();
5671             }else{
5672                 this.monthPicker.slideOut('t', {duration:.2});
5673             }
5674         }
5675     },
5676
5677     // private
5678     showPrevMonth : function(e){
5679         this.update(this.activeDate.add("mo", -1));
5680     },
5681
5682     // private
5683     showNextMonth : function(e){
5684         this.update(this.activeDate.add("mo", 1));
5685     },
5686
5687     // private
5688     showPrevYear : function(){
5689         this.update(this.activeDate.add("y", -1));
5690     },
5691
5692     // private
5693     showNextYear : function(){
5694         this.update(this.activeDate.add("y", 1));
5695     },
5696
5697     // private
5698     handleMouseWheel : function(e){
5699         var delta = e.getWheelDelta();
5700         if(delta > 0){
5701             this.showPrevMonth();
5702             e.stopEvent();
5703         } else if(delta < 0){
5704             this.showNextMonth();
5705             e.stopEvent();
5706         }
5707     },
5708
5709     // private
5710     handleDateClick : function(e, t){
5711         e.stopEvent();
5712         if(t.dateValue && !Roo.fly(t.parentNode).hasClass("x-date-disabled")){
5713             this.setValue(new Date(t.dateValue));
5714             this.fireEvent("select", this, this.value);
5715         }
5716     },
5717
5718     // private
5719     selectToday : function(){
5720         this.setValue(new Date().clearTime());
5721         this.fireEvent("select", this, this.value);
5722     },
5723
5724     // private
5725     update : function(date)
5726     {
5727         var vd = this.activeDate;
5728         this.activeDate = date;
5729         if(vd && this.el){
5730             var t = date.getTime();
5731             if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
5732                 this.cells.removeClass("x-date-selected");
5733                 this.cells.each(function(c){
5734                    if(c.dom.firstChild.dateValue == t){
5735                        c.addClass("x-date-selected");
5736                        setTimeout(function(){
5737                             try{c.dom.firstChild.focus();}catch(e){}
5738                        }, 50);
5739                        return false;
5740                    }
5741                 });
5742                 return;
5743             }
5744         }
5745         
5746         var days = date.getDaysInMonth();
5747         var firstOfMonth = date.getFirstDateOfMonth();
5748         var startingPos = firstOfMonth.getDay()-this.startDay;
5749
5750         if(startingPos <= this.startDay){
5751             startingPos += 7;
5752         }
5753
5754         var pm = date.add("mo", -1);
5755         var prevStart = pm.getDaysInMonth()-startingPos;
5756
5757         var cells = this.cells.elements;
5758         var textEls = this.textNodes;
5759         days += startingPos;
5760
5761         // convert everything to numbers so it's fast
5762         var day = 86400000;
5763         var d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime();
5764         var today = new Date().clearTime().getTime();
5765         var sel = date.clearTime().getTime();
5766         var min = this.minDate ? this.minDate.clearTime() : Number.NEGATIVE_INFINITY;
5767         var max = this.maxDate ? this.maxDate.clearTime() : Number.POSITIVE_INFINITY;
5768         var ddMatch = this.disabledDatesRE;
5769         var ddText = this.disabledDatesText;
5770         var ddays = this.disabledDays ? this.disabledDays.join("") : false;
5771         var ddaysText = this.disabledDaysText;
5772         var format = this.format;
5773
5774         var setCellClass = function(cal, cell){
5775             cell.title = "";
5776             var t = d.getTime();
5777             cell.firstChild.dateValue = t;
5778             if(t == today){
5779                 cell.className += " x-date-today";
5780                 cell.title = cal.todayText;
5781             }
5782             if(t == sel){
5783                 cell.className += " x-date-selected";
5784                 setTimeout(function(){
5785                     try{cell.firstChild.focus();}catch(e){}
5786                 }, 50);
5787             }
5788             // disabling
5789             if(t < min) {
5790                 cell.className = " x-date-disabled";
5791                 cell.title = cal.minText;
5792                 return;
5793             }
5794             if(t > max) {
5795                 cell.className = " x-date-disabled";
5796                 cell.title = cal.maxText;
5797                 return;
5798             }
5799             if(ddays){
5800                 if(ddays.indexOf(d.getDay()) != -1){
5801                     cell.title = ddaysText;
5802                     cell.className = " x-date-disabled";
5803                 }
5804             }
5805             if(ddMatch && format){
5806                 var fvalue = d.dateFormat(format);
5807                 if(ddMatch.test(fvalue)){
5808                     cell.title = ddText.replace("%0", fvalue);
5809                     cell.className = " x-date-disabled";
5810                 }
5811             }
5812         };
5813
5814         var i = 0;
5815         for(; i < startingPos; i++) {
5816             textEls[i].innerHTML = (++prevStart);
5817             d.setDate(d.getDate()+1);
5818             cells[i].className = "x-date-prevday";
5819             setCellClass(this, cells[i]);
5820         }
5821         for(; i < days; i++){
5822             intDay = i - startingPos + 1;
5823             textEls[i].innerHTML = (intDay);
5824             d.setDate(d.getDate()+1);
5825             cells[i].className = "x-date-active";
5826             setCellClass(this, cells[i]);
5827         }
5828         var extraDays = 0;
5829         for(; i < 42; i++) {
5830              textEls[i].innerHTML = (++extraDays);
5831              d.setDate(d.getDate()+1);
5832              cells[i].className = "x-date-nextday";
5833              setCellClass(this, cells[i]);
5834         }
5835
5836         this.mbtn.setText(this.monthNames[date.getMonth()] + " " + date.getFullYear());
5837         this.fireEvent('monthchange', this, date);
5838         
5839         if(!this.internalRender){
5840             var main = this.el.dom.firstChild;
5841             var w = main.offsetWidth;
5842             this.el.setWidth(w + this.el.getBorderWidth("lr"));
5843             Roo.fly(main).setWidth(w);
5844             this.internalRender = true;
5845             // opera does not respect the auto grow header center column
5846             // then, after it gets a width opera refuses to recalculate
5847             // without a second pass
5848             if(Roo.isOpera && !this.secondPass){
5849                 main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + "px";
5850                 this.secondPass = true;
5851                 this.update.defer(10, this, [date]);
5852             }
5853         }
5854         
5855         
5856     }
5857 });        /*
5858  * Based on:
5859  * Ext JS Library 1.1.1
5860  * Copyright(c) 2006-2007, Ext JS, LLC.
5861  *
5862  * Originally Released Under LGPL - original licence link has changed is not relivant.
5863  *
5864  * Fork - LGPL
5865  * <script type="text/javascript">
5866  */
5867 /**
5868  * @class Roo.TabPanel
5869  * @extends Roo.util.Observable
5870  * A lightweight tab container.
5871  * <br><br>
5872  * Usage:
5873  * <pre><code>
5874 // basic tabs 1, built from existing content
5875 var tabs = new Roo.TabPanel("tabs1");
5876 tabs.addTab("script", "View Script");
5877 tabs.addTab("markup", "View Markup");
5878 tabs.activate("script");
5879
5880 // more advanced tabs, built from javascript
5881 var jtabs = new Roo.TabPanel("jtabs");
5882 jtabs.addTab("jtabs-1", "Normal Tab", "My content was added during construction.");
5883
5884 // set up the UpdateManager
5885 var tab2 = jtabs.addTab("jtabs-2", "Ajax Tab 1");
5886 var updater = tab2.getUpdateManager();
5887 updater.setDefaultUrl("ajax1.htm");
5888 tab2.on('activate', updater.refresh, updater, true);
5889
5890 // Use setUrl for Ajax loading
5891 var tab3 = jtabs.addTab("jtabs-3", "Ajax Tab 2");
5892 tab3.setUrl("ajax2.htm", null, true);
5893
5894 // Disabled tab
5895 var tab4 = jtabs.addTab("tabs1-5", "Disabled Tab", "Can't see me cause I'm disabled");
5896 tab4.disable();
5897
5898 jtabs.activate("jtabs-1");
5899  * </code></pre>
5900  * @constructor
5901  * Create a new TabPanel.
5902  * @param {String/HTMLElement/Roo.Element} container The id, DOM element or Roo.Element container where this TabPanel is to be rendered.
5903  * @param {Object/Boolean} config Config object to set any properties for this TabPanel, or true to render the tabs on the bottom.
5904  */
5905 Roo.TabPanel = function(container, config){
5906     /**
5907     * The container element for this TabPanel.
5908     * @type Roo.Element
5909     */
5910     this.el = Roo.get(container, true);
5911     if(config){
5912         if(typeof config == "boolean"){
5913             this.tabPosition = config ? "bottom" : "top";
5914         }else{
5915             Roo.apply(this, config);
5916         }
5917     }
5918     if(this.tabPosition == "bottom"){
5919         this.bodyEl = Roo.get(this.createBody(this.el.dom));
5920         this.el.addClass("x-tabs-bottom");
5921     }
5922     this.stripWrap = Roo.get(this.createStrip(this.el.dom), true);
5923     this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true);
5924     this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true);
5925     if(Roo.isIE){
5926         Roo.fly(this.stripWrap.dom.firstChild).setStyle("overflow-x", "hidden");
5927     }
5928     if(this.tabPosition != "bottom"){
5929         /** The body element that contains {@link Roo.TabPanelItem} bodies. +
5930          * @type Roo.Element
5931          */
5932         this.bodyEl = Roo.get(this.createBody(this.el.dom));
5933         this.el.addClass("x-tabs-top");
5934     }
5935     this.items = [];
5936
5937     this.bodyEl.setStyle("position", "relative");
5938
5939     this.active = null;
5940     this.activateDelegate = this.activate.createDelegate(this);
5941
5942     this.addEvents({
5943         /**
5944          * @event tabchange
5945          * Fires when the active tab changes
5946          * @param {Roo.TabPanel} this
5947          * @param {Roo.TabPanelItem} activePanel The new active tab
5948          */
5949         "tabchange": true,
5950         /**
5951          * @event beforetabchange
5952          * Fires before the active tab changes, set cancel to true on the "e" parameter to cancel the change
5953          * @param {Roo.TabPanel} this
5954          * @param {Object} e Set cancel to true on this object to cancel the tab change
5955          * @param {Roo.TabPanelItem} tab The tab being changed to
5956          */
5957         "beforetabchange" : true
5958     });
5959
5960     Roo.EventManager.onWindowResize(this.onResize, this);
5961     this.cpad = this.el.getPadding("lr");
5962     this.hiddenCount = 0;
5963
5964
5965     // toolbar on the tabbar support...
5966     if (this.toolbar) {
5967         var tcfg = this.toolbar;
5968         tcfg.container = this.stripEl.child('td.x-tab-strip-toolbar');  
5969         this.toolbar = new Roo.Toolbar(tcfg);
5970         if (Roo.isSafari) {
5971             var tbl = tcfg.container.child('table', true);
5972             tbl.setAttribute('width', '100%');
5973         }
5974         
5975     }
5976    
5977
5978
5979     Roo.TabPanel.superclass.constructor.call(this);
5980 };
5981
5982 Roo.extend(Roo.TabPanel, Roo.util.Observable, {
5983     /*
5984      *@cfg {String} tabPosition "top" or "bottom" (defaults to "top")
5985      */
5986     tabPosition : "top",
5987     /*
5988      *@cfg {Number} currentTabWidth The width of the current tab (defaults to 0)
5989      */
5990     currentTabWidth : 0,
5991     /*
5992      *@cfg {Number} minTabWidth The minimum width of a tab (defaults to 40) (ignored if {@link #resizeTabs} is not true)
5993      */
5994     minTabWidth : 40,
5995     /*
5996      *@cfg {Number} maxTabWidth The maximum width of a tab (defaults to 250) (ignored if {@link #resizeTabs} is not true)
5997      */
5998     maxTabWidth : 250,
5999     /*
6000      *@cfg {Number} preferredTabWidth The preferred (default) width of a tab (defaults to 175) (ignored if {@link #resizeTabs} is not true)
6001      */
6002     preferredTabWidth : 175,
6003     /*
6004      *@cfg {Boolean} resizeTabs True to enable dynamic tab resizing (defaults to false)
6005      */
6006     resizeTabs : false,
6007     /*
6008      *@cfg {Boolean} monitorResize Set this to true to turn on window resize monitoring (ignored if {@link #resizeTabs} is not true) (defaults to true)
6009      */
6010     monitorResize : true,
6011     /*
6012      *@cfg {Object} toolbar xtype description of toolbar to show at the right of the tab bar. 
6013      */
6014     toolbar : false,
6015
6016     /**
6017      * Creates a new {@link Roo.TabPanelItem} by looking for an existing element with the provided id -- if it's not found it creates one.
6018      * @param {String} id The id of the div to use <b>or create</b>
6019      * @param {String} text The text for the tab
6020      * @param {String} content (optional) Content to put in the TabPanelItem body
6021      * @param {Boolean} closable (optional) True to create a close icon on the tab
6022      * @return {Roo.TabPanelItem} The created TabPanelItem
6023      */
6024     addTab : function(id, text, content, closable){
6025         var item = new Roo.TabPanelItem(this, id, text, closable);
6026         this.addTabItem(item);
6027         if(content){
6028             item.setContent(content);
6029         }
6030         return item;
6031     },
6032
6033     /**
6034      * Returns the {@link Roo.TabPanelItem} with the specified id/index
6035      * @param {String/Number} id The id or index of the TabPanelItem to fetch.
6036      * @return {Roo.TabPanelItem}
6037      */
6038     getTab : function(id){
6039         return this.items[id];
6040     },
6041
6042     /**
6043      * Hides the {@link Roo.TabPanelItem} with the specified id/index
6044      * @param {String/Number} id The id or index of the TabPanelItem to hide.
6045      */
6046     hideTab : function(id){
6047         var t = this.items[id];
6048         if(!t.isHidden()){
6049            t.setHidden(true);
6050            this.hiddenCount++;
6051            this.autoSizeTabs();
6052         }
6053     },
6054
6055     /**
6056      * "Unhides" the {@link Roo.TabPanelItem} with the specified id/index.
6057      * @param {String/Number} id The id or index of the TabPanelItem to unhide.
6058      */
6059     unhideTab : function(id){
6060         var t = this.items[id];
6061         if(t.isHidden()){
6062            t.setHidden(false);
6063            this.hiddenCount--;
6064            this.autoSizeTabs();
6065         }
6066     },
6067
6068     /**
6069      * Adds an existing {@link Roo.TabPanelItem}.
6070      * @param {Roo.TabPanelItem} item The TabPanelItem to add
6071      */
6072     addTabItem : function(item){
6073         this.items[item.id] = item;
6074         this.items.push(item);
6075         if(this.resizeTabs){
6076            item.setWidth(this.currentTabWidth || this.preferredTabWidth);
6077            this.autoSizeTabs();
6078         }else{
6079             item.autoSize();
6080         }
6081     },
6082
6083     /**
6084      * Removes a {@link Roo.TabPanelItem}.
6085      * @param {String/Number} id The id or index of the TabPanelItem to remove.
6086      */
6087     removeTab : function(id){
6088         var items = this.items;
6089         var tab = items[id];
6090         if(!tab) { return; }
6091         var index = items.indexOf(tab);
6092         if(this.active == tab && items.length > 1){
6093             var newTab = this.getNextAvailable(index);
6094             if(newTab) {
6095                 newTab.activate();
6096             }
6097         }
6098         this.stripEl.dom.removeChild(tab.pnode.dom);
6099         if(tab.bodyEl.dom.parentNode == this.bodyEl.dom){ // if it was moved already prevent error
6100             this.bodyEl.dom.removeChild(tab.bodyEl.dom);
6101         }
6102         items.splice(index, 1);
6103         delete this.items[tab.id];
6104         tab.fireEvent("close", tab);
6105         tab.purgeListeners();
6106         this.autoSizeTabs();
6107     },
6108
6109     getNextAvailable : function(start){
6110         var items = this.items;
6111         var index = start;
6112         // look for a next tab that will slide over to
6113         // replace the one being removed
6114         while(index < items.length){
6115             var item = items[++index];
6116             if(item && !item.isHidden()){
6117                 return item;
6118             }
6119         }
6120         // if one isn't found select the previous tab (on the left)
6121         index = start;
6122         while(index >= 0){
6123             var item = items[--index];
6124             if(item && !item.isHidden()){
6125                 return item;
6126             }
6127         }
6128         return null;
6129     },
6130
6131     /**
6132      * Disables a {@link Roo.TabPanelItem}. It cannot be the active tab, if it is this call is ignored.
6133      * @param {String/Number} id The id or index of the TabPanelItem to disable.
6134      */
6135     disableTab : function(id){
6136         var tab = this.items[id];
6137         if(tab && this.active != tab){
6138             tab.disable();
6139         }
6140     },
6141
6142     /**
6143      * Enables a {@link Roo.TabPanelItem} that is disabled.
6144      * @param {String/Number} id The id or index of the TabPanelItem to enable.
6145      */
6146     enableTab : function(id){
6147         var tab = this.items[id];
6148         tab.enable();
6149     },
6150
6151     /**
6152      * Activates a {@link Roo.TabPanelItem}. The currently active one will be deactivated.
6153      * @param {String/Number} id The id or index of the TabPanelItem to activate.
6154      * @return {Roo.TabPanelItem} The TabPanelItem.
6155      */
6156     activate : function(id){
6157         var tab = this.items[id];
6158         if(!tab){
6159             return null;
6160         }
6161         if(tab == this.active || tab.disabled){
6162             return tab;
6163         }
6164         var e = {};
6165         this.fireEvent("beforetabchange", this, e, tab);
6166         if(e.cancel !== true && !tab.disabled){
6167             if(this.active){
6168                 this.active.hide();
6169             }
6170             this.active = this.items[id];
6171             this.active.show();
6172             this.fireEvent("tabchange", this, this.active);
6173         }
6174         return tab;
6175     },
6176
6177     /**
6178      * Gets the active {@link Roo.TabPanelItem}.
6179      * @return {Roo.TabPanelItem} The active TabPanelItem or null if none are active.
6180      */
6181     getActiveTab : function(){
6182         return this.active;
6183     },
6184
6185     /**
6186      * Updates the tab body element to fit the height of the container element
6187      * for overflow scrolling
6188      * @param {Number} targetHeight (optional) Override the starting height from the elements height
6189      */
6190     syncHeight : function(targetHeight){
6191         var height = (targetHeight || this.el.getHeight())-this.el.getBorderWidth("tb")-this.el.getPadding("tb");
6192         var bm = this.bodyEl.getMargins();
6193         var newHeight = height-(this.stripWrap.getHeight()||0)-(bm.top+bm.bottom);
6194         this.bodyEl.setHeight(newHeight);
6195         return newHeight;
6196     },
6197
6198     onResize : function(){
6199         if(this.monitorResize){
6200             this.autoSizeTabs();
6201         }
6202     },
6203
6204     /**
6205      * Disables tab resizing while tabs are being added (if {@link #resizeTabs} is false this does nothing)
6206      */
6207     beginUpdate : function(){
6208         this.updating = true;
6209     },
6210
6211     /**
6212      * Stops an update and resizes the tabs (if {@link #resizeTabs} is false this does nothing)
6213      */
6214     endUpdate : function(){
6215         this.updating = false;
6216         this.autoSizeTabs();
6217     },
6218
6219     /**
6220      * Manual call to resize the tabs (if {@link #resizeTabs} is false this does nothing)
6221      */
6222     autoSizeTabs : function(){
6223         var count = this.items.length;
6224         var vcount = count - this.hiddenCount;
6225         if(!this.resizeTabs || count < 1 || vcount < 1 || this.updating) {
6226             return;
6227         }
6228         var w = Math.max(this.el.getWidth() - this.cpad, 10);
6229         var availWidth = Math.floor(w / vcount);
6230         var b = this.stripBody;
6231         if(b.getWidth() > w){
6232             var tabs = this.items;
6233             this.setTabWidth(Math.max(availWidth, this.minTabWidth)-2);
6234             if(availWidth < this.minTabWidth){
6235                 /*if(!this.sleft){    // incomplete scrolling code
6236                     this.createScrollButtons();
6237                 }
6238                 this.showScroll();
6239                 this.stripClip.setWidth(w - (this.sleft.getWidth()+this.sright.getWidth()));*/
6240             }
6241         }else{
6242             if(this.currentTabWidth < this.preferredTabWidth){
6243                 this.setTabWidth(Math.min(availWidth, this.preferredTabWidth)-2);
6244             }
6245         }
6246     },
6247
6248     /**
6249      * Returns the number of tabs in this TabPanel.
6250      * @return {Number}
6251      */
6252      getCount : function(){
6253          return this.items.length;
6254      },
6255
6256     /**
6257      * Resizes all the tabs to the passed width
6258      * @param {Number} The new width
6259      */
6260     setTabWidth : function(width){
6261         this.currentTabWidth = width;
6262         for(var i = 0, len = this.items.length; i < len; i++) {
6263                 if(!this.items[i].isHidden()) {
6264                 this.items[i].setWidth(width);
6265             }
6266         }
6267     },
6268
6269     /**
6270      * Destroys this TabPanel
6271      * @param {Boolean} removeEl (optional) True to remove the element from the DOM as well (defaults to undefined)
6272      */
6273     destroy : function(removeEl){
6274         Roo.EventManager.removeResizeListener(this.onResize, this);
6275         for(var i = 0, len = this.items.length; i < len; i++){
6276             this.items[i].purgeListeners();
6277         }
6278         if(removeEl === true){
6279             this.el.update("");
6280             this.el.remove();
6281         }
6282     }
6283 });
6284
6285 /**
6286  * @class Roo.TabPanelItem
6287  * @extends Roo.util.Observable
6288  * Represents an individual item (tab plus body) in a TabPanel.
6289  * @param {Roo.TabPanel} tabPanel The {@link Roo.TabPanel} this TabPanelItem belongs to
6290  * @param {String} id The id of this TabPanelItem
6291  * @param {String} text The text for the tab of this TabPanelItem
6292  * @param {Boolean} closable True to allow this TabPanelItem to be closable (defaults to false)
6293  */
6294 Roo.TabPanelItem = function(tabPanel, id, text, closable){
6295     /**
6296      * The {@link Roo.TabPanel} this TabPanelItem belongs to
6297      * @type Roo.TabPanel
6298      */
6299     this.tabPanel = tabPanel;
6300     /**
6301      * The id for this TabPanelItem
6302      * @type String
6303      */
6304     this.id = id;
6305     /** @private */
6306     this.disabled = false;
6307     /** @private */
6308     this.text = text;
6309     /** @private */
6310     this.loaded = false;
6311     this.closable = closable;
6312
6313     /**
6314      * The body element for this TabPanelItem.
6315      * @type Roo.Element
6316      */
6317     this.bodyEl = Roo.get(tabPanel.createItemBody(tabPanel.bodyEl.dom, id));
6318     this.bodyEl.setVisibilityMode(Roo.Element.VISIBILITY);
6319     this.bodyEl.setStyle("display", "block");
6320     this.bodyEl.setStyle("zoom", "1");
6321     this.hideAction();
6322
6323     var els = tabPanel.createStripElements(tabPanel.stripEl.dom, text, closable);
6324     /** @private */
6325     this.el = Roo.get(els.el, true);
6326     this.inner = Roo.get(els.inner, true);
6327     this.textEl = Roo.get(this.el.dom.firstChild.firstChild.firstChild, true);
6328     this.pnode = Roo.get(els.el.parentNode, true);
6329     this.el.on("mousedown", this.onTabMouseDown, this);
6330     this.el.on("click", this.onTabClick, this);
6331     /** @private */
6332     if(closable){
6333         var c = Roo.get(els.close, true);
6334         c.dom.title = this.closeText;
6335         c.addClassOnOver("close-over");
6336         c.on("click", this.closeClick, this);
6337      }
6338
6339     this.addEvents({
6340          /**
6341          * @event activate
6342          * Fires when this tab becomes the active tab.
6343          * @param {Roo.TabPanel} tabPanel The parent TabPanel
6344          * @param {Roo.TabPanelItem} this
6345          */
6346         "activate": true,
6347         /**
6348          * @event beforeclose
6349          * Fires before this tab is closed. To cancel the close, set cancel to true on e (e.cancel = true).
6350          * @param {Roo.TabPanelItem} this
6351          * @param {Object} e Set cancel to true on this object to cancel the close.
6352          */
6353         "beforeclose": true,
6354         /**
6355          * @event close
6356          * Fires when this tab is closed.
6357          * @param {Roo.TabPanelItem} this
6358          */
6359          "close": true,
6360         /**
6361          * @event deactivate
6362          * Fires when this tab is no longer the active tab.
6363          * @param {Roo.TabPanel} tabPanel The parent TabPanel
6364          * @param {Roo.TabPanelItem} this
6365          */
6366          "deactivate" : true
6367     });
6368     this.hidden = false;
6369
6370     Roo.TabPanelItem.superclass.constructor.call(this);
6371 };
6372
6373 Roo.extend(Roo.TabPanelItem, Roo.util.Observable, {
6374     purgeListeners : function(){
6375        Roo.util.Observable.prototype.purgeListeners.call(this);
6376        this.el.removeAllListeners();
6377     },
6378     /**
6379      * Shows this TabPanelItem -- this <b>does not</b> deactivate the currently active TabPanelItem.
6380      */
6381     show : function(){
6382         this.pnode.addClass("on");
6383         this.showAction();
6384         if(Roo.isOpera){
6385             this.tabPanel.stripWrap.repaint();
6386         }
6387         this.fireEvent("activate", this.tabPanel, this);
6388     },
6389
6390     /**
6391      * Returns true if this tab is the active tab.
6392      * @return {Boolean}
6393      */
6394     isActive : function(){
6395         return this.tabPanel.getActiveTab() == this;
6396     },
6397
6398     /**
6399      * Hides this TabPanelItem -- if you don't activate another TabPanelItem this could look odd.
6400      */
6401     hide : function(){
6402         this.pnode.removeClass("on");
6403         this.hideAction();
6404         this.fireEvent("deactivate", this.tabPanel, this);
6405     },
6406
6407     hideAction : function(){
6408         this.bodyEl.hide();
6409         this.bodyEl.setStyle("position", "absolute");
6410         this.bodyEl.setLeft("-20000px");
6411         this.bodyEl.setTop("-20000px");
6412     },
6413
6414     showAction : function(){
6415         this.bodyEl.setStyle("position", "relative");
6416         this.bodyEl.setTop("");
6417         this.bodyEl.setLeft("");
6418         this.bodyEl.show();
6419     },
6420
6421     /**
6422      * Set the tooltip for the tab.
6423      * @param {String} tooltip The tab's tooltip
6424      */
6425     setTooltip : function(text){
6426         if(Roo.QuickTips && Roo.QuickTips.isEnabled()){
6427             this.textEl.dom.qtip = text;
6428             this.textEl.dom.removeAttribute('title');
6429         }else{
6430             this.textEl.dom.title = text;
6431         }
6432     },
6433
6434     onTabClick : function(e){
6435         e.preventDefault();
6436         this.tabPanel.activate(this.id);
6437     },
6438
6439     onTabMouseDown : function(e){
6440         e.preventDefault();
6441         this.tabPanel.activate(this.id);
6442     },
6443
6444     getWidth : function(){
6445         return this.inner.getWidth();
6446     },
6447
6448     setWidth : function(width){
6449         var iwidth = width - this.pnode.getPadding("lr");
6450         this.inner.setWidth(iwidth);
6451         this.textEl.setWidth(iwidth-this.inner.getPadding("lr"));
6452         this.pnode.setWidth(width);
6453     },
6454
6455     /**
6456      * Show or hide the tab
6457      * @param {Boolean} hidden True to hide or false to show.
6458      */
6459     setHidden : function(hidden){
6460         this.hidden = hidden;
6461         this.pnode.setStyle("display", hidden ? "none" : "");
6462     },
6463
6464     /**
6465      * Returns true if this tab is "hidden"
6466      * @return {Boolean}
6467      */
6468     isHidden : function(){
6469         return this.hidden;
6470     },
6471
6472     /**
6473      * Returns the text for this tab
6474      * @return {String}
6475      */
6476     getText : function(){
6477         return this.text;
6478     },
6479
6480     autoSize : function(){
6481         //this.el.beginMeasure();
6482         this.textEl.setWidth(1);
6483         /*
6484          *  #2804 [new] Tabs in Roojs
6485          *  increase the width by 2-4 pixels to prevent the ellipssis showing in chrome
6486          */
6487         this.setWidth(this.textEl.dom.scrollWidth+this.pnode.getPadding("lr")+this.inner.getPadding("lr") + 2);
6488         //this.el.endMeasure();
6489     },
6490
6491     /**
6492      * Sets the text for the tab (Note: this also sets the tooltip text)
6493      * @param {String} text The tab's text and tooltip
6494      */
6495     setText : function(text){
6496         this.text = text;
6497         this.textEl.update(text);
6498         this.setTooltip(text);
6499         if(!this.tabPanel.resizeTabs){
6500             this.autoSize();
6501         }
6502     },
6503     /**
6504      * Activates this TabPanelItem -- this <b>does</b> deactivate the currently active TabPanelItem.
6505      */
6506     activate : function(){
6507         this.tabPanel.activate(this.id);
6508     },
6509
6510     /**
6511      * Disables this TabPanelItem -- this does nothing if this is the active TabPanelItem.
6512      */
6513     disable : function(){
6514         if(this.tabPanel.active != this){
6515             this.disabled = true;
6516             this.pnode.addClass("disabled");
6517         }
6518     },
6519
6520     /**
6521      * Enables this TabPanelItem if it was previously disabled.
6522      */
6523     enable : function(){
6524         this.disabled = false;
6525         this.pnode.removeClass("disabled");
6526     },
6527
6528     /**
6529      * Sets the content for this TabPanelItem.
6530      * @param {String} content The content
6531      * @param {Boolean} loadScripts true to look for and load scripts
6532      */
6533     setContent : function(content, loadScripts){
6534         this.bodyEl.update(content, loadScripts);
6535     },
6536
6537     /**
6538      * Gets the {@link Roo.UpdateManager} for the body of this TabPanelItem. Enables you to perform Ajax updates.
6539      * @return {Roo.UpdateManager} The UpdateManager
6540      */
6541     getUpdateManager : function(){
6542         return this.bodyEl.getUpdateManager();
6543     },
6544
6545     /**
6546      * Set a URL to be used to load the content for this TabPanelItem.
6547      * @param {String/Function} url The URL to load the content from, or a function to call to get the URL
6548      * @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)
6549      * @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)
6550      * @return {Roo.UpdateManager} The UpdateManager
6551      */
6552     setUrl : function(url, params, loadOnce){
6553         if(this.refreshDelegate){
6554             this.un('activate', this.refreshDelegate);
6555         }
6556         this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
6557         this.on("activate", this.refreshDelegate);
6558         return this.bodyEl.getUpdateManager();
6559     },
6560
6561     /** @private */
6562     _handleRefresh : function(url, params, loadOnce){
6563         if(!loadOnce || !this.loaded){
6564             var updater = this.bodyEl.getUpdateManager();
6565             updater.update(url, params, this._setLoaded.createDelegate(this));
6566         }
6567     },
6568
6569     /**
6570      *   Forces a content refresh from the URL specified in the {@link #setUrl} method.
6571      *   Will fail silently if the setUrl method has not been called.
6572      *   This does not activate the panel, just updates its content.
6573      */
6574     refresh : function(){
6575         if(this.refreshDelegate){
6576            this.loaded = false;
6577            this.refreshDelegate();
6578         }
6579     },
6580
6581     /** @private */
6582     _setLoaded : function(){
6583         this.loaded = true;
6584     },
6585
6586     /** @private */
6587     closeClick : function(e){
6588         var o = {};
6589         e.stopEvent();
6590         this.fireEvent("beforeclose", this, o);
6591         if(o.cancel !== true){
6592             this.tabPanel.removeTab(this.id);
6593         }
6594     },
6595     /**
6596      * The text displayed in the tooltip for the close icon.
6597      * @type String
6598      */
6599     closeText : "Close this tab"
6600 });
6601
6602 /** @private */
6603 Roo.TabPanel.prototype.createStrip = function(container){
6604     var strip = document.createElement("div");
6605     strip.className = "x-tabs-wrap";
6606     container.appendChild(strip);
6607     return strip;
6608 };
6609 /** @private */
6610 Roo.TabPanel.prototype.createStripList = function(strip){
6611     // div wrapper for retard IE
6612     // returns the "tr" element.
6613     strip.innerHTML = '<div class="x-tabs-strip-wrap">'+
6614         '<table class="x-tabs-strip" cellspacing="0" cellpadding="0" border="0"><tbody><tr>'+
6615         '<td class="x-tab-strip-toolbar"></td></tr></tbody></table></div>';
6616     return strip.firstChild.firstChild.firstChild.firstChild;
6617 };
6618 /** @private */
6619 Roo.TabPanel.prototype.createBody = function(container){
6620     var body = document.createElement("div");
6621     Roo.id(body, "tab-body");
6622     Roo.fly(body).addClass("x-tabs-body");
6623     container.appendChild(body);
6624     return body;
6625 };
6626 /** @private */
6627 Roo.TabPanel.prototype.createItemBody = function(bodyEl, id){
6628     var body = Roo.getDom(id);
6629     if(!body){
6630         body = document.createElement("div");
6631         body.id = id;
6632     }
6633     Roo.fly(body).addClass("x-tabs-item-body");
6634     bodyEl.insertBefore(body, bodyEl.firstChild);
6635     return body;
6636 };
6637 /** @private */
6638 Roo.TabPanel.prototype.createStripElements = function(stripEl, text, closable){
6639     var td = document.createElement("td");
6640     stripEl.insertBefore(td, stripEl.childNodes[stripEl.childNodes.length-1]);
6641     //stripEl.appendChild(td);
6642     if(closable){
6643         td.className = "x-tabs-closable";
6644         if(!this.closeTpl){
6645             this.closeTpl = new Roo.Template(
6646                '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
6647                '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span>' +
6648                '<div unselectable="on" class="close-icon">&#160;</div></em></span></a>'
6649             );
6650         }
6651         var el = this.closeTpl.overwrite(td, {"text": text});
6652         var close = el.getElementsByTagName("div")[0];
6653         var inner = el.getElementsByTagName("em")[0];
6654         return {"el": el, "close": close, "inner": inner};
6655     } else {
6656         if(!this.tabTpl){
6657             this.tabTpl = new Roo.Template(
6658                '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
6659                '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span></em></span></a>'
6660             );
6661         }
6662         var el = this.tabTpl.overwrite(td, {"text": text});
6663         var inner = el.getElementsByTagName("em")[0];
6664         return {"el": el, "inner": inner};
6665     }
6666 };/*
6667  * Based on:
6668  * Ext JS Library 1.1.1
6669  * Copyright(c) 2006-2007, Ext JS, LLC.
6670  *
6671  * Originally Released Under LGPL - original licence link has changed is not relivant.
6672  *
6673  * Fork - LGPL
6674  * <script type="text/javascript">
6675  */
6676
6677 /**
6678  * @class Roo.Button
6679  * @extends Roo.util.Observable
6680  * Simple Button class
6681  * @cfg {String} text The button text
6682  * @cfg {String} icon The path to an image to display in the button (the image will be set as the background-image
6683  * CSS property of the button by default, so if you want a mixed icon/text button, set cls:"x-btn-text-icon")
6684  * @cfg {Function} handler A function called when the button is clicked (can be used instead of click event)
6685  * @cfg {Object} scope The scope of the handler
6686  * @cfg {Number} minWidth The minimum width for this button (used to give a set of buttons a common width)
6687  * @cfg {String/Object} tooltip The tooltip for the button - can be a string or QuickTips config object
6688  * @cfg {Boolean} hidden True to start hidden (defaults to false)
6689  * @cfg {Boolean} disabled True to start disabled (defaults to false)
6690  * @cfg {Boolean} pressed True to start pressed (only if enableToggle = true)
6691  * @cfg {String} toggleGroup The group this toggle button is a member of (only 1 per group can be pressed, only
6692    applies if enableToggle = true)
6693  * @cfg {String/HTMLElement/Element} renderTo The element to append the button to
6694  * @cfg {Boolean/Object} repeat True to repeat fire the click event while the mouse is down. This can also be
6695   an {@link Roo.util.ClickRepeater} config object (defaults to false).
6696  * @constructor
6697  * Create a new button
6698  * @param {Object} config The config object
6699  */
6700 Roo.Button = function(renderTo, config)
6701 {
6702     if (!config) {
6703         config = renderTo;
6704         renderTo = config.renderTo || false;
6705     }
6706     
6707     Roo.apply(this, config);
6708     this.addEvents({
6709         /**
6710              * @event click
6711              * Fires when this button is clicked
6712              * @param {Button} this
6713              * @param {EventObject} e The click event
6714              */
6715             "click" : true,
6716         /**
6717              * @event toggle
6718              * Fires when the "pressed" state of this button changes (only if enableToggle = true)
6719              * @param {Button} this
6720              * @param {Boolean} pressed
6721              */
6722             "toggle" : true,
6723         /**
6724              * @event mouseover
6725              * Fires when the mouse hovers over the button
6726              * @param {Button} this
6727              * @param {Event} e The event object
6728              */
6729         'mouseover' : true,
6730         /**
6731              * @event mouseout
6732              * Fires when the mouse exits the button
6733              * @param {Button} this
6734              * @param {Event} e The event object
6735              */
6736         'mouseout': true,
6737          /**
6738              * @event render
6739              * Fires when the button is rendered
6740              * @param {Button} this
6741              */
6742         'render': true
6743     });
6744     if(this.menu){
6745         this.menu = Roo.menu.MenuMgr.get(this.menu);
6746     }
6747     // register listeners first!!  - so render can be captured..
6748     Roo.util.Observable.call(this);
6749     if(renderTo){
6750         this.render(renderTo);
6751     }
6752     
6753   
6754 };
6755
6756 Roo.extend(Roo.Button, Roo.util.Observable, {
6757     /**
6758      * 
6759      */
6760     
6761     /**
6762      * Read-only. True if this button is hidden
6763      * @type Boolean
6764      */
6765     hidden : false,
6766     /**
6767      * Read-only. True if this button is disabled
6768      * @type Boolean
6769      */
6770     disabled : false,
6771     /**
6772      * Read-only. True if this button is pressed (only if enableToggle = true)
6773      * @type Boolean
6774      */
6775     pressed : false,
6776
6777     /**
6778      * @cfg {Number} tabIndex 
6779      * The DOM tabIndex for this button (defaults to undefined)
6780      */
6781     tabIndex : undefined,
6782
6783     /**
6784      * @cfg {Boolean} enableToggle
6785      * True to enable pressed/not pressed toggling (defaults to false)
6786      */
6787     enableToggle: false,
6788     /**
6789      * @cfg {Mixed} menu
6790      * Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob (defaults to undefined).
6791      */
6792     menu : undefined,
6793     /**
6794      * @cfg {String} menuAlign
6795      * The position to align the menu to (see {@link Roo.Element#alignTo} for more details, defaults to 'tl-bl?').
6796      */
6797     menuAlign : "tl-bl?",
6798
6799     /**
6800      * @cfg {String} iconCls
6801      * A css class which sets a background image to be used as the icon for this button (defaults to undefined).
6802      */
6803     iconCls : undefined,
6804     /**
6805      * @cfg {String} type
6806      * The button's type, corresponding to the DOM input element type attribute.  Either "submit," "reset" or "button" (default).
6807      */
6808     type : 'button',
6809
6810     // private
6811     menuClassTarget: 'tr',
6812
6813     /**
6814      * @cfg {String} clickEvent
6815      * The type of event to map to the button's event handler (defaults to 'click')
6816      */
6817     clickEvent : 'click',
6818
6819     /**
6820      * @cfg {Boolean} handleMouseEvents
6821      * False to disable visual cues on mouseover, mouseout and mousedown (defaults to true)
6822      */
6823     handleMouseEvents : true,
6824
6825     /**
6826      * @cfg {String} tooltipType
6827      * The type of tooltip to use. Either "qtip" (default) for QuickTips or "title" for title attribute.
6828      */
6829     tooltipType : 'qtip',
6830
6831     /**
6832      * @cfg {String} cls
6833      * A CSS class to apply to the button's main element.
6834      */
6835     
6836     /**
6837      * @cfg {Roo.Template} template (Optional)
6838      * An {@link Roo.Template} with which to create the Button's main element. This Template must
6839      * contain numeric substitution parameter 0 if it is to display the tRoo property. Changing the template could
6840      * require code modifications if required elements (e.g. a button) aren't present.
6841      */
6842
6843     // private
6844     render : function(renderTo){
6845         var btn;
6846         if(this.hideParent){
6847             this.parentEl = Roo.get(renderTo);
6848         }
6849         if(!this.dhconfig){
6850             if(!this.template){
6851                 if(!Roo.Button.buttonTemplate){
6852                     // hideous table template
6853                     Roo.Button.buttonTemplate = new Roo.Template(
6854                         '<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap"><tbody><tr>',
6855                         '<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>',
6856                         "</tr></tbody></table>");
6857                 }
6858                 this.template = Roo.Button.buttonTemplate;
6859             }
6860             btn = this.template.append(renderTo, [this.text || '&#160;', this.type], true);
6861             var btnEl = btn.child("button:first");
6862             btnEl.on('focus', this.onFocus, this);
6863             btnEl.on('blur', this.onBlur, this);
6864             if(this.cls){
6865                 btn.addClass(this.cls);
6866             }
6867             if(this.icon){
6868                 btnEl.setStyle('background-image', 'url(' +this.icon +')');
6869             }
6870             if(this.iconCls){
6871                 btnEl.addClass(this.iconCls);
6872                 if(!this.cls){
6873                     btn.addClass(this.text ? 'x-btn-text-icon' : 'x-btn-icon');
6874                 }
6875             }
6876             if(this.tabIndex !== undefined){
6877                 btnEl.dom.tabIndex = this.tabIndex;
6878             }
6879             if(this.tooltip){
6880                 if(typeof this.tooltip == 'object'){
6881                     Roo.QuickTips.tips(Roo.apply({
6882                           target: btnEl.id
6883                     }, this.tooltip));
6884                 } else {
6885                     btnEl.dom[this.tooltipType] = this.tooltip;
6886                 }
6887             }
6888         }else{
6889             btn = Roo.DomHelper.append(Roo.get(renderTo).dom, this.dhconfig, true);
6890         }
6891         this.el = btn;
6892         if(this.id){
6893             this.el.dom.id = this.el.id = this.id;
6894         }
6895         if(this.menu){
6896             this.el.child(this.menuClassTarget).addClass("x-btn-with-menu");
6897             this.menu.on("show", this.onMenuShow, this);
6898             this.menu.on("hide", this.onMenuHide, this);
6899         }
6900         btn.addClass("x-btn");
6901         if(Roo.isIE && !Roo.isIE7){
6902             this.autoWidth.defer(1, this);
6903         }else{
6904             this.autoWidth();
6905         }
6906         if(this.handleMouseEvents){
6907             btn.on("mouseover", this.onMouseOver, this);
6908             btn.on("mouseout", this.onMouseOut, this);
6909             btn.on("mousedown", this.onMouseDown, this);
6910         }
6911         btn.on(this.clickEvent, this.onClick, this);
6912         //btn.on("mouseup", this.onMouseUp, this);
6913         if(this.hidden){
6914             this.hide();
6915         }
6916         if(this.disabled){
6917             this.disable();
6918         }
6919         Roo.ButtonToggleMgr.register(this);
6920         if(this.pressed){
6921             this.el.addClass("x-btn-pressed");
6922         }
6923         if(this.repeat){
6924             var repeater = new Roo.util.ClickRepeater(btn,
6925                 typeof this.repeat == "object" ? this.repeat : {}
6926             );
6927             repeater.on("click", this.onClick,  this);
6928         }
6929         
6930         this.fireEvent('render', this);
6931         
6932     },
6933     /**
6934      * Returns the button's underlying element
6935      * @return {Roo.Element} The element
6936      */
6937     getEl : function(){
6938         return this.el;  
6939     },
6940     
6941     /**
6942      * Destroys this Button and removes any listeners.
6943      */
6944     destroy : function(){
6945         Roo.ButtonToggleMgr.unregister(this);
6946         this.el.removeAllListeners();
6947         this.purgeListeners();
6948         this.el.remove();
6949     },
6950
6951     // private
6952     autoWidth : function(){
6953         if(this.el){
6954             this.el.setWidth("auto");
6955             if(Roo.isIE7 && Roo.isStrict){
6956                 var ib = this.el.child('button');
6957                 if(ib && ib.getWidth() > 20){
6958                     ib.clip();
6959                     ib.setWidth(Roo.util.TextMetrics.measure(ib, this.text).width+ib.getFrameWidth('lr'));
6960                 }
6961             }
6962             if(this.minWidth){
6963                 if(this.hidden){
6964                     this.el.beginMeasure();
6965                 }
6966                 if(this.el.getWidth() < this.minWidth){
6967                     this.el.setWidth(this.minWidth);
6968                 }
6969                 if(this.hidden){
6970                     this.el.endMeasure();
6971                 }
6972             }
6973         }
6974     },
6975
6976     /**
6977      * Assigns this button's click handler
6978      * @param {Function} handler The function to call when the button is clicked
6979      * @param {Object} scope (optional) Scope for the function passed in
6980      */
6981     setHandler : function(handler, scope){
6982         this.handler = handler;
6983         this.scope = scope;  
6984     },
6985     
6986     /**
6987      * Sets this button's text
6988      * @param {String} text The button text
6989      */
6990     setText : function(text){
6991         this.text = text;
6992         if(this.el){
6993             this.el.child("td.x-btn-center button.x-btn-text").update(text);
6994         }
6995         this.autoWidth();
6996     },
6997     
6998     /**
6999      * Gets the text for this button
7000      * @return {String} The button text
7001      */
7002     getText : function(){
7003         return this.text;  
7004     },
7005     
7006     /**
7007      * Show this button
7008      */
7009     show: function(){
7010         this.hidden = false;
7011         if(this.el){
7012             this[this.hideParent? 'parentEl' : 'el'].setStyle("display", "");
7013         }
7014     },
7015     
7016     /**
7017      * Hide this button
7018      */
7019     hide: function(){
7020         this.hidden = true;
7021         if(this.el){
7022             this[this.hideParent? 'parentEl' : 'el'].setStyle("display", "none");
7023         }
7024     },
7025     
7026     /**
7027      * Convenience function for boolean show/hide
7028      * @param {Boolean} visible True to show, false to hide
7029      */
7030     setVisible: function(visible){
7031         if(visible) {
7032             this.show();
7033         }else{
7034             this.hide();
7035         }
7036     },
7037     
7038     /**
7039      * If a state it passed, it becomes the pressed state otherwise the current state is toggled.
7040      * @param {Boolean} state (optional) Force a particular state
7041      */
7042     toggle : function(state){
7043         state = state === undefined ? !this.pressed : state;
7044         if(state != this.pressed){
7045             if(state){
7046                 this.el.addClass("x-btn-pressed");
7047                 this.pressed = true;
7048                 this.fireEvent("toggle", this, true);
7049             }else{
7050                 this.el.removeClass("x-btn-pressed");
7051                 this.pressed = false;
7052                 this.fireEvent("toggle", this, false);
7053             }
7054             if(this.toggleHandler){
7055                 this.toggleHandler.call(this.scope || this, this, state);
7056             }
7057         }
7058     },
7059     
7060     /**
7061      * Focus the button
7062      */
7063     focus : function(){
7064         this.el.child('button:first').focus();
7065     },
7066     
7067     /**
7068      * Disable this button
7069      */
7070     disable : function(){
7071         if(this.el){
7072             this.el.addClass("x-btn-disabled");
7073         }
7074         this.disabled = true;
7075     },
7076     
7077     /**
7078      * Enable this button
7079      */
7080     enable : function(){
7081         if(this.el){
7082             this.el.removeClass("x-btn-disabled");
7083         }
7084         this.disabled = false;
7085     },
7086
7087     /**
7088      * Convenience function for boolean enable/disable
7089      * @param {Boolean} enabled True to enable, false to disable
7090      */
7091     setDisabled : function(v){
7092         this[v !== true ? "enable" : "disable"]();
7093     },
7094
7095     // private
7096     onClick : function(e)
7097     {
7098         if(e){
7099             e.preventDefault();
7100         }
7101         if(e.button != 0){
7102             return;
7103         }
7104         if(!this.disabled){
7105             if(this.enableToggle){
7106                 this.toggle();
7107             }
7108             if(this.menu && !this.menu.isVisible()){
7109                 this.menu.show(this.el, this.menuAlign);
7110             }
7111             this.fireEvent("click", this, e);
7112             if(this.handler){
7113                 this.el.removeClass("x-btn-over");
7114                 this.handler.call(this.scope || this, this, e);
7115             }
7116         }
7117     },
7118     // private
7119     onMouseOver : function(e){
7120         if(!this.disabled){
7121             this.el.addClass("x-btn-over");
7122             this.fireEvent('mouseover', this, e);
7123         }
7124     },
7125     // private
7126     onMouseOut : function(e){
7127         if(!e.within(this.el,  true)){
7128             this.el.removeClass("x-btn-over");
7129             this.fireEvent('mouseout', this, e);
7130         }
7131     },
7132     // private
7133     onFocus : function(e){
7134         if(!this.disabled){
7135             this.el.addClass("x-btn-focus");
7136         }
7137     },
7138     // private
7139     onBlur : function(e){
7140         this.el.removeClass("x-btn-focus");
7141     },
7142     // private
7143     onMouseDown : function(e){
7144         if(!this.disabled && e.button == 0){
7145             this.el.addClass("x-btn-click");
7146             Roo.get(document).on('mouseup', this.onMouseUp, this);
7147         }
7148     },
7149     // private
7150     onMouseUp : function(e){
7151         if(e.button == 0){
7152             this.el.removeClass("x-btn-click");
7153             Roo.get(document).un('mouseup', this.onMouseUp, this);
7154         }
7155     },
7156     // private
7157     onMenuShow : function(e){
7158         this.el.addClass("x-btn-menu-active");
7159     },
7160     // private
7161     onMenuHide : function(e){
7162         this.el.removeClass("x-btn-menu-active");
7163     }   
7164 });
7165
7166 // Private utility class used by Button
7167 Roo.ButtonToggleMgr = function(){
7168    var groups = {};
7169    
7170    function toggleGroup(btn, state){
7171        if(state){
7172            var g = groups[btn.toggleGroup];
7173            for(var i = 0, l = g.length; i < l; i++){
7174                if(g[i] != btn){
7175                    g[i].toggle(false);
7176                }
7177            }
7178        }
7179    }
7180    
7181    return {
7182        register : function(btn){
7183            if(!btn.toggleGroup){
7184                return;
7185            }
7186            var g = groups[btn.toggleGroup];
7187            if(!g){
7188                g = groups[btn.toggleGroup] = [];
7189            }
7190            g.push(btn);
7191            btn.on("toggle", toggleGroup);
7192        },
7193        
7194        unregister : function(btn){
7195            if(!btn.toggleGroup){
7196                return;
7197            }
7198            var g = groups[btn.toggleGroup];
7199            if(g){
7200                g.remove(btn);
7201                btn.un("toggle", toggleGroup);
7202            }
7203        }
7204    };
7205 }();/*
7206  * Based on:
7207  * Ext JS Library 1.1.1
7208  * Copyright(c) 2006-2007, Ext JS, LLC.
7209  *
7210  * Originally Released Under LGPL - original licence link has changed is not relivant.
7211  *
7212  * Fork - LGPL
7213  * <script type="text/javascript">
7214  */
7215  
7216 /**
7217  * @class Roo.SplitButton
7218  * @extends Roo.Button
7219  * A split button that provides a built-in dropdown arrow that can fire an event separately from the default
7220  * click event of the button.  Typically this would be used to display a dropdown menu that provides additional
7221  * options to the primary button action, but any custom handler can provide the arrowclick implementation.
7222  * @cfg {Function} arrowHandler A function called when the arrow button is clicked (can be used instead of click event)
7223  * @cfg {String} arrowTooltip The title attribute of the arrow
7224  * @constructor
7225  * Create a new menu button
7226  * @param {String/HTMLElement/Element} renderTo The element to append the button to
7227  * @param {Object} config The config object
7228  */
7229 Roo.SplitButton = function(renderTo, config){
7230     Roo.SplitButton.superclass.constructor.call(this, renderTo, config);
7231     /**
7232      * @event arrowclick
7233      * Fires when this button's arrow is clicked
7234      * @param {SplitButton} this
7235      * @param {EventObject} e The click event
7236      */
7237     this.addEvents({"arrowclick":true});
7238 };
7239
7240 Roo.extend(Roo.SplitButton, Roo.Button, {
7241     render : function(renderTo){
7242         // this is one sweet looking template!
7243         var tpl = new Roo.Template(
7244             '<table cellspacing="0" class="x-btn-menu-wrap x-btn"><tr><td>',
7245             '<table cellspacing="0" class="x-btn-wrap x-btn-menu-text-wrap"><tbody>',
7246             '<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>',
7247             "</tbody></table></td><td>",
7248             '<table cellspacing="0" class="x-btn-wrap x-btn-menu-arrow-wrap"><tbody>',
7249             '<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>',
7250             "</tbody></table></td></tr></table>"
7251         );
7252         var btn = tpl.append(renderTo, [this.text, this.type], true);
7253         var btnEl = btn.child("button");
7254         if(this.cls){
7255             btn.addClass(this.cls);
7256         }
7257         if(this.icon){
7258             btnEl.setStyle('background-image', 'url(' +this.icon +')');
7259         }
7260         if(this.iconCls){
7261             btnEl.addClass(this.iconCls);
7262             if(!this.cls){
7263                 btn.addClass(this.text ? 'x-btn-text-icon' : 'x-btn-icon');
7264             }
7265         }
7266         this.el = btn;
7267         if(this.handleMouseEvents){
7268             btn.on("mouseover", this.onMouseOver, this);
7269             btn.on("mouseout", this.onMouseOut, this);
7270             btn.on("mousedown", this.onMouseDown, this);
7271             btn.on("mouseup", this.onMouseUp, this);
7272         }
7273         btn.on(this.clickEvent, this.onClick, this);
7274         if(this.tooltip){
7275             if(typeof this.tooltip == 'object'){
7276                 Roo.QuickTips.tips(Roo.apply({
7277                       target: btnEl.id
7278                 }, this.tooltip));
7279             } else {
7280                 btnEl.dom[this.tooltipType] = this.tooltip;
7281             }
7282         }
7283         if(this.arrowTooltip){
7284             btn.child("button:nth(2)").dom[this.tooltipType] = this.arrowTooltip;
7285         }
7286         if(this.hidden){
7287             this.hide();
7288         }
7289         if(this.disabled){
7290             this.disable();
7291         }
7292         if(this.pressed){
7293             this.el.addClass("x-btn-pressed");
7294         }
7295         if(Roo.isIE && !Roo.isIE7){
7296             this.autoWidth.defer(1, this);
7297         }else{
7298             this.autoWidth();
7299         }
7300         if(this.menu){
7301             this.menu.on("show", this.onMenuShow, this);
7302             this.menu.on("hide", this.onMenuHide, this);
7303         }
7304         this.fireEvent('render', this);
7305     },
7306
7307     // private
7308     autoWidth : function(){
7309         if(this.el){
7310             var tbl = this.el.child("table:first");
7311             var tbl2 = this.el.child("table:last");
7312             this.el.setWidth("auto");
7313             tbl.setWidth("auto");
7314             if(Roo.isIE7 && Roo.isStrict){
7315                 var ib = this.el.child('button:first');
7316                 if(ib && ib.getWidth() > 20){
7317                     ib.clip();
7318                     ib.setWidth(Roo.util.TextMetrics.measure(ib, this.text).width+ib.getFrameWidth('lr'));
7319                 }
7320             }
7321             if(this.minWidth){
7322                 if(this.hidden){
7323                     this.el.beginMeasure();
7324                 }
7325                 if((tbl.getWidth()+tbl2.getWidth()) < this.minWidth){
7326                     tbl.setWidth(this.minWidth-tbl2.getWidth());
7327                 }
7328                 if(this.hidden){
7329                     this.el.endMeasure();
7330                 }
7331             }
7332             this.el.setWidth(tbl.getWidth()+tbl2.getWidth());
7333         } 
7334     },
7335     /**
7336      * Sets this button's click handler
7337      * @param {Function} handler The function to call when the button is clicked
7338      * @param {Object} scope (optional) Scope for the function passed above
7339      */
7340     setHandler : function(handler, scope){
7341         this.handler = handler;
7342         this.scope = scope;  
7343     },
7344     
7345     /**
7346      * Sets this button's arrow click handler
7347      * @param {Function} handler The function to call when the arrow is clicked
7348      * @param {Object} scope (optional) Scope for the function passed above
7349      */
7350     setArrowHandler : function(handler, scope){
7351         this.arrowHandler = handler;
7352         this.scope = scope;  
7353     },
7354     
7355     /**
7356      * Focus the button
7357      */
7358     focus : function(){
7359         if(this.el){
7360             this.el.child("button:first").focus();
7361         }
7362     },
7363
7364     // private
7365     onClick : function(e){
7366         e.preventDefault();
7367         if(!this.disabled){
7368             if(e.getTarget(".x-btn-menu-arrow-wrap")){
7369                 if(this.menu && !this.menu.isVisible()){
7370                     this.menu.show(this.el, this.menuAlign);
7371                 }
7372                 this.fireEvent("arrowclick", this, e);
7373                 if(this.arrowHandler){
7374                     this.arrowHandler.call(this.scope || this, this, e);
7375                 }
7376             }else{
7377                 this.fireEvent("click", this, e);
7378                 if(this.handler){
7379                     this.handler.call(this.scope || this, this, e);
7380                 }
7381             }
7382         }
7383     },
7384     // private
7385     onMouseDown : function(e){
7386         if(!this.disabled){
7387             Roo.fly(e.getTarget("table")).addClass("x-btn-click");
7388         }
7389     },
7390     // private
7391     onMouseUp : function(e){
7392         Roo.fly(e.getTarget("table")).removeClass("x-btn-click");
7393     }   
7394 });
7395
7396
7397 // backwards compat
7398 Roo.MenuButton = Roo.SplitButton;/*
7399  * Based on:
7400  * Ext JS Library 1.1.1
7401  * Copyright(c) 2006-2007, Ext JS, LLC.
7402  *
7403  * Originally Released Under LGPL - original licence link has changed is not relivant.
7404  *
7405  * Fork - LGPL
7406  * <script type="text/javascript">
7407  */
7408
7409 /**
7410  * @class Roo.Toolbar
7411  * Basic Toolbar class.
7412  * @constructor
7413  * Creates a new Toolbar
7414  * @param {Object} container The config object
7415  */ 
7416 Roo.Toolbar = function(container, buttons, config)
7417 {
7418     /// old consturctor format still supported..
7419     if(container instanceof Array){ // omit the container for later rendering
7420         buttons = container;
7421         config = buttons;
7422         container = null;
7423     }
7424     if (typeof(container) == 'object' && container.xtype) {
7425         config = container;
7426         container = config.container;
7427         buttons = config.buttons || []; // not really - use items!!
7428     }
7429     var xitems = [];
7430     if (config && config.items) {
7431         xitems = config.items;
7432         delete config.items;
7433     }
7434     Roo.apply(this, config);
7435     this.buttons = buttons;
7436     
7437     if(container){
7438         this.render(container);
7439     }
7440     this.xitems = xitems;
7441     Roo.each(xitems, function(b) {
7442         this.add(b);
7443     }, this);
7444     
7445 };
7446
7447 Roo.Toolbar.prototype = {
7448     /**
7449      * @cfg {Array} items
7450      * array of button configs or elements to add (will be converted to a MixedCollection)
7451      */
7452     
7453     /**
7454      * @cfg {String/HTMLElement/Element} container
7455      * The id or element that will contain the toolbar
7456      */
7457     // private
7458     render : function(ct){
7459         this.el = Roo.get(ct);
7460         if(this.cls){
7461             this.el.addClass(this.cls);
7462         }
7463         // using a table allows for vertical alignment
7464         // 100% width is needed by Safari...
7465         this.el.update('<div class="x-toolbar x-small-editor"><table cellspacing="0"><tr></tr></table></div>');
7466         this.tr = this.el.child("tr", true);
7467         var autoId = 0;
7468         this.items = new Roo.util.MixedCollection(false, function(o){
7469             return o.id || ("item" + (++autoId));
7470         });
7471         if(this.buttons){
7472             this.add.apply(this, this.buttons);
7473             delete this.buttons;
7474         }
7475     },
7476
7477     /**
7478      * Adds element(s) to the toolbar -- this function takes a variable number of 
7479      * arguments of mixed type and adds them to the toolbar.
7480      * @param {Mixed} arg1 The following types of arguments are all valid:<br />
7481      * <ul>
7482      * <li>{@link Roo.Toolbar.Button} config: A valid button config object (equivalent to {@link #addButton})</li>
7483      * <li>HtmlElement: Any standard HTML element (equivalent to {@link #addElement})</li>
7484      * <li>Field: Any form field (equivalent to {@link #addField})</li>
7485      * <li>Item: Any subclass of {@link Roo.Toolbar.Item} (equivalent to {@link #addItem})</li>
7486      * <li>String: Any generic string (gets wrapped in a {@link Roo.Toolbar.TextItem}, equivalent to {@link #addText}).
7487      * Note that there are a few special strings that are treated differently as explained nRoo.</li>
7488      * <li>'separator' or '-': Creates a separator element (equivalent to {@link #addSeparator})</li>
7489      * <li>' ': Creates a spacer element (equivalent to {@link #addSpacer})</li>
7490      * <li>'->': Creates a fill element (equivalent to {@link #addFill})</li>
7491      * </ul>
7492      * @param {Mixed} arg2
7493      * @param {Mixed} etc.
7494      */
7495     add : function(){
7496         var a = arguments, l = a.length;
7497         for(var i = 0; i < l; i++){
7498             this._add(a[i]);
7499         }
7500     },
7501     // private..
7502     _add : function(el) {
7503         
7504         if (el.xtype) {
7505             el = Roo.factory(el, typeof(Roo.Toolbar[el.xtype]) == 'undefined' ? Roo.form : Roo.Toolbar);
7506         }
7507         
7508         if (el.applyTo){ // some kind of form field
7509             return this.addField(el);
7510         } 
7511         if (el.render){ // some kind of Toolbar.Item
7512             return this.addItem(el);
7513         }
7514         if (typeof el == "string"){ // string
7515             if(el == "separator" || el == "-"){
7516                 return this.addSeparator();
7517             }
7518             if (el == " "){
7519                 return this.addSpacer();
7520             }
7521             if(el == "->"){
7522                 return this.addFill();
7523             }
7524             return this.addText(el);
7525             
7526         }
7527         if(el.tagName){ // element
7528             return this.addElement(el);
7529         }
7530         if(typeof el == "object"){ // must be button config?
7531             return this.addButton(el);
7532         }
7533         // and now what?!?!
7534         return false;
7535         
7536     },
7537     
7538     /**
7539      * Add an Xtype element
7540      * @param {Object} xtype Xtype Object
7541      * @return {Object} created Object
7542      */
7543     addxtype : function(e){
7544         return this.add(e);  
7545     },
7546     
7547     /**
7548      * Returns the Element for this toolbar.
7549      * @return {Roo.Element}
7550      */
7551     getEl : function(){
7552         return this.el;  
7553     },
7554     
7555     /**
7556      * Adds a separator
7557      * @return {Roo.Toolbar.Item} The separator item
7558      */
7559     addSeparator : function(){
7560         return this.addItem(new Roo.Toolbar.Separator());
7561     },
7562
7563     /**
7564      * Adds a spacer element
7565      * @return {Roo.Toolbar.Spacer} The spacer item
7566      */
7567     addSpacer : function(){
7568         return this.addItem(new Roo.Toolbar.Spacer());
7569     },
7570
7571     /**
7572      * Adds a fill element that forces subsequent additions to the right side of the toolbar
7573      * @return {Roo.Toolbar.Fill} The fill item
7574      */
7575     addFill : function(){
7576         return this.addItem(new Roo.Toolbar.Fill());
7577     },
7578
7579     /**
7580      * Adds any standard HTML element to the toolbar
7581      * @param {String/HTMLElement/Element} el The element or id of the element to add
7582      * @return {Roo.Toolbar.Item} The element's item
7583      */
7584     addElement : function(el){
7585         return this.addItem(new Roo.Toolbar.Item(el));
7586     },
7587     /**
7588      * Collection of items on the toolbar.. (only Toolbar Items, so use fields to retrieve fields)
7589      * @type Roo.util.MixedCollection  
7590      */
7591     items : false,
7592      
7593     /**
7594      * Adds any Toolbar.Item or subclass
7595      * @param {Roo.Toolbar.Item} item
7596      * @return {Roo.Toolbar.Item} The item
7597      */
7598     addItem : function(item){
7599         var td = this.nextBlock();
7600         item.render(td);
7601         this.items.add(item);
7602         return item;
7603     },
7604     
7605     /**
7606      * Adds a button (or buttons). See {@link Roo.Toolbar.Button} for more info on the config.
7607      * @param {Object/Array} config A button config or array of configs
7608      * @return {Roo.Toolbar.Button/Array}
7609      */
7610     addButton : function(config){
7611         if(config instanceof Array){
7612             var buttons = [];
7613             for(var i = 0, len = config.length; i < len; i++) {
7614                 buttons.push(this.addButton(config[i]));
7615             }
7616             return buttons;
7617         }
7618         var b = config;
7619         if(!(config instanceof Roo.Toolbar.Button)){
7620             b = config.split ?
7621                 new Roo.Toolbar.SplitButton(config) :
7622                 new Roo.Toolbar.Button(config);
7623         }
7624         var td = this.nextBlock();
7625         b.render(td);
7626         this.items.add(b);
7627         return b;
7628     },
7629     
7630     /**
7631      * Adds text to the toolbar
7632      * @param {String} text The text to add
7633      * @return {Roo.Toolbar.Item} The element's item
7634      */
7635     addText : function(text){
7636         return this.addItem(new Roo.Toolbar.TextItem(text));
7637     },
7638     
7639     /**
7640      * Inserts any {@link Roo.Toolbar.Item}/{@link Roo.Toolbar.Button} at the specified index.
7641      * @param {Number} index The index where the item is to be inserted
7642      * @param {Object/Roo.Toolbar.Item/Roo.Toolbar.Button (may be Array)} item The button, or button config object to be inserted.
7643      * @return {Roo.Toolbar.Button/Item}
7644      */
7645     insertButton : function(index, item){
7646         if(item instanceof Array){
7647             var buttons = [];
7648             for(var i = 0, len = item.length; i < len; i++) {
7649                buttons.push(this.insertButton(index + i, item[i]));
7650             }
7651             return buttons;
7652         }
7653         if (!(item instanceof Roo.Toolbar.Button)){
7654            item = new Roo.Toolbar.Button(item);
7655         }
7656         var td = document.createElement("td");
7657         this.tr.insertBefore(td, this.tr.childNodes[index]);
7658         item.render(td);
7659         this.items.insert(index, item);
7660         return item;
7661     },
7662     
7663     /**
7664      * Adds a new element to the toolbar from the passed {@link Roo.DomHelper} config.
7665      * @param {Object} config
7666      * @return {Roo.Toolbar.Item} The element's item
7667      */
7668     addDom : function(config, returnEl){
7669         var td = this.nextBlock();
7670         Roo.DomHelper.overwrite(td, config);
7671         var ti = new Roo.Toolbar.Item(td.firstChild);
7672         ti.render(td);
7673         this.items.add(ti);
7674         return ti;
7675     },
7676
7677     /**
7678      * Collection of fields on the toolbar.. usefull for quering (value is false if there are no fields)
7679      * @type Roo.util.MixedCollection  
7680      */
7681     fields : false,
7682     
7683     /**
7684      * Adds a dynamically rendered Roo.form field (TextField, ComboBox, etc).
7685      * Note: the field should not have been rendered yet. For a field that has already been
7686      * rendered, use {@link #addElement}.
7687      * @param {Roo.form.Field} field
7688      * @return {Roo.ToolbarItem}
7689      */
7690      
7691       
7692     addField : function(field) {
7693         if (!this.fields) {
7694             var autoId = 0;
7695             this.fields = new Roo.util.MixedCollection(false, function(o){
7696                 return o.id || ("item" + (++autoId));
7697             });
7698
7699         }
7700         
7701         var td = this.nextBlock();
7702         field.render(td);
7703         var ti = new Roo.Toolbar.Item(td.firstChild);
7704         ti.render(td);
7705         this.items.add(ti);
7706         this.fields.add(field);
7707         return ti;
7708     },
7709     /**
7710      * Hide the toolbar
7711      * @method hide
7712      */
7713      
7714       
7715     hide : function()
7716     {
7717         this.el.child('div').setVisibilityMode(Roo.Element.DISPLAY);
7718         this.el.child('div').hide();
7719     },
7720     /**
7721      * Show the toolbar
7722      * @method show
7723      */
7724     show : function()
7725     {
7726         this.el.child('div').show();
7727     },
7728       
7729     // private
7730     nextBlock : function(){
7731         var td = document.createElement("td");
7732         this.tr.appendChild(td);
7733         return td;
7734     },
7735
7736     // private
7737     destroy : function(){
7738         if(this.items){ // rendered?
7739             Roo.destroy.apply(Roo, this.items.items);
7740         }
7741         if(this.fields){ // rendered?
7742             Roo.destroy.apply(Roo, this.fields.items);
7743         }
7744         Roo.Element.uncache(this.el, this.tr);
7745     }
7746 };
7747
7748 /**
7749  * @class Roo.Toolbar.Item
7750  * The base class that other classes should extend in order to get some basic common toolbar item functionality.
7751  * @constructor
7752  * Creates a new Item
7753  * @param {HTMLElement} el 
7754  */
7755 Roo.Toolbar.Item = function(el){
7756     var cfg = {};
7757     if (typeof (el.xtype) != 'undefined') {
7758         cfg = el;
7759         el = cfg.el;
7760     }
7761     
7762     this.el = Roo.getDom(el);
7763     this.id = Roo.id(this.el);
7764     this.hidden = false;
7765     
7766     this.addEvents({
7767          /**
7768              * @event render
7769              * Fires when the button is rendered
7770              * @param {Button} this
7771              */
7772         'render': true
7773     });
7774     Roo.Toolbar.Item.superclass.constructor.call(this,cfg);
7775 };
7776 Roo.extend(Roo.Toolbar.Item, Roo.util.Observable, {
7777 //Roo.Toolbar.Item.prototype = {
7778     
7779     /**
7780      * Get this item's HTML Element
7781      * @return {HTMLElement}
7782      */
7783     getEl : function(){
7784        return this.el;  
7785     },
7786
7787     // private
7788     render : function(td){
7789         
7790          this.td = td;
7791         td.appendChild(this.el);
7792         
7793         this.fireEvent('render', this);
7794     },
7795     
7796     /**
7797      * Removes and destroys this item.
7798      */
7799     destroy : function(){
7800         this.td.parentNode.removeChild(this.td);
7801     },
7802     
7803     /**
7804      * Shows this item.
7805      */
7806     show: function(){
7807         this.hidden = false;
7808         this.td.style.display = "";
7809     },
7810     
7811     /**
7812      * Hides this item.
7813      */
7814     hide: function(){
7815         this.hidden = true;
7816         this.td.style.display = "none";
7817     },
7818     
7819     /**
7820      * Convenience function for boolean show/hide.
7821      * @param {Boolean} visible true to show/false to hide
7822      */
7823     setVisible: function(visible){
7824         if(visible) {
7825             this.show();
7826         }else{
7827             this.hide();
7828         }
7829     },
7830     
7831     /**
7832      * Try to focus this item.
7833      */
7834     focus : function(){
7835         Roo.fly(this.el).focus();
7836     },
7837     
7838     /**
7839      * Disables this item.
7840      */
7841     disable : function(){
7842         Roo.fly(this.td).addClass("x-item-disabled");
7843         this.disabled = true;
7844         this.el.disabled = true;
7845     },
7846     
7847     /**
7848      * Enables this item.
7849      */
7850     enable : function(){
7851         Roo.fly(this.td).removeClass("x-item-disabled");
7852         this.disabled = false;
7853         this.el.disabled = false;
7854     }
7855 });
7856
7857
7858 /**
7859  * @class Roo.Toolbar.Separator
7860  * @extends Roo.Toolbar.Item
7861  * A simple toolbar separator class
7862  * @constructor
7863  * Creates a new Separator
7864  */
7865 Roo.Toolbar.Separator = function(cfg){
7866     
7867     var s = document.createElement("span");
7868     s.className = "ytb-sep";
7869     if (cfg) {
7870         cfg.el = s;
7871     }
7872     
7873     Roo.Toolbar.Separator.superclass.constructor.call(this, cfg || s);
7874 };
7875 Roo.extend(Roo.Toolbar.Separator, Roo.Toolbar.Item, {
7876     enable:Roo.emptyFn,
7877     disable:Roo.emptyFn,
7878     focus:Roo.emptyFn
7879 });
7880
7881 /**
7882  * @class Roo.Toolbar.Spacer
7883  * @extends Roo.Toolbar.Item
7884  * A simple element that adds extra horizontal space to a toolbar.
7885  * @constructor
7886  * Creates a new Spacer
7887  */
7888 Roo.Toolbar.Spacer = function(cfg){
7889     var s = document.createElement("div");
7890     s.className = "ytb-spacer";
7891     if (cfg) {
7892         cfg.el = s;
7893     }
7894     Roo.Toolbar.Spacer.superclass.constructor.call(this, cfg || s);
7895 };
7896 Roo.extend(Roo.Toolbar.Spacer, Roo.Toolbar.Item, {
7897     enable:Roo.emptyFn,
7898     disable:Roo.emptyFn,
7899     focus:Roo.emptyFn
7900 });
7901
7902 /**
7903  * @class Roo.Toolbar.Fill
7904  * @extends Roo.Toolbar.Spacer
7905  * A simple element that adds a greedy (100% width) horizontal space to a toolbar.
7906  * @constructor
7907  * Creates a new Spacer
7908  */
7909 Roo.Toolbar.Fill = Roo.extend(Roo.Toolbar.Spacer, {
7910     // private
7911     render : function(td){
7912         td.style.width = '100%';
7913         Roo.Toolbar.Fill.superclass.render.call(this, td);
7914     }
7915 });
7916
7917 /**
7918  * @class Roo.Toolbar.TextItem
7919  * @extends Roo.Toolbar.Item
7920  * A simple class that renders text directly into a toolbar.
7921  * @constructor
7922  * Creates a new TextItem
7923  * @param {String} text
7924  */
7925 Roo.Toolbar.TextItem = function(cfg){
7926     var  text = cfg || "";
7927     if (typeof(cfg) == 'object') {
7928         text = cfg.text || "";
7929     }  else {
7930         cfg = null;
7931     }
7932     var s = document.createElement("span");
7933     s.className = "ytb-text";
7934     s.innerHTML = text;
7935     if (cfg) {
7936         cfg.el  = s;
7937     }
7938     
7939     Roo.Toolbar.TextItem.superclass.constructor.call(this, cfg ||  s);
7940 };
7941 Roo.extend(Roo.Toolbar.TextItem, Roo.Toolbar.Item, {
7942     
7943      
7944     enable:Roo.emptyFn,
7945     disable:Roo.emptyFn,
7946     focus:Roo.emptyFn
7947 });
7948
7949 /**
7950  * @class Roo.Toolbar.Button
7951  * @extends Roo.Button
7952  * A button that renders into a toolbar.
7953  * @constructor
7954  * Creates a new Button
7955  * @param {Object} config A standard {@link Roo.Button} config object
7956  */
7957 Roo.Toolbar.Button = function(config){
7958     Roo.Toolbar.Button.superclass.constructor.call(this, null, config);
7959 };
7960 Roo.extend(Roo.Toolbar.Button, Roo.Button, {
7961     render : function(td){
7962         this.td = td;
7963         Roo.Toolbar.Button.superclass.render.call(this, td);
7964     },
7965     
7966     /**
7967      * Removes and destroys this button
7968      */
7969     destroy : function(){
7970         Roo.Toolbar.Button.superclass.destroy.call(this);
7971         this.td.parentNode.removeChild(this.td);
7972     },
7973     
7974     /**
7975      * Shows this button
7976      */
7977     show: function(){
7978         this.hidden = false;
7979         this.td.style.display = "";
7980     },
7981     
7982     /**
7983      * Hides this button
7984      */
7985     hide: function(){
7986         this.hidden = true;
7987         this.td.style.display = "none";
7988     },
7989
7990     /**
7991      * Disables this item
7992      */
7993     disable : function(){
7994         Roo.fly(this.td).addClass("x-item-disabled");
7995         this.disabled = true;
7996     },
7997
7998     /**
7999      * Enables this item
8000      */
8001     enable : function(){
8002         Roo.fly(this.td).removeClass("x-item-disabled");
8003         this.disabled = false;
8004     }
8005 });
8006 // backwards compat
8007 Roo.ToolbarButton = Roo.Toolbar.Button;
8008
8009 /**
8010  * @class Roo.Toolbar.SplitButton
8011  * @extends Roo.SplitButton
8012  * A menu button that renders into a toolbar.
8013  * @constructor
8014  * Creates a new SplitButton
8015  * @param {Object} config A standard {@link Roo.SplitButton} config object
8016  */
8017 Roo.Toolbar.SplitButton = function(config){
8018     Roo.Toolbar.SplitButton.superclass.constructor.call(this, null, config);
8019 };
8020 Roo.extend(Roo.Toolbar.SplitButton, Roo.SplitButton, {
8021     render : function(td){
8022         this.td = td;
8023         Roo.Toolbar.SplitButton.superclass.render.call(this, td);
8024     },
8025     
8026     /**
8027      * Removes and destroys this button
8028      */
8029     destroy : function(){
8030         Roo.Toolbar.SplitButton.superclass.destroy.call(this);
8031         this.td.parentNode.removeChild(this.td);
8032     },
8033     
8034     /**
8035      * Shows this button
8036      */
8037     show: function(){
8038         this.hidden = false;
8039         this.td.style.display = "";
8040     },
8041     
8042     /**
8043      * Hides this button
8044      */
8045     hide: function(){
8046         this.hidden = true;
8047         this.td.style.display = "none";
8048     }
8049 });
8050
8051 // backwards compat
8052 Roo.Toolbar.MenuButton = Roo.Toolbar.SplitButton;/*
8053  * Based on:
8054  * Ext JS Library 1.1.1
8055  * Copyright(c) 2006-2007, Ext JS, LLC.
8056  *
8057  * Originally Released Under LGPL - original licence link has changed is not relivant.
8058  *
8059  * Fork - LGPL
8060  * <script type="text/javascript">
8061  */
8062  
8063 /**
8064  * @class Roo.PagingToolbar
8065  * @extends Roo.Toolbar
8066  * A specialized toolbar that is bound to a {@link Roo.data.Store} and provides automatic paging controls.
8067  * @constructor
8068  * Create a new PagingToolbar
8069  * @param {Object} config The config object
8070  */
8071 Roo.PagingToolbar = function(el, ds, config)
8072 {
8073     // old args format still supported... - xtype is prefered..
8074     if (typeof(el) == 'object' && el.xtype) {
8075         // created from xtype...
8076         config = el;
8077         ds = el.dataSource;
8078         el = config.container;
8079     }
8080     var items = [];
8081     if (config.items) {
8082         items = config.items;
8083         config.items = [];
8084     }
8085     
8086     Roo.PagingToolbar.superclass.constructor.call(this, el, null, config);
8087     this.ds = ds;
8088     this.cursor = 0;
8089     this.renderButtons(this.el);
8090     this.bind(ds);
8091     
8092     // supprot items array.
8093    
8094     Roo.each(items, function(e) {
8095         this.add(Roo.factory(e));
8096     },this);
8097     
8098 };
8099
8100 Roo.extend(Roo.PagingToolbar, Roo.Toolbar, {
8101     /**
8102      * @cfg {Roo.data.Store} dataSource
8103      * The underlying data store providing the paged data
8104      */
8105     /**
8106      * @cfg {String/HTMLElement/Element} container
8107      * container The id or element that will contain the toolbar
8108      */
8109     /**
8110      * @cfg {Boolean} displayInfo
8111      * True to display the displayMsg (defaults to false)
8112      */
8113     /**
8114      * @cfg {Number} pageSize
8115      * The number of records to display per page (defaults to 20)
8116      */
8117     pageSize: 20,
8118     /**
8119      * @cfg {String} displayMsg
8120      * The paging status message to display (defaults to "Displaying {start} - {end} of {total}")
8121      */
8122     displayMsg : 'Displaying {0} - {1} of {2}',
8123     /**
8124      * @cfg {String} emptyMsg
8125      * The message to display when no records are found (defaults to "No data to display")
8126      */
8127     emptyMsg : 'No data to display',
8128     /**
8129      * Customizable piece of the default paging text (defaults to "Page")
8130      * @type String
8131      */
8132     beforePageText : "Page",
8133     /**
8134      * Customizable piece of the default paging text (defaults to "of %0")
8135      * @type String
8136      */
8137     afterPageText : "of {0}",
8138     /**
8139      * Customizable piece of the default paging text (defaults to "First Page")
8140      * @type String
8141      */
8142     firstText : "First Page",
8143     /**
8144      * Customizable piece of the default paging text (defaults to "Previous Page")
8145      * @type String
8146      */
8147     prevText : "Previous Page",
8148     /**
8149      * Customizable piece of the default paging text (defaults to "Next Page")
8150      * @type String
8151      */
8152     nextText : "Next Page",
8153     /**
8154      * Customizable piece of the default paging text (defaults to "Last Page")
8155      * @type String
8156      */
8157     lastText : "Last Page",
8158     /**
8159      * Customizable piece of the default paging text (defaults to "Refresh")
8160      * @type String
8161      */
8162     refreshText : "Refresh",
8163
8164     // private
8165     renderButtons : function(el){
8166         Roo.PagingToolbar.superclass.render.call(this, el);
8167         this.first = this.addButton({
8168             tooltip: this.firstText,
8169             cls: "x-btn-icon x-grid-page-first",
8170             disabled: true,
8171             handler: this.onClick.createDelegate(this, ["first"])
8172         });
8173         this.prev = this.addButton({
8174             tooltip: this.prevText,
8175             cls: "x-btn-icon x-grid-page-prev",
8176             disabled: true,
8177             handler: this.onClick.createDelegate(this, ["prev"])
8178         });
8179         //this.addSeparator();
8180         this.add(this.beforePageText);
8181         this.field = Roo.get(this.addDom({
8182            tag: "input",
8183            type: "text",
8184            size: "3",
8185            value: "1",
8186            cls: "x-grid-page-number"
8187         }).el);
8188         this.field.on("keydown", this.onPagingKeydown, this);
8189         this.field.on("focus", function(){this.dom.select();});
8190         this.afterTextEl = this.addText(String.format(this.afterPageText, 1));
8191         this.field.setHeight(18);
8192         //this.addSeparator();
8193         this.next = this.addButton({
8194             tooltip: this.nextText,
8195             cls: "x-btn-icon x-grid-page-next",
8196             disabled: true,
8197             handler: this.onClick.createDelegate(this, ["next"])
8198         });
8199         this.last = this.addButton({
8200             tooltip: this.lastText,
8201             cls: "x-btn-icon x-grid-page-last",
8202             disabled: true,
8203             handler: this.onClick.createDelegate(this, ["last"])
8204         });
8205         //this.addSeparator();
8206         this.loading = this.addButton({
8207             tooltip: this.refreshText,
8208             cls: "x-btn-icon x-grid-loading",
8209             handler: this.onClick.createDelegate(this, ["refresh"])
8210         });
8211
8212         if(this.displayInfo){
8213             this.displayEl = Roo.fly(this.el.dom.firstChild).createChild({cls:'x-paging-info'});
8214         }
8215     },
8216
8217     // private
8218     updateInfo : function(){
8219         if(this.displayEl){
8220             var count = this.ds.getCount();
8221             var msg = count == 0 ?
8222                 this.emptyMsg :
8223                 String.format(
8224                     this.displayMsg,
8225                     this.cursor+1, this.cursor+count, this.ds.getTotalCount()    
8226                 );
8227             this.displayEl.update(msg);
8228         }
8229     },
8230
8231     // private
8232     onLoad : function(ds, r, o){
8233        this.cursor = o.params ? o.params.start : 0;
8234        var d = this.getPageData(), ap = d.activePage, ps = d.pages;
8235
8236        this.afterTextEl.el.innerHTML = String.format(this.afterPageText, d.pages);
8237        this.field.dom.value = ap;
8238        this.first.setDisabled(ap == 1);
8239        this.prev.setDisabled(ap == 1);
8240        this.next.setDisabled(ap == ps);
8241        this.last.setDisabled(ap == ps);
8242        this.loading.enable();
8243        this.updateInfo();
8244     },
8245
8246     // private
8247     getPageData : function(){
8248         var total = this.ds.getTotalCount();
8249         return {
8250             total : total,
8251             activePage : Math.ceil((this.cursor+this.pageSize)/this.pageSize),
8252             pages :  total < this.pageSize ? 1 : Math.ceil(total/this.pageSize)
8253         };
8254     },
8255
8256     // private
8257     onLoadError : function(){
8258         this.loading.enable();
8259     },
8260
8261     // private
8262     onPagingKeydown : function(e){
8263         var k = e.getKey();
8264         var d = this.getPageData();
8265         if(k == e.RETURN){
8266             var v = this.field.dom.value, pageNum;
8267             if(!v || isNaN(pageNum = parseInt(v, 10))){
8268                 this.field.dom.value = d.activePage;
8269                 return;
8270             }
8271             pageNum = Math.min(Math.max(1, pageNum), d.pages) - 1;
8272             this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
8273             e.stopEvent();
8274         }
8275         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))
8276         {
8277           var pageNum = (k == e.HOME || (k == e.DOWN && e.ctrlKey) || (k == e.LEFT && e.ctrlKey) || (k == e.PAGEDOWN && e.ctrlKey)) ? 1 : d.pages;
8278           this.field.dom.value = pageNum;
8279           this.ds.load({params:{start: (pageNum - 1) * this.pageSize, limit: this.pageSize}});
8280           e.stopEvent();
8281         }
8282         else if(k == e.UP || k == e.RIGHT || k == e.PAGEUP || k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN)
8283         {
8284           var v = this.field.dom.value, pageNum; 
8285           var increment = (e.shiftKey) ? 10 : 1;
8286           if(k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN) {
8287             increment *= -1;
8288           }
8289           if(!v || isNaN(pageNum = parseInt(v, 10))) {
8290             this.field.dom.value = d.activePage;
8291             return;
8292           }
8293           else if(parseInt(v, 10) + increment >= 1 & parseInt(v, 10) + increment <= d.pages)
8294           {
8295             this.field.dom.value = parseInt(v, 10) + increment;
8296             pageNum = Math.min(Math.max(1, pageNum + increment), d.pages) - 1;
8297             this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
8298           }
8299           e.stopEvent();
8300         }
8301     },
8302
8303     // private
8304     beforeLoad : function(){
8305         if(this.loading){
8306             this.loading.disable();
8307         }
8308     },
8309
8310     // private
8311     onClick : function(which){
8312         var ds = this.ds;
8313         switch(which){
8314             case "first":
8315                 ds.load({params:{start: 0, limit: this.pageSize}});
8316             break;
8317             case "prev":
8318                 ds.load({params:{start: Math.max(0, this.cursor-this.pageSize), limit: this.pageSize}});
8319             break;
8320             case "next":
8321                 ds.load({params:{start: this.cursor+this.pageSize, limit: this.pageSize}});
8322             break;
8323             case "last":
8324                 var total = ds.getTotalCount();
8325                 var extra = total % this.pageSize;
8326                 var lastStart = extra ? (total - extra) : total-this.pageSize;
8327                 ds.load({params:{start: lastStart, limit: this.pageSize}});
8328             break;
8329             case "refresh":
8330                 ds.load({params:{start: this.cursor, limit: this.pageSize}});
8331             break;
8332         }
8333     },
8334
8335     /**
8336      * Unbinds the paging toolbar from the specified {@link Roo.data.Store}
8337      * @param {Roo.data.Store} store The data store to unbind
8338      */
8339     unbind : function(ds){
8340         ds.un("beforeload", this.beforeLoad, this);
8341         ds.un("load", this.onLoad, this);
8342         ds.un("loadexception", this.onLoadError, this);
8343         ds.un("remove", this.updateInfo, this);
8344         ds.un("add", this.updateInfo, this);
8345         this.ds = undefined;
8346     },
8347
8348     /**
8349      * Binds the paging toolbar to the specified {@link Roo.data.Store}
8350      * @param {Roo.data.Store} store The data store to bind
8351      */
8352     bind : function(ds){
8353         ds.on("beforeload", this.beforeLoad, this);
8354         ds.on("load", this.onLoad, this);
8355         ds.on("loadexception", this.onLoadError, this);
8356         ds.on("remove", this.updateInfo, this);
8357         ds.on("add", this.updateInfo, this);
8358         this.ds = ds;
8359     }
8360 });/*
8361  * Based on:
8362  * Ext JS Library 1.1.1
8363  * Copyright(c) 2006-2007, Ext JS, LLC.
8364  *
8365  * Originally Released Under LGPL - original licence link has changed is not relivant.
8366  *
8367  * Fork - LGPL
8368  * <script type="text/javascript">
8369  */
8370
8371 /**
8372  * @class Roo.Resizable
8373  * @extends Roo.util.Observable
8374  * <p>Applies drag handles to an element to make it resizable. The drag handles are inserted into the element
8375  * and positioned absolute. Some elements, such as a textarea or image, don't support this. To overcome that, you can wrap
8376  * 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
8377  * the element will be wrapped for you automatically.</p>
8378  * <p>Here is the list of valid resize handles:</p>
8379  * <pre>
8380 Value   Description
8381 ------  -------------------
8382  'n'     north
8383  's'     south
8384  'e'     east
8385  'w'     west
8386  'nw'    northwest
8387  'sw'    southwest
8388  'se'    southeast
8389  'ne'    northeast
8390  'hd'    horizontal drag
8391  'all'   all
8392 </pre>
8393  * <p>Here's an example showing the creation of a typical Resizable:</p>
8394  * <pre><code>
8395 var resizer = new Roo.Resizable("element-id", {
8396     handles: 'all',
8397     minWidth: 200,
8398     minHeight: 100,
8399     maxWidth: 500,
8400     maxHeight: 400,
8401     pinned: true
8402 });
8403 resizer.on("resize", myHandler);
8404 </code></pre>
8405  * <p>To hide a particular handle, set its display to none in CSS, or through script:<br>
8406  * resizer.east.setDisplayed(false);</p>
8407  * @cfg {Boolean/String/Element} resizeChild True to resize the first child, or id/element to resize (defaults to false)
8408  * @cfg {Array/String} adjustments String "auto" or an array [width, height] with values to be <b>added</b> to the
8409  * resize operation's new size (defaults to [0, 0])
8410  * @cfg {Number} minWidth The minimum width for the element (defaults to 5)
8411  * @cfg {Number} minHeight The minimum height for the element (defaults to 5)
8412  * @cfg {Number} maxWidth The maximum width for the element (defaults to 10000)
8413  * @cfg {Number} maxHeight The maximum height for the element (defaults to 10000)
8414  * @cfg {Boolean} enabled False to disable resizing (defaults to true)
8415  * @cfg {Boolean} wrap True to wrap an element with a div if needed (required for textareas and images, defaults to false)
8416  * @cfg {Number} width The width of the element in pixels (defaults to null)
8417  * @cfg {Number} height The height of the element in pixels (defaults to null)
8418  * @cfg {Boolean} animate True to animate the resize (not compatible with dynamic sizing, defaults to false)
8419  * @cfg {Number} duration Animation duration if animate = true (defaults to .35)
8420  * @cfg {Boolean} dynamic True to resize the element while dragging instead of using a proxy (defaults to false)
8421  * @cfg {String} handles String consisting of the resize handles to display (defaults to undefined)
8422  * @cfg {Boolean} multiDirectional <b>Deprecated</b>.  The old style of adding multi-direction resize handles, deprecated
8423  * in favor of the handles config option (defaults to false)
8424  * @cfg {Boolean} disableTrackOver True to disable mouse tracking. This is only applied at config time. (defaults to false)
8425  * @cfg {String} easing Animation easing if animate = true (defaults to 'easingOutStrong')
8426  * @cfg {Number} widthIncrement The increment to snap the width resize in pixels (dynamic must be true, defaults to 0)
8427  * @cfg {Number} heightIncrement The increment to snap the height resize in pixels (dynamic must be true, defaults to 0)
8428  * @cfg {Boolean} pinned True to ensure that the resize handles are always visible, false to display them only when the
8429  * user mouses over the resizable borders. This is only applied at config time. (defaults to false)
8430  * @cfg {Boolean} preserveRatio True to preserve the original ratio between height and width during resize (defaults to false)
8431  * @cfg {Boolean} transparent True for transparent handles. This is only applied at config time. (defaults to false)
8432  * @cfg {Number} minX The minimum allowed page X for the element (only used for west resizing, defaults to 0)
8433  * @cfg {Number} minY The minimum allowed page Y for the element (only used for north resizing, defaults to 0)
8434  * @cfg {Boolean} draggable Convenience to initialize drag drop (defaults to false)
8435  * @constructor
8436  * Create a new resizable component
8437  * @param {String/HTMLElement/Roo.Element} el The id or element to resize
8438  * @param {Object} config configuration options
8439   */
8440 Roo.Resizable = function(el, config)
8441 {
8442     this.el = Roo.get(el);
8443
8444     if(config && config.wrap){
8445         config.resizeChild = this.el;
8446         this.el = this.el.wrap(typeof config.wrap == "object" ? config.wrap : {cls:"xresizable-wrap"});
8447         this.el.id = this.el.dom.id = config.resizeChild.id + "-rzwrap";
8448         this.el.setStyle("overflow", "hidden");
8449         this.el.setPositioning(config.resizeChild.getPositioning());
8450         config.resizeChild.clearPositioning();
8451         if(!config.width || !config.height){
8452             var csize = config.resizeChild.getSize();
8453             this.el.setSize(csize.width, csize.height);
8454         }
8455         if(config.pinned && !config.adjustments){
8456             config.adjustments = "auto";
8457         }
8458     }
8459
8460     this.proxy = this.el.createProxy({tag: "div", cls: "x-resizable-proxy", id: this.el.id + "-rzproxy"});
8461     this.proxy.unselectable();
8462     this.proxy.enableDisplayMode('block');
8463
8464     Roo.apply(this, config);
8465
8466     if(this.pinned){
8467         this.disableTrackOver = true;
8468         this.el.addClass("x-resizable-pinned");
8469     }
8470     // if the element isn't positioned, make it relative
8471     var position = this.el.getStyle("position");
8472     if(position != "absolute" && position != "fixed"){
8473         this.el.setStyle("position", "relative");
8474     }
8475     if(!this.handles){ // no handles passed, must be legacy style
8476         this.handles = 's,e,se';
8477         if(this.multiDirectional){
8478             this.handles += ',n,w';
8479         }
8480     }
8481     if(this.handles == "all"){
8482         this.handles = "n s e w ne nw se sw";
8483     }
8484     var hs = this.handles.split(/\s*?[,;]\s*?| /);
8485     var ps = Roo.Resizable.positions;
8486     for(var i = 0, len = hs.length; i < len; i++){
8487         if(hs[i] && ps[hs[i]]){
8488             var pos = ps[hs[i]];
8489             this[pos] = new Roo.Resizable.Handle(this, pos, this.disableTrackOver, this.transparent);
8490         }
8491     }
8492     // legacy
8493     this.corner = this.southeast;
8494     
8495     // updateBox = the box can move..
8496     if(this.handles.indexOf("n") != -1 || this.handles.indexOf("w") != -1 || this.handles.indexOf("hd") != -1) {
8497         this.updateBox = true;
8498     }
8499
8500     this.activeHandle = null;
8501
8502     if(this.resizeChild){
8503         if(typeof this.resizeChild == "boolean"){
8504             this.resizeChild = Roo.get(this.el.dom.firstChild, true);
8505         }else{
8506             this.resizeChild = Roo.get(this.resizeChild, true);
8507         }
8508     }
8509     
8510     if(this.adjustments == "auto"){
8511         var rc = this.resizeChild;
8512         var hw = this.west, he = this.east, hn = this.north, hs = this.south;
8513         if(rc && (hw || hn)){
8514             rc.position("relative");
8515             rc.setLeft(hw ? hw.el.getWidth() : 0);
8516             rc.setTop(hn ? hn.el.getHeight() : 0);
8517         }
8518         this.adjustments = [
8519             (he ? -he.el.getWidth() : 0) + (hw ? -hw.el.getWidth() : 0),
8520             (hn ? -hn.el.getHeight() : 0) + (hs ? -hs.el.getHeight() : 0) -1
8521         ];
8522     }
8523
8524     if(this.draggable){
8525         this.dd = this.dynamic ?
8526             this.el.initDD(null) : this.el.initDDProxy(null, {dragElId: this.proxy.id});
8527         this.dd.setHandleElId(this.resizeChild ? this.resizeChild.id : this.el.id);
8528     }
8529
8530     // public events
8531     this.addEvents({
8532         /**
8533          * @event beforeresize
8534          * Fired before resize is allowed. Set enabled to false to cancel resize.
8535          * @param {Roo.Resizable} this
8536          * @param {Roo.EventObject} e The mousedown event
8537          */
8538         "beforeresize" : true,
8539         /**
8540          * @event resizing
8541          * Fired a resizing.
8542          * @param {Roo.Resizable} this
8543          * @param {Number} x The new x position
8544          * @param {Number} y The new y position
8545          * @param {Number} w The new w width
8546          * @param {Number} h The new h hight
8547          * @param {Roo.EventObject} e The mouseup event
8548          */
8549         "resizing" : true,
8550         /**
8551          * @event resize
8552          * Fired after a resize.
8553          * @param {Roo.Resizable} this
8554          * @param {Number} width The new width
8555          * @param {Number} height The new height
8556          * @param {Roo.EventObject} e The mouseup event
8557          */
8558         "resize" : true
8559     });
8560
8561     if(this.width !== null && this.height !== null){
8562         this.resizeTo(this.width, this.height);
8563     }else{
8564         this.updateChildSize();
8565     }
8566     if(Roo.isIE){
8567         this.el.dom.style.zoom = 1;
8568     }
8569     Roo.Resizable.superclass.constructor.call(this);
8570 };
8571
8572 Roo.extend(Roo.Resizable, Roo.util.Observable, {
8573         resizeChild : false,
8574         adjustments : [0, 0],
8575         minWidth : 5,
8576         minHeight : 5,
8577         maxWidth : 10000,
8578         maxHeight : 10000,
8579         enabled : true,
8580         animate : false,
8581         duration : .35,
8582         dynamic : false,
8583         handles : false,
8584         multiDirectional : false,
8585         disableTrackOver : false,
8586         easing : 'easeOutStrong',
8587         widthIncrement : 0,
8588         heightIncrement : 0,
8589         pinned : false,
8590         width : null,
8591         height : null,
8592         preserveRatio : false,
8593         transparent: false,
8594         minX: 0,
8595         minY: 0,
8596         draggable: false,
8597
8598         /**
8599          * @cfg {String/HTMLElement/Element} constrainTo Constrain the resize to a particular element
8600          */
8601         constrainTo: undefined,
8602         /**
8603          * @cfg {Roo.lib.Region} resizeRegion Constrain the resize to a particular region
8604          */
8605         resizeRegion: undefined,
8606
8607
8608     /**
8609      * Perform a manual resize
8610      * @param {Number} width
8611      * @param {Number} height
8612      */
8613     resizeTo : function(width, height){
8614         this.el.setSize(width, height);
8615         this.updateChildSize();
8616         this.fireEvent("resize", this, width, height, null);
8617     },
8618
8619     // private
8620     startSizing : function(e, handle){
8621         this.fireEvent("beforeresize", this, e);
8622         if(this.enabled){ // 2nd enabled check in case disabled before beforeresize handler
8623
8624             if(!this.overlay){
8625                 this.overlay = this.el.createProxy({tag: "div", cls: "x-resizable-overlay", html: "&#160;"});
8626                 this.overlay.unselectable();
8627                 this.overlay.enableDisplayMode("block");
8628                 this.overlay.on("mousemove", this.onMouseMove, this);
8629                 this.overlay.on("mouseup", this.onMouseUp, this);
8630             }
8631             this.overlay.setStyle("cursor", handle.el.getStyle("cursor"));
8632
8633             this.resizing = true;
8634             this.startBox = this.el.getBox();
8635             this.startPoint = e.getXY();
8636             this.offsets = [(this.startBox.x + this.startBox.width) - this.startPoint[0],
8637                             (this.startBox.y + this.startBox.height) - this.startPoint[1]];
8638
8639             this.overlay.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
8640             this.overlay.show();
8641
8642             if(this.constrainTo) {
8643                 var ct = Roo.get(this.constrainTo);
8644                 this.resizeRegion = ct.getRegion().adjust(
8645                     ct.getFrameWidth('t'),
8646                     ct.getFrameWidth('l'),
8647                     -ct.getFrameWidth('b'),
8648                     -ct.getFrameWidth('r')
8649                 );
8650             }
8651
8652             this.proxy.setStyle('visibility', 'hidden'); // workaround display none
8653             this.proxy.show();
8654             this.proxy.setBox(this.startBox);
8655             if(!this.dynamic){
8656                 this.proxy.setStyle('visibility', 'visible');
8657             }
8658         }
8659     },
8660
8661     // private
8662     onMouseDown : function(handle, e){
8663         if(this.enabled){
8664             e.stopEvent();
8665             this.activeHandle = handle;
8666             this.startSizing(e, handle);
8667         }
8668     },
8669
8670     // private
8671     onMouseUp : function(e){
8672         var size = this.resizeElement();
8673         this.resizing = false;
8674         this.handleOut();
8675         this.overlay.hide();
8676         this.proxy.hide();
8677         this.fireEvent("resize", this, size.width, size.height, e);
8678     },
8679
8680     // private
8681     updateChildSize : function(){
8682         
8683         if(this.resizeChild){
8684             var el = this.el;
8685             var child = this.resizeChild;
8686             var adj = this.adjustments;
8687             if(el.dom.offsetWidth){
8688                 var b = el.getSize(true);
8689                 child.setSize(b.width+adj[0], b.height+adj[1]);
8690             }
8691             // Second call here for IE
8692             // The first call enables instant resizing and
8693             // the second call corrects scroll bars if they
8694             // exist
8695             if(Roo.isIE){
8696                 setTimeout(function(){
8697                     if(el.dom.offsetWidth){
8698                         var b = el.getSize(true);
8699                         child.setSize(b.width+adj[0], b.height+adj[1]);
8700                     }
8701                 }, 10);
8702             }
8703         }
8704     },
8705
8706     // private
8707     snap : function(value, inc, min){
8708         if(!inc || !value) {
8709             return value;
8710         }
8711         var newValue = value;
8712         var m = value % inc;
8713         if(m > 0){
8714             if(m > (inc/2)){
8715                 newValue = value + (inc-m);
8716             }else{
8717                 newValue = value - m;
8718             }
8719         }
8720         return Math.max(min, newValue);
8721     },
8722
8723     // private
8724     resizeElement : function(){
8725         var box = this.proxy.getBox();
8726         if(this.updateBox){
8727             this.el.setBox(box, false, this.animate, this.duration, null, this.easing);
8728         }else{
8729             this.el.setSize(box.width, box.height, this.animate, this.duration, null, this.easing);
8730         }
8731         this.updateChildSize();
8732         if(!this.dynamic){
8733             this.proxy.hide();
8734         }
8735         return box;
8736     },
8737
8738     // private
8739     constrain : function(v, diff, m, mx){
8740         if(v - diff < m){
8741             diff = v - m;
8742         }else if(v - diff > mx){
8743             diff = mx - v;
8744         }
8745         return diff;
8746     },
8747
8748     // private
8749     onMouseMove : function(e){
8750         
8751         if(this.enabled){
8752             try{// try catch so if something goes wrong the user doesn't get hung
8753
8754             if(this.resizeRegion && !this.resizeRegion.contains(e.getPoint())) {
8755                 return;
8756             }
8757
8758             //var curXY = this.startPoint;
8759             var curSize = this.curSize || this.startBox;
8760             var x = this.startBox.x, y = this.startBox.y;
8761             var ox = x, oy = y;
8762             var w = curSize.width, h = curSize.height;
8763             var ow = w, oh = h;
8764             var mw = this.minWidth, mh = this.minHeight;
8765             var mxw = this.maxWidth, mxh = this.maxHeight;
8766             var wi = this.widthIncrement;
8767             var hi = this.heightIncrement;
8768
8769             var eventXY = e.getXY();
8770             var diffX = -(this.startPoint[0] - Math.max(this.minX, eventXY[0]));
8771             var diffY = -(this.startPoint[1] - Math.max(this.minY, eventXY[1]));
8772
8773             var pos = this.activeHandle.position;
8774
8775             switch(pos){
8776                 case "east":
8777                     w += diffX;
8778                     w = Math.min(Math.max(mw, w), mxw);
8779                     break;
8780              
8781                 case "south":
8782                     h += diffY;
8783                     h = Math.min(Math.max(mh, h), mxh);
8784                     break;
8785                 case "southeast":
8786                     w += diffX;
8787                     h += diffY;
8788                     w = Math.min(Math.max(mw, w), mxw);
8789                     h = Math.min(Math.max(mh, h), mxh);
8790                     break;
8791                 case "north":
8792                     diffY = this.constrain(h, diffY, mh, mxh);
8793                     y += diffY;
8794                     h -= diffY;
8795                     break;
8796                 case "hdrag":
8797                     
8798                     if (wi) {
8799                         var adiffX = Math.abs(diffX);
8800                         var sub = (adiffX % wi); // how much 
8801                         if (sub > (wi/2)) { // far enough to snap
8802                             diffX = (diffX > 0) ? diffX-sub + wi : diffX+sub - wi;
8803                         } else {
8804                             // remove difference.. 
8805                             diffX = (diffX > 0) ? diffX-sub : diffX+sub;
8806                         }
8807                     }
8808                     x += diffX;
8809                     x = Math.max(this.minX, x);
8810                     break;
8811                 case "west":
8812                     diffX = this.constrain(w, diffX, mw, mxw);
8813                     x += diffX;
8814                     w -= diffX;
8815                     break;
8816                 case "northeast":
8817                     w += diffX;
8818                     w = Math.min(Math.max(mw, w), mxw);
8819                     diffY = this.constrain(h, diffY, mh, mxh);
8820                     y += diffY;
8821                     h -= diffY;
8822                     break;
8823                 case "northwest":
8824                     diffX = this.constrain(w, diffX, mw, mxw);
8825                     diffY = this.constrain(h, diffY, mh, mxh);
8826                     y += diffY;
8827                     h -= diffY;
8828                     x += diffX;
8829                     w -= diffX;
8830                     break;
8831                case "southwest":
8832                     diffX = this.constrain(w, diffX, mw, mxw);
8833                     h += diffY;
8834                     h = Math.min(Math.max(mh, h), mxh);
8835                     x += diffX;
8836                     w -= diffX;
8837                     break;
8838             }
8839
8840             var sw = this.snap(w, wi, mw);
8841             var sh = this.snap(h, hi, mh);
8842             if(sw != w || sh != h){
8843                 switch(pos){
8844                     case "northeast":
8845                         y -= sh - h;
8846                     break;
8847                     case "north":
8848                         y -= sh - h;
8849                         break;
8850                     case "southwest":
8851                         x -= sw - w;
8852                     break;
8853                     case "west":
8854                         x -= sw - w;
8855                         break;
8856                     case "northwest":
8857                         x -= sw - w;
8858                         y -= sh - h;
8859                     break;
8860                 }
8861                 w = sw;
8862                 h = sh;
8863             }
8864
8865             if(this.preserveRatio){
8866                 switch(pos){
8867                     case "southeast":
8868                     case "east":
8869                         h = oh * (w/ow);
8870                         h = Math.min(Math.max(mh, h), mxh);
8871                         w = ow * (h/oh);
8872                        break;
8873                     case "south":
8874                         w = ow * (h/oh);
8875                         w = Math.min(Math.max(mw, w), mxw);
8876                         h = oh * (w/ow);
8877                         break;
8878                     case "northeast":
8879                         w = ow * (h/oh);
8880                         w = Math.min(Math.max(mw, w), mxw);
8881                         h = oh * (w/ow);
8882                     break;
8883                     case "north":
8884                         var tw = w;
8885                         w = ow * (h/oh);
8886                         w = Math.min(Math.max(mw, w), mxw);
8887                         h = oh * (w/ow);
8888                         x += (tw - w) / 2;
8889                         break;
8890                     case "southwest":
8891                         h = oh * (w/ow);
8892                         h = Math.min(Math.max(mh, h), mxh);
8893                         var tw = w;
8894                         w = ow * (h/oh);
8895                         x += tw - w;
8896                         break;
8897                     case "west":
8898                         var th = h;
8899                         h = oh * (w/ow);
8900                         h = Math.min(Math.max(mh, h), mxh);
8901                         y += (th - h) / 2;
8902                         var tw = w;
8903                         w = ow * (h/oh);
8904                         x += tw - w;
8905                        break;
8906                     case "northwest":
8907                         var tw = w;
8908                         var th = h;
8909                         h = oh * (w/ow);
8910                         h = Math.min(Math.max(mh, h), mxh);
8911                         w = ow * (h/oh);
8912                         y += th - h;
8913                         x += tw - w;
8914                        break;
8915
8916                 }
8917             }
8918             if (pos == 'hdrag') {
8919                 w = ow;
8920             }
8921             this.proxy.setBounds(x, y, w, h);
8922             if(this.dynamic){
8923                 this.resizeElement();
8924             }
8925             }catch(e){}
8926         }
8927         this.fireEvent("resizing", this, x, y, w, h, e);
8928     },
8929
8930     // private
8931     handleOver : function(){
8932         if(this.enabled){
8933             this.el.addClass("x-resizable-over");
8934         }
8935     },
8936
8937     // private
8938     handleOut : function(){
8939         if(!this.resizing){
8940             this.el.removeClass("x-resizable-over");
8941         }
8942     },
8943
8944     /**
8945      * Returns the element this component is bound to.
8946      * @return {Roo.Element}
8947      */
8948     getEl : function(){
8949         return this.el;
8950     },
8951
8952     /**
8953      * Returns the resizeChild element (or null).
8954      * @return {Roo.Element}
8955      */
8956     getResizeChild : function(){
8957         return this.resizeChild;
8958     },
8959     groupHandler : function()
8960     {
8961         
8962     },
8963     /**
8964      * Destroys this resizable. If the element was wrapped and
8965      * removeEl is not true then the element remains.
8966      * @param {Boolean} removeEl (optional) true to remove the element from the DOM
8967      */
8968     destroy : function(removeEl){
8969         this.proxy.remove();
8970         if(this.overlay){
8971             this.overlay.removeAllListeners();
8972             this.overlay.remove();
8973         }
8974         var ps = Roo.Resizable.positions;
8975         for(var k in ps){
8976             if(typeof ps[k] != "function" && this[ps[k]]){
8977                 var h = this[ps[k]];
8978                 h.el.removeAllListeners();
8979                 h.el.remove();
8980             }
8981         }
8982         if(removeEl){
8983             this.el.update("");
8984             this.el.remove();
8985         }
8986     }
8987 });
8988
8989 // private
8990 // hash to map config positions to true positions
8991 Roo.Resizable.positions = {
8992     n: "north", s: "south", e: "east", w: "west", se: "southeast", sw: "southwest", nw: "northwest", ne: "northeast", 
8993     hd: "hdrag"
8994 };
8995
8996 // private
8997 Roo.Resizable.Handle = function(rz, pos, disableTrackOver, transparent){
8998     if(!this.tpl){
8999         // only initialize the template if resizable is used
9000         var tpl = Roo.DomHelper.createTemplate(
9001             {tag: "div", cls: "x-resizable-handle x-resizable-handle-{0}"}
9002         );
9003         tpl.compile();
9004         Roo.Resizable.Handle.prototype.tpl = tpl;
9005     }
9006     this.position = pos;
9007     this.rz = rz;
9008     // show north drag fro topdra
9009     var handlepos = pos == 'hdrag' ? 'north' : pos;
9010     
9011     this.el = this.tpl.append(rz.el.dom, [handlepos], true);
9012     if (pos == 'hdrag') {
9013         this.el.setStyle('cursor', 'pointer');
9014     }
9015     this.el.unselectable();
9016     if(transparent){
9017         this.el.setOpacity(0);
9018     }
9019     this.el.on("mousedown", this.onMouseDown, this);
9020     if(!disableTrackOver){
9021         this.el.on("mouseover", this.onMouseOver, this);
9022         this.el.on("mouseout", this.onMouseOut, this);
9023     }
9024 };
9025
9026 // private
9027 Roo.Resizable.Handle.prototype = {
9028     afterResize : function(rz){
9029         Roo.log('after?');
9030         // do nothing
9031     },
9032     // private
9033     onMouseDown : function(e){
9034         this.rz.onMouseDown(this, e);
9035     },
9036     // private
9037     onMouseOver : function(e){
9038         this.rz.handleOver(this, e);
9039     },
9040     // private
9041     onMouseOut : function(e){
9042         this.rz.handleOut(this, e);
9043     }
9044 };/*
9045  * Based on:
9046  * Ext JS Library 1.1.1
9047  * Copyright(c) 2006-2007, Ext JS, LLC.
9048  *
9049  * Originally Released Under LGPL - original licence link has changed is not relivant.
9050  *
9051  * Fork - LGPL
9052  * <script type="text/javascript">
9053  */
9054
9055 /**
9056  * @class Roo.Editor
9057  * @extends Roo.Component
9058  * A base editor field that handles displaying/hiding on demand and has some built-in sizing and event handling logic.
9059  * @constructor
9060  * Create a new Editor
9061  * @param {Roo.form.Field} field The Field object (or descendant)
9062  * @param {Object} config The config object
9063  */
9064 Roo.Editor = function(field, config){
9065     Roo.Editor.superclass.constructor.call(this, config);
9066     this.field = field;
9067     this.addEvents({
9068         /**
9069              * @event beforestartedit
9070              * Fires when editing is initiated, but before the value changes.  Editing can be canceled by returning
9071              * false from the handler of this event.
9072              * @param {Editor} this
9073              * @param {Roo.Element} boundEl The underlying element bound to this editor
9074              * @param {Mixed} value The field value being set
9075              */
9076         "beforestartedit" : true,
9077         /**
9078              * @event startedit
9079              * Fires when this editor is displayed
9080              * @param {Roo.Element} boundEl The underlying element bound to this editor
9081              * @param {Mixed} value The starting field value
9082              */
9083         "startedit" : true,
9084         /**
9085              * @event beforecomplete
9086              * Fires after a change has been made to the field, but before the change is reflected in the underlying
9087              * field.  Saving the change to the field can be canceled by returning false from the handler of this event.
9088              * Note that if the value has not changed and ignoreNoChange = true, the editing will still end but this
9089              * event will not fire since no edit actually occurred.
9090              * @param {Editor} this
9091              * @param {Mixed} value The current field value
9092              * @param {Mixed} startValue The original field value
9093              */
9094         "beforecomplete" : true,
9095         /**
9096              * @event complete
9097              * Fires after editing is complete and any changed value has been written to the underlying field.
9098              * @param {Editor} this
9099              * @param {Mixed} value The current field value
9100              * @param {Mixed} startValue The original field value
9101              */
9102         "complete" : true,
9103         /**
9104          * @event specialkey
9105          * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed.  You can check
9106          * {@link Roo.EventObject#getKey} to determine which key was pressed.
9107          * @param {Roo.form.Field} this
9108          * @param {Roo.EventObject} e The event object
9109          */
9110         "specialkey" : true
9111     });
9112 };
9113
9114 Roo.extend(Roo.Editor, Roo.Component, {
9115     /**
9116      * @cfg {Boolean/String} autosize
9117      * True for the editor to automatically adopt the size of the underlying field, "width" to adopt the width only,
9118      * or "height" to adopt the height only (defaults to false)
9119      */
9120     /**
9121      * @cfg {Boolean} revertInvalid
9122      * True to automatically revert the field value and cancel the edit when the user completes an edit and the field
9123      * validation fails (defaults to true)
9124      */
9125     /**
9126      * @cfg {Boolean} ignoreNoChange
9127      * True to skip the the edit completion process (no save, no events fired) if the user completes an edit and
9128      * the value has not changed (defaults to false).  Applies only to string values - edits for other data types
9129      * will never be ignored.
9130      */
9131     /**
9132      * @cfg {Boolean} hideEl
9133      * False to keep the bound element visible while the editor is displayed (defaults to true)
9134      */
9135     /**
9136      * @cfg {Mixed} value
9137      * The data value of the underlying field (defaults to "")
9138      */
9139     value : "",
9140     /**
9141      * @cfg {String} alignment
9142      * The position to align to (see {@link Roo.Element#alignTo} for more details, defaults to "c-c?").
9143      */
9144     alignment: "c-c?",
9145     /**
9146      * @cfg {Boolean/String} shadow "sides" for sides/bottom only, "frame" for 4-way shadow, and "drop"
9147      * for bottom-right shadow (defaults to "frame")
9148      */
9149     shadow : "frame",
9150     /**
9151      * @cfg {Boolean} constrain True to constrain the editor to the viewport
9152      */
9153     constrain : false,
9154     /**
9155      * @cfg {Boolean} completeOnEnter True to complete the edit when the enter key is pressed (defaults to false)
9156      */
9157     completeOnEnter : false,
9158     /**
9159      * @cfg {Boolean} cancelOnEsc True to cancel the edit when the escape key is pressed (defaults to false)
9160      */
9161     cancelOnEsc : false,
9162     /**
9163      * @cfg {Boolean} updateEl True to update the innerHTML of the bound element when the update completes (defaults to false)
9164      */
9165     updateEl : false,
9166
9167     // private
9168     onRender : function(ct, position){
9169         this.el = new Roo.Layer({
9170             shadow: this.shadow,
9171             cls: "x-editor",
9172             parentEl : ct,
9173             shim : this.shim,
9174             shadowOffset:4,
9175             id: this.id,
9176             constrain: this.constrain
9177         });
9178         this.el.setStyle("overflow", Roo.isGecko ? "auto" : "hidden");
9179         if(this.field.msgTarget != 'title'){
9180             this.field.msgTarget = 'qtip';
9181         }
9182         this.field.render(this.el);
9183         if(Roo.isGecko){
9184             this.field.el.dom.setAttribute('autocomplete', 'off');
9185         }
9186         this.field.on("specialkey", this.onSpecialKey, this);
9187         if(this.swallowKeys){
9188             this.field.el.swallowEvent(['keydown','keypress']);
9189         }
9190         this.field.show();
9191         this.field.on("blur", this.onBlur, this);
9192         if(this.field.grow){
9193             this.field.on("autosize", this.el.sync,  this.el, {delay:1});
9194         }
9195     },
9196
9197     onSpecialKey : function(field, e)
9198     {
9199         //Roo.log('editor onSpecialKey');
9200         if(this.completeOnEnter && e.getKey() == e.ENTER){
9201             e.stopEvent();
9202             this.completeEdit();
9203             return;
9204         }
9205         // do not fire special key otherwise it might hide close the editor...
9206         if(e.getKey() == e.ENTER){    
9207             return;
9208         }
9209         if(this.cancelOnEsc && e.getKey() == e.ESC){
9210             this.cancelEdit();
9211             return;
9212         } 
9213         this.fireEvent('specialkey', field, e);
9214     
9215     },
9216
9217     /**
9218      * Starts the editing process and shows the editor.
9219      * @param {String/HTMLElement/Element} el The element to edit
9220      * @param {String} value (optional) A value to initialize the editor with. If a value is not provided, it defaults
9221       * to the innerHTML of el.
9222      */
9223     startEdit : function(el, value){
9224         if(this.editing){
9225             this.completeEdit();
9226         }
9227         this.boundEl = Roo.get(el);
9228         var v = value !== undefined ? value : this.boundEl.dom.innerHTML;
9229         if(!this.rendered){
9230             this.render(this.parentEl || document.body);
9231         }
9232         if(this.fireEvent("beforestartedit", this, this.boundEl, v) === false){
9233             return;
9234         }
9235         this.startValue = v;
9236         this.field.setValue(v);
9237         if(this.autoSize){
9238             var sz = this.boundEl.getSize();
9239             switch(this.autoSize){
9240                 case "width":
9241                 this.setSize(sz.width,  "");
9242                 break;
9243                 case "height":
9244                 this.setSize("",  sz.height);
9245                 break;
9246                 default:
9247                 this.setSize(sz.width,  sz.height);
9248             }
9249         }
9250         this.el.alignTo(this.boundEl, this.alignment);
9251         this.editing = true;
9252         if(Roo.QuickTips){
9253             Roo.QuickTips.disable();
9254         }
9255         this.show();
9256     },
9257
9258     /**
9259      * Sets the height and width of this editor.
9260      * @param {Number} width The new width
9261      * @param {Number} height The new height
9262      */
9263     setSize : function(w, h){
9264         this.field.setSize(w, h);
9265         if(this.el){
9266             this.el.sync();
9267         }
9268     },
9269
9270     /**
9271      * Realigns the editor to the bound field based on the current alignment config value.
9272      */
9273     realign : function(){
9274         this.el.alignTo(this.boundEl, this.alignment);
9275     },
9276
9277     /**
9278      * Ends the editing process, persists the changed value to the underlying field, and hides the editor.
9279      * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after edit (defaults to false)
9280      */
9281     completeEdit : function(remainVisible){
9282         if(!this.editing){
9283             return;
9284         }
9285         var v = this.getValue();
9286         if(this.revertInvalid !== false && !this.field.isValid()){
9287             v = this.startValue;
9288             this.cancelEdit(true);
9289         }
9290         if(String(v) === String(this.startValue) && this.ignoreNoChange){
9291             this.editing = false;
9292             this.hide();
9293             return;
9294         }
9295         if(this.fireEvent("beforecomplete", this, v, this.startValue) !== false){
9296             this.editing = false;
9297             if(this.updateEl && this.boundEl){
9298                 this.boundEl.update(v);
9299             }
9300             if(remainVisible !== true){
9301                 this.hide();
9302             }
9303             this.fireEvent("complete", this, v, this.startValue);
9304         }
9305     },
9306
9307     // private
9308     onShow : function(){
9309         this.el.show();
9310         if(this.hideEl !== false){
9311             this.boundEl.hide();
9312         }
9313         this.field.show();
9314         if(Roo.isIE && !this.fixIEFocus){ // IE has problems with focusing the first time
9315             this.fixIEFocus = true;
9316             this.deferredFocus.defer(50, this);
9317         }else{
9318             this.field.focus();
9319         }
9320         this.fireEvent("startedit", this.boundEl, this.startValue);
9321     },
9322
9323     deferredFocus : function(){
9324         if(this.editing){
9325             this.field.focus();
9326         }
9327     },
9328
9329     /**
9330      * Cancels the editing process and hides the editor without persisting any changes.  The field value will be
9331      * reverted to the original starting value.
9332      * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after
9333      * cancel (defaults to false)
9334      */
9335     cancelEdit : function(remainVisible){
9336         if(this.editing){
9337             this.setValue(this.startValue);
9338             if(remainVisible !== true){
9339                 this.hide();
9340             }
9341         }
9342     },
9343
9344     // private
9345     onBlur : function(){
9346         if(this.allowBlur !== true && this.editing){
9347             this.completeEdit();
9348         }
9349     },
9350
9351     // private
9352     onHide : function(){
9353         if(this.editing){
9354             this.completeEdit();
9355             return;
9356         }
9357         this.field.blur();
9358         if(this.field.collapse){
9359             this.field.collapse();
9360         }
9361         this.el.hide();
9362         if(this.hideEl !== false){
9363             this.boundEl.show();
9364         }
9365         if(Roo.QuickTips){
9366             Roo.QuickTips.enable();
9367         }
9368     },
9369
9370     /**
9371      * Sets the data value of the editor
9372      * @param {Mixed} value Any valid value supported by the underlying field
9373      */
9374     setValue : function(v){
9375         this.field.setValue(v);
9376     },
9377
9378     /**
9379      * Gets the data value of the editor
9380      * @return {Mixed} The data value
9381      */
9382     getValue : function(){
9383         return this.field.getValue();
9384     }
9385 });/*
9386  * Based on:
9387  * Ext JS Library 1.1.1
9388  * Copyright(c) 2006-2007, Ext JS, LLC.
9389  *
9390  * Originally Released Under LGPL - original licence link has changed is not relivant.
9391  *
9392  * Fork - LGPL
9393  * <script type="text/javascript">
9394  */
9395  
9396 /**
9397  * @class Roo.BasicDialog
9398  * @extends Roo.util.Observable
9399  * Lightweight Dialog Class.  The code below shows the creation of a typical dialog using existing HTML markup:
9400  * <pre><code>
9401 var dlg = new Roo.BasicDialog("my-dlg", {
9402     height: 200,
9403     width: 300,
9404     minHeight: 100,
9405     minWidth: 150,
9406     modal: true,
9407     proxyDrag: true,
9408     shadow: true
9409 });
9410 dlg.addKeyListener(27, dlg.hide, dlg); // ESC can also close the dialog
9411 dlg.addButton('OK', dlg.hide, dlg);    // Could call a save function instead of hiding
9412 dlg.addButton('Cancel', dlg.hide, dlg);
9413 dlg.show();
9414 </code></pre>
9415   <b>A Dialog should always be a direct child of the body element.</b>
9416  * @cfg {Boolean/DomHelper} autoCreate True to auto create from scratch, or using a DomHelper Object (defaults to false)
9417  * @cfg {String} title Default text to display in the title bar (defaults to null)
9418  * @cfg {Number} width Width of the dialog in pixels (can also be set via CSS).  Determined by browser if unspecified.
9419  * @cfg {Number} height Height of the dialog in pixels (can also be set via CSS).  Determined by browser if unspecified.
9420  * @cfg {Number} x The default left page coordinate of the dialog (defaults to center screen)
9421  * @cfg {Number} y The default top page coordinate of the dialog (defaults to center screen)
9422  * @cfg {String/Element} animateTarget Id or element from which the dialog should animate while opening
9423  * (defaults to null with no animation)
9424  * @cfg {Boolean} resizable False to disable manual dialog resizing (defaults to true)
9425  * @cfg {String} resizeHandles Which resize handles to display - see the {@link Roo.Resizable} handles config
9426  * property for valid values (defaults to 'all')
9427  * @cfg {Number} minHeight The minimum allowable height for a resizable dialog (defaults to 80)
9428  * @cfg {Number} minWidth The minimum allowable width for a resizable dialog (defaults to 200)
9429  * @cfg {Boolean} modal True to show the dialog modally, preventing user interaction with the rest of the page (defaults to false)
9430  * @cfg {Boolean} autoScroll True to allow the dialog body contents to overflow and display scrollbars (defaults to false)
9431  * @cfg {Boolean} closable False to remove the built-in top-right corner close button (defaults to true)
9432  * @cfg {Boolean} collapsible False to remove the built-in top-right corner collapse button (defaults to true)
9433  * @cfg {Boolean} constraintoviewport True to keep the dialog constrained within the visible viewport boundaries (defaults to true)
9434  * @cfg {Boolean} syncHeightBeforeShow True to cause the dimensions to be recalculated before the dialog is shown (defaults to false)
9435  * @cfg {Boolean} draggable False to disable dragging of the dialog within the viewport (defaults to true)
9436  * @cfg {Boolean} autoTabs If true, all elements with class 'x-dlg-tab' will get automatically converted to tabs (defaults to false)
9437  * @cfg {String} tabTag The tag name of tab elements, used when autoTabs = true (defaults to 'div')
9438  * @cfg {Boolean} proxyDrag True to drag a lightweight proxy element rather than the dialog itself, used when
9439  * draggable = true (defaults to false)
9440  * @cfg {Boolean} fixedcenter True to ensure that anytime the dialog is shown or resized it gets centered (defaults to false)
9441  * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
9442  * shadow (defaults to false)
9443  * @cfg {Number} shadowOffset The number of pixels to offset the shadow if displayed (defaults to 5)
9444  * @cfg {String} buttonAlign Valid values are "left," "center" and "right" (defaults to "right")
9445  * @cfg {Number} minButtonWidth Minimum width of all dialog buttons (defaults to 75)
9446  * @cfg {Array} buttons Array of buttons
9447  * @cfg {Boolean} shim True to create an iframe shim that prevents selects from showing through (defaults to false)
9448  * @constructor
9449  * Create a new BasicDialog.
9450  * @param {String/HTMLElement/Roo.Element} el The container element or DOM node, or its id
9451  * @param {Object} config Configuration options
9452  */
9453 Roo.BasicDialog = function(el, config){
9454     this.el = Roo.get(el);
9455     var dh = Roo.DomHelper;
9456     if(!this.el && config && config.autoCreate){
9457         if(typeof config.autoCreate == "object"){
9458             if(!config.autoCreate.id){
9459                 config.autoCreate.id = el;
9460             }
9461             this.el = dh.append(document.body,
9462                         config.autoCreate, true);
9463         }else{
9464             this.el = dh.append(document.body,
9465                         {tag: "div", id: el, style:'visibility:hidden;'}, true);
9466         }
9467     }
9468     el = this.el;
9469     el.setDisplayed(true);
9470     el.hide = this.hideAction;
9471     this.id = el.id;
9472     el.addClass("x-dlg");
9473
9474     Roo.apply(this, config);
9475
9476     this.proxy = el.createProxy("x-dlg-proxy");
9477     this.proxy.hide = this.hideAction;
9478     this.proxy.setOpacity(.5);
9479     this.proxy.hide();
9480
9481     if(config.width){
9482         el.setWidth(config.width);
9483     }
9484     if(config.height){
9485         el.setHeight(config.height);
9486     }
9487     this.size = el.getSize();
9488     if(typeof config.x != "undefined" && typeof config.y != "undefined"){
9489         this.xy = [config.x,config.y];
9490     }else{
9491         this.xy = el.getCenterXY(true);
9492     }
9493     /** The header element @type Roo.Element */
9494     this.header = el.child("> .x-dlg-hd");
9495     /** The body element @type Roo.Element */
9496     this.body = el.child("> .x-dlg-bd");
9497     /** The footer element @type Roo.Element */
9498     this.footer = el.child("> .x-dlg-ft");
9499
9500     if(!this.header){
9501         this.header = el.createChild({tag: "div", cls:"x-dlg-hd", html: "&#160;"}, this.body ? this.body.dom : null);
9502     }
9503     if(!this.body){
9504         this.body = el.createChild({tag: "div", cls:"x-dlg-bd"});
9505     }
9506
9507     this.header.unselectable();
9508     if(this.title){
9509         this.header.update(this.title);
9510     }
9511     // this element allows the dialog to be focused for keyboard event
9512     this.focusEl = el.createChild({tag: "a", href:"#", cls:"x-dlg-focus", tabIndex:"-1"});
9513     this.focusEl.swallowEvent("click", true);
9514
9515     this.header.wrap({cls:"x-dlg-hd-right"}).wrap({cls:"x-dlg-hd-left"}, true);
9516
9517     // wrap the body and footer for special rendering
9518     this.bwrap = this.body.wrap({tag: "div", cls:"x-dlg-dlg-body"});
9519     if(this.footer){
9520         this.bwrap.dom.appendChild(this.footer.dom);
9521     }
9522
9523     this.bg = this.el.createChild({
9524         tag: "div", cls:"x-dlg-bg",
9525         html: '<div class="x-dlg-bg-left"><div class="x-dlg-bg-right"><div class="x-dlg-bg-center">&#160;</div></div></div>'
9526     });
9527     this.centerBg = this.bg.child("div.x-dlg-bg-center");
9528
9529
9530     if(this.autoScroll !== false && !this.autoTabs){
9531         this.body.setStyle("overflow", "auto");
9532     }
9533
9534     this.toolbox = this.el.createChild({cls: "x-dlg-toolbox"});
9535
9536     if(this.closable !== false){
9537         this.el.addClass("x-dlg-closable");
9538         this.close = this.toolbox.createChild({cls:"x-dlg-close"});
9539         this.close.on("click", this.closeClick, this);
9540         this.close.addClassOnOver("x-dlg-close-over");
9541     }
9542     if(this.collapsible !== false){
9543         this.collapseBtn = this.toolbox.createChild({cls:"x-dlg-collapse"});
9544         this.collapseBtn.on("click", this.collapseClick, this);
9545         this.collapseBtn.addClassOnOver("x-dlg-collapse-over");
9546         this.header.on("dblclick", this.collapseClick, this);
9547     }
9548     if(this.resizable !== false){
9549         this.el.addClass("x-dlg-resizable");
9550         this.resizer = new Roo.Resizable(el, {
9551             minWidth: this.minWidth || 80,
9552             minHeight:this.minHeight || 80,
9553             handles: this.resizeHandles || "all",
9554             pinned: true
9555         });
9556         this.resizer.on("beforeresize", this.beforeResize, this);
9557         this.resizer.on("resize", this.onResize, this);
9558     }
9559     if(this.draggable !== false){
9560         el.addClass("x-dlg-draggable");
9561         if (!this.proxyDrag) {
9562             var dd = new Roo.dd.DD(el.dom.id, "WindowDrag");
9563         }
9564         else {
9565             var dd = new Roo.dd.DDProxy(el.dom.id, "WindowDrag", {dragElId: this.proxy.id});
9566         }
9567         dd.setHandleElId(this.header.id);
9568         dd.endDrag = this.endMove.createDelegate(this);
9569         dd.startDrag = this.startMove.createDelegate(this);
9570         dd.onDrag = this.onDrag.createDelegate(this);
9571         dd.scroll = false;
9572         this.dd = dd;
9573     }
9574     if(this.modal){
9575         this.mask = dh.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true);
9576         this.mask.enableDisplayMode("block");
9577         this.mask.hide();
9578         this.el.addClass("x-dlg-modal");
9579     }
9580     if(this.shadow){
9581         this.shadow = new Roo.Shadow({
9582             mode : typeof this.shadow == "string" ? this.shadow : "sides",
9583             offset : this.shadowOffset
9584         });
9585     }else{
9586         this.shadowOffset = 0;
9587     }
9588     if(Roo.useShims && this.shim !== false){
9589         this.shim = this.el.createShim();
9590         this.shim.hide = this.hideAction;
9591         this.shim.hide();
9592     }else{
9593         this.shim = false;
9594     }
9595     if(this.autoTabs){
9596         this.initTabs();
9597     }
9598     if (this.buttons) { 
9599         var bts= this.buttons;
9600         this.buttons = [];
9601         Roo.each(bts, function(b) {
9602             this.addButton(b);
9603         }, this);
9604     }
9605     
9606     
9607     this.addEvents({
9608         /**
9609          * @event keydown
9610          * Fires when a key is pressed
9611          * @param {Roo.BasicDialog} this
9612          * @param {Roo.EventObject} e
9613          */
9614         "keydown" : true,
9615         /**
9616          * @event move
9617          * Fires when this dialog is moved by the user.
9618          * @param {Roo.BasicDialog} this
9619          * @param {Number} x The new page X
9620          * @param {Number} y The new page Y
9621          */
9622         "move" : true,
9623         /**
9624          * @event resize
9625          * Fires when this dialog is resized by the user.
9626          * @param {Roo.BasicDialog} this
9627          * @param {Number} width The new width
9628          * @param {Number} height The new height
9629          */
9630         "resize" : true,
9631         /**
9632          * @event beforehide
9633          * Fires before this dialog is hidden.
9634          * @param {Roo.BasicDialog} this
9635          */
9636         "beforehide" : true,
9637         /**
9638          * @event hide
9639          * Fires when this dialog is hidden.
9640          * @param {Roo.BasicDialog} this
9641          */
9642         "hide" : true,
9643         /**
9644          * @event beforeshow
9645          * Fires before this dialog is shown.
9646          * @param {Roo.BasicDialog} this
9647          */
9648         "beforeshow" : true,
9649         /**
9650          * @event show
9651          * Fires when this dialog is shown.
9652          * @param {Roo.BasicDialog} this
9653          */
9654         "show" : true
9655     });
9656     el.on("keydown", this.onKeyDown, this);
9657     el.on("mousedown", this.toFront, this);
9658     Roo.EventManager.onWindowResize(this.adjustViewport, this, true);
9659     this.el.hide();
9660     Roo.DialogManager.register(this);
9661     Roo.BasicDialog.superclass.constructor.call(this);
9662 };
9663
9664 Roo.extend(Roo.BasicDialog, Roo.util.Observable, {
9665     shadowOffset: Roo.isIE ? 6 : 5,
9666     minHeight: 80,
9667     minWidth: 200,
9668     minButtonWidth: 75,
9669     defaultButton: null,
9670     buttonAlign: "right",
9671     tabTag: 'div',
9672     firstShow: true,
9673
9674     /**
9675      * Sets the dialog title text
9676      * @param {String} text The title text to display
9677      * @return {Roo.BasicDialog} this
9678      */
9679     setTitle : function(text){
9680         this.header.update(text);
9681         return this;
9682     },
9683
9684     // private
9685     closeClick : function(){
9686         this.hide();
9687     },
9688
9689     // private
9690     collapseClick : function(){
9691         this[this.collapsed ? "expand" : "collapse"]();
9692     },
9693
9694     /**
9695      * Collapses the dialog to its minimized state (only the title bar is visible).
9696      * Equivalent to the user clicking the collapse dialog button.
9697      */
9698     collapse : function(){
9699         if(!this.collapsed){
9700             this.collapsed = true;
9701             this.el.addClass("x-dlg-collapsed");
9702             this.restoreHeight = this.el.getHeight();
9703             this.resizeTo(this.el.getWidth(), this.header.getHeight());
9704         }
9705     },
9706
9707     /**
9708      * Expands a collapsed dialog back to its normal state.  Equivalent to the user
9709      * clicking the expand dialog button.
9710      */
9711     expand : function(){
9712         if(this.collapsed){
9713             this.collapsed = false;
9714             this.el.removeClass("x-dlg-collapsed");
9715             this.resizeTo(this.el.getWidth(), this.restoreHeight);
9716         }
9717     },
9718
9719     /**
9720      * Reinitializes the tabs component, clearing out old tabs and finding new ones.
9721      * @return {Roo.TabPanel} The tabs component
9722      */
9723     initTabs : function(){
9724         var tabs = this.getTabs();
9725         while(tabs.getTab(0)){
9726             tabs.removeTab(0);
9727         }
9728         this.el.select(this.tabTag+'.x-dlg-tab').each(function(el){
9729             var dom = el.dom;
9730             tabs.addTab(Roo.id(dom), dom.title);
9731             dom.title = "";
9732         });
9733         tabs.activate(0);
9734         return tabs;
9735     },
9736
9737     // private
9738     beforeResize : function(){
9739         this.resizer.minHeight = Math.max(this.minHeight, this.getHeaderFooterHeight(true)+40);
9740     },
9741
9742     // private
9743     onResize : function(){
9744         this.refreshSize();
9745         this.syncBodyHeight();
9746         this.adjustAssets();
9747         this.focus();
9748         this.fireEvent("resize", this, this.size.width, this.size.height);
9749     },
9750
9751     // private
9752     onKeyDown : function(e){
9753         if(this.isVisible()){
9754             this.fireEvent("keydown", this, e);
9755         }
9756     },
9757
9758     /**
9759      * Resizes the dialog.
9760      * @param {Number} width
9761      * @param {Number} height
9762      * @return {Roo.BasicDialog} this
9763      */
9764     resizeTo : function(width, height){
9765         this.el.setSize(width, height);
9766         this.size = {width: width, height: height};
9767         this.syncBodyHeight();
9768         if(this.fixedcenter){
9769             this.center();
9770         }
9771         if(this.isVisible()){
9772             this.constrainXY();
9773             this.adjustAssets();
9774         }
9775         this.fireEvent("resize", this, width, height);
9776         return this;
9777     },
9778
9779
9780     /**
9781      * Resizes the dialog to fit the specified content size.
9782      * @param {Number} width
9783      * @param {Number} height
9784      * @return {Roo.BasicDialog} this
9785      */
9786     setContentSize : function(w, h){
9787         h += this.getHeaderFooterHeight() + this.body.getMargins("tb");
9788         w += this.body.getMargins("lr") + this.bwrap.getMargins("lr") + this.centerBg.getPadding("lr");
9789         //if(!this.el.isBorderBox()){
9790             h +=  this.body.getPadding("tb") + this.bwrap.getBorderWidth("tb") + this.body.getBorderWidth("tb") + this.el.getBorderWidth("tb");
9791             w += this.body.getPadding("lr") + this.bwrap.getBorderWidth("lr") + this.body.getBorderWidth("lr") + this.bwrap.getPadding("lr") + this.el.getBorderWidth("lr");
9792         //}
9793         if(this.tabs){
9794             h += this.tabs.stripWrap.getHeight() + this.tabs.bodyEl.getMargins("tb") + this.tabs.bodyEl.getPadding("tb");
9795             w += this.tabs.bodyEl.getMargins("lr") + this.tabs.bodyEl.getPadding("lr");
9796         }
9797         this.resizeTo(w, h);
9798         return this;
9799     },
9800
9801     /**
9802      * Adds a key listener for when this dialog is displayed.  This allows you to hook in a function that will be
9803      * executed in response to a particular key being pressed while the dialog is active.
9804      * @param {Number/Array/Object} key Either the numeric key code, array of key codes or an object with the following options:
9805      *                                  {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
9806      * @param {Function} fn The function to call
9807      * @param {Object} scope (optional) The scope of the function
9808      * @return {Roo.BasicDialog} this
9809      */
9810     addKeyListener : function(key, fn, scope){
9811         var keyCode, shift, ctrl, alt;
9812         if(typeof key == "object" && !(key instanceof Array)){
9813             keyCode = key["key"];
9814             shift = key["shift"];
9815             ctrl = key["ctrl"];
9816             alt = key["alt"];
9817         }else{
9818             keyCode = key;
9819         }
9820         var handler = function(dlg, e){
9821             if((!shift || e.shiftKey) && (!ctrl || e.ctrlKey) &&  (!alt || e.altKey)){
9822                 var k = e.getKey();
9823                 if(keyCode instanceof Array){
9824                     for(var i = 0, len = keyCode.length; i < len; i++){
9825                         if(keyCode[i] == k){
9826                           fn.call(scope || window, dlg, k, e);
9827                           return;
9828                         }
9829                     }
9830                 }else{
9831                     if(k == keyCode){
9832                         fn.call(scope || window, dlg, k, e);
9833                     }
9834                 }
9835             }
9836         };
9837         this.on("keydown", handler);
9838         return this;
9839     },
9840
9841     /**
9842      * Returns the TabPanel component (creates it if it doesn't exist).
9843      * Note: If you wish to simply check for the existence of tabs without creating them,
9844      * check for a null 'tabs' property.
9845      * @return {Roo.TabPanel} The tabs component
9846      */
9847     getTabs : function(){
9848         if(!this.tabs){
9849             this.el.addClass("x-dlg-auto-tabs");
9850             this.body.addClass(this.tabPosition == "bottom" ? "x-tabs-bottom" : "x-tabs-top");
9851             this.tabs = new Roo.TabPanel(this.body.dom, this.tabPosition == "bottom");
9852         }
9853         return this.tabs;
9854     },
9855
9856     /**
9857      * Adds a button to the footer section of the dialog.
9858      * @param {String/Object} config A string becomes the button text, an object can either be a Button config
9859      * object or a valid Roo.DomHelper element config
9860      * @param {Function} handler The function called when the button is clicked
9861      * @param {Object} scope (optional) The scope of the handler function (accepts position as a property)
9862      * @return {Roo.Button} The new button
9863      */
9864     addButton : function(config, handler, scope){
9865         var dh = Roo.DomHelper;
9866         if(!this.footer){
9867             this.footer = dh.append(this.bwrap, {tag: "div", cls:"x-dlg-ft"}, true);
9868         }
9869         if(!this.btnContainer){
9870             var tb = this.footer.createChild({
9871
9872                 cls:"x-dlg-btns x-dlg-btns-"+this.buttonAlign,
9873                 html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'
9874             }, null, true);
9875             this.btnContainer = tb.firstChild.firstChild.firstChild;
9876         }
9877         var bconfig = {
9878             handler: handler,
9879             scope: scope,
9880             minWidth: this.minButtonWidth,
9881             hideParent:true
9882         };
9883         if(typeof config == "string"){
9884             bconfig.text = config;
9885         }else{
9886             if(config.tag){
9887                 bconfig.dhconfig = config;
9888             }else{
9889                 Roo.apply(bconfig, config);
9890             }
9891         }
9892         var fc = false;
9893         if ((typeof(bconfig.position) != 'undefined') && bconfig.position < this.btnContainer.childNodes.length-1) {
9894             bconfig.position = Math.max(0, bconfig.position);
9895             fc = this.btnContainer.childNodes[bconfig.position];
9896         }
9897          
9898         var btn = new Roo.Button(
9899             fc ? 
9900                 this.btnContainer.insertBefore(document.createElement("td"),fc)
9901                 : this.btnContainer.appendChild(document.createElement("td")),
9902             //Roo.get(this.btnContainer).createChild( { tag: 'td'},  fc ),
9903             bconfig
9904         );
9905         this.syncBodyHeight();
9906         if(!this.buttons){
9907             /**
9908              * Array of all the buttons that have been added to this dialog via addButton
9909              * @type Array
9910              */
9911             this.buttons = [];
9912         }
9913         this.buttons.push(btn);
9914         return btn;
9915     },
9916
9917     /**
9918      * Sets the default button to be focused when the dialog is displayed.
9919      * @param {Roo.BasicDialog.Button} btn The button object returned by {@link #addButton}
9920      * @return {Roo.BasicDialog} this
9921      */
9922     setDefaultButton : function(btn){
9923         this.defaultButton = btn;
9924         return this;
9925     },
9926
9927     // private
9928     getHeaderFooterHeight : function(safe){
9929         var height = 0;
9930         if(this.header){
9931            height += this.header.getHeight();
9932         }
9933         if(this.footer){
9934            var fm = this.footer.getMargins();
9935             height += (this.footer.getHeight()+fm.top+fm.bottom);
9936         }
9937         height += this.bwrap.getPadding("tb")+this.bwrap.getBorderWidth("tb");
9938         height += this.centerBg.getPadding("tb");
9939         return height;
9940     },
9941
9942     // private
9943     syncBodyHeight : function()
9944     {
9945         var bd = this.body, // the text
9946             cb = this.centerBg, // wrapper around bottom.. but does not seem to be used..
9947             bw = this.bwrap;
9948         var height = this.size.height - this.getHeaderFooterHeight(false);
9949         bd.setHeight(height-bd.getMargins("tb"));
9950         var hh = this.header.getHeight();
9951         var h = this.size.height-hh;
9952         cb.setHeight(h);
9953         
9954         bw.setLeftTop(cb.getPadding("l"), hh+cb.getPadding("t"));
9955         bw.setHeight(h-cb.getPadding("tb"));
9956         
9957         bw.setWidth(this.el.getWidth(true)-cb.getPadding("lr"));
9958         bd.setWidth(bw.getWidth(true));
9959         if(this.tabs){
9960             this.tabs.syncHeight();
9961             if(Roo.isIE){
9962                 this.tabs.el.repaint();
9963             }
9964         }
9965     },
9966
9967     /**
9968      * Restores the previous state of the dialog if Roo.state is configured.
9969      * @return {Roo.BasicDialog} this
9970      */
9971     restoreState : function(){
9972         var box = Roo.state.Manager.get(this.stateId || (this.el.id + "-state"));
9973         if(box && box.width){
9974             this.xy = [box.x, box.y];
9975             this.resizeTo(box.width, box.height);
9976         }
9977         return this;
9978     },
9979
9980     // private
9981     beforeShow : function(){
9982         this.expand();
9983         if(this.fixedcenter){
9984             this.xy = this.el.getCenterXY(true);
9985         }
9986         if(this.modal){
9987             Roo.get(document.body).addClass("x-body-masked");
9988             this.mask.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
9989             this.mask.show();
9990         }
9991         this.constrainXY();
9992     },
9993
9994     // private
9995     animShow : function(){
9996         var b = Roo.get(this.animateTarget).getBox();
9997         this.proxy.setSize(b.width, b.height);
9998         this.proxy.setLocation(b.x, b.y);
9999         this.proxy.show();
10000         this.proxy.setBounds(this.xy[0], this.xy[1], this.size.width, this.size.height,
10001                     true, .35, this.showEl.createDelegate(this));
10002     },
10003
10004     /**
10005      * Shows the dialog.
10006      * @param {String/HTMLElement/Roo.Element} animateTarget (optional) Reset the animation target
10007      * @return {Roo.BasicDialog} this
10008      */
10009     show : function(animateTarget){
10010         if (this.fireEvent("beforeshow", this) === false){
10011             return;
10012         }
10013         if(this.syncHeightBeforeShow){
10014             this.syncBodyHeight();
10015         }else if(this.firstShow){
10016             this.firstShow = false;
10017             this.syncBodyHeight(); // sync the height on the first show instead of in the constructor
10018         }
10019         this.animateTarget = animateTarget || this.animateTarget;
10020         if(!this.el.isVisible()){
10021             this.beforeShow();
10022             if(this.animateTarget && Roo.get(this.animateTarget)){
10023                 this.animShow();
10024             }else{
10025                 this.showEl();
10026             }
10027         }
10028         return this;
10029     },
10030
10031     // private
10032     showEl : function(){
10033         this.proxy.hide();
10034         this.el.setXY(this.xy);
10035         this.el.show();
10036         this.adjustAssets(true);
10037         this.toFront();
10038         this.focus();
10039         // IE peekaboo bug - fix found by Dave Fenwick
10040         if(Roo.isIE){
10041             this.el.repaint();
10042         }
10043         this.fireEvent("show", this);
10044     },
10045
10046     /**
10047      * Focuses the dialog.  If a defaultButton is set, it will receive focus, otherwise the
10048      * dialog itself will receive focus.
10049      */
10050     focus : function(){
10051         if(this.defaultButton){
10052             this.defaultButton.focus();
10053         }else{
10054             this.focusEl.focus();
10055         }
10056     },
10057
10058     // private
10059     constrainXY : function(){
10060         if(this.constraintoviewport !== false){
10061             if(!this.viewSize){
10062                 if(this.container){
10063                     var s = this.container.getSize();
10064                     this.viewSize = [s.width, s.height];
10065                 }else{
10066                     this.viewSize = [Roo.lib.Dom.getViewWidth(),Roo.lib.Dom.getViewHeight()];
10067                 }
10068             }
10069             var s = Roo.get(this.container||document).getScroll();
10070
10071             var x = this.xy[0], y = this.xy[1];
10072             var w = this.size.width, h = this.size.height;
10073             var vw = this.viewSize[0], vh = this.viewSize[1];
10074             // only move it if it needs it
10075             var moved = false;
10076             // first validate right/bottom
10077             if(x + w > vw+s.left){
10078                 x = vw - w;
10079                 moved = true;
10080             }
10081             if(y + h > vh+s.top){
10082                 y = vh - h;
10083                 moved = true;
10084             }
10085             // then make sure top/left isn't negative
10086             if(x < s.left){
10087                 x = s.left;
10088                 moved = true;
10089             }
10090             if(y < s.top){
10091                 y = s.top;
10092                 moved = true;
10093             }
10094             if(moved){
10095                 // cache xy
10096                 this.xy = [x, y];
10097                 if(this.isVisible()){
10098                     this.el.setLocation(x, y);
10099                     this.adjustAssets();
10100                 }
10101             }
10102         }
10103     },
10104
10105     // private
10106     onDrag : function(){
10107         if(!this.proxyDrag){
10108             this.xy = this.el.getXY();
10109             this.adjustAssets();
10110         }
10111     },
10112
10113     // private
10114     adjustAssets : function(doShow){
10115         var x = this.xy[0], y = this.xy[1];
10116         var w = this.size.width, h = this.size.height;
10117         if(doShow === true){
10118             if(this.shadow){
10119                 this.shadow.show(this.el);
10120             }
10121             if(this.shim){
10122                 this.shim.show();
10123             }
10124         }
10125         if(this.shadow && this.shadow.isVisible()){
10126             this.shadow.show(this.el);
10127         }
10128         if(this.shim && this.shim.isVisible()){
10129             this.shim.setBounds(x, y, w, h);
10130         }
10131     },
10132
10133     // private
10134     adjustViewport : function(w, h){
10135         if(!w || !h){
10136             w = Roo.lib.Dom.getViewWidth();
10137             h = Roo.lib.Dom.getViewHeight();
10138         }
10139         // cache the size
10140         this.viewSize = [w, h];
10141         if(this.modal && this.mask.isVisible()){
10142             this.mask.setSize(w, h); // first make sure the mask isn't causing overflow
10143             this.mask.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
10144         }
10145         if(this.isVisible()){
10146             this.constrainXY();
10147         }
10148     },
10149
10150     /**
10151      * Destroys this dialog and all its supporting elements (including any tabs, shim,
10152      * shadow, proxy, mask, etc.)  Also removes all event listeners.
10153      * @param {Boolean} removeEl (optional) true to remove the element from the DOM
10154      */
10155     destroy : function(removeEl){
10156         if(this.isVisible()){
10157             this.animateTarget = null;
10158             this.hide();
10159         }
10160         Roo.EventManager.removeResizeListener(this.adjustViewport, this);
10161         if(this.tabs){
10162             this.tabs.destroy(removeEl);
10163         }
10164         Roo.destroy(
10165              this.shim,
10166              this.proxy,
10167              this.resizer,
10168              this.close,
10169              this.mask
10170         );
10171         if(this.dd){
10172             this.dd.unreg();
10173         }
10174         if(this.buttons){
10175            for(var i = 0, len = this.buttons.length; i < len; i++){
10176                this.buttons[i].destroy();
10177            }
10178         }
10179         this.el.removeAllListeners();
10180         if(removeEl === true){
10181             this.el.update("");
10182             this.el.remove();
10183         }
10184         Roo.DialogManager.unregister(this);
10185     },
10186
10187     // private
10188     startMove : function(){
10189         if(this.proxyDrag){
10190             this.proxy.show();
10191         }
10192         if(this.constraintoviewport !== false){
10193             this.dd.constrainTo(document.body, {right: this.shadowOffset, bottom: this.shadowOffset});
10194         }
10195     },
10196
10197     // private
10198     endMove : function(){
10199         if(!this.proxyDrag){
10200             Roo.dd.DD.prototype.endDrag.apply(this.dd, arguments);
10201         }else{
10202             Roo.dd.DDProxy.prototype.endDrag.apply(this.dd, arguments);
10203             this.proxy.hide();
10204         }
10205         this.refreshSize();
10206         this.adjustAssets();
10207         this.focus();
10208         this.fireEvent("move", this, this.xy[0], this.xy[1]);
10209     },
10210
10211     /**
10212      * Brings this dialog to the front of any other visible dialogs
10213      * @return {Roo.BasicDialog} this
10214      */
10215     toFront : function(){
10216         Roo.DialogManager.bringToFront(this);
10217         return this;
10218     },
10219
10220     /**
10221      * Sends this dialog to the back (under) of any other visible dialogs
10222      * @return {Roo.BasicDialog} this
10223      */
10224     toBack : function(){
10225         Roo.DialogManager.sendToBack(this);
10226         return this;
10227     },
10228
10229     /**
10230      * Centers this dialog in the viewport
10231      * @return {Roo.BasicDialog} this
10232      */
10233     center : function(){
10234         var xy = this.el.getCenterXY(true);
10235         this.moveTo(xy[0], xy[1]);
10236         return this;
10237     },
10238
10239     /**
10240      * Moves the dialog's top-left corner to the specified point
10241      * @param {Number} x
10242      * @param {Number} y
10243      * @return {Roo.BasicDialog} this
10244      */
10245     moveTo : function(x, y){
10246         this.xy = [x,y];
10247         if(this.isVisible()){
10248             this.el.setXY(this.xy);
10249             this.adjustAssets();
10250         }
10251         return this;
10252     },
10253
10254     /**
10255      * Aligns the dialog to the specified element
10256      * @param {String/HTMLElement/Roo.Element} element The element to align to.
10257      * @param {String} position The position to align to (see {@link Roo.Element#alignTo} for more details).
10258      * @param {Array} offsets (optional) Offset the positioning by [x, y]
10259      * @return {Roo.BasicDialog} this
10260      */
10261     alignTo : function(element, position, offsets){
10262         this.xy = this.el.getAlignToXY(element, position, offsets);
10263         if(this.isVisible()){
10264             this.el.setXY(this.xy);
10265             this.adjustAssets();
10266         }
10267         return this;
10268     },
10269
10270     /**
10271      * Anchors an element to another element and realigns it when the window is resized.
10272      * @param {String/HTMLElement/Roo.Element} element The element to align to.
10273      * @param {String} position The position to align to (see {@link Roo.Element#alignTo} for more details)
10274      * @param {Array} offsets (optional) Offset the positioning by [x, y]
10275      * @param {Boolean/Number} monitorScroll (optional) true to monitor body scroll and reposition. If this parameter
10276      * is a number, it is used as the buffer delay (defaults to 50ms).
10277      * @return {Roo.BasicDialog} this
10278      */
10279     anchorTo : function(el, alignment, offsets, monitorScroll){
10280         var action = function(){
10281             this.alignTo(el, alignment, offsets);
10282         };
10283         Roo.EventManager.onWindowResize(action, this);
10284         var tm = typeof monitorScroll;
10285         if(tm != 'undefined'){
10286             Roo.EventManager.on(window, 'scroll', action, this,
10287                 {buffer: tm == 'number' ? monitorScroll : 50});
10288         }
10289         action.call(this);
10290         return this;
10291     },
10292
10293     /**
10294      * Returns true if the dialog is visible
10295      * @return {Boolean}
10296      */
10297     isVisible : function(){
10298         return this.el.isVisible();
10299     },
10300
10301     // private
10302     animHide : function(callback){
10303         var b = Roo.get(this.animateTarget).getBox();
10304         this.proxy.show();
10305         this.proxy.setBounds(this.xy[0], this.xy[1], this.size.width, this.size.height);
10306         this.el.hide();
10307         this.proxy.setBounds(b.x, b.y, b.width, b.height, true, .35,
10308                     this.hideEl.createDelegate(this, [callback]));
10309     },
10310
10311     /**
10312      * Hides the dialog.
10313      * @param {Function} callback (optional) Function to call when the dialog is hidden
10314      * @return {Roo.BasicDialog} this
10315      */
10316     hide : function(callback){
10317         if (this.fireEvent("beforehide", this) === false){
10318             return;
10319         }
10320         if(this.shadow){
10321             this.shadow.hide();
10322         }
10323         if(this.shim) {
10324           this.shim.hide();
10325         }
10326         // sometimes animateTarget seems to get set.. causing problems...
10327         // this just double checks..
10328         if(this.animateTarget && Roo.get(this.animateTarget)) {
10329            this.animHide(callback);
10330         }else{
10331             this.el.hide();
10332             this.hideEl(callback);
10333         }
10334         return this;
10335     },
10336
10337     // private
10338     hideEl : function(callback){
10339         this.proxy.hide();
10340         if(this.modal){
10341             this.mask.hide();
10342             Roo.get(document.body).removeClass("x-body-masked");
10343         }
10344         this.fireEvent("hide", this);
10345         if(typeof callback == "function"){
10346             callback();
10347         }
10348     },
10349
10350     // private
10351     hideAction : function(){
10352         this.setLeft("-10000px");
10353         this.setTop("-10000px");
10354         this.setStyle("visibility", "hidden");
10355     },
10356
10357     // private
10358     refreshSize : function(){
10359         this.size = this.el.getSize();
10360         this.xy = this.el.getXY();
10361         Roo.state.Manager.set(this.stateId || this.el.id + "-state", this.el.getBox());
10362     },
10363
10364     // private
10365     // z-index is managed by the DialogManager and may be overwritten at any time
10366     setZIndex : function(index){
10367         if(this.modal){
10368             this.mask.setStyle("z-index", index);
10369         }
10370         if(this.shim){
10371             this.shim.setStyle("z-index", ++index);
10372         }
10373         if(this.shadow){
10374             this.shadow.setZIndex(++index);
10375         }
10376         this.el.setStyle("z-index", ++index);
10377         if(this.proxy){
10378             this.proxy.setStyle("z-index", ++index);
10379         }
10380         if(this.resizer){
10381             this.resizer.proxy.setStyle("z-index", ++index);
10382         }
10383
10384         this.lastZIndex = index;
10385     },
10386
10387     /**
10388      * Returns the element for this dialog
10389      * @return {Roo.Element} The underlying dialog Element
10390      */
10391     getEl : function(){
10392         return this.el;
10393     }
10394 });
10395
10396 /**
10397  * @class Roo.DialogManager
10398  * Provides global access to BasicDialogs that have been created and
10399  * support for z-indexing (layering) multiple open dialogs.
10400  */
10401 Roo.DialogManager = function(){
10402     var list = {};
10403     var accessList = [];
10404     var front = null;
10405
10406     // private
10407     var sortDialogs = function(d1, d2){
10408         return (!d1._lastAccess || d1._lastAccess < d2._lastAccess) ? -1 : 1;
10409     };
10410
10411     // private
10412     var orderDialogs = function(){
10413         accessList.sort(sortDialogs);
10414         var seed = Roo.DialogManager.zseed;
10415         for(var i = 0, len = accessList.length; i < len; i++){
10416             var dlg = accessList[i];
10417             if(dlg){
10418                 dlg.setZIndex(seed + (i*10));
10419             }
10420         }
10421     };
10422
10423     return {
10424         /**
10425          * The starting z-index for BasicDialogs (defaults to 9000)
10426          * @type Number The z-index value
10427          */
10428         zseed : 9000,
10429
10430         // private
10431         register : function(dlg){
10432             list[dlg.id] = dlg;
10433             accessList.push(dlg);
10434         },
10435
10436         // private
10437         unregister : function(dlg){
10438             delete list[dlg.id];
10439             var i=0;
10440             var len=0;
10441             if(!accessList.indexOf){
10442                 for(  i = 0, len = accessList.length; i < len; i++){
10443                     if(accessList[i] == dlg){
10444                         accessList.splice(i, 1);
10445                         return;
10446                     }
10447                 }
10448             }else{
10449                  i = accessList.indexOf(dlg);
10450                 if(i != -1){
10451                     accessList.splice(i, 1);
10452                 }
10453             }
10454         },
10455
10456         /**
10457          * Gets a registered dialog by id
10458          * @param {String/Object} id The id of the dialog or a dialog
10459          * @return {Roo.BasicDialog} this
10460          */
10461         get : function(id){
10462             return typeof id == "object" ? id : list[id];
10463         },
10464
10465         /**
10466          * Brings the specified dialog to the front
10467          * @param {String/Object} dlg The id of the dialog or a dialog
10468          * @return {Roo.BasicDialog} this
10469          */
10470         bringToFront : function(dlg){
10471             dlg = this.get(dlg);
10472             if(dlg != front){
10473                 front = dlg;
10474                 dlg._lastAccess = new Date().getTime();
10475                 orderDialogs();
10476             }
10477             return dlg;
10478         },
10479
10480         /**
10481          * Sends the specified dialog to the back
10482          * @param {String/Object} dlg The id of the dialog or a dialog
10483          * @return {Roo.BasicDialog} this
10484          */
10485         sendToBack : function(dlg){
10486             dlg = this.get(dlg);
10487             dlg._lastAccess = -(new Date().getTime());
10488             orderDialogs();
10489             return dlg;
10490         },
10491
10492         /**
10493          * Hides all dialogs
10494          */
10495         hideAll : function(){
10496             for(var id in list){
10497                 if(list[id] && typeof list[id] != "function" && list[id].isVisible()){
10498                     list[id].hide();
10499                 }
10500             }
10501         }
10502     };
10503 }();
10504
10505 /**
10506  * @class Roo.LayoutDialog
10507  * @extends Roo.BasicDialog
10508  * Dialog which provides adjustments for working with a layout in a Dialog.
10509  * Add your necessary layout config options to the dialog's config.<br>
10510  * Example usage (including a nested layout):
10511  * <pre><code>
10512 if(!dialog){
10513     dialog = new Roo.LayoutDialog("download-dlg", {
10514         modal: true,
10515         width:600,
10516         height:450,
10517         shadow:true,
10518         minWidth:500,
10519         minHeight:350,
10520         autoTabs:true,
10521         proxyDrag:true,
10522         // layout config merges with the dialog config
10523         center:{
10524             tabPosition: "top",
10525             alwaysShowTabs: true
10526         }
10527     });
10528     dialog.addKeyListener(27, dialog.hide, dialog);
10529     dialog.setDefaultButton(dialog.addButton("Close", dialog.hide, dialog));
10530     dialog.addButton("Build It!", this.getDownload, this);
10531
10532     // we can even add nested layouts
10533     var innerLayout = new Roo.BorderLayout("dl-inner", {
10534         east: {
10535             initialSize: 200,
10536             autoScroll:true,
10537             split:true
10538         },
10539         center: {
10540             autoScroll:true
10541         }
10542     });
10543     innerLayout.beginUpdate();
10544     innerLayout.add("east", new Roo.ContentPanel("dl-details"));
10545     innerLayout.add("center", new Roo.ContentPanel("selection-panel"));
10546     innerLayout.endUpdate(true);
10547
10548     var layout = dialog.getLayout();
10549     layout.beginUpdate();
10550     layout.add("center", new Roo.ContentPanel("standard-panel",
10551                         {title: "Download the Source", fitToFrame:true}));
10552     layout.add("center", new Roo.NestedLayoutPanel(innerLayout,
10553                {title: "Build your own roo.js"}));
10554     layout.getRegion("center").showPanel(sp);
10555     layout.endUpdate();
10556 }
10557 </code></pre>
10558     * @constructor
10559     * @param {String/HTMLElement/Roo.Element} el The id of or container element, or config
10560     * @param {Object} config configuration options
10561   */
10562 Roo.LayoutDialog = function(el, cfg){
10563     
10564     var config=  cfg;
10565     if (typeof(cfg) == 'undefined') {
10566         config = Roo.apply({}, el);
10567         // not sure why we use documentElement here.. - it should always be body.
10568         // IE7 borks horribly if we use documentElement.
10569         // webkit also does not like documentElement - it creates a body element...
10570         el = Roo.get( document.body || document.documentElement ).createChild();
10571         //config.autoCreate = true;
10572     }
10573     
10574     
10575     config.autoTabs = false;
10576     Roo.LayoutDialog.superclass.constructor.call(this, el, config);
10577     this.body.setStyle({overflow:"hidden", position:"relative"});
10578     this.layout = new Roo.BorderLayout(this.body.dom, config);
10579     this.layout.monitorWindowResize = false;
10580     this.el.addClass("x-dlg-auto-layout");
10581     // fix case when center region overwrites center function
10582     this.center = Roo.BasicDialog.prototype.center;
10583     this.on("show", this.layout.layout, this.layout, true);
10584     if (config.items) {
10585         var xitems = config.items;
10586         delete config.items;
10587         Roo.each(xitems, this.addxtype, this);
10588     }
10589     
10590     
10591 };
10592 Roo.extend(Roo.LayoutDialog, Roo.BasicDialog, {
10593     /**
10594      * Ends update of the layout <strike>and resets display to none</strike>. Use standard beginUpdate/endUpdate on the layout.
10595      * @deprecated
10596      */
10597     endUpdate : function(){
10598         this.layout.endUpdate();
10599     },
10600
10601     /**
10602      * Begins an update of the layout <strike>and sets display to block and visibility to hidden</strike>. Use standard beginUpdate/endUpdate on the layout.
10603      *  @deprecated
10604      */
10605     beginUpdate : function(){
10606         this.layout.beginUpdate();
10607     },
10608
10609     /**
10610      * Get the BorderLayout for this dialog
10611      * @return {Roo.BorderLayout}
10612      */
10613     getLayout : function(){
10614         return this.layout;
10615     },
10616
10617     showEl : function(){
10618         Roo.LayoutDialog.superclass.showEl.apply(this, arguments);
10619         if(Roo.isIE7){
10620             this.layout.layout();
10621         }
10622     },
10623
10624     // private
10625     // Use the syncHeightBeforeShow config option to control this automatically
10626     syncBodyHeight : function(){
10627         Roo.LayoutDialog.superclass.syncBodyHeight.call(this);
10628         if(this.layout){this.layout.layout();}
10629     },
10630     
10631       /**
10632      * Add an xtype element (actually adds to the layout.)
10633      * @return {Object} xdata xtype object data.
10634      */
10635     
10636     addxtype : function(c) {
10637         return this.layout.addxtype(c);
10638     }
10639 });/*
10640  * Based on:
10641  * Ext JS Library 1.1.1
10642  * Copyright(c) 2006-2007, Ext JS, LLC.
10643  *
10644  * Originally Released Under LGPL - original licence link has changed is not relivant.
10645  *
10646  * Fork - LGPL
10647  * <script type="text/javascript">
10648  */
10649  
10650 /**
10651  * @class Roo.MessageBox
10652  * Utility class for generating different styles of message boxes.  The alias Roo.Msg can also be used.
10653  * Example usage:
10654  *<pre><code>
10655 // Basic alert:
10656 Roo.Msg.alert('Status', 'Changes saved successfully.');
10657
10658 // Prompt for user data:
10659 Roo.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
10660     if (btn == 'ok'){
10661         // process text value...
10662     }
10663 });
10664
10665 // Show a dialog using config options:
10666 Roo.Msg.show({
10667    title:'Save Changes?',
10668    msg: 'Your are closing a tab that has unsaved changes. Would you like to save your changes?',
10669    buttons: Roo.Msg.YESNOCANCEL,
10670    fn: processResult,
10671    animEl: 'elId'
10672 });
10673 </code></pre>
10674  * @singleton
10675  */
10676 Roo.MessageBox = function(){
10677     var dlg, opt, mask, waitTimer;
10678     var bodyEl, msgEl, textboxEl, textareaEl, progressEl, pp;
10679     var buttons, activeTextEl, bwidth;
10680
10681     // private
10682     var handleButton = function(button){
10683         dlg.hide();
10684         Roo.callback(opt.fn, opt.scope||window, [button, activeTextEl.dom.value], 1);
10685     };
10686
10687     // private
10688     var handleHide = function(){
10689         if(opt && opt.cls){
10690             dlg.el.removeClass(opt.cls);
10691         }
10692         if(waitTimer){
10693             Roo.TaskMgr.stop(waitTimer);
10694             waitTimer = null;
10695         }
10696     };
10697
10698     // private
10699     var updateButtons = function(b){
10700         var width = 0;
10701         if(!b){
10702             buttons["ok"].hide();
10703             buttons["cancel"].hide();
10704             buttons["yes"].hide();
10705             buttons["no"].hide();
10706             dlg.footer.dom.style.display = 'none';
10707             return width;
10708         }
10709         dlg.footer.dom.style.display = '';
10710         for(var k in buttons){
10711             if(typeof buttons[k] != "function"){
10712                 if(b[k]){
10713                     buttons[k].show();
10714                     buttons[k].setText(typeof b[k] == "string" ? b[k] : Roo.MessageBox.buttonText[k]);
10715                     width += buttons[k].el.getWidth()+15;
10716                 }else{
10717                     buttons[k].hide();
10718                 }
10719             }
10720         }
10721         return width;
10722     };
10723
10724     // private
10725     var handleEsc = function(d, k, e){
10726         if(opt && opt.closable !== false){
10727             dlg.hide();
10728         }
10729         if(e){
10730             e.stopEvent();
10731         }
10732     };
10733
10734     return {
10735         /**
10736          * Returns a reference to the underlying {@link Roo.BasicDialog} element
10737          * @return {Roo.BasicDialog} The BasicDialog element
10738          */
10739         getDialog : function(){
10740            if(!dlg){
10741                 dlg = new Roo.BasicDialog("x-msg-box", {
10742                     autoCreate : true,
10743                     shadow: true,
10744                     draggable: true,
10745                     resizable:false,
10746                     constraintoviewport:false,
10747                     fixedcenter:true,
10748                     collapsible : false,
10749                     shim:true,
10750                     modal: true,
10751                     width:400, height:100,
10752                     buttonAlign:"center",
10753                     closeClick : function(){
10754                         if(opt && opt.buttons && opt.buttons.no && !opt.buttons.cancel){
10755                             handleButton("no");
10756                         }else{
10757                             handleButton("cancel");
10758                         }
10759                     }
10760                 });
10761                 dlg.on("hide", handleHide);
10762                 mask = dlg.mask;
10763                 dlg.addKeyListener(27, handleEsc);
10764                 buttons = {};
10765                 var bt = this.buttonText;
10766                 buttons["ok"] = dlg.addButton(bt["ok"], handleButton.createCallback("ok"));
10767                 buttons["yes"] = dlg.addButton(bt["yes"], handleButton.createCallback("yes"));
10768                 buttons["no"] = dlg.addButton(bt["no"], handleButton.createCallback("no"));
10769                 buttons["cancel"] = dlg.addButton(bt["cancel"], handleButton.createCallback("cancel"));
10770                 bodyEl = dlg.body.createChild({
10771
10772                     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>'
10773                 });
10774                 msgEl = bodyEl.dom.firstChild;
10775                 textboxEl = Roo.get(bodyEl.dom.childNodes[2]);
10776                 textboxEl.enableDisplayMode();
10777                 textboxEl.addKeyListener([10,13], function(){
10778                     if(dlg.isVisible() && opt && opt.buttons){
10779                         if(opt.buttons.ok){
10780                             handleButton("ok");
10781                         }else if(opt.buttons.yes){
10782                             handleButton("yes");
10783                         }
10784                     }
10785                 });
10786                 textareaEl = Roo.get(bodyEl.dom.childNodes[3]);
10787                 textareaEl.enableDisplayMode();
10788                 progressEl = Roo.get(bodyEl.dom.childNodes[4]);
10789                 progressEl.enableDisplayMode();
10790                 var pf = progressEl.dom.firstChild;
10791                 if (pf) {
10792                     pp = Roo.get(pf.firstChild);
10793                     pp.setHeight(pf.offsetHeight);
10794                 }
10795                 
10796             }
10797             return dlg;
10798         },
10799
10800         /**
10801          * Updates the message box body text
10802          * @param {String} text (optional) Replaces the message box element's innerHTML with the specified string (defaults to
10803          * the XHTML-compliant non-breaking space character '&amp;#160;')
10804          * @return {Roo.MessageBox} This message box
10805          */
10806         updateText : function(text){
10807             if(!dlg.isVisible() && !opt.width){
10808                 dlg.resizeTo(this.maxWidth, 100); // resize first so content is never clipped from previous shows
10809             }
10810             msgEl.innerHTML = text || '&#160;';
10811       
10812             var cw =  Math.max(msgEl.offsetWidth, msgEl.parentNode.scrollWidth);
10813             //Roo.log("guesed size: " + JSON.stringify([cw,msgEl.offsetWidth, msgEl.parentNode.scrollWidth]));
10814             var w = Math.max(
10815                     Math.min(opt.width || cw , this.maxWidth), 
10816                     Math.max(opt.minWidth || this.minWidth, bwidth)
10817             );
10818             if(opt.prompt){
10819                 activeTextEl.setWidth(w);
10820             }
10821             if(dlg.isVisible()){
10822                 dlg.fixedcenter = false;
10823             }
10824             // to big, make it scroll. = But as usual stupid IE does not support
10825             // !important..
10826             
10827             if ( bodyEl.getHeight() > (Roo.lib.Dom.getViewHeight() - 100)) {
10828                 bodyEl.setHeight ( Roo.lib.Dom.getViewHeight() - 100 );
10829                 bodyEl.dom.style.overflowY = 'auto' + ( Roo.isIE ? '' : ' !important');
10830             } else {
10831                 bodyEl.dom.style.height = '';
10832                 bodyEl.dom.style.overflowY = '';
10833             }
10834             if (cw > w) {
10835                 bodyEl.dom.style.get = 'auto' + ( Roo.isIE ? '' : ' !important');
10836             } else {
10837                 bodyEl.dom.style.overflowX = '';
10838             }
10839             
10840             dlg.setContentSize(w, bodyEl.getHeight());
10841             if(dlg.isVisible()){
10842                 dlg.fixedcenter = true;
10843             }
10844             return this;
10845         },
10846
10847         /**
10848          * Updates a progress-style message box's text and progress bar.  Only relevant on message boxes
10849          * initiated via {@link Roo.MessageBox#progress} or by calling {@link Roo.MessageBox#show} with progress: true.
10850          * @param {Number} value Any number between 0 and 1 (e.g., .5)
10851          * @param {String} text (optional) If defined, the message box's body text is replaced with the specified string (defaults to undefined)
10852          * @return {Roo.MessageBox} This message box
10853          */
10854         updateProgress : function(value, text){
10855             if(text){
10856                 this.updateText(text);
10857             }
10858             if (pp) { // weird bug on my firefox - for some reason this is not defined
10859                 pp.setWidth(Math.floor(value*progressEl.dom.firstChild.offsetWidth));
10860             }
10861             return this;
10862         },        
10863
10864         /**
10865          * Returns true if the message box is currently displayed
10866          * @return {Boolean} True if the message box is visible, else false
10867          */
10868         isVisible : function(){
10869             return dlg && dlg.isVisible();  
10870         },
10871
10872         /**
10873          * Hides the message box if it is displayed
10874          */
10875         hide : function(){
10876             if(this.isVisible()){
10877                 dlg.hide();
10878             }  
10879         },
10880
10881         /**
10882          * Displays a new message box, or reinitializes an existing message box, based on the config options
10883          * passed in. All functions (e.g. prompt, alert, etc) on MessageBox call this function internally.
10884          * The following config object properties are supported:
10885          * <pre>
10886 Property    Type             Description
10887 ----------  ---------------  ------------------------------------------------------------------------------------
10888 animEl            String/Element   An id or Element from which the message box should animate as it opens and
10889                                    closes (defaults to undefined)
10890 buttons           Object/Boolean   A button config object (e.g., Roo.MessageBox.OKCANCEL or {ok:'Foo',
10891                                    cancel:'Bar'}), or false to not show any buttons (defaults to false)
10892 closable          Boolean          False to hide the top-right close button (defaults to true).  Note that
10893                                    progress and wait dialogs will ignore this property and always hide the
10894                                    close button as they can only be closed programmatically.
10895 cls               String           A custom CSS class to apply to the message box element
10896 defaultTextHeight Number           The default height in pixels of the message box's multiline textarea if
10897                                    displayed (defaults to 75)
10898 fn                Function         A callback function to execute after closing the dialog.  The arguments to the
10899                                    function will be btn (the name of the button that was clicked, if applicable,
10900                                    e.g. "ok"), and text (the value of the active text field, if applicable).
10901                                    Progress and wait dialogs will ignore this option since they do not respond to
10902                                    user actions and can only be closed programmatically, so any required function
10903                                    should be called by the same code after it closes the dialog.
10904 icon              String           A CSS class that provides a background image to be used as an icon for
10905                                    the dialog (e.g., Roo.MessageBox.WARNING or 'custom-class', defaults to '')
10906 maxWidth          Number           The maximum width in pixels of the message box (defaults to 600)
10907 minWidth          Number           The minimum width in pixels of the message box (defaults to 100)
10908 modal             Boolean          False to allow user interaction with the page while the message box is
10909                                    displayed (defaults to true)
10910 msg               String           A string that will replace the existing message box body text (defaults
10911                                    to the XHTML-compliant non-breaking space character '&#160;')
10912 multiline         Boolean          True to prompt the user to enter multi-line text (defaults to false)
10913 progress          Boolean          True to display a progress bar (defaults to false)
10914 progressText      String           The text to display inside the progress bar if progress = true (defaults to '')
10915 prompt            Boolean          True to prompt the user to enter single-line text (defaults to false)
10916 proxyDrag         Boolean          True to display a lightweight proxy while dragging (defaults to false)
10917 title             String           The title text
10918 value             String           The string value to set into the active textbox element if displayed
10919 wait              Boolean          True to display a progress bar (defaults to false)
10920 width             Number           The width of the dialog in pixels
10921 </pre>
10922          *
10923          * Example usage:
10924          * <pre><code>
10925 Roo.Msg.show({
10926    title: 'Address',
10927    msg: 'Please enter your address:',
10928    width: 300,
10929    buttons: Roo.MessageBox.OKCANCEL,
10930    multiline: true,
10931    fn: saveAddress,
10932    animEl: 'addAddressBtn'
10933 });
10934 </code></pre>
10935          * @param {Object} config Configuration options
10936          * @return {Roo.MessageBox} This message box
10937          */
10938         show : function(options)
10939         {
10940             
10941             // this causes nightmares if you show one dialog after another
10942             // especially on callbacks..
10943              
10944             if(this.isVisible()){
10945                 
10946                 this.hide();
10947                 Roo.log("[Roo.Messagebox] Show called while message displayed:" );
10948                 Roo.log("Old Dialog Message:" +  msgEl.innerHTML );
10949                 Roo.log("New Dialog Message:" +  options.msg )
10950                 //this.alert("ERROR", "Multiple dialogs where displayed at the same time");
10951                 //throw "Roo.MessageBox ERROR : Multiple dialogs where displayed at the same time";
10952                 
10953             }
10954             var d = this.getDialog();
10955             opt = options;
10956             d.setTitle(opt.title || "&#160;");
10957             d.close.setDisplayed(opt.closable !== false);
10958             activeTextEl = textboxEl;
10959             opt.prompt = opt.prompt || (opt.multiline ? true : false);
10960             if(opt.prompt){
10961                 if(opt.multiline){
10962                     textboxEl.hide();
10963                     textareaEl.show();
10964                     textareaEl.setHeight(typeof opt.multiline == "number" ?
10965                         opt.multiline : this.defaultTextHeight);
10966                     activeTextEl = textareaEl;
10967                 }else{
10968                     textboxEl.show();
10969                     textareaEl.hide();
10970                 }
10971             }else{
10972                 textboxEl.hide();
10973                 textareaEl.hide();
10974             }
10975             progressEl.setDisplayed(opt.progress === true);
10976             this.updateProgress(0);
10977             activeTextEl.dom.value = opt.value || "";
10978             if(opt.prompt){
10979                 dlg.setDefaultButton(activeTextEl);
10980             }else{
10981                 var bs = opt.buttons;
10982                 var db = null;
10983                 if(bs && bs.ok){
10984                     db = buttons["ok"];
10985                 }else if(bs && bs.yes){
10986                     db = buttons["yes"];
10987                 }
10988                 dlg.setDefaultButton(db);
10989             }
10990             bwidth = updateButtons(opt.buttons);
10991             this.updateText(opt.msg);
10992             if(opt.cls){
10993                 d.el.addClass(opt.cls);
10994             }
10995             d.proxyDrag = opt.proxyDrag === true;
10996             d.modal = opt.modal !== false;
10997             d.mask = opt.modal !== false ? mask : false;
10998             if(!d.isVisible()){
10999                 // force it to the end of the z-index stack so it gets a cursor in FF
11000                 document.body.appendChild(dlg.el.dom);
11001                 d.animateTarget = null;
11002                 d.show(options.animEl);
11003             }
11004             return this;
11005         },
11006
11007         /**
11008          * Displays a message box with a progress bar.  This message box has no buttons and is not closeable by
11009          * the user.  You are responsible for updating the progress bar as needed via {@link Roo.MessageBox#updateProgress}
11010          * and closing the message box when the process is complete.
11011          * @param {String} title The title bar text
11012          * @param {String} msg The message box body text
11013          * @return {Roo.MessageBox} This message box
11014          */
11015         progress : function(title, msg){
11016             this.show({
11017                 title : title,
11018                 msg : msg,
11019                 buttons: false,
11020                 progress:true,
11021                 closable:false,
11022                 minWidth: this.minProgressWidth,
11023                 modal : true
11024             });
11025             return this;
11026         },
11027
11028         /**
11029          * Displays a standard read-only message box with an OK button (comparable to the basic JavaScript Window.alert).
11030          * If a callback function is passed it will be called after the user clicks the button, and the
11031          * id of the button that was clicked will be passed as the only parameter to the callback
11032          * (could also be the top-right close button).
11033          * @param {String} title The title bar text
11034          * @param {String} msg The message box body text
11035          * @param {Function} fn (optional) The callback function invoked after the message box is closed
11036          * @param {Object} scope (optional) The scope of the callback function
11037          * @return {Roo.MessageBox} This message box
11038          */
11039         alert : function(title, msg, fn, scope){
11040             this.show({
11041                 title : title,
11042                 msg : msg,
11043                 buttons: this.OK,
11044                 fn: fn,
11045                 scope : scope,
11046                 modal : true
11047             });
11048             return this;
11049         },
11050
11051         /**
11052          * Displays a message box with an infinitely auto-updating progress bar.  This can be used to block user
11053          * interaction while waiting for a long-running process to complete that does not have defined intervals.
11054          * You are responsible for closing the message box when the process is complete.
11055          * @param {String} msg The message box body text
11056          * @param {String} title (optional) The title bar text
11057          * @return {Roo.MessageBox} This message box
11058          */
11059         wait : function(msg, title){
11060             this.show({
11061                 title : title,
11062                 msg : msg,
11063                 buttons: false,
11064                 closable:false,
11065                 progress:true,
11066                 modal:true,
11067                 width:300,
11068                 wait:true
11069             });
11070             waitTimer = Roo.TaskMgr.start({
11071                 run: function(i){
11072                     Roo.MessageBox.updateProgress(((((i+20)%20)+1)*5)*.01);
11073                 },
11074                 interval: 1000
11075             });
11076             return this;
11077         },
11078
11079         /**
11080          * Displays a confirmation message box with Yes and No buttons (comparable to JavaScript's Window.confirm).
11081          * If a callback function is passed it will be called after the user clicks either button, and the id of the
11082          * button that was clicked will be passed as the only parameter to the callback (could also be the top-right close button).
11083          * @param {String} title The title bar text
11084          * @param {String} msg The message box body text
11085          * @param {Function} fn (optional) The callback function invoked after the message box is closed
11086          * @param {Object} scope (optional) The scope of the callback function
11087          * @return {Roo.MessageBox} This message box
11088          */
11089         confirm : function(title, msg, fn, scope){
11090             this.show({
11091                 title : title,
11092                 msg : msg,
11093                 buttons: this.YESNO,
11094                 fn: fn,
11095                 scope : scope,
11096                 modal : true
11097             });
11098             return this;
11099         },
11100
11101         /**
11102          * Displays a message box with OK and Cancel buttons prompting the user to enter some text (comparable to
11103          * JavaScript's Window.prompt).  The prompt can be a single-line or multi-line textbox.  If a callback function
11104          * is passed it will be called after the user clicks either button, and the id of the button that was clicked
11105          * (could also be the top-right close button) and the text that was entered will be passed as the two
11106          * parameters to the callback.
11107          * @param {String} title The title bar text
11108          * @param {String} msg The message box body text
11109          * @param {Function} fn (optional) The callback function invoked after the message box is closed
11110          * @param {Object} scope (optional) The scope of the callback function
11111          * @param {Boolean/Number} multiline (optional) True to create a multiline textbox using the defaultTextHeight
11112          * property, or the height in pixels to create the textbox (defaults to false / single-line)
11113          * @return {Roo.MessageBox} This message box
11114          */
11115         prompt : function(title, msg, fn, scope, multiline){
11116             this.show({
11117                 title : title,
11118                 msg : msg,
11119                 buttons: this.OKCANCEL,
11120                 fn: fn,
11121                 minWidth:250,
11122                 scope : scope,
11123                 prompt:true,
11124                 multiline: multiline,
11125                 modal : true
11126             });
11127             return this;
11128         },
11129
11130         /**
11131          * Button config that displays a single OK button
11132          * @type Object
11133          */
11134         OK : {ok:true},
11135         /**
11136          * Button config that displays Yes and No buttons
11137          * @type Object
11138          */
11139         YESNO : {yes:true, no:true},
11140         /**
11141          * Button config that displays OK and Cancel buttons
11142          * @type Object
11143          */
11144         OKCANCEL : {ok:true, cancel:true},
11145         /**
11146          * Button config that displays Yes, No and Cancel buttons
11147          * @type Object
11148          */
11149         YESNOCANCEL : {yes:true, no:true, cancel:true},
11150
11151         /**
11152          * The default height in pixels of the message box's multiline textarea if displayed (defaults to 75)
11153          * @type Number
11154          */
11155         defaultTextHeight : 75,
11156         /**
11157          * The maximum width in pixels of the message box (defaults to 600)
11158          * @type Number
11159          */
11160         maxWidth : 600,
11161         /**
11162          * The minimum width in pixels of the message box (defaults to 100)
11163          * @type Number
11164          */
11165         minWidth : 100,
11166         /**
11167          * The minimum width in pixels of the message box if it is a progress-style dialog.  This is useful
11168          * for setting a different minimum width than text-only dialogs may need (defaults to 250)
11169          * @type Number
11170          */
11171         minProgressWidth : 250,
11172         /**
11173          * An object containing the default button text strings that can be overriden for localized language support.
11174          * Supported properties are: ok, cancel, yes and no.
11175          * Customize the default text like so: Roo.MessageBox.buttonText.yes = "S?";
11176          * @type Object
11177          */
11178         buttonText : {
11179             ok : "OK",
11180             cancel : "Cancel",
11181             yes : "Yes",
11182             no : "No"
11183         }
11184     };
11185 }();
11186
11187 /**
11188  * Shorthand for {@link Roo.MessageBox}
11189  */
11190 Roo.Msg = Roo.MessageBox;/*
11191  * Based on:
11192  * Ext JS Library 1.1.1
11193  * Copyright(c) 2006-2007, Ext JS, LLC.
11194  *
11195  * Originally Released Under LGPL - original licence link has changed is not relivant.
11196  *
11197  * Fork - LGPL
11198  * <script type="text/javascript">
11199  */
11200 /**
11201  * @class Roo.QuickTips
11202  * Provides attractive and customizable tooltips for any element.
11203  * @singleton
11204  */
11205 Roo.QuickTips = function(){
11206     var el, tipBody, tipBodyText, tipTitle, tm, cfg, close, tagEls = {}, esc, removeCls = null, bdLeft, bdRight;
11207     var ce, bd, xy, dd;
11208     var visible = false, disabled = true, inited = false;
11209     var showProc = 1, hideProc = 1, dismissProc = 1, locks = [];
11210     
11211     var onOver = function(e){
11212         if(disabled){
11213             return;
11214         }
11215         var t = e.getTarget();
11216         if(!t || t.nodeType !== 1 || t == document || t == document.body){
11217             return;
11218         }
11219         if(ce && t == ce.el){
11220             clearTimeout(hideProc);
11221             return;
11222         }
11223         if(t && tagEls[t.id]){
11224             tagEls[t.id].el = t;
11225             showProc = show.defer(tm.showDelay, tm, [tagEls[t.id]]);
11226             return;
11227         }
11228         var ttp, et = Roo.fly(t);
11229         var ns = cfg.namespace;
11230         if(tm.interceptTitles && t.title){
11231             ttp = t.title;
11232             t.qtip = ttp;
11233             t.removeAttribute("title");
11234             e.preventDefault();
11235         }else{
11236             ttp = t.qtip || et.getAttributeNS(ns, cfg.attribute) || et.getAttributeNS(cfg.alt_namespace, cfg.attribute) ;
11237         }
11238         if(ttp){
11239             showProc = show.defer(tm.showDelay, tm, [{
11240                 el: t, 
11241                 text: ttp.replace(/\\n/g,'<br/>'),
11242                 width: et.getAttributeNS(ns, cfg.width),
11243                 autoHide: et.getAttributeNS(ns, cfg.hide) != "user",
11244                 title: et.getAttributeNS(ns, cfg.title),
11245                     cls: et.getAttributeNS(ns, cfg.cls)
11246             }]);
11247         }
11248     };
11249     
11250     var onOut = function(e){
11251         clearTimeout(showProc);
11252         var t = e.getTarget();
11253         if(t && ce && ce.el == t && (tm.autoHide && ce.autoHide !== false)){
11254             hideProc = setTimeout(hide, tm.hideDelay);
11255         }
11256     };
11257     
11258     var onMove = function(e){
11259         if(disabled){
11260             return;
11261         }
11262         xy = e.getXY();
11263         xy[1] += 18;
11264         if(tm.trackMouse && ce){
11265             el.setXY(xy);
11266         }
11267     };
11268     
11269     var onDown = function(e){
11270         clearTimeout(showProc);
11271         clearTimeout(hideProc);
11272         if(!e.within(el)){
11273             if(tm.hideOnClick){
11274                 hide();
11275                 tm.disable();
11276                 tm.enable.defer(100, tm);
11277             }
11278         }
11279     };
11280     
11281     var getPad = function(){
11282         return 2;//bdLeft.getPadding('l')+bdRight.getPadding('r');
11283     };
11284
11285     var show = function(o){
11286         if(disabled){
11287             return;
11288         }
11289         clearTimeout(dismissProc);
11290         ce = o;
11291         if(removeCls){ // in case manually hidden
11292             el.removeClass(removeCls);
11293             removeCls = null;
11294         }
11295         if(ce.cls){
11296             el.addClass(ce.cls);
11297             removeCls = ce.cls;
11298         }
11299         if(ce.title){
11300             tipTitle.update(ce.title);
11301             tipTitle.show();
11302         }else{
11303             tipTitle.update('');
11304             tipTitle.hide();
11305         }
11306         el.dom.style.width  = tm.maxWidth+'px';
11307         //tipBody.dom.style.width = '';
11308         tipBodyText.update(o.text);
11309         var p = getPad(), w = ce.width;
11310         if(!w){
11311             var td = tipBodyText.dom;
11312             var aw = Math.max(td.offsetWidth, td.clientWidth, td.scrollWidth);
11313             if(aw > tm.maxWidth){
11314                 w = tm.maxWidth;
11315             }else if(aw < tm.minWidth){
11316                 w = tm.minWidth;
11317             }else{
11318                 w = aw;
11319             }
11320         }
11321         //tipBody.setWidth(w);
11322         el.setWidth(parseInt(w, 10) + p);
11323         if(ce.autoHide === false){
11324             close.setDisplayed(true);
11325             if(dd){
11326                 dd.unlock();
11327             }
11328         }else{
11329             close.setDisplayed(false);
11330             if(dd){
11331                 dd.lock();
11332             }
11333         }
11334         if(xy){
11335             el.avoidY = xy[1]-18;
11336             el.setXY(xy);
11337         }
11338         if(tm.animate){
11339             el.setOpacity(.1);
11340             el.setStyle("visibility", "visible");
11341             el.fadeIn({callback: afterShow});
11342         }else{
11343             afterShow();
11344         }
11345     };
11346     
11347     var afterShow = function(){
11348         if(ce){
11349             el.show();
11350             esc.enable();
11351             if(tm.autoDismiss && ce.autoHide !== false){
11352                 dismissProc = setTimeout(hide, tm.autoDismissDelay);
11353             }
11354         }
11355     };
11356     
11357     var hide = function(noanim){
11358         clearTimeout(dismissProc);
11359         clearTimeout(hideProc);
11360         ce = null;
11361         if(el.isVisible()){
11362             esc.disable();
11363             if(noanim !== true && tm.animate){
11364                 el.fadeOut({callback: afterHide});
11365             }else{
11366                 afterHide();
11367             } 
11368         }
11369     };
11370     
11371     var afterHide = function(){
11372         el.hide();
11373         if(removeCls){
11374             el.removeClass(removeCls);
11375             removeCls = null;
11376         }
11377     };
11378     
11379     return {
11380         /**
11381         * @cfg {Number} minWidth
11382         * The minimum width of the quick tip (defaults to 40)
11383         */
11384        minWidth : 40,
11385         /**
11386         * @cfg {Number} maxWidth
11387         * The maximum width of the quick tip (defaults to 300)
11388         */
11389        maxWidth : 300,
11390         /**
11391         * @cfg {Boolean} interceptTitles
11392         * True to automatically use the element's DOM title value if available (defaults to false)
11393         */
11394        interceptTitles : false,
11395         /**
11396         * @cfg {Boolean} trackMouse
11397         * True to have the quick tip follow the mouse as it moves over the target element (defaults to false)
11398         */
11399        trackMouse : false,
11400         /**
11401         * @cfg {Boolean} hideOnClick
11402         * True to hide the quick tip if the user clicks anywhere in the document (defaults to true)
11403         */
11404        hideOnClick : true,
11405         /**
11406         * @cfg {Number} showDelay
11407         * Delay in milliseconds before the quick tip displays after the mouse enters the target element (defaults to 500)
11408         */
11409        showDelay : 500,
11410         /**
11411         * @cfg {Number} hideDelay
11412         * Delay in milliseconds before the quick tip hides when autoHide = true (defaults to 200)
11413         */
11414        hideDelay : 200,
11415         /**
11416         * @cfg {Boolean} autoHide
11417         * True to automatically hide the quick tip after the mouse exits the target element (defaults to true).
11418         * Used in conjunction with hideDelay.
11419         */
11420        autoHide : true,
11421         /**
11422         * @cfg {Boolean}
11423         * True to automatically hide the quick tip after a set period of time, regardless of the user's actions
11424         * (defaults to true).  Used in conjunction with autoDismissDelay.
11425         */
11426        autoDismiss : true,
11427         /**
11428         * @cfg {Number}
11429         * Delay in milliseconds before the quick tip hides when autoDismiss = true (defaults to 5000)
11430         */
11431        autoDismissDelay : 5000,
11432        /**
11433         * @cfg {Boolean} animate
11434         * True to turn on fade animation. Defaults to false (ClearType/scrollbar flicker issues in IE7).
11435         */
11436        animate : false,
11437
11438        /**
11439         * @cfg {String} title
11440         * Title text to display (defaults to '').  This can be any valid HTML markup.
11441         */
11442         title: '',
11443        /**
11444         * @cfg {String} text
11445         * Body text to display (defaults to '').  This can be any valid HTML markup.
11446         */
11447         text : '',
11448        /**
11449         * @cfg {String} cls
11450         * A CSS class to apply to the base quick tip element (defaults to '').
11451         */
11452         cls : '',
11453        /**
11454         * @cfg {Number} width
11455         * Width in pixels of the quick tip (defaults to auto).  Width will be ignored if it exceeds the bounds of
11456         * minWidth or maxWidth.
11457         */
11458         width : null,
11459
11460     /**
11461      * Initialize and enable QuickTips for first use.  This should be called once before the first attempt to access
11462      * or display QuickTips in a page.
11463      */
11464        init : function(){
11465           tm = Roo.QuickTips;
11466           cfg = tm.tagConfig;
11467           if(!inited){
11468               if(!Roo.isReady){ // allow calling of init() before onReady
11469                   Roo.onReady(Roo.QuickTips.init, Roo.QuickTips);
11470                   return;
11471               }
11472               el = new Roo.Layer({cls:"x-tip", shadow:"drop", shim: true, constrain:true, shadowOffset:4});
11473               el.fxDefaults = {stopFx: true};
11474               // maximum custom styling
11475               //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>');
11476               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>');              
11477               tipTitle = el.child('h3');
11478               tipTitle.enableDisplayMode("block");
11479               tipBody = el.child('div.x-tip-bd');
11480               tipBodyText = el.child('div.x-tip-bd-inner');
11481               //bdLeft = el.child('div.x-tip-bd-left');
11482               //bdRight = el.child('div.x-tip-bd-right');
11483               close = el.child('div.x-tip-close');
11484               close.enableDisplayMode("block");
11485               close.on("click", hide);
11486               var d = Roo.get(document);
11487               d.on("mousedown", onDown);
11488               d.on("mouseover", onOver);
11489               d.on("mouseout", onOut);
11490               d.on("mousemove", onMove);
11491               esc = d.addKeyListener(27, hide);
11492               esc.disable();
11493               if(Roo.dd.DD){
11494                   dd = el.initDD("default", null, {
11495                       onDrag : function(){
11496                           el.sync();  
11497                       }
11498                   });
11499                   dd.setHandleElId(tipTitle.id);
11500                   dd.lock();
11501               }
11502               inited = true;
11503           }
11504           this.enable(); 
11505        },
11506
11507     /**
11508      * Configures a new quick tip instance and assigns it to a target element.  The following config options
11509      * are supported:
11510      * <pre>
11511 Property    Type                   Description
11512 ----------  ---------------------  ------------------------------------------------------------------------
11513 target      Element/String/Array   An Element, id or array of ids that this quick tip should be tied to
11514      * </ul>
11515      * @param {Object} config The config object
11516      */
11517        register : function(config){
11518            var cs = config instanceof Array ? config : arguments;
11519            for(var i = 0, len = cs.length; i < len; i++) {
11520                var c = cs[i];
11521                var target = c.target;
11522                if(target){
11523                    if(target instanceof Array){
11524                        for(var j = 0, jlen = target.length; j < jlen; j++){
11525                            tagEls[target[j]] = c;
11526                        }
11527                    }else{
11528                        tagEls[typeof target == 'string' ? target : Roo.id(target)] = c;
11529                    }
11530                }
11531            }
11532        },
11533
11534     /**
11535      * Removes this quick tip from its element and destroys it.
11536      * @param {String/HTMLElement/Element} el The element from which the quick tip is to be removed.
11537      */
11538        unregister : function(el){
11539            delete tagEls[Roo.id(el)];
11540        },
11541
11542     /**
11543      * Enable this quick tip.
11544      */
11545        enable : function(){
11546            if(inited && disabled){
11547                locks.pop();
11548                if(locks.length < 1){
11549                    disabled = false;
11550                }
11551            }
11552        },
11553
11554     /**
11555      * Disable this quick tip.
11556      */
11557        disable : function(){
11558           disabled = true;
11559           clearTimeout(showProc);
11560           clearTimeout(hideProc);
11561           clearTimeout(dismissProc);
11562           if(ce){
11563               hide(true);
11564           }
11565           locks.push(1);
11566        },
11567
11568     /**
11569      * Returns true if the quick tip is enabled, else false.
11570      */
11571        isEnabled : function(){
11572             return !disabled;
11573        },
11574
11575         // private
11576        tagConfig : {
11577            namespace : "roo", // was ext?? this may break..
11578            alt_namespace : "ext",
11579            attribute : "qtip",
11580            width : "width",
11581            target : "target",
11582            title : "qtitle",
11583            hide : "hide",
11584            cls : "qclass"
11585        }
11586    };
11587 }();
11588
11589 // backwards compat
11590 Roo.QuickTips.tips = Roo.QuickTips.register;/*
11591  * Based on:
11592  * Ext JS Library 1.1.1
11593  * Copyright(c) 2006-2007, Ext JS, LLC.
11594  *
11595  * Originally Released Under LGPL - original licence link has changed is not relivant.
11596  *
11597  * Fork - LGPL
11598  * <script type="text/javascript">
11599  */
11600  
11601
11602 /**
11603  * @class Roo.tree.TreePanel
11604  * @extends Roo.data.Tree
11605
11606  * @cfg {Boolean} rootVisible false to hide the root node (defaults to true)
11607  * @cfg {Boolean} lines false to disable tree lines (defaults to true)
11608  * @cfg {Boolean} enableDD true to enable drag and drop
11609  * @cfg {Boolean} enableDrag true to enable just drag
11610  * @cfg {Boolean} enableDrop true to enable just drop
11611  * @cfg {Object} dragConfig Custom config to pass to the {@link Roo.tree.TreeDragZone} instance
11612  * @cfg {Object} dropConfig Custom config to pass to the {@link Roo.tree.TreeDropZone} instance
11613  * @cfg {String} ddGroup The DD group this TreePanel belongs to
11614  * @cfg {String} ddAppendOnly True if the tree should only allow append drops (use for trees which are sorted)
11615  * @cfg {Boolean} ddScroll true to enable YUI body scrolling
11616  * @cfg {Boolean} containerScroll true to register this container with ScrollManager
11617  * @cfg {Boolean} hlDrop false to disable node highlight on drop (defaults to the value of Roo.enableFx)
11618  * @cfg {String} hlColor The color of the node highlight (defaults to C3DAF9)
11619  * @cfg {Boolean} animate true to enable animated expand/collapse (defaults to the value of Roo.enableFx)
11620  * @cfg {Boolean} singleExpand true if only 1 node per branch may be expanded
11621  * @cfg {Boolean} selModel A tree selection model to use with this TreePanel (defaults to a {@link Roo.tree.DefaultSelectionModel})
11622  * @cfg {Boolean} loader A TreeLoader for use with this TreePanel
11623  * @cfg {Object|Roo.tree.TreeEditor} editor The TreeEditor or xtype data to display when clicked.
11624  * @cfg {String} pathSeparator The token used to separate sub-paths in path strings (defaults to '/')
11625  * @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>
11626  * @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>
11627  * 
11628  * @constructor
11629  * @param {String/HTMLElement/Element} el The container element
11630  * @param {Object} config
11631  */
11632 Roo.tree.TreePanel = function(el, config){
11633     var root = false;
11634     var loader = false;
11635     if (config.root) {
11636         root = config.root;
11637         delete config.root;
11638     }
11639     if (config.loader) {
11640         loader = config.loader;
11641         delete config.loader;
11642     }
11643     
11644     Roo.apply(this, config);
11645     Roo.tree.TreePanel.superclass.constructor.call(this);
11646     this.el = Roo.get(el);
11647     this.el.addClass('x-tree');
11648     //console.log(root);
11649     if (root) {
11650         this.setRootNode( Roo.factory(root, Roo.tree));
11651     }
11652     if (loader) {
11653         this.loader = Roo.factory(loader, Roo.tree);
11654     }
11655    /**
11656     * Read-only. The id of the container element becomes this TreePanel's id.
11657     */
11658     this.id = this.el.id;
11659     this.addEvents({
11660         /**
11661         * @event beforeload
11662         * Fires before a node is loaded, return false to cancel
11663         * @param {Node} node The node being loaded
11664         */
11665         "beforeload" : true,
11666         /**
11667         * @event load
11668         * Fires when a node is loaded
11669         * @param {Node} node The node that was loaded
11670         */
11671         "load" : true,
11672         /**
11673         * @event textchange
11674         * Fires when the text for a node is changed
11675         * @param {Node} node The node
11676         * @param {String} text The new text
11677         * @param {String} oldText The old text
11678         */
11679         "textchange" : true,
11680         /**
11681         * @event beforeexpand
11682         * Fires before a node is expanded, return false to cancel.
11683         * @param {Node} node The node
11684         * @param {Boolean} deep
11685         * @param {Boolean} anim
11686         */
11687         "beforeexpand" : true,
11688         /**
11689         * @event beforecollapse
11690         * Fires before a node is collapsed, return false to cancel.
11691         * @param {Node} node The node
11692         * @param {Boolean} deep
11693         * @param {Boolean} anim
11694         */
11695         "beforecollapse" : true,
11696         /**
11697         * @event expand
11698         * Fires when a node is expanded
11699         * @param {Node} node The node
11700         */
11701         "expand" : true,
11702         /**
11703         * @event disabledchange
11704         * Fires when the disabled status of a node changes
11705         * @param {Node} node The node
11706         * @param {Boolean} disabled
11707         */
11708         "disabledchange" : true,
11709         /**
11710         * @event collapse
11711         * Fires when a node is collapsed
11712         * @param {Node} node The node
11713         */
11714         "collapse" : true,
11715         /**
11716         * @event beforeclick
11717         * Fires before click processing on a node. Return false to cancel the default action.
11718         * @param {Node} node The node
11719         * @param {Roo.EventObject} e The event object
11720         */
11721         "beforeclick":true,
11722         /**
11723         * @event checkchange
11724         * Fires when a node with a checkbox's checked property changes
11725         * @param {Node} this This node
11726         * @param {Boolean} checked
11727         */
11728         "checkchange":true,
11729         /**
11730         * @event click
11731         * Fires when a node is clicked
11732         * @param {Node} node The node
11733         * @param {Roo.EventObject} e The event object
11734         */
11735         "click":true,
11736         /**
11737         * @event dblclick
11738         * Fires when a node is double clicked
11739         * @param {Node} node The node
11740         * @param {Roo.EventObject} e The event object
11741         */
11742         "dblclick":true,
11743         /**
11744         * @event contextmenu
11745         * Fires when a node is right clicked
11746         * @param {Node} node The node
11747         * @param {Roo.EventObject} e The event object
11748         */
11749         "contextmenu":true,
11750         /**
11751         * @event beforechildrenrendered
11752         * Fires right before the child nodes for a node are rendered
11753         * @param {Node} node The node
11754         */
11755         "beforechildrenrendered":true,
11756         /**
11757         * @event startdrag
11758         * Fires when a node starts being dragged
11759         * @param {Roo.tree.TreePanel} this
11760         * @param {Roo.tree.TreeNode} node
11761         * @param {event} e The raw browser event
11762         */ 
11763        "startdrag" : true,
11764        /**
11765         * @event enddrag
11766         * Fires when a drag operation is complete
11767         * @param {Roo.tree.TreePanel} this
11768         * @param {Roo.tree.TreeNode} node
11769         * @param {event} e The raw browser event
11770         */
11771        "enddrag" : true,
11772        /**
11773         * @event dragdrop
11774         * Fires when a dragged node is dropped on a valid DD target
11775         * @param {Roo.tree.TreePanel} this
11776         * @param {Roo.tree.TreeNode} node
11777         * @param {DD} dd The dd it was dropped on
11778         * @param {event} e The raw browser event
11779         */
11780        "dragdrop" : true,
11781        /**
11782         * @event beforenodedrop
11783         * Fires when a DD object is dropped on a node in this tree for preprocessing. Return false to cancel the drop. The dropEvent
11784         * passed to handlers has the following properties:<br />
11785         * <ul style="padding:5px;padding-left:16px;">
11786         * <li>tree - The TreePanel</li>
11787         * <li>target - The node being targeted for the drop</li>
11788         * <li>data - The drag data from the drag source</li>
11789         * <li>point - The point of the drop - append, above or below</li>
11790         * <li>source - The drag source</li>
11791         * <li>rawEvent - Raw mouse event</li>
11792         * <li>dropNode - Drop node(s) provided by the source <b>OR</b> you can supply node(s)
11793         * to be inserted by setting them on this object.</li>
11794         * <li>cancel - Set this to true to cancel the drop.</li>
11795         * </ul>
11796         * @param {Object} dropEvent
11797         */
11798        "beforenodedrop" : true,
11799        /**
11800         * @event nodedrop
11801         * Fires after a DD object is dropped on a node in this tree. The dropEvent
11802         * passed to handlers has the following properties:<br />
11803         * <ul style="padding:5px;padding-left:16px;">
11804         * <li>tree - The TreePanel</li>
11805         * <li>target - The node being targeted for the drop</li>
11806         * <li>data - The drag data from the drag source</li>
11807         * <li>point - The point of the drop - append, above or below</li>
11808         * <li>source - The drag source</li>
11809         * <li>rawEvent - Raw mouse event</li>
11810         * <li>dropNode - Dropped node(s).</li>
11811         * </ul>
11812         * @param {Object} dropEvent
11813         */
11814        "nodedrop" : true,
11815         /**
11816         * @event nodedragover
11817         * Fires when a tree node is being targeted for a drag drop, return false to signal drop not allowed. The dragOverEvent
11818         * passed to handlers has the following properties:<br />
11819         * <ul style="padding:5px;padding-left:16px;">
11820         * <li>tree - The TreePanel</li>
11821         * <li>target - The node being targeted for the drop</li>
11822         * <li>data - The drag data from the drag source</li>
11823         * <li>point - The point of the drop - append, above or below</li>
11824         * <li>source - The drag source</li>
11825         * <li>rawEvent - Raw mouse event</li>
11826         * <li>dropNode - Drop node(s) provided by the source.</li>
11827         * <li>cancel - Set this to true to signal drop not allowed.</li>
11828         * </ul>
11829         * @param {Object} dragOverEvent
11830         */
11831        "nodedragover" : true,
11832        /**
11833         * @event appendnode
11834         * Fires when append node to the tree
11835         * @param {Roo.tree.TreePanel} this
11836         * @param {Roo.tree.TreeNode} node
11837         * @param {Number} index The index of the newly appended node
11838         */
11839        "appendnode" : true
11840         
11841     });
11842     if(this.singleExpand){
11843        this.on("beforeexpand", this.restrictExpand, this);
11844     }
11845     if (this.editor) {
11846         this.editor.tree = this;
11847         this.editor = Roo.factory(this.editor, Roo.tree);
11848     }
11849     
11850     if (this.selModel) {
11851         this.selModel = Roo.factory(this.selModel, Roo.tree);
11852     }
11853    
11854 };
11855 Roo.extend(Roo.tree.TreePanel, Roo.data.Tree, {
11856     rootVisible : true,
11857     animate: Roo.enableFx,
11858     lines : true,
11859     enableDD : false,
11860     hlDrop : Roo.enableFx,
11861   
11862     renderer: false,
11863     
11864     rendererTip: false,
11865     // private
11866     restrictExpand : function(node){
11867         var p = node.parentNode;
11868         if(p){
11869             if(p.expandedChild && p.expandedChild.parentNode == p){
11870                 p.expandedChild.collapse();
11871             }
11872             p.expandedChild = node;
11873         }
11874     },
11875
11876     // private override
11877     setRootNode : function(node){
11878         Roo.tree.TreePanel.superclass.setRootNode.call(this, node);
11879         if(!this.rootVisible){
11880             node.ui = new Roo.tree.RootTreeNodeUI(node);
11881         }
11882         return node;
11883     },
11884
11885     /**
11886      * Returns the container element for this TreePanel
11887      */
11888     getEl : function(){
11889         return this.el;
11890     },
11891
11892     /**
11893      * Returns the default TreeLoader for this TreePanel
11894      */
11895     getLoader : function(){
11896         return this.loader;
11897     },
11898
11899     /**
11900      * Expand all nodes
11901      */
11902     expandAll : function(){
11903         this.root.expand(true);
11904     },
11905
11906     /**
11907      * Collapse all nodes
11908      */
11909     collapseAll : function(){
11910         this.root.collapse(true);
11911     },
11912
11913     /**
11914      * Returns the selection model used by this TreePanel
11915      */
11916     getSelectionModel : function(){
11917         if(!this.selModel){
11918             this.selModel = new Roo.tree.DefaultSelectionModel();
11919         }
11920         return this.selModel;
11921     },
11922
11923     /**
11924      * Retrieve an array of checked nodes, or an array of a specific attribute of checked nodes (e.g. "id")
11925      * @param {String} attribute (optional) Defaults to null (return the actual nodes)
11926      * @param {TreeNode} startNode (optional) The node to start from, defaults to the root
11927      * @return {Array}
11928      */
11929     getChecked : function(a, startNode){
11930         startNode = startNode || this.root;
11931         var r = [];
11932         var f = function(){
11933             if(this.attributes.checked){
11934                 r.push(!a ? this : (a == 'id' ? this.id : this.attributes[a]));
11935             }
11936         }
11937         startNode.cascade(f);
11938         return r;
11939     },
11940
11941     /**
11942      * Expands a specified path in this TreePanel. A path can be retrieved from a node with {@link Roo.data.Node#getPath}
11943      * @param {String} path
11944      * @param {String} attr (optional) The attribute used in the path (see {@link Roo.data.Node#getPath} for more info)
11945      * @param {Function} callback (optional) The callback to call when the expand is complete. The callback will be called with
11946      * (bSuccess, oLastNode) where bSuccess is if the expand was successful and oLastNode is the last node that was expanded.
11947      */
11948     expandPath : function(path, attr, callback){
11949         attr = attr || "id";
11950         var keys = path.split(this.pathSeparator);
11951         var curNode = this.root;
11952         if(curNode.attributes[attr] != keys[1]){ // invalid root
11953             if(callback){
11954                 callback(false, null);
11955             }
11956             return;
11957         }
11958         var index = 1;
11959         var f = function(){
11960             if(++index == keys.length){
11961                 if(callback){
11962                     callback(true, curNode);
11963                 }
11964                 return;
11965             }
11966             var c = curNode.findChild(attr, keys[index]);
11967             if(!c){
11968                 if(callback){
11969                     callback(false, curNode);
11970                 }
11971                 return;
11972             }
11973             curNode = c;
11974             c.expand(false, false, f);
11975         };
11976         curNode.expand(false, false, f);
11977     },
11978
11979     /**
11980      * Selects the node in this tree at the specified path. A path can be retrieved from a node with {@link Roo.data.Node#getPath}
11981      * @param {String} path
11982      * @param {String} attr (optional) The attribute used in the path (see {@link Roo.data.Node#getPath} for more info)
11983      * @param {Function} callback (optional) The callback to call when the selection is complete. The callback will be called with
11984      * (bSuccess, oSelNode) where bSuccess is if the selection was successful and oSelNode is the selected node.
11985      */
11986     selectPath : function(path, attr, callback){
11987         attr = attr || "id";
11988         var keys = path.split(this.pathSeparator);
11989         var v = keys.pop();
11990         if(keys.length > 0){
11991             var f = function(success, node){
11992                 if(success && node){
11993                     var n = node.findChild(attr, v);
11994                     if(n){
11995                         n.select();
11996                         if(callback){
11997                             callback(true, n);
11998                         }
11999                     }else if(callback){
12000                         callback(false, n);
12001                     }
12002                 }else{
12003                     if(callback){
12004                         callback(false, n);
12005                     }
12006                 }
12007             };
12008             this.expandPath(keys.join(this.pathSeparator), attr, f);
12009         }else{
12010             this.root.select();
12011             if(callback){
12012                 callback(true, this.root);
12013             }
12014         }
12015     },
12016
12017     getTreeEl : function(){
12018         return this.el;
12019     },
12020
12021     /**
12022      * Trigger rendering of this TreePanel
12023      */
12024     render : function(){
12025         if (this.innerCt) {
12026             return this; // stop it rendering more than once!!
12027         }
12028         
12029         this.innerCt = this.el.createChild({tag:"ul",
12030                cls:"x-tree-root-ct " +
12031                (this.lines ? "x-tree-lines" : "x-tree-no-lines")});
12032
12033         if(this.containerScroll){
12034             Roo.dd.ScrollManager.register(this.el);
12035         }
12036         if((this.enableDD || this.enableDrop) && !this.dropZone){
12037            /**
12038             * The dropZone used by this tree if drop is enabled
12039             * @type Roo.tree.TreeDropZone
12040             */
12041              this.dropZone = new Roo.tree.TreeDropZone(this, this.dropConfig || {
12042                ddGroup: this.ddGroup || "TreeDD", appendOnly: this.ddAppendOnly === true
12043            });
12044         }
12045         if((this.enableDD || this.enableDrag) && !this.dragZone){
12046            /**
12047             * The dragZone used by this tree if drag is enabled
12048             * @type Roo.tree.TreeDragZone
12049             */
12050             this.dragZone = new Roo.tree.TreeDragZone(this, this.dragConfig || {
12051                ddGroup: this.ddGroup || "TreeDD",
12052                scroll: this.ddScroll
12053            });
12054         }
12055         this.getSelectionModel().init(this);
12056         if (!this.root) {
12057             Roo.log("ROOT not set in tree");
12058             return this;
12059         }
12060         this.root.render();
12061         if(!this.rootVisible){
12062             this.root.renderChildren();
12063         }
12064         return this;
12065     }
12066 });/*
12067  * Based on:
12068  * Ext JS Library 1.1.1
12069  * Copyright(c) 2006-2007, Ext JS, LLC.
12070  *
12071  * Originally Released Under LGPL - original licence link has changed is not relivant.
12072  *
12073  * Fork - LGPL
12074  * <script type="text/javascript">
12075  */
12076  
12077
12078 /**
12079  * @class Roo.tree.DefaultSelectionModel
12080  * @extends Roo.util.Observable
12081  * The default single selection for a TreePanel.
12082  * @param {Object} cfg Configuration
12083  */
12084 Roo.tree.DefaultSelectionModel = function(cfg){
12085    this.selNode = null;
12086    
12087    
12088    
12089    this.addEvents({
12090        /**
12091         * @event selectionchange
12092         * Fires when the selected node changes
12093         * @param {DefaultSelectionModel} this
12094         * @param {TreeNode} node the new selection
12095         */
12096        "selectionchange" : true,
12097
12098        /**
12099         * @event beforeselect
12100         * Fires before the selected node changes, return false to cancel the change
12101         * @param {DefaultSelectionModel} this
12102         * @param {TreeNode} node the new selection
12103         * @param {TreeNode} node the old selection
12104         */
12105        "beforeselect" : true
12106    });
12107    
12108     Roo.tree.DefaultSelectionModel.superclass.constructor.call(this,cfg);
12109 };
12110
12111 Roo.extend(Roo.tree.DefaultSelectionModel, Roo.util.Observable, {
12112     init : function(tree){
12113         this.tree = tree;
12114         tree.getTreeEl().on("keydown", this.onKeyDown, this);
12115         tree.on("click", this.onNodeClick, this);
12116     },
12117     
12118     onNodeClick : function(node, e){
12119         if (e.ctrlKey && this.selNode == node)  {
12120             this.unselect(node);
12121             return;
12122         }
12123         this.select(node);
12124     },
12125     
12126     /**
12127      * Select a node.
12128      * @param {TreeNode} node The node to select
12129      * @return {TreeNode} The selected node
12130      */
12131     select : function(node){
12132         var last = this.selNode;
12133         if(last != node && this.fireEvent('beforeselect', this, node, last) !== false){
12134             if(last){
12135                 last.ui.onSelectedChange(false);
12136             }
12137             this.selNode = node;
12138             node.ui.onSelectedChange(true);
12139             this.fireEvent("selectionchange", this, node, last);
12140         }
12141         return node;
12142     },
12143     
12144     /**
12145      * Deselect a node.
12146      * @param {TreeNode} node The node to unselect
12147      */
12148     unselect : function(node){
12149         if(this.selNode == node){
12150             this.clearSelections();
12151         }    
12152     },
12153     
12154     /**
12155      * Clear all selections
12156      */
12157     clearSelections : function(){
12158         var n = this.selNode;
12159         if(n){
12160             n.ui.onSelectedChange(false);
12161             this.selNode = null;
12162             this.fireEvent("selectionchange", this, null);
12163         }
12164         return n;
12165     },
12166     
12167     /**
12168      * Get the selected node
12169      * @return {TreeNode} The selected node
12170      */
12171     getSelectedNode : function(){
12172         return this.selNode;    
12173     },
12174     
12175     /**
12176      * Returns true if the node is selected
12177      * @param {TreeNode} node The node to check
12178      * @return {Boolean}
12179      */
12180     isSelected : function(node){
12181         return this.selNode == node;  
12182     },
12183
12184     /**
12185      * Selects the node above the selected node in the tree, intelligently walking the nodes
12186      * @return TreeNode The new selection
12187      */
12188     selectPrevious : function(){
12189         var s = this.selNode || this.lastSelNode;
12190         if(!s){
12191             return null;
12192         }
12193         var ps = s.previousSibling;
12194         if(ps){
12195             if(!ps.isExpanded() || ps.childNodes.length < 1){
12196                 return this.select(ps);
12197             } else{
12198                 var lc = ps.lastChild;
12199                 while(lc && lc.isExpanded() && lc.childNodes.length > 0){
12200                     lc = lc.lastChild;
12201                 }
12202                 return this.select(lc);
12203             }
12204         } else if(s.parentNode && (this.tree.rootVisible || !s.parentNode.isRoot)){
12205             return this.select(s.parentNode);
12206         }
12207         return null;
12208     },
12209
12210     /**
12211      * Selects the node above the selected node in the tree, intelligently walking the nodes
12212      * @return TreeNode The new selection
12213      */
12214     selectNext : function(){
12215         var s = this.selNode || this.lastSelNode;
12216         if(!s){
12217             return null;
12218         }
12219         if(s.firstChild && s.isExpanded()){
12220              return this.select(s.firstChild);
12221          }else if(s.nextSibling){
12222              return this.select(s.nextSibling);
12223          }else if(s.parentNode){
12224             var newS = null;
12225             s.parentNode.bubble(function(){
12226                 if(this.nextSibling){
12227                     newS = this.getOwnerTree().selModel.select(this.nextSibling);
12228                     return false;
12229                 }
12230             });
12231             return newS;
12232          }
12233         return null;
12234     },
12235
12236     onKeyDown : function(e){
12237         var s = this.selNode || this.lastSelNode;
12238         // undesirable, but required
12239         var sm = this;
12240         if(!s){
12241             return;
12242         }
12243         var k = e.getKey();
12244         switch(k){
12245              case e.DOWN:
12246                  e.stopEvent();
12247                  this.selectNext();
12248              break;
12249              case e.UP:
12250                  e.stopEvent();
12251                  this.selectPrevious();
12252              break;
12253              case e.RIGHT:
12254                  e.preventDefault();
12255                  if(s.hasChildNodes()){
12256                      if(!s.isExpanded()){
12257                          s.expand();
12258                      }else if(s.firstChild){
12259                          this.select(s.firstChild, e);
12260                      }
12261                  }
12262              break;
12263              case e.LEFT:
12264                  e.preventDefault();
12265                  if(s.hasChildNodes() && s.isExpanded()){
12266                      s.collapse();
12267                  }else if(s.parentNode && (this.tree.rootVisible || s.parentNode != this.tree.getRootNode())){
12268                      this.select(s.parentNode, e);
12269                  }
12270              break;
12271         };
12272     }
12273 });
12274
12275 /**
12276  * @class Roo.tree.MultiSelectionModel
12277  * @extends Roo.util.Observable
12278  * Multi selection for a TreePanel.
12279  * @param {Object} cfg Configuration
12280  */
12281 Roo.tree.MultiSelectionModel = function(){
12282    this.selNodes = [];
12283    this.selMap = {};
12284    this.addEvents({
12285        /**
12286         * @event selectionchange
12287         * Fires when the selected nodes change
12288         * @param {MultiSelectionModel} this
12289         * @param {Array} nodes Array of the selected nodes
12290         */
12291        "selectionchange" : true
12292    });
12293    Roo.tree.MultiSelectionModel.superclass.constructor.call(this,cfg);
12294    
12295 };
12296
12297 Roo.extend(Roo.tree.MultiSelectionModel, Roo.util.Observable, {
12298     init : function(tree){
12299         this.tree = tree;
12300         tree.getTreeEl().on("keydown", this.onKeyDown, this);
12301         tree.on("click", this.onNodeClick, this);
12302     },
12303     
12304     onNodeClick : function(node, e){
12305         this.select(node, e, e.ctrlKey);
12306     },
12307     
12308     /**
12309      * Select a node.
12310      * @param {TreeNode} node The node to select
12311      * @param {EventObject} e (optional) An event associated with the selection
12312      * @param {Boolean} keepExisting True to retain existing selections
12313      * @return {TreeNode} The selected node
12314      */
12315     select : function(node, e, keepExisting){
12316         if(keepExisting !== true){
12317             this.clearSelections(true);
12318         }
12319         if(this.isSelected(node)){
12320             this.lastSelNode = node;
12321             return node;
12322         }
12323         this.selNodes.push(node);
12324         this.selMap[node.id] = node;
12325         this.lastSelNode = node;
12326         node.ui.onSelectedChange(true);
12327         this.fireEvent("selectionchange", this, this.selNodes);
12328         return node;
12329     },
12330     
12331     /**
12332      * Deselect a node.
12333      * @param {TreeNode} node The node to unselect
12334      */
12335     unselect : function(node){
12336         if(this.selMap[node.id]){
12337             node.ui.onSelectedChange(false);
12338             var sn = this.selNodes;
12339             var index = -1;
12340             if(sn.indexOf){
12341                 index = sn.indexOf(node);
12342             }else{
12343                 for(var i = 0, len = sn.length; i < len; i++){
12344                     if(sn[i] == node){
12345                         index = i;
12346                         break;
12347                     }
12348                 }
12349             }
12350             if(index != -1){
12351                 this.selNodes.splice(index, 1);
12352             }
12353             delete this.selMap[node.id];
12354             this.fireEvent("selectionchange", this, this.selNodes);
12355         }
12356     },
12357     
12358     /**
12359      * Clear all selections
12360      */
12361     clearSelections : function(suppressEvent){
12362         var sn = this.selNodes;
12363         if(sn.length > 0){
12364             for(var i = 0, len = sn.length; i < len; i++){
12365                 sn[i].ui.onSelectedChange(false);
12366             }
12367             this.selNodes = [];
12368             this.selMap = {};
12369             if(suppressEvent !== true){
12370                 this.fireEvent("selectionchange", this, this.selNodes);
12371             }
12372         }
12373     },
12374     
12375     /**
12376      * Returns true if the node is selected
12377      * @param {TreeNode} node The node to check
12378      * @return {Boolean}
12379      */
12380     isSelected : function(node){
12381         return this.selMap[node.id] ? true : false;  
12382     },
12383     
12384     /**
12385      * Returns an array of the selected nodes
12386      * @return {Array}
12387      */
12388     getSelectedNodes : function(){
12389         return this.selNodes;    
12390     },
12391
12392     onKeyDown : Roo.tree.DefaultSelectionModel.prototype.onKeyDown,
12393
12394     selectNext : Roo.tree.DefaultSelectionModel.prototype.selectNext,
12395
12396     selectPrevious : Roo.tree.DefaultSelectionModel.prototype.selectPrevious
12397 });/*
12398  * Based on:
12399  * Ext JS Library 1.1.1
12400  * Copyright(c) 2006-2007, Ext JS, LLC.
12401  *
12402  * Originally Released Under LGPL - original licence link has changed is not relivant.
12403  *
12404  * Fork - LGPL
12405  * <script type="text/javascript">
12406  */
12407  
12408 /**
12409  * @class Roo.tree.TreeNode
12410  * @extends Roo.data.Node
12411  * @cfg {String} text The text for this node
12412  * @cfg {Boolean} expanded true to start the node expanded
12413  * @cfg {Boolean} allowDrag false to make this node undraggable if DD is on (defaults to true)
12414  * @cfg {Boolean} allowDrop false if this node cannot be drop on
12415  * @cfg {Boolean} disabled true to start the node disabled
12416  * @cfg {String} icon The path to an icon for the node. The preferred way to do this
12417  *    is to use the cls or iconCls attributes and add the icon via a CSS background image.
12418  * @cfg {String} cls A css class to be added to the node
12419  * @cfg {String} iconCls A css class to be added to the nodes icon element for applying css background images
12420  * @cfg {String} href URL of the link used for the node (defaults to #)
12421  * @cfg {String} hrefTarget target frame for the link
12422  * @cfg {String} qtip An Ext QuickTip for the node
12423  * @cfg {String} qtipCfg An Ext QuickTip config for the node (used instead of qtip)
12424  * @cfg {Boolean} singleClickExpand True for single click expand on this node
12425  * @cfg {Function} uiProvider A UI <b>class</b> to use for this node (defaults to Roo.tree.TreeNodeUI)
12426  * @cfg {Boolean} checked True to render a checked checkbox for this node, false to render an unchecked checkbox
12427  * (defaults to undefined with no checkbox rendered)
12428  * @constructor
12429  * @param {Object/String} attributes The attributes/config for the node or just a string with the text for the node
12430  */
12431 Roo.tree.TreeNode = function(attributes){
12432     attributes = attributes || {};
12433     if(typeof attributes == "string"){
12434         attributes = {text: attributes};
12435     }
12436     this.childrenRendered = false;
12437     this.rendered = false;
12438     Roo.tree.TreeNode.superclass.constructor.call(this, attributes);
12439     this.expanded = attributes.expanded === true;
12440     this.isTarget = attributes.isTarget !== false;
12441     this.draggable = attributes.draggable !== false && attributes.allowDrag !== false;
12442     this.allowChildren = attributes.allowChildren !== false && attributes.allowDrop !== false;
12443
12444     /**
12445      * Read-only. The text for this node. To change it use setText().
12446      * @type String
12447      */
12448     this.text = attributes.text;
12449     /**
12450      * True if this node is disabled.
12451      * @type Boolean
12452      */
12453     this.disabled = attributes.disabled === true;
12454
12455     this.addEvents({
12456         /**
12457         * @event textchange
12458         * Fires when the text for this node is changed
12459         * @param {Node} this This node
12460         * @param {String} text The new text
12461         * @param {String} oldText The old text
12462         */
12463         "textchange" : true,
12464         /**
12465         * @event beforeexpand
12466         * Fires before this node is expanded, return false to cancel.
12467         * @param {Node} this This node
12468         * @param {Boolean} deep
12469         * @param {Boolean} anim
12470         */
12471         "beforeexpand" : true,
12472         /**
12473         * @event beforecollapse
12474         * Fires before this node is collapsed, return false to cancel.
12475         * @param {Node} this This node
12476         * @param {Boolean} deep
12477         * @param {Boolean} anim
12478         */
12479         "beforecollapse" : true,
12480         /**
12481         * @event expand
12482         * Fires when this node is expanded
12483         * @param {Node} this This node
12484         */
12485         "expand" : true,
12486         /**
12487         * @event disabledchange
12488         * Fires when the disabled status of this node changes
12489         * @param {Node} this This node
12490         * @param {Boolean} disabled
12491         */
12492         "disabledchange" : true,
12493         /**
12494         * @event collapse
12495         * Fires when this node is collapsed
12496         * @param {Node} this This node
12497         */
12498         "collapse" : true,
12499         /**
12500         * @event beforeclick
12501         * Fires before click processing. Return false to cancel the default action.
12502         * @param {Node} this This node
12503         * @param {Roo.EventObject} e The event object
12504         */
12505         "beforeclick":true,
12506         /**
12507         * @event checkchange
12508         * Fires when a node with a checkbox's checked property changes
12509         * @param {Node} this This node
12510         * @param {Boolean} checked
12511         */
12512         "checkchange":true,
12513         /**
12514         * @event click
12515         * Fires when this node is clicked
12516         * @param {Node} this This node
12517         * @param {Roo.EventObject} e The event object
12518         */
12519         "click":true,
12520         /**
12521         * @event dblclick
12522         * Fires when this node is double clicked
12523         * @param {Node} this This node
12524         * @param {Roo.EventObject} e The event object
12525         */
12526         "dblclick":true,
12527         /**
12528         * @event contextmenu
12529         * Fires when this node is right clicked
12530         * @param {Node} this This node
12531         * @param {Roo.EventObject} e The event object
12532         */
12533         "contextmenu":true,
12534         /**
12535         * @event beforechildrenrendered
12536         * Fires right before the child nodes for this node are rendered
12537         * @param {Node} this This node
12538         */
12539         "beforechildrenrendered":true
12540     });
12541
12542     var uiClass = this.attributes.uiProvider || Roo.tree.TreeNodeUI;
12543
12544     /**
12545      * Read-only. The UI for this node
12546      * @type TreeNodeUI
12547      */
12548     this.ui = new uiClass(this);
12549     
12550     // finally support items[]
12551     if (typeof(this.attributes.items) == 'undefined' || !this.attributes.items) {
12552         return;
12553     }
12554     
12555     
12556     Roo.each(this.attributes.items, function(c) {
12557         this.appendChild(Roo.factory(c,Roo.Tree));
12558     }, this);
12559     delete this.attributes.items;
12560     
12561     
12562     
12563 };
12564 Roo.extend(Roo.tree.TreeNode, Roo.data.Node, {
12565     preventHScroll: true,
12566     /**
12567      * Returns true if this node is expanded
12568      * @return {Boolean}
12569      */
12570     isExpanded : function(){
12571         return this.expanded;
12572     },
12573
12574     /**
12575      * Returns the UI object for this node
12576      * @return {TreeNodeUI}
12577      */
12578     getUI : function(){
12579         return this.ui;
12580     },
12581
12582     // private override
12583     setFirstChild : function(node){
12584         var of = this.firstChild;
12585         Roo.tree.TreeNode.superclass.setFirstChild.call(this, node);
12586         if(this.childrenRendered && of && node != of){
12587             of.renderIndent(true, true);
12588         }
12589         if(this.rendered){
12590             this.renderIndent(true, true);
12591         }
12592     },
12593
12594     // private override
12595     setLastChild : function(node){
12596         var ol = this.lastChild;
12597         Roo.tree.TreeNode.superclass.setLastChild.call(this, node);
12598         if(this.childrenRendered && ol && node != ol){
12599             ol.renderIndent(true, true);
12600         }
12601         if(this.rendered){
12602             this.renderIndent(true, true);
12603         }
12604     },
12605
12606     // these methods are overridden to provide lazy rendering support
12607     // private override
12608     appendChild : function()
12609     {
12610         var node = Roo.tree.TreeNode.superclass.appendChild.apply(this, arguments);
12611         if(node && this.childrenRendered){
12612             node.render();
12613         }
12614         this.ui.updateExpandIcon();
12615         return node;
12616     },
12617
12618     // private override
12619     removeChild : function(node){
12620         this.ownerTree.getSelectionModel().unselect(node);
12621         Roo.tree.TreeNode.superclass.removeChild.apply(this, arguments);
12622         // if it's been rendered remove dom node
12623         if(this.childrenRendered){
12624             node.ui.remove();
12625         }
12626         if(this.childNodes.length < 1){
12627             this.collapse(false, false);
12628         }else{
12629             this.ui.updateExpandIcon();
12630         }
12631         if(!this.firstChild) {
12632             this.childrenRendered = false;
12633         }
12634         return node;
12635     },
12636
12637     // private override
12638     insertBefore : function(node, refNode){
12639         var newNode = Roo.tree.TreeNode.superclass.insertBefore.apply(this, arguments);
12640         if(newNode && refNode && this.childrenRendered){
12641             node.render();
12642         }
12643         this.ui.updateExpandIcon();
12644         return newNode;
12645     },
12646
12647     /**
12648      * Sets the text for this node
12649      * @param {String} text
12650      */
12651     setText : function(text){
12652         var oldText = this.text;
12653         this.text = text;
12654         this.attributes.text = text;
12655         if(this.rendered){ // event without subscribing
12656             this.ui.onTextChange(this, text, oldText);
12657         }
12658         this.fireEvent("textchange", this, text, oldText);
12659     },
12660
12661     /**
12662      * Triggers selection of this node
12663      */
12664     select : function(){
12665         this.getOwnerTree().getSelectionModel().select(this);
12666     },
12667
12668     /**
12669      * Triggers deselection of this node
12670      */
12671     unselect : function(){
12672         this.getOwnerTree().getSelectionModel().unselect(this);
12673     },
12674
12675     /**
12676      * Returns true if this node is selected
12677      * @return {Boolean}
12678      */
12679     isSelected : function(){
12680         return this.getOwnerTree().getSelectionModel().isSelected(this);
12681     },
12682
12683     /**
12684      * Expand this node.
12685      * @param {Boolean} deep (optional) True to expand all children as well
12686      * @param {Boolean} anim (optional) false to cancel the default animation
12687      * @param {Function} callback (optional) A callback to be called when
12688      * expanding this node completes (does not wait for deep expand to complete).
12689      * Called with 1 parameter, this node.
12690      */
12691     expand : function(deep, anim, callback){
12692         if(!this.expanded){
12693             if(this.fireEvent("beforeexpand", this, deep, anim) === false){
12694                 return;
12695             }
12696             if(!this.childrenRendered){
12697                 this.renderChildren();
12698             }
12699             this.expanded = true;
12700             
12701             if(!this.isHiddenRoot() && (this.getOwnerTree() && this.getOwnerTree().animate && anim !== false) || anim){
12702                 this.ui.animExpand(function(){
12703                     this.fireEvent("expand", this);
12704                     if(typeof callback == "function"){
12705                         callback(this);
12706                     }
12707                     if(deep === true){
12708                         this.expandChildNodes(true);
12709                     }
12710                 }.createDelegate(this));
12711                 return;
12712             }else{
12713                 this.ui.expand();
12714                 this.fireEvent("expand", this);
12715                 if(typeof callback == "function"){
12716                     callback(this);
12717                 }
12718             }
12719         }else{
12720            if(typeof callback == "function"){
12721                callback(this);
12722            }
12723         }
12724         if(deep === true){
12725             this.expandChildNodes(true);
12726         }
12727     },
12728
12729     isHiddenRoot : function(){
12730         return this.isRoot && !this.getOwnerTree().rootVisible;
12731     },
12732
12733     /**
12734      * Collapse this node.
12735      * @param {Boolean} deep (optional) True to collapse all children as well
12736      * @param {Boolean} anim (optional) false to cancel the default animation
12737      */
12738     collapse : function(deep, anim){
12739         if(this.expanded && !this.isHiddenRoot()){
12740             if(this.fireEvent("beforecollapse", this, deep, anim) === false){
12741                 return;
12742             }
12743             this.expanded = false;
12744             if((this.getOwnerTree().animate && anim !== false) || anim){
12745                 this.ui.animCollapse(function(){
12746                     this.fireEvent("collapse", this);
12747                     if(deep === true){
12748                         this.collapseChildNodes(true);
12749                     }
12750                 }.createDelegate(this));
12751                 return;
12752             }else{
12753                 this.ui.collapse();
12754                 this.fireEvent("collapse", this);
12755             }
12756         }
12757         if(deep === true){
12758             var cs = this.childNodes;
12759             for(var i = 0, len = cs.length; i < len; i++) {
12760                 cs[i].collapse(true, false);
12761             }
12762         }
12763     },
12764
12765     // private
12766     delayedExpand : function(delay){
12767         if(!this.expandProcId){
12768             this.expandProcId = this.expand.defer(delay, this);
12769         }
12770     },
12771
12772     // private
12773     cancelExpand : function(){
12774         if(this.expandProcId){
12775             clearTimeout(this.expandProcId);
12776         }
12777         this.expandProcId = false;
12778     },
12779
12780     /**
12781      * Toggles expanded/collapsed state of the node
12782      */
12783     toggle : function(){
12784         if(this.expanded){
12785             this.collapse();
12786         }else{
12787             this.expand();
12788         }
12789     },
12790
12791     /**
12792      * Ensures all parent nodes are expanded
12793      */
12794     ensureVisible : function(callback){
12795         var tree = this.getOwnerTree();
12796         tree.expandPath(this.parentNode.getPath(), false, function(){
12797             tree.getTreeEl().scrollChildIntoView(this.ui.anchor);
12798             Roo.callback(callback);
12799         }.createDelegate(this));
12800     },
12801
12802     /**
12803      * Expand all child nodes
12804      * @param {Boolean} deep (optional) true if the child nodes should also expand their child nodes
12805      */
12806     expandChildNodes : function(deep){
12807         var cs = this.childNodes;
12808         for(var i = 0, len = cs.length; i < len; i++) {
12809                 cs[i].expand(deep);
12810         }
12811     },
12812
12813     /**
12814      * Collapse all child nodes
12815      * @param {Boolean} deep (optional) true if the child nodes should also collapse their child nodes
12816      */
12817     collapseChildNodes : function(deep){
12818         var cs = this.childNodes;
12819         for(var i = 0, len = cs.length; i < len; i++) {
12820                 cs[i].collapse(deep);
12821         }
12822     },
12823
12824     /**
12825      * Disables this node
12826      */
12827     disable : function(){
12828         this.disabled = true;
12829         this.unselect();
12830         if(this.rendered && this.ui.onDisableChange){ // event without subscribing
12831             this.ui.onDisableChange(this, true);
12832         }
12833         this.fireEvent("disabledchange", this, true);
12834     },
12835
12836     /**
12837      * Enables this node
12838      */
12839     enable : function(){
12840         this.disabled = false;
12841         if(this.rendered && this.ui.onDisableChange){ // event without subscribing
12842             this.ui.onDisableChange(this, false);
12843         }
12844         this.fireEvent("disabledchange", this, false);
12845     },
12846
12847     // private
12848     renderChildren : function(suppressEvent){
12849         if(suppressEvent !== false){
12850             this.fireEvent("beforechildrenrendered", this);
12851         }
12852         var cs = this.childNodes;
12853         for(var i = 0, len = cs.length; i < len; i++){
12854             cs[i].render(true);
12855         }
12856         this.childrenRendered = true;
12857     },
12858
12859     // private
12860     sort : function(fn, scope){
12861         Roo.tree.TreeNode.superclass.sort.apply(this, arguments);
12862         if(this.childrenRendered){
12863             var cs = this.childNodes;
12864             for(var i = 0, len = cs.length; i < len; i++){
12865                 cs[i].render(true);
12866             }
12867         }
12868     },
12869
12870     // private
12871     render : function(bulkRender){
12872         this.ui.render(bulkRender);
12873         if(!this.rendered){
12874             this.rendered = true;
12875             if(this.expanded){
12876                 this.expanded = false;
12877                 this.expand(false, false);
12878             }
12879         }
12880     },
12881
12882     // private
12883     renderIndent : function(deep, refresh){
12884         if(refresh){
12885             this.ui.childIndent = null;
12886         }
12887         this.ui.renderIndent();
12888         if(deep === true && this.childrenRendered){
12889             var cs = this.childNodes;
12890             for(var i = 0, len = cs.length; i < len; i++){
12891                 cs[i].renderIndent(true, refresh);
12892             }
12893         }
12894     }
12895 });/*
12896  * Based on:
12897  * Ext JS Library 1.1.1
12898  * Copyright(c) 2006-2007, Ext JS, LLC.
12899  *
12900  * Originally Released Under LGPL - original licence link has changed is not relivant.
12901  *
12902  * Fork - LGPL
12903  * <script type="text/javascript">
12904  */
12905  
12906 /**
12907  * @class Roo.tree.AsyncTreeNode
12908  * @extends Roo.tree.TreeNode
12909  * @cfg {TreeLoader} loader A TreeLoader to be used by this node (defaults to the loader defined on the tree)
12910  * @constructor
12911  * @param {Object/String} attributes The attributes/config for the node or just a string with the text for the node 
12912  */
12913  Roo.tree.AsyncTreeNode = function(config){
12914     this.loaded = false;
12915     this.loading = false;
12916     Roo.tree.AsyncTreeNode.superclass.constructor.apply(this, arguments);
12917     /**
12918     * @event beforeload
12919     * Fires before this node is loaded, return false to cancel
12920     * @param {Node} this This node
12921     */
12922     this.addEvents({'beforeload':true, 'load': true});
12923     /**
12924     * @event load
12925     * Fires when this node is loaded
12926     * @param {Node} this This node
12927     */
12928     /**
12929      * The loader used by this node (defaults to using the tree's defined loader)
12930      * @type TreeLoader
12931      * @property loader
12932      */
12933 };
12934 Roo.extend(Roo.tree.AsyncTreeNode, Roo.tree.TreeNode, {
12935     expand : function(deep, anim, callback){
12936         if(this.loading){ // if an async load is already running, waiting til it's done
12937             var timer;
12938             var f = function(){
12939                 if(!this.loading){ // done loading
12940                     clearInterval(timer);
12941                     this.expand(deep, anim, callback);
12942                 }
12943             }.createDelegate(this);
12944             timer = setInterval(f, 200);
12945             return;
12946         }
12947         if(!this.loaded){
12948             if(this.fireEvent("beforeload", this) === false){
12949                 return;
12950             }
12951             this.loading = true;
12952             this.ui.beforeLoad(this);
12953             var loader = this.loader || this.attributes.loader || this.getOwnerTree().getLoader();
12954             if(loader){
12955                 loader.load(this, this.loadComplete.createDelegate(this, [deep, anim, callback]));
12956                 return;
12957             }
12958         }
12959         Roo.tree.AsyncTreeNode.superclass.expand.call(this, deep, anim, callback);
12960     },
12961     
12962     /**
12963      * Returns true if this node is currently loading
12964      * @return {Boolean}
12965      */
12966     isLoading : function(){
12967         return this.loading;  
12968     },
12969     
12970     loadComplete : function(deep, anim, callback){
12971         this.loading = false;
12972         this.loaded = true;
12973         this.ui.afterLoad(this);
12974         this.fireEvent("load", this);
12975         this.expand(deep, anim, callback);
12976     },
12977     
12978     /**
12979      * Returns true if this node has been loaded
12980      * @return {Boolean}
12981      */
12982     isLoaded : function(){
12983         return this.loaded;
12984     },
12985     
12986     hasChildNodes : function(){
12987         if(!this.isLeaf() && !this.loaded){
12988             return true;
12989         }else{
12990             return Roo.tree.AsyncTreeNode.superclass.hasChildNodes.call(this);
12991         }
12992     },
12993
12994     /**
12995      * Trigger a reload for this node
12996      * @param {Function} callback
12997      */
12998     reload : function(callback){
12999         this.collapse(false, false);
13000         while(this.firstChild){
13001             this.removeChild(this.firstChild);
13002         }
13003         this.childrenRendered = false;
13004         this.loaded = false;
13005         if(this.isHiddenRoot()){
13006             this.expanded = false;
13007         }
13008         this.expand(false, false, callback);
13009     }
13010 });/*
13011  * Based on:
13012  * Ext JS Library 1.1.1
13013  * Copyright(c) 2006-2007, Ext JS, LLC.
13014  *
13015  * Originally Released Under LGPL - original licence link has changed is not relivant.
13016  *
13017  * Fork - LGPL
13018  * <script type="text/javascript">
13019  */
13020  
13021 /**
13022  * @class Roo.tree.TreeNodeUI
13023  * @constructor
13024  * @param {Object} node The node to render
13025  * The TreeNode UI implementation is separate from the
13026  * tree implementation. Unless you are customizing the tree UI,
13027  * you should never have to use this directly.
13028  */
13029 Roo.tree.TreeNodeUI = function(node){
13030     this.node = node;
13031     this.rendered = false;
13032     this.animating = false;
13033     this.emptyIcon = Roo.BLANK_IMAGE_URL;
13034 };
13035
13036 Roo.tree.TreeNodeUI.prototype = {
13037     removeChild : function(node){
13038         if(this.rendered){
13039             this.ctNode.removeChild(node.ui.getEl());
13040         }
13041     },
13042
13043     beforeLoad : function(){
13044          this.addClass("x-tree-node-loading");
13045     },
13046
13047     afterLoad : function(){
13048          this.removeClass("x-tree-node-loading");
13049     },
13050
13051     onTextChange : function(node, text, oldText){
13052         if(this.rendered){
13053             this.textNode.innerHTML = text;
13054         }
13055     },
13056
13057     onDisableChange : function(node, state){
13058         this.disabled = state;
13059         if(state){
13060             this.addClass("x-tree-node-disabled");
13061         }else{
13062             this.removeClass("x-tree-node-disabled");
13063         }
13064     },
13065
13066     onSelectedChange : function(state){
13067         if(state){
13068             this.focus();
13069             this.addClass("x-tree-selected");
13070         }else{
13071             //this.blur();
13072             this.removeClass("x-tree-selected");
13073         }
13074     },
13075
13076     onMove : function(tree, node, oldParent, newParent, index, refNode){
13077         this.childIndent = null;
13078         if(this.rendered){
13079             var targetNode = newParent.ui.getContainer();
13080             if(!targetNode){//target not rendered
13081                 this.holder = document.createElement("div");
13082                 this.holder.appendChild(this.wrap);
13083                 return;
13084             }
13085             var insertBefore = refNode ? refNode.ui.getEl() : null;
13086             if(insertBefore){
13087                 targetNode.insertBefore(this.wrap, insertBefore);
13088             }else{
13089                 targetNode.appendChild(this.wrap);
13090             }
13091             this.node.renderIndent(true);
13092         }
13093     },
13094
13095     addClass : function(cls){
13096         if(this.elNode){
13097             Roo.fly(this.elNode).addClass(cls);
13098         }
13099     },
13100
13101     removeClass : function(cls){
13102         if(this.elNode){
13103             Roo.fly(this.elNode).removeClass(cls);
13104         }
13105     },
13106
13107     remove : function(){
13108         if(this.rendered){
13109             this.holder = document.createElement("div");
13110             this.holder.appendChild(this.wrap);
13111         }
13112     },
13113
13114     fireEvent : function(){
13115         return this.node.fireEvent.apply(this.node, arguments);
13116     },
13117
13118     initEvents : function(){
13119         this.node.on("move", this.onMove, this);
13120         var E = Roo.EventManager;
13121         var a = this.anchor;
13122
13123         var el = Roo.fly(a, '_treeui');
13124
13125         if(Roo.isOpera){ // opera render bug ignores the CSS
13126             el.setStyle("text-decoration", "none");
13127         }
13128
13129         el.on("click", this.onClick, this);
13130         el.on("dblclick", this.onDblClick, this);
13131
13132         if(this.checkbox){
13133             Roo.EventManager.on(this.checkbox,
13134                     Roo.isIE ? 'click' : 'change', this.onCheckChange, this);
13135         }
13136
13137         el.on("contextmenu", this.onContextMenu, this);
13138
13139         var icon = Roo.fly(this.iconNode);
13140         icon.on("click", this.onClick, this);
13141         icon.on("dblclick", this.onDblClick, this);
13142         icon.on("contextmenu", this.onContextMenu, this);
13143         E.on(this.ecNode, "click", this.ecClick, this, true);
13144
13145         if(this.node.disabled){
13146             this.addClass("x-tree-node-disabled");
13147         }
13148         if(this.node.hidden){
13149             this.addClass("x-tree-node-disabled");
13150         }
13151         var ot = this.node.getOwnerTree();
13152         var dd = ot ? (ot.enableDD || ot.enableDrag || ot.enableDrop) : false;
13153         if(dd && (!this.node.isRoot || ot.rootVisible)){
13154             Roo.dd.Registry.register(this.elNode, {
13155                 node: this.node,
13156                 handles: this.getDDHandles(),
13157                 isHandle: false
13158             });
13159         }
13160     },
13161
13162     getDDHandles : function(){
13163         return [this.iconNode, this.textNode];
13164     },
13165
13166     hide : function(){
13167         if(this.rendered){
13168             this.wrap.style.display = "none";
13169         }
13170     },
13171
13172     show : function(){
13173         if(this.rendered){
13174             this.wrap.style.display = "";
13175         }
13176     },
13177
13178     onContextMenu : function(e){
13179         if (this.node.hasListener("contextmenu") || this.node.getOwnerTree().hasListener("contextmenu")) {
13180             e.preventDefault();
13181             this.focus();
13182             this.fireEvent("contextmenu", this.node, e);
13183         }
13184     },
13185
13186     onClick : function(e){
13187         if(this.dropping){
13188             e.stopEvent();
13189             return;
13190         }
13191         if(this.fireEvent("beforeclick", this.node, e) !== false){
13192             if(!this.disabled && this.node.attributes.href){
13193                 this.fireEvent("click", this.node, e);
13194                 return;
13195             }
13196             e.preventDefault();
13197             if(this.disabled){
13198                 return;
13199             }
13200
13201             if(this.node.attributes.singleClickExpand && !this.animating && this.node.hasChildNodes()){
13202                 this.node.toggle();
13203             }
13204
13205             this.fireEvent("click", this.node, e);
13206         }else{
13207             e.stopEvent();
13208         }
13209     },
13210
13211     onDblClick : function(e){
13212         e.preventDefault();
13213         if(this.disabled){
13214             return;
13215         }
13216         if(this.checkbox){
13217             this.toggleCheck();
13218         }
13219         if(!this.animating && this.node.hasChildNodes()){
13220             this.node.toggle();
13221         }
13222         this.fireEvent("dblclick", this.node, e);
13223     },
13224
13225     onCheckChange : function(){
13226         var checked = this.checkbox.checked;
13227         this.node.attributes.checked = checked;
13228         this.fireEvent('checkchange', this.node, checked);
13229     },
13230
13231     ecClick : function(e){
13232         if(!this.animating && this.node.hasChildNodes()){
13233             this.node.toggle();
13234         }
13235     },
13236
13237     startDrop : function(){
13238         this.dropping = true;
13239     },
13240
13241     // delayed drop so the click event doesn't get fired on a drop
13242     endDrop : function(){
13243        setTimeout(function(){
13244            this.dropping = false;
13245        }.createDelegate(this), 50);
13246     },
13247
13248     expand : function(){
13249         this.updateExpandIcon();
13250         this.ctNode.style.display = "";
13251     },
13252
13253     focus : function(){
13254         if(!this.node.preventHScroll){
13255             try{this.anchor.focus();
13256             }catch(e){}
13257         }else if(!Roo.isIE){
13258             try{
13259                 var noscroll = this.node.getOwnerTree().getTreeEl().dom;
13260                 var l = noscroll.scrollLeft;
13261                 this.anchor.focus();
13262                 noscroll.scrollLeft = l;
13263             }catch(e){}
13264         }
13265     },
13266
13267     toggleCheck : function(value){
13268         var cb = this.checkbox;
13269         if(cb){
13270             cb.checked = (value === undefined ? !cb.checked : value);
13271         }
13272     },
13273
13274     blur : function(){
13275         try{
13276             this.anchor.blur();
13277         }catch(e){}
13278     },
13279
13280     animExpand : function(callback){
13281         var ct = Roo.get(this.ctNode);
13282         ct.stopFx();
13283         if(!this.node.hasChildNodes()){
13284             this.updateExpandIcon();
13285             this.ctNode.style.display = "";
13286             Roo.callback(callback);
13287             return;
13288         }
13289         this.animating = true;
13290         this.updateExpandIcon();
13291
13292         ct.slideIn('t', {
13293            callback : function(){
13294                this.animating = false;
13295                Roo.callback(callback);
13296             },
13297             scope: this,
13298             duration: this.node.ownerTree.duration || .25
13299         });
13300     },
13301
13302     highlight : function(){
13303         var tree = this.node.getOwnerTree();
13304         Roo.fly(this.wrap).highlight(
13305             tree.hlColor || "C3DAF9",
13306             {endColor: tree.hlBaseColor}
13307         );
13308     },
13309
13310     collapse : function(){
13311         this.updateExpandIcon();
13312         this.ctNode.style.display = "none";
13313     },
13314
13315     animCollapse : function(callback){
13316         var ct = Roo.get(this.ctNode);
13317         ct.enableDisplayMode('block');
13318         ct.stopFx();
13319
13320         this.animating = true;
13321         this.updateExpandIcon();
13322
13323         ct.slideOut('t', {
13324             callback : function(){
13325                this.animating = false;
13326                Roo.callback(callback);
13327             },
13328             scope: this,
13329             duration: this.node.ownerTree.duration || .25
13330         });
13331     },
13332
13333     getContainer : function(){
13334         return this.ctNode;
13335     },
13336
13337     getEl : function(){
13338         return this.wrap;
13339     },
13340
13341     appendDDGhost : function(ghostNode){
13342         ghostNode.appendChild(this.elNode.cloneNode(true));
13343     },
13344
13345     getDDRepairXY : function(){
13346         return Roo.lib.Dom.getXY(this.iconNode);
13347     },
13348
13349     onRender : function(){
13350         this.render();
13351     },
13352
13353     render : function(bulkRender){
13354         var n = this.node, a = n.attributes;
13355         var targetNode = n.parentNode ?
13356               n.parentNode.ui.getContainer() : n.ownerTree.innerCt.dom;
13357
13358         if(!this.rendered){
13359             this.rendered = true;
13360
13361             this.renderElements(n, a, targetNode, bulkRender);
13362
13363             if(a.qtip){
13364                if(this.textNode.setAttributeNS){
13365                    this.textNode.setAttributeNS("ext", "qtip", a.qtip);
13366                    if(a.qtipTitle){
13367                        this.textNode.setAttributeNS("ext", "qtitle", a.qtipTitle);
13368                    }
13369                }else{
13370                    this.textNode.setAttribute("ext:qtip", a.qtip);
13371                    if(a.qtipTitle){
13372                        this.textNode.setAttribute("ext:qtitle", a.qtipTitle);
13373                    }
13374                }
13375             }else if(a.qtipCfg){
13376                 a.qtipCfg.target = Roo.id(this.textNode);
13377                 Roo.QuickTips.register(a.qtipCfg);
13378             }
13379             this.initEvents();
13380             if(!this.node.expanded){
13381                 this.updateExpandIcon();
13382             }
13383         }else{
13384             if(bulkRender === true) {
13385                 targetNode.appendChild(this.wrap);
13386             }
13387         }
13388     },
13389
13390     renderElements : function(n, a, targetNode, bulkRender)
13391     {
13392         // add some indent caching, this helps performance when rendering a large tree
13393         this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
13394         var t = n.getOwnerTree();
13395         var txt = t && t.renderer ? t.renderer(n.attributes) : Roo.util.Format.htmlEncode(n.text);
13396         if (typeof(n.attributes.html) != 'undefined') {
13397             txt = n.attributes.html;
13398         }
13399         var tip = t && t.rendererTip ? t.rendererTip(n.attributes) : txt;
13400         var cb = typeof a.checked == 'boolean';
13401         var href = a.href ? a.href : Roo.isGecko ? "" : "#";
13402         var buf = ['<li class="x-tree-node"><div class="x-tree-node-el ', a.cls,'">',
13403             '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
13404             '<img src="', this.emptyIcon, '" class="x-tree-ec-icon" />',
13405             '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on" />',
13406             cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : ' />')) : '',
13407             '<a hidefocus="on" href="',href,'" tabIndex="1" ',
13408              a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", 
13409                 '><span unselectable="on" qtip="' , tip ,'">',txt,"</span></a></div>",
13410             '<ul class="x-tree-node-ct" style="display:none;"></ul>',
13411             "</li>"];
13412
13413         if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
13414             this.wrap = Roo.DomHelper.insertHtml("beforeBegin",
13415                                 n.nextSibling.ui.getEl(), buf.join(""));
13416         }else{
13417             this.wrap = Roo.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
13418         }
13419
13420         this.elNode = this.wrap.childNodes[0];
13421         this.ctNode = this.wrap.childNodes[1];
13422         var cs = this.elNode.childNodes;
13423         this.indentNode = cs[0];
13424         this.ecNode = cs[1];
13425         this.iconNode = cs[2];
13426         var index = 3;
13427         if(cb){
13428             this.checkbox = cs[3];
13429             index++;
13430         }
13431         this.anchor = cs[index];
13432         this.textNode = cs[index].firstChild;
13433     },
13434
13435     getAnchor : function(){
13436         return this.anchor;
13437     },
13438
13439     getTextEl : function(){
13440         return this.textNode;
13441     },
13442
13443     getIconEl : function(){
13444         return this.iconNode;
13445     },
13446
13447     isChecked : function(){
13448         return this.checkbox ? this.checkbox.checked : false;
13449     },
13450
13451     updateExpandIcon : function(){
13452         if(this.rendered){
13453             var n = this.node, c1, c2;
13454             var cls = n.isLast() ? "x-tree-elbow-end" : "x-tree-elbow";
13455             var hasChild = n.hasChildNodes();
13456             if(hasChild){
13457                 if(n.expanded){
13458                     cls += "-minus";
13459                     c1 = "x-tree-node-collapsed";
13460                     c2 = "x-tree-node-expanded";
13461                 }else{
13462                     cls += "-plus";
13463                     c1 = "x-tree-node-expanded";
13464                     c2 = "x-tree-node-collapsed";
13465                 }
13466                 if(this.wasLeaf){
13467                     this.removeClass("x-tree-node-leaf");
13468                     this.wasLeaf = false;
13469                 }
13470                 if(this.c1 != c1 || this.c2 != c2){
13471                     Roo.fly(this.elNode).replaceClass(c1, c2);
13472                     this.c1 = c1; this.c2 = c2;
13473                 }
13474             }else{
13475                 // this changes non-leafs into leafs if they have no children.
13476                 // it's not very rational behaviour..
13477                 
13478                 if(!this.wasLeaf && this.node.leaf){
13479                     Roo.fly(this.elNode).replaceClass("x-tree-node-expanded", "x-tree-node-leaf");
13480                     delete this.c1;
13481                     delete this.c2;
13482                     this.wasLeaf = true;
13483                 }
13484             }
13485             var ecc = "x-tree-ec-icon "+cls;
13486             if(this.ecc != ecc){
13487                 this.ecNode.className = ecc;
13488                 this.ecc = ecc;
13489             }
13490         }
13491     },
13492
13493     getChildIndent : function(){
13494         if(!this.childIndent){
13495             var buf = [];
13496             var p = this.node;
13497             while(p){
13498                 if(!p.isRoot || (p.isRoot && p.ownerTree.rootVisible)){
13499                     if(!p.isLast()) {
13500                         buf.unshift('<img src="'+this.emptyIcon+'" class="x-tree-elbow-line" />');
13501                     } else {
13502                         buf.unshift('<img src="'+this.emptyIcon+'" class="x-tree-icon" />');
13503                     }
13504                 }
13505                 p = p.parentNode;
13506             }
13507             this.childIndent = buf.join("");
13508         }
13509         return this.childIndent;
13510     },
13511
13512     renderIndent : function(){
13513         if(this.rendered){
13514             var indent = "";
13515             var p = this.node.parentNode;
13516             if(p){
13517                 indent = p.ui.getChildIndent();
13518             }
13519             if(this.indentMarkup != indent){ // don't rerender if not required
13520                 this.indentNode.innerHTML = indent;
13521                 this.indentMarkup = indent;
13522             }
13523             this.updateExpandIcon();
13524         }
13525     }
13526 };
13527
13528 Roo.tree.RootTreeNodeUI = function(){
13529     Roo.tree.RootTreeNodeUI.superclass.constructor.apply(this, arguments);
13530 };
13531 Roo.extend(Roo.tree.RootTreeNodeUI, Roo.tree.TreeNodeUI, {
13532     render : function(){
13533         if(!this.rendered){
13534             var targetNode = this.node.ownerTree.innerCt.dom;
13535             this.node.expanded = true;
13536             targetNode.innerHTML = '<div class="x-tree-root-node"></div>';
13537             this.wrap = this.ctNode = targetNode.firstChild;
13538         }
13539     },
13540     collapse : function(){
13541     },
13542     expand : function(){
13543     }
13544 });/*
13545  * Based on:
13546  * Ext JS Library 1.1.1
13547  * Copyright(c) 2006-2007, Ext JS, LLC.
13548  *
13549  * Originally Released Under LGPL - original licence link has changed is not relivant.
13550  *
13551  * Fork - LGPL
13552  * <script type="text/javascript">
13553  */
13554 /**
13555  * @class Roo.tree.TreeLoader
13556  * @extends Roo.util.Observable
13557  * A TreeLoader provides for lazy loading of an {@link Roo.tree.TreeNode}'s child
13558  * nodes from a specified URL. The response must be a javascript Array definition
13559  * who's elements are node definition objects. eg:
13560  * <pre><code>
13561 {  success : true,
13562    data :      [
13563    
13564     { 'id': 1, 'text': 'A folder Node', 'leaf': false },
13565     { 'id': 2, 'text': 'A leaf Node', 'leaf': true }
13566     ]
13567 }
13568
13569
13570 </code></pre>
13571  * <br><br>
13572  * The old style respose with just an array is still supported, but not recommended.
13573  * <br><br>
13574  *
13575  * A server request is sent, and child nodes are loaded only when a node is expanded.
13576  * The loading node's id is passed to the server under the parameter name "node" to
13577  * enable the server to produce the correct child nodes.
13578  * <br><br>
13579  * To pass extra parameters, an event handler may be attached to the "beforeload"
13580  * event, and the parameters specified in the TreeLoader's baseParams property:
13581  * <pre><code>
13582     myTreeLoader.on("beforeload", function(treeLoader, node) {
13583         this.baseParams.category = node.attributes.category;
13584     }, this);
13585     
13586 </code></pre>
13587  *
13588  * This would pass an HTTP parameter called "category" to the server containing
13589  * the value of the Node's "category" attribute.
13590  * @constructor
13591  * Creates a new Treeloader.
13592  * @param {Object} config A config object containing config properties.
13593  */
13594 Roo.tree.TreeLoader = function(config){
13595     this.baseParams = {};
13596     this.requestMethod = "POST";
13597     Roo.apply(this, config);
13598
13599     this.addEvents({
13600     
13601         /**
13602          * @event beforeload
13603          * Fires before a network request is made to retrieve the Json text which specifies a node's children.
13604          * @param {Object} This TreeLoader object.
13605          * @param {Object} node The {@link Roo.tree.TreeNode} object being loaded.
13606          * @param {Object} callback The callback function specified in the {@link #load} call.
13607          */
13608         beforeload : true,
13609         /**
13610          * @event load
13611          * Fires when the node has been successfuly loaded.
13612          * @param {Object} This TreeLoader object.
13613          * @param {Object} node The {@link Roo.tree.TreeNode} object being loaded.
13614          * @param {Object} response The response object containing the data from the server.
13615          */
13616         load : true,
13617         /**
13618          * @event loadexception
13619          * Fires if the network request failed.
13620          * @param {Object} This TreeLoader object.
13621          * @param {Object} node The {@link Roo.tree.TreeNode} object being loaded.
13622          * @param {Object} response The response object containing the data from the server.
13623          */
13624         loadexception : true,
13625         /**
13626          * @event create
13627          * Fires before a node is created, enabling you to return custom Node types 
13628          * @param {Object} This TreeLoader object.
13629          * @param {Object} attr - the data returned from the AJAX call (modify it to suit)
13630          */
13631         create : true
13632     });
13633
13634     Roo.tree.TreeLoader.superclass.constructor.call(this);
13635 };
13636
13637 Roo.extend(Roo.tree.TreeLoader, Roo.util.Observable, {
13638     /**
13639     * @cfg {String} dataUrl The URL from which to request a Json string which
13640     * specifies an array of node definition object representing the child nodes
13641     * to be loaded.
13642     */
13643     /**
13644     * @cfg {String} requestMethod either GET or POST
13645     * defaults to POST (due to BC)
13646     * to be loaded.
13647     */
13648     /**
13649     * @cfg {Object} baseParams (optional) An object containing properties which
13650     * specify HTTP parameters to be passed to each request for child nodes.
13651     */
13652     /**
13653     * @cfg {Object} baseAttrs (optional) An object containing attributes to be added to all nodes
13654     * created by this loader. If the attributes sent by the server have an attribute in this object,
13655     * they take priority.
13656     */
13657     /**
13658     * @cfg {Object} uiProviders (optional) An object containing properties which
13659     * 
13660     * DEPRECATED - use 'create' event handler to modify attributes - which affect creation.
13661     * specify custom {@link Roo.tree.TreeNodeUI} implementations. If the optional
13662     * <i>uiProvider</i> attribute of a returned child node is a string rather
13663     * than a reference to a TreeNodeUI implementation, this that string value
13664     * is used as a property name in the uiProviders object. You can define the provider named
13665     * 'default' , and this will be used for all nodes (if no uiProvider is delivered by the node data)
13666     */
13667     uiProviders : {},
13668
13669     /**
13670     * @cfg {Boolean} clearOnLoad (optional) Default to true. Remove previously existing
13671     * child nodes before loading.
13672     */
13673     clearOnLoad : true,
13674
13675     /**
13676     * @cfg {String} root (optional) Default to false. Use this to read data from an object 
13677     * property on loading, rather than expecting an array. (eg. more compatible to a standard
13678     * Grid query { data : [ .....] }
13679     */
13680     
13681     root : false,
13682      /**
13683     * @cfg {String} queryParam (optional) 
13684     * Name of the query as it will be passed on the querystring (defaults to 'node')
13685     * eg. the request will be ?node=[id]
13686     */
13687     
13688     
13689     queryParam: false,
13690     
13691     /**
13692      * Load an {@link Roo.tree.TreeNode} from the URL specified in the constructor.
13693      * This is called automatically when a node is expanded, but may be used to reload
13694      * a node (or append new children if the {@link #clearOnLoad} option is false.)
13695      * @param {Roo.tree.TreeNode} node
13696      * @param {Function} callback
13697      */
13698     load : function(node, callback){
13699         if(this.clearOnLoad){
13700             while(node.firstChild){
13701                 node.removeChild(node.firstChild);
13702             }
13703         }
13704         if(node.attributes.children){ // preloaded json children
13705             var cs = node.attributes.children;
13706             for(var i = 0, len = cs.length; i < len; i++){
13707                 node.appendChild(this.createNode(cs[i]));
13708             }
13709             if(typeof callback == "function"){
13710                 callback();
13711             }
13712         }else if(this.dataUrl){
13713             this.requestData(node, callback);
13714         }
13715     },
13716
13717     getParams: function(node){
13718         var buf = [], bp = this.baseParams;
13719         for(var key in bp){
13720             if(typeof bp[key] != "function"){
13721                 buf.push(encodeURIComponent(key), "=", encodeURIComponent(bp[key]), "&");
13722             }
13723         }
13724         var n = this.queryParam === false ? 'node' : this.queryParam;
13725         buf.push(n + "=", encodeURIComponent(node.id));
13726         return buf.join("");
13727     },
13728
13729     requestData : function(node, callback){
13730         if(this.fireEvent("beforeload", this, node, callback) !== false){
13731             this.transId = Roo.Ajax.request({
13732                 method:this.requestMethod,
13733                 url: this.dataUrl||this.url,
13734                 success: this.handleResponse,
13735                 failure: this.handleFailure,
13736                 scope: this,
13737                 argument: {callback: callback, node: node},
13738                 params: this.getParams(node)
13739             });
13740         }else{
13741             // if the load is cancelled, make sure we notify
13742             // the node that we are done
13743             if(typeof callback == "function"){
13744                 callback();
13745             }
13746         }
13747     },
13748
13749     isLoading : function(){
13750         return this.transId ? true : false;
13751     },
13752
13753     abort : function(){
13754         if(this.isLoading()){
13755             Roo.Ajax.abort(this.transId);
13756         }
13757     },
13758
13759     // private
13760     createNode : function(attr)
13761     {
13762         // apply baseAttrs, nice idea Corey!
13763         if(this.baseAttrs){
13764             Roo.applyIf(attr, this.baseAttrs);
13765         }
13766         if(this.applyLoader !== false){
13767             attr.loader = this;
13768         }
13769         // uiProvider = depreciated..
13770         
13771         if(typeof(attr.uiProvider) == 'string'){
13772            attr.uiProvider = this.uiProviders[attr.uiProvider] || 
13773                 /**  eval:var:attr */ eval(attr.uiProvider);
13774         }
13775         if(typeof(this.uiProviders['default']) != 'undefined') {
13776             attr.uiProvider = this.uiProviders['default'];
13777         }
13778         
13779         this.fireEvent('create', this, attr);
13780         
13781         attr.leaf  = typeof(attr.leaf) == 'string' ? attr.leaf * 1 : attr.leaf;
13782         return(attr.leaf ?
13783                         new Roo.tree.TreeNode(attr) :
13784                         new Roo.tree.AsyncTreeNode(attr));
13785     },
13786
13787     processResponse : function(response, node, callback)
13788     {
13789         var json = response.responseText;
13790         try {
13791             
13792             var o = Roo.decode(json);
13793             
13794             if (this.root === false && typeof(o.success) != undefined) {
13795                 this.root = 'data'; // the default behaviour for list like data..
13796                 }
13797                 
13798             if (this.root !== false &&  !o.success) {
13799                 // it's a failure condition.
13800                 var a = response.argument;
13801                 this.fireEvent("loadexception", this, a.node, response);
13802                 Roo.log("Load failed - should have a handler really");
13803                 return;
13804             }
13805             
13806             
13807             
13808             if (this.root !== false) {
13809                  o = o[this.root];
13810             }
13811             
13812             for(var i = 0, len = o.length; i < len; i++){
13813                 var n = this.createNode(o[i]);
13814                 if(n){
13815                     node.appendChild(n);
13816                 }
13817             }
13818             if(typeof callback == "function"){
13819                 callback(this, node);
13820             }
13821         }catch(e){
13822             this.handleFailure(response);
13823         }
13824     },
13825
13826     handleResponse : function(response){
13827         this.transId = false;
13828         var a = response.argument;
13829         this.processResponse(response, a.node, a.callback);
13830         this.fireEvent("load", this, a.node, response);
13831     },
13832
13833     handleFailure : function(response)
13834     {
13835         // should handle failure better..
13836         this.transId = false;
13837         var a = response.argument;
13838         this.fireEvent("loadexception", this, a.node, response);
13839         if(typeof a.callback == "function"){
13840             a.callback(this, a.node);
13841         }
13842     }
13843 });/*
13844  * Based on:
13845  * Ext JS Library 1.1.1
13846  * Copyright(c) 2006-2007, Ext JS, LLC.
13847  *
13848  * Originally Released Under LGPL - original licence link has changed is not relivant.
13849  *
13850  * Fork - LGPL
13851  * <script type="text/javascript">
13852  */
13853
13854 /**
13855 * @class Roo.tree.TreeFilter
13856 * Note this class is experimental and doesn't update the indent (lines) or expand collapse icons of the nodes
13857 * @param {TreePanel} tree
13858 * @param {Object} config (optional)
13859  */
13860 Roo.tree.TreeFilter = function(tree, config){
13861     this.tree = tree;
13862     this.filtered = {};
13863     Roo.apply(this, config);
13864 };
13865
13866 Roo.tree.TreeFilter.prototype = {
13867     clearBlank:false,
13868     reverse:false,
13869     autoClear:false,
13870     remove:false,
13871
13872      /**
13873      * Filter the data by a specific attribute.
13874      * @param {String/RegExp} value Either string that the attribute value
13875      * should start with or a RegExp to test against the attribute
13876      * @param {String} attr (optional) The attribute passed in your node's attributes collection. Defaults to "text".
13877      * @param {TreeNode} startNode (optional) The node to start the filter at.
13878      */
13879     filter : function(value, attr, startNode){
13880         attr = attr || "text";
13881         var f;
13882         if(typeof value == "string"){
13883             var vlen = value.length;
13884             // auto clear empty filter
13885             if(vlen == 0 && this.clearBlank){
13886                 this.clear();
13887                 return;
13888             }
13889             value = value.toLowerCase();
13890             f = function(n){
13891                 return n.attributes[attr].substr(0, vlen).toLowerCase() == value;
13892             };
13893         }else if(value.exec){ // regex?
13894             f = function(n){
13895                 return value.test(n.attributes[attr]);
13896             };
13897         }else{
13898             throw 'Illegal filter type, must be string or regex';
13899         }
13900         this.filterBy(f, null, startNode);
13901         },
13902
13903     /**
13904      * Filter by a function. The passed function will be called with each
13905      * node in the tree (or from the startNode). If the function returns true, the node is kept
13906      * otherwise it is filtered. If a node is filtered, its children are also filtered.
13907      * @param {Function} fn The filter function
13908      * @param {Object} scope (optional) The scope of the function (defaults to the current node)
13909      */
13910     filterBy : function(fn, scope, startNode){
13911         startNode = startNode || this.tree.root;
13912         if(this.autoClear){
13913             this.clear();
13914         }
13915         var af = this.filtered, rv = this.reverse;
13916         var f = function(n){
13917             if(n == startNode){
13918                 return true;
13919             }
13920             if(af[n.id]){
13921                 return false;
13922             }
13923             var m = fn.call(scope || n, n);
13924             if(!m || rv){
13925                 af[n.id] = n;
13926                 n.ui.hide();
13927                 return false;
13928             }
13929             return true;
13930         };
13931         startNode.cascade(f);
13932         if(this.remove){
13933            for(var id in af){
13934                if(typeof id != "function"){
13935                    var n = af[id];
13936                    if(n && n.parentNode){
13937                        n.parentNode.removeChild(n);
13938                    }
13939                }
13940            }
13941         }
13942     },
13943
13944     /**
13945      * Clears the current filter. Note: with the "remove" option
13946      * set a filter cannot be cleared.
13947      */
13948     clear : function(){
13949         var t = this.tree;
13950         var af = this.filtered;
13951         for(var id in af){
13952             if(typeof id != "function"){
13953                 var n = af[id];
13954                 if(n){
13955                     n.ui.show();
13956                 }
13957             }
13958         }
13959         this.filtered = {};
13960     }
13961 };
13962 /*
13963  * Based on:
13964  * Ext JS Library 1.1.1
13965  * Copyright(c) 2006-2007, Ext JS, LLC.
13966  *
13967  * Originally Released Under LGPL - original licence link has changed is not relivant.
13968  *
13969  * Fork - LGPL
13970  * <script type="text/javascript">
13971  */
13972  
13973
13974 /**
13975  * @class Roo.tree.TreeSorter
13976  * Provides sorting of nodes in a TreePanel
13977  * 
13978  * @cfg {Boolean} folderSort True to sort leaf nodes under non leaf nodes
13979  * @cfg {String} property The named attribute on the node to sort by (defaults to text)
13980  * @cfg {String} dir The direction to sort (asc or desc) (defaults to asc)
13981  * @cfg {String} leafAttr The attribute used to determine leaf nodes in folder sort (defaults to "leaf")
13982  * @cfg {Boolean} caseSensitive true for case sensitive sort (defaults to false)
13983  * @cfg {Function} sortType A custom "casting" function used to convert node values before sorting
13984  * @constructor
13985  * @param {TreePanel} tree
13986  * @param {Object} config
13987  */
13988 Roo.tree.TreeSorter = function(tree, config){
13989     Roo.apply(this, config);
13990     tree.on("beforechildrenrendered", this.doSort, this);
13991     tree.on("append", this.updateSort, this);
13992     tree.on("insert", this.updateSort, this);
13993     
13994     var dsc = this.dir && this.dir.toLowerCase() == "desc";
13995     var p = this.property || "text";
13996     var sortType = this.sortType;
13997     var fs = this.folderSort;
13998     var cs = this.caseSensitive === true;
13999     var leafAttr = this.leafAttr || 'leaf';
14000
14001     this.sortFn = function(n1, n2){
14002         if(fs){
14003             if(n1.attributes[leafAttr] && !n2.attributes[leafAttr]){
14004                 return 1;
14005             }
14006             if(!n1.attributes[leafAttr] && n2.attributes[leafAttr]){
14007                 return -1;
14008             }
14009         }
14010         var v1 = sortType ? sortType(n1) : (cs ? n1.attributes[p] : n1.attributes[p].toUpperCase());
14011         var v2 = sortType ? sortType(n2) : (cs ? n2.attributes[p] : n2.attributes[p].toUpperCase());
14012         if(v1 < v2){
14013                         return dsc ? +1 : -1;
14014                 }else if(v1 > v2){
14015                         return dsc ? -1 : +1;
14016         }else{
14017                 return 0;
14018         }
14019     };
14020 };
14021
14022 Roo.tree.TreeSorter.prototype = {
14023     doSort : function(node){
14024         node.sort(this.sortFn);
14025     },
14026     
14027     compareNodes : function(n1, n2){
14028         return (n1.text.toUpperCase() > n2.text.toUpperCase() ? 1 : -1);
14029     },
14030     
14031     updateSort : function(tree, node){
14032         if(node.childrenRendered){
14033             this.doSort.defer(1, this, [node]);
14034         }
14035     }
14036 };/*
14037  * Based on:
14038  * Ext JS Library 1.1.1
14039  * Copyright(c) 2006-2007, Ext JS, LLC.
14040  *
14041  * Originally Released Under LGPL - original licence link has changed is not relivant.
14042  *
14043  * Fork - LGPL
14044  * <script type="text/javascript">
14045  */
14046
14047 if(Roo.dd.DropZone){
14048     
14049 Roo.tree.TreeDropZone = function(tree, config){
14050     this.allowParentInsert = false;
14051     this.allowContainerDrop = false;
14052     this.appendOnly = false;
14053     Roo.tree.TreeDropZone.superclass.constructor.call(this, tree.innerCt, config);
14054     this.tree = tree;
14055     this.lastInsertClass = "x-tree-no-status";
14056     this.dragOverData = {};
14057 };
14058
14059 Roo.extend(Roo.tree.TreeDropZone, Roo.dd.DropZone, {
14060     ddGroup : "TreeDD",
14061     scroll:  true,
14062     
14063     expandDelay : 1000,
14064     
14065     expandNode : function(node){
14066         if(node.hasChildNodes() && !node.isExpanded()){
14067             node.expand(false, null, this.triggerCacheRefresh.createDelegate(this));
14068         }
14069     },
14070     
14071     queueExpand : function(node){
14072         this.expandProcId = this.expandNode.defer(this.expandDelay, this, [node]);
14073     },
14074     
14075     cancelExpand : function(){
14076         if(this.expandProcId){
14077             clearTimeout(this.expandProcId);
14078             this.expandProcId = false;
14079         }
14080     },
14081     
14082     isValidDropPoint : function(n, pt, dd, e, data){
14083         if(!n || !data){ return false; }
14084         var targetNode = n.node;
14085         var dropNode = data.node;
14086         // default drop rules
14087         if(!(targetNode && targetNode.isTarget && pt)){
14088             return false;
14089         }
14090         if(pt == "append" && targetNode.allowChildren === false){
14091             return false;
14092         }
14093         if((pt == "above" || pt == "below") && (targetNode.parentNode && targetNode.parentNode.allowChildren === false)){
14094             return false;
14095         }
14096         if(dropNode && (targetNode == dropNode || dropNode.contains(targetNode))){
14097             return false;
14098         }
14099         // reuse the object
14100         var overEvent = this.dragOverData;
14101         overEvent.tree = this.tree;
14102         overEvent.target = targetNode;
14103         overEvent.data = data;
14104         overEvent.point = pt;
14105         overEvent.source = dd;
14106         overEvent.rawEvent = e;
14107         overEvent.dropNode = dropNode;
14108         overEvent.cancel = false;  
14109         var result = this.tree.fireEvent("nodedragover", overEvent);
14110         return overEvent.cancel === false && result !== false;
14111     },
14112     
14113     getDropPoint : function(e, n, dd)
14114     {
14115         var tn = n.node;
14116         if(tn.isRoot){
14117             return tn.allowChildren !== false ? "append" : false; // always append for root
14118         }
14119         var dragEl = n.ddel;
14120         var t = Roo.lib.Dom.getY(dragEl), b = t + dragEl.offsetHeight;
14121         var y = Roo.lib.Event.getPageY(e);
14122         //var noAppend = tn.allowChildren === false || tn.isLeaf();
14123         
14124         // we may drop nodes anywhere, as long as allowChildren has not been set to false..
14125         var noAppend = tn.allowChildren === false;
14126         if(this.appendOnly || tn.parentNode.allowChildren === false){
14127             return noAppend ? false : "append";
14128         }
14129         var noBelow = false;
14130         if(!this.allowParentInsert){
14131             noBelow = tn.hasChildNodes() && tn.isExpanded();
14132         }
14133         var q = (b - t) / (noAppend ? 2 : 3);
14134         if(y >= t && y < (t + q)){
14135             return "above";
14136         }else if(!noBelow && (noAppend || y >= b-q && y <= b)){
14137             return "below";
14138         }else{
14139             return "append";
14140         }
14141     },
14142     
14143     onNodeEnter : function(n, dd, e, data)
14144     {
14145         this.cancelExpand();
14146     },
14147     
14148     onNodeOver : function(n, dd, e, data)
14149     {
14150        
14151         var pt = this.getDropPoint(e, n, dd);
14152         var node = n.node;
14153         
14154         // auto node expand check
14155         if(!this.expandProcId && pt == "append" && node.hasChildNodes() && !n.node.isExpanded()){
14156             this.queueExpand(node);
14157         }else if(pt != "append"){
14158             this.cancelExpand();
14159         }
14160         
14161         // set the insert point style on the target node
14162         var returnCls = this.dropNotAllowed;
14163         if(this.isValidDropPoint(n, pt, dd, e, data)){
14164            if(pt){
14165                var el = n.ddel;
14166                var cls;
14167                if(pt == "above"){
14168                    returnCls = n.node.isFirst() ? "x-tree-drop-ok-above" : "x-tree-drop-ok-between";
14169                    cls = "x-tree-drag-insert-above";
14170                }else if(pt == "below"){
14171                    returnCls = n.node.isLast() ? "x-tree-drop-ok-below" : "x-tree-drop-ok-between";
14172                    cls = "x-tree-drag-insert-below";
14173                }else{
14174                    returnCls = "x-tree-drop-ok-append";
14175                    cls = "x-tree-drag-append";
14176                }
14177                if(this.lastInsertClass != cls){
14178                    Roo.fly(el).replaceClass(this.lastInsertClass, cls);
14179                    this.lastInsertClass = cls;
14180                }
14181            }
14182        }
14183        return returnCls;
14184     },
14185     
14186     onNodeOut : function(n, dd, e, data){
14187         
14188         this.cancelExpand();
14189         this.removeDropIndicators(n);
14190     },
14191     
14192     onNodeDrop : function(n, dd, e, data){
14193         var point = this.getDropPoint(e, n, dd);
14194         var targetNode = n.node;
14195         targetNode.ui.startDrop();
14196         if(!this.isValidDropPoint(n, point, dd, e, data)){
14197             targetNode.ui.endDrop();
14198             return false;
14199         }
14200         // first try to find the drop node
14201         var dropNode = data.node || (dd.getTreeNode ? dd.getTreeNode(data, targetNode, point, e) : null);
14202         var dropEvent = {
14203             tree : this.tree,
14204             target: targetNode,
14205             data: data,
14206             point: point,
14207             source: dd,
14208             rawEvent: e,
14209             dropNode: dropNode,
14210             cancel: !dropNode   
14211         };
14212         var retval = this.tree.fireEvent("beforenodedrop", dropEvent);
14213         if(retval === false || dropEvent.cancel === true || !dropEvent.dropNode){
14214             targetNode.ui.endDrop();
14215             return false;
14216         }
14217         // allow target changing
14218         targetNode = dropEvent.target;
14219         if(point == "append" && !targetNode.isExpanded()){
14220             targetNode.expand(false, null, function(){
14221                 this.completeDrop(dropEvent);
14222             }.createDelegate(this));
14223         }else{
14224             this.completeDrop(dropEvent);
14225         }
14226         return true;
14227     },
14228     
14229     completeDrop : function(de){
14230         var ns = de.dropNode, p = de.point, t = de.target;
14231         if(!(ns instanceof Array)){
14232             ns = [ns];
14233         }
14234         var n;
14235         for(var i = 0, len = ns.length; i < len; i++){
14236             n = ns[i];
14237             if(p == "above"){
14238                 t.parentNode.insertBefore(n, t);
14239             }else if(p == "below"){
14240                 t.parentNode.insertBefore(n, t.nextSibling);
14241             }else{
14242                 t.appendChild(n);
14243             }
14244         }
14245         n.ui.focus();
14246         if(this.tree.hlDrop){
14247             n.ui.highlight();
14248         }
14249         t.ui.endDrop();
14250         this.tree.fireEvent("nodedrop", de);
14251     },
14252     
14253     afterNodeMoved : function(dd, data, e, targetNode, dropNode){
14254         if(this.tree.hlDrop){
14255             dropNode.ui.focus();
14256             dropNode.ui.highlight();
14257         }
14258         this.tree.fireEvent("nodedrop", this.tree, targetNode, data, dd, e);
14259     },
14260     
14261     getTree : function(){
14262         return this.tree;
14263     },
14264     
14265     removeDropIndicators : function(n){
14266         if(n && n.ddel){
14267             var el = n.ddel;
14268             Roo.fly(el).removeClass([
14269                     "x-tree-drag-insert-above",
14270                     "x-tree-drag-insert-below",
14271                     "x-tree-drag-append"]);
14272             this.lastInsertClass = "_noclass";
14273         }
14274     },
14275     
14276     beforeDragDrop : function(target, e, id){
14277         this.cancelExpand();
14278         return true;
14279     },
14280     
14281     afterRepair : function(data){
14282         if(data && Roo.enableFx){
14283             data.node.ui.highlight();
14284         }
14285         this.hideProxy();
14286     } 
14287     
14288 });
14289
14290 }
14291 /*
14292  * Based on:
14293  * Ext JS Library 1.1.1
14294  * Copyright(c) 2006-2007, Ext JS, LLC.
14295  *
14296  * Originally Released Under LGPL - original licence link has changed is not relivant.
14297  *
14298  * Fork - LGPL
14299  * <script type="text/javascript">
14300  */
14301  
14302
14303 if(Roo.dd.DragZone){
14304 Roo.tree.TreeDragZone = function(tree, config){
14305     Roo.tree.TreeDragZone.superclass.constructor.call(this, tree.getTreeEl(), config);
14306     this.tree = tree;
14307 };
14308
14309 Roo.extend(Roo.tree.TreeDragZone, Roo.dd.DragZone, {
14310     ddGroup : "TreeDD",
14311    
14312     onBeforeDrag : function(data, e){
14313         var n = data.node;
14314         return n && n.draggable && !n.disabled;
14315     },
14316      
14317     
14318     onInitDrag : function(e){
14319         var data = this.dragData;
14320         this.tree.getSelectionModel().select(data.node);
14321         this.proxy.update("");
14322         data.node.ui.appendDDGhost(this.proxy.ghost.dom);
14323         this.tree.fireEvent("startdrag", this.tree, data.node, e);
14324     },
14325     
14326     getRepairXY : function(e, data){
14327         return data.node.ui.getDDRepairXY();
14328     },
14329     
14330     onEndDrag : function(data, e){
14331         this.tree.fireEvent("enddrag", this.tree, data.node, e);
14332         
14333         
14334     },
14335     
14336     onValidDrop : function(dd, e, id){
14337         this.tree.fireEvent("dragdrop", this.tree, this.dragData.node, dd, e);
14338         this.hideProxy();
14339     },
14340     
14341     beforeInvalidDrop : function(e, id){
14342         // this scrolls the original position back into view
14343         var sm = this.tree.getSelectionModel();
14344         sm.clearSelections();
14345         sm.select(this.dragData.node);
14346     }
14347 });
14348 }/*
14349  * Based on:
14350  * Ext JS Library 1.1.1
14351  * Copyright(c) 2006-2007, Ext JS, LLC.
14352  *
14353  * Originally Released Under LGPL - original licence link has changed is not relivant.
14354  *
14355  * Fork - LGPL
14356  * <script type="text/javascript">
14357  */
14358 /**
14359  * @class Roo.tree.TreeEditor
14360  * @extends Roo.Editor
14361  * Provides editor functionality for inline tree node editing.  Any valid {@link Roo.form.Field} can be used
14362  * as the editor field.
14363  * @constructor
14364  * @param {Object} config (used to be the tree panel.)
14365  * @param {Object} oldconfig DEPRECIATED Either a prebuilt {@link Roo.form.Field} instance or a Field config object
14366  * 
14367  * @cfg {Roo.tree.TreePanel} tree The tree to bind to.
14368  * @cfg {Roo.form.TextField|Object} field The field configuration
14369  *
14370  * 
14371  */
14372 Roo.tree.TreeEditor = function(config, oldconfig) { // was -- (tree, config){
14373     var tree = config;
14374     var field;
14375     if (oldconfig) { // old style..
14376         field = oldconfig.events ? oldconfig : new Roo.form.TextField(oldconfig);
14377     } else {
14378         // new style..
14379         tree = config.tree;
14380         config.field = config.field  || {};
14381         config.field.xtype = 'TextField';
14382         field = Roo.factory(config.field, Roo.form);
14383     }
14384     config = config || {};
14385     
14386     
14387     this.addEvents({
14388         /**
14389          * @event beforenodeedit
14390          * Fires when editing is initiated, but before the value changes.  Editing can be canceled by returning
14391          * false from the handler of this event.
14392          * @param {Editor} this
14393          * @param {Roo.tree.Node} node 
14394          */
14395         "beforenodeedit" : true
14396     });
14397     
14398     //Roo.log(config);
14399     Roo.tree.TreeEditor.superclass.constructor.call(this, field, config);
14400
14401     this.tree = tree;
14402
14403     tree.on('beforeclick', this.beforeNodeClick, this);
14404     tree.getTreeEl().on('mousedown', this.hide, this);
14405     this.on('complete', this.updateNode, this);
14406     this.on('beforestartedit', this.fitToTree, this);
14407     this.on('startedit', this.bindScroll, this, {delay:10});
14408     this.on('specialkey', this.onSpecialKey, this);
14409 };
14410
14411 Roo.extend(Roo.tree.TreeEditor, Roo.Editor, {
14412     /**
14413      * @cfg {String} alignment
14414      * The position to align to (see {@link Roo.Element#alignTo} for more details, defaults to "l-l").
14415      */
14416     alignment: "l-l",
14417     // inherit
14418     autoSize: false,
14419     /**
14420      * @cfg {Boolean} hideEl
14421      * True to hide the bound element while the editor is displayed (defaults to false)
14422      */
14423     hideEl : false,
14424     /**
14425      * @cfg {String} cls
14426      * CSS class to apply to the editor (defaults to "x-small-editor x-tree-editor")
14427      */
14428     cls: "x-small-editor x-tree-editor",
14429     /**
14430      * @cfg {Boolean} shim
14431      * True to shim the editor if selects/iframes could be displayed beneath it (defaults to false)
14432      */
14433     shim:false,
14434     // inherit
14435     shadow:"frame",
14436     /**
14437      * @cfg {Number} maxWidth
14438      * The maximum width in pixels of the editor field (defaults to 250).  Note that if the maxWidth would exceed
14439      * the containing tree element's size, it will be automatically limited for you to the container width, taking
14440      * scroll and client offsets into account prior to each edit.
14441      */
14442     maxWidth: 250,
14443
14444     editDelay : 350,
14445
14446     // private
14447     fitToTree : function(ed, el){
14448         var td = this.tree.getTreeEl().dom, nd = el.dom;
14449         if(td.scrollLeft >  nd.offsetLeft){ // ensure the node left point is visible
14450             td.scrollLeft = nd.offsetLeft;
14451         }
14452         var w = Math.min(
14453                 this.maxWidth,
14454                 (td.clientWidth > 20 ? td.clientWidth : td.offsetWidth) - Math.max(0, nd.offsetLeft-td.scrollLeft) - /*cushion*/5);
14455         this.setSize(w, '');
14456         
14457         return this.fireEvent('beforenodeedit', this, this.editNode);
14458         
14459     },
14460
14461     // private
14462     triggerEdit : function(node){
14463         this.completeEdit();
14464         this.editNode = node;
14465         this.startEdit(node.ui.textNode, node.text);
14466     },
14467
14468     // private
14469     bindScroll : function(){
14470         this.tree.getTreeEl().on('scroll', this.cancelEdit, this);
14471     },
14472
14473     // private
14474     beforeNodeClick : function(node, e){
14475         var sinceLast = (this.lastClick ? this.lastClick.getElapsed() : 0);
14476         this.lastClick = new Date();
14477         if(sinceLast > this.editDelay && this.tree.getSelectionModel().isSelected(node)){
14478             e.stopEvent();
14479             this.triggerEdit(node);
14480             return false;
14481         }
14482         return true;
14483     },
14484
14485     // private
14486     updateNode : function(ed, value){
14487         this.tree.getTreeEl().un('scroll', this.cancelEdit, this);
14488         this.editNode.setText(value);
14489     },
14490
14491     // private
14492     onHide : function(){
14493         Roo.tree.TreeEditor.superclass.onHide.call(this);
14494         if(this.editNode){
14495             this.editNode.ui.focus();
14496         }
14497     },
14498
14499     // private
14500     onSpecialKey : function(field, e){
14501         var k = e.getKey();
14502         if(k == e.ESC){
14503             e.stopEvent();
14504             this.cancelEdit();
14505         }else if(k == e.ENTER && !e.hasModifier()){
14506             e.stopEvent();
14507             this.completeEdit();
14508         }
14509     }
14510 });//<Script type="text/javascript">
14511 /*
14512  * Based on:
14513  * Ext JS Library 1.1.1
14514  * Copyright(c) 2006-2007, Ext JS, LLC.
14515  *
14516  * Originally Released Under LGPL - original licence link has changed is not relivant.
14517  *
14518  * Fork - LGPL
14519  * <script type="text/javascript">
14520  */
14521  
14522 /**
14523  * Not documented??? - probably should be...
14524  */
14525
14526 Roo.tree.ColumnNodeUI = Roo.extend(Roo.tree.TreeNodeUI, {
14527     //focus: Roo.emptyFn, // prevent odd scrolling behavior
14528     
14529     renderElements : function(n, a, targetNode, bulkRender){
14530         //consel.log("renderElements?");
14531         this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
14532
14533         var t = n.getOwnerTree();
14534         var tid = Pman.Tab.Document_TypesTree.tree.el.id;
14535         
14536         var cols = t.columns;
14537         var bw = t.borderWidth;
14538         var c = cols[0];
14539         var href = a.href ? a.href : Roo.isGecko ? "" : "#";
14540          var cb = typeof a.checked == "boolean";
14541         var tx = String.format('{0}',n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]));
14542         var colcls = 'x-t-' + tid + '-c0';
14543         var buf = [
14544             '<li class="x-tree-node">',
14545             
14546                 
14547                 '<div class="x-tree-node-el ', a.cls,'">',
14548                     // extran...
14549                     '<div class="x-tree-col ', colcls, '" style="width:', c.width-bw, 'px;">',
14550                 
14551                 
14552                         '<span class="x-tree-node-indent">',this.indentMarkup,'</span>',
14553                         '<img src="', this.emptyIcon, '" class="x-tree-ec-icon  " />',
14554                         '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',
14555                            (a.icon ? ' x-tree-node-inline-icon' : ''),
14556                            (a.iconCls ? ' '+a.iconCls : ''),
14557                            '" unselectable="on" />',
14558                         (cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + 
14559                              (a.checked ? 'checked="checked" />' : ' />')) : ''),
14560                              
14561                         '<a class="x-tree-node-anchor" hidefocus="on" href="',href,'" tabIndex="1" ',
14562                             (a.hrefTarget ? ' target="' +a.hrefTarget + '"' : ''), '>',
14563                             '<span unselectable="on" qtip="' + tx + '">',
14564                              tx,
14565                              '</span></a>' ,
14566                     '</div>',
14567                      '<a class="x-tree-node-anchor" hidefocus="on" href="',href,'" tabIndex="1" ',
14568                             (a.hrefTarget ? ' target="' +a.hrefTarget + '"' : ''), '>'
14569                  ];
14570         for(var i = 1, len = cols.length; i < len; i++){
14571             c = cols[i];
14572             colcls = 'x-t-' + tid + '-c' +i;
14573             tx = String.format('{0}', (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]));
14574             buf.push('<div class="x-tree-col ', colcls, ' ' ,(c.cls?c.cls:''),'" style="width:',c.width-bw,'px;">',
14575                         '<div class="x-tree-col-text" qtip="' + tx +'">',tx,"</div>",
14576                       "</div>");
14577          }
14578          
14579          buf.push(
14580             '</a>',
14581             '<div class="x-clear"></div></div>',
14582             '<ul class="x-tree-node-ct" style="display:none;"></ul>',
14583             "</li>");
14584         
14585         if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
14586             this.wrap = Roo.DomHelper.insertHtml("beforeBegin",
14587                                 n.nextSibling.ui.getEl(), buf.join(""));
14588         }else{
14589             this.wrap = Roo.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
14590         }
14591         var el = this.wrap.firstChild;
14592         this.elRow = el;
14593         this.elNode = el.firstChild;
14594         this.ranchor = el.childNodes[1];
14595         this.ctNode = this.wrap.childNodes[1];
14596         var cs = el.firstChild.childNodes;
14597         this.indentNode = cs[0];
14598         this.ecNode = cs[1];
14599         this.iconNode = cs[2];
14600         var index = 3;
14601         if(cb){
14602             this.checkbox = cs[3];
14603             index++;
14604         }
14605         this.anchor = cs[index];
14606         
14607         this.textNode = cs[index].firstChild;
14608         
14609         //el.on("click", this.onClick, this);
14610         //el.on("dblclick", this.onDblClick, this);
14611         
14612         
14613        // console.log(this);
14614     },
14615     initEvents : function(){
14616         Roo.tree.ColumnNodeUI.superclass.initEvents.call(this);
14617         
14618             
14619         var a = this.ranchor;
14620
14621         var el = Roo.get(a);
14622
14623         if(Roo.isOpera){ // opera render bug ignores the CSS
14624             el.setStyle("text-decoration", "none");
14625         }
14626
14627         el.on("click", this.onClick, this);
14628         el.on("dblclick", this.onDblClick, this);
14629         el.on("contextmenu", this.onContextMenu, this);
14630         
14631     },
14632     
14633     /*onSelectedChange : function(state){
14634         if(state){
14635             this.focus();
14636             this.addClass("x-tree-selected");
14637         }else{
14638             //this.blur();
14639             this.removeClass("x-tree-selected");
14640         }
14641     },*/
14642     addClass : function(cls){
14643         if(this.elRow){
14644             Roo.fly(this.elRow).addClass(cls);
14645         }
14646         
14647     },
14648     
14649     
14650     removeClass : function(cls){
14651         if(this.elRow){
14652             Roo.fly(this.elRow).removeClass(cls);
14653         }
14654     }
14655
14656     
14657     
14658 });//<Script type="text/javascript">
14659
14660 /*
14661  * Based on:
14662  * Ext JS Library 1.1.1
14663  * Copyright(c) 2006-2007, Ext JS, LLC.
14664  *
14665  * Originally Released Under LGPL - original licence link has changed is not relivant.
14666  *
14667  * Fork - LGPL
14668  * <script type="text/javascript">
14669  */
14670  
14671
14672 /**
14673  * @class Roo.tree.ColumnTree
14674  * @extends Roo.data.TreePanel
14675  * @cfg {Object} columns  Including width, header, renderer, cls, dataIndex 
14676  * @cfg {int} borderWidth  compined right/left border allowance
14677  * @constructor
14678  * @param {String/HTMLElement/Element} el The container element
14679  * @param {Object} config
14680  */
14681 Roo.tree.ColumnTree =  function(el, config)
14682 {
14683    Roo.tree.ColumnTree.superclass.constructor.call(this, el , config);
14684    this.addEvents({
14685         /**
14686         * @event resize
14687         * Fire this event on a container when it resizes
14688         * @param {int} w Width
14689         * @param {int} h Height
14690         */
14691        "resize" : true
14692     });
14693     this.on('resize', this.onResize, this);
14694 };
14695
14696 Roo.extend(Roo.tree.ColumnTree, Roo.tree.TreePanel, {
14697     //lines:false,
14698     
14699     
14700     borderWidth: Roo.isBorderBox ? 0 : 2, 
14701     headEls : false,
14702     
14703     render : function(){
14704         // add the header.....
14705        
14706         Roo.tree.ColumnTree.superclass.render.apply(this);
14707         
14708         this.el.addClass('x-column-tree');
14709         
14710         this.headers = this.el.createChild(
14711             {cls:'x-tree-headers'},this.innerCt.dom);
14712    
14713         var cols = this.columns, c;
14714         var totalWidth = 0;
14715         this.headEls = [];
14716         var  len = cols.length;
14717         for(var i = 0; i < len; i++){
14718              c = cols[i];
14719              totalWidth += c.width;
14720             this.headEls.push(this.headers.createChild({
14721                  cls:'x-tree-hd ' + (c.cls?c.cls+'-hd':''),
14722                  cn: {
14723                      cls:'x-tree-hd-text',
14724                      html: c.header
14725                  },
14726                  style:'width:'+(c.width-this.borderWidth)+'px;'
14727              }));
14728         }
14729         this.headers.createChild({cls:'x-clear'});
14730         // prevent floats from wrapping when clipped
14731         this.headers.setWidth(totalWidth);
14732         //this.innerCt.setWidth(totalWidth);
14733         this.innerCt.setStyle({ overflow: 'auto' });
14734         this.onResize(this.width, this.height);
14735              
14736         
14737     },
14738     onResize : function(w,h)
14739     {
14740         this.height = h;
14741         this.width = w;
14742         // resize cols..
14743         this.innerCt.setWidth(this.width);
14744         this.innerCt.setHeight(this.height-20);
14745         
14746         // headers...
14747         var cols = this.columns, c;
14748         var totalWidth = 0;
14749         var expEl = false;
14750         var len = cols.length;
14751         for(var i = 0; i < len; i++){
14752             c = cols[i];
14753             if (this.autoExpandColumn !== false && c.dataIndex == this.autoExpandColumn) {
14754                 // it's the expander..
14755                 expEl  = this.headEls[i];
14756                 continue;
14757             }
14758             totalWidth += c.width;
14759             
14760         }
14761         if (expEl) {
14762             expEl.setWidth(  ((w - totalWidth)-this.borderWidth - 20));
14763         }
14764         this.headers.setWidth(w-20);
14765
14766         
14767         
14768         
14769     }
14770 });
14771 /*
14772  * Based on:
14773  * Ext JS Library 1.1.1
14774  * Copyright(c) 2006-2007, Ext JS, LLC.
14775  *
14776  * Originally Released Under LGPL - original licence link has changed is not relivant.
14777  *
14778  * Fork - LGPL
14779  * <script type="text/javascript">
14780  */
14781  
14782 /**
14783  * @class Roo.menu.Menu
14784  * @extends Roo.util.Observable
14785  * A menu object.  This is the container to which you add all other menu items.  Menu can also serve a as a base class
14786  * when you want a specialzed menu based off of another component (like {@link Roo.menu.DateMenu} for example).
14787  * @constructor
14788  * Creates a new Menu
14789  * @param {Object} config Configuration options
14790  */
14791 Roo.menu.Menu = function(config){
14792     
14793     Roo.menu.Menu.superclass.constructor.call(this, config);
14794     
14795     this.id = this.id || Roo.id();
14796     this.addEvents({
14797         /**
14798          * @event beforeshow
14799          * Fires before this menu is displayed
14800          * @param {Roo.menu.Menu} this
14801          */
14802         beforeshow : true,
14803         /**
14804          * @event beforehide
14805          * Fires before this menu is hidden
14806          * @param {Roo.menu.Menu} this
14807          */
14808         beforehide : true,
14809         /**
14810          * @event show
14811          * Fires after this menu is displayed
14812          * @param {Roo.menu.Menu} this
14813          */
14814         show : true,
14815         /**
14816          * @event hide
14817          * Fires after this menu is hidden
14818          * @param {Roo.menu.Menu} this
14819          */
14820         hide : true,
14821         /**
14822          * @event click
14823          * Fires when this menu is clicked (or when the enter key is pressed while it is active)
14824          * @param {Roo.menu.Menu} this
14825          * @param {Roo.menu.Item} menuItem The menu item that was clicked
14826          * @param {Roo.EventObject} e
14827          */
14828         click : true,
14829         /**
14830          * @event mouseover
14831          * Fires when the mouse is hovering over this menu
14832          * @param {Roo.menu.Menu} this
14833          * @param {Roo.EventObject} e
14834          * @param {Roo.menu.Item} menuItem The menu item that was clicked
14835          */
14836         mouseover : true,
14837         /**
14838          * @event mouseout
14839          * Fires when the mouse exits this menu
14840          * @param {Roo.menu.Menu} this
14841          * @param {Roo.EventObject} e
14842          * @param {Roo.menu.Item} menuItem The menu item that was clicked
14843          */
14844         mouseout : true,
14845         /**
14846          * @event itemclick
14847          * Fires when a menu item contained in this menu is clicked
14848          * @param {Roo.menu.BaseItem} baseItem The BaseItem that was clicked
14849          * @param {Roo.EventObject} e
14850          */
14851         itemclick: true
14852     });
14853     if (this.registerMenu) {
14854         Roo.menu.MenuMgr.register(this);
14855     }
14856     
14857     var mis = this.items;
14858     this.items = new Roo.util.MixedCollection();
14859     if(mis){
14860         this.add.apply(this, mis);
14861     }
14862 };
14863
14864 Roo.extend(Roo.menu.Menu, Roo.util.Observable, {
14865     /**
14866      * @cfg {Number} minWidth The minimum width of the menu in pixels (defaults to 120)
14867      */
14868     minWidth : 120,
14869     /**
14870      * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop"
14871      * for bottom-right shadow (defaults to "sides")
14872      */
14873     shadow : "sides",
14874     /**
14875      * @cfg {String} subMenuAlign The {@link Roo.Element#alignTo} anchor position value to use for submenus of
14876      * this menu (defaults to "tl-tr?")
14877      */
14878     subMenuAlign : "tl-tr?",
14879     /**
14880      * @cfg {String} defaultAlign The default {@link Roo.Element#alignTo) anchor position value for this menu
14881      * relative to its element of origin (defaults to "tl-bl?")
14882      */
14883     defaultAlign : "tl-bl?",
14884     /**
14885      * @cfg {Boolean} allowOtherMenus True to allow multiple menus to be displayed at the same time (defaults to false)
14886      */
14887     allowOtherMenus : false,
14888     /**
14889      * @cfg {Boolean} registerMenu True (default) - means that clicking on screen etc. hides it.
14890      */
14891     registerMenu : true,
14892
14893     hidden:true,
14894
14895     // private
14896     render : function(){
14897         if(this.el){
14898             return;
14899         }
14900         var el = this.el = new Roo.Layer({
14901             cls: "x-menu",
14902             shadow:this.shadow,
14903             constrain: false,
14904             parentEl: this.parentEl || document.body,
14905             zindex:15000
14906         });
14907
14908         this.keyNav = new Roo.menu.MenuNav(this);
14909
14910         if(this.plain){
14911             el.addClass("x-menu-plain");
14912         }
14913         if(this.cls){
14914             el.addClass(this.cls);
14915         }
14916         // generic focus element
14917         this.focusEl = el.createChild({
14918             tag: "a", cls: "x-menu-focus", href: "#", onclick: "return false;", tabIndex:"-1"
14919         });
14920         var ul = el.createChild({tag: "ul", cls: "x-menu-list"});
14921         //disabling touch- as it's causing issues ..
14922         //ul.on(Roo.isTouch ? 'touchstart' : 'click'   , this.onClick, this);
14923         ul.on('click'   , this.onClick, this);
14924         
14925         
14926         ul.on("mouseover", this.onMouseOver, this);
14927         ul.on("mouseout", this.onMouseOut, this);
14928         this.items.each(function(item){
14929             if (item.hidden) {
14930                 return;
14931             }
14932             
14933             var li = document.createElement("li");
14934             li.className = "x-menu-list-item";
14935             ul.dom.appendChild(li);
14936             item.render(li, this);
14937         }, this);
14938         this.ul = ul;
14939         this.autoWidth();
14940     },
14941
14942     // private
14943     autoWidth : function(){
14944         var el = this.el, ul = this.ul;
14945         if(!el){
14946             return;
14947         }
14948         var w = this.width;
14949         if(w){
14950             el.setWidth(w);
14951         }else if(Roo.isIE){
14952             el.setWidth(this.minWidth);
14953             var t = el.dom.offsetWidth; // force recalc
14954             el.setWidth(ul.getWidth()+el.getFrameWidth("lr"));
14955         }
14956     },
14957
14958     // private
14959     delayAutoWidth : function(){
14960         if(this.rendered){
14961             if(!this.awTask){
14962                 this.awTask = new Roo.util.DelayedTask(this.autoWidth, this);
14963             }
14964             this.awTask.delay(20);
14965         }
14966     },
14967
14968     // private
14969     findTargetItem : function(e){
14970         var t = e.getTarget(".x-menu-list-item", this.ul,  true);
14971         if(t && t.menuItemId){
14972             return this.items.get(t.menuItemId);
14973         }
14974     },
14975
14976     // private
14977     onClick : function(e){
14978         Roo.log("menu.onClick");
14979         var t = this.findTargetItem(e);
14980         if(!t){
14981             return;
14982         }
14983         Roo.log(e);
14984         if (Roo.isTouch && e.type == 'touchstart' && t.menu  && !t.disabled) {
14985             if(t == this.activeItem && t.shouldDeactivate(e)){
14986                 this.activeItem.deactivate();
14987                 delete this.activeItem;
14988                 return;
14989             }
14990             if(t.canActivate){
14991                 this.setActiveItem(t, true);
14992             }
14993             return;
14994             
14995             
14996         }
14997         
14998         t.onClick(e);
14999         this.fireEvent("click", this, t, e);
15000     },
15001
15002     // private
15003     setActiveItem : function(item, autoExpand){
15004         if(item != this.activeItem){
15005             if(this.activeItem){
15006                 this.activeItem.deactivate();
15007             }
15008             this.activeItem = item;
15009             item.activate(autoExpand);
15010         }else if(autoExpand){
15011             item.expandMenu();
15012         }
15013     },
15014
15015     // private
15016     tryActivate : function(start, step){
15017         var items = this.items;
15018         for(var i = start, len = items.length; i >= 0 && i < len; i+= step){
15019             var item = items.get(i);
15020             if(!item.disabled && item.canActivate){
15021                 this.setActiveItem(item, false);
15022                 return item;
15023             }
15024         }
15025         return false;
15026     },
15027
15028     // private
15029     onMouseOver : function(e){
15030         var t;
15031         if(t = this.findTargetItem(e)){
15032             if(t.canActivate && !t.disabled){
15033                 this.setActiveItem(t, true);
15034             }
15035         }
15036         this.fireEvent("mouseover", this, e, t);
15037     },
15038
15039     // private
15040     onMouseOut : function(e){
15041         var t;
15042         if(t = this.findTargetItem(e)){
15043             if(t == this.activeItem && t.shouldDeactivate(e)){
15044                 this.activeItem.deactivate();
15045                 delete this.activeItem;
15046             }
15047         }
15048         this.fireEvent("mouseout", this, e, t);
15049     },
15050
15051     /**
15052      * Read-only.  Returns true if the menu is currently displayed, else false.
15053      * @type Boolean
15054      */
15055     isVisible : function(){
15056         return this.el && !this.hidden;
15057     },
15058
15059     /**
15060      * Displays this menu relative to another element
15061      * @param {String/HTMLElement/Roo.Element} element The element to align to
15062      * @param {String} position (optional) The {@link Roo.Element#alignTo} anchor position to use in aligning to
15063      * the element (defaults to this.defaultAlign)
15064      * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
15065      */
15066     show : function(el, pos, parentMenu){
15067         this.parentMenu = parentMenu;
15068         if(!this.el){
15069             this.render();
15070         }
15071         this.fireEvent("beforeshow", this);
15072         this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign), parentMenu, false);
15073     },
15074
15075     /**
15076      * Displays this menu at a specific xy position
15077      * @param {Array} xyPosition Contains X & Y [x, y] values for the position at which to show the menu (coordinates are page-based)
15078      * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
15079      */
15080     showAt : function(xy, parentMenu, /* private: */_e){
15081         this.parentMenu = parentMenu;
15082         if(!this.el){
15083             this.render();
15084         }
15085         if(_e !== false){
15086             this.fireEvent("beforeshow", this);
15087             xy = this.el.adjustForConstraints(xy);
15088         }
15089         this.el.setXY(xy);
15090         this.el.show();
15091         this.hidden = false;
15092         this.focus();
15093         this.fireEvent("show", this);
15094     },
15095
15096     focus : function(){
15097         if(!this.hidden){
15098             this.doFocus.defer(50, this);
15099         }
15100     },
15101
15102     doFocus : function(){
15103         if(!this.hidden){
15104             this.focusEl.focus();
15105         }
15106     },
15107
15108     /**
15109      * Hides this menu and optionally all parent menus
15110      * @param {Boolean} deep (optional) True to hide all parent menus recursively, if any (defaults to false)
15111      */
15112     hide : function(deep){
15113         if(this.el && this.isVisible()){
15114             this.fireEvent("beforehide", this);
15115             if(this.activeItem){
15116                 this.activeItem.deactivate();
15117                 this.activeItem = null;
15118             }
15119             this.el.hide();
15120             this.hidden = true;
15121             this.fireEvent("hide", this);
15122         }
15123         if(deep === true && this.parentMenu){
15124             this.parentMenu.hide(true);
15125         }
15126     },
15127
15128     /**
15129      * Addds one or more items of any type supported by the Menu class, or that can be converted into menu items.
15130      * Any of the following are valid:
15131      * <ul>
15132      * <li>Any menu item object based on {@link Roo.menu.Item}</li>
15133      * <li>An HTMLElement object which will be converted to a menu item</li>
15134      * <li>A menu item config object that will be created as a new menu item</li>
15135      * <li>A string, which can either be '-' or 'separator' to add a menu separator, otherwise
15136      * it will be converted into a {@link Roo.menu.TextItem} and added</li>
15137      * </ul>
15138      * Usage:
15139      * <pre><code>
15140 // Create the menu
15141 var menu = new Roo.menu.Menu();
15142
15143 // Create a menu item to add by reference
15144 var menuItem = new Roo.menu.Item({ text: 'New Item!' });
15145
15146 // Add a bunch of items at once using different methods.
15147 // Only the last item added will be returned.
15148 var item = menu.add(
15149     menuItem,                // add existing item by ref
15150     'Dynamic Item',          // new TextItem
15151     '-',                     // new separator
15152     { text: 'Config Item' }  // new item by config
15153 );
15154 </code></pre>
15155      * @param {Mixed} args One or more menu items, menu item configs or other objects that can be converted to menu items
15156      * @return {Roo.menu.Item} The menu item that was added, or the last one if multiple items were added
15157      */
15158     add : function(){
15159         var a = arguments, l = a.length, item;
15160         for(var i = 0; i < l; i++){
15161             var el = a[i];
15162             if ((typeof(el) == "object") && el.xtype && el.xns) {
15163                 el = Roo.factory(el, Roo.menu);
15164             }
15165             
15166             if(el.render){ // some kind of Item
15167                 item = this.addItem(el);
15168             }else if(typeof el == "string"){ // string
15169                 if(el == "separator" || el == "-"){
15170                     item = this.addSeparator();
15171                 }else{
15172                     item = this.addText(el);
15173                 }
15174             }else if(el.tagName || el.el){ // element
15175                 item = this.addElement(el);
15176             }else if(typeof el == "object"){ // must be menu item config?
15177                 item = this.addMenuItem(el);
15178             }
15179         }
15180         return item;
15181     },
15182
15183     /**
15184      * Returns this menu's underlying {@link Roo.Element} object
15185      * @return {Roo.Element} The element
15186      */
15187     getEl : function(){
15188         if(!this.el){
15189             this.render();
15190         }
15191         return this.el;
15192     },
15193
15194     /**
15195      * Adds a separator bar to the menu
15196      * @return {Roo.menu.Item} The menu item that was added
15197      */
15198     addSeparator : function(){
15199         return this.addItem(new Roo.menu.Separator());
15200     },
15201
15202     /**
15203      * Adds an {@link Roo.Element} object to the menu
15204      * @param {String/HTMLElement/Roo.Element} el The element or DOM node to add, or its id
15205      * @return {Roo.menu.Item} The menu item that was added
15206      */
15207     addElement : function(el){
15208         return this.addItem(new Roo.menu.BaseItem(el));
15209     },
15210
15211     /**
15212      * Adds an existing object based on {@link Roo.menu.Item} to the menu
15213      * @param {Roo.menu.Item} item The menu item to add
15214      * @return {Roo.menu.Item} The menu item that was added
15215      */
15216     addItem : function(item){
15217         this.items.add(item);
15218         if(this.ul){
15219             var li = document.createElement("li");
15220             li.className = "x-menu-list-item";
15221             this.ul.dom.appendChild(li);
15222             item.render(li, this);
15223             this.delayAutoWidth();
15224         }
15225         return item;
15226     },
15227
15228     /**
15229      * Creates a new {@link Roo.menu.Item} based an the supplied config object and adds it to the menu
15230      * @param {Object} config A MenuItem config object
15231      * @return {Roo.menu.Item} The menu item that was added
15232      */
15233     addMenuItem : function(config){
15234         if(!(config instanceof Roo.menu.Item)){
15235             if(typeof config.checked == "boolean"){ // must be check menu item config?
15236                 config = new Roo.menu.CheckItem(config);
15237             }else{
15238                 config = new Roo.menu.Item(config);
15239             }
15240         }
15241         return this.addItem(config);
15242     },
15243
15244     /**
15245      * Creates a new {@link Roo.menu.TextItem} with the supplied text and adds it to the menu
15246      * @param {String} text The text to display in the menu item
15247      * @return {Roo.menu.Item} The menu item that was added
15248      */
15249     addText : function(text){
15250         return this.addItem(new Roo.menu.TextItem({ text : text }));
15251     },
15252
15253     /**
15254      * Inserts an existing object based on {@link Roo.menu.Item} to the menu at a specified index
15255      * @param {Number} index The index in the menu's list of current items where the new item should be inserted
15256      * @param {Roo.menu.Item} item The menu item to add
15257      * @return {Roo.menu.Item} The menu item that was added
15258      */
15259     insert : function(index, item){
15260         this.items.insert(index, item);
15261         if(this.ul){
15262             var li = document.createElement("li");
15263             li.className = "x-menu-list-item";
15264             this.ul.dom.insertBefore(li, this.ul.dom.childNodes[index]);
15265             item.render(li, this);
15266             this.delayAutoWidth();
15267         }
15268         return item;
15269     },
15270
15271     /**
15272      * Removes an {@link Roo.menu.Item} from the menu and destroys the object
15273      * @param {Roo.menu.Item} item The menu item to remove
15274      */
15275     remove : function(item){
15276         this.items.removeKey(item.id);
15277         item.destroy();
15278     },
15279
15280     /**
15281      * Removes and destroys all items in the menu
15282      */
15283     removeAll : function(){
15284         var f;
15285         while(f = this.items.first()){
15286             this.remove(f);
15287         }
15288     }
15289 });
15290
15291 // MenuNav is a private utility class used internally by the Menu
15292 Roo.menu.MenuNav = function(menu){
15293     Roo.menu.MenuNav.superclass.constructor.call(this, menu.el);
15294     this.scope = this.menu = menu;
15295 };
15296
15297 Roo.extend(Roo.menu.MenuNav, Roo.KeyNav, {
15298     doRelay : function(e, h){
15299         var k = e.getKey();
15300         if(!this.menu.activeItem && e.isNavKeyPress() && k != e.SPACE && k != e.RETURN){
15301             this.menu.tryActivate(0, 1);
15302             return false;
15303         }
15304         return h.call(this.scope || this, e, this.menu);
15305     },
15306
15307     up : function(e, m){
15308         if(!m.tryActivate(m.items.indexOf(m.activeItem)-1, -1)){
15309             m.tryActivate(m.items.length-1, -1);
15310         }
15311     },
15312
15313     down : function(e, m){
15314         if(!m.tryActivate(m.items.indexOf(m.activeItem)+1, 1)){
15315             m.tryActivate(0, 1);
15316         }
15317     },
15318
15319     right : function(e, m){
15320         if(m.activeItem){
15321             m.activeItem.expandMenu(true);
15322         }
15323     },
15324
15325     left : function(e, m){
15326         m.hide();
15327         if(m.parentMenu && m.parentMenu.activeItem){
15328             m.parentMenu.activeItem.activate();
15329         }
15330     },
15331
15332     enter : function(e, m){
15333         if(m.activeItem){
15334             e.stopPropagation();
15335             m.activeItem.onClick(e);
15336             m.fireEvent("click", this, m.activeItem);
15337             return true;
15338         }
15339     }
15340 });/*
15341  * Based on:
15342  * Ext JS Library 1.1.1
15343  * Copyright(c) 2006-2007, Ext JS, LLC.
15344  *
15345  * Originally Released Under LGPL - original licence link has changed is not relivant.
15346  *
15347  * Fork - LGPL
15348  * <script type="text/javascript">
15349  */
15350  
15351 /**
15352  * @class Roo.menu.MenuMgr
15353  * Provides a common registry of all menu items on a page so that they can be easily accessed by id.
15354  * @singleton
15355  */
15356 Roo.menu.MenuMgr = function(){
15357    var menus, active, groups = {}, attached = false, lastShow = new Date();
15358
15359    // private - called when first menu is created
15360    function init(){
15361        menus = {};
15362        active = new Roo.util.MixedCollection();
15363        Roo.get(document).addKeyListener(27, function(){
15364            if(active.length > 0){
15365                hideAll();
15366            }
15367        });
15368    }
15369
15370    // private
15371    function hideAll(){
15372        if(active && active.length > 0){
15373            var c = active.clone();
15374            c.each(function(m){
15375                m.hide();
15376            });
15377        }
15378    }
15379
15380    // private
15381    function onHide(m){
15382        active.remove(m);
15383        if(active.length < 1){
15384            Roo.get(document).un("mousedown", onMouseDown);
15385            attached = false;
15386        }
15387    }
15388
15389    // private
15390    function onShow(m){
15391        var last = active.last();
15392        lastShow = new Date();
15393        active.add(m);
15394        if(!attached){
15395            Roo.get(document).on("mousedown", onMouseDown);
15396            attached = true;
15397        }
15398        if(m.parentMenu){
15399           m.getEl().setZIndex(parseInt(m.parentMenu.getEl().getStyle("z-index"), 10) + 3);
15400           m.parentMenu.activeChild = m;
15401        }else if(last && last.isVisible()){
15402           m.getEl().setZIndex(parseInt(last.getEl().getStyle("z-index"), 10) + 3);
15403        }
15404    }
15405
15406    // private
15407    function onBeforeHide(m){
15408        if(m.activeChild){
15409            m.activeChild.hide();
15410        }
15411        if(m.autoHideTimer){
15412            clearTimeout(m.autoHideTimer);
15413            delete m.autoHideTimer;
15414        }
15415    }
15416
15417    // private
15418    function onBeforeShow(m){
15419        var pm = m.parentMenu;
15420        if(!pm && !m.allowOtherMenus){
15421            hideAll();
15422        }else if(pm && pm.activeChild && active != m){
15423            pm.activeChild.hide();
15424        }
15425    }
15426
15427    // private
15428    function onMouseDown(e){
15429        if(lastShow.getElapsed() > 50 && active.length > 0 && !e.getTarget(".x-menu")){
15430            hideAll();
15431        }
15432    }
15433
15434    // private
15435    function onBeforeCheck(mi, state){
15436        if(state){
15437            var g = groups[mi.group];
15438            for(var i = 0, l = g.length; i < l; i++){
15439                if(g[i] != mi){
15440                    g[i].setChecked(false);
15441                }
15442            }
15443        }
15444    }
15445
15446    return {
15447
15448        /**
15449         * Hides all menus that are currently visible
15450         */
15451        hideAll : function(){
15452             hideAll();  
15453        },
15454
15455        // private
15456        register : function(menu){
15457            if(!menus){
15458                init();
15459            }
15460            menus[menu.id] = menu;
15461            menu.on("beforehide", onBeforeHide);
15462            menu.on("hide", onHide);
15463            menu.on("beforeshow", onBeforeShow);
15464            menu.on("show", onShow);
15465            var g = menu.group;
15466            if(g && menu.events["checkchange"]){
15467                if(!groups[g]){
15468                    groups[g] = [];
15469                }
15470                groups[g].push(menu);
15471                menu.on("checkchange", onCheck);
15472            }
15473        },
15474
15475         /**
15476          * Returns a {@link Roo.menu.Menu} object
15477          * @param {String/Object} menu The string menu id, an existing menu object reference, or a Menu config that will
15478          * be used to generate and return a new Menu instance.
15479          */
15480        get : function(menu){
15481            if(typeof menu == "string"){ // menu id
15482                return menus[menu];
15483            }else if(menu.events){  // menu instance
15484                return menu;
15485            }else if(typeof menu.length == 'number'){ // array of menu items?
15486                return new Roo.menu.Menu({items:menu});
15487            }else{ // otherwise, must be a config
15488                return new Roo.menu.Menu(menu);
15489            }
15490        },
15491
15492        // private
15493        unregister : function(menu){
15494            delete menus[menu.id];
15495            menu.un("beforehide", onBeforeHide);
15496            menu.un("hide", onHide);
15497            menu.un("beforeshow", onBeforeShow);
15498            menu.un("show", onShow);
15499            var g = menu.group;
15500            if(g && menu.events["checkchange"]){
15501                groups[g].remove(menu);
15502                menu.un("checkchange", onCheck);
15503            }
15504        },
15505
15506        // private
15507        registerCheckable : function(menuItem){
15508            var g = menuItem.group;
15509            if(g){
15510                if(!groups[g]){
15511                    groups[g] = [];
15512                }
15513                groups[g].push(menuItem);
15514                menuItem.on("beforecheckchange", onBeforeCheck);
15515            }
15516        },
15517
15518        // private
15519        unregisterCheckable : function(menuItem){
15520            var g = menuItem.group;
15521            if(g){
15522                groups[g].remove(menuItem);
15523                menuItem.un("beforecheckchange", onBeforeCheck);
15524            }
15525        }
15526    };
15527 }();/*
15528  * Based on:
15529  * Ext JS Library 1.1.1
15530  * Copyright(c) 2006-2007, Ext JS, LLC.
15531  *
15532  * Originally Released Under LGPL - original licence link has changed is not relivant.
15533  *
15534  * Fork - LGPL
15535  * <script type="text/javascript">
15536  */
15537  
15538
15539 /**
15540  * @class Roo.menu.BaseItem
15541  * @extends Roo.Component
15542  * The base class for all items that render into menus.  BaseItem provides default rendering, activated state
15543  * management and base configuration options shared by all menu components.
15544  * @constructor
15545  * Creates a new BaseItem
15546  * @param {Object} config Configuration options
15547  */
15548 Roo.menu.BaseItem = function(config){
15549     Roo.menu.BaseItem.superclass.constructor.call(this, config);
15550
15551     this.addEvents({
15552         /**
15553          * @event click
15554          * Fires when this item is clicked
15555          * @param {Roo.menu.BaseItem} this
15556          * @param {Roo.EventObject} e
15557          */
15558         click: true,
15559         /**
15560          * @event activate
15561          * Fires when this item is activated
15562          * @param {Roo.menu.BaseItem} this
15563          */
15564         activate : true,
15565         /**
15566          * @event deactivate
15567          * Fires when this item is deactivated
15568          * @param {Roo.menu.BaseItem} this
15569          */
15570         deactivate : true
15571     });
15572
15573     if(this.handler){
15574         this.on("click", this.handler, this.scope, true);
15575     }
15576 };
15577
15578 Roo.extend(Roo.menu.BaseItem, Roo.Component, {
15579     /**
15580      * @cfg {Function} handler
15581      * A function that will handle the click event of this menu item (defaults to undefined)
15582      */
15583     /**
15584      * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to false)
15585      */
15586     canActivate : false,
15587     
15588      /**
15589      * @cfg {Boolean} hidden True to prevent creation of this menu item (defaults to false)
15590      */
15591     hidden: false,
15592     
15593     /**
15594      * @cfg {String} activeClass The CSS class to use when the item becomes activated (defaults to "x-menu-item-active")
15595      */
15596     activeClass : "x-menu-item-active",
15597     /**
15598      * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to true)
15599      */
15600     hideOnClick : true,
15601     /**
15602      * @cfg {Number} hideDelay Length of time in milliseconds to wait before hiding after a click (defaults to 100)
15603      */
15604     hideDelay : 100,
15605
15606     // private
15607     ctype: "Roo.menu.BaseItem",
15608
15609     // private
15610     actionMode : "container",
15611
15612     // private
15613     render : function(container, parentMenu){
15614         this.parentMenu = parentMenu;
15615         Roo.menu.BaseItem.superclass.render.call(this, container);
15616         this.container.menuItemId = this.id;
15617     },
15618
15619     // private
15620     onRender : function(container, position){
15621         this.el = Roo.get(this.el);
15622         container.dom.appendChild(this.el.dom);
15623     },
15624
15625     // private
15626     onClick : function(e){
15627         if(!this.disabled && this.fireEvent("click", this, e) !== false
15628                 && this.parentMenu.fireEvent("itemclick", this, e) !== false){
15629             this.handleClick(e);
15630         }else{
15631             e.stopEvent();
15632         }
15633     },
15634
15635     // private
15636     activate : function(){
15637         if(this.disabled){
15638             return false;
15639         }
15640         var li = this.container;
15641         li.addClass(this.activeClass);
15642         this.region = li.getRegion().adjust(2, 2, -2, -2);
15643         this.fireEvent("activate", this);
15644         return true;
15645     },
15646
15647     // private
15648     deactivate : function(){
15649         this.container.removeClass(this.activeClass);
15650         this.fireEvent("deactivate", this);
15651     },
15652
15653     // private
15654     shouldDeactivate : function(e){
15655         return !this.region || !this.region.contains(e.getPoint());
15656     },
15657
15658     // private
15659     handleClick : function(e){
15660         if(this.hideOnClick){
15661             this.parentMenu.hide.defer(this.hideDelay, this.parentMenu, [true]);
15662         }
15663     },
15664
15665     // private
15666     expandMenu : function(autoActivate){
15667         // do nothing
15668     },
15669
15670     // private
15671     hideMenu : function(){
15672         // do nothing
15673     }
15674 });/*
15675  * Based on:
15676  * Ext JS Library 1.1.1
15677  * Copyright(c) 2006-2007, Ext JS, LLC.
15678  *
15679  * Originally Released Under LGPL - original licence link has changed is not relivant.
15680  *
15681  * Fork - LGPL
15682  * <script type="text/javascript">
15683  */
15684  
15685 /**
15686  * @class Roo.menu.Adapter
15687  * @extends Roo.menu.BaseItem
15688  * 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.
15689  * It provides basic rendering, activation management and enable/disable logic required to work in menus.
15690  * @constructor
15691  * Creates a new Adapter
15692  * @param {Object} config Configuration options
15693  */
15694 Roo.menu.Adapter = function(component, config){
15695     Roo.menu.Adapter.superclass.constructor.call(this, config);
15696     this.component = component;
15697 };
15698 Roo.extend(Roo.menu.Adapter, Roo.menu.BaseItem, {
15699     // private
15700     canActivate : true,
15701
15702     // private
15703     onRender : function(container, position){
15704         this.component.render(container);
15705         this.el = this.component.getEl();
15706     },
15707
15708     // private
15709     activate : function(){
15710         if(this.disabled){
15711             return false;
15712         }
15713         this.component.focus();
15714         this.fireEvent("activate", this);
15715         return true;
15716     },
15717
15718     // private
15719     deactivate : function(){
15720         this.fireEvent("deactivate", this);
15721     },
15722
15723     // private
15724     disable : function(){
15725         this.component.disable();
15726         Roo.menu.Adapter.superclass.disable.call(this);
15727     },
15728
15729     // private
15730     enable : function(){
15731         this.component.enable();
15732         Roo.menu.Adapter.superclass.enable.call(this);
15733     }
15734 });/*
15735  * Based on:
15736  * Ext JS Library 1.1.1
15737  * Copyright(c) 2006-2007, Ext JS, LLC.
15738  *
15739  * Originally Released Under LGPL - original licence link has changed is not relivant.
15740  *
15741  * Fork - LGPL
15742  * <script type="text/javascript">
15743  */
15744
15745 /**
15746  * @class Roo.menu.TextItem
15747  * @extends Roo.menu.BaseItem
15748  * Adds a static text string to a menu, usually used as either a heading or group separator.
15749  * Note: old style constructor with text is still supported.
15750  * 
15751  * @constructor
15752  * Creates a new TextItem
15753  * @param {Object} cfg Configuration
15754  */
15755 Roo.menu.TextItem = function(cfg){
15756     if (typeof(cfg) == 'string') {
15757         this.text = cfg;
15758     } else {
15759         Roo.apply(this,cfg);
15760     }
15761     
15762     Roo.menu.TextItem.superclass.constructor.call(this);
15763 };
15764
15765 Roo.extend(Roo.menu.TextItem, Roo.menu.BaseItem, {
15766     /**
15767      * @cfg {Boolean} text Text to show on item.
15768      */
15769     text : '',
15770     
15771     /**
15772      * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to false)
15773      */
15774     hideOnClick : false,
15775     /**
15776      * @cfg {String} itemCls The default CSS class to use for text items (defaults to "x-menu-text")
15777      */
15778     itemCls : "x-menu-text",
15779
15780     // private
15781     onRender : function(){
15782         var s = document.createElement("span");
15783         s.className = this.itemCls;
15784         s.innerHTML = this.text;
15785         this.el = s;
15786         Roo.menu.TextItem.superclass.onRender.apply(this, arguments);
15787     }
15788 });/*
15789  * Based on:
15790  * Ext JS Library 1.1.1
15791  * Copyright(c) 2006-2007, Ext JS, LLC.
15792  *
15793  * Originally Released Under LGPL - original licence link has changed is not relivant.
15794  *
15795  * Fork - LGPL
15796  * <script type="text/javascript">
15797  */
15798
15799 /**
15800  * @class Roo.menu.Separator
15801  * @extends Roo.menu.BaseItem
15802  * Adds a separator bar to a menu, used to divide logical groups of menu items. Generally you will
15803  * add one of these by using "-" in you call to add() or in your items config rather than creating one directly.
15804  * @constructor
15805  * @param {Object} config Configuration options
15806  */
15807 Roo.menu.Separator = function(config){
15808     Roo.menu.Separator.superclass.constructor.call(this, config);
15809 };
15810
15811 Roo.extend(Roo.menu.Separator, Roo.menu.BaseItem, {
15812     /**
15813      * @cfg {String} itemCls The default CSS class to use for separators (defaults to "x-menu-sep")
15814      */
15815     itemCls : "x-menu-sep",
15816     /**
15817      * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to false)
15818      */
15819     hideOnClick : false,
15820
15821     // private
15822     onRender : function(li){
15823         var s = document.createElement("span");
15824         s.className = this.itemCls;
15825         s.innerHTML = "&#160;";
15826         this.el = s;
15827         li.addClass("x-menu-sep-li");
15828         Roo.menu.Separator.superclass.onRender.apply(this, arguments);
15829     }
15830 });/*
15831  * Based on:
15832  * Ext JS Library 1.1.1
15833  * Copyright(c) 2006-2007, Ext JS, LLC.
15834  *
15835  * Originally Released Under LGPL - original licence link has changed is not relivant.
15836  *
15837  * Fork - LGPL
15838  * <script type="text/javascript">
15839  */
15840 /**
15841  * @class Roo.menu.Item
15842  * @extends Roo.menu.BaseItem
15843  * A base class for all menu items that require menu-related functionality (like sub-menus) and are not static
15844  * display items.  Item extends the base functionality of {@link Roo.menu.BaseItem} by adding menu-specific
15845  * activation and click handling.
15846  * @constructor
15847  * Creates a new Item
15848  * @param {Object} config Configuration options
15849  */
15850 Roo.menu.Item = function(config){
15851     Roo.menu.Item.superclass.constructor.call(this, config);
15852     if(this.menu){
15853         this.menu = Roo.menu.MenuMgr.get(this.menu);
15854     }
15855 };
15856 Roo.extend(Roo.menu.Item, Roo.menu.BaseItem, {
15857     
15858     /**
15859      * @cfg {String} text
15860      * The text to show on the menu item.
15861      */
15862     text: '',
15863      /**
15864      * @cfg {String} HTML to render in menu
15865      * The text to show on the menu item (HTML version).
15866      */
15867     html: '',
15868     /**
15869      * @cfg {String} icon
15870      * The path to an icon to display in this menu item (defaults to Roo.BLANK_IMAGE_URL)
15871      */
15872     icon: undefined,
15873     /**
15874      * @cfg {String} itemCls The default CSS class to use for menu items (defaults to "x-menu-item")
15875      */
15876     itemCls : "x-menu-item",
15877     /**
15878      * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to true)
15879      */
15880     canActivate : true,
15881     /**
15882      * @cfg {Number} showDelay Length of time in milliseconds to wait before showing this item (defaults to 200)
15883      */
15884     showDelay: 200,
15885     // doc'd in BaseItem
15886     hideDelay: 200,
15887
15888     // private
15889     ctype: "Roo.menu.Item",
15890     
15891     // private
15892     onRender : function(container, position){
15893         var el = document.createElement("a");
15894         el.hideFocus = true;
15895         el.unselectable = "on";
15896         el.href = this.href || "#";
15897         if(this.hrefTarget){
15898             el.target = this.hrefTarget;
15899         }
15900         el.className = this.itemCls + (this.menu ?  " x-menu-item-arrow" : "") + (this.cls ?  " " + this.cls : "");
15901         
15902         var html = this.html.length ? this.html  : String.format('{0}',this.text);
15903         
15904         el.innerHTML = String.format(
15905                 '<img src="{0}" class="x-menu-item-icon {1}" />' + html,
15906                 this.icon || Roo.BLANK_IMAGE_URL, this.iconCls || '');
15907         this.el = el;
15908         Roo.menu.Item.superclass.onRender.call(this, container, position);
15909     },
15910
15911     /**
15912      * Sets the text to display in this menu item
15913      * @param {String} text The text to display
15914      * @param {Boolean} isHTML true to indicate text is pure html.
15915      */
15916     setText : function(text, isHTML){
15917         if (isHTML) {
15918             this.html = text;
15919         } else {
15920             this.text = text;
15921             this.html = '';
15922         }
15923         if(this.rendered){
15924             var html = this.html.length ? this.html  : String.format('{0}',this.text);
15925      
15926             this.el.update(String.format(
15927                 '<img src="{0}" class="x-menu-item-icon {2}">' + html,
15928                 this.icon || Roo.BLANK_IMAGE_URL, this.text, this.iconCls || ''));
15929             this.parentMenu.autoWidth();
15930         }
15931     },
15932
15933     // private
15934     handleClick : function(e){
15935         if(!this.href){ // if no link defined, stop the event automatically
15936             e.stopEvent();
15937         }
15938         Roo.menu.Item.superclass.handleClick.apply(this, arguments);
15939     },
15940
15941     // private
15942     activate : function(autoExpand){
15943         if(Roo.menu.Item.superclass.activate.apply(this, arguments)){
15944             this.focus();
15945             if(autoExpand){
15946                 this.expandMenu();
15947             }
15948         }
15949         return true;
15950     },
15951
15952     // private
15953     shouldDeactivate : function(e){
15954         if(Roo.menu.Item.superclass.shouldDeactivate.call(this, e)){
15955             if(this.menu && this.menu.isVisible()){
15956                 return !this.menu.getEl().getRegion().contains(e.getPoint());
15957             }
15958             return true;
15959         }
15960         return false;
15961     },
15962
15963     // private
15964     deactivate : function(){
15965         Roo.menu.Item.superclass.deactivate.apply(this, arguments);
15966         this.hideMenu();
15967     },
15968
15969     // private
15970     expandMenu : function(autoActivate){
15971         if(!this.disabled && this.menu){
15972             clearTimeout(this.hideTimer);
15973             delete this.hideTimer;
15974             if(!this.menu.isVisible() && !this.showTimer){
15975                 this.showTimer = this.deferExpand.defer(this.showDelay, this, [autoActivate]);
15976             }else if (this.menu.isVisible() && autoActivate){
15977                 this.menu.tryActivate(0, 1);
15978             }
15979         }
15980     },
15981
15982     // private
15983     deferExpand : function(autoActivate){
15984         delete this.showTimer;
15985         this.menu.show(this.container, this.parentMenu.subMenuAlign || "tl-tr?", this.parentMenu);
15986         if(autoActivate){
15987             this.menu.tryActivate(0, 1);
15988         }
15989     },
15990
15991     // private
15992     hideMenu : function(){
15993         clearTimeout(this.showTimer);
15994         delete this.showTimer;
15995         if(!this.hideTimer && this.menu && this.menu.isVisible()){
15996             this.hideTimer = this.deferHide.defer(this.hideDelay, this);
15997         }
15998     },
15999
16000     // private
16001     deferHide : function(){
16002         delete this.hideTimer;
16003         this.menu.hide();
16004     }
16005 });/*
16006  * Based on:
16007  * Ext JS Library 1.1.1
16008  * Copyright(c) 2006-2007, Ext JS, LLC.
16009  *
16010  * Originally Released Under LGPL - original licence link has changed is not relivant.
16011  *
16012  * Fork - LGPL
16013  * <script type="text/javascript">
16014  */
16015  
16016 /**
16017  * @class Roo.menu.CheckItem
16018  * @extends Roo.menu.Item
16019  * Adds a menu item that contains a checkbox by default, but can also be part of a radio group.
16020  * @constructor
16021  * Creates a new CheckItem
16022  * @param {Object} config Configuration options
16023  */
16024 Roo.menu.CheckItem = function(config){
16025     Roo.menu.CheckItem.superclass.constructor.call(this, config);
16026     this.addEvents({
16027         /**
16028          * @event beforecheckchange
16029          * Fires before the checked value is set, providing an opportunity to cancel if needed
16030          * @param {Roo.menu.CheckItem} this
16031          * @param {Boolean} checked The new checked value that will be set
16032          */
16033         "beforecheckchange" : true,
16034         /**
16035          * @event checkchange
16036          * Fires after the checked value has been set
16037          * @param {Roo.menu.CheckItem} this
16038          * @param {Boolean} checked The checked value that was set
16039          */
16040         "checkchange" : true
16041     });
16042     if(this.checkHandler){
16043         this.on('checkchange', this.checkHandler, this.scope);
16044     }
16045 };
16046 Roo.extend(Roo.menu.CheckItem, Roo.menu.Item, {
16047     /**
16048      * @cfg {String} group
16049      * All check items with the same group name will automatically be grouped into a single-select
16050      * radio button group (defaults to '')
16051      */
16052     /**
16053      * @cfg {String} itemCls The default CSS class to use for check items (defaults to "x-menu-item x-menu-check-item")
16054      */
16055     itemCls : "x-menu-item x-menu-check-item",
16056     /**
16057      * @cfg {String} groupClass The default CSS class to use for radio group check items (defaults to "x-menu-group-item")
16058      */
16059     groupClass : "x-menu-group-item",
16060
16061     /**
16062      * @cfg {Boolean} checked True to initialize this checkbox as checked (defaults to false).  Note that
16063      * if this checkbox is part of a radio group (group = true) only the last item in the group that is
16064      * initialized with checked = true will be rendered as checked.
16065      */
16066     checked: false,
16067
16068     // private
16069     ctype: "Roo.menu.CheckItem",
16070
16071     // private
16072     onRender : function(c){
16073         Roo.menu.CheckItem.superclass.onRender.apply(this, arguments);
16074         if(this.group){
16075             this.el.addClass(this.groupClass);
16076         }
16077         Roo.menu.MenuMgr.registerCheckable(this);
16078         if(this.checked){
16079             this.checked = false;
16080             this.setChecked(true, true);
16081         }
16082     },
16083
16084     // private
16085     destroy : function(){
16086         if(this.rendered){
16087             Roo.menu.MenuMgr.unregisterCheckable(this);
16088         }
16089         Roo.menu.CheckItem.superclass.destroy.apply(this, arguments);
16090     },
16091
16092     /**
16093      * Set the checked state of this item
16094      * @param {Boolean} checked The new checked value
16095      * @param {Boolean} suppressEvent (optional) True to prevent the checkchange event from firing (defaults to false)
16096      */
16097     setChecked : function(state, suppressEvent){
16098         if(this.checked != state && this.fireEvent("beforecheckchange", this, state) !== false){
16099             if(this.container){
16100                 this.container[state ? "addClass" : "removeClass"]("x-menu-item-checked");
16101             }
16102             this.checked = state;
16103             if(suppressEvent !== true){
16104                 this.fireEvent("checkchange", this, state);
16105             }
16106         }
16107     },
16108
16109     // private
16110     handleClick : function(e){
16111        if(!this.disabled && !(this.checked && this.group)){// disable unselect on radio item
16112            this.setChecked(!this.checked);
16113        }
16114        Roo.menu.CheckItem.superclass.handleClick.apply(this, arguments);
16115     }
16116 });/*
16117  * Based on:
16118  * Ext JS Library 1.1.1
16119  * Copyright(c) 2006-2007, Ext JS, LLC.
16120  *
16121  * Originally Released Under LGPL - original licence link has changed is not relivant.
16122  *
16123  * Fork - LGPL
16124  * <script type="text/javascript">
16125  */
16126  
16127 /**
16128  * @class Roo.menu.DateItem
16129  * @extends Roo.menu.Adapter
16130  * A menu item that wraps the {@link Roo.DatPicker} component.
16131  * @constructor
16132  * Creates a new DateItem
16133  * @param {Object} config Configuration options
16134  */
16135 Roo.menu.DateItem = function(config){
16136     Roo.menu.DateItem.superclass.constructor.call(this, new Roo.DatePicker(config), config);
16137     /** The Roo.DatePicker object @type Roo.DatePicker */
16138     this.picker = this.component;
16139     this.addEvents({select: true});
16140     
16141     this.picker.on("render", function(picker){
16142         picker.getEl().swallowEvent("click");
16143         picker.container.addClass("x-menu-date-item");
16144     });
16145
16146     this.picker.on("select", this.onSelect, this);
16147 };
16148
16149 Roo.extend(Roo.menu.DateItem, Roo.menu.Adapter, {
16150     // private
16151     onSelect : function(picker, date){
16152         this.fireEvent("select", this, date, picker);
16153         Roo.menu.DateItem.superclass.handleClick.call(this);
16154     }
16155 });/*
16156  * Based on:
16157  * Ext JS Library 1.1.1
16158  * Copyright(c) 2006-2007, Ext JS, LLC.
16159  *
16160  * Originally Released Under LGPL - original licence link has changed is not relivant.
16161  *
16162  * Fork - LGPL
16163  * <script type="text/javascript">
16164  */
16165  
16166 /**
16167  * @class Roo.menu.ColorItem
16168  * @extends Roo.menu.Adapter
16169  * A menu item that wraps the {@link Roo.ColorPalette} component.
16170  * @constructor
16171  * Creates a new ColorItem
16172  * @param {Object} config Configuration options
16173  */
16174 Roo.menu.ColorItem = function(config){
16175     Roo.menu.ColorItem.superclass.constructor.call(this, new Roo.ColorPalette(config), config);
16176     /** The Roo.ColorPalette object @type Roo.ColorPalette */
16177     this.palette = this.component;
16178     this.relayEvents(this.palette, ["select"]);
16179     if(this.selectHandler){
16180         this.on('select', this.selectHandler, this.scope);
16181     }
16182 };
16183 Roo.extend(Roo.menu.ColorItem, Roo.menu.Adapter);/*
16184  * Based on:
16185  * Ext JS Library 1.1.1
16186  * Copyright(c) 2006-2007, Ext JS, LLC.
16187  *
16188  * Originally Released Under LGPL - original licence link has changed is not relivant.
16189  *
16190  * Fork - LGPL
16191  * <script type="text/javascript">
16192  */
16193  
16194
16195 /**
16196  * @class Roo.menu.DateMenu
16197  * @extends Roo.menu.Menu
16198  * A menu containing a {@link Roo.menu.DateItem} component (which provides a date picker).
16199  * @constructor
16200  * Creates a new DateMenu
16201  * @param {Object} config Configuration options
16202  */
16203 Roo.menu.DateMenu = function(config){
16204     Roo.menu.DateMenu.superclass.constructor.call(this, config);
16205     this.plain = true;
16206     var di = new Roo.menu.DateItem(config);
16207     this.add(di);
16208     /**
16209      * The {@link Roo.DatePicker} instance for this DateMenu
16210      * @type DatePicker
16211      */
16212     this.picker = di.picker;
16213     /**
16214      * @event select
16215      * @param {DatePicker} picker
16216      * @param {Date} date
16217      */
16218     this.relayEvents(di, ["select"]);
16219     this.on('beforeshow', function(){
16220         if(this.picker){
16221             this.picker.hideMonthPicker(false);
16222         }
16223     }, this);
16224 };
16225 Roo.extend(Roo.menu.DateMenu, Roo.menu.Menu, {
16226     cls:'x-date-menu'
16227 });/*
16228  * Based on:
16229  * Ext JS Library 1.1.1
16230  * Copyright(c) 2006-2007, Ext JS, LLC.
16231  *
16232  * Originally Released Under LGPL - original licence link has changed is not relivant.
16233  *
16234  * Fork - LGPL
16235  * <script type="text/javascript">
16236  */
16237  
16238
16239 /**
16240  * @class Roo.menu.ColorMenu
16241  * @extends Roo.menu.Menu
16242  * A menu containing a {@link Roo.menu.ColorItem} component (which provides a basic color picker).
16243  * @constructor
16244  * Creates a new ColorMenu
16245  * @param {Object} config Configuration options
16246  */
16247 Roo.menu.ColorMenu = function(config){
16248     Roo.menu.ColorMenu.superclass.constructor.call(this, config);
16249     this.plain = true;
16250     var ci = new Roo.menu.ColorItem(config);
16251     this.add(ci);
16252     /**
16253      * The {@link Roo.ColorPalette} instance for this ColorMenu
16254      * @type ColorPalette
16255      */
16256     this.palette = ci.palette;
16257     /**
16258      * @event select
16259      * @param {ColorPalette} palette
16260      * @param {String} color
16261      */
16262     this.relayEvents(ci, ["select"]);
16263 };
16264 Roo.extend(Roo.menu.ColorMenu, Roo.menu.Menu);/*
16265  * Based on:
16266  * Ext JS Library 1.1.1
16267  * Copyright(c) 2006-2007, Ext JS, LLC.
16268  *
16269  * Originally Released Under LGPL - original licence link has changed is not relivant.
16270  *
16271  * Fork - LGPL
16272  * <script type="text/javascript">
16273  */
16274  
16275 /**
16276  * @class Roo.form.TextItem
16277  * @extends Roo.BoxComponent
16278  * Base class for form fields that provides default event handling, sizing, value handling and other functionality.
16279  * @constructor
16280  * Creates a new TextItem
16281  * @param {Object} config Configuration options
16282  */
16283 Roo.form.TextItem = function(config){
16284     Roo.form.TextItem.superclass.constructor.call(this, config);
16285 };
16286
16287 Roo.extend(Roo.form.TextItem, Roo.BoxComponent,  {
16288     
16289     /**
16290      * @cfg {String} tag the tag for this item (default div)
16291      */
16292     tag : 'div',
16293     /**
16294      * @cfg {String} html the content for this item
16295      */
16296     html : '',
16297     
16298     getAutoCreate : function()
16299     {
16300         var cfg = {
16301             id: this.id,
16302             tag: this.tag,
16303             html: this.html,
16304             cls: 'x-form-item'
16305         };
16306         
16307         return cfg;
16308         
16309     },
16310     
16311     onRender : function(ct, position)
16312     {
16313         Roo.form.TextItem.superclass.onRender.call(this, ct, position);
16314         
16315         if(!this.el){
16316             var cfg = this.getAutoCreate();
16317             if(!cfg.name){
16318                 cfg.name = typeof(this.name) == 'undefined' ? this.id : this.name;
16319             }
16320             if (!cfg.name.length) {
16321                 delete cfg.name;
16322             }
16323             this.el = ct.createChild(cfg, position);
16324         }
16325     }
16326     
16327 });/*
16328  * Based on:
16329  * Ext JS Library 1.1.1
16330  * Copyright(c) 2006-2007, Ext JS, LLC.
16331  *
16332  * Originally Released Under LGPL - original licence link has changed is not relivant.
16333  *
16334  * Fork - LGPL
16335  * <script type="text/javascript">
16336  */
16337  
16338 /**
16339  * @class Roo.form.Field
16340  * @extends Roo.BoxComponent
16341  * Base class for form fields that provides default event handling, sizing, value handling and other functionality.
16342  * @constructor
16343  * Creates a new Field
16344  * @param {Object} config Configuration options
16345  */
16346 Roo.form.Field = function(config){
16347     Roo.form.Field.superclass.constructor.call(this, config);
16348 };
16349
16350 Roo.extend(Roo.form.Field, Roo.BoxComponent,  {
16351     /**
16352      * @cfg {String} fieldLabel Label to use when rendering a form.
16353      */
16354        /**
16355      * @cfg {String} qtip Mouse over tip
16356      */
16357      
16358     /**
16359      * @cfg {String} invalidClass The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
16360      */
16361     invalidClass : "x-form-invalid",
16362     /**
16363      * @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")
16364      */
16365     invalidText : "The value in this field is invalid",
16366     /**
16367      * @cfg {String} focusClass The CSS class to use when the field receives focus (defaults to "x-form-focus")
16368      */
16369     focusClass : "x-form-focus",
16370     /**
16371      * @cfg {String/Boolean} validationEvent The event that should initiate field validation. Set to false to disable
16372       automatic validation (defaults to "keyup").
16373      */
16374     validationEvent : "keyup",
16375     /**
16376      * @cfg {Boolean} validateOnBlur Whether the field should validate when it loses focus (defaults to true).
16377      */
16378     validateOnBlur : true,
16379     /**
16380      * @cfg {Number} validationDelay The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
16381      */
16382     validationDelay : 250,
16383     /**
16384      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
16385      * {tag: "input", type: "text", size: "20", autocomplete: "off"})
16386      */
16387     defaultAutoCreate : {tag: "input", type: "text", size: "20", autocomplete: "new-password"},
16388     /**
16389      * @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-field")
16390      */
16391     fieldClass : "x-form-field",
16392     /**
16393      * @cfg {String} msgTarget The location where error text should display.  Should be one of the following values (defaults to 'qtip'):
16394      *<pre>
16395 Value         Description
16396 -----------   ----------------------------------------------------------------------
16397 qtip          Display a quick tip when the user hovers over the field
16398 title         Display a default browser title attribute popup
16399 under         Add a block div beneath the field containing the error text
16400 side          Add an error icon to the right of the field with a popup on hover
16401 [element id]  Add the error text directly to the innerHTML of the specified element
16402 </pre>
16403      */
16404     msgTarget : 'qtip',
16405     /**
16406      * @cfg {String} msgFx <b>Experimental</b> The effect used when displaying a validation message under the field (defaults to 'normal').
16407      */
16408     msgFx : 'normal',
16409
16410     /**
16411      * @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.
16412      */
16413     readOnly : false,
16414
16415     /**
16416      * @cfg {Boolean} disabled True to disable the field (defaults to false).
16417      */
16418     disabled : false,
16419
16420     /**
16421      * @cfg {String} inputType The type attribute for input fields -- e.g. radio, text, password (defaults to "text").
16422      */
16423     inputType : undefined,
16424     
16425     /**
16426      * @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).
16427          */
16428         tabIndex : undefined,
16429         
16430     // private
16431     isFormField : true,
16432
16433     // private
16434     hasFocus : false,
16435     /**
16436      * @property {Roo.Element} fieldEl
16437      * Element Containing the rendered Field (with label etc.)
16438      */
16439     /**
16440      * @cfg {Mixed} value A value to initialize this field with.
16441      */
16442     value : undefined,
16443
16444     /**
16445      * @cfg {String} name The field's HTML name attribute.
16446      */
16447     /**
16448      * @cfg {String} cls A CSS class to apply to the field's underlying element.
16449      */
16450     // private
16451     loadedValue : false,
16452      
16453      
16454         // private ??
16455         initComponent : function(){
16456         Roo.form.Field.superclass.initComponent.call(this);
16457         this.addEvents({
16458             /**
16459              * @event focus
16460              * Fires when this field receives input focus.
16461              * @param {Roo.form.Field} this
16462              */
16463             focus : true,
16464             /**
16465              * @event blur
16466              * Fires when this field loses input focus.
16467              * @param {Roo.form.Field} this
16468              */
16469             blur : true,
16470             /**
16471              * @event specialkey
16472              * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed.  You can check
16473              * {@link Roo.EventObject#getKey} to determine which key was pressed.
16474              * @param {Roo.form.Field} this
16475              * @param {Roo.EventObject} e The event object
16476              */
16477             specialkey : true,
16478             /**
16479              * @event change
16480              * Fires just before the field blurs if the field value has changed.
16481              * @param {Roo.form.Field} this
16482              * @param {Mixed} newValue The new value
16483              * @param {Mixed} oldValue The original value
16484              */
16485             change : true,
16486             /**
16487              * @event invalid
16488              * Fires after the field has been marked as invalid.
16489              * @param {Roo.form.Field} this
16490              * @param {String} msg The validation message
16491              */
16492             invalid : true,
16493             /**
16494              * @event valid
16495              * Fires after the field has been validated with no errors.
16496              * @param {Roo.form.Field} this
16497              */
16498             valid : true,
16499              /**
16500              * @event keyup
16501              * Fires after the key up
16502              * @param {Roo.form.Field} this
16503              * @param {Roo.EventObject}  e The event Object
16504              */
16505             keyup : true
16506         });
16507     },
16508
16509     /**
16510      * Returns the name attribute of the field if available
16511      * @return {String} name The field name
16512      */
16513     getName: function(){
16514          return this.rendered && this.el.dom.name ? this.el.dom.name : (this.hiddenName || '');
16515     },
16516
16517     // private
16518     onRender : function(ct, position){
16519         Roo.form.Field.superclass.onRender.call(this, ct, position);
16520         if(!this.el){
16521             var cfg = this.getAutoCreate();
16522             if(!cfg.name){
16523                 cfg.name = typeof(this.name) == 'undefined' ? this.id : this.name;
16524             }
16525             if (!cfg.name.length) {
16526                 delete cfg.name;
16527             }
16528             if(this.inputType){
16529                 cfg.type = this.inputType;
16530             }
16531             this.el = ct.createChild(cfg, position);
16532         }
16533         var type = this.el.dom.type;
16534         if(type){
16535             if(type == 'password'){
16536                 type = 'text';
16537             }
16538             this.el.addClass('x-form-'+type);
16539         }
16540         if(this.readOnly){
16541             this.el.dom.readOnly = true;
16542         }
16543         if(this.tabIndex !== undefined){
16544             this.el.dom.setAttribute('tabIndex', this.tabIndex);
16545         }
16546
16547         this.el.addClass([this.fieldClass, this.cls]);
16548         this.initValue();
16549     },
16550
16551     /**
16552      * Apply the behaviors of this component to an existing element. <b>This is used instead of render().</b>
16553      * @param {String/HTMLElement/Element} el The id of the node, a DOM node or an existing Element
16554      * @return {Roo.form.Field} this
16555      */
16556     applyTo : function(target){
16557         this.allowDomMove = false;
16558         this.el = Roo.get(target);
16559         this.render(this.el.dom.parentNode);
16560         return this;
16561     },
16562
16563     // private
16564     initValue : function(){
16565         if(this.value !== undefined){
16566             this.setValue(this.value);
16567         }else if(this.el.dom.value.length > 0){
16568             this.setValue(this.el.dom.value);
16569         }
16570     },
16571
16572     /**
16573      * Returns true if this field has been changed since it was originally loaded and is not disabled.
16574      * DEPRICATED  - it never worked well - use hasChanged/resetHasChanged.
16575      */
16576     isDirty : function() {
16577         if(this.disabled) {
16578             return false;
16579         }
16580         return String(this.getValue()) !== String(this.originalValue);
16581     },
16582
16583     /**
16584      * stores the current value in loadedValue
16585      */
16586     resetHasChanged : function()
16587     {
16588         this.loadedValue = String(this.getValue());
16589     },
16590     /**
16591      * checks the current value against the 'loaded' value.
16592      * Note - will return false if 'resetHasChanged' has not been called first.
16593      */
16594     hasChanged : function()
16595     {
16596         if(this.disabled || this.readOnly) {
16597             return false;
16598         }
16599         return this.loadedValue !== false && String(this.getValue()) !== this.loadedValue;
16600     },
16601     
16602     
16603     
16604     // private
16605     afterRender : function(){
16606         Roo.form.Field.superclass.afterRender.call(this);
16607         this.initEvents();
16608     },
16609
16610     // private
16611     fireKey : function(e){
16612         //Roo.log('field ' + e.getKey());
16613         if(e.isNavKeyPress()){
16614             this.fireEvent("specialkey", this, e);
16615         }
16616     },
16617
16618     /**
16619      * Resets the current field value to the originally loaded value and clears any validation messages
16620      */
16621     reset : function(){
16622         this.setValue(this.resetValue);
16623         this.originalValue = this.getValue();
16624         this.clearInvalid();
16625     },
16626
16627     // private
16628     initEvents : function(){
16629         // safari killled keypress - so keydown is now used..
16630         this.el.on("keydown" , this.fireKey,  this);
16631         this.el.on("focus", this.onFocus,  this);
16632         this.el.on("blur", this.onBlur,  this);
16633         this.el.relayEvent('keyup', this);
16634
16635         // reference to original value for reset
16636         this.originalValue = this.getValue();
16637         this.resetValue =  this.getValue();
16638     },
16639
16640     // private
16641     onFocus : function(){
16642         if(!Roo.isOpera && this.focusClass){ // don't touch in Opera
16643             this.el.addClass(this.focusClass);
16644         }
16645         if(!this.hasFocus){
16646             this.hasFocus = true;
16647             this.startValue = this.getValue();
16648             this.fireEvent("focus", this);
16649         }
16650     },
16651
16652     beforeBlur : Roo.emptyFn,
16653
16654     // private
16655     onBlur : function(){
16656         this.beforeBlur();
16657         if(!Roo.isOpera && this.focusClass){ // don't touch in Opera
16658             this.el.removeClass(this.focusClass);
16659         }
16660         this.hasFocus = false;
16661         if(this.validationEvent !== false && this.validateOnBlur && this.validationEvent != "blur"){
16662             this.validate();
16663         }
16664         var v = this.getValue();
16665         if(String(v) !== String(this.startValue)){
16666             this.fireEvent('change', this, v, this.startValue);
16667         }
16668         this.fireEvent("blur", this);
16669     },
16670
16671     /**
16672      * Returns whether or not the field value is currently valid
16673      * @param {Boolean} preventMark True to disable marking the field invalid
16674      * @return {Boolean} True if the value is valid, else false
16675      */
16676     isValid : function(preventMark){
16677         if(this.disabled){
16678             return true;
16679         }
16680         var restore = this.preventMark;
16681         this.preventMark = preventMark === true;
16682         var v = this.validateValue(this.processValue(this.getRawValue()));
16683         this.preventMark = restore;
16684         return v;
16685     },
16686
16687     /**
16688      * Validates the field value
16689      * @return {Boolean} True if the value is valid, else false
16690      */
16691     validate : function(){
16692         if(this.disabled || this.validateValue(this.processValue(this.getRawValue()))){
16693             this.clearInvalid();
16694             return true;
16695         }
16696         return false;
16697     },
16698
16699     processValue : function(value){
16700         return value;
16701     },
16702
16703     // private
16704     // Subclasses should provide the validation implementation by overriding this
16705     validateValue : function(value){
16706         return true;
16707     },
16708
16709     /**
16710      * Mark this field as invalid
16711      * @param {String} msg The validation message
16712      */
16713     markInvalid : function(msg){
16714         if(!this.rendered || this.preventMark){ // not rendered
16715             return;
16716         }
16717         
16718         var obj = (typeof(this.combo) != 'undefined') ? this.combo : this; // fix the combox array!!
16719         
16720         obj.el.addClass(this.invalidClass);
16721         msg = msg || this.invalidText;
16722         switch(this.msgTarget){
16723             case 'qtip':
16724                 obj.el.dom.qtip = msg;
16725                 obj.el.dom.qclass = 'x-form-invalid-tip';
16726                 if(Roo.QuickTips){ // fix for floating editors interacting with DND
16727                     Roo.QuickTips.enable();
16728                 }
16729                 break;
16730             case 'title':
16731                 this.el.dom.title = msg;
16732                 break;
16733             case 'under':
16734                 if(!this.errorEl){
16735                     var elp = this.el.findParent('.x-form-element', 5, true);
16736                     this.errorEl = elp.createChild({cls:'x-form-invalid-msg'});
16737                     this.errorEl.setWidth(elp.getWidth(true)-20);
16738                 }
16739                 this.errorEl.update(msg);
16740                 Roo.form.Field.msgFx[this.msgFx].show(this.errorEl, this);
16741                 break;
16742             case 'side':
16743                 if(!this.errorIcon){
16744                     var elp = this.el.findParent('.x-form-element', 5, true);
16745                     this.errorIcon = elp.createChild({cls:'x-form-invalid-icon'});
16746                 }
16747                 this.alignErrorIcon();
16748                 this.errorIcon.dom.qtip = msg;
16749                 this.errorIcon.dom.qclass = 'x-form-invalid-tip';
16750                 this.errorIcon.show();
16751                 this.on('resize', this.alignErrorIcon, this);
16752                 break;
16753             default:
16754                 var t = Roo.getDom(this.msgTarget);
16755                 t.innerHTML = msg;
16756                 t.style.display = this.msgDisplay;
16757                 break;
16758         }
16759         this.fireEvent('invalid', this, msg);
16760     },
16761
16762     // private
16763     alignErrorIcon : function(){
16764         this.errorIcon.alignTo(this.el, 'tl-tr', [2, 0]);
16765     },
16766
16767     /**
16768      * Clear any invalid styles/messages for this field
16769      */
16770     clearInvalid : function(){
16771         if(!this.rendered || this.preventMark){ // not rendered
16772             return;
16773         }
16774         var obj = (typeof(this.combo) != 'undefined') ? this.combo : this; // fix the combox array!!
16775         
16776         obj.el.removeClass(this.invalidClass);
16777         switch(this.msgTarget){
16778             case 'qtip':
16779                 obj.el.dom.qtip = '';
16780                 break;
16781             case 'title':
16782                 this.el.dom.title = '';
16783                 break;
16784             case 'under':
16785                 if(this.errorEl){
16786                     Roo.form.Field.msgFx[this.msgFx].hide(this.errorEl, this);
16787                 }
16788                 break;
16789             case 'side':
16790                 if(this.errorIcon){
16791                     this.errorIcon.dom.qtip = '';
16792                     this.errorIcon.hide();
16793                     this.un('resize', this.alignErrorIcon, this);
16794                 }
16795                 break;
16796             default:
16797                 var t = Roo.getDom(this.msgTarget);
16798                 t.innerHTML = '';
16799                 t.style.display = 'none';
16800                 break;
16801         }
16802         this.fireEvent('valid', this);
16803     },
16804
16805     /**
16806      * Returns the raw data value which may or may not be a valid, defined value.  To return a normalized value see {@link #getValue}.
16807      * @return {Mixed} value The field value
16808      */
16809     getRawValue : function(){
16810         var v = this.el.getValue();
16811         
16812         return v;
16813     },
16814
16815     /**
16816      * Returns the normalized data value (undefined or emptyText will be returned as '').  To return the raw value see {@link #getRawValue}.
16817      * @return {Mixed} value The field value
16818      */
16819     getValue : function(){
16820         var v = this.el.getValue();
16821          
16822         return v;
16823     },
16824
16825     /**
16826      * Sets the underlying DOM field's value directly, bypassing validation.  To set the value with validation see {@link #setValue}.
16827      * @param {Mixed} value The value to set
16828      */
16829     setRawValue : function(v){
16830         return this.el.dom.value = (v === null || v === undefined ? '' : v);
16831     },
16832
16833     /**
16834      * Sets a data value into the field and validates it.  To set the value directly without validation see {@link #setRawValue}.
16835      * @param {Mixed} value The value to set
16836      */
16837     setValue : function(v){
16838         this.value = v;
16839         if(this.rendered){
16840             this.el.dom.value = (v === null || v === undefined ? '' : v);
16841              this.validate();
16842         }
16843     },
16844
16845     adjustSize : function(w, h){
16846         var s = Roo.form.Field.superclass.adjustSize.call(this, w, h);
16847         s.width = this.adjustWidth(this.el.dom.tagName, s.width);
16848         return s;
16849     },
16850
16851     adjustWidth : function(tag, w){
16852         tag = tag.toLowerCase();
16853         if(typeof w == 'number' && Roo.isStrict && !Roo.isSafari){
16854             if(Roo.isIE && (tag == 'input' || tag == 'textarea')){
16855                 if(tag == 'input'){
16856                     return w + 2;
16857                 }
16858                 if(tag == 'textarea'){
16859                     return w-2;
16860                 }
16861             }else if(Roo.isOpera){
16862                 if(tag == 'input'){
16863                     return w + 2;
16864                 }
16865                 if(tag == 'textarea'){
16866                     return w-2;
16867                 }
16868             }
16869         }
16870         return w;
16871     }
16872 });
16873
16874
16875 // anything other than normal should be considered experimental
16876 Roo.form.Field.msgFx = {
16877     normal : {
16878         show: function(msgEl, f){
16879             msgEl.setDisplayed('block');
16880         },
16881
16882         hide : function(msgEl, f){
16883             msgEl.setDisplayed(false).update('');
16884         }
16885     },
16886
16887     slide : {
16888         show: function(msgEl, f){
16889             msgEl.slideIn('t', {stopFx:true});
16890         },
16891
16892         hide : function(msgEl, f){
16893             msgEl.slideOut('t', {stopFx:true,useDisplay:true});
16894         }
16895     },
16896
16897     slideRight : {
16898         show: function(msgEl, f){
16899             msgEl.fixDisplay();
16900             msgEl.alignTo(f.el, 'tl-tr');
16901             msgEl.slideIn('l', {stopFx:true});
16902         },
16903
16904         hide : function(msgEl, f){
16905             msgEl.slideOut('l', {stopFx:true,useDisplay:true});
16906         }
16907     }
16908 };/*
16909  * Based on:
16910  * Ext JS Library 1.1.1
16911  * Copyright(c) 2006-2007, Ext JS, LLC.
16912  *
16913  * Originally Released Under LGPL - original licence link has changed is not relivant.
16914  *
16915  * Fork - LGPL
16916  * <script type="text/javascript">
16917  */
16918  
16919
16920 /**
16921  * @class Roo.form.TextField
16922  * @extends Roo.form.Field
16923  * Basic text field.  Can be used as a direct replacement for traditional text inputs, or as the base
16924  * class for more sophisticated input controls (like {@link Roo.form.TextArea} and {@link Roo.form.ComboBox}).
16925  * @constructor
16926  * Creates a new TextField
16927  * @param {Object} config Configuration options
16928  */
16929 Roo.form.TextField = function(config){
16930     Roo.form.TextField.superclass.constructor.call(this, config);
16931     this.addEvents({
16932         /**
16933          * @event autosize
16934          * Fires when the autosize function is triggered.  The field may or may not have actually changed size
16935          * according to the default logic, but this event provides a hook for the developer to apply additional
16936          * logic at runtime to resize the field if needed.
16937              * @param {Roo.form.Field} this This text field
16938              * @param {Number} width The new field width
16939              */
16940         autosize : true
16941     });
16942 };
16943
16944 Roo.extend(Roo.form.TextField, Roo.form.Field,  {
16945     /**
16946      * @cfg {Boolean} grow True if this field should automatically grow and shrink to its content
16947      */
16948     grow : false,
16949     /**
16950      * @cfg {Number} growMin The minimum width to allow when grow = true (defaults to 30)
16951      */
16952     growMin : 30,
16953     /**
16954      * @cfg {Number} growMax The maximum width to allow when grow = true (defaults to 800)
16955      */
16956     growMax : 800,
16957     /**
16958      * @cfg {String} vtype A validation type name as defined in {@link Roo.form.VTypes} (defaults to null)
16959      */
16960     vtype : null,
16961     /**
16962      * @cfg {String} maskRe An input mask regular expression that will be used to filter keystrokes that don't match (defaults to null)
16963      */
16964     maskRe : null,
16965     /**
16966      * @cfg {Boolean} disableKeyFilter True to disable input keystroke filtering (defaults to false)
16967      */
16968     disableKeyFilter : false,
16969     /**
16970      * @cfg {Boolean} allowBlank False to validate that the value length > 0 (defaults to true)
16971      */
16972     allowBlank : true,
16973     /**
16974      * @cfg {Number} minLength Minimum input field length required (defaults to 0)
16975      */
16976     minLength : 0,
16977     /**
16978      * @cfg {Number} maxLength Maximum input field length allowed (defaults to Number.MAX_VALUE)
16979      */
16980     maxLength : Number.MAX_VALUE,
16981     /**
16982      * @cfg {String} minLengthText Error text to display if the minimum length validation fails (defaults to "The minimum length for this field is {minLength}")
16983      */
16984     minLengthText : "The minimum length for this field is {0}",
16985     /**
16986      * @cfg {String} maxLengthText Error text to display if the maximum length validation fails (defaults to "The maximum length for this field is {maxLength}")
16987      */
16988     maxLengthText : "The maximum length for this field is {0}",
16989     /**
16990      * @cfg {Boolean} selectOnFocus True to automatically select any existing field text when the field receives input focus (defaults to false)
16991      */
16992     selectOnFocus : false,
16993     /**
16994      * @cfg {Boolean} allowLeadingSpace True to prevent the stripping of leading white space 
16995      */    
16996     allowLeadingSpace : false,
16997     /**
16998      * @cfg {String} blankText Error text to display if the allow blank validation fails (defaults to "This field is required")
16999      */
17000     blankText : "This field is required",
17001     /**
17002      * @cfg {Function} validator A custom validation function to be called during field validation (defaults to null).
17003      * If available, this function will be called only after the basic validators all return true, and will be passed the
17004      * current field value and expected to return boolean true if the value is valid or a string error message if invalid.
17005      */
17006     validator : null,
17007     /**
17008      * @cfg {RegExp} regex A JavaScript RegExp object to be tested against the field value during validation (defaults to null).
17009      * If available, this regex will be evaluated only after the basic validators all return true, and will be passed the
17010      * current field value.  If the test fails, the field will be marked invalid using {@link #regexText}.
17011      */
17012     regex : null,
17013     /**
17014      * @cfg {String} regexText The error text to display if {@link #regex} is used and the test fails during validation (defaults to "")
17015      */
17016     regexText : "",
17017     /**
17018      * @cfg {String} emptyText The default text to display in an empty field - placeholder... (defaults to null).
17019      */
17020     emptyText : null,
17021    
17022
17023     // private
17024     initEvents : function()
17025     {
17026         if (this.emptyText) {
17027             this.el.attr('placeholder', this.emptyText);
17028         }
17029         
17030         Roo.form.TextField.superclass.initEvents.call(this);
17031         if(this.validationEvent == 'keyup'){
17032             this.validationTask = new Roo.util.DelayedTask(this.validate, this);
17033             this.el.on('keyup', this.filterValidation, this);
17034         }
17035         else if(this.validationEvent !== false){
17036             this.el.on(this.validationEvent, this.validate, this, {buffer: this.validationDelay});
17037         }
17038         
17039         if(this.selectOnFocus){
17040             this.on("focus", this.preFocus, this);
17041         }
17042         if (!this.allowLeadingSpace) {
17043             this.on('blur', this.cleanLeadingSpace, this);
17044         }
17045         
17046         if(this.maskRe || (this.vtype && this.disableKeyFilter !== true && (this.maskRe = Roo.form.VTypes[this.vtype+'Mask']))){
17047             this.el.on("keypress", this.filterKeys, this);
17048         }
17049         if(this.grow){
17050             this.el.on("keyup", this.onKeyUp,  this, {buffer:50});
17051             this.el.on("click", this.autoSize,  this);
17052         }
17053         if(this.el.is('input[type=password]') && Roo.isSafari){
17054             this.el.on('keydown', this.SafariOnKeyDown, this);
17055         }
17056     },
17057
17058     processValue : function(value){
17059         if(this.stripCharsRe){
17060             var newValue = value.replace(this.stripCharsRe, '');
17061             if(newValue !== value){
17062                 this.setRawValue(newValue);
17063                 return newValue;
17064             }
17065         }
17066         return value;
17067     },
17068
17069     filterValidation : function(e){
17070         if(!e.isNavKeyPress()){
17071             this.validationTask.delay(this.validationDelay);
17072         }
17073     },
17074
17075     // private
17076     onKeyUp : function(e){
17077         if(!e.isNavKeyPress()){
17078             this.autoSize();
17079         }
17080     },
17081     // private - clean the leading white space
17082     cleanLeadingSpace : function(e)
17083     {
17084         if ( this.inputType == 'file') {
17085             return;
17086         }
17087         
17088         this.setValue((this.getValue() + '').replace(/^\s+/,''));
17089     },
17090     /**
17091      * Resets the current field value to the originally-loaded value and clears any validation messages.
17092      *  
17093      */
17094     reset : function(){
17095         Roo.form.TextField.superclass.reset.call(this);
17096        
17097     }, 
17098     // private
17099     preFocus : function(){
17100         
17101         if(this.selectOnFocus){
17102             this.el.dom.select();
17103         }
17104     },
17105
17106     
17107     // private
17108     filterKeys : function(e){
17109         var k = e.getKey();
17110         if(!Roo.isIE && (e.isNavKeyPress() || k == e.BACKSPACE || (k == e.DELETE && e.button == -1))){
17111             return;
17112         }
17113         var c = e.getCharCode(), cc = String.fromCharCode(c);
17114         if(Roo.isIE && (e.isSpecialKey() || !cc)){
17115             return;
17116         }
17117         if(!this.maskRe.test(cc)){
17118             e.stopEvent();
17119         }
17120     },
17121
17122     setValue : function(v){
17123         
17124         Roo.form.TextField.superclass.setValue.apply(this, arguments);
17125         
17126         this.autoSize();
17127     },
17128
17129     /**
17130      * Validates a value according to the field's validation rules and marks the field as invalid
17131      * if the validation fails
17132      * @param {Mixed} value The value to validate
17133      * @return {Boolean} True if the value is valid, else false
17134      */
17135     validateValue : function(value){
17136         if(value.length < 1)  { // if it's blank
17137              if(this.allowBlank){
17138                 this.clearInvalid();
17139                 return true;
17140              }else{
17141                 this.markInvalid(this.blankText);
17142                 return false;
17143              }
17144         }
17145         if(value.length < this.minLength){
17146             this.markInvalid(String.format(this.minLengthText, this.minLength));
17147             return false;
17148         }
17149         if(value.length > this.maxLength){
17150             this.markInvalid(String.format(this.maxLengthText, this.maxLength));
17151             return false;
17152         }
17153         if(this.vtype){
17154             var vt = Roo.form.VTypes;
17155             if(!vt[this.vtype](value, this)){
17156                 this.markInvalid(this.vtypeText || vt[this.vtype +'Text']);
17157                 return false;
17158             }
17159         }
17160         if(typeof this.validator == "function"){
17161             var msg = this.validator(value);
17162             if(msg !== true){
17163                 this.markInvalid(msg);
17164                 return false;
17165             }
17166         }
17167         if(this.regex && !this.regex.test(value)){
17168             this.markInvalid(this.regexText);
17169             return false;
17170         }
17171         return true;
17172     },
17173
17174     /**
17175      * Selects text in this field
17176      * @param {Number} start (optional) The index where the selection should start (defaults to 0)
17177      * @param {Number} end (optional) The index where the selection should end (defaults to the text length)
17178      */
17179     selectText : function(start, end){
17180         var v = this.getRawValue();
17181         if(v.length > 0){
17182             start = start === undefined ? 0 : start;
17183             end = end === undefined ? v.length : end;
17184             var d = this.el.dom;
17185             if(d.setSelectionRange){
17186                 d.setSelectionRange(start, end);
17187             }else if(d.createTextRange){
17188                 var range = d.createTextRange();
17189                 range.moveStart("character", start);
17190                 range.moveEnd("character", v.length-end);
17191                 range.select();
17192             }
17193         }
17194     },
17195
17196     /**
17197      * Automatically grows the field to accomodate the width of the text up to the maximum field width allowed.
17198      * This only takes effect if grow = true, and fires the autosize event.
17199      */
17200     autoSize : function(){
17201         if(!this.grow || !this.rendered){
17202             return;
17203         }
17204         if(!this.metrics){
17205             this.metrics = Roo.util.TextMetrics.createInstance(this.el);
17206         }
17207         var el = this.el;
17208         var v = el.dom.value;
17209         var d = document.createElement('div');
17210         d.appendChild(document.createTextNode(v));
17211         v = d.innerHTML;
17212         d = null;
17213         v += "&#160;";
17214         var w = Math.min(this.growMax, Math.max(this.metrics.getWidth(v) + /* add extra padding */ 10, this.growMin));
17215         this.el.setWidth(w);
17216         this.fireEvent("autosize", this, w);
17217     },
17218     
17219     // private
17220     SafariOnKeyDown : function(event)
17221     {
17222         // this is a workaround for a password hang bug on chrome/ webkit.
17223         
17224         var isSelectAll = false;
17225         
17226         if(this.el.dom.selectionEnd > 0){
17227             isSelectAll = (this.el.dom.selectionEnd - this.el.dom.selectionStart - this.getValue().length == 0) ? true : false;
17228         }
17229         if(((event.getKey() == 8 || event.getKey() == 46) && this.getValue().length ==1)){ // backspace and delete key
17230             event.preventDefault();
17231             this.setValue('');
17232             return;
17233         }
17234         
17235         if(isSelectAll && event.getCharCode() > 31){ // backspace and delete key
17236             
17237             event.preventDefault();
17238             // this is very hacky as keydown always get's upper case.
17239             
17240             var cc = String.fromCharCode(event.getCharCode());
17241             
17242             
17243             this.setValue( event.shiftKey ?  cc : cc.toLowerCase());
17244             
17245         }
17246         
17247         
17248     }
17249 });/*
17250  * Based on:
17251  * Ext JS Library 1.1.1
17252  * Copyright(c) 2006-2007, Ext JS, LLC.
17253  *
17254  * Originally Released Under LGPL - original licence link has changed is not relivant.
17255  *
17256  * Fork - LGPL
17257  * <script type="text/javascript">
17258  */
17259  
17260 /**
17261  * @class Roo.form.Hidden
17262  * @extends Roo.form.TextField
17263  * Simple Hidden element used on forms 
17264  * 
17265  * usage: form.add(new Roo.form.HiddenField({ 'name' : 'test1' }));
17266  * 
17267  * @constructor
17268  * Creates a new Hidden form element.
17269  * @param {Object} config Configuration options
17270  */
17271
17272
17273
17274 // easy hidden field...
17275 Roo.form.Hidden = function(config){
17276     Roo.form.Hidden.superclass.constructor.call(this, config);
17277 };
17278   
17279 Roo.extend(Roo.form.Hidden, Roo.form.TextField, {
17280     fieldLabel:      '',
17281     inputType:      'hidden',
17282     width:          50,
17283     allowBlank:     true,
17284     labelSeparator: '',
17285     hidden:         true,
17286     itemCls :       'x-form-item-display-none'
17287
17288
17289 });
17290
17291
17292 /*
17293  * Based on:
17294  * Ext JS Library 1.1.1
17295  * Copyright(c) 2006-2007, Ext JS, LLC.
17296  *
17297  * Originally Released Under LGPL - original licence link has changed is not relivant.
17298  *
17299  * Fork - LGPL
17300  * <script type="text/javascript">
17301  */
17302  
17303 /**
17304  * @class Roo.form.TriggerField
17305  * @extends Roo.form.TextField
17306  * Provides a convenient wrapper for TextFields that adds a clickable trigger button (looks like a combobox by default).
17307  * The trigger has no default action, so you must assign a function to implement the trigger click handler by
17308  * overriding {@link #onTriggerClick}. You can create a TriggerField directly, as it renders exactly like a combobox
17309  * for which you can provide a custom implementation.  For example:
17310  * <pre><code>
17311 var trigger = new Roo.form.TriggerField();
17312 trigger.onTriggerClick = myTriggerFn;
17313 trigger.applyTo('my-field');
17314 </code></pre>
17315  *
17316  * However, in general you will most likely want to use TriggerField as the base class for a reusable component.
17317  * {@link Roo.form.DateField} and {@link Roo.form.ComboBox} are perfect examples of this.
17318  * @cfg {String} triggerClass An additional CSS class used to style the trigger button.  The trigger will always get the
17319  * class 'x-form-trigger' by default and triggerClass will be <b>appended</b> if specified.
17320  * @constructor
17321  * Create a new TriggerField.
17322  * @param {Object} config Configuration options (valid {@Roo.form.TextField} config options will also be applied
17323  * to the base TextField)
17324  */
17325 Roo.form.TriggerField = function(config){
17326     this.mimicing = false;
17327     Roo.form.TriggerField.superclass.constructor.call(this, config);
17328 };
17329
17330 Roo.extend(Roo.form.TriggerField, Roo.form.TextField,  {
17331     /**
17332      * @cfg {String} triggerClass A CSS class to apply to the trigger
17333      */
17334     /**
17335      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
17336      * {tag: "input", type: "text", size: "16", autocomplete: "off"})
17337      */
17338     defaultAutoCreate : {tag: "input", type: "text", size: "16", autocomplete: "new-password"},
17339     /**
17340      * @cfg {Boolean} hideTrigger True to hide the trigger element and display only the base text field (defaults to false)
17341      */
17342     hideTrigger:false,
17343
17344     /** @cfg {Boolean} grow @hide */
17345     /** @cfg {Number} growMin @hide */
17346     /** @cfg {Number} growMax @hide */
17347
17348     /**
17349      * @hide 
17350      * @method
17351      */
17352     autoSize: Roo.emptyFn,
17353     // private
17354     monitorTab : true,
17355     // private
17356     deferHeight : true,
17357
17358     
17359     actionMode : 'wrap',
17360     // private
17361     onResize : function(w, h){
17362         Roo.form.TriggerField.superclass.onResize.apply(this, arguments);
17363         if(typeof w == 'number'){
17364             var x = w - this.trigger.getWidth();
17365             this.el.setWidth(this.adjustWidth('input', x));
17366             this.trigger.setStyle('left', x+'px');
17367         }
17368     },
17369
17370     // private
17371     adjustSize : Roo.BoxComponent.prototype.adjustSize,
17372
17373     // private
17374     getResizeEl : function(){
17375         return this.wrap;
17376     },
17377
17378     // private
17379     getPositionEl : function(){
17380         return this.wrap;
17381     },
17382
17383     // private
17384     alignErrorIcon : function(){
17385         this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
17386     },
17387
17388     // private
17389     onRender : function(ct, position){
17390         Roo.form.TriggerField.superclass.onRender.call(this, ct, position);
17391         this.wrap = this.el.wrap({cls: "x-form-field-wrap"});
17392         this.trigger = this.wrap.createChild(this.triggerConfig ||
17393                 {tag: "img", src: Roo.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.triggerClass});
17394         if(this.hideTrigger){
17395             this.trigger.setDisplayed(false);
17396         }
17397         this.initTrigger();
17398         if(!this.width){
17399             this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
17400         }
17401     },
17402
17403     // private
17404     initTrigger : function(){
17405         this.trigger.on("click", this.onTriggerClick, this, {preventDefault:true});
17406         this.trigger.addClassOnOver('x-form-trigger-over');
17407         this.trigger.addClassOnClick('x-form-trigger-click');
17408     },
17409
17410     // private
17411     onDestroy : function(){
17412         if(this.trigger){
17413             this.trigger.removeAllListeners();
17414             this.trigger.remove();
17415         }
17416         if(this.wrap){
17417             this.wrap.remove();
17418         }
17419         Roo.form.TriggerField.superclass.onDestroy.call(this);
17420     },
17421
17422     // private
17423     onFocus : function(){
17424         Roo.form.TriggerField.superclass.onFocus.call(this);
17425         if(!this.mimicing){
17426             this.wrap.addClass('x-trigger-wrap-focus');
17427             this.mimicing = true;
17428             Roo.get(Roo.isIE ? document.body : document).on("mousedown", this.mimicBlur, this);
17429             if(this.monitorTab){
17430                 this.el.on("keydown", this.checkTab, this);
17431             }
17432         }
17433     },
17434
17435     // private
17436     checkTab : function(e){
17437         if(e.getKey() == e.TAB){
17438             this.triggerBlur();
17439         }
17440     },
17441
17442     // private
17443     onBlur : function(){
17444         // do nothing
17445     },
17446
17447     // private
17448     mimicBlur : function(e, t){
17449         if(!this.wrap.contains(t) && this.validateBlur()){
17450             this.triggerBlur();
17451         }
17452     },
17453
17454     // private
17455     triggerBlur : function(){
17456         this.mimicing = false;
17457         Roo.get(Roo.isIE ? document.body : document).un("mousedown", this.mimicBlur);
17458         if(this.monitorTab){
17459             this.el.un("keydown", this.checkTab, this);
17460         }
17461         this.wrap.removeClass('x-trigger-wrap-focus');
17462         Roo.form.TriggerField.superclass.onBlur.call(this);
17463     },
17464
17465     // private
17466     // This should be overriden by any subclass that needs to check whether or not the field can be blurred.
17467     validateBlur : function(e, t){
17468         return true;
17469     },
17470
17471     // private
17472     onDisable : function(){
17473         Roo.form.TriggerField.superclass.onDisable.call(this);
17474         if(this.wrap){
17475             this.wrap.addClass('x-item-disabled');
17476         }
17477     },
17478
17479     // private
17480     onEnable : function(){
17481         Roo.form.TriggerField.superclass.onEnable.call(this);
17482         if(this.wrap){
17483             this.wrap.removeClass('x-item-disabled');
17484         }
17485     },
17486
17487     // private
17488     onShow : function(){
17489         var ae = this.getActionEl();
17490         
17491         if(ae){
17492             ae.dom.style.display = '';
17493             ae.dom.style.visibility = 'visible';
17494         }
17495     },
17496
17497     // private
17498     
17499     onHide : function(){
17500         var ae = this.getActionEl();
17501         ae.dom.style.display = 'none';
17502     },
17503
17504     /**
17505      * The function that should handle the trigger's click event.  This method does nothing by default until overridden
17506      * by an implementing function.
17507      * @method
17508      * @param {EventObject} e
17509      */
17510     onTriggerClick : Roo.emptyFn
17511 });
17512
17513 // TwinTriggerField is not a public class to be used directly.  It is meant as an abstract base class
17514 // to be extended by an implementing class.  For an example of implementing this class, see the custom
17515 // SearchField implementation here: http://extjs.com/deploy/ext/examples/form/custom.html
17516 Roo.form.TwinTriggerField = Roo.extend(Roo.form.TriggerField, {
17517     initComponent : function(){
17518         Roo.form.TwinTriggerField.superclass.initComponent.call(this);
17519
17520         this.triggerConfig = {
17521             tag:'span', cls:'x-form-twin-triggers', cn:[
17522             {tag: "img", src: Roo.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger1Class},
17523             {tag: "img", src: Roo.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger2Class}
17524         ]};
17525     },
17526
17527     getTrigger : function(index){
17528         return this.triggers[index];
17529     },
17530
17531     initTrigger : function(){
17532         var ts = this.trigger.select('.x-form-trigger', true);
17533         this.wrap.setStyle('overflow', 'hidden');
17534         var triggerField = this;
17535         ts.each(function(t, all, index){
17536             t.hide = function(){
17537                 var w = triggerField.wrap.getWidth();
17538                 this.dom.style.display = 'none';
17539                 triggerField.el.setWidth(w-triggerField.trigger.getWidth());
17540             };
17541             t.show = function(){
17542                 var w = triggerField.wrap.getWidth();
17543                 this.dom.style.display = '';
17544                 triggerField.el.setWidth(w-triggerField.trigger.getWidth());
17545             };
17546             var triggerIndex = 'Trigger'+(index+1);
17547
17548             if(this['hide'+triggerIndex]){
17549                 t.dom.style.display = 'none';
17550             }
17551             t.on("click", this['on'+triggerIndex+'Click'], this, {preventDefault:true});
17552             t.addClassOnOver('x-form-trigger-over');
17553             t.addClassOnClick('x-form-trigger-click');
17554         }, this);
17555         this.triggers = ts.elements;
17556     },
17557
17558     onTrigger1Click : Roo.emptyFn,
17559     onTrigger2Click : Roo.emptyFn
17560 });/*
17561  * Based on:
17562  * Ext JS Library 1.1.1
17563  * Copyright(c) 2006-2007, Ext JS, LLC.
17564  *
17565  * Originally Released Under LGPL - original licence link has changed is not relivant.
17566  *
17567  * Fork - LGPL
17568  * <script type="text/javascript">
17569  */
17570  
17571 /**
17572  * @class Roo.form.TextArea
17573  * @extends Roo.form.TextField
17574  * Multiline text field.  Can be used as a direct replacement for traditional textarea fields, plus adds
17575  * support for auto-sizing.
17576  * @constructor
17577  * Creates a new TextArea
17578  * @param {Object} config Configuration options
17579  */
17580 Roo.form.TextArea = function(config){
17581     Roo.form.TextArea.superclass.constructor.call(this, config);
17582     // these are provided exchanges for backwards compat
17583     // minHeight/maxHeight were replaced by growMin/growMax to be
17584     // compatible with TextField growing config values
17585     if(this.minHeight !== undefined){
17586         this.growMin = this.minHeight;
17587     }
17588     if(this.maxHeight !== undefined){
17589         this.growMax = this.maxHeight;
17590     }
17591 };
17592
17593 Roo.extend(Roo.form.TextArea, Roo.form.TextField,  {
17594     /**
17595      * @cfg {Number} growMin The minimum height to allow when grow = true (defaults to 60)
17596      */
17597     growMin : 60,
17598     /**
17599      * @cfg {Number} growMax The maximum height to allow when grow = true (defaults to 1000)
17600      */
17601     growMax: 1000,
17602     /**
17603      * @cfg {Boolean} preventScrollbars True to prevent scrollbars from appearing regardless of how much text is
17604      * in the field (equivalent to setting overflow: hidden, defaults to false)
17605      */
17606     preventScrollbars: false,
17607     /**
17608      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
17609      * {tag: "textarea", style: "width:300px;height:60px;", autocomplete: "off"})
17610      */
17611
17612     // private
17613     onRender : function(ct, position){
17614         if(!this.el){
17615             this.defaultAutoCreate = {
17616                 tag: "textarea",
17617                 style:"width:300px;height:60px;",
17618                 autocomplete: "new-password"
17619             };
17620         }
17621         Roo.form.TextArea.superclass.onRender.call(this, ct, position);
17622         if(this.grow){
17623             this.textSizeEl = Roo.DomHelper.append(document.body, {
17624                 tag: "pre", cls: "x-form-grow-sizer"
17625             });
17626             if(this.preventScrollbars){
17627                 this.el.setStyle("overflow", "hidden");
17628             }
17629             this.el.setHeight(this.growMin);
17630         }
17631     },
17632
17633     onDestroy : function(){
17634         if(this.textSizeEl){
17635             this.textSizeEl.parentNode.removeChild(this.textSizeEl);
17636         }
17637         Roo.form.TextArea.superclass.onDestroy.call(this);
17638     },
17639
17640     // private
17641     onKeyUp : function(e){
17642         if(!e.isNavKeyPress() || e.getKey() == e.ENTER){
17643             this.autoSize();
17644         }
17645     },
17646
17647     /**
17648      * Automatically grows the field to accomodate the height of the text up to the maximum field height allowed.
17649      * This only takes effect if grow = true, and fires the autosize event if the height changes.
17650      */
17651     autoSize : function(){
17652         if(!this.grow || !this.textSizeEl){
17653             return;
17654         }
17655         var el = this.el;
17656         var v = el.dom.value;
17657         var ts = this.textSizeEl;
17658
17659         ts.innerHTML = '';
17660         ts.appendChild(document.createTextNode(v));
17661         v = ts.innerHTML;
17662
17663         Roo.fly(ts).setWidth(this.el.getWidth());
17664         if(v.length < 1){
17665             v = "&#160;&#160;";
17666         }else{
17667             if(Roo.isIE){
17668                 v = v.replace(/\n/g, '<p>&#160;</p>');
17669             }
17670             v += "&#160;\n&#160;";
17671         }
17672         ts.innerHTML = v;
17673         var h = Math.min(this.growMax, Math.max(ts.offsetHeight, this.growMin));
17674         if(h != this.lastHeight){
17675             this.lastHeight = h;
17676             this.el.setHeight(h);
17677             this.fireEvent("autosize", this, h);
17678         }
17679     }
17680 });/*
17681  * Based on:
17682  * Ext JS Library 1.1.1
17683  * Copyright(c) 2006-2007, Ext JS, LLC.
17684  *
17685  * Originally Released Under LGPL - original licence link has changed is not relivant.
17686  *
17687  * Fork - LGPL
17688  * <script type="text/javascript">
17689  */
17690  
17691
17692 /**
17693  * @class Roo.form.NumberField
17694  * @extends Roo.form.TextField
17695  * Numeric text field that provides automatic keystroke filtering and numeric validation.
17696  * @constructor
17697  * Creates a new NumberField
17698  * @param {Object} config Configuration options
17699  */
17700 Roo.form.NumberField = function(config){
17701     Roo.form.NumberField.superclass.constructor.call(this, config);
17702 };
17703
17704 Roo.extend(Roo.form.NumberField, Roo.form.TextField,  {
17705     /**
17706      * @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-field x-form-num-field")
17707      */
17708     fieldClass: "x-form-field x-form-num-field",
17709     /**
17710      * @cfg {Boolean} allowDecimals False to disallow decimal values (defaults to true)
17711      */
17712     allowDecimals : true,
17713     /**
17714      * @cfg {String} decimalSeparator Character(s) to allow as the decimal separator (defaults to '.')
17715      */
17716     decimalSeparator : ".",
17717     /**
17718      * @cfg {Number} decimalPrecision The maximum precision to display after the decimal separator (defaults to 2)
17719      */
17720     decimalPrecision : 2,
17721     /**
17722      * @cfg {Boolean} allowNegative False to prevent entering a negative sign (defaults to true)
17723      */
17724     allowNegative : true,
17725     /**
17726      * @cfg {Number} minValue The minimum allowed value (defaults to Number.NEGATIVE_INFINITY)
17727      */
17728     minValue : Number.NEGATIVE_INFINITY,
17729     /**
17730      * @cfg {Number} maxValue The maximum allowed value (defaults to Number.MAX_VALUE)
17731      */
17732     maxValue : Number.MAX_VALUE,
17733     /**
17734      * @cfg {String} minText Error text to display if the minimum value validation fails (defaults to "The minimum value for this field is {minValue}")
17735      */
17736     minText : "The minimum value for this field is {0}",
17737     /**
17738      * @cfg {String} maxText Error text to display if the maximum value validation fails (defaults to "The maximum value for this field is {maxValue}")
17739      */
17740     maxText : "The maximum value for this field is {0}",
17741     /**
17742      * @cfg {String} nanText Error text to display if the value is not a valid number.  For example, this can happen
17743      * if a valid character like '.' or '-' is left in the field with no number (defaults to "{value} is not a valid number")
17744      */
17745     nanText : "{0} is not a valid number",
17746
17747     // private
17748     initEvents : function(){
17749         Roo.form.NumberField.superclass.initEvents.call(this);
17750         var allowed = "0123456789";
17751         if(this.allowDecimals){
17752             allowed += this.decimalSeparator;
17753         }
17754         if(this.allowNegative){
17755             allowed += "-";
17756         }
17757         this.stripCharsRe = new RegExp('[^'+allowed+']', 'gi');
17758         var keyPress = function(e){
17759             var k = e.getKey();
17760             if(!Roo.isIE && (e.isSpecialKey() || k == e.BACKSPACE || k == e.DELETE)){
17761                 return;
17762             }
17763             var c = e.getCharCode();
17764             if(allowed.indexOf(String.fromCharCode(c)) === -1){
17765                 e.stopEvent();
17766             }
17767         };
17768         this.el.on("keypress", keyPress, this);
17769     },
17770
17771     // private
17772     validateValue : function(value){
17773         if(!Roo.form.NumberField.superclass.validateValue.call(this, value)){
17774             return false;
17775         }
17776         if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
17777              return true;
17778         }
17779         var num = this.parseValue(value);
17780         if(isNaN(num)){
17781             this.markInvalid(String.format(this.nanText, value));
17782             return false;
17783         }
17784         if(num < this.minValue){
17785             this.markInvalid(String.format(this.minText, this.minValue));
17786             return false;
17787         }
17788         if(num > this.maxValue){
17789             this.markInvalid(String.format(this.maxText, this.maxValue));
17790             return false;
17791         }
17792         return true;
17793     },
17794
17795     getValue : function(){
17796         return this.fixPrecision(this.parseValue(Roo.form.NumberField.superclass.getValue.call(this)));
17797     },
17798
17799     // private
17800     parseValue : function(value){
17801         value = parseFloat(String(value).replace(this.decimalSeparator, "."));
17802         return isNaN(value) ? '' : value;
17803     },
17804
17805     // private
17806     fixPrecision : function(value){
17807         var nan = isNaN(value);
17808         if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){
17809             return nan ? '' : value;
17810         }
17811         return parseFloat(value).toFixed(this.decimalPrecision);
17812     },
17813
17814     setValue : function(v){
17815         v = this.fixPrecision(v);
17816         Roo.form.NumberField.superclass.setValue.call(this, String(v).replace(".", this.decimalSeparator));
17817     },
17818
17819     // private
17820     decimalPrecisionFcn : function(v){
17821         return Math.floor(v);
17822     },
17823
17824     beforeBlur : function(){
17825         var v = this.parseValue(this.getRawValue());
17826         if(v){
17827             this.setValue(v);
17828         }
17829     }
17830 });/*
17831  * Based on:
17832  * Ext JS Library 1.1.1
17833  * Copyright(c) 2006-2007, Ext JS, LLC.
17834  *
17835  * Originally Released Under LGPL - original licence link has changed is not relivant.
17836  *
17837  * Fork - LGPL
17838  * <script type="text/javascript">
17839  */
17840  
17841 /**
17842  * @class Roo.form.DateField
17843  * @extends Roo.form.TriggerField
17844  * Provides a date input field with a {@link Roo.DatePicker} dropdown and automatic date validation.
17845 * @constructor
17846 * Create a new DateField
17847 * @param {Object} config
17848  */
17849 Roo.form.DateField = function(config)
17850 {
17851     Roo.form.DateField.superclass.constructor.call(this, config);
17852     
17853       this.addEvents({
17854          
17855         /**
17856          * @event select
17857          * Fires when a date is selected
17858              * @param {Roo.form.DateField} combo This combo box
17859              * @param {Date} date The date selected
17860              */
17861         'select' : true
17862          
17863     });
17864     
17865     
17866     if(typeof this.minValue == "string") {
17867         this.minValue = this.parseDate(this.minValue);
17868     }
17869     if(typeof this.maxValue == "string") {
17870         this.maxValue = this.parseDate(this.maxValue);
17871     }
17872     this.ddMatch = null;
17873     if(this.disabledDates){
17874         var dd = this.disabledDates;
17875         var re = "(?:";
17876         for(var i = 0; i < dd.length; i++){
17877             re += dd[i];
17878             if(i != dd.length-1) {
17879                 re += "|";
17880             }
17881         }
17882         this.ddMatch = new RegExp(re + ")");
17883     }
17884 };
17885
17886 Roo.extend(Roo.form.DateField, Roo.form.TriggerField,  {
17887     /**
17888      * @cfg {String} format
17889      * The default date format string which can be overriden for localization support.  The format must be
17890      * valid according to {@link Date#parseDate} (defaults to 'm/d/y').
17891      */
17892     format : "m/d/y",
17893     /**
17894      * @cfg {String} altFormats
17895      * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined
17896      * format (defaults to 'm/d/Y|m-d-y|m-d-Y|m/d|m-d|d').
17897      */
17898     altFormats : "m/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d",
17899     /**
17900      * @cfg {Array} disabledDays
17901      * An array of days to disable, 0 based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
17902      */
17903     disabledDays : null,
17904     /**
17905      * @cfg {String} disabledDaysText
17906      * The tooltip to display when the date falls on a disabled day (defaults to 'Disabled')
17907      */
17908     disabledDaysText : "Disabled",
17909     /**
17910      * @cfg {Array} disabledDates
17911      * An array of "dates" to disable, as strings. These strings will be used to build a dynamic regular
17912      * expression so they are very powerful. Some examples:
17913      * <ul>
17914      * <li>["03/08/2003", "09/16/2003"] would disable those exact dates</li>
17915      * <li>["03/08", "09/16"] would disable those days for every year</li>
17916      * <li>["^03/08"] would only match the beginning (useful if you are using short years)</li>
17917      * <li>["03/../2006"] would disable every day in March 2006</li>
17918      * <li>["^03"] would disable every day in every March</li>
17919      * </ul>
17920      * In order to support regular expressions, if you are using a date format that has "." in it, you will have to
17921      * escape the dot when restricting dates. For example: ["03\\.08\\.03"].
17922      */
17923     disabledDates : null,
17924     /**
17925      * @cfg {String} disabledDatesText
17926      * The tooltip text to display when the date falls on a disabled date (defaults to 'Disabled')
17927      */
17928     disabledDatesText : "Disabled",
17929     /**
17930      * @cfg {Date/String} minValue
17931      * The minimum allowed date. Can be either a Javascript date object or a string date in a
17932      * valid format (defaults to null).
17933      */
17934     minValue : null,
17935     /**
17936      * @cfg {Date/String} maxValue
17937      * The maximum allowed date. Can be either a Javascript date object or a string date in a
17938      * valid format (defaults to null).
17939      */
17940     maxValue : null,
17941     /**
17942      * @cfg {String} minText
17943      * The error text to display when the date in the cell is before minValue (defaults to
17944      * 'The date in this field must be after {minValue}').
17945      */
17946     minText : "The date in this field must be equal to or after {0}",
17947     /**
17948      * @cfg {String} maxText
17949      * The error text to display when the date in the cell is after maxValue (defaults to
17950      * 'The date in this field must be before {maxValue}').
17951      */
17952     maxText : "The date in this field must be equal to or before {0}",
17953     /**
17954      * @cfg {String} invalidText
17955      * The error text to display when the date in the field is invalid (defaults to
17956      * '{value} is not a valid date - it must be in the format {format}').
17957      */
17958     invalidText : "{0} is not a valid date - it must be in the format {1}",
17959     /**
17960      * @cfg {String} triggerClass
17961      * An additional CSS class used to style the trigger button.  The trigger will always get the
17962      * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-date-trigger'
17963      * which displays a calendar icon).
17964      */
17965     triggerClass : 'x-form-date-trigger',
17966     
17967
17968     /**
17969      * @cfg {Boolean} useIso
17970      * if enabled, then the date field will use a hidden field to store the 
17971      * real value as iso formated date. default (false)
17972      */ 
17973     useIso : false,
17974     /**
17975      * @cfg {String/Object} autoCreate
17976      * A DomHelper element spec, or true for a default element spec (defaults to
17977      * {tag: "input", type: "text", size: "10", autocomplete: "off"})
17978      */ 
17979     // private
17980     defaultAutoCreate : {tag: "input", type: "text", size: "10", autocomplete: "off"},
17981     
17982     // private
17983     hiddenField: false,
17984     
17985     onRender : function(ct, position)
17986     {
17987         Roo.form.DateField.superclass.onRender.call(this, ct, position);
17988         if (this.useIso) {
17989             //this.el.dom.removeAttribute('name'); 
17990             Roo.log("Changing name?");
17991             this.el.dom.setAttribute('name', this.name + '____hidden___' ); 
17992             this.hiddenField = this.el.insertSibling({ tag:'input', type:'hidden', name: this.name },
17993                     'before', true);
17994             this.hiddenField.value = this.value ? this.formatDate(this.value, 'Y-m-d') : '';
17995             // prevent input submission
17996             this.hiddenName = this.name;
17997         }
17998             
17999             
18000     },
18001     
18002     // private
18003     validateValue : function(value)
18004     {
18005         value = this.formatDate(value);
18006         if(!Roo.form.DateField.superclass.validateValue.call(this, value)){
18007             Roo.log('super failed');
18008             return false;
18009         }
18010         if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
18011              return true;
18012         }
18013         var svalue = value;
18014         value = this.parseDate(value);
18015         if(!value){
18016             Roo.log('parse date failed' + svalue);
18017             this.markInvalid(String.format(this.invalidText, svalue, this.format));
18018             return false;
18019         }
18020         var time = value.getTime();
18021         if(this.minValue && time < this.minValue.getTime()){
18022             this.markInvalid(String.format(this.minText, this.formatDate(this.minValue)));
18023             return false;
18024         }
18025         if(this.maxValue && time > this.maxValue.getTime()){
18026             this.markInvalid(String.format(this.maxText, this.formatDate(this.maxValue)));
18027             return false;
18028         }
18029         if(this.disabledDays){
18030             var day = value.getDay();
18031             for(var i = 0; i < this.disabledDays.length; i++) {
18032                 if(day === this.disabledDays[i]){
18033                     this.markInvalid(this.disabledDaysText);
18034                     return false;
18035                 }
18036             }
18037         }
18038         var fvalue = this.formatDate(value);
18039         if(this.ddMatch && this.ddMatch.test(fvalue)){
18040             this.markInvalid(String.format(this.disabledDatesText, fvalue));
18041             return false;
18042         }
18043         return true;
18044     },
18045
18046     // private
18047     // Provides logic to override the default TriggerField.validateBlur which just returns true
18048     validateBlur : function(){
18049         return !this.menu || !this.menu.isVisible();
18050     },
18051     
18052     getName: function()
18053     {
18054         // returns hidden if it's set..
18055         if (!this.rendered) {return ''};
18056         return !this.hiddenName && this.el.dom.name  ? this.el.dom.name : (this.hiddenName || '');
18057         
18058     },
18059
18060     /**
18061      * Returns the current date value of the date field.
18062      * @return {Date} The date value
18063      */
18064     getValue : function(){
18065         
18066         return  this.hiddenField ?
18067                 this.hiddenField.value :
18068                 this.parseDate(Roo.form.DateField.superclass.getValue.call(this)) || "";
18069     },
18070
18071     /**
18072      * Sets the value of the date field.  You can pass a date object or any string that can be parsed into a valid
18073      * date, using DateField.format as the date format, according to the same rules as {@link Date#parseDate}
18074      * (the default format used is "m/d/y").
18075      * <br />Usage:
18076      * <pre><code>
18077 //All of these calls set the same date value (May 4, 2006)
18078
18079 //Pass a date object:
18080 var dt = new Date('5/4/06');
18081 dateField.setValue(dt);
18082
18083 //Pass a date string (default format):
18084 dateField.setValue('5/4/06');
18085
18086 //Pass a date string (custom format):
18087 dateField.format = 'Y-m-d';
18088 dateField.setValue('2006-5-4');
18089 </code></pre>
18090      * @param {String/Date} date The date or valid date string
18091      */
18092     setValue : function(date){
18093         if (this.hiddenField) {
18094             this.hiddenField.value = this.formatDate(this.parseDate(date), 'Y-m-d');
18095         }
18096         Roo.form.DateField.superclass.setValue.call(this, this.formatDate(this.parseDate(date)));
18097         // make sure the value field is always stored as a date..
18098         this.value = this.parseDate(date);
18099         
18100         
18101     },
18102
18103     // private
18104     parseDate : function(value){
18105         if(!value || value instanceof Date){
18106             return value;
18107         }
18108         var v = Date.parseDate(value, this.format);
18109          if (!v && this.useIso) {
18110             v = Date.parseDate(value, 'Y-m-d');
18111         }
18112         if(!v && this.altFormats){
18113             if(!this.altFormatsArray){
18114                 this.altFormatsArray = this.altFormats.split("|");
18115             }
18116             for(var i = 0, len = this.altFormatsArray.length; i < len && !v; i++){
18117                 v = Date.parseDate(value, this.altFormatsArray[i]);
18118             }
18119         }
18120         return v;
18121     },
18122
18123     // private
18124     formatDate : function(date, fmt){
18125         return (!date || !(date instanceof Date)) ?
18126                date : date.dateFormat(fmt || this.format);
18127     },
18128
18129     // private
18130     menuListeners : {
18131         select: function(m, d){
18132             
18133             this.setValue(d);
18134             this.fireEvent('select', this, d);
18135         },
18136         show : function(){ // retain focus styling
18137             this.onFocus();
18138         },
18139         hide : function(){
18140             this.focus.defer(10, this);
18141             var ml = this.menuListeners;
18142             this.menu.un("select", ml.select,  this);
18143             this.menu.un("show", ml.show,  this);
18144             this.menu.un("hide", ml.hide,  this);
18145         }
18146     },
18147
18148     // private
18149     // Implements the default empty TriggerField.onTriggerClick function to display the DatePicker
18150     onTriggerClick : function(){
18151         if(this.disabled){
18152             return;
18153         }
18154         if(this.menu == null){
18155             this.menu = new Roo.menu.DateMenu();
18156         }
18157         Roo.apply(this.menu.picker,  {
18158             showClear: this.allowBlank,
18159             minDate : this.minValue,
18160             maxDate : this.maxValue,
18161             disabledDatesRE : this.ddMatch,
18162             disabledDatesText : this.disabledDatesText,
18163             disabledDays : this.disabledDays,
18164             disabledDaysText : this.disabledDaysText,
18165             format : this.useIso ? 'Y-m-d' : this.format,
18166             minText : String.format(this.minText, this.formatDate(this.minValue)),
18167             maxText : String.format(this.maxText, this.formatDate(this.maxValue))
18168         });
18169         this.menu.on(Roo.apply({}, this.menuListeners, {
18170             scope:this
18171         }));
18172         this.menu.picker.setValue(this.getValue() || new Date());
18173         this.menu.show(this.el, "tl-bl?");
18174     },
18175
18176     beforeBlur : function(){
18177         var v = this.parseDate(this.getRawValue());
18178         if(v){
18179             this.setValue(v);
18180         }
18181     },
18182
18183     /*@
18184      * overide
18185      * 
18186      */
18187     isDirty : function() {
18188         if(this.disabled) {
18189             return false;
18190         }
18191         
18192         if(typeof(this.startValue) === 'undefined'){
18193             return false;
18194         }
18195         
18196         return String(this.getValue()) !== String(this.startValue);
18197         
18198     },
18199     // @overide
18200     cleanLeadingSpace : function(e)
18201     {
18202        return;
18203     }
18204     
18205 });/*
18206  * Based on:
18207  * Ext JS Library 1.1.1
18208  * Copyright(c) 2006-2007, Ext JS, LLC.
18209  *
18210  * Originally Released Under LGPL - original licence link has changed is not relivant.
18211  *
18212  * Fork - LGPL
18213  * <script type="text/javascript">
18214  */
18215  
18216 /**
18217  * @class Roo.form.MonthField
18218  * @extends Roo.form.TriggerField
18219  * Provides a date input field with a {@link Roo.DatePicker} dropdown and automatic date validation.
18220 * @constructor
18221 * Create a new MonthField
18222 * @param {Object} config
18223  */
18224 Roo.form.MonthField = function(config){
18225     
18226     Roo.form.MonthField.superclass.constructor.call(this, config);
18227     
18228       this.addEvents({
18229          
18230         /**
18231          * @event select
18232          * Fires when a date is selected
18233              * @param {Roo.form.MonthFieeld} combo This combo box
18234              * @param {Date} date The date selected
18235              */
18236         'select' : true
18237          
18238     });
18239     
18240     
18241     if(typeof this.minValue == "string") {
18242         this.minValue = this.parseDate(this.minValue);
18243     }
18244     if(typeof this.maxValue == "string") {
18245         this.maxValue = this.parseDate(this.maxValue);
18246     }
18247     this.ddMatch = null;
18248     if(this.disabledDates){
18249         var dd = this.disabledDates;
18250         var re = "(?:";
18251         for(var i = 0; i < dd.length; i++){
18252             re += dd[i];
18253             if(i != dd.length-1) {
18254                 re += "|";
18255             }
18256         }
18257         this.ddMatch = new RegExp(re + ")");
18258     }
18259 };
18260
18261 Roo.extend(Roo.form.MonthField, Roo.form.TriggerField,  {
18262     /**
18263      * @cfg {String} format
18264      * The default date format string which can be overriden for localization support.  The format must be
18265      * valid according to {@link Date#parseDate} (defaults to 'm/d/y').
18266      */
18267     format : "M Y",
18268     /**
18269      * @cfg {String} altFormats
18270      * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined
18271      * format (defaults to 'm/d/Y|m-d-y|m-d-Y|m/d|m-d|d').
18272      */
18273     altFormats : "M Y|m/Y|m-y|m-Y|my|mY",
18274     /**
18275      * @cfg {Array} disabledDays
18276      * An array of days to disable, 0 based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
18277      */
18278     disabledDays : [0,1,2,3,4,5,6],
18279     /**
18280      * @cfg {String} disabledDaysText
18281      * The tooltip to display when the date falls on a disabled day (defaults to 'Disabled')
18282      */
18283     disabledDaysText : "Disabled",
18284     /**
18285      * @cfg {Array} disabledDates
18286      * An array of "dates" to disable, as strings. These strings will be used to build a dynamic regular
18287      * expression so they are very powerful. Some examples:
18288      * <ul>
18289      * <li>["03/08/2003", "09/16/2003"] would disable those exact dates</li>
18290      * <li>["03/08", "09/16"] would disable those days for every year</li>
18291      * <li>["^03/08"] would only match the beginning (useful if you are using short years)</li>
18292      * <li>["03/../2006"] would disable every day in March 2006</li>
18293      * <li>["^03"] would disable every day in every March</li>
18294      * </ul>
18295      * In order to support regular expressions, if you are using a date format that has "." in it, you will have to
18296      * escape the dot when restricting dates. For example: ["03\\.08\\.03"].
18297      */
18298     disabledDates : null,
18299     /**
18300      * @cfg {String} disabledDatesText
18301      * The tooltip text to display when the date falls on a disabled date (defaults to 'Disabled')
18302      */
18303     disabledDatesText : "Disabled",
18304     /**
18305      * @cfg {Date/String} minValue
18306      * The minimum allowed date. Can be either a Javascript date object or a string date in a
18307      * valid format (defaults to null).
18308      */
18309     minValue : null,
18310     /**
18311      * @cfg {Date/String} maxValue
18312      * The maximum allowed date. Can be either a Javascript date object or a string date in a
18313      * valid format (defaults to null).
18314      */
18315     maxValue : null,
18316     /**
18317      * @cfg {String} minText
18318      * The error text to display when the date in the cell is before minValue (defaults to
18319      * 'The date in this field must be after {minValue}').
18320      */
18321     minText : "The date in this field must be equal to or after {0}",
18322     /**
18323      * @cfg {String} maxTextf
18324      * The error text to display when the date in the cell is after maxValue (defaults to
18325      * 'The date in this field must be before {maxValue}').
18326      */
18327     maxText : "The date in this field must be equal to or before {0}",
18328     /**
18329      * @cfg {String} invalidText
18330      * The error text to display when the date in the field is invalid (defaults to
18331      * '{value} is not a valid date - it must be in the format {format}').
18332      */
18333     invalidText : "{0} is not a valid date - it must be in the format {1}",
18334     /**
18335      * @cfg {String} triggerClass
18336      * An additional CSS class used to style the trigger button.  The trigger will always get the
18337      * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-date-trigger'
18338      * which displays a calendar icon).
18339      */
18340     triggerClass : 'x-form-date-trigger',
18341     
18342
18343     /**
18344      * @cfg {Boolean} useIso
18345      * if enabled, then the date field will use a hidden field to store the 
18346      * real value as iso formated date. default (true)
18347      */ 
18348     useIso : true,
18349     /**
18350      * @cfg {String/Object} autoCreate
18351      * A DomHelper element spec, or true for a default element spec (defaults to
18352      * {tag: "input", type: "text", size: "10", autocomplete: "off"})
18353      */ 
18354     // private
18355     defaultAutoCreate : {tag: "input", type: "text", size: "10", autocomplete: "new-password"},
18356     
18357     // private
18358     hiddenField: false,
18359     
18360     hideMonthPicker : false,
18361     
18362     onRender : function(ct, position)
18363     {
18364         Roo.form.MonthField.superclass.onRender.call(this, ct, position);
18365         if (this.useIso) {
18366             this.el.dom.removeAttribute('name'); 
18367             this.hiddenField = this.el.insertSibling({ tag:'input', type:'hidden', name: this.name },
18368                     'before', true);
18369             this.hiddenField.value = this.value ? this.formatDate(this.value, 'Y-m-d') : '';
18370             // prevent input submission
18371             this.hiddenName = this.name;
18372         }
18373             
18374             
18375     },
18376     
18377     // private
18378     validateValue : function(value)
18379     {
18380         value = this.formatDate(value);
18381         if(!Roo.form.MonthField.superclass.validateValue.call(this, value)){
18382             return false;
18383         }
18384         if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
18385              return true;
18386         }
18387         var svalue = value;
18388         value = this.parseDate(value);
18389         if(!value){
18390             this.markInvalid(String.format(this.invalidText, svalue, this.format));
18391             return false;
18392         }
18393         var time = value.getTime();
18394         if(this.minValue && time < this.minValue.getTime()){
18395             this.markInvalid(String.format(this.minText, this.formatDate(this.minValue)));
18396             return false;
18397         }
18398         if(this.maxValue && time > this.maxValue.getTime()){
18399             this.markInvalid(String.format(this.maxText, this.formatDate(this.maxValue)));
18400             return false;
18401         }
18402         /*if(this.disabledDays){
18403             var day = value.getDay();
18404             for(var i = 0; i < this.disabledDays.length; i++) {
18405                 if(day === this.disabledDays[i]){
18406                     this.markInvalid(this.disabledDaysText);
18407                     return false;
18408                 }
18409             }
18410         }
18411         */
18412         var fvalue = this.formatDate(value);
18413         /*if(this.ddMatch && this.ddMatch.test(fvalue)){
18414             this.markInvalid(String.format(this.disabledDatesText, fvalue));
18415             return false;
18416         }
18417         */
18418         return true;
18419     },
18420
18421     // private
18422     // Provides logic to override the default TriggerField.validateBlur which just returns true
18423     validateBlur : function(){
18424         return !this.menu || !this.menu.isVisible();
18425     },
18426
18427     /**
18428      * Returns the current date value of the date field.
18429      * @return {Date} The date value
18430      */
18431     getValue : function(){
18432         
18433         
18434         
18435         return  this.hiddenField ?
18436                 this.hiddenField.value :
18437                 this.parseDate(Roo.form.MonthField.superclass.getValue.call(this)) || "";
18438     },
18439
18440     /**
18441      * Sets the value of the date field.  You can pass a date object or any string that can be parsed into a valid
18442      * date, using MonthField.format as the date format, according to the same rules as {@link Date#parseDate}
18443      * (the default format used is "m/d/y").
18444      * <br />Usage:
18445      * <pre><code>
18446 //All of these calls set the same date value (May 4, 2006)
18447
18448 //Pass a date object:
18449 var dt = new Date('5/4/06');
18450 monthField.setValue(dt);
18451
18452 //Pass a date string (default format):
18453 monthField.setValue('5/4/06');
18454
18455 //Pass a date string (custom format):
18456 monthField.format = 'Y-m-d';
18457 monthField.setValue('2006-5-4');
18458 </code></pre>
18459      * @param {String/Date} date The date or valid date string
18460      */
18461     setValue : function(date){
18462         Roo.log('month setValue' + date);
18463         // can only be first of month..
18464         
18465         var val = this.parseDate(date);
18466         
18467         if (this.hiddenField) {
18468             this.hiddenField.value = this.formatDate(this.parseDate(date), 'Y-m-d');
18469         }
18470         Roo.form.MonthField.superclass.setValue.call(this, this.formatDate(this.parseDate(date)));
18471         this.value = this.parseDate(date);
18472     },
18473
18474     // private
18475     parseDate : function(value){
18476         if(!value || value instanceof Date){
18477             value = value ? Date.parseDate(value.format('Y-m') + '-01', 'Y-m-d') : null;
18478             return value;
18479         }
18480         var v = Date.parseDate(value, this.format);
18481         if (!v && this.useIso) {
18482             v = Date.parseDate(value, 'Y-m-d');
18483         }
18484         if (v) {
18485             // 
18486             v = Date.parseDate(v.format('Y-m') +'-01', 'Y-m-d');
18487         }
18488         
18489         
18490         if(!v && this.altFormats){
18491             if(!this.altFormatsArray){
18492                 this.altFormatsArray = this.altFormats.split("|");
18493             }
18494             for(var i = 0, len = this.altFormatsArray.length; i < len && !v; i++){
18495                 v = Date.parseDate(value, this.altFormatsArray[i]);
18496             }
18497         }
18498         return v;
18499     },
18500
18501     // private
18502     formatDate : function(date, fmt){
18503         return (!date || !(date instanceof Date)) ?
18504                date : date.dateFormat(fmt || this.format);
18505     },
18506
18507     // private
18508     menuListeners : {
18509         select: function(m, d){
18510             this.setValue(d);
18511             this.fireEvent('select', this, d);
18512         },
18513         show : function(){ // retain focus styling
18514             this.onFocus();
18515         },
18516         hide : function(){
18517             this.focus.defer(10, this);
18518             var ml = this.menuListeners;
18519             this.menu.un("select", ml.select,  this);
18520             this.menu.un("show", ml.show,  this);
18521             this.menu.un("hide", ml.hide,  this);
18522         }
18523     },
18524     // private
18525     // Implements the default empty TriggerField.onTriggerClick function to display the DatePicker
18526     onTriggerClick : function(){
18527         if(this.disabled){
18528             return;
18529         }
18530         if(this.menu == null){
18531             this.menu = new Roo.menu.DateMenu();
18532            
18533         }
18534         
18535         Roo.apply(this.menu.picker,  {
18536             
18537             showClear: this.allowBlank,
18538             minDate : this.minValue,
18539             maxDate : this.maxValue,
18540             disabledDatesRE : this.ddMatch,
18541             disabledDatesText : this.disabledDatesText,
18542             
18543             format : this.useIso ? 'Y-m-d' : this.format,
18544             minText : String.format(this.minText, this.formatDate(this.minValue)),
18545             maxText : String.format(this.maxText, this.formatDate(this.maxValue))
18546             
18547         });
18548          this.menu.on(Roo.apply({}, this.menuListeners, {
18549             scope:this
18550         }));
18551        
18552         
18553         var m = this.menu;
18554         var p = m.picker;
18555         
18556         // hide month picker get's called when we called by 'before hide';
18557         
18558         var ignorehide = true;
18559         p.hideMonthPicker  = function(disableAnim){
18560             if (ignorehide) {
18561                 return;
18562             }
18563              if(this.monthPicker){
18564                 Roo.log("hideMonthPicker called");
18565                 if(disableAnim === true){
18566                     this.monthPicker.hide();
18567                 }else{
18568                     this.monthPicker.slideOut('t', {duration:.2});
18569                     p.setValue(new Date(m.picker.mpSelYear, m.picker.mpSelMonth, 1));
18570                     p.fireEvent("select", this, this.value);
18571                     m.hide();
18572                 }
18573             }
18574         }
18575         
18576         Roo.log('picker set value');
18577         Roo.log(this.getValue());
18578         p.setValue(this.getValue() ? this.parseDate(this.getValue()) : new Date());
18579         m.show(this.el, 'tl-bl?');
18580         ignorehide  = false;
18581         // this will trigger hideMonthPicker..
18582         
18583         
18584         // hidden the day picker
18585         Roo.select('.x-date-picker table', true).first().dom.style.visibility = "hidden";
18586         
18587         
18588         
18589       
18590         
18591         p.showMonthPicker.defer(100, p);
18592     
18593         
18594        
18595     },
18596
18597     beforeBlur : function(){
18598         var v = this.parseDate(this.getRawValue());
18599         if(v){
18600             this.setValue(v);
18601         }
18602     }
18603
18604     /** @cfg {Boolean} grow @hide */
18605     /** @cfg {Number} growMin @hide */
18606     /** @cfg {Number} growMax @hide */
18607     /**
18608      * @hide
18609      * @method autoSize
18610      */
18611 });/*
18612  * Based on:
18613  * Ext JS Library 1.1.1
18614  * Copyright(c) 2006-2007, Ext JS, LLC.
18615  *
18616  * Originally Released Under LGPL - original licence link has changed is not relivant.
18617  *
18618  * Fork - LGPL
18619  * <script type="text/javascript">
18620  */
18621  
18622
18623 /**
18624  * @class Roo.form.ComboBox
18625  * @extends Roo.form.TriggerField
18626  * A combobox control with support for autocomplete, remote-loading, paging and many other features.
18627  * @constructor
18628  * Create a new ComboBox.
18629  * @param {Object} config Configuration options
18630  */
18631 Roo.form.ComboBox = function(config){
18632     Roo.form.ComboBox.superclass.constructor.call(this, config);
18633     this.addEvents({
18634         /**
18635          * @event expand
18636          * Fires when the dropdown list is expanded
18637              * @param {Roo.form.ComboBox} combo This combo box
18638              */
18639         'expand' : true,
18640         /**
18641          * @event collapse
18642          * Fires when the dropdown list is collapsed
18643              * @param {Roo.form.ComboBox} combo This combo box
18644              */
18645         'collapse' : true,
18646         /**
18647          * @event beforeselect
18648          * Fires before a list item is selected. Return false to cancel the selection.
18649              * @param {Roo.form.ComboBox} combo This combo box
18650              * @param {Roo.data.Record} record The data record returned from the underlying store
18651              * @param {Number} index The index of the selected item in the dropdown list
18652              */
18653         'beforeselect' : true,
18654         /**
18655          * @event select
18656          * Fires when a list item is selected
18657              * @param {Roo.form.ComboBox} combo This combo box
18658              * @param {Roo.data.Record} record The data record returned from the underlying store (or false on clear)
18659              * @param {Number} index The index of the selected item in the dropdown list
18660              */
18661         'select' : true,
18662         /**
18663          * @event beforequery
18664          * Fires before all queries are processed. Return false to cancel the query or set cancel to true.
18665          * The event object passed has these properties:
18666              * @param {Roo.form.ComboBox} combo This combo box
18667              * @param {String} query The query
18668              * @param {Boolean} forceAll true to force "all" query
18669              * @param {Boolean} cancel true to cancel the query
18670              * @param {Object} e The query event object
18671              */
18672         'beforequery': true,
18673          /**
18674          * @event add
18675          * Fires when the 'add' icon is pressed (add a listener to enable add button)
18676              * @param {Roo.form.ComboBox} combo This combo box
18677              */
18678         'add' : true,
18679         /**
18680          * @event edit
18681          * Fires when the 'edit' icon is pressed (add a listener to enable add button)
18682              * @param {Roo.form.ComboBox} combo This combo box
18683              * @param {Roo.data.Record|false} record The data record returned from the underlying store (or false on nothing selected)
18684              */
18685         'edit' : true
18686         
18687         
18688     });
18689     if(this.transform){
18690         this.allowDomMove = false;
18691         var s = Roo.getDom(this.transform);
18692         if(!this.hiddenName){
18693             this.hiddenName = s.name;
18694         }
18695         if(!this.store){
18696             this.mode = 'local';
18697             var d = [], opts = s.options;
18698             for(var i = 0, len = opts.length;i < len; i++){
18699                 var o = opts[i];
18700                 var value = (Roo.isIE ? o.getAttributeNode('value').specified : o.hasAttribute('value')) ? o.value : o.text;
18701                 if(o.selected) {
18702                     this.value = value;
18703                 }
18704                 d.push([value, o.text]);
18705             }
18706             this.store = new Roo.data.SimpleStore({
18707                 'id': 0,
18708                 fields: ['value', 'text'],
18709                 data : d
18710             });
18711             this.valueField = 'value';
18712             this.displayField = 'text';
18713         }
18714         s.name = Roo.id(); // wipe out the name in case somewhere else they have a reference
18715         if(!this.lazyRender){
18716             this.target = true;
18717             this.el = Roo.DomHelper.insertBefore(s, this.autoCreate || this.defaultAutoCreate);
18718             s.parentNode.removeChild(s); // remove it
18719             this.render(this.el.parentNode);
18720         }else{
18721             s.parentNode.removeChild(s); // remove it
18722         }
18723
18724     }
18725     if (this.store) {
18726         this.store = Roo.factory(this.store, Roo.data);
18727     }
18728     
18729     this.selectedIndex = -1;
18730     if(this.mode == 'local'){
18731         if(config.queryDelay === undefined){
18732             this.queryDelay = 10;
18733         }
18734         if(config.minChars === undefined){
18735             this.minChars = 0;
18736         }
18737     }
18738 };
18739
18740 Roo.extend(Roo.form.ComboBox, Roo.form.TriggerField, {
18741     /**
18742      * @cfg {String/HTMLElement/Element} transform The id, DOM node or element of an existing select to convert to a ComboBox
18743      */
18744     /**
18745      * @cfg {Boolean} lazyRender True to prevent the ComboBox from rendering until requested (should always be used when
18746      * rendering into an Roo.Editor, defaults to false)
18747      */
18748     /**
18749      * @cfg {Boolean/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to:
18750      * {tag: "input", type: "text", size: "24", autocomplete: "off"})
18751      */
18752     /**
18753      * @cfg {Roo.data.Store} store The data store to which this combo is bound (defaults to undefined)
18754      */
18755     /**
18756      * @cfg {String} title If supplied, a header element is created containing this text and added into the top of
18757      * the dropdown list (defaults to undefined, with no header element)
18758      */
18759
18760      /**
18761      * @cfg {String/Roo.Template} tpl The template to use to render the output
18762      */
18763      
18764     // private
18765     defaultAutoCreate : {tag: "input", type: "text", size: "24", autocomplete: "off"},
18766     /**
18767      * @cfg {Number} listWidth The width in pixels of the dropdown list (defaults to the width of the ComboBox field)
18768      */
18769     listWidth: undefined,
18770     /**
18771      * @cfg {String} displayField The underlying data field name to bind to this CombBox (defaults to undefined if
18772      * mode = 'remote' or 'text' if mode = 'local')
18773      */
18774     displayField: undefined,
18775     /**
18776      * @cfg {String} valueField The underlying data value name to bind to this CombBox (defaults to undefined if
18777      * mode = 'remote' or 'value' if mode = 'local'). 
18778      * Note: use of a valueField requires the user make a selection
18779      * in order for a value to be mapped.
18780      */
18781     valueField: undefined,
18782     
18783     
18784     /**
18785      * @cfg {String} hiddenName If specified, a hidden form field with this name is dynamically generated to store the
18786      * field's data value (defaults to the underlying DOM element's name)
18787      */
18788     hiddenName: undefined,
18789     /**
18790      * @cfg {String} listClass CSS class to apply to the dropdown list element (defaults to '')
18791      */
18792     listClass: '',
18793     /**
18794      * @cfg {String} selectedClass CSS class to apply to the selected item in the dropdown list (defaults to 'x-combo-selected')
18795      */
18796     selectedClass: 'x-combo-selected',
18797     /**
18798      * @cfg {String} triggerClass An additional CSS class used to style the trigger button.  The trigger will always get the
18799      * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-arrow-trigger'
18800      * which displays a downward arrow icon).
18801      */
18802     triggerClass : 'x-form-arrow-trigger',
18803     /**
18804      * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
18805      */
18806     shadow:'sides',
18807     /**
18808      * @cfg {String} listAlign A valid anchor position value. See {@link Roo.Element#alignTo} for details on supported
18809      * anchor positions (defaults to 'tl-bl')
18810      */
18811     listAlign: 'tl-bl?',
18812     /**
18813      * @cfg {Number} maxHeight The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300)
18814      */
18815     maxHeight: 300,
18816     /**
18817      * @cfg {String} triggerAction The action to execute when the trigger field is activated.  Use 'all' to run the
18818      * query specified by the allQuery config option (defaults to 'query')
18819      */
18820     triggerAction: 'query',
18821     /**
18822      * @cfg {Number} minChars The minimum number of characters the user must type before autocomplete and typeahead activate
18823      * (defaults to 4, does not apply if editable = false)
18824      */
18825     minChars : 4,
18826     /**
18827      * @cfg {Boolean} typeAhead True to populate and autoselect the remainder of the text being typed after a configurable
18828      * delay (typeAheadDelay) if it matches a known value (defaults to false)
18829      */
18830     typeAhead: false,
18831     /**
18832      * @cfg {Number} queryDelay The length of time in milliseconds to delay between the start of typing and sending the
18833      * query to filter the dropdown list (defaults to 500 if mode = 'remote' or 10 if mode = 'local')
18834      */
18835     queryDelay: 500,
18836     /**
18837      * @cfg {Number} pageSize If greater than 0, a paging toolbar is displayed in the footer of the dropdown list and the
18838      * filter queries will execute with page start and limit parameters.  Only applies when mode = 'remote' (defaults to 0)
18839      */
18840     pageSize: 0,
18841     /**
18842      * @cfg {Boolean} selectOnFocus True to select any existing text in the field immediately on focus.  Only applies
18843      * when editable = true (defaults to false)
18844      */
18845     selectOnFocus:false,
18846     /**
18847      * @cfg {String} queryParam Name of the query as it will be passed on the querystring (defaults to 'query')
18848      */
18849     queryParam: 'query',
18850     /**
18851      * @cfg {String} loadingText The text to display in the dropdown list while data is loading.  Only applies
18852      * when mode = 'remote' (defaults to 'Loading...')
18853      */
18854     loadingText: 'Loading...',
18855     /**
18856      * @cfg {Boolean} resizable True to add a resize handle to the bottom of the dropdown list (defaults to false)
18857      */
18858     resizable: false,
18859     /**
18860      * @cfg {Number} handleHeight The height in pixels of the dropdown list resize handle if resizable = true (defaults to 8)
18861      */
18862     handleHeight : 8,
18863     /**
18864      * @cfg {Boolean} editable False to prevent the user from typing text directly into the field, just like a
18865      * traditional select (defaults to true)
18866      */
18867     editable: true,
18868     /**
18869      * @cfg {String} allQuery The text query to send to the server to return all records for the list with no filtering (defaults to '')
18870      */
18871     allQuery: '',
18872     /**
18873      * @cfg {String} mode Set to 'local' if the ComboBox loads local data (defaults to 'remote' which loads from the server)
18874      */
18875     mode: 'remote',
18876     /**
18877      * @cfg {Number} minListWidth The minimum width of the dropdown list in pixels (defaults to 70, will be ignored if
18878      * listWidth has a higher value)
18879      */
18880     minListWidth : 70,
18881     /**
18882      * @cfg {Boolean} forceSelection True to restrict the selected value to one of the values in the list, false to
18883      * allow the user to set arbitrary text into the field (defaults to false)
18884      */
18885     forceSelection:false,
18886     /**
18887      * @cfg {Number} typeAheadDelay The length of time in milliseconds to wait until the typeahead text is displayed
18888      * if typeAhead = true (defaults to 250)
18889      */
18890     typeAheadDelay : 250,
18891     /**
18892      * @cfg {String} valueNotFoundText When using a name/value combo, if the value passed to setValue is not found in
18893      * the store, valueNotFoundText will be displayed as the field text if defined (defaults to undefined)
18894      */
18895     valueNotFoundText : undefined,
18896     /**
18897      * @cfg {Boolean} blockFocus Prevents all focus calls, so it can work with things like HTML edtor bar
18898      */
18899     blockFocus : false,
18900     
18901     /**
18902      * @cfg {Boolean} disableClear Disable showing of clear button.
18903      */
18904     disableClear : false,
18905     /**
18906      * @cfg {Boolean} alwaysQuery  Disable caching of results, and always send query
18907      */
18908     alwaysQuery : false,
18909     
18910     //private
18911     addicon : false,
18912     editicon: false,
18913     
18914     // element that contains real text value.. (when hidden is used..)
18915      
18916     // private
18917     onRender : function(ct, position){
18918         Roo.form.ComboBox.superclass.onRender.call(this, ct, position);
18919         if(this.hiddenName){
18920             this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name: this.hiddenName, id:  (this.hiddenId||this.hiddenName)},
18921                     'before', true);
18922             this.hiddenField.value =
18923                 this.hiddenValue !== undefined ? this.hiddenValue :
18924                 this.value !== undefined ? this.value : '';
18925
18926             // prevent input submission
18927             this.el.dom.removeAttribute('name');
18928              
18929              
18930         }
18931         if(Roo.isGecko){
18932             this.el.dom.setAttribute('autocomplete', 'off');
18933         }
18934
18935         var cls = 'x-combo-list';
18936
18937         this.list = new Roo.Layer({
18938             shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
18939         });
18940
18941         var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
18942         this.list.setWidth(lw);
18943         this.list.swallowEvent('mousewheel');
18944         this.assetHeight = 0;
18945
18946         if(this.title){
18947             this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
18948             this.assetHeight += this.header.getHeight();
18949         }
18950
18951         this.innerList = this.list.createChild({cls:cls+'-inner'});
18952         this.innerList.on('mouseover', this.onViewOver, this);
18953         this.innerList.on('mousemove', this.onViewMove, this);
18954         this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
18955         
18956         if(this.allowBlank && !this.pageSize && !this.disableClear){
18957             this.footer = this.list.createChild({cls:cls+'-ft'});
18958             this.pageTb = new Roo.Toolbar(this.footer);
18959            
18960         }
18961         if(this.pageSize){
18962             this.footer = this.list.createChild({cls:cls+'-ft'});
18963             this.pageTb = new Roo.PagingToolbar(this.footer, this.store,
18964                     {pageSize: this.pageSize});
18965             
18966         }
18967         
18968         if (this.pageTb && this.allowBlank && !this.disableClear) {
18969             var _this = this;
18970             this.pageTb.add(new Roo.Toolbar.Fill(), {
18971                 cls: 'x-btn-icon x-btn-clear',
18972                 text: '&#160;',
18973                 handler: function()
18974                 {
18975                     _this.collapse();
18976                     _this.clearValue();
18977                     _this.onSelect(false, -1);
18978                 }
18979             });
18980         }
18981         if (this.footer) {
18982             this.assetHeight += this.footer.getHeight();
18983         }
18984         
18985
18986         if(!this.tpl){
18987             this.tpl = '<div class="'+cls+'-item">{' + this.displayField + '}</div>';
18988         }
18989
18990         this.view = new Roo.View(this.innerList, this.tpl, {
18991             singleSelect:true, store: this.store, selectedClass: this.selectedClass
18992         });
18993
18994         this.view.on('click', this.onViewClick, this);
18995
18996         this.store.on('beforeload', this.onBeforeLoad, this);
18997         this.store.on('load', this.onLoad, this);
18998         this.store.on('loadexception', this.onLoadException, this);
18999
19000         if(this.resizable){
19001             this.resizer = new Roo.Resizable(this.list,  {
19002                pinned:true, handles:'se'
19003             });
19004             this.resizer.on('resize', function(r, w, h){
19005                 this.maxHeight = h-this.handleHeight-this.list.getFrameWidth('tb')-this.assetHeight;
19006                 this.listWidth = w;
19007                 this.innerList.setWidth(w - this.list.getFrameWidth('lr'));
19008                 this.restrictHeight();
19009             }, this);
19010             this[this.pageSize?'footer':'innerList'].setStyle('margin-bottom', this.handleHeight+'px');
19011         }
19012         if(!this.editable){
19013             this.editable = true;
19014             this.setEditable(false);
19015         }  
19016         
19017         
19018         if (typeof(this.events.add.listeners) != 'undefined') {
19019             
19020             this.addicon = this.wrap.createChild(
19021                 {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-combo-add' });  
19022        
19023             this.addicon.on('click', function(e) {
19024                 this.fireEvent('add', this);
19025             }, this);
19026         }
19027         if (typeof(this.events.edit.listeners) != 'undefined') {
19028             
19029             this.editicon = this.wrap.createChild(
19030                 {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-combo-edit' });  
19031             if (this.addicon) {
19032                 this.editicon.setStyle('margin-left', '40px');
19033             }
19034             this.editicon.on('click', function(e) {
19035                 
19036                 // we fire even  if inothing is selected..
19037                 this.fireEvent('edit', this, this.lastData );
19038                 
19039             }, this);
19040         }
19041         
19042         
19043         
19044     },
19045
19046     // private
19047     initEvents : function(){
19048         Roo.form.ComboBox.superclass.initEvents.call(this);
19049
19050         this.keyNav = new Roo.KeyNav(this.el, {
19051             "up" : function(e){
19052                 this.inKeyMode = true;
19053                 this.selectPrev();
19054             },
19055
19056             "down" : function(e){
19057                 if(!this.isExpanded()){
19058                     this.onTriggerClick();
19059                 }else{
19060                     this.inKeyMode = true;
19061                     this.selectNext();
19062                 }
19063             },
19064
19065             "enter" : function(e){
19066                 this.onViewClick();
19067                 //return true;
19068             },
19069
19070             "esc" : function(e){
19071                 this.collapse();
19072             },
19073
19074             "tab" : function(e){
19075                 this.onViewClick(false);
19076                 this.fireEvent("specialkey", this, e);
19077                 return true;
19078             },
19079
19080             scope : this,
19081
19082             doRelay : function(foo, bar, hname){
19083                 if(hname == 'down' || this.scope.isExpanded()){
19084                    return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
19085                 }
19086                 return true;
19087             },
19088
19089             forceKeyDown: true
19090         });
19091         this.queryDelay = Math.max(this.queryDelay || 10,
19092                 this.mode == 'local' ? 10 : 250);
19093         this.dqTask = new Roo.util.DelayedTask(this.initQuery, this);
19094         if(this.typeAhead){
19095             this.taTask = new Roo.util.DelayedTask(this.onTypeAhead, this);
19096         }
19097         if(this.editable !== false){
19098             this.el.on("keyup", this.onKeyUp, this);
19099         }
19100         if(this.forceSelection){
19101             this.on('blur', this.doForce, this);
19102         }
19103     },
19104
19105     onDestroy : function(){
19106         if(this.view){
19107             this.view.setStore(null);
19108             this.view.el.removeAllListeners();
19109             this.view.el.remove();
19110             this.view.purgeListeners();
19111         }
19112         if(this.list){
19113             this.list.destroy();
19114         }
19115         if(this.store){
19116             this.store.un('beforeload', this.onBeforeLoad, this);
19117             this.store.un('load', this.onLoad, this);
19118             this.store.un('loadexception', this.onLoadException, this);
19119         }
19120         Roo.form.ComboBox.superclass.onDestroy.call(this);
19121     },
19122
19123     // private
19124     fireKey : function(e){
19125         if(e.isNavKeyPress() && !this.list.isVisible()){
19126             this.fireEvent("specialkey", this, e);
19127         }
19128     },
19129
19130     // private
19131     onResize: function(w, h){
19132         Roo.form.ComboBox.superclass.onResize.apply(this, arguments);
19133         
19134         if(typeof w != 'number'){
19135             // we do not handle it!?!?
19136             return;
19137         }
19138         var tw = this.trigger.getWidth();
19139         tw += this.addicon ? this.addicon.getWidth() : 0;
19140         tw += this.editicon ? this.editicon.getWidth() : 0;
19141         var x = w - tw;
19142         this.el.setWidth( this.adjustWidth('input', x));
19143             
19144         this.trigger.setStyle('left', x+'px');
19145         
19146         if(this.list && this.listWidth === undefined){
19147             var lw = Math.max(x + this.trigger.getWidth(), this.minListWidth);
19148             this.list.setWidth(lw);
19149             this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
19150         }
19151         
19152     
19153         
19154     },
19155
19156     /**
19157      * Allow or prevent the user from directly editing the field text.  If false is passed,
19158      * the user will only be able to select from the items defined in the dropdown list.  This method
19159      * is the runtime equivalent of setting the 'editable' config option at config time.
19160      * @param {Boolean} value True to allow the user to directly edit the field text
19161      */
19162     setEditable : function(value){
19163         if(value == this.editable){
19164             return;
19165         }
19166         this.editable = value;
19167         if(!value){
19168             this.el.dom.setAttribute('readOnly', true);
19169             this.el.on('mousedown', this.onTriggerClick,  this);
19170             this.el.addClass('x-combo-noedit');
19171         }else{
19172             this.el.dom.setAttribute('readOnly', false);
19173             this.el.un('mousedown', this.onTriggerClick,  this);
19174             this.el.removeClass('x-combo-noedit');
19175         }
19176     },
19177
19178     // private
19179     onBeforeLoad : function(){
19180         if(!this.hasFocus){
19181             return;
19182         }
19183         this.innerList.update(this.loadingText ?
19184                '<div class="loading-indicator">'+this.loadingText+'</div>' : '');
19185         this.restrictHeight();
19186         this.selectedIndex = -1;
19187     },
19188
19189     // private
19190     onLoad : function(){
19191         if(!this.hasFocus){
19192             return;
19193         }
19194         if(this.store.getCount() > 0){
19195             this.expand();
19196             this.restrictHeight();
19197             if(this.lastQuery == this.allQuery){
19198                 if(this.editable){
19199                     this.el.dom.select();
19200                 }
19201                 if(!this.selectByValue(this.value, true)){
19202                     this.select(0, true);
19203                 }
19204             }else{
19205                 this.selectNext();
19206                 if(this.typeAhead && this.lastKey != Roo.EventObject.BACKSPACE && this.lastKey != Roo.EventObject.DELETE){
19207                     this.taTask.delay(this.typeAheadDelay);
19208                 }
19209             }
19210         }else{
19211             this.onEmptyResults();
19212         }
19213         //this.el.focus();
19214     },
19215     // private
19216     onLoadException : function()
19217     {
19218         this.collapse();
19219         Roo.log(this.store.reader.jsonData);
19220         if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
19221             Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
19222         }
19223         
19224         
19225     },
19226     // private
19227     onTypeAhead : function(){
19228         if(this.store.getCount() > 0){
19229             var r = this.store.getAt(0);
19230             var newValue = r.data[this.displayField];
19231             var len = newValue.length;
19232             var selStart = this.getRawValue().length;
19233             if(selStart != len){
19234                 this.setRawValue(newValue);
19235                 this.selectText(selStart, newValue.length);
19236             }
19237         }
19238     },
19239
19240     // private
19241     onSelect : function(record, index){
19242         if(this.fireEvent('beforeselect', this, record, index) !== false){
19243             this.setFromData(index > -1 ? record.data : false);
19244             this.collapse();
19245             this.fireEvent('select', this, record, index);
19246         }
19247     },
19248
19249     /**
19250      * Returns the currently selected field value or empty string if no value is set.
19251      * @return {String} value The selected value
19252      */
19253     getValue : function(){
19254         if(this.valueField){
19255             return typeof this.value != 'undefined' ? this.value : '';
19256         }
19257         return Roo.form.ComboBox.superclass.getValue.call(this);
19258     },
19259
19260     /**
19261      * Clears any text/value currently set in the field
19262      */
19263     clearValue : function(){
19264         if(this.hiddenField){
19265             this.hiddenField.value = '';
19266         }
19267         this.value = '';
19268         this.setRawValue('');
19269         this.lastSelectionText = '';
19270         
19271     },
19272
19273     /**
19274      * Sets the specified value into the field.  If the value finds a match, the corresponding record text
19275      * will be displayed in the field.  If the value does not match the data value of an existing item,
19276      * and the valueNotFoundText config option is defined, it will be displayed as the default field text.
19277      * Otherwise the field will be blank (although the value will still be set).
19278      * @param {String} value The value to match
19279      */
19280     setValue : function(v){
19281         var text = v;
19282         if(this.valueField){
19283             var r = this.findRecord(this.valueField, v);
19284             if(r){
19285                 text = r.data[this.displayField];
19286             }else if(this.valueNotFoundText !== undefined){
19287                 text = this.valueNotFoundText;
19288             }
19289         }
19290         this.lastSelectionText = text;
19291         if(this.hiddenField){
19292             this.hiddenField.value = v;
19293         }
19294         Roo.form.ComboBox.superclass.setValue.call(this, text);
19295         this.value = v;
19296     },
19297     /**
19298      * @property {Object} the last set data for the element
19299      */
19300     
19301     lastData : false,
19302     /**
19303      * Sets the value of the field based on a object which is related to the record format for the store.
19304      * @param {Object} value the value to set as. or false on reset?
19305      */
19306     setFromData : function(o){
19307         var dv = ''; // display value
19308         var vv = ''; // value value..
19309         this.lastData = o;
19310         if (this.displayField) {
19311             dv = !o || typeof(o[this.displayField]) == 'undefined' ? '' : o[this.displayField];
19312         } else {
19313             // this is an error condition!!!
19314             Roo.log('no  displayField value set for '+ (this.name ? this.name : this.id));
19315         }
19316         
19317         if(this.valueField){
19318             vv = !o || typeof(o[this.valueField]) == 'undefined' ? dv : o[this.valueField];
19319         }
19320         if(this.hiddenField){
19321             this.hiddenField.value = vv;
19322             
19323             this.lastSelectionText = dv;
19324             Roo.form.ComboBox.superclass.setValue.call(this, dv);
19325             this.value = vv;
19326             return;
19327         }
19328         // no hidden field.. - we store the value in 'value', but still display
19329         // display field!!!!
19330         this.lastSelectionText = dv;
19331         Roo.form.ComboBox.superclass.setValue.call(this, dv);
19332         this.value = vv;
19333         
19334         
19335     },
19336     // private
19337     reset : function(){
19338         // overridden so that last data is reset..
19339         this.setValue(this.resetValue);
19340         this.originalValue = this.getValue();
19341         this.clearInvalid();
19342         this.lastData = false;
19343         if (this.view) {
19344             this.view.clearSelections();
19345         }
19346     },
19347     // private
19348     findRecord : function(prop, value){
19349         var record;
19350         if(this.store.getCount() > 0){
19351             this.store.each(function(r){
19352                 if(r.data[prop] == value){
19353                     record = r;
19354                     return false;
19355                 }
19356                 return true;
19357             });
19358         }
19359         return record;
19360     },
19361     
19362     getName: function()
19363     {
19364         // returns hidden if it's set..
19365         if (!this.rendered) {return ''};
19366         return !this.hiddenName && this.el.dom.name  ? this.el.dom.name : (this.hiddenName || '');
19367         
19368     },
19369     // private
19370     onViewMove : function(e, t){
19371         this.inKeyMode = false;
19372     },
19373
19374     // private
19375     onViewOver : function(e, t){
19376         if(this.inKeyMode){ // prevent key nav and mouse over conflicts
19377             return;
19378         }
19379         var item = this.view.findItemFromChild(t);
19380         if(item){
19381             var index = this.view.indexOf(item);
19382             this.select(index, false);
19383         }
19384     },
19385
19386     // private
19387     onViewClick : function(doFocus)
19388     {
19389         var index = this.view.getSelectedIndexes()[0];
19390         var r = this.store.getAt(index);
19391         if(r){
19392             this.onSelect(r, index);
19393         }
19394         if(doFocus !== false && !this.blockFocus){
19395             this.el.focus();
19396         }
19397     },
19398
19399     // private
19400     restrictHeight : function(){
19401         this.innerList.dom.style.height = '';
19402         var inner = this.innerList.dom;
19403         var h = Math.max(inner.clientHeight, inner.offsetHeight, inner.scrollHeight);
19404         this.innerList.setHeight(h < this.maxHeight ? 'auto' : this.maxHeight);
19405         this.list.beginUpdate();
19406         this.list.setHeight(this.innerList.getHeight()+this.list.getFrameWidth('tb')+(this.resizable?this.handleHeight:0)+this.assetHeight);
19407         this.list.alignTo(this.el, this.listAlign);
19408         this.list.endUpdate();
19409     },
19410
19411     // private
19412     onEmptyResults : function(){
19413         this.collapse();
19414     },
19415
19416     /**
19417      * Returns true if the dropdown list is expanded, else false.
19418      */
19419     isExpanded : function(){
19420         return this.list.isVisible();
19421     },
19422
19423     /**
19424      * Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire.
19425      * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
19426      * @param {String} value The data value of the item to select
19427      * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
19428      * selected item if it is not currently in view (defaults to true)
19429      * @return {Boolean} True if the value matched an item in the list, else false
19430      */
19431     selectByValue : function(v, scrollIntoView){
19432         if(v !== undefined && v !== null){
19433             var r = this.findRecord(this.valueField || this.displayField, v);
19434             if(r){
19435                 this.select(this.store.indexOf(r), scrollIntoView);
19436                 return true;
19437             }
19438         }
19439         return false;
19440     },
19441
19442     /**
19443      * Select an item in the dropdown list by its numeric index in the list. This function does NOT cause the select event to fire.
19444      * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
19445      * @param {Number} index The zero-based index of the list item to select
19446      * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
19447      * selected item if it is not currently in view (defaults to true)
19448      */
19449     select : function(index, scrollIntoView){
19450         this.selectedIndex = index;
19451         this.view.select(index);
19452         if(scrollIntoView !== false){
19453             var el = this.view.getNode(index);
19454             if(el){
19455                 this.innerList.scrollChildIntoView(el, false);
19456             }
19457         }
19458     },
19459
19460     // private
19461     selectNext : function(){
19462         var ct = this.store.getCount();
19463         if(ct > 0){
19464             if(this.selectedIndex == -1){
19465                 this.select(0);
19466             }else if(this.selectedIndex < ct-1){
19467                 this.select(this.selectedIndex+1);
19468             }
19469         }
19470     },
19471
19472     // private
19473     selectPrev : function(){
19474         var ct = this.store.getCount();
19475         if(ct > 0){
19476             if(this.selectedIndex == -1){
19477                 this.select(0);
19478             }else if(this.selectedIndex != 0){
19479                 this.select(this.selectedIndex-1);
19480             }
19481         }
19482     },
19483
19484     // private
19485     onKeyUp : function(e){
19486         if(this.editable !== false && !e.isSpecialKey()){
19487             this.lastKey = e.getKey();
19488             this.dqTask.delay(this.queryDelay);
19489         }
19490     },
19491
19492     // private
19493     validateBlur : function(){
19494         return !this.list || !this.list.isVisible();   
19495     },
19496
19497     // private
19498     initQuery : function(){
19499         this.doQuery(this.getRawValue());
19500     },
19501
19502     // private
19503     doForce : function(){
19504         if(this.el.dom.value.length > 0){
19505             this.el.dom.value =
19506                 this.lastSelectionText === undefined ? '' : this.lastSelectionText;
19507              
19508         }
19509     },
19510
19511     /**
19512      * Execute a query to filter the dropdown list.  Fires the beforequery event prior to performing the
19513      * query allowing the query action to be canceled if needed.
19514      * @param {String} query The SQL query to execute
19515      * @param {Boolean} forceAll True to force the query to execute even if there are currently fewer characters
19516      * in the field than the minimum specified by the minChars config option.  It also clears any filter previously
19517      * saved in the current store (defaults to false)
19518      */
19519     doQuery : function(q, forceAll){
19520         if(q === undefined || q === null){
19521             q = '';
19522         }
19523         var qe = {
19524             query: q,
19525             forceAll: forceAll,
19526             combo: this,
19527             cancel:false
19528         };
19529         if(this.fireEvent('beforequery', qe)===false || qe.cancel){
19530             return false;
19531         }
19532         q = qe.query;
19533         forceAll = qe.forceAll;
19534         if(forceAll === true || (q.length >= this.minChars)){
19535             if(this.lastQuery != q || this.alwaysQuery){
19536                 this.lastQuery = q;
19537                 if(this.mode == 'local'){
19538                     this.selectedIndex = -1;
19539                     if(forceAll){
19540                         this.store.clearFilter();
19541                     }else{
19542                         this.store.filter(this.displayField, q);
19543                     }
19544                     this.onLoad();
19545                 }else{
19546                     this.store.baseParams[this.queryParam] = q;
19547                     this.store.load({
19548                         params: this.getParams(q)
19549                     });
19550                     this.expand();
19551                 }
19552             }else{
19553                 this.selectedIndex = -1;
19554                 this.onLoad();   
19555             }
19556         }
19557     },
19558
19559     // private
19560     getParams : function(q){
19561         var p = {};
19562         //p[this.queryParam] = q;
19563         if(this.pageSize){
19564             p.start = 0;
19565             p.limit = this.pageSize;
19566         }
19567         return p;
19568     },
19569
19570     /**
19571      * Hides the dropdown list if it is currently expanded. Fires the 'collapse' event on completion.
19572      */
19573     collapse : function(){
19574         if(!this.isExpanded()){
19575             return;
19576         }
19577         this.list.hide();
19578         Roo.get(document).un('mousedown', this.collapseIf, this);
19579         Roo.get(document).un('mousewheel', this.collapseIf, this);
19580         if (!this.editable) {
19581             Roo.get(document).un('keydown', this.listKeyPress, this);
19582         }
19583         this.fireEvent('collapse', this);
19584     },
19585
19586     // private
19587     collapseIf : function(e){
19588         if(!e.within(this.wrap) && !e.within(this.list)){
19589             this.collapse();
19590         }
19591     },
19592
19593     /**
19594      * Expands the dropdown list if it is currently hidden. Fires the 'expand' event on completion.
19595      */
19596     expand : function(){
19597         if(this.isExpanded() || !this.hasFocus){
19598             return;
19599         }
19600         this.list.alignTo(this.el, this.listAlign);
19601         this.list.show();
19602         Roo.get(document).on('mousedown', this.collapseIf, this);
19603         Roo.get(document).on('mousewheel', this.collapseIf, this);
19604         if (!this.editable) {
19605             Roo.get(document).on('keydown', this.listKeyPress, this);
19606         }
19607         
19608         this.fireEvent('expand', this);
19609     },
19610
19611     // private
19612     // Implements the default empty TriggerField.onTriggerClick function
19613     onTriggerClick : function(){
19614         if(this.disabled){
19615             return;
19616         }
19617         if(this.isExpanded()){
19618             this.collapse();
19619             if (!this.blockFocus) {
19620                 this.el.focus();
19621             }
19622             
19623         }else {
19624             this.hasFocus = true;
19625             if(this.triggerAction == 'all') {
19626                 this.doQuery(this.allQuery, true);
19627             } else {
19628                 this.doQuery(this.getRawValue());
19629             }
19630             if (!this.blockFocus) {
19631                 this.el.focus();
19632             }
19633         }
19634     },
19635     listKeyPress : function(e)
19636     {
19637         //Roo.log('listkeypress');
19638         // scroll to first matching element based on key pres..
19639         if (e.isSpecialKey()) {
19640             return false;
19641         }
19642         var k = String.fromCharCode(e.getKey()).toUpperCase();
19643         //Roo.log(k);
19644         var match  = false;
19645         var csel = this.view.getSelectedNodes();
19646         var cselitem = false;
19647         if (csel.length) {
19648             var ix = this.view.indexOf(csel[0]);
19649             cselitem  = this.store.getAt(ix);
19650             if (!cselitem.get(this.displayField) || cselitem.get(this.displayField).substring(0,1).toUpperCase() != k) {
19651                 cselitem = false;
19652             }
19653             
19654         }
19655         
19656         this.store.each(function(v) { 
19657             if (cselitem) {
19658                 // start at existing selection.
19659                 if (cselitem.id == v.id) {
19660                     cselitem = false;
19661                 }
19662                 return;
19663             }
19664                 
19665             if (v.get(this.displayField) && v.get(this.displayField).substring(0,1).toUpperCase() == k) {
19666                 match = this.store.indexOf(v);
19667                 return false;
19668             }
19669         }, this);
19670         
19671         if (match === false) {
19672             return true; // no more action?
19673         }
19674         // scroll to?
19675         this.view.select(match);
19676         var sn = Roo.get(this.view.getSelectedNodes()[0]);
19677         sn.scrollIntoView(sn.dom.parentNode, false);
19678     } 
19679
19680     /** 
19681     * @cfg {Boolean} grow 
19682     * @hide 
19683     */
19684     /** 
19685     * @cfg {Number} growMin 
19686     * @hide 
19687     */
19688     /** 
19689     * @cfg {Number} growMax 
19690     * @hide 
19691     */
19692     /**
19693      * @hide
19694      * @method autoSize
19695      */
19696 });/*
19697  * Copyright(c) 2010-2012, Roo J Solutions Limited
19698  *
19699  * Licence LGPL
19700  *
19701  */
19702
19703 /**
19704  * @class Roo.form.ComboBoxArray
19705  * @extends Roo.form.TextField
19706  * A facebook style adder... for lists of email / people / countries  etc...
19707  * pick multiple items from a combo box, and shows each one.
19708  *
19709  *  Fred [x]  Brian [x]  [Pick another |v]
19710  *
19711  *
19712  *  For this to work: it needs various extra information
19713  *    - normal combo problay has
19714  *      name, hiddenName
19715  *    + displayField, valueField
19716  *
19717  *    For our purpose...
19718  *
19719  *
19720  *   If we change from 'extends' to wrapping...
19721  *   
19722  *  
19723  *
19724  
19725  
19726  * @constructor
19727  * Create a new ComboBoxArray.
19728  * @param {Object} config Configuration options
19729  */
19730  
19731
19732 Roo.form.ComboBoxArray = function(config)
19733 {
19734     this.addEvents({
19735         /**
19736          * @event beforeremove
19737          * Fires before remove the value from the list
19738              * @param {Roo.form.ComboBoxArray} _self This combo box array
19739              * @param {Roo.form.ComboBoxArray.Item} item removed item
19740              */
19741         'beforeremove' : true,
19742         /**
19743          * @event remove
19744          * Fires when remove the value from the list
19745              * @param {Roo.form.ComboBoxArray} _self This combo box array
19746              * @param {Roo.form.ComboBoxArray.Item} item removed item
19747              */
19748         'remove' : true
19749         
19750         
19751     });
19752     
19753     Roo.form.ComboBoxArray.superclass.constructor.call(this, config);
19754     
19755     this.items = new Roo.util.MixedCollection(false);
19756     
19757     // construct the child combo...
19758     
19759     
19760     
19761     
19762    
19763     
19764 }
19765
19766  
19767 Roo.extend(Roo.form.ComboBoxArray, Roo.form.TextField,
19768
19769     /**
19770      * @cfg {Roo.form.Combo} combo The combo box that is wrapped
19771      */
19772     
19773     lastData : false,
19774     
19775     // behavies liek a hiddne field
19776     inputType:      'hidden',
19777     /**
19778      * @cfg {Number} width The width of the box that displays the selected element
19779      */ 
19780     width:          300,
19781
19782     
19783     
19784     /**
19785      * @cfg {String} name    The name of the visable items on this form (eg. titles not ids)
19786      */
19787     name : false,
19788     /**
19789      * @cfg {String} hiddenName    The hidden name of the field, often contains an comma seperated list of names
19790      */
19791     hiddenName : false,
19792     
19793     
19794     // private the array of items that are displayed..
19795     items  : false,
19796     // private - the hidden field el.
19797     hiddenEl : false,
19798     // private - the filed el..
19799     el : false,
19800     
19801     //validateValue : function() { return true; }, // all values are ok!
19802     //onAddClick: function() { },
19803     
19804     onRender : function(ct, position) 
19805     {
19806         
19807         // create the standard hidden element
19808         //Roo.form.ComboBoxArray.superclass.onRender.call(this, ct, position);
19809         
19810         
19811         // give fake names to child combo;
19812         this.combo.hiddenName = this.hiddenName ? (this.hiddenName+'-subcombo') : this.hiddenName;
19813         this.combo.name = this.name ? (this.name+'-subcombo') : this.name;
19814         
19815         this.combo = Roo.factory(this.combo, Roo.form);
19816         this.combo.onRender(ct, position);
19817         if (typeof(this.combo.width) != 'undefined') {
19818             this.combo.onResize(this.combo.width,0);
19819         }
19820         
19821         this.combo.initEvents();
19822         
19823         // assigned so form know we need to do this..
19824         this.store          = this.combo.store;
19825         this.valueField     = this.combo.valueField;
19826         this.displayField   = this.combo.displayField ;
19827         
19828         
19829         this.combo.wrap.addClass('x-cbarray-grp');
19830         
19831         var cbwrap = this.combo.wrap.createChild(
19832             {tag: 'div', cls: 'x-cbarray-cb'},
19833             this.combo.el.dom
19834         );
19835         
19836              
19837         this.hiddenEl = this.combo.wrap.createChild({
19838             tag: 'input',  type:'hidden' , name: this.hiddenName, value : ''
19839         });
19840         this.el = this.combo.wrap.createChild({
19841             tag: 'input',  type:'hidden' , name: this.name, value : ''
19842         });
19843          //   this.el.dom.removeAttribute("name");
19844         
19845         
19846         this.outerWrap = this.combo.wrap;
19847         this.wrap = cbwrap;
19848         
19849         this.outerWrap.setWidth(this.width);
19850         this.outerWrap.dom.removeChild(this.el.dom);
19851         
19852         this.wrap.dom.appendChild(this.el.dom);
19853         this.outerWrap.dom.removeChild(this.combo.trigger.dom);
19854         this.combo.wrap.dom.appendChild(this.combo.trigger.dom);
19855         
19856         this.combo.trigger.setStyle('position','relative');
19857         this.combo.trigger.setStyle('left', '0px');
19858         this.combo.trigger.setStyle('top', '2px');
19859         
19860         this.combo.el.setStyle('vertical-align', 'text-bottom');
19861         
19862         //this.trigger.setStyle('vertical-align', 'top');
19863         
19864         // this should use the code from combo really... on('add' ....)
19865         if (this.adder) {
19866             
19867         
19868             this.adder = this.outerWrap.createChild(
19869                 {tag: 'img', src: Roo.BLANK_IMAGE_URL, cls: 'x-form-adder', style: 'margin-left:2px'});  
19870             var _t = this;
19871             this.adder.on('click', function(e) {
19872                 _t.fireEvent('adderclick', this, e);
19873             }, _t);
19874         }
19875         //var _t = this;
19876         //this.adder.on('click', this.onAddClick, _t);
19877         
19878         
19879         this.combo.on('select', function(cb, rec, ix) {
19880             this.addItem(rec.data);
19881             
19882             cb.setValue('');
19883             cb.el.dom.value = '';
19884             //cb.lastData = rec.data;
19885             // add to list
19886             
19887         }, this);
19888         
19889         
19890     },
19891     
19892     
19893     getName: function()
19894     {
19895         // returns hidden if it's set..
19896         if (!this.rendered) {return ''};
19897         return  this.hiddenName ? this.hiddenName : this.name;
19898         
19899     },
19900     
19901     
19902     onResize: function(w, h){
19903         
19904         return;
19905         // not sure if this is needed..
19906         //this.combo.onResize(w,h);
19907         
19908         if(typeof w != 'number'){
19909             // we do not handle it!?!?
19910             return;
19911         }
19912         var tw = this.combo.trigger.getWidth();
19913         tw += this.addicon ? this.addicon.getWidth() : 0;
19914         tw += this.editicon ? this.editicon.getWidth() : 0;
19915         var x = w - tw;
19916         this.combo.el.setWidth( this.combo.adjustWidth('input', x));
19917             
19918         this.combo.trigger.setStyle('left', '0px');
19919         
19920         if(this.list && this.listWidth === undefined){
19921             var lw = Math.max(x + this.combo.trigger.getWidth(), this.combo.minListWidth);
19922             this.list.setWidth(lw);
19923             this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
19924         }
19925         
19926     
19927         
19928     },
19929     
19930     addItem: function(rec)
19931     {
19932         var valueField = this.combo.valueField;
19933         var displayField = this.combo.displayField;
19934         
19935         if (this.items.indexOfKey(rec[valueField]) > -1) {
19936             //console.log("GOT " + rec.data.id);
19937             return;
19938         }
19939         
19940         var x = new Roo.form.ComboBoxArray.Item({
19941             //id : rec[this.idField],
19942             data : rec,
19943             displayField : displayField ,
19944             tipField : displayField ,
19945             cb : this
19946         });
19947         // use the 
19948         this.items.add(rec[valueField],x);
19949         // add it before the element..
19950         this.updateHiddenEl();
19951         x.render(this.outerWrap, this.wrap.dom);
19952         // add the image handler..
19953     },
19954     
19955     updateHiddenEl : function()
19956     {
19957         this.validate();
19958         if (!this.hiddenEl) {
19959             return;
19960         }
19961         var ar = [];
19962         var idField = this.combo.valueField;
19963         
19964         this.items.each(function(f) {
19965             ar.push(f.data[idField]);
19966         });
19967         this.hiddenEl.dom.value = ar.join(',');
19968         this.validate();
19969     },
19970     
19971     reset : function()
19972     {
19973         this.items.clear();
19974         
19975         Roo.each(this.outerWrap.select('.x-cbarray-item', true).elements, function(el){
19976            el.remove();
19977         });
19978         
19979         this.el.dom.value = '';
19980         if (this.hiddenEl) {
19981             this.hiddenEl.dom.value = '';
19982         }
19983         
19984     },
19985     getValue: function()
19986     {
19987         return this.hiddenEl ? this.hiddenEl.dom.value : '';
19988     },
19989     setValue: function(v) // not a valid action - must use addItems..
19990     {
19991         
19992         this.reset();
19993          
19994         if (this.store.isLocal && (typeof(v) == 'string')) {
19995             // then we can use the store to find the values..
19996             // comma seperated at present.. this needs to allow JSON based encoding..
19997             this.hiddenEl.value  = v;
19998             var v_ar = [];
19999             Roo.each(v.split(','), function(k) {
20000                 Roo.log("CHECK " + this.valueField + ',' + k);
20001                 var li = this.store.query(this.valueField, k);
20002                 if (!li.length) {
20003                     return;
20004                 }
20005                 var add = {};
20006                 add[this.valueField] = k;
20007                 add[this.displayField] = li.item(0).data[this.displayField];
20008                 
20009                 this.addItem(add);
20010             }, this) 
20011              
20012         }
20013         if (typeof(v) == 'object' ) {
20014             // then let's assume it's an array of objects..
20015             Roo.each(v, function(l) {
20016                 this.addItem(l);
20017             }, this);
20018              
20019         }
20020         
20021         
20022     },
20023     setFromData: function(v)
20024     {
20025         // this recieves an object, if setValues is called.
20026         this.reset();
20027         this.el.dom.value = v[this.displayField];
20028         this.hiddenEl.dom.value = v[this.valueField];
20029         if (typeof(v[this.valueField]) != 'string' || !v[this.valueField].length) {
20030             return;
20031         }
20032         var kv = v[this.valueField];
20033         var dv = v[this.displayField];
20034         kv = typeof(kv) != 'string' ? '' : kv;
20035         dv = typeof(dv) != 'string' ? '' : dv;
20036         
20037         
20038         var keys = kv.split(',');
20039         var display = dv.split(',');
20040         for (var i = 0 ; i < keys.length; i++) {
20041             
20042             add = {};
20043             add[this.valueField] = keys[i];
20044             add[this.displayField] = display[i];
20045             this.addItem(add);
20046         }
20047       
20048         
20049     },
20050     
20051     /**
20052      * Validates the combox array value
20053      * @return {Boolean} True if the value is valid, else false
20054      */
20055     validate : function(){
20056         if(this.disabled || this.validateValue(this.processValue(this.getValue()))){
20057             this.clearInvalid();
20058             return true;
20059         }
20060         return false;
20061     },
20062     
20063     validateValue : function(value){
20064         return Roo.form.ComboBoxArray.superclass.validateValue.call(this, this.getValue());
20065         
20066     },
20067     
20068     /*@
20069      * overide
20070      * 
20071      */
20072     isDirty : function() {
20073         if(this.disabled) {
20074             return false;
20075         }
20076         
20077         try {
20078             var d = Roo.decode(String(this.originalValue));
20079         } catch (e) {
20080             return String(this.getValue()) !== String(this.originalValue);
20081         }
20082         
20083         var originalValue = [];
20084         
20085         for (var i = 0; i < d.length; i++){
20086             originalValue.push(d[i][this.valueField]);
20087         }
20088         
20089         return String(this.getValue()) !== String(originalValue.join(','));
20090         
20091     }
20092     
20093 });
20094
20095
20096
20097 /**
20098  * @class Roo.form.ComboBoxArray.Item
20099  * @extends Roo.BoxComponent
20100  * A selected item in the list
20101  *  Fred [x]  Brian [x]  [Pick another |v]
20102  * 
20103  * @constructor
20104  * Create a new item.
20105  * @param {Object} config Configuration options
20106  */
20107  
20108 Roo.form.ComboBoxArray.Item = function(config) {
20109     config.id = Roo.id();
20110     Roo.form.ComboBoxArray.Item.superclass.constructor.call(this, config);
20111 }
20112
20113 Roo.extend(Roo.form.ComboBoxArray.Item, Roo.BoxComponent, {
20114     data : {},
20115     cb: false,
20116     displayField : false,
20117     tipField : false,
20118     
20119     
20120     defaultAutoCreate : {
20121         tag: 'div',
20122         cls: 'x-cbarray-item',
20123         cn : [ 
20124             { tag: 'div' },
20125             {
20126                 tag: 'img',
20127                 width:16,
20128                 height : 16,
20129                 src : Roo.BLANK_IMAGE_URL ,
20130                 align: 'center'
20131             }
20132         ]
20133         
20134     },
20135     
20136  
20137     onRender : function(ct, position)
20138     {
20139         Roo.form.Field.superclass.onRender.call(this, ct, position);
20140         
20141         if(!this.el){
20142             var cfg = this.getAutoCreate();
20143             this.el = ct.createChild(cfg, position);
20144         }
20145         
20146         this.el.child('img').dom.setAttribute('src', Roo.BLANK_IMAGE_URL);
20147         
20148         this.el.child('div').dom.innerHTML = this.cb.renderer ? 
20149             this.cb.renderer(this.data) :
20150             String.format('{0}',this.data[this.displayField]);
20151         
20152             
20153         this.el.child('div').dom.setAttribute('qtip',
20154                         String.format('{0}',this.data[this.tipField])
20155         );
20156         
20157         this.el.child('img').on('click', this.remove, this);
20158         
20159     },
20160    
20161     remove : function()
20162     {
20163         if(this.cb.disabled){
20164             return;
20165         }
20166         
20167         if(false !== this.cb.fireEvent('beforeremove', this.cb, this)){
20168             this.cb.items.remove(this);
20169             this.el.child('img').un('click', this.remove, this);
20170             this.el.remove();
20171             this.cb.updateHiddenEl();
20172
20173             this.cb.fireEvent('remove', this.cb, this);
20174         }
20175         
20176     }
20177 });/*
20178  * Based on:
20179  * Ext JS Library 1.1.1
20180  * Copyright(c) 2006-2007, Ext JS, LLC.
20181  *
20182  * Originally Released Under LGPL - original licence link has changed is not relivant.
20183  *
20184  * Fork - LGPL
20185  * <script type="text/javascript">
20186  */
20187 /**
20188  * @class Roo.form.Checkbox
20189  * @extends Roo.form.Field
20190  * Single checkbox field.  Can be used as a direct replacement for traditional checkbox fields.
20191  * @constructor
20192  * Creates a new Checkbox
20193  * @param {Object} config Configuration options
20194  */
20195 Roo.form.Checkbox = function(config){
20196     Roo.form.Checkbox.superclass.constructor.call(this, config);
20197     this.addEvents({
20198         /**
20199          * @event check
20200          * Fires when the checkbox is checked or unchecked.
20201              * @param {Roo.form.Checkbox} this This checkbox
20202              * @param {Boolean} checked The new checked value
20203              */
20204         check : true
20205     });
20206 };
20207
20208 Roo.extend(Roo.form.Checkbox, Roo.form.Field,  {
20209     /**
20210      * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
20211      */
20212     focusClass : undefined,
20213     /**
20214      * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to "x-form-field")
20215      */
20216     fieldClass: "x-form-field",
20217     /**
20218      * @cfg {Boolean} checked True if the the checkbox should render already checked (defaults to false)
20219      */
20220     checked: false,
20221     /**
20222      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
20223      * {tag: "input", type: "checkbox", autocomplete: "off"})
20224      */
20225     defaultAutoCreate : { tag: "input", type: 'hidden', autocomplete: "off"},
20226     /**
20227      * @cfg {String} boxLabel The text that appears beside the checkbox
20228      */
20229     boxLabel : "",
20230     /**
20231      * @cfg {String} inputValue The value that should go into the generated input element's value attribute
20232      */  
20233     inputValue : '1',
20234     /**
20235      * @cfg {String} valueOff The value that should go into the generated input element's value when unchecked.
20236      */
20237      valueOff: '0', // value when not checked..
20238
20239     actionMode : 'viewEl', 
20240     //
20241     // private
20242     itemCls : 'x-menu-check-item x-form-item',
20243     groupClass : 'x-menu-group-item',
20244     inputType : 'hidden',
20245     
20246     
20247     inSetChecked: false, // check that we are not calling self...
20248     
20249     inputElement: false, // real input element?
20250     basedOn: false, // ????
20251     
20252     isFormField: true, // not sure where this is needed!!!!
20253
20254     onResize : function(){
20255         Roo.form.Checkbox.superclass.onResize.apply(this, arguments);
20256         if(!this.boxLabel){
20257             this.el.alignTo(this.wrap, 'c-c');
20258         }
20259     },
20260
20261     initEvents : function(){
20262         Roo.form.Checkbox.superclass.initEvents.call(this);
20263         this.el.on("click", this.onClick,  this);
20264         this.el.on("change", this.onClick,  this);
20265     },
20266
20267
20268     getResizeEl : function(){
20269         return this.wrap;
20270     },
20271
20272     getPositionEl : function(){
20273         return this.wrap;
20274     },
20275
20276     // private
20277     onRender : function(ct, position){
20278         Roo.form.Checkbox.superclass.onRender.call(this, ct, position);
20279         /*
20280         if(this.inputValue !== undefined){
20281             this.el.dom.value = this.inputValue;
20282         }
20283         */
20284         //this.wrap = this.el.wrap({cls: "x-form-check-wrap"});
20285         this.wrap = this.el.wrap({cls: 'x-menu-check-item '});
20286         var viewEl = this.wrap.createChild({ 
20287             tag: 'img', cls: 'x-menu-item-icon', style: 'margin: 0px;' ,src : Roo.BLANK_IMAGE_URL });
20288         this.viewEl = viewEl;   
20289         this.wrap.on('click', this.onClick,  this); 
20290         
20291         this.el.on('DOMAttrModified', this.setFromHidden,  this); //ff
20292         this.el.on('propertychange', this.setFromHidden,  this);  //ie
20293         
20294         
20295         
20296         if(this.boxLabel){
20297             this.wrap.createChild({tag: 'label', htmlFor: this.el.id, cls: 'x-form-cb-label', html: this.boxLabel});
20298         //    viewEl.on('click', this.onClick,  this); 
20299         }
20300         //if(this.checked){
20301             this.setChecked(this.checked);
20302         //}else{
20303             //this.checked = this.el.dom;
20304         //}
20305
20306     },
20307
20308     // private
20309     initValue : Roo.emptyFn,
20310
20311     /**
20312      * Returns the checked state of the checkbox.
20313      * @return {Boolean} True if checked, else false
20314      */
20315     getValue : function(){
20316         if(this.el){
20317             return String(this.el.dom.value) == String(this.inputValue ) ? this.inputValue : this.valueOff;
20318         }
20319         return this.valueOff;
20320         
20321     },
20322
20323         // private
20324     onClick : function(){ 
20325         if (this.disabled) {
20326             return;
20327         }
20328         this.setChecked(!this.checked);
20329
20330         //if(this.el.dom.checked != this.checked){
20331         //    this.setValue(this.el.dom.checked);
20332        // }
20333     },
20334
20335     /**
20336      * Sets the checked state of the checkbox.
20337      * On is always based on a string comparison between inputValue and the param.
20338      * @param {Boolean/String} value - the value to set 
20339      * @param {Boolean/String} suppressEvent - whether to suppress the checkchange event.
20340      */
20341     setValue : function(v,suppressEvent){
20342         
20343         
20344         //this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');
20345         //if(this.el && this.el.dom){
20346         //    this.el.dom.checked = this.checked;
20347         //    this.el.dom.defaultChecked = this.checked;
20348         //}
20349         this.setChecked(String(v) === String(this.inputValue), suppressEvent);
20350         //this.fireEvent("check", this, this.checked);
20351     },
20352     // private..
20353     setChecked : function(state,suppressEvent)
20354     {
20355         if (this.inSetChecked) {
20356             this.checked = state;
20357             return;
20358         }
20359         
20360     
20361         if(this.wrap){
20362             this.wrap[state ? 'addClass' : 'removeClass']('x-menu-item-checked');
20363         }
20364         this.checked = state;
20365         if(suppressEvent !== true){
20366             this.fireEvent('check', this, state);
20367         }
20368         this.inSetChecked = true;
20369         this.el.dom.value = state ? this.inputValue : this.valueOff;
20370         this.inSetChecked = false;
20371         
20372     },
20373     // handle setting of hidden value by some other method!!?!?
20374     setFromHidden: function()
20375     {
20376         if(!this.el){
20377             return;
20378         }
20379         //console.log("SET FROM HIDDEN");
20380         //alert('setFrom hidden');
20381         this.setValue(this.el.dom.value);
20382     },
20383     
20384     onDestroy : function()
20385     {
20386         if(this.viewEl){
20387             Roo.get(this.viewEl).remove();
20388         }
20389          
20390         Roo.form.Checkbox.superclass.onDestroy.call(this);
20391     },
20392     
20393     setBoxLabel : function(str)
20394     {
20395         this.wrap.select('.x-form-cb-label', true).first().dom.innerHTML = str;
20396     }
20397
20398 });/*
20399  * Based on:
20400  * Ext JS Library 1.1.1
20401  * Copyright(c) 2006-2007, Ext JS, LLC.
20402  *
20403  * Originally Released Under LGPL - original licence link has changed is not relivant.
20404  *
20405  * Fork - LGPL
20406  * <script type="text/javascript">
20407  */
20408  
20409 /**
20410  * @class Roo.form.Radio
20411  * @extends Roo.form.Checkbox
20412  * Single radio field.  Same as Checkbox, but provided as a convenience for automatically setting the input type.
20413  * Radio grouping is handled automatically by the browser if you give each radio in a group the same name.
20414  * @constructor
20415  * Creates a new Radio
20416  * @param {Object} config Configuration options
20417  */
20418 Roo.form.Radio = function(){
20419     Roo.form.Radio.superclass.constructor.apply(this, arguments);
20420 };
20421 Roo.extend(Roo.form.Radio, Roo.form.Checkbox, {
20422     inputType: 'radio',
20423
20424     /**
20425      * If this radio is part of a group, it will return the selected value
20426      * @return {String}
20427      */
20428     getGroupValue : function(){
20429         return this.el.up('form').child('input[name='+this.el.dom.name+']:checked', true).value;
20430     },
20431     
20432     
20433     onRender : function(ct, position){
20434         Roo.form.Checkbox.superclass.onRender.call(this, ct, position);
20435         
20436         if(this.inputValue !== undefined){
20437             this.el.dom.value = this.inputValue;
20438         }
20439          
20440         this.wrap = this.el.wrap({cls: "x-form-check-wrap"});
20441         //this.wrap = this.el.wrap({cls: 'x-menu-check-item '});
20442         //var viewEl = this.wrap.createChild({ 
20443         //    tag: 'img', cls: 'x-menu-item-icon', style: 'margin: 0px;' ,src : Roo.BLANK_IMAGE_URL });
20444         //this.viewEl = viewEl;   
20445         //this.wrap.on('click', this.onClick,  this); 
20446         
20447         //this.el.on('DOMAttrModified', this.setFromHidden,  this); //ff
20448         //this.el.on('propertychange', this.setFromHidden,  this);  //ie
20449         
20450         
20451         
20452         if(this.boxLabel){
20453             this.wrap.createChild({tag: 'label', htmlFor: this.el.id, cls: 'x-form-cb-label', html: this.boxLabel});
20454         //    viewEl.on('click', this.onClick,  this); 
20455         }
20456          if(this.checked){
20457             this.el.dom.checked =   'checked' ;
20458         }
20459          
20460     } 
20461     
20462     
20463 });//<script type="text/javascript">
20464
20465 /*
20466  * Based  Ext JS Library 1.1.1
20467  * Copyright(c) 2006-2007, Ext JS, LLC.
20468  * LGPL
20469  *
20470  */
20471  
20472 /**
20473  * @class Roo.HtmlEditorCore
20474  * @extends Roo.Component
20475  * Provides a the editing component for the HTML editors in Roo. (bootstrap and Roo.form)
20476  *
20477  * any element that has display set to 'none' can cause problems in Safari and Firefox.<br/><br/>
20478  */
20479
20480 Roo.HtmlEditorCore = function(config){
20481     
20482     
20483     Roo.HtmlEditorCore.superclass.constructor.call(this, config);
20484     
20485     
20486     this.addEvents({
20487         /**
20488          * @event initialize
20489          * Fires when the editor is fully initialized (including the iframe)
20490          * @param {Roo.HtmlEditorCore} this
20491          */
20492         initialize: true,
20493         /**
20494          * @event activate
20495          * Fires when the editor is first receives the focus. Any insertion must wait
20496          * until after this event.
20497          * @param {Roo.HtmlEditorCore} this
20498          */
20499         activate: true,
20500          /**
20501          * @event beforesync
20502          * Fires before the textarea is updated with content from the editor iframe. Return false
20503          * to cancel the sync.
20504          * @param {Roo.HtmlEditorCore} this
20505          * @param {String} html
20506          */
20507         beforesync: true,
20508          /**
20509          * @event beforepush
20510          * Fires before the iframe editor is updated with content from the textarea. Return false
20511          * to cancel the push.
20512          * @param {Roo.HtmlEditorCore} this
20513          * @param {String} html
20514          */
20515         beforepush: true,
20516          /**
20517          * @event sync
20518          * Fires when the textarea is updated with content from the editor iframe.
20519          * @param {Roo.HtmlEditorCore} this
20520          * @param {String} html
20521          */
20522         sync: true,
20523          /**
20524          * @event push
20525          * Fires when the iframe editor is updated with content from the textarea.
20526          * @param {Roo.HtmlEditorCore} this
20527          * @param {String} html
20528          */
20529         push: true,
20530         
20531         /**
20532          * @event editorevent
20533          * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
20534          * @param {Roo.HtmlEditorCore} this
20535          */
20536         editorevent: true
20537         
20538     });
20539     
20540     // at this point this.owner is set, so we can start working out the whitelisted / blacklisted elements
20541     
20542     // defaults : white / black...
20543     this.applyBlacklists();
20544     
20545     
20546     
20547 };
20548
20549
20550 Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
20551
20552
20553      /**
20554      * @cfg {Roo.form.HtmlEditor|Roo.bootstrap.HtmlEditor} the owner field 
20555      */
20556     
20557     owner : false,
20558     
20559      /**
20560      * @cfg {String} resizable  's' or 'se' or 'e' - wrapps the element in a
20561      *                        Roo.resizable.
20562      */
20563     resizable : false,
20564      /**
20565      * @cfg {Number} height (in pixels)
20566      */   
20567     height: 300,
20568    /**
20569      * @cfg {Number} width (in pixels)
20570      */   
20571     width: 500,
20572     
20573     /**
20574      * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets.
20575      * 
20576      */
20577     stylesheets: false,
20578     
20579     // id of frame..
20580     frameId: false,
20581     
20582     // private properties
20583     validationEvent : false,
20584     deferHeight: true,
20585     initialized : false,
20586     activated : false,
20587     sourceEditMode : false,
20588     onFocus : Roo.emptyFn,
20589     iframePad:3,
20590     hideMode:'offsets',
20591     
20592     clearUp: true,
20593     
20594     // blacklist + whitelisted elements..
20595     black: false,
20596     white: false,
20597      
20598     bodyCls : '',
20599
20600     /**
20601      * Protected method that will not generally be called directly. It
20602      * is called when the editor initializes the iframe with HTML contents. Override this method if you
20603      * want to change the initialization markup of the iframe (e.g. to add stylesheets).
20604      */
20605     getDocMarkup : function(){
20606         // body styles..
20607         var st = '';
20608         
20609         // inherit styels from page...?? 
20610         if (this.stylesheets === false) {
20611             
20612             Roo.get(document.head).select('style').each(function(node) {
20613                 st += node.dom.outerHTML || new XMLSerializer().serializeToString(node.dom);
20614             });
20615             
20616             Roo.get(document.head).select('link').each(function(node) { 
20617                 st += node.dom.outerHTML || new XMLSerializer().serializeToString(node.dom);
20618             });
20619             
20620         } else if (!this.stylesheets.length) {
20621                 // simple..
20622                 st = '<style type="text/css">' +
20623                     'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
20624                    '</style>';
20625         } else { 
20626             st = '<style type="text/css">' +
20627                     this.stylesheets +
20628                 '</style>';
20629         }
20630         
20631         st +=  '<style type="text/css">' +
20632             'IMG { cursor: pointer } ' +
20633         '</style>';
20634
20635         var cls = 'roo-htmleditor-body';
20636         
20637         if(this.bodyCls.length){
20638             cls += ' ' + this.bodyCls;
20639         }
20640         
20641         return '<html><head>' + st  +
20642             //<style type="text/css">' +
20643             //'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
20644             //'</style>' +
20645             ' </head><body class="' +  cls + '"></body></html>';
20646     },
20647
20648     // private
20649     onRender : function(ct, position)
20650     {
20651         var _t = this;
20652         //Roo.HtmlEditorCore.superclass.onRender.call(this, ct, position);
20653         this.el = this.owner.inputEl ? this.owner.inputEl() : this.owner.el;
20654         
20655         
20656         this.el.dom.style.border = '0 none';
20657         this.el.dom.setAttribute('tabIndex', -1);
20658         this.el.addClass('x-hidden hide');
20659         
20660         
20661         
20662         if(Roo.isIE){ // fix IE 1px bogus margin
20663             this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')
20664         }
20665        
20666         
20667         this.frameId = Roo.id();
20668         
20669          
20670         
20671         var iframe = this.owner.wrap.createChild({
20672             tag: 'iframe',
20673             cls: 'form-control', // bootstrap..
20674             id: this.frameId,
20675             name: this.frameId,
20676             frameBorder : 'no',
20677             'src' : Roo.SSL_SECURE_URL ? Roo.SSL_SECURE_URL  :  "javascript:false"
20678         }, this.el
20679         );
20680         
20681         
20682         this.iframe = iframe.dom;
20683
20684          this.assignDocWin();
20685         
20686         this.doc.designMode = 'on';
20687        
20688         this.doc.open();
20689         this.doc.write(this.getDocMarkup());
20690         this.doc.close();
20691
20692         
20693         var task = { // must defer to wait for browser to be ready
20694             run : function(){
20695                 //console.log("run task?" + this.doc.readyState);
20696                 this.assignDocWin();
20697                 if(this.doc.body || this.doc.readyState == 'complete'){
20698                     try {
20699                         this.doc.designMode="on";
20700                     } catch (e) {
20701                         return;
20702                     }
20703                     Roo.TaskMgr.stop(task);
20704                     this.initEditor.defer(10, this);
20705                 }
20706             },
20707             interval : 10,
20708             duration: 10000,
20709             scope: this
20710         };
20711         Roo.TaskMgr.start(task);
20712
20713     },
20714
20715     // private
20716     onResize : function(w, h)
20717     {
20718          Roo.log('resize: ' +w + ',' + h );
20719         //Roo.HtmlEditorCore.superclass.onResize.apply(this, arguments);
20720         if(!this.iframe){
20721             return;
20722         }
20723         if(typeof w == 'number'){
20724             
20725             this.iframe.style.width = w + 'px';
20726         }
20727         if(typeof h == 'number'){
20728             
20729             this.iframe.style.height = h + 'px';
20730             if(this.doc){
20731                 (this.doc.body || this.doc.documentElement).style.height = (h - (this.iframePad*2)) + 'px';
20732             }
20733         }
20734         
20735     },
20736
20737     /**
20738      * Toggles the editor between standard and source edit mode.
20739      * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
20740      */
20741     toggleSourceEdit : function(sourceEditMode){
20742         
20743         this.sourceEditMode = sourceEditMode === true;
20744         
20745         if(this.sourceEditMode){
20746  
20747             Roo.get(this.iframe).addClass(['x-hidden','hide']);     //FIXME - what's the BS styles for these
20748             
20749         }else{
20750             Roo.get(this.iframe).removeClass(['x-hidden','hide']);
20751             //this.iframe.className = '';
20752             this.deferFocus();
20753         }
20754         //this.setSize(this.owner.wrap.getSize());
20755         //this.fireEvent('editmodechange', this, this.sourceEditMode);
20756     },
20757
20758     
20759   
20760
20761     /**
20762      * Protected method that will not generally be called directly. If you need/want
20763      * custom HTML cleanup, this is the method you should override.
20764      * @param {String} html The HTML to be cleaned
20765      * return {String} The cleaned HTML
20766      */
20767     cleanHtml : function(html){
20768         html = String(html);
20769         if(html.length > 5){
20770             if(Roo.isSafari){ // strip safari nonsense
20771                 html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');
20772             }
20773         }
20774         if(html == '&nbsp;'){
20775             html = '';
20776         }
20777         return html;
20778     },
20779
20780     /**
20781      * HTML Editor -> Textarea
20782      * Protected method that will not generally be called directly. Syncs the contents
20783      * of the editor iframe with the textarea.
20784      */
20785     syncValue : function(){
20786         if(this.initialized){
20787             var bd = (this.doc.body || this.doc.documentElement);
20788             //this.cleanUpPaste(); -- this is done else where and causes havoc..
20789             var html = bd.innerHTML;
20790             if(Roo.isSafari){
20791                 var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!
20792                 var m = bs ? bs.match(/text-align:(.*?);/i) : false;
20793                 if(m && m[1]){
20794                     html = '<div style="'+m[0]+'">' + html + '</div>';
20795                 }
20796             }
20797             html = this.cleanHtml(html);
20798             // fix up the special chars.. normaly like back quotes in word...
20799             // however we do not want to do this with chinese..
20800             html = html.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]|[\u0080-\uFFFF]/g, function(match) {
20801                 
20802                 var cc = match.charCodeAt();
20803
20804                 // Get the character value, handling surrogate pairs
20805                 if (match.length == 2) {
20806                     // It's a surrogate pair, calculate the Unicode code point
20807                     var high = match.charCodeAt(0) - 0xD800;
20808                     var low  = match.charCodeAt(1) - 0xDC00;
20809                     cc = (high * 0x400) + low + 0x10000;
20810                 }  else if (
20811                     (cc >= 0x4E00 && cc < 0xA000 ) ||
20812                     (cc >= 0x3400 && cc < 0x4E00 ) ||
20813                     (cc >= 0xf900 && cc < 0xfb00 )
20814                 ) {
20815                         return match;
20816                 }  
20817          
20818                 // No, use a numeric entity. Here we brazenly (and possibly mistakenly)
20819                 return "&#" + cc + ";";
20820                 
20821                 
20822             });
20823             
20824             
20825              
20826             if(this.owner.fireEvent('beforesync', this, html) !== false){
20827                 this.el.dom.value = html;
20828                 this.owner.fireEvent('sync', this, html);
20829             }
20830         }
20831     },
20832
20833     /**
20834      * Protected method that will not generally be called directly. Pushes the value of the textarea
20835      * into the iframe editor.
20836      */
20837     pushValue : function(){
20838         if(this.initialized){
20839             var v = this.el.dom.value.trim();
20840             
20841 //            if(v.length < 1){
20842 //                v = '&#160;';
20843 //            }
20844             
20845             if(this.owner.fireEvent('beforepush', this, v) !== false){
20846                 var d = (this.doc.body || this.doc.documentElement);
20847                 d.innerHTML = v;
20848                 this.cleanUpPaste();
20849                 this.el.dom.value = d.innerHTML;
20850                 this.owner.fireEvent('push', this, v);
20851             }
20852         }
20853     },
20854
20855     // private
20856     deferFocus : function(){
20857         this.focus.defer(10, this);
20858     },
20859
20860     // doc'ed in Field
20861     focus : function(){
20862         if(this.win && !this.sourceEditMode){
20863             this.win.focus();
20864         }else{
20865             this.el.focus();
20866         }
20867     },
20868     
20869     assignDocWin: function()
20870     {
20871         var iframe = this.iframe;
20872         
20873          if(Roo.isIE){
20874             this.doc = iframe.contentWindow.document;
20875             this.win = iframe.contentWindow;
20876         } else {
20877 //            if (!Roo.get(this.frameId)) {
20878 //                return;
20879 //            }
20880 //            this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
20881 //            this.win = Roo.get(this.frameId).dom.contentWindow;
20882             
20883             if (!Roo.get(this.frameId) && !iframe.contentDocument) {
20884                 return;
20885             }
20886             
20887             this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
20888             this.win = (iframe.contentWindow || Roo.get(this.frameId).dom.contentWindow);
20889         }
20890     },
20891     
20892     // private
20893     initEditor : function(){
20894         //console.log("INIT EDITOR");
20895         this.assignDocWin();
20896         
20897         
20898         
20899         this.doc.designMode="on";
20900         this.doc.open();
20901         this.doc.write(this.getDocMarkup());
20902         this.doc.close();
20903         
20904         var dbody = (this.doc.body || this.doc.documentElement);
20905         //var ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat');
20906         // this copies styles from the containing element into thsi one..
20907         // not sure why we need all of this..
20908         //var ss = this.el.getStyles('font-size', 'background-image', 'background-repeat');
20909         
20910         //var ss = this.el.getStyles( 'background-image', 'background-repeat');
20911         //ss['background-attachment'] = 'fixed'; // w3c
20912         dbody.bgProperties = 'fixed'; // ie
20913         //Roo.DomHelper.applyStyles(dbody, ss);
20914         Roo.EventManager.on(this.doc, {
20915             //'mousedown': this.onEditorEvent,
20916             'mouseup': this.onEditorEvent,
20917             'dblclick': this.onEditorEvent,
20918             'click': this.onEditorEvent,
20919             'keyup': this.onEditorEvent,
20920             buffer:100,
20921             scope: this
20922         });
20923         if(Roo.isGecko){
20924             Roo.EventManager.on(this.doc, 'keypress', this.mozKeyPress, this);
20925         }
20926         if(Roo.isIE || Roo.isSafari || Roo.isOpera){
20927             Roo.EventManager.on(this.doc, 'keydown', this.fixKeys, this);
20928         }
20929         this.initialized = true;
20930
20931         this.owner.fireEvent('initialize', this);
20932         this.pushValue();
20933     },
20934
20935     // private
20936     onDestroy : function(){
20937         
20938         
20939         
20940         if(this.rendered){
20941             
20942             //for (var i =0; i < this.toolbars.length;i++) {
20943             //    // fixme - ask toolbars for heights?
20944             //    this.toolbars[i].onDestroy();
20945            // }
20946             
20947             //this.wrap.dom.innerHTML = '';
20948             //this.wrap.remove();
20949         }
20950     },
20951
20952     // private
20953     onFirstFocus : function(){
20954         
20955         this.assignDocWin();
20956         
20957         
20958         this.activated = true;
20959          
20960     
20961         if(Roo.isGecko){ // prevent silly gecko errors
20962             this.win.focus();
20963             var s = this.win.getSelection();
20964             if(!s.focusNode || s.focusNode.nodeType != 3){
20965                 var r = s.getRangeAt(0);
20966                 r.selectNodeContents((this.doc.body || this.doc.documentElement));
20967                 r.collapse(true);
20968                 this.deferFocus();
20969             }
20970             try{
20971                 this.execCmd('useCSS', true);
20972                 this.execCmd('styleWithCSS', false);
20973             }catch(e){}
20974         }
20975         this.owner.fireEvent('activate', this);
20976     },
20977
20978     // private
20979     adjustFont: function(btn){
20980         var adjust = btn.cmd == 'increasefontsize' ? 1 : -1;
20981         //if(Roo.isSafari){ // safari
20982         //    adjust *= 2;
20983        // }
20984         var v = parseInt(this.doc.queryCommandValue('FontSize')|| 3, 10);
20985         if(Roo.isSafari){ // safari
20986             var sm = { 10 : 1, 13: 2, 16:3, 18:4, 24: 5, 32:6, 48: 7 };
20987             v =  (v < 10) ? 10 : v;
20988             v =  (v > 48) ? 48 : v;
20989             v = typeof(sm[v]) == 'undefined' ? 1 : sm[v];
20990             
20991         }
20992         
20993         
20994         v = Math.max(1, v+adjust);
20995         
20996         this.execCmd('FontSize', v  );
20997     },
20998
20999     onEditorEvent : function(e)
21000     {
21001         this.owner.fireEvent('editorevent', this, e);
21002       //  this.updateToolbar();
21003         this.syncValue(); //we can not sync so often.. sync cleans, so this breaks stuff
21004     },
21005
21006     insertTag : function(tg)
21007     {
21008         // could be a bit smarter... -> wrap the current selected tRoo..
21009         if (tg.toLowerCase() == 'span' ||
21010             tg.toLowerCase() == 'code' ||
21011             tg.toLowerCase() == 'sup' ||
21012             tg.toLowerCase() == 'sub' 
21013             ) {
21014             
21015             range = this.createRange(this.getSelection());
21016             var wrappingNode = this.doc.createElement(tg.toLowerCase());
21017             wrappingNode.appendChild(range.extractContents());
21018             range.insertNode(wrappingNode);
21019
21020             return;
21021             
21022             
21023             
21024         }
21025         this.execCmd("formatblock",   tg);
21026         
21027     },
21028     
21029     insertText : function(txt)
21030     {
21031         
21032         
21033         var range = this.createRange();
21034         range.deleteContents();
21035                //alert(Sender.getAttribute('label'));
21036                
21037         range.insertNode(this.doc.createTextNode(txt));
21038     } ,
21039     
21040      
21041
21042     /**
21043      * Executes a Midas editor command on the editor document and performs necessary focus and
21044      * toolbar updates. <b>This should only be called after the editor is initialized.</b>
21045      * @param {String} cmd The Midas command
21046      * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
21047      */
21048     relayCmd : function(cmd, value){
21049         this.win.focus();
21050         this.execCmd(cmd, value);
21051         this.owner.fireEvent('editorevent', this);
21052         //this.updateToolbar();
21053         this.owner.deferFocus();
21054     },
21055
21056     /**
21057      * Executes a Midas editor command directly on the editor document.
21058      * For visual commands, you should use {@link #relayCmd} instead.
21059      * <b>This should only be called after the editor is initialized.</b>
21060      * @param {String} cmd The Midas command
21061      * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
21062      */
21063     execCmd : function(cmd, value){
21064         this.doc.execCommand(cmd, false, value === undefined ? null : value);
21065         this.syncValue();
21066     },
21067  
21068  
21069    
21070     /**
21071      * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated
21072      * to insert tRoo.
21073      * @param {String} text | dom node.. 
21074      */
21075     insertAtCursor : function(text)
21076     {
21077         
21078         if(!this.activated){
21079             return;
21080         }
21081         /*
21082         if(Roo.isIE){
21083             this.win.focus();
21084             var r = this.doc.selection.createRange();
21085             if(r){
21086                 r.collapse(true);
21087                 r.pasteHTML(text);
21088                 this.syncValue();
21089                 this.deferFocus();
21090             
21091             }
21092             return;
21093         }
21094         */
21095         if(Roo.isGecko || Roo.isOpera || Roo.isSafari){
21096             this.win.focus();
21097             
21098             
21099             // from jquery ui (MIT licenced)
21100             var range, node;
21101             var win = this.win;
21102             
21103             if (win.getSelection && win.getSelection().getRangeAt) {
21104                 range = win.getSelection().getRangeAt(0);
21105                 node = typeof(text) == 'string' ? range.createContextualFragment(text) : text;
21106                 range.insertNode(node);
21107             } else if (win.document.selection && win.document.selection.createRange) {
21108                 // no firefox support
21109                 var txt = typeof(text) == 'string' ? text : text.outerHTML;
21110                 win.document.selection.createRange().pasteHTML(txt);
21111             } else {
21112                 // no firefox support
21113                 var txt = typeof(text) == 'string' ? text : text.outerHTML;
21114                 this.execCmd('InsertHTML', txt);
21115             } 
21116             
21117             this.syncValue();
21118             
21119             this.deferFocus();
21120         }
21121     },
21122  // private
21123     mozKeyPress : function(e){
21124         if(e.ctrlKey){
21125             var c = e.getCharCode(), cmd;
21126           
21127             if(c > 0){
21128                 c = String.fromCharCode(c).toLowerCase();
21129                 switch(c){
21130                     case 'b':
21131                         cmd = 'bold';
21132                         break;
21133                     case 'i':
21134                         cmd = 'italic';
21135                         break;
21136                     
21137                     case 'u':
21138                         cmd = 'underline';
21139                         break;
21140                     
21141                     case 'v':
21142                         this.cleanUpPaste.defer(100, this);
21143                         return;
21144                         
21145                 }
21146                 if(cmd){
21147                     this.win.focus();
21148                     this.execCmd(cmd);
21149                     this.deferFocus();
21150                     e.preventDefault();
21151                 }
21152                 
21153             }
21154         }
21155     },
21156
21157     // private
21158     fixKeys : function(){ // load time branching for fastest keydown performance
21159         if(Roo.isIE){
21160             return function(e){
21161                 var k = e.getKey(), r;
21162                 if(k == e.TAB){
21163                     e.stopEvent();
21164                     r = this.doc.selection.createRange();
21165                     if(r){
21166                         r.collapse(true);
21167                         r.pasteHTML('&#160;&#160;&#160;&#160;');
21168                         this.deferFocus();
21169                     }
21170                     return;
21171                 }
21172                 
21173                 if(k == e.ENTER){
21174                     r = this.doc.selection.createRange();
21175                     if(r){
21176                         var target = r.parentElement();
21177                         if(!target || target.tagName.toLowerCase() != 'li'){
21178                             e.stopEvent();
21179                             r.pasteHTML('<br />');
21180                             r.collapse(false);
21181                             r.select();
21182                         }
21183                     }
21184                 }
21185                 if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
21186                     this.cleanUpPaste.defer(100, this);
21187                     return;
21188                 }
21189                 
21190                 
21191             };
21192         }else if(Roo.isOpera){
21193             return function(e){
21194                 var k = e.getKey();
21195                 if(k == e.TAB){
21196                     e.stopEvent();
21197                     this.win.focus();
21198                     this.execCmd('InsertHTML','&#160;&#160;&#160;&#160;');
21199                     this.deferFocus();
21200                 }
21201                 if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
21202                     this.cleanUpPaste.defer(100, this);
21203                     return;
21204                 }
21205                 
21206             };
21207         }else if(Roo.isSafari){
21208             return function(e){
21209                 var k = e.getKey();
21210                 
21211                 if(k == e.TAB){
21212                     e.stopEvent();
21213                     this.execCmd('InsertText','\t');
21214                     this.deferFocus();
21215                     return;
21216                 }
21217                if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
21218                     this.cleanUpPaste.defer(100, this);
21219                     return;
21220                 }
21221                 
21222              };
21223         }
21224     }(),
21225     
21226     getAllAncestors: function()
21227     {
21228         var p = this.getSelectedNode();
21229         var a = [];
21230         if (!p) {
21231             a.push(p); // push blank onto stack..
21232             p = this.getParentElement();
21233         }
21234         
21235         
21236         while (p && (p.nodeType == 1) && (p.tagName.toLowerCase() != 'body')) {
21237             a.push(p);
21238             p = p.parentNode;
21239         }
21240         a.push(this.doc.body);
21241         return a;
21242     },
21243     lastSel : false,
21244     lastSelNode : false,
21245     
21246     
21247     getSelection : function() 
21248     {
21249         this.assignDocWin();
21250         return Roo.isIE ? this.doc.selection : this.win.getSelection();
21251     },
21252     
21253     getSelectedNode: function() 
21254     {
21255         // this may only work on Gecko!!!
21256         
21257         // should we cache this!!!!
21258         
21259         
21260         
21261          
21262         var range = this.createRange(this.getSelection()).cloneRange();
21263         
21264         if (Roo.isIE) {
21265             var parent = range.parentElement();
21266             while (true) {
21267                 var testRange = range.duplicate();
21268                 testRange.moveToElementText(parent);
21269                 if (testRange.inRange(range)) {
21270                     break;
21271                 }
21272                 if ((parent.nodeType != 1) || (parent.tagName.toLowerCase() == 'body')) {
21273                     break;
21274                 }
21275                 parent = parent.parentElement;
21276             }
21277             return parent;
21278         }
21279         
21280         // is ancestor a text element.
21281         var ac =  range.commonAncestorContainer;
21282         if (ac.nodeType == 3) {
21283             ac = ac.parentNode;
21284         }
21285         
21286         var ar = ac.childNodes;
21287          
21288         var nodes = [];
21289         var other_nodes = [];
21290         var has_other_nodes = false;
21291         for (var i=0;i<ar.length;i++) {
21292             if ((ar[i].nodeType == 3) && (!ar[i].data.length)) { // empty text ? 
21293                 continue;
21294             }
21295             // fullly contained node.
21296             
21297             if (this.rangeIntersectsNode(range,ar[i]) && this.rangeCompareNode(range,ar[i]) == 3) {
21298                 nodes.push(ar[i]);
21299                 continue;
21300             }
21301             
21302             // probably selected..
21303             if ((ar[i].nodeType == 1) && this.rangeIntersectsNode(range,ar[i]) && (this.rangeCompareNode(range,ar[i]) > 0)) {
21304                 other_nodes.push(ar[i]);
21305                 continue;
21306             }
21307             // outer..
21308             if (!this.rangeIntersectsNode(range,ar[i])|| (this.rangeCompareNode(range,ar[i]) == 0))  {
21309                 continue;
21310             }
21311             
21312             
21313             has_other_nodes = true;
21314         }
21315         if (!nodes.length && other_nodes.length) {
21316             nodes= other_nodes;
21317         }
21318         if (has_other_nodes || !nodes.length || (nodes.length > 1)) {
21319             return false;
21320         }
21321         
21322         return nodes[0];
21323     },
21324     createRange: function(sel)
21325     {
21326         // this has strange effects when using with 
21327         // top toolbar - not sure if it's a great idea.
21328         //this.editor.contentWindow.focus();
21329         if (typeof sel != "undefined") {
21330             try {
21331                 return sel.getRangeAt ? sel.getRangeAt(0) : sel.createRange();
21332             } catch(e) {
21333                 return this.doc.createRange();
21334             }
21335         } else {
21336             return this.doc.createRange();
21337         }
21338     },
21339     getParentElement: function()
21340     {
21341         
21342         this.assignDocWin();
21343         var sel = Roo.isIE ? this.doc.selection : this.win.getSelection();
21344         
21345         var range = this.createRange(sel);
21346          
21347         try {
21348             var p = range.commonAncestorContainer;
21349             while (p.nodeType == 3) { // text node
21350                 p = p.parentNode;
21351             }
21352             return p;
21353         } catch (e) {
21354             return null;
21355         }
21356     
21357     },
21358     /***
21359      *
21360      * Range intersection.. the hard stuff...
21361      *  '-1' = before
21362      *  '0' = hits..
21363      *  '1' = after.
21364      *         [ -- selected range --- ]
21365      *   [fail]                        [fail]
21366      *
21367      *    basically..
21368      *      if end is before start or  hits it. fail.
21369      *      if start is after end or hits it fail.
21370      *
21371      *   if either hits (but other is outside. - then it's not 
21372      *   
21373      *    
21374      **/
21375     
21376     
21377     // @see http://www.thismuchiknow.co.uk/?p=64.
21378     rangeIntersectsNode : function(range, node)
21379     {
21380         var nodeRange = node.ownerDocument.createRange();
21381         try {
21382             nodeRange.selectNode(node);
21383         } catch (e) {
21384             nodeRange.selectNodeContents(node);
21385         }
21386     
21387         var rangeStartRange = range.cloneRange();
21388         rangeStartRange.collapse(true);
21389     
21390         var rangeEndRange = range.cloneRange();
21391         rangeEndRange.collapse(false);
21392     
21393         var nodeStartRange = nodeRange.cloneRange();
21394         nodeStartRange.collapse(true);
21395     
21396         var nodeEndRange = nodeRange.cloneRange();
21397         nodeEndRange.collapse(false);
21398     
21399         return rangeStartRange.compareBoundaryPoints(
21400                  Range.START_TO_START, nodeEndRange) == -1 &&
21401                rangeEndRange.compareBoundaryPoints(
21402                  Range.START_TO_START, nodeStartRange) == 1;
21403         
21404          
21405     },
21406     rangeCompareNode : function(range, node)
21407     {
21408         var nodeRange = node.ownerDocument.createRange();
21409         try {
21410             nodeRange.selectNode(node);
21411         } catch (e) {
21412             nodeRange.selectNodeContents(node);
21413         }
21414         
21415         
21416         range.collapse(true);
21417     
21418         nodeRange.collapse(true);
21419      
21420         var ss = range.compareBoundaryPoints( Range.START_TO_START, nodeRange);
21421         var ee = range.compareBoundaryPoints(  Range.END_TO_END, nodeRange);
21422          
21423         //Roo.log(node.tagName + ': ss='+ss +', ee='+ee)
21424         
21425         var nodeIsBefore   =  ss == 1;
21426         var nodeIsAfter    = ee == -1;
21427         
21428         if (nodeIsBefore && nodeIsAfter) {
21429             return 0; // outer
21430         }
21431         if (!nodeIsBefore && nodeIsAfter) {
21432             return 1; //right trailed.
21433         }
21434         
21435         if (nodeIsBefore && !nodeIsAfter) {
21436             return 2;  // left trailed.
21437         }
21438         // fully contined.
21439         return 3;
21440     },
21441
21442     // private? - in a new class?
21443     cleanUpPaste :  function()
21444     {
21445         // cleans up the whole document..
21446         Roo.log('cleanuppaste');
21447         
21448         this.cleanUpChildren(this.doc.body);
21449         var clean = this.cleanWordChars(this.doc.body.innerHTML);
21450         if (clean != this.doc.body.innerHTML) {
21451             this.doc.body.innerHTML = clean;
21452         }
21453         
21454     },
21455     
21456     cleanWordChars : function(input) {// change the chars to hex code
21457         var he = Roo.HtmlEditorCore;
21458         
21459         var output = input;
21460         Roo.each(he.swapCodes, function(sw) { 
21461             var swapper = new RegExp("\\u" + sw[0].toString(16), "g"); // hex codes
21462             
21463             output = output.replace(swapper, sw[1]);
21464         });
21465         
21466         return output;
21467     },
21468     
21469     
21470     cleanUpChildren : function (n)
21471     {
21472         if (!n.childNodes.length) {
21473             return;
21474         }
21475         for (var i = n.childNodes.length-1; i > -1 ; i--) {
21476            this.cleanUpChild(n.childNodes[i]);
21477         }
21478     },
21479     
21480     
21481         
21482     
21483     cleanUpChild : function (node)
21484     {
21485         var ed = this;
21486         //console.log(node);
21487         if (node.nodeName == "#text") {
21488             // clean up silly Windows -- stuff?
21489             return; 
21490         }
21491         if (node.nodeName == "#comment") {
21492             node.parentNode.removeChild(node);
21493             // clean up silly Windows -- stuff?
21494             return; 
21495         }
21496         var lcname = node.tagName.toLowerCase();
21497         // we ignore whitelists... ?? = not really the way to go, but we probably have not got a full
21498         // whitelist of tags..
21499         
21500         if (this.black.indexOf(lcname) > -1 && this.clearUp ) {
21501             // remove node.
21502             node.parentNode.removeChild(node);
21503             return;
21504             
21505         }
21506         
21507         var remove_keep_children= Roo.HtmlEditorCore.remove.indexOf(node.tagName.toLowerCase()) > -1;
21508         
21509         // spans with no attributes - just remove them..
21510         if ((!node.attributes || !node.attributes.length) && lcname == 'span') { 
21511             remove_keep_children = true;
21512         }
21513         
21514         // remove <a name=....> as rendering on yahoo mailer is borked with this.
21515         // this will have to be flaged elsewhere - perhaps ablack=name... on the mailer..
21516         
21517         //if (node.tagName.toLowerCase() == 'a' && !node.hasAttribute('href')) {
21518         //    remove_keep_children = true;
21519         //}
21520         
21521         if (remove_keep_children) {
21522             this.cleanUpChildren(node);
21523             // inserts everything just before this node...
21524             while (node.childNodes.length) {
21525                 var cn = node.childNodes[0];
21526                 node.removeChild(cn);
21527                 node.parentNode.insertBefore(cn, node);
21528             }
21529             node.parentNode.removeChild(node);
21530             return;
21531         }
21532         
21533         if (!node.attributes || !node.attributes.length) {
21534             
21535           
21536             
21537             
21538             this.cleanUpChildren(node);
21539             return;
21540         }
21541         
21542         function cleanAttr(n,v)
21543         {
21544             
21545             if (v.match(/^\./) || v.match(/^\//)) {
21546                 return;
21547             }
21548             if (v.match(/^(http|https):\/\//) || v.match(/^mailto:/) || v.match(/^ftp:/)) {
21549                 return;
21550             }
21551             if (v.match(/^#/)) {
21552                 return;
21553             }
21554 //            Roo.log("(REMOVE TAG)"+ node.tagName +'.' + n + '=' + v);
21555             node.removeAttribute(n);
21556             
21557         }
21558         
21559         var cwhite = this.cwhite;
21560         var cblack = this.cblack;
21561             
21562         function cleanStyle(n,v)
21563         {
21564             if (v.match(/expression/)) { //XSS?? should we even bother..
21565                 node.removeAttribute(n);
21566                 return;
21567             }
21568             
21569             var parts = v.split(/;/);
21570             var clean = [];
21571             
21572             Roo.each(parts, function(p) {
21573                 p = p.replace(/^\s+/g,'').replace(/\s+$/g,'');
21574                 if (!p.length) {
21575                     return true;
21576                 }
21577                 var l = p.split(':').shift().replace(/\s+/g,'');
21578                 l = l.replace(/^\s+/g,'').replace(/\s+$/g,'');
21579                 
21580                 if ( cwhite.length && cblack.indexOf(l) > -1) {
21581 //                    Roo.log('(REMOVE CSS)' + node.tagName +'.' + n + ':'+l + '=' + v);
21582                     //node.removeAttribute(n);
21583                     return true;
21584                 }
21585                 //Roo.log()
21586                 // only allow 'c whitelisted system attributes'
21587                 if ( cwhite.length &&  cwhite.indexOf(l) < 0) {
21588 //                    Roo.log('(REMOVE CSS)' + node.tagName +'.' + n + ':'+l + '=' + v);
21589                     //node.removeAttribute(n);
21590                     return true;
21591                 }
21592                 
21593                 
21594                  
21595                 
21596                 clean.push(p);
21597                 return true;
21598             });
21599             if (clean.length) { 
21600                 node.setAttribute(n, clean.join(';'));
21601             } else {
21602                 node.removeAttribute(n);
21603             }
21604             
21605         }
21606         
21607         
21608         for (var i = node.attributes.length-1; i > -1 ; i--) {
21609             var a = node.attributes[i];
21610             //console.log(a);
21611             
21612             if (a.name.toLowerCase().substr(0,2)=='on')  {
21613                 node.removeAttribute(a.name);
21614                 continue;
21615             }
21616             if (Roo.HtmlEditorCore.ablack.indexOf(a.name.toLowerCase()) > -1) {
21617                 node.removeAttribute(a.name);
21618                 continue;
21619             }
21620             if (Roo.HtmlEditorCore.aclean.indexOf(a.name.toLowerCase()) > -1) {
21621                 cleanAttr(a.name,a.value); // fixme..
21622                 continue;
21623             }
21624             if (a.name == 'style') {
21625                 cleanStyle(a.name,a.value);
21626                 continue;
21627             }
21628             /// clean up MS crap..
21629             // tecnically this should be a list of valid class'es..
21630             
21631             
21632             if (a.name == 'class') {
21633                 if (a.value.match(/^Mso/)) {
21634                     node.removeAttribute('class');
21635                 }
21636                 
21637                 if (a.value.match(/^body$/)) {
21638                     node.removeAttribute('class');
21639                 }
21640                 continue;
21641             }
21642             
21643             // style cleanup!?
21644             // class cleanup?
21645             
21646         }
21647         
21648         
21649         this.cleanUpChildren(node);
21650         
21651         
21652     },
21653     
21654     /**
21655      * Clean up MS wordisms...
21656      */
21657     cleanWord : function(node)
21658     {
21659         if (!node) {
21660             this.cleanWord(this.doc.body);
21661             return;
21662         }
21663         
21664         if(
21665                 node.nodeName == 'SPAN' &&
21666                 !node.hasAttributes() &&
21667                 node.childNodes.length == 1 &&
21668                 node.firstChild.nodeName == "#text"  
21669         ) {
21670             var textNode = node.firstChild;
21671             node.removeChild(textNode);
21672             if (node.getAttribute('lang') != 'zh-CN') {   // do not space pad on chinese characters..
21673                 node.parentNode.insertBefore(node.ownerDocument.createTextNode(" "), node);
21674             }
21675             node.parentNode.insertBefore(textNode, node);
21676             if (node.getAttribute('lang') != 'zh-CN') {   // do not space pad on chinese characters..
21677                 node.parentNode.insertBefore(node.ownerDocument.createTextNode(" ") , node);
21678             }
21679             node.parentNode.removeChild(node);
21680         }
21681         
21682         if (node.nodeName == "#text") {
21683             // clean up silly Windows -- stuff?
21684             return; 
21685         }
21686         if (node.nodeName == "#comment") {
21687             node.parentNode.removeChild(node);
21688             // clean up silly Windows -- stuff?
21689             return; 
21690         }
21691         
21692         if (node.tagName.toLowerCase().match(/^(style|script|applet|embed|noframes|noscript)$/)) {
21693             node.parentNode.removeChild(node);
21694             return;
21695         }
21696         //Roo.log(node.tagName);
21697         // remove - but keep children..
21698         if (node.tagName.toLowerCase().match(/^(meta|link|\\?xml:|st1:|o:|v:|font)/)) {
21699             //Roo.log('-- removed');
21700             while (node.childNodes.length) {
21701                 var cn = node.childNodes[0];
21702                 node.removeChild(cn);
21703                 node.parentNode.insertBefore(cn, node);
21704                 // move node to parent - and clean it..
21705                 this.cleanWord(cn);
21706             }
21707             node.parentNode.removeChild(node);
21708             /// no need to iterate chidlren = it's got none..
21709             //this.iterateChildren(node, this.cleanWord);
21710             return;
21711         }
21712         // clean styles
21713         if (node.className.length) {
21714             
21715             var cn = node.className.split(/\W+/);
21716             var cna = [];
21717             Roo.each(cn, function(cls) {
21718                 if (cls.match(/Mso[a-zA-Z]+/)) {
21719                     return;
21720                 }
21721                 cna.push(cls);
21722             });
21723             node.className = cna.length ? cna.join(' ') : '';
21724             if (!cna.length) {
21725                 node.removeAttribute("class");
21726             }
21727         }
21728         
21729         if (node.hasAttribute("lang")) {
21730             node.removeAttribute("lang");
21731         }
21732         
21733         if (node.hasAttribute("style")) {
21734             
21735             var styles = node.getAttribute("style").split(";");
21736             var nstyle = [];
21737             Roo.each(styles, function(s) {
21738                 if (!s.match(/:/)) {
21739                     return;
21740                 }
21741                 var kv = s.split(":");
21742                 if (kv[0].match(/^(mso-|line|font|background|margin|padding|color)/)) {
21743                     return;
21744                 }
21745                 // what ever is left... we allow.
21746                 nstyle.push(s);
21747             });
21748             node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
21749             if (!nstyle.length) {
21750                 node.removeAttribute('style');
21751             }
21752         }
21753         this.iterateChildren(node, this.cleanWord);
21754         
21755         
21756         
21757     },
21758     /**
21759      * iterateChildren of a Node, calling fn each time, using this as the scole..
21760      * @param {DomNode} node node to iterate children of.
21761      * @param {Function} fn method of this class to call on each item.
21762      */
21763     iterateChildren : function(node, fn)
21764     {
21765         if (!node.childNodes.length) {
21766                 return;
21767         }
21768         for (var i = node.childNodes.length-1; i > -1 ; i--) {
21769            fn.call(this, node.childNodes[i])
21770         }
21771     },
21772     
21773     
21774     /**
21775      * cleanTableWidths.
21776      *
21777      * Quite often pasting from word etc.. results in tables with column and widths.
21778      * This does not work well on fluid HTML layouts - like emails. - so this code should hunt an destroy them..
21779      *
21780      */
21781     cleanTableWidths : function(node)
21782     {
21783          
21784          
21785         if (!node) {
21786             this.cleanTableWidths(this.doc.body);
21787             return;
21788         }
21789         
21790         // ignore list...
21791         if (node.nodeName == "#text" || node.nodeName == "#comment") {
21792             return; 
21793         }
21794         Roo.log(node.tagName);
21795         if (!node.tagName.toLowerCase().match(/^(table|td|tr)$/)) {
21796             this.iterateChildren(node, this.cleanTableWidths);
21797             return;
21798         }
21799         if (node.hasAttribute('width')) {
21800             node.removeAttribute('width');
21801         }
21802         
21803          
21804         if (node.hasAttribute("style")) {
21805             // pretty basic...
21806             
21807             var styles = node.getAttribute("style").split(";");
21808             var nstyle = [];
21809             Roo.each(styles, function(s) {
21810                 if (!s.match(/:/)) {
21811                     return;
21812                 }
21813                 var kv = s.split(":");
21814                 if (kv[0].match(/^\s*(width|min-width)\s*$/)) {
21815                     return;
21816                 }
21817                 // what ever is left... we allow.
21818                 nstyle.push(s);
21819             });
21820             node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
21821             if (!nstyle.length) {
21822                 node.removeAttribute('style');
21823             }
21824         }
21825         
21826         this.iterateChildren(node, this.cleanTableWidths);
21827         
21828         
21829     },
21830     
21831     
21832     
21833     
21834     domToHTML : function(currentElement, depth, nopadtext) {
21835         
21836         depth = depth || 0;
21837         nopadtext = nopadtext || false;
21838     
21839         if (!currentElement) {
21840             return this.domToHTML(this.doc.body);
21841         }
21842         
21843         //Roo.log(currentElement);
21844         var j;
21845         var allText = false;
21846         var nodeName = currentElement.nodeName;
21847         var tagName = Roo.util.Format.htmlEncode(currentElement.tagName);
21848         
21849         if  (nodeName == '#text') {
21850             
21851             return nopadtext ? currentElement.nodeValue : currentElement.nodeValue.trim();
21852         }
21853         
21854         
21855         var ret = '';
21856         if (nodeName != 'BODY') {
21857              
21858             var i = 0;
21859             // Prints the node tagName, such as <A>, <IMG>, etc
21860             if (tagName) {
21861                 var attr = [];
21862                 for(i = 0; i < currentElement.attributes.length;i++) {
21863                     // quoting?
21864                     var aname = currentElement.attributes.item(i).name;
21865                     if (!currentElement.attributes.item(i).value.length) {
21866                         continue;
21867                     }
21868                     attr.push(aname + '="' + Roo.util.Format.htmlEncode(currentElement.attributes.item(i).value) + '"' );
21869                 }
21870                 
21871                 ret = "<"+currentElement.tagName+ ( attr.length ? (' ' + attr.join(' ') ) : '') + ">";
21872             } 
21873             else {
21874                 
21875                 // eack
21876             }
21877         } else {
21878             tagName = false;
21879         }
21880         if (['IMG', 'BR', 'HR', 'INPUT'].indexOf(tagName) > -1) {
21881             return ret;
21882         }
21883         if (['PRE', 'TEXTAREA', 'TD', 'A', 'SPAN'].indexOf(tagName) > -1) { // or code?
21884             nopadtext = true;
21885         }
21886         
21887         
21888         // Traverse the tree
21889         i = 0;
21890         var currentElementChild = currentElement.childNodes.item(i);
21891         var allText = true;
21892         var innerHTML  = '';
21893         lastnode = '';
21894         while (currentElementChild) {
21895             // Formatting code (indent the tree so it looks nice on the screen)
21896             var nopad = nopadtext;
21897             if (lastnode == 'SPAN') {
21898                 nopad  = true;
21899             }
21900             // text
21901             if  (currentElementChild.nodeName == '#text') {
21902                 var toadd = Roo.util.Format.htmlEncode(currentElementChild.nodeValue);
21903                 toadd = nopadtext ? toadd : toadd.trim();
21904                 if (!nopad && toadd.length > 80) {
21905                     innerHTML  += "\n" + (new Array( depth + 1 )).join( "  "  );
21906                 }
21907                 innerHTML  += toadd;
21908                 
21909                 i++;
21910                 currentElementChild = currentElement.childNodes.item(i);
21911                 lastNode = '';
21912                 continue;
21913             }
21914             allText = false;
21915             
21916             innerHTML  += nopad ? '' : "\n" + (new Array( depth + 1 )).join( "  "  );
21917                 
21918             // Recursively traverse the tree structure of the child node
21919             innerHTML   += this.domToHTML(currentElementChild, depth+1, nopadtext);
21920             lastnode = currentElementChild.nodeName;
21921             i++;
21922             currentElementChild=currentElement.childNodes.item(i);
21923         }
21924         
21925         ret += innerHTML;
21926         
21927         if (!allText) {
21928                 // The remaining code is mostly for formatting the tree
21929             ret+= nopadtext ? '' : "\n" + (new Array( depth  )).join( "  "  );
21930         }
21931         
21932         
21933         if (tagName) {
21934             ret+= "</"+tagName+">";
21935         }
21936         return ret;
21937         
21938     },
21939         
21940     applyBlacklists : function()
21941     {
21942         var w = typeof(this.owner.white) != 'undefined' && this.owner.white ? this.owner.white  : [];
21943         var b = typeof(this.owner.black) != 'undefined' && this.owner.black ? this.owner.black :  [];
21944         
21945         this.white = [];
21946         this.black = [];
21947         Roo.each(Roo.HtmlEditorCore.white, function(tag) {
21948             if (b.indexOf(tag) > -1) {
21949                 return;
21950             }
21951             this.white.push(tag);
21952             
21953         }, this);
21954         
21955         Roo.each(w, function(tag) {
21956             if (b.indexOf(tag) > -1) {
21957                 return;
21958             }
21959             if (this.white.indexOf(tag) > -1) {
21960                 return;
21961             }
21962             this.white.push(tag);
21963             
21964         }, this);
21965         
21966         
21967         Roo.each(Roo.HtmlEditorCore.black, function(tag) {
21968             if (w.indexOf(tag) > -1) {
21969                 return;
21970             }
21971             this.black.push(tag);
21972             
21973         }, this);
21974         
21975         Roo.each(b, function(tag) {
21976             if (w.indexOf(tag) > -1) {
21977                 return;
21978             }
21979             if (this.black.indexOf(tag) > -1) {
21980                 return;
21981             }
21982             this.black.push(tag);
21983             
21984         }, this);
21985         
21986         
21987         w = typeof(this.owner.cwhite) != 'undefined' && this.owner.cwhite ? this.owner.cwhite  : [];
21988         b = typeof(this.owner.cblack) != 'undefined' && this.owner.cblack ? this.owner.cblack :  [];
21989         
21990         this.cwhite = [];
21991         this.cblack = [];
21992         Roo.each(Roo.HtmlEditorCore.cwhite, function(tag) {
21993             if (b.indexOf(tag) > -1) {
21994                 return;
21995             }
21996             this.cwhite.push(tag);
21997             
21998         }, this);
21999         
22000         Roo.each(w, function(tag) {
22001             if (b.indexOf(tag) > -1) {
22002                 return;
22003             }
22004             if (this.cwhite.indexOf(tag) > -1) {
22005                 return;
22006             }
22007             this.cwhite.push(tag);
22008             
22009         }, this);
22010         
22011         
22012         Roo.each(Roo.HtmlEditorCore.cblack, function(tag) {
22013             if (w.indexOf(tag) > -1) {
22014                 return;
22015             }
22016             this.cblack.push(tag);
22017             
22018         }, this);
22019         
22020         Roo.each(b, function(tag) {
22021             if (w.indexOf(tag) > -1) {
22022                 return;
22023             }
22024             if (this.cblack.indexOf(tag) > -1) {
22025                 return;
22026             }
22027             this.cblack.push(tag);
22028             
22029         }, this);
22030     },
22031     
22032     setStylesheets : function(stylesheets)
22033     {
22034         if(typeof(stylesheets) == 'string'){
22035             Roo.get(this.iframe.contentDocument.head).createChild({
22036                 tag : 'link',
22037                 rel : 'stylesheet',
22038                 type : 'text/css',
22039                 href : stylesheets
22040             });
22041             
22042             return;
22043         }
22044         var _this = this;
22045      
22046         Roo.each(stylesheets, function(s) {
22047             if(!s.length){
22048                 return;
22049             }
22050             
22051             Roo.get(_this.iframe.contentDocument.head).createChild({
22052                 tag : 'link',
22053                 rel : 'stylesheet',
22054                 type : 'text/css',
22055                 href : s
22056             });
22057         });
22058
22059         
22060     },
22061     
22062     removeStylesheets : function()
22063     {
22064         var _this = this;
22065         
22066         Roo.each(Roo.get(_this.iframe.contentDocument.head).select('link[rel=stylesheet]', true).elements, function(s){
22067             s.remove();
22068         });
22069     },
22070     
22071     setStyle : function(style)
22072     {
22073         Roo.get(this.iframe.contentDocument.head).createChild({
22074             tag : 'style',
22075             type : 'text/css',
22076             html : style
22077         });
22078
22079         return;
22080     }
22081     
22082     // hide stuff that is not compatible
22083     /**
22084      * @event blur
22085      * @hide
22086      */
22087     /**
22088      * @event change
22089      * @hide
22090      */
22091     /**
22092      * @event focus
22093      * @hide
22094      */
22095     /**
22096      * @event specialkey
22097      * @hide
22098      */
22099     /**
22100      * @cfg {String} fieldClass @hide
22101      */
22102     /**
22103      * @cfg {String} focusClass @hide
22104      */
22105     /**
22106      * @cfg {String} autoCreate @hide
22107      */
22108     /**
22109      * @cfg {String} inputType @hide
22110      */
22111     /**
22112      * @cfg {String} invalidClass @hide
22113      */
22114     /**
22115      * @cfg {String} invalidText @hide
22116      */
22117     /**
22118      * @cfg {String} msgFx @hide
22119      */
22120     /**
22121      * @cfg {String} validateOnBlur @hide
22122      */
22123 });
22124
22125 Roo.HtmlEditorCore.white = [
22126         'area', 'br', 'img', 'input', 'hr', 'wbr',
22127         
22128        'address', 'blockquote', 'center', 'dd',      'dir',       'div', 
22129        'dl',      'dt',         'h1',     'h2',      'h3',        'h4', 
22130        'h5',      'h6',         'hr',     'isindex', 'listing',   'marquee', 
22131        'menu',    'multicol',   'ol',     'p',       'plaintext', 'pre', 
22132        'table',   'ul',         'xmp', 
22133        
22134        'caption', 'col', 'colgroup', 'tbody', 'td', 'tfoot', 'th', 
22135       'thead',   'tr', 
22136      
22137       'dir', 'menu', 'ol', 'ul', 'dl',
22138        
22139       'embed',  'object'
22140 ];
22141
22142
22143 Roo.HtmlEditorCore.black = [
22144     //    'embed',  'object', // enable - backend responsiblity to clean thiese
22145         'applet', // 
22146         'base',   'basefont', 'bgsound', 'blink',  'body', 
22147         'frame',  'frameset', 'head',    'html',   'ilayer', 
22148         'iframe', 'layer',  'link',     'meta',    'object',   
22149         'script', 'style' ,'title',  'xml' // clean later..
22150 ];
22151 Roo.HtmlEditorCore.clean = [
22152     'script', 'style', 'title', 'xml'
22153 ];
22154 Roo.HtmlEditorCore.remove = [
22155     'font'
22156 ];
22157 // attributes..
22158
22159 Roo.HtmlEditorCore.ablack = [
22160     'on'
22161 ];
22162     
22163 Roo.HtmlEditorCore.aclean = [ 
22164     'action', 'background', 'codebase', 'dynsrc', 'href', 'lowsrc' 
22165 ];
22166
22167 // protocols..
22168 Roo.HtmlEditorCore.pwhite= [
22169         'http',  'https',  'mailto'
22170 ];
22171
22172 // white listed style attributes.
22173 Roo.HtmlEditorCore.cwhite= [
22174       //  'text-align', /// default is to allow most things..
22175       
22176          
22177 //        'font-size'//??
22178 ];
22179
22180 // black listed style attributes.
22181 Roo.HtmlEditorCore.cblack= [
22182       //  'font-size' -- this can be set by the project 
22183 ];
22184
22185
22186 Roo.HtmlEditorCore.swapCodes   =[ 
22187     [    8211, "--" ], 
22188     [    8212, "--" ], 
22189     [    8216,  "'" ],  
22190     [    8217, "'" ],  
22191     [    8220, '"' ],  
22192     [    8221, '"' ],  
22193     [    8226, "*" ],  
22194     [    8230, "..." ]
22195 ]; 
22196
22197     //<script type="text/javascript">
22198
22199 /*
22200  * Ext JS Library 1.1.1
22201  * Copyright(c) 2006-2007, Ext JS, LLC.
22202  * Licence LGPL
22203  * 
22204  */
22205  
22206  
22207 Roo.form.HtmlEditor = function(config){
22208     
22209     
22210     
22211     Roo.form.HtmlEditor.superclass.constructor.call(this, config);
22212     
22213     if (!this.toolbars) {
22214         this.toolbars = [];
22215     }
22216     this.editorcore = new Roo.HtmlEditorCore(Roo.apply({ owner : this} , config));
22217     
22218     
22219 };
22220
22221 /**
22222  * @class Roo.form.HtmlEditor
22223  * @extends Roo.form.Field
22224  * Provides a lightweight HTML Editor component.
22225  *
22226  * This has been tested on Fireforx / Chrome.. IE may not be so great..
22227  * 
22228  * <br><br><b>Note: The focus/blur and validation marking functionality inherited from Ext.form.Field is NOT
22229  * supported by this editor.</b><br/><br/>
22230  * An Editor is a sensitive component that can't be used in all spots standard fields can be used. Putting an Editor within
22231  * any element that has display set to 'none' can cause problems in Safari and Firefox.<br/><br/>
22232  */
22233 Roo.extend(Roo.form.HtmlEditor, Roo.form.Field, {
22234     /**
22235      * @cfg {Boolean} clearUp
22236      */
22237     clearUp : true,
22238       /**
22239      * @cfg {Array} toolbars Array of toolbars. - defaults to just the Standard one
22240      */
22241     toolbars : false,
22242    
22243      /**
22244      * @cfg {String} resizable  's' or 'se' or 'e' - wrapps the element in a
22245      *                        Roo.resizable.
22246      */
22247     resizable : false,
22248      /**
22249      * @cfg {Number} height (in pixels)
22250      */   
22251     height: 300,
22252    /**
22253      * @cfg {Number} width (in pixels)
22254      */   
22255     width: 500,
22256     
22257     /**
22258      * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets.
22259      * 
22260      */
22261     stylesheets: false,
22262     
22263     
22264      /**
22265      * @cfg {Array} blacklist of css styles style attributes (blacklist overrides whitelist)
22266      * 
22267      */
22268     cblack: false,
22269     /**
22270      * @cfg {Array} whitelist of css styles style attributes (blacklist overrides whitelist)
22271      * 
22272      */
22273     cwhite: false,
22274     
22275      /**
22276      * @cfg {Array} blacklist of html tags - in addition to standard blacklist.
22277      * 
22278      */
22279     black: false,
22280     /**
22281      * @cfg {Array} whitelist of html tags - in addition to statndard whitelist
22282      * 
22283      */
22284     white: false,
22285     
22286     // id of frame..
22287     frameId: false,
22288     
22289     // private properties
22290     validationEvent : false,
22291     deferHeight: true,
22292     initialized : false,
22293     activated : false,
22294     
22295     onFocus : Roo.emptyFn,
22296     iframePad:3,
22297     hideMode:'offsets',
22298     
22299     actionMode : 'container', // defaults to hiding it...
22300     
22301     defaultAutoCreate : { // modified by initCompnoent..
22302         tag: "textarea",
22303         style:"width:500px;height:300px;",
22304         autocomplete: "new-password"
22305     },
22306
22307     // private
22308     initComponent : function(){
22309         this.addEvents({
22310             /**
22311              * @event initialize
22312              * Fires when the editor is fully initialized (including the iframe)
22313              * @param {HtmlEditor} this
22314              */
22315             initialize: true,
22316             /**
22317              * @event activate
22318              * Fires when the editor is first receives the focus. Any insertion must wait
22319              * until after this event.
22320              * @param {HtmlEditor} this
22321              */
22322             activate: true,
22323              /**
22324              * @event beforesync
22325              * Fires before the textarea is updated with content from the editor iframe. Return false
22326              * to cancel the sync.
22327              * @param {HtmlEditor} this
22328              * @param {String} html
22329              */
22330             beforesync: true,
22331              /**
22332              * @event beforepush
22333              * Fires before the iframe editor is updated with content from the textarea. Return false
22334              * to cancel the push.
22335              * @param {HtmlEditor} this
22336              * @param {String} html
22337              */
22338             beforepush: true,
22339              /**
22340              * @event sync
22341              * Fires when the textarea is updated with content from the editor iframe.
22342              * @param {HtmlEditor} this
22343              * @param {String} html
22344              */
22345             sync: true,
22346              /**
22347              * @event push
22348              * Fires when the iframe editor is updated with content from the textarea.
22349              * @param {HtmlEditor} this
22350              * @param {String} html
22351              */
22352             push: true,
22353              /**
22354              * @event editmodechange
22355              * Fires when the editor switches edit modes
22356              * @param {HtmlEditor} this
22357              * @param {Boolean} sourceEdit True if source edit, false if standard editing.
22358              */
22359             editmodechange: true,
22360             /**
22361              * @event editorevent
22362              * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
22363              * @param {HtmlEditor} this
22364              */
22365             editorevent: true,
22366             /**
22367              * @event firstfocus
22368              * Fires when on first focus - needed by toolbars..
22369              * @param {HtmlEditor} this
22370              */
22371             firstfocus: true,
22372             /**
22373              * @event autosave
22374              * Auto save the htmlEditor value as a file into Events
22375              * @param {HtmlEditor} this
22376              */
22377             autosave: true,
22378             /**
22379              * @event savedpreview
22380              * preview the saved version of htmlEditor
22381              * @param {HtmlEditor} this
22382              */
22383             savedpreview: true,
22384             
22385             /**
22386             * @event stylesheetsclick
22387             * Fires when press the Sytlesheets button
22388             * @param {Roo.HtmlEditorCore} this
22389             */
22390             stylesheetsclick: true
22391         });
22392         this.defaultAutoCreate =  {
22393             tag: "textarea",
22394             style:'width: ' + this.width + 'px;height: ' + this.height + 'px;',
22395             autocomplete: "new-password"
22396         };
22397     },
22398
22399     /**
22400      * Protected method that will not generally be called directly. It
22401      * is called when the editor creates its toolbar. Override this method if you need to
22402      * add custom toolbar buttons.
22403      * @param {HtmlEditor} editor
22404      */
22405     createToolbar : function(editor){
22406         Roo.log("create toolbars");
22407         if (!editor.toolbars || !editor.toolbars.length) {
22408             editor.toolbars = [ new Roo.form.HtmlEditor.ToolbarStandard() ]; // can be empty?
22409         }
22410         
22411         for (var i =0 ; i < editor.toolbars.length;i++) {
22412             editor.toolbars[i] = Roo.factory(
22413                     typeof(editor.toolbars[i]) == 'string' ?
22414                         { xtype: editor.toolbars[i]} : editor.toolbars[i],
22415                 Roo.form.HtmlEditor);
22416             editor.toolbars[i].init(editor);
22417         }
22418          
22419         
22420     },
22421
22422      
22423     // private
22424     onRender : function(ct, position)
22425     {
22426         var _t = this;
22427         Roo.form.HtmlEditor.superclass.onRender.call(this, ct, position);
22428         
22429         this.wrap = this.el.wrap({
22430             cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
22431         });
22432         
22433         this.editorcore.onRender(ct, position);
22434          
22435         if (this.resizable) {
22436             this.resizeEl = new Roo.Resizable(this.wrap, {
22437                 pinned : true,
22438                 wrap: true,
22439                 dynamic : true,
22440                 minHeight : this.height,
22441                 height: this.height,
22442                 handles : this.resizable,
22443                 width: this.width,
22444                 listeners : {
22445                     resize : function(r, w, h) {
22446                         _t.onResize(w,h); // -something
22447                     }
22448                 }
22449             });
22450             
22451         }
22452         this.createToolbar(this);
22453        
22454         
22455         if(!this.width){
22456             this.setSize(this.wrap.getSize());
22457         }
22458         if (this.resizeEl) {
22459             this.resizeEl.resizeTo.defer(100, this.resizeEl,[ this.width,this.height ] );
22460             // should trigger onReize..
22461         }
22462         
22463         this.keyNav = new Roo.KeyNav(this.el, {
22464             
22465             "tab" : function(e){
22466                 e.preventDefault();
22467                 
22468                 var value = this.getValue();
22469                 
22470                 var start = this.el.dom.selectionStart;
22471                 var end = this.el.dom.selectionEnd;
22472                 
22473                 if(!e.shiftKey){
22474                     
22475                     this.setValue(value.substring(0, start) + "\t" + value.substring(end));
22476                     this.el.dom.setSelectionRange(end + 1, end + 1);
22477                     return;
22478                 }
22479                 
22480                 var f = value.substring(0, start).split("\t");
22481                 
22482                 if(f.pop().length != 0){
22483                     return;
22484                 }
22485                 
22486                 this.setValue(f.join("\t") + value.substring(end));
22487                 this.el.dom.setSelectionRange(start - 1, start - 1);
22488                 
22489             },
22490             
22491             "home" : function(e){
22492                 e.preventDefault();
22493                 
22494                 var curr = this.el.dom.selectionStart;
22495                 var lines = this.getValue().split("\n");
22496                 
22497                 if(!lines.length){
22498                     return;
22499                 }
22500                 
22501                 if(e.ctrlKey){
22502                     this.el.dom.setSelectionRange(0, 0);
22503                     return;
22504                 }
22505                 
22506                 var pos = 0;
22507                 
22508                 for (var i = 0; i < lines.length;i++) {
22509                     pos += lines[i].length;
22510                     
22511                     if(i != 0){
22512                         pos += 1;
22513                     }
22514                     
22515                     if(pos < curr){
22516                         continue;
22517                     }
22518                     
22519                     pos -= lines[i].length;
22520                     
22521                     break;
22522                 }
22523                 
22524                 if(!e.shiftKey){
22525                     this.el.dom.setSelectionRange(pos, pos);
22526                     return;
22527                 }
22528                 
22529                 this.el.dom.selectionStart = pos;
22530                 this.el.dom.selectionEnd = curr;
22531             },
22532             
22533             "end" : function(e){
22534                 e.preventDefault();
22535                 
22536                 var curr = this.el.dom.selectionStart;
22537                 var lines = this.getValue().split("\n");
22538                 
22539                 if(!lines.length){
22540                     return;
22541                 }
22542                 
22543                 if(e.ctrlKey){
22544                     this.el.dom.setSelectionRange(this.getValue().length, this.getValue().length);
22545                     return;
22546                 }
22547                 
22548                 var pos = 0;
22549                 
22550                 for (var i = 0; i < lines.length;i++) {
22551                     
22552                     pos += lines[i].length;
22553                     
22554                     if(i != 0){
22555                         pos += 1;
22556                     }
22557                     
22558                     if(pos < curr){
22559                         continue;
22560                     }
22561                     
22562                     break;
22563                 }
22564                 
22565                 if(!e.shiftKey){
22566                     this.el.dom.setSelectionRange(pos, pos);
22567                     return;
22568                 }
22569                 
22570                 this.el.dom.selectionStart = curr;
22571                 this.el.dom.selectionEnd = pos;
22572             },
22573
22574             scope : this,
22575
22576             doRelay : function(foo, bar, hname){
22577                 return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
22578             },
22579
22580             forceKeyDown: true
22581         });
22582         
22583 //        if(this.autosave && this.w){
22584 //            this.autoSaveFn = setInterval(this.autosave, 1000);
22585 //        }
22586     },
22587
22588     // private
22589     onResize : function(w, h)
22590     {
22591         Roo.form.HtmlEditor.superclass.onResize.apply(this, arguments);
22592         var ew = false;
22593         var eh = false;
22594         
22595         if(this.el ){
22596             if(typeof w == 'number'){
22597                 var aw = w - this.wrap.getFrameWidth('lr');
22598                 this.el.setWidth(this.adjustWidth('textarea', aw));
22599                 ew = aw;
22600             }
22601             if(typeof h == 'number'){
22602                 var tbh = 0;
22603                 for (var i =0; i < this.toolbars.length;i++) {
22604                     // fixme - ask toolbars for heights?
22605                     tbh += this.toolbars[i].tb.el.getHeight();
22606                     if (this.toolbars[i].footer) {
22607                         tbh += this.toolbars[i].footer.el.getHeight();
22608                     }
22609                 }
22610                 
22611                 
22612                 
22613                 
22614                 var ah = h - this.wrap.getFrameWidth('tb') - tbh;// this.tb.el.getHeight();
22615                 ah -= 5; // knock a few pixes off for look..
22616 //                Roo.log(ah);
22617                 this.el.setHeight(this.adjustWidth('textarea', ah));
22618                 var eh = ah;
22619             }
22620         }
22621         Roo.log('onResize:' + [w,h,ew,eh].join(',') );
22622         this.editorcore.onResize(ew,eh);
22623         
22624     },
22625
22626     /**
22627      * Toggles the editor between standard and source edit mode.
22628      * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
22629      */
22630     toggleSourceEdit : function(sourceEditMode)
22631     {
22632         this.editorcore.toggleSourceEdit(sourceEditMode);
22633         
22634         if(this.editorcore.sourceEditMode){
22635             Roo.log('editor - showing textarea');
22636             
22637 //            Roo.log('in');
22638 //            Roo.log(this.syncValue());
22639             this.editorcore.syncValue();
22640             this.el.removeClass('x-hidden');
22641             this.el.dom.removeAttribute('tabIndex');
22642             this.el.focus();
22643             
22644             for (var i = 0; i < this.toolbars.length; i++) {
22645                 if(this.toolbars[i] instanceof Roo.form.HtmlEditor.ToolbarContext){
22646                     this.toolbars[i].tb.hide();
22647                     this.toolbars[i].footer.hide();
22648                 }
22649             }
22650             
22651         }else{
22652             Roo.log('editor - hiding textarea');
22653 //            Roo.log('out')
22654 //            Roo.log(this.pushValue()); 
22655             this.editorcore.pushValue();
22656             
22657             this.el.addClass('x-hidden');
22658             this.el.dom.setAttribute('tabIndex', -1);
22659             
22660             for (var i = 0; i < this.toolbars.length; i++) {
22661                 if(this.toolbars[i] instanceof Roo.form.HtmlEditor.ToolbarContext){
22662                     this.toolbars[i].tb.show();
22663                     this.toolbars[i].footer.show();
22664                 }
22665             }
22666             
22667             //this.deferFocus();
22668         }
22669         
22670         this.setSize(this.wrap.getSize());
22671         this.onResize(this.wrap.getSize().width, this.wrap.getSize().height);
22672         
22673         this.fireEvent('editmodechange', this, this.editorcore.sourceEditMode);
22674     },
22675  
22676     // private (for BoxComponent)
22677     adjustSize : Roo.BoxComponent.prototype.adjustSize,
22678
22679     // private (for BoxComponent)
22680     getResizeEl : function(){
22681         return this.wrap;
22682     },
22683
22684     // private (for BoxComponent)
22685     getPositionEl : function(){
22686         return this.wrap;
22687     },
22688
22689     // private
22690     initEvents : function(){
22691         this.originalValue = this.getValue();
22692     },
22693
22694     /**
22695      * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
22696      * @method
22697      */
22698     markInvalid : Roo.emptyFn,
22699     /**
22700      * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
22701      * @method
22702      */
22703     clearInvalid : Roo.emptyFn,
22704
22705     setValue : function(v){
22706         Roo.form.HtmlEditor.superclass.setValue.call(this, v);
22707         this.editorcore.pushValue();
22708     },
22709
22710      
22711     // private
22712     deferFocus : function(){
22713         this.focus.defer(10, this);
22714     },
22715
22716     // doc'ed in Field
22717     focus : function(){
22718         this.editorcore.focus();
22719         
22720     },
22721       
22722
22723     // private
22724     onDestroy : function(){
22725         
22726         
22727         
22728         if(this.rendered){
22729             
22730             for (var i =0; i < this.toolbars.length;i++) {
22731                 // fixme - ask toolbars for heights?
22732                 this.toolbars[i].onDestroy();
22733             }
22734             
22735             this.wrap.dom.innerHTML = '';
22736             this.wrap.remove();
22737         }
22738     },
22739
22740     // private
22741     onFirstFocus : function(){
22742         //Roo.log("onFirstFocus");
22743         this.editorcore.onFirstFocus();
22744          for (var i =0; i < this.toolbars.length;i++) {
22745             this.toolbars[i].onFirstFocus();
22746         }
22747         
22748     },
22749     
22750     // private
22751     syncValue : function()
22752     {
22753         this.editorcore.syncValue();
22754     },
22755     
22756     pushValue : function()
22757     {
22758         this.editorcore.pushValue();
22759     },
22760     
22761     setStylesheets : function(stylesheets)
22762     {
22763         this.editorcore.setStylesheets(stylesheets);
22764     },
22765     
22766     removeStylesheets : function()
22767     {
22768         this.editorcore.removeStylesheets();
22769     }
22770      
22771     
22772     // hide stuff that is not compatible
22773     /**
22774      * @event blur
22775      * @hide
22776      */
22777     /**
22778      * @event change
22779      * @hide
22780      */
22781     /**
22782      * @event focus
22783      * @hide
22784      */
22785     /**
22786      * @event specialkey
22787      * @hide
22788      */
22789     /**
22790      * @cfg {String} fieldClass @hide
22791      */
22792     /**
22793      * @cfg {String} focusClass @hide
22794      */
22795     /**
22796      * @cfg {String} autoCreate @hide
22797      */
22798     /**
22799      * @cfg {String} inputType @hide
22800      */
22801     /**
22802      * @cfg {String} invalidClass @hide
22803      */
22804     /**
22805      * @cfg {String} invalidText @hide
22806      */
22807     /**
22808      * @cfg {String} msgFx @hide
22809      */
22810     /**
22811      * @cfg {String} validateOnBlur @hide
22812      */
22813 });
22814  
22815     // <script type="text/javascript">
22816 /*
22817  * Based on
22818  * Ext JS Library 1.1.1
22819  * Copyright(c) 2006-2007, Ext JS, LLC.
22820  *  
22821  
22822  */
22823
22824 /**
22825  * @class Roo.form.HtmlEditorToolbar1
22826  * Basic Toolbar
22827  * 
22828  * Usage:
22829  *
22830  new Roo.form.HtmlEditor({
22831     ....
22832     toolbars : [
22833         new Roo.form.HtmlEditorToolbar1({
22834             disable : { fonts: 1 , format: 1, ..., ... , ...],
22835             btns : [ .... ]
22836         })
22837     }
22838      
22839  * 
22840  * @cfg {Object} disable List of elements to disable..
22841  * @cfg {Array} btns List of additional buttons.
22842  * 
22843  * 
22844  * NEEDS Extra CSS? 
22845  * .x-html-editor-tb .x-edit-none .x-btn-text { background: none; }
22846  */
22847  
22848 Roo.form.HtmlEditor.ToolbarStandard = function(config)
22849 {
22850     
22851     Roo.apply(this, config);
22852     
22853     // default disabled, based on 'good practice'..
22854     this.disable = this.disable || {};
22855     Roo.applyIf(this.disable, {
22856         fontSize : true,
22857         colors : true,
22858         specialElements : true
22859     });
22860     
22861     
22862     //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
22863     // dont call parent... till later.
22864 }
22865
22866 Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
22867     
22868     tb: false,
22869     
22870     rendered: false,
22871     
22872     editor : false,
22873     editorcore : false,
22874     /**
22875      * @cfg {Object} disable  List of toolbar elements to disable
22876          
22877      */
22878     disable : false,
22879     
22880     
22881      /**
22882      * @cfg {String} createLinkText The default text for the create link prompt
22883      */
22884     createLinkText : 'Please enter the URL for the link:',
22885     /**
22886      * @cfg {String} defaultLinkValue The default value for the create link prompt (defaults to http:/ /)
22887      */
22888     defaultLinkValue : 'http:/'+'/',
22889    
22890     
22891       /**
22892      * @cfg {Array} fontFamilies An array of available font families
22893      */
22894     fontFamilies : [
22895         'Arial',
22896         'Courier New',
22897         'Tahoma',
22898         'Times New Roman',
22899         'Verdana'
22900     ],
22901     
22902     specialChars : [
22903            "&#169;",
22904           "&#174;",     
22905           "&#8482;",    
22906           "&#163;" ,    
22907          // "&#8212;",    
22908           "&#8230;",    
22909           "&#247;" ,    
22910         //  "&#225;" ,     ?? a acute?
22911            "&#8364;"    , //Euro
22912        //   "&#8220;"    ,
22913         //  "&#8221;"    ,
22914         //  "&#8226;"    ,
22915           "&#176;"  //   , // degrees
22916
22917          // "&#233;"     , // e ecute
22918          // "&#250;"     , // u ecute?
22919     ],
22920     
22921     specialElements : [
22922         {
22923             text: "Insert Table",
22924             xtype: 'MenuItem',
22925             xns : Roo.Menu,
22926             ihtml :  '<table><tr><td>Cell</td></tr></table>' 
22927                 
22928         },
22929         {    
22930             text: "Insert Image",
22931             xtype: 'MenuItem',
22932             xns : Roo.Menu,
22933             ihtml : '<img src="about:blank"/>'
22934             
22935         }
22936         
22937          
22938     ],
22939     
22940     
22941     inputElements : [ 
22942             "form", "input:text", "input:hidden", "input:checkbox", "input:radio", "input:password", 
22943             "input:submit", "input:button", "select", "textarea", "label" ],
22944     formats : [
22945         ["p"] ,  
22946         ["h1"],["h2"],["h3"],["h4"],["h5"],["h6"], 
22947         ["pre"],[ "code"], 
22948         ["abbr"],[ "acronym"],[ "address"],[ "cite"],[ "samp"],[ "var"],
22949         ['div'],['span'],
22950         ['sup'],['sub']
22951     ],
22952     
22953     cleanStyles : [
22954         "font-size"
22955     ],
22956      /**
22957      * @cfg {String} defaultFont default font to use.
22958      */
22959     defaultFont: 'tahoma',
22960    
22961     fontSelect : false,
22962     
22963     
22964     formatCombo : false,
22965     
22966     init : function(editor)
22967     {
22968         this.editor = editor;
22969         this.editorcore = editor.editorcore ? editor.editorcore : editor;
22970         var editorcore = this.editorcore;
22971         
22972         var _t = this;
22973         
22974         var fid = editorcore.frameId;
22975         var etb = this;
22976         function btn(id, toggle, handler){
22977             var xid = fid + '-'+ id ;
22978             return {
22979                 id : xid,
22980                 cmd : id,
22981                 cls : 'x-btn-icon x-edit-'+id,
22982                 enableToggle:toggle !== false,
22983                 scope: _t, // was editor...
22984                 handler:handler||_t.relayBtnCmd,
22985                 clickEvent:'mousedown',
22986                 tooltip: etb.buttonTips[id] || undefined, ///tips ???
22987                 tabIndex:-1
22988             };
22989         }
22990         
22991         
22992         
22993         var tb = new Roo.Toolbar(editor.wrap.dom.firstChild);
22994         this.tb = tb;
22995          // stop form submits
22996         tb.el.on('click', function(e){
22997             e.preventDefault(); // what does this do?
22998         });
22999
23000         if(!this.disable.font) { // && !Roo.isSafari){
23001             /* why no safari for fonts 
23002             editor.fontSelect = tb.el.createChild({
23003                 tag:'select',
23004                 tabIndex: -1,
23005                 cls:'x-font-select',
23006                 html: this.createFontOptions()
23007             });
23008             
23009             editor.fontSelect.on('change', function(){
23010                 var font = editor.fontSelect.dom.value;
23011                 editor.relayCmd('fontname', font);
23012                 editor.deferFocus();
23013             }, editor);
23014             
23015             tb.add(
23016                 editor.fontSelect.dom,
23017                 '-'
23018             );
23019             */
23020             
23021         };
23022         if(!this.disable.formats){
23023             this.formatCombo = new Roo.form.ComboBox({
23024                 store: new Roo.data.SimpleStore({
23025                     id : 'tag',
23026                     fields: ['tag'],
23027                     data : this.formats // from states.js
23028                 }),
23029                 blockFocus : true,
23030                 name : '',
23031                 //autoCreate : {tag: "div",  size: "20"},
23032                 displayField:'tag',
23033                 typeAhead: false,
23034                 mode: 'local',
23035                 editable : false,
23036                 triggerAction: 'all',
23037                 emptyText:'Add tag',
23038                 selectOnFocus:true,
23039                 width:135,
23040                 listeners : {
23041                     'select': function(c, r, i) {
23042                         editorcore.insertTag(r.get('tag'));
23043                         editor.focus();
23044                     }
23045                 }
23046
23047             });
23048             tb.addField(this.formatCombo);
23049             
23050         }
23051         
23052         if(!this.disable.format){
23053             tb.add(
23054                 btn('bold'),
23055                 btn('italic'),
23056                 btn('underline'),
23057                 btn('strikethrough')
23058             );
23059         };
23060         if(!this.disable.fontSize){
23061             tb.add(
23062                 '-',
23063                 
23064                 
23065                 btn('increasefontsize', false, editorcore.adjustFont),
23066                 btn('decreasefontsize', false, editorcore.adjustFont)
23067             );
23068         };
23069         
23070         
23071         if(!this.disable.colors){
23072             tb.add(
23073                 '-', {
23074                     id:editorcore.frameId +'-forecolor',
23075                     cls:'x-btn-icon x-edit-forecolor',
23076                     clickEvent:'mousedown',
23077                     tooltip: this.buttonTips['forecolor'] || undefined,
23078                     tabIndex:-1,
23079                     menu : new Roo.menu.ColorMenu({
23080                         allowReselect: true,
23081                         focus: Roo.emptyFn,
23082                         value:'000000',
23083                         plain:true,
23084                         selectHandler: function(cp, color){
23085                             editorcore.execCmd('forecolor', Roo.isSafari || Roo.isIE ? '#'+color : color);
23086                             editor.deferFocus();
23087                         },
23088                         scope: editorcore,
23089                         clickEvent:'mousedown'
23090                     })
23091                 }, {
23092                     id:editorcore.frameId +'backcolor',
23093                     cls:'x-btn-icon x-edit-backcolor',
23094                     clickEvent:'mousedown',
23095                     tooltip: this.buttonTips['backcolor'] || undefined,
23096                     tabIndex:-1,
23097                     menu : new Roo.menu.ColorMenu({
23098                         focus: Roo.emptyFn,
23099                         value:'FFFFFF',
23100                         plain:true,
23101                         allowReselect: true,
23102                         selectHandler: function(cp, color){
23103                             if(Roo.isGecko){
23104                                 editorcore.execCmd('useCSS', false);
23105                                 editorcore.execCmd('hilitecolor', color);
23106                                 editorcore.execCmd('useCSS', true);
23107                                 editor.deferFocus();
23108                             }else{
23109                                 editorcore.execCmd(Roo.isOpera ? 'hilitecolor' : 'backcolor', 
23110                                     Roo.isSafari || Roo.isIE ? '#'+color : color);
23111                                 editor.deferFocus();
23112                             }
23113                         },
23114                         scope:editorcore,
23115                         clickEvent:'mousedown'
23116                     })
23117                 }
23118             );
23119         };
23120         // now add all the items...
23121         
23122
23123         if(!this.disable.alignments){
23124             tb.add(
23125                 '-',
23126                 btn('justifyleft'),
23127                 btn('justifycenter'),
23128                 btn('justifyright')
23129             );
23130         };
23131
23132         //if(!Roo.isSafari){
23133             if(!this.disable.links){
23134                 tb.add(
23135                     '-',
23136                     btn('createlink', false, this.createLink)    /// MOVE TO HERE?!!?!?!?!
23137                 );
23138             };
23139
23140             if(!this.disable.lists){
23141                 tb.add(
23142                     '-',
23143                     btn('insertorderedlist'),
23144                     btn('insertunorderedlist')
23145                 );
23146             }
23147             if(!this.disable.sourceEdit){
23148                 tb.add(
23149                     '-',
23150                     btn('sourceedit', true, function(btn){
23151                         this.toggleSourceEdit(btn.pressed);
23152                     })
23153                 );
23154             }
23155         //}
23156         
23157         var smenu = { };
23158         // special menu.. - needs to be tidied up..
23159         if (!this.disable.special) {
23160             smenu = {
23161                 text: "&#169;",
23162                 cls: 'x-edit-none',
23163                 
23164                 menu : {
23165                     items : []
23166                 }
23167             };
23168             for (var i =0; i < this.specialChars.length; i++) {
23169                 smenu.menu.items.push({
23170                     
23171                     html: this.specialChars[i],
23172                     handler: function(a,b) {
23173                         editorcore.insertAtCursor(String.fromCharCode(a.html.replace('&#','').replace(';', '')));
23174                         //editor.insertAtCursor(a.html);
23175                         
23176                     },
23177                     tabIndex:-1
23178                 });
23179             }
23180             
23181             
23182             tb.add(smenu);
23183             
23184             
23185         }
23186         
23187         var cmenu = { };
23188         if (!this.disable.cleanStyles) {
23189             cmenu = {
23190                 cls: 'x-btn-icon x-btn-clear',
23191                 
23192                 menu : {
23193                     items : []
23194                 }
23195             };
23196             for (var i =0; i < this.cleanStyles.length; i++) {
23197                 cmenu.menu.items.push({
23198                     actiontype : this.cleanStyles[i],
23199                     html: 'Remove ' + this.cleanStyles[i],
23200                     handler: function(a,b) {
23201 //                        Roo.log(a);
23202 //                        Roo.log(b);
23203                         var c = Roo.get(editorcore.doc.body);
23204                         c.select('[style]').each(function(s) {
23205                             s.dom.style.removeProperty(a.actiontype);
23206                         });
23207                         editorcore.syncValue();
23208                     },
23209                     tabIndex:-1
23210                 });
23211             }
23212              cmenu.menu.items.push({
23213                 actiontype : 'tablewidths',
23214                 html: 'Remove Table Widths',
23215                 handler: function(a,b) {
23216                     editorcore.cleanTableWidths();
23217                     editorcore.syncValue();
23218                 },
23219                 tabIndex:-1
23220             });
23221             cmenu.menu.items.push({
23222                 actiontype : 'word',
23223                 html: 'Remove MS Word Formating',
23224                 handler: function(a,b) {
23225                     editorcore.cleanWord();
23226                     editorcore.syncValue();
23227                 },
23228                 tabIndex:-1
23229             });
23230             
23231             cmenu.menu.items.push({
23232                 actiontype : 'all',
23233                 html: 'Remove All Styles',
23234                 handler: function(a,b) {
23235                     
23236                     var c = Roo.get(editorcore.doc.body);
23237                     c.select('[style]').each(function(s) {
23238                         s.dom.removeAttribute('style');
23239                     });
23240                     editorcore.syncValue();
23241                 },
23242                 tabIndex:-1
23243             });
23244             
23245             cmenu.menu.items.push({
23246                 actiontype : 'all',
23247                 html: 'Remove All CSS Classes',
23248                 handler: function(a,b) {
23249                     
23250                     var c = Roo.get(editorcore.doc.body);
23251                     c.select('[class]').each(function(s) {
23252                         s.dom.removeAttribute('class');
23253                     });
23254                     editorcore.cleanWord();
23255                     editorcore.syncValue();
23256                 },
23257                 tabIndex:-1
23258             });
23259             
23260              cmenu.menu.items.push({
23261                 actiontype : 'tidy',
23262                 html: 'Tidy HTML Source',
23263                 handler: function(a,b) {
23264                     editorcore.doc.body.innerHTML = editorcore.domToHTML();
23265                     editorcore.syncValue();
23266                 },
23267                 tabIndex:-1
23268             });
23269             
23270             
23271             tb.add(cmenu);
23272         }
23273          
23274         if (!this.disable.specialElements) {
23275             var semenu = {
23276                 text: "Other;",
23277                 cls: 'x-edit-none',
23278                 menu : {
23279                     items : []
23280                 }
23281             };
23282             for (var i =0; i < this.specialElements.length; i++) {
23283                 semenu.menu.items.push(
23284                     Roo.apply({ 
23285                         handler: function(a,b) {
23286                             editor.insertAtCursor(this.ihtml);
23287                         }
23288                     }, this.specialElements[i])
23289                 );
23290                     
23291             }
23292             
23293             tb.add(semenu);
23294             
23295             
23296         }
23297          
23298         
23299         if (this.btns) {
23300             for(var i =0; i< this.btns.length;i++) {
23301                 var b = Roo.factory(this.btns[i],Roo.form);
23302                 b.cls =  'x-edit-none';
23303                 
23304                 if(typeof(this.btns[i].cls) != 'undefined' && this.btns[i].cls.indexOf('x-init-enable') !== -1){
23305                     b.cls += ' x-init-enable';
23306                 }
23307                 
23308                 b.scope = editorcore;
23309                 tb.add(b);
23310             }
23311         
23312         }
23313         
23314         
23315         
23316         // disable everything...
23317         
23318         this.tb.items.each(function(item){
23319             
23320            if(
23321                 item.id != editorcore.frameId+ '-sourceedit' && 
23322                 (typeof(item.cls) != 'undefined' && item.cls.indexOf('x-init-enable') === -1)
23323             ){
23324                 
23325                 item.disable();
23326             }
23327         });
23328         this.rendered = true;
23329         
23330         // the all the btns;
23331         editor.on('editorevent', this.updateToolbar, this);
23332         // other toolbars need to implement this..
23333         //editor.on('editmodechange', this.updateToolbar, this);
23334     },
23335     
23336     
23337     relayBtnCmd : function(btn) {
23338         this.editorcore.relayCmd(btn.cmd);
23339     },
23340     // private used internally
23341     createLink : function(){
23342         Roo.log("create link?");
23343         var url = prompt(this.createLinkText, this.defaultLinkValue);
23344         if(url && url != 'http:/'+'/'){
23345             this.editorcore.relayCmd('createlink', url);
23346         }
23347     },
23348
23349     
23350     /**
23351      * Protected method that will not generally be called directly. It triggers
23352      * a toolbar update by reading the markup state of the current selection in the editor.
23353      */
23354     updateToolbar: function(){
23355
23356         if(!this.editorcore.activated){
23357             this.editor.onFirstFocus();
23358             return;
23359         }
23360
23361         var btns = this.tb.items.map, 
23362             doc = this.editorcore.doc,
23363             frameId = this.editorcore.frameId;
23364
23365         if(!this.disable.font && !Roo.isSafari){
23366             /*
23367             var name = (doc.queryCommandValue('FontName')||this.editor.defaultFont).toLowerCase();
23368             if(name != this.fontSelect.dom.value){
23369                 this.fontSelect.dom.value = name;
23370             }
23371             */
23372         }
23373         if(!this.disable.format){
23374             btns[frameId + '-bold'].toggle(doc.queryCommandState('bold'));
23375             btns[frameId + '-italic'].toggle(doc.queryCommandState('italic'));
23376             btns[frameId + '-underline'].toggle(doc.queryCommandState('underline'));
23377             btns[frameId + '-strikethrough'].toggle(doc.queryCommandState('strikethrough'));
23378         }
23379         if(!this.disable.alignments){
23380             btns[frameId + '-justifyleft'].toggle(doc.queryCommandState('justifyleft'));
23381             btns[frameId + '-justifycenter'].toggle(doc.queryCommandState('justifycenter'));
23382             btns[frameId + '-justifyright'].toggle(doc.queryCommandState('justifyright'));
23383         }
23384         if(!Roo.isSafari && !this.disable.lists){
23385             btns[frameId + '-insertorderedlist'].toggle(doc.queryCommandState('insertorderedlist'));
23386             btns[frameId + '-insertunorderedlist'].toggle(doc.queryCommandState('insertunorderedlist'));
23387         }
23388         
23389         var ans = this.editorcore.getAllAncestors();
23390         if (this.formatCombo) {
23391             
23392             
23393             var store = this.formatCombo.store;
23394             this.formatCombo.setValue("");
23395             for (var i =0; i < ans.length;i++) {
23396                 if (ans[i] && store.query('tag',ans[i].tagName.toLowerCase(), false).length) {
23397                     // select it..
23398                     this.formatCombo.setValue(ans[i].tagName.toLowerCase());
23399                     break;
23400                 }
23401             }
23402         }
23403         
23404         
23405         
23406         // hides menus... - so this cant be on a menu...
23407         Roo.menu.MenuMgr.hideAll();
23408
23409         //this.editorsyncValue();
23410     },
23411    
23412     
23413     createFontOptions : function(){
23414         var buf = [], fs = this.fontFamilies, ff, lc;
23415         
23416         
23417         
23418         for(var i = 0, len = fs.length; i< len; i++){
23419             ff = fs[i];
23420             lc = ff.toLowerCase();
23421             buf.push(
23422                 '<option value="',lc,'" style="font-family:',ff,';"',
23423                     (this.defaultFont == lc ? ' selected="true">' : '>'),
23424                     ff,
23425                 '</option>'
23426             );
23427         }
23428         return buf.join('');
23429     },
23430     
23431     toggleSourceEdit : function(sourceEditMode){
23432         
23433         Roo.log("toolbar toogle");
23434         if(sourceEditMode === undefined){
23435             sourceEditMode = !this.sourceEditMode;
23436         }
23437         this.sourceEditMode = sourceEditMode === true;
23438         var btn = this.tb.items.get(this.editorcore.frameId +'-sourceedit');
23439         // just toggle the button?
23440         if(btn.pressed !== this.sourceEditMode){
23441             btn.toggle(this.sourceEditMode);
23442             return;
23443         }
23444         
23445         if(sourceEditMode){
23446             Roo.log("disabling buttons");
23447             this.tb.items.each(function(item){
23448                 if(item.cmd != 'sourceedit' && (typeof(item.cls) != 'undefined' && item.cls.indexOf('x-init-enable') === -1)){
23449                     item.disable();
23450                 }
23451             });
23452           
23453         }else{
23454             Roo.log("enabling buttons");
23455             if(this.editorcore.initialized){
23456                 this.tb.items.each(function(item){
23457                     item.enable();
23458                 });
23459             }
23460             
23461         }
23462         Roo.log("calling toggole on editor");
23463         // tell the editor that it's been pressed..
23464         this.editor.toggleSourceEdit(sourceEditMode);
23465        
23466     },
23467      /**
23468      * Object collection of toolbar tooltips for the buttons in the editor. The key
23469      * is the command id associated with that button and the value is a valid QuickTips object.
23470      * For example:
23471 <pre><code>
23472 {
23473     bold : {
23474         title: 'Bold (Ctrl+B)',
23475         text: 'Make the selected text bold.',
23476         cls: 'x-html-editor-tip'
23477     },
23478     italic : {
23479         title: 'Italic (Ctrl+I)',
23480         text: 'Make the selected text italic.',
23481         cls: 'x-html-editor-tip'
23482     },
23483     ...
23484 </code></pre>
23485     * @type Object
23486      */
23487     buttonTips : {
23488         bold : {
23489             title: 'Bold (Ctrl+B)',
23490             text: 'Make the selected text bold.',
23491             cls: 'x-html-editor-tip'
23492         },
23493         italic : {
23494             title: 'Italic (Ctrl+I)',
23495             text: 'Make the selected text italic.',
23496             cls: 'x-html-editor-tip'
23497         },
23498         underline : {
23499             title: 'Underline (Ctrl+U)',
23500             text: 'Underline the selected text.',
23501             cls: 'x-html-editor-tip'
23502         },
23503         strikethrough : {
23504             title: 'Strikethrough',
23505             text: 'Strikethrough the selected text.',
23506             cls: 'x-html-editor-tip'
23507         },
23508         increasefontsize : {
23509             title: 'Grow Text',
23510             text: 'Increase the font size.',
23511             cls: 'x-html-editor-tip'
23512         },
23513         decreasefontsize : {
23514             title: 'Shrink Text',
23515             text: 'Decrease the font size.',
23516             cls: 'x-html-editor-tip'
23517         },
23518         backcolor : {
23519             title: 'Text Highlight Color',
23520             text: 'Change the background color of the selected text.',
23521             cls: 'x-html-editor-tip'
23522         },
23523         forecolor : {
23524             title: 'Font Color',
23525             text: 'Change the color of the selected text.',
23526             cls: 'x-html-editor-tip'
23527         },
23528         justifyleft : {
23529             title: 'Align Text Left',
23530             text: 'Align text to the left.',
23531             cls: 'x-html-editor-tip'
23532         },
23533         justifycenter : {
23534             title: 'Center Text',
23535             text: 'Center text in the editor.',
23536             cls: 'x-html-editor-tip'
23537         },
23538         justifyright : {
23539             title: 'Align Text Right',
23540             text: 'Align text to the right.',
23541             cls: 'x-html-editor-tip'
23542         },
23543         insertunorderedlist : {
23544             title: 'Bullet List',
23545             text: 'Start a bulleted list.',
23546             cls: 'x-html-editor-tip'
23547         },
23548         insertorderedlist : {
23549             title: 'Numbered List',
23550             text: 'Start a numbered list.',
23551             cls: 'x-html-editor-tip'
23552         },
23553         createlink : {
23554             title: 'Hyperlink',
23555             text: 'Make the selected text a hyperlink.',
23556             cls: 'x-html-editor-tip'
23557         },
23558         sourceedit : {
23559             title: 'Source Edit',
23560             text: 'Switch to source editing mode.',
23561             cls: 'x-html-editor-tip'
23562         }
23563     },
23564     // private
23565     onDestroy : function(){
23566         if(this.rendered){
23567             
23568             this.tb.items.each(function(item){
23569                 if(item.menu){
23570                     item.menu.removeAll();
23571                     if(item.menu.el){
23572                         item.menu.el.destroy();
23573                     }
23574                 }
23575                 item.destroy();
23576             });
23577              
23578         }
23579     },
23580     onFirstFocus: function() {
23581         this.tb.items.each(function(item){
23582            item.enable();
23583         });
23584     }
23585 });
23586
23587
23588
23589
23590 // <script type="text/javascript">
23591 /*
23592  * Based on
23593  * Ext JS Library 1.1.1
23594  * Copyright(c) 2006-2007, Ext JS, LLC.
23595  *  
23596  
23597  */
23598
23599  
23600 /**
23601  * @class Roo.form.HtmlEditor.ToolbarContext
23602  * Context Toolbar
23603  * 
23604  * Usage:
23605  *
23606  new Roo.form.HtmlEditor({
23607     ....
23608     toolbars : [
23609         { xtype: 'ToolbarStandard', styles : {} }
23610         { xtype: 'ToolbarContext', disable : {} }
23611     ]
23612 })
23613
23614      
23615  * 
23616  * @config : {Object} disable List of elements to disable.. (not done yet.)
23617  * @config : {Object} styles  Map of styles available.
23618  * 
23619  */
23620
23621 Roo.form.HtmlEditor.ToolbarContext = function(config)
23622 {
23623     
23624     Roo.apply(this, config);
23625     //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
23626     // dont call parent... till later.
23627     this.styles = this.styles || {};
23628 }
23629
23630  
23631
23632 Roo.form.HtmlEditor.ToolbarContext.types = {
23633     'IMG' : {
23634         width : {
23635             title: "Width",
23636             width: 40
23637         },
23638         height:  {
23639             title: "Height",
23640             width: 40
23641         },
23642         align: {
23643             title: "Align",
23644             opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
23645             width : 80
23646             
23647         },
23648         border: {
23649             title: "Border",
23650             width: 40
23651         },
23652         alt: {
23653             title: "Alt",
23654             width: 120
23655         },
23656         src : {
23657             title: "Src",
23658             width: 220
23659         }
23660         
23661     },
23662     'A' : {
23663         name : {
23664             title: "Name",
23665             width: 50
23666         },
23667         target:  {
23668             title: "Target",
23669             width: 120
23670         },
23671         href:  {
23672             title: "Href",
23673             width: 220
23674         } // border?
23675         
23676     },
23677     'TABLE' : {
23678         rows : {
23679             title: "Rows",
23680             width: 20
23681         },
23682         cols : {
23683             title: "Cols",
23684             width: 20
23685         },
23686         width : {
23687             title: "Width",
23688             width: 40
23689         },
23690         height : {
23691             title: "Height",
23692             width: 40
23693         },
23694         border : {
23695             title: "Border",
23696             width: 20
23697         }
23698     },
23699     'TD' : {
23700         width : {
23701             title: "Width",
23702             width: 40
23703         },
23704         height : {
23705             title: "Height",
23706             width: 40
23707         },   
23708         align: {
23709             title: "Align",
23710             opts : [[""],[ "left"],[ "center"],[ "right"],[ "justify"],[ "char"]],
23711             width: 80
23712         },
23713         valign: {
23714             title: "Valign",
23715             opts : [[""],[ "top"],[ "middle"],[ "bottom"],[ "baseline"]],
23716             width: 80
23717         },
23718         colspan: {
23719             title: "Colspan",
23720             width: 20
23721             
23722         },
23723          'font-family'  : {
23724             title : "Font",
23725             style : 'fontFamily',
23726             displayField: 'display',
23727             optname : 'font-family',
23728             width: 140
23729         }
23730     },
23731     'INPUT' : {
23732         name : {
23733             title: "name",
23734             width: 120
23735         },
23736         value : {
23737             title: "Value",
23738             width: 120
23739         },
23740         width : {
23741             title: "Width",
23742             width: 40
23743         }
23744     },
23745     'LABEL' : {
23746         'for' : {
23747             title: "For",
23748             width: 120
23749         }
23750     },
23751     'TEXTAREA' : {
23752           name : {
23753             title: "name",
23754             width: 120
23755         },
23756         rows : {
23757             title: "Rows",
23758             width: 20
23759         },
23760         cols : {
23761             title: "Cols",
23762             width: 20
23763         }
23764     },
23765     'SELECT' : {
23766         name : {
23767             title: "name",
23768             width: 120
23769         },
23770         selectoptions : {
23771             title: "Options",
23772             width: 200
23773         }
23774     },
23775     
23776     // should we really allow this??
23777     // should this just be 
23778     'BODY' : {
23779         title : {
23780             title: "Title",
23781             width: 200,
23782             disabled : true
23783         }
23784     },
23785     'SPAN' : {
23786         'font-family'  : {
23787             title : "Font",
23788             style : 'fontFamily',
23789             displayField: 'display',
23790             optname : 'font-family',
23791             width: 140
23792         }
23793     },
23794     'DIV' : {
23795         'font-family'  : {
23796             title : "Font",
23797             style : 'fontFamily',
23798             displayField: 'display',
23799             optname : 'font-family',
23800             width: 140
23801         }
23802     },
23803      'P' : {
23804         'font-family'  : {
23805             title : "Font",
23806             style : 'fontFamily',
23807             displayField: 'display',
23808             optname : 'font-family',
23809             width: 140
23810         }
23811     },
23812     
23813     '*' : {
23814         // empty..
23815     }
23816
23817 };
23818
23819 // this should be configurable.. - you can either set it up using stores, or modify options somehwere..
23820 Roo.form.HtmlEditor.ToolbarContext.stores = false;
23821
23822 Roo.form.HtmlEditor.ToolbarContext.options = {
23823         'font-family'  : [ 
23824                 [ 'Helvetica,Arial,sans-serif', 'Helvetica'],
23825                 [ 'Courier New', 'Courier New'],
23826                 [ 'Tahoma', 'Tahoma'],
23827                 [ 'Times New Roman,serif', 'Times'],
23828                 [ 'Verdana','Verdana' ]
23829         ]
23830 };
23831
23832 // fixme - these need to be configurable..
23833  
23834
23835 //Roo.form.HtmlEditor.ToolbarContext.types
23836
23837
23838 Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
23839     
23840     tb: false,
23841     
23842     rendered: false,
23843     
23844     editor : false,
23845     editorcore : false,
23846     /**
23847      * @cfg {Object} disable  List of toolbar elements to disable
23848          
23849      */
23850     disable : false,
23851     /**
23852      * @cfg {Object} styles List of styles 
23853      *    eg. { '*' : [ 'headline' ] , 'TD' : [ 'underline', 'double-underline' ] } 
23854      *
23855      * These must be defined in the page, so they get rendered correctly..
23856      * .headline { }
23857      * TD.underline { }
23858      * 
23859      */
23860     styles : false,
23861     
23862     options: false,
23863     
23864     toolbars : false,
23865     
23866     init : function(editor)
23867     {
23868         this.editor = editor;
23869         this.editorcore = editor.editorcore ? editor.editorcore : editor;
23870         var editorcore = this.editorcore;
23871         
23872         var fid = editorcore.frameId;
23873         var etb = this;
23874         function btn(id, toggle, handler){
23875             var xid = fid + '-'+ id ;
23876             return {
23877                 id : xid,
23878                 cmd : id,
23879                 cls : 'x-btn-icon x-edit-'+id,
23880                 enableToggle:toggle !== false,
23881                 scope: editorcore, // was editor...
23882                 handler:handler||editorcore.relayBtnCmd,
23883                 clickEvent:'mousedown',
23884                 tooltip: etb.buttonTips[id] || undefined, ///tips ???
23885                 tabIndex:-1
23886             };
23887         }
23888         // create a new element.
23889         var wdiv = editor.wrap.createChild({
23890                 tag: 'div'
23891             }, editor.wrap.dom.firstChild.nextSibling, true);
23892         
23893         // can we do this more than once??
23894         
23895          // stop form submits
23896       
23897  
23898         // disable everything...
23899         var ty= Roo.form.HtmlEditor.ToolbarContext.types;
23900         this.toolbars = {};
23901            
23902         for (var i in  ty) {
23903           
23904             this.toolbars[i] = this.buildToolbar(ty[i],i);
23905         }
23906         this.tb = this.toolbars.BODY;
23907         this.tb.el.show();
23908         this.buildFooter();
23909         this.footer.show();
23910         editor.on('hide', function( ) { this.footer.hide() }, this);
23911         editor.on('show', function( ) { this.footer.show() }, this);
23912         
23913          
23914         this.rendered = true;
23915         
23916         // the all the btns;
23917         editor.on('editorevent', this.updateToolbar, this);
23918         // other toolbars need to implement this..
23919         //editor.on('editmodechange', this.updateToolbar, this);
23920     },
23921     
23922     
23923     
23924     /**
23925      * Protected method that will not generally be called directly. It triggers
23926      * a toolbar update by reading the markup state of the current selection in the editor.
23927      *
23928      * Note you can force an update by calling on('editorevent', scope, false)
23929      */
23930     updateToolbar: function(editor,ev,sel){
23931
23932         //Roo.log(ev);
23933         // capture mouse up - this is handy for selecting images..
23934         // perhaps should go somewhere else...
23935         if(!this.editorcore.activated){
23936              this.editor.onFirstFocus();
23937             return;
23938         }
23939         
23940         
23941         
23942         // http://developer.yahoo.com/yui/docs/simple-editor.js.html
23943         // selectNode - might want to handle IE?
23944         if (ev &&
23945             (ev.type == 'mouseup' || ev.type == 'click' ) &&
23946             ev.target && ev.target.tagName == 'IMG') {
23947             // they have click on an image...
23948             // let's see if we can change the selection...
23949             sel = ev.target;
23950          
23951               var nodeRange = sel.ownerDocument.createRange();
23952             try {
23953                 nodeRange.selectNode(sel);
23954             } catch (e) {
23955                 nodeRange.selectNodeContents(sel);
23956             }
23957             //nodeRange.collapse(true);
23958             var s = this.editorcore.win.getSelection();
23959             s.removeAllRanges();
23960             s.addRange(nodeRange);
23961         }  
23962         
23963       
23964         var updateFooter = sel ? false : true;
23965         
23966         
23967         var ans = this.editorcore.getAllAncestors();
23968         
23969         // pick
23970         var ty= Roo.form.HtmlEditor.ToolbarContext.types;
23971         
23972         if (!sel) { 
23973             sel = ans.length ? (ans[0] ?  ans[0]  : ans[1]) : this.editorcore.doc.body;
23974             sel = sel ? sel : this.editorcore.doc.body;
23975             sel = sel.tagName.length ? sel : this.editorcore.doc.body;
23976             
23977         }
23978         // pick a menu that exists..
23979         var tn = sel.tagName.toUpperCase();
23980         //sel = typeof(ty[tn]) != 'undefined' ? sel : this.editor.doc.body;
23981         
23982         tn = sel.tagName.toUpperCase();
23983         
23984         var lastSel = this.tb.selectedNode;
23985         
23986         this.tb.selectedNode = sel;
23987         
23988         // if current menu does not match..
23989         
23990         if ((this.tb.name != tn) || (lastSel != this.tb.selectedNode) || ev === false) {
23991                 
23992             this.tb.el.hide();
23993             ///console.log("show: " + tn);
23994             this.tb =  typeof(ty[tn]) != 'undefined' ? this.toolbars[tn] : this.toolbars['*'];
23995             this.tb.el.show();
23996             // update name
23997             this.tb.items.first().el.innerHTML = tn + ':&nbsp;';
23998             
23999             
24000             // update attributes
24001             if (this.tb.fields) {
24002                 this.tb.fields.each(function(e) {
24003                     if (e.stylename) {
24004                         e.setValue(sel.style[e.stylename]);
24005                         return;
24006                     } 
24007                    e.setValue(sel.getAttribute(e.attrname));
24008                 });
24009             }
24010             
24011             var hasStyles = false;
24012             for(var i in this.styles) {
24013                 hasStyles = true;
24014                 break;
24015             }
24016             
24017             // update styles
24018             if (hasStyles) { 
24019                 var st = this.tb.fields.item(0);
24020                 
24021                 st.store.removeAll();
24022                
24023                 
24024                 var cn = sel.className.split(/\s+/);
24025                 
24026                 var avs = [];
24027                 if (this.styles['*']) {
24028                     
24029                     Roo.each(this.styles['*'], function(v) {
24030                         avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );         
24031                     });
24032                 }
24033                 if (this.styles[tn]) { 
24034                     Roo.each(this.styles[tn], function(v) {
24035                         avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );         
24036                     });
24037                 }
24038                 
24039                 st.store.loadData(avs);
24040                 st.collapse();
24041                 st.setValue(cn);
24042             }
24043             // flag our selected Node.
24044             this.tb.selectedNode = sel;
24045            
24046            
24047             Roo.menu.MenuMgr.hideAll();
24048
24049         }
24050         
24051         if (!updateFooter) {
24052             //this.footDisp.dom.innerHTML = ''; 
24053             return;
24054         }
24055         // update the footer
24056         //
24057         var html = '';
24058         
24059         this.footerEls = ans.reverse();
24060         Roo.each(this.footerEls, function(a,i) {
24061             if (!a) { return; }
24062             html += html.length ? ' &gt; '  :  '';
24063             
24064             html += '<span class="x-ed-loc-' + i + '">' + a.tagName + '</span>';
24065             
24066         });
24067        
24068         // 
24069         var sz = this.footDisp.up('td').getSize();
24070         this.footDisp.dom.style.width = (sz.width -10) + 'px';
24071         this.footDisp.dom.style.marginLeft = '5px';
24072         
24073         this.footDisp.dom.style.overflow = 'hidden';
24074         
24075         this.footDisp.dom.innerHTML = html;
24076             
24077         //this.editorsyncValue();
24078     },
24079      
24080     
24081    
24082        
24083     // private
24084     onDestroy : function(){
24085         if(this.rendered){
24086             
24087             this.tb.items.each(function(item){
24088                 if(item.menu){
24089                     item.menu.removeAll();
24090                     if(item.menu.el){
24091                         item.menu.el.destroy();
24092                     }
24093                 }
24094                 item.destroy();
24095             });
24096              
24097         }
24098     },
24099     onFirstFocus: function() {
24100         // need to do this for all the toolbars..
24101         this.tb.items.each(function(item){
24102            item.enable();
24103         });
24104     },
24105     buildToolbar: function(tlist, nm)
24106     {
24107         var editor = this.editor;
24108         var editorcore = this.editorcore;
24109          // create a new element.
24110         var wdiv = editor.wrap.createChild({
24111                 tag: 'div'
24112             }, editor.wrap.dom.firstChild.nextSibling, true);
24113         
24114        
24115         var tb = new Roo.Toolbar(wdiv);
24116         // add the name..
24117         
24118         tb.add(nm+ ":&nbsp;");
24119         
24120         var styles = [];
24121         for(var i in this.styles) {
24122             styles.push(i);
24123         }
24124         
24125         // styles...
24126         if (styles && styles.length) {
24127             
24128             // this needs a multi-select checkbox...
24129             tb.addField( new Roo.form.ComboBox({
24130                 store: new Roo.data.SimpleStore({
24131                     id : 'val',
24132                     fields: ['val', 'selected'],
24133                     data : [] 
24134                 }),
24135                 name : '-roo-edit-className',
24136                 attrname : 'className',
24137                 displayField: 'val',
24138                 typeAhead: false,
24139                 mode: 'local',
24140                 editable : false,
24141                 triggerAction: 'all',
24142                 emptyText:'Select Style',
24143                 selectOnFocus:true,
24144                 width: 130,
24145                 listeners : {
24146                     'select': function(c, r, i) {
24147                         // initial support only for on class per el..
24148                         tb.selectedNode.className =  r ? r.get('val') : '';
24149                         editorcore.syncValue();
24150                     }
24151                 }
24152     
24153             }));
24154         }
24155         
24156         var tbc = Roo.form.HtmlEditor.ToolbarContext;
24157         var tbops = tbc.options;
24158         
24159         for (var i in tlist) {
24160             
24161             var item = tlist[i];
24162             tb.add(item.title + ":&nbsp;");
24163             
24164             
24165             //optname == used so you can configure the options available..
24166             var opts = item.opts ? item.opts : false;
24167             if (item.optname) {
24168                 opts = tbops[item.optname];
24169            
24170             }
24171             
24172             if (opts) {
24173                 // opts == pulldown..
24174                 tb.addField( new Roo.form.ComboBox({
24175                     store:   typeof(tbc.stores[i]) != 'undefined' ?  Roo.factory(tbc.stores[i],Roo.data) : new Roo.data.SimpleStore({
24176                         id : 'val',
24177                         fields: ['val', 'display'],
24178                         data : opts  
24179                     }),
24180                     name : '-roo-edit-' + i,
24181                     attrname : i,
24182                     stylename : item.style ? item.style : false,
24183                     displayField: item.displayField ? item.displayField : 'val',
24184                     valueField :  'val',
24185                     typeAhead: false,
24186                     mode: typeof(tbc.stores[i]) != 'undefined'  ? 'remote' : 'local',
24187                     editable : false,
24188                     triggerAction: 'all',
24189                     emptyText:'Select',
24190                     selectOnFocus:true,
24191                     width: item.width ? item.width  : 130,
24192                     listeners : {
24193                         'select': function(c, r, i) {
24194                             if (c.stylename) {
24195                                 tb.selectedNode.style[c.stylename] =  r.get('val');
24196                                 return;
24197                             }
24198                             tb.selectedNode.setAttribute(c.attrname, r.get('val'));
24199                         }
24200                     }
24201
24202                 }));
24203                 continue;
24204                     
24205                  
24206                 
24207                 tb.addField( new Roo.form.TextField({
24208                     name: i,
24209                     width: 100,
24210                     //allowBlank:false,
24211                     value: ''
24212                 }));
24213                 continue;
24214             }
24215             tb.addField( new Roo.form.TextField({
24216                 name: '-roo-edit-' + i,
24217                 attrname : i,
24218                 
24219                 width: item.width,
24220                 //allowBlank:true,
24221                 value: '',
24222                 listeners: {
24223                     'change' : function(f, nv, ov) {
24224                         tb.selectedNode.setAttribute(f.attrname, nv);
24225                         editorcore.syncValue();
24226                     }
24227                 }
24228             }));
24229              
24230         }
24231         
24232         var _this = this;
24233         
24234         if(nm == 'BODY'){
24235             tb.addSeparator();
24236         
24237             tb.addButton( {
24238                 text: 'Stylesheets',
24239
24240                 listeners : {
24241                     click : function ()
24242                     {
24243                         _this.editor.fireEvent('stylesheetsclick', _this.editor);
24244                     }
24245                 }
24246             });
24247         }
24248         
24249         tb.addFill();
24250         tb.addButton( {
24251             text: 'Remove Tag',
24252     
24253             listeners : {
24254                 click : function ()
24255                 {
24256                     // remove
24257                     // undo does not work.
24258                      
24259                     var sn = tb.selectedNode;
24260                     
24261                     var pn = sn.parentNode;
24262                     
24263                     var stn =  sn.childNodes[0];
24264                     var en = sn.childNodes[sn.childNodes.length - 1 ];
24265                     while (sn.childNodes.length) {
24266                         var node = sn.childNodes[0];
24267                         sn.removeChild(node);
24268                         //Roo.log(node);
24269                         pn.insertBefore(node, sn);
24270                         
24271                     }
24272                     pn.removeChild(sn);
24273                     var range = editorcore.createRange();
24274         
24275                     range.setStart(stn,0);
24276                     range.setEnd(en,0); //????
24277                     //range.selectNode(sel);
24278                     
24279                     
24280                     var selection = editorcore.getSelection();
24281                     selection.removeAllRanges();
24282                     selection.addRange(range);
24283                     
24284                     
24285                     
24286                     //_this.updateToolbar(null, null, pn);
24287                     _this.updateToolbar(null, null, null);
24288                     _this.footDisp.dom.innerHTML = ''; 
24289                 }
24290             }
24291             
24292                     
24293                 
24294             
24295         });
24296         
24297         
24298         tb.el.on('click', function(e){
24299             e.preventDefault(); // what does this do?
24300         });
24301         tb.el.setVisibilityMode( Roo.Element.DISPLAY);
24302         tb.el.hide();
24303         tb.name = nm;
24304         // dont need to disable them... as they will get hidden
24305         return tb;
24306          
24307         
24308     },
24309     buildFooter : function()
24310     {
24311         
24312         var fel = this.editor.wrap.createChild();
24313         this.footer = new Roo.Toolbar(fel);
24314         // toolbar has scrolly on left / right?
24315         var footDisp= new Roo.Toolbar.Fill();
24316         var _t = this;
24317         this.footer.add(
24318             {
24319                 text : '&lt;',
24320                 xtype: 'Button',
24321                 handler : function() {
24322                     _t.footDisp.scrollTo('left',0,true)
24323                 }
24324             }
24325         );
24326         this.footer.add( footDisp );
24327         this.footer.add( 
24328             {
24329                 text : '&gt;',
24330                 xtype: 'Button',
24331                 handler : function() {
24332                     // no animation..
24333                     _t.footDisp.select('span').last().scrollIntoView(_t.footDisp,true);
24334                 }
24335             }
24336         );
24337         var fel = Roo.get(footDisp.el);
24338         fel.addClass('x-editor-context');
24339         this.footDispWrap = fel; 
24340         this.footDispWrap.overflow  = 'hidden';
24341         
24342         this.footDisp = fel.createChild();
24343         this.footDispWrap.on('click', this.onContextClick, this)
24344         
24345         
24346     },
24347     onContextClick : function (ev,dom)
24348     {
24349         ev.preventDefault();
24350         var  cn = dom.className;
24351         //Roo.log(cn);
24352         if (!cn.match(/x-ed-loc-/)) {
24353             return;
24354         }
24355         var n = cn.split('-').pop();
24356         var ans = this.footerEls;
24357         var sel = ans[n];
24358         
24359          // pick
24360         var range = this.editorcore.createRange();
24361         
24362         range.selectNodeContents(sel);
24363         //range.selectNode(sel);
24364         
24365         
24366         var selection = this.editorcore.getSelection();
24367         selection.removeAllRanges();
24368         selection.addRange(range);
24369         
24370         
24371         
24372         this.updateToolbar(null, null, sel);
24373         
24374         
24375     }
24376     
24377     
24378     
24379     
24380     
24381 });
24382
24383
24384
24385
24386
24387 /*
24388  * Based on:
24389  * Ext JS Library 1.1.1
24390  * Copyright(c) 2006-2007, Ext JS, LLC.
24391  *
24392  * Originally Released Under LGPL - original licence link has changed is not relivant.
24393  *
24394  * Fork - LGPL
24395  * <script type="text/javascript">
24396  */
24397  
24398 /**
24399  * @class Roo.form.BasicForm
24400  * @extends Roo.util.Observable
24401  * Supplies the functionality to do "actions" on forms and initialize Roo.form.Field types on existing markup.
24402  * @constructor
24403  * @param {String/HTMLElement/Roo.Element} el The form element or its id
24404  * @param {Object} config Configuration options
24405  */
24406 Roo.form.BasicForm = function(el, config){
24407     this.allItems = [];
24408     this.childForms = [];
24409     Roo.apply(this, config);
24410     /*
24411      * The Roo.form.Field items in this form.
24412      * @type MixedCollection
24413      */
24414      
24415      
24416     this.items = new Roo.util.MixedCollection(false, function(o){
24417         return o.id || (o.id = Roo.id());
24418     });
24419     this.addEvents({
24420         /**
24421          * @event beforeaction
24422          * Fires before any action is performed. Return false to cancel the action.
24423          * @param {Form} this
24424          * @param {Action} action The action to be performed
24425          */
24426         beforeaction: true,
24427         /**
24428          * @event actionfailed
24429          * Fires when an action fails.
24430          * @param {Form} this
24431          * @param {Action} action The action that failed
24432          */
24433         actionfailed : true,
24434         /**
24435          * @event actioncomplete
24436          * Fires when an action is completed.
24437          * @param {Form} this
24438          * @param {Action} action The action that completed
24439          */
24440         actioncomplete : true
24441     });
24442     if(el){
24443         this.initEl(el);
24444     }
24445     Roo.form.BasicForm.superclass.constructor.call(this);
24446     
24447     Roo.form.BasicForm.popover.apply();
24448 };
24449
24450 Roo.extend(Roo.form.BasicForm, Roo.util.Observable, {
24451     /**
24452      * @cfg {String} method
24453      * The request method to use (GET or POST) for form actions if one isn't supplied in the action options.
24454      */
24455     /**
24456      * @cfg {DataReader} reader
24457      * An Roo.data.DataReader (e.g. {@link Roo.data.XmlReader}) to be used to read data when executing "load" actions.
24458      * This is optional as there is built-in support for processing JSON.
24459      */
24460     /**
24461      * @cfg {DataReader} errorReader
24462      * An Roo.data.DataReader (e.g. {@link Roo.data.XmlReader}) to be used to read data when reading validation errors on "submit" actions.
24463      * This is completely optional as there is built-in support for processing JSON.
24464      */
24465     /**
24466      * @cfg {String} url
24467      * The URL to use for form actions if one isn't supplied in the action options.
24468      */
24469     /**
24470      * @cfg {Boolean} fileUpload
24471      * Set to true if this form is a file upload.
24472      */
24473      
24474     /**
24475      * @cfg {Object} baseParams
24476      * Parameters to pass with all requests. e.g. baseParams: {id: '123', foo: 'bar'}.
24477      */
24478      /**
24479      
24480     /**
24481      * @cfg {Number} timeout Timeout for form actions in seconds (default is 30 seconds).
24482      */
24483     timeout: 30,
24484
24485     // private
24486     activeAction : null,
24487
24488     /**
24489      * @cfg {Boolean} trackResetOnLoad If set to true, form.reset() resets to the last loaded
24490      * or setValues() data instead of when the form was first created.
24491      */
24492     trackResetOnLoad : false,
24493     
24494     
24495     /**
24496      * childForms - used for multi-tab forms
24497      * @type {Array}
24498      */
24499     childForms : false,
24500     
24501     /**
24502      * allItems - full list of fields.
24503      * @type {Array}
24504      */
24505     allItems : false,
24506     
24507     /**
24508      * By default wait messages are displayed with Roo.MessageBox.wait. You can target a specific
24509      * element by passing it or its id or mask the form itself by passing in true.
24510      * @type Mixed
24511      */
24512     waitMsgTarget : false,
24513     
24514     /**
24515      * @type Boolean
24516      */
24517     disableMask : false,
24518     
24519     /**
24520      * @cfg {Boolean} errorMask (true|false) default false
24521      */
24522     errorMask : false,
24523     
24524     /**
24525      * @cfg {Number} maskOffset Default 100
24526      */
24527     maskOffset : 100,
24528
24529     // private
24530     initEl : function(el){
24531         this.el = Roo.get(el);
24532         this.id = this.el.id || Roo.id();
24533         this.el.on('submit', this.onSubmit, this);
24534         this.el.addClass('x-form');
24535     },
24536
24537     // private
24538     onSubmit : function(e){
24539         e.stopEvent();
24540     },
24541
24542     /**
24543      * Returns true if client-side validation on the form is successful.
24544      * @return Boolean
24545      */
24546     isValid : function(){
24547         var valid = true;
24548         var target = false;
24549         this.items.each(function(f){
24550             if(f.validate()){
24551                 return;
24552             }
24553             
24554             valid = false;
24555                 
24556             if(!target && f.el.isVisible(true)){
24557                 target = f;
24558             }
24559         });
24560         
24561         if(this.errorMask && !valid){
24562             Roo.form.BasicForm.popover.mask(this, target);
24563         }
24564         
24565         return valid;
24566     },
24567
24568     /**
24569      * DEPRICATED Returns true if any fields in this form have changed since their original load. 
24570      * @return Boolean
24571      */
24572     isDirty : function(){
24573         var dirty = false;
24574         this.items.each(function(f){
24575            if(f.isDirty()){
24576                dirty = true;
24577                return false;
24578            }
24579         });
24580         return dirty;
24581     },
24582     
24583     /**
24584      * Returns true if any fields in this form have changed since their original load. (New version)
24585      * @return Boolean
24586      */
24587     
24588     hasChanged : function()
24589     {
24590         var dirty = false;
24591         this.items.each(function(f){
24592            if(f.hasChanged()){
24593                dirty = true;
24594                return false;
24595            }
24596         });
24597         return dirty;
24598         
24599     },
24600     /**
24601      * Resets all hasChanged to 'false' -
24602      * The old 'isDirty' used 'original value..' however this breaks reset() and a few other things.
24603      * So hasChanged storage is only to be used for this purpose
24604      * @return Boolean
24605      */
24606     resetHasChanged : function()
24607     {
24608         this.items.each(function(f){
24609            f.resetHasChanged();
24610         });
24611         
24612     },
24613     
24614     
24615     /**
24616      * Performs a predefined action (submit or load) or custom actions you define on this form.
24617      * @param {String} actionName The name of the action type
24618      * @param {Object} options (optional) The options to pass to the action.  All of the config options listed
24619      * below are supported by both the submit and load actions unless otherwise noted (custom actions could also
24620      * accept other config options):
24621      * <pre>
24622 Property          Type             Description
24623 ----------------  ---------------  ----------------------------------------------------------------------------------
24624 url               String           The url for the action (defaults to the form's url)
24625 method            String           The form method to use (defaults to the form's method, or POST if not defined)
24626 params            String/Object    The params to pass (defaults to the form's baseParams, or none if not defined)
24627 clientValidation  Boolean          Applies to submit only.  Pass true to call form.isValid() prior to posting to
24628                                    validate the form on the client (defaults to false)
24629      * </pre>
24630      * @return {BasicForm} this
24631      */
24632     doAction : function(action, options){
24633         if(typeof action == 'string'){
24634             action = new Roo.form.Action.ACTION_TYPES[action](this, options);
24635         }
24636         if(this.fireEvent('beforeaction', this, action) !== false){
24637             this.beforeAction(action);
24638             action.run.defer(100, action);
24639         }
24640         return this;
24641     },
24642
24643     /**
24644      * Shortcut to do a submit action.
24645      * @param {Object} options The options to pass to the action (see {@link #doAction} for details)
24646      * @return {BasicForm} this
24647      */
24648     submit : function(options){
24649         this.doAction('submit', options);
24650         return this;
24651     },
24652
24653     /**
24654      * Shortcut to do a load action.
24655      * @param {Object} options The options to pass to the action (see {@link #doAction} for details)
24656      * @return {BasicForm} this
24657      */
24658     load : function(options){
24659         this.doAction('load', options);
24660         return this;
24661     },
24662
24663     /**
24664      * Persists the values in this form into the passed Roo.data.Record object in a beginEdit/endEdit block.
24665      * @param {Record} record The record to edit
24666      * @return {BasicForm} this
24667      */
24668     updateRecord : function(record){
24669         record.beginEdit();
24670         var fs = record.fields;
24671         fs.each(function(f){
24672             var field = this.findField(f.name);
24673             if(field){
24674                 record.set(f.name, field.getValue());
24675             }
24676         }, this);
24677         record.endEdit();
24678         return this;
24679     },
24680
24681     /**
24682      * Loads an Roo.data.Record into this form.
24683      * @param {Record} record The record to load
24684      * @return {BasicForm} this
24685      */
24686     loadRecord : function(record){
24687         this.setValues(record.data);
24688         return this;
24689     },
24690
24691     // private
24692     beforeAction : function(action){
24693         var o = action.options;
24694         
24695         if(!this.disableMask) {
24696             if(this.waitMsgTarget === true){
24697                 this.el.mask(o.waitMsg || "Sending", 'x-mask-loading');
24698             }else if(this.waitMsgTarget){
24699                 this.waitMsgTarget = Roo.get(this.waitMsgTarget);
24700                 this.waitMsgTarget.mask(o.waitMsg || "Sending", 'x-mask-loading');
24701             }else {
24702                 Roo.MessageBox.wait(o.waitMsg || "Sending", o.waitTitle || this.waitTitle || 'Please Wait...');
24703             }
24704         }
24705         
24706          
24707     },
24708
24709     // private
24710     afterAction : function(action, success){
24711         this.activeAction = null;
24712         var o = action.options;
24713         
24714         if(!this.disableMask) {
24715             if(this.waitMsgTarget === true){
24716                 this.el.unmask();
24717             }else if(this.waitMsgTarget){
24718                 this.waitMsgTarget.unmask();
24719             }else{
24720                 Roo.MessageBox.updateProgress(1);
24721                 Roo.MessageBox.hide();
24722             }
24723         }
24724         
24725         if(success){
24726             if(o.reset){
24727                 this.reset();
24728             }
24729             Roo.callback(o.success, o.scope, [this, action]);
24730             this.fireEvent('actioncomplete', this, action);
24731             
24732         }else{
24733             
24734             // failure condition..
24735             // we have a scenario where updates need confirming.
24736             // eg. if a locking scenario exists..
24737             // we look for { errors : { needs_confirm : true }} in the response.
24738             if (
24739                 (typeof(action.result) != 'undefined')  &&
24740                 (typeof(action.result.errors) != 'undefined')  &&
24741                 (typeof(action.result.errors.needs_confirm) != 'undefined')
24742            ){
24743                 var _t = this;
24744                 Roo.MessageBox.confirm(
24745                     "Change requires confirmation",
24746                     action.result.errorMsg,
24747                     function(r) {
24748                         if (r != 'yes') {
24749                             return;
24750                         }
24751                         _t.doAction('submit', { params :  { _submit_confirmed : 1 } }  );
24752                     }
24753                     
24754                 );
24755                 
24756                 
24757                 
24758                 return;
24759             }
24760             
24761             Roo.callback(o.failure, o.scope, [this, action]);
24762             // show an error message if no failed handler is set..
24763             if (!this.hasListener('actionfailed')) {
24764                 Roo.MessageBox.alert("Error",
24765                     (typeof(action.result) != 'undefined' && typeof(action.result.errorMsg) != 'undefined') ?
24766                         action.result.errorMsg :
24767                         "Saving Failed, please check your entries or try again"
24768                 );
24769             }
24770             
24771             this.fireEvent('actionfailed', this, action);
24772         }
24773         
24774     },
24775
24776     /**
24777      * Find a Roo.form.Field in this form by id, dataIndex, name or hiddenName
24778      * @param {String} id The value to search for
24779      * @return Field
24780      */
24781     findField : function(id){
24782         var field = this.items.get(id);
24783         if(!field){
24784             this.items.each(function(f){
24785                 if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){
24786                     field = f;
24787                     return false;
24788                 }
24789             });
24790         }
24791         return field || null;
24792     },
24793
24794     /**
24795      * Add a secondary form to this one, 
24796      * Used to provide tabbed forms. One form is primary, with hidden values 
24797      * which mirror the elements from the other forms.
24798      * 
24799      * @param {Roo.form.Form} form to add.
24800      * 
24801      */
24802     addForm : function(form)
24803     {
24804        
24805         if (this.childForms.indexOf(form) > -1) {
24806             // already added..
24807             return;
24808         }
24809         this.childForms.push(form);
24810         var n = '';
24811         Roo.each(form.allItems, function (fe) {
24812             
24813             n = typeof(fe.getName) == 'undefined' ? fe.name : fe.getName();
24814             if (this.findField(n)) { // already added..
24815                 return;
24816             }
24817             var add = new Roo.form.Hidden({
24818                 name : n
24819             });
24820             add.render(this.el);
24821             
24822             this.add( add );
24823         }, this);
24824         
24825     },
24826     /**
24827      * Mark fields in this form invalid in bulk.
24828      * @param {Array/Object} errors Either an array in the form [{id:'fieldId', msg:'The message'},...] or an object hash of {id: msg, id2: msg2}
24829      * @return {BasicForm} this
24830      */
24831     markInvalid : function(errors){
24832         if(errors instanceof Array){
24833             for(var i = 0, len = errors.length; i < len; i++){
24834                 var fieldError = errors[i];
24835                 var f = this.findField(fieldError.id);
24836                 if(f){
24837                     f.markInvalid(fieldError.msg);
24838                 }
24839             }
24840         }else{
24841             var field, id;
24842             for(id in errors){
24843                 if(typeof errors[id] != 'function' && (field = this.findField(id))){
24844                     field.markInvalid(errors[id]);
24845                 }
24846             }
24847         }
24848         Roo.each(this.childForms || [], function (f) {
24849             f.markInvalid(errors);
24850         });
24851         
24852         return this;
24853     },
24854
24855     /**
24856      * Set values for fields in this form in bulk.
24857      * @param {Array/Object} values Either an array in the form [{id:'fieldId', value:'foo'},...] or an object hash of {id: value, id2: value2}
24858      * @return {BasicForm} this
24859      */
24860     setValues : function(values){
24861         if(values instanceof Array){ // array of objects
24862             for(var i = 0, len = values.length; i < len; i++){
24863                 var v = values[i];
24864                 var f = this.findField(v.id);
24865                 if(f){
24866                     f.setValue(v.value);
24867                     if(this.trackResetOnLoad){
24868                         f.originalValue = f.getValue();
24869                     }
24870                 }
24871             }
24872         }else{ // object hash
24873             var field, id;
24874             for(id in values){
24875                 if(typeof values[id] != 'function' && (field = this.findField(id))){
24876                     
24877                     if (field.setFromData && 
24878                         field.valueField && 
24879                         field.displayField &&
24880                         // combos' with local stores can 
24881                         // be queried via setValue()
24882                         // to set their value..
24883                         (field.store && !field.store.isLocal)
24884                         ) {
24885                         // it's a combo
24886                         var sd = { };
24887                         sd[field.valueField] = typeof(values[field.hiddenName]) == 'undefined' ? '' : values[field.hiddenName];
24888                         sd[field.displayField] = typeof(values[field.name]) == 'undefined' ? '' : values[field.name];
24889                         field.setFromData(sd);
24890                         
24891                     } else {
24892                         field.setValue(values[id]);
24893                     }
24894                     
24895                     
24896                     if(this.trackResetOnLoad){
24897                         field.originalValue = field.getValue();
24898                     }
24899                 }
24900             }
24901         }
24902         this.resetHasChanged();
24903         
24904         
24905         Roo.each(this.childForms || [], function (f) {
24906             f.setValues(values);
24907             f.resetHasChanged();
24908         });
24909                 
24910         return this;
24911     },
24912  
24913     /**
24914      * Returns the fields in this form as an object with key/value pairs. If multiple fields exist with the same name
24915      * they are returned as an array.
24916      * @param {Boolean} asString
24917      * @return {Object}
24918      */
24919     getValues : function(asString){
24920         if (this.childForms) {
24921             // copy values from the child forms
24922             Roo.each(this.childForms, function (f) {
24923                 this.setValues(f.getValues());
24924             }, this);
24925         }
24926         
24927         // use formdata
24928         if (typeof(FormData) != 'undefined' && asString !== true) {
24929             var fd = (new FormData(this.el.dom)).entries();
24930             var ret = {};
24931             var ent = fd.next();
24932             while (!ent.done) {
24933                 ret[ent.value[0]] = ent.value[1]; // not sure how this will handle duplicates..
24934                 ent = fd.next();
24935             };
24936             return ret;
24937         }
24938         
24939         
24940         var fs = Roo.lib.Ajax.serializeForm(this.el.dom);
24941         if(asString === true){
24942             return fs;
24943         }
24944         return Roo.urlDecode(fs);
24945     },
24946     
24947     /**
24948      * Returns the fields in this form as an object with key/value pairs. 
24949      * This differs from getValues as it calls getValue on each child item, rather than using dom data.
24950      * @return {Object}
24951      */
24952     getFieldValues : function(with_hidden)
24953     {
24954         if (this.childForms) {
24955             // copy values from the child forms
24956             // should this call getFieldValues - probably not as we do not currently copy
24957             // hidden fields when we generate..
24958             Roo.each(this.childForms, function (f) {
24959                 this.setValues(f.getValues());
24960             }, this);
24961         }
24962         
24963         var ret = {};
24964         this.items.each(function(f){
24965             if (!f.getName()) {
24966                 return;
24967             }
24968             var v = f.getValue();
24969             if (f.inputType =='radio') {
24970                 if (typeof(ret[f.getName()]) == 'undefined') {
24971                     ret[f.getName()] = ''; // empty..
24972                 }
24973                 
24974                 if (!f.el.dom.checked) {
24975                     return;
24976                     
24977                 }
24978                 v = f.el.dom.value;
24979                 
24980             }
24981             
24982             // not sure if this supported any more..
24983             if ((typeof(v) == 'object') && f.getRawValue) {
24984                 v = f.getRawValue() ; // dates..
24985             }
24986             // combo boxes where name != hiddenName...
24987             if (f.name != f.getName()) {
24988                 ret[f.name] = f.getRawValue();
24989             }
24990             ret[f.getName()] = v;
24991         });
24992         
24993         return ret;
24994     },
24995
24996     /**
24997      * Clears all invalid messages in this form.
24998      * @return {BasicForm} this
24999      */
25000     clearInvalid : function(){
25001         this.items.each(function(f){
25002            f.clearInvalid();
25003         });
25004         
25005         Roo.each(this.childForms || [], function (f) {
25006             f.clearInvalid();
25007         });
25008         
25009         
25010         return this;
25011     },
25012
25013     /**
25014      * Resets this form.
25015      * @return {BasicForm} this
25016      */
25017     reset : function(){
25018         this.items.each(function(f){
25019             f.reset();
25020         });
25021         
25022         Roo.each(this.childForms || [], function (f) {
25023             f.reset();
25024         });
25025         this.resetHasChanged();
25026         
25027         return this;
25028     },
25029
25030     /**
25031      * Add Roo.form components to this form.
25032      * @param {Field} field1
25033      * @param {Field} field2 (optional)
25034      * @param {Field} etc (optional)
25035      * @return {BasicForm} this
25036      */
25037     add : function(){
25038         this.items.addAll(Array.prototype.slice.call(arguments, 0));
25039         return this;
25040     },
25041
25042
25043     /**
25044      * Removes a field from the items collection (does NOT remove its markup).
25045      * @param {Field} field
25046      * @return {BasicForm} this
25047      */
25048     remove : function(field){
25049         this.items.remove(field);
25050         return this;
25051     },
25052
25053     /**
25054      * Looks at the fields in this form, checks them for an id attribute,
25055      * and calls applyTo on the existing dom element with that id.
25056      * @return {BasicForm} this
25057      */
25058     render : function(){
25059         this.items.each(function(f){
25060             if(f.isFormField && !f.rendered && document.getElementById(f.id)){ // if the element exists
25061                 f.applyTo(f.id);
25062             }
25063         });
25064         return this;
25065     },
25066
25067     /**
25068      * Calls {@link Ext#apply} for all fields in this form with the passed object.
25069      * @param {Object} values
25070      * @return {BasicForm} this
25071      */
25072     applyToFields : function(o){
25073         this.items.each(function(f){
25074            Roo.apply(f, o);
25075         });
25076         return this;
25077     },
25078
25079     /**
25080      * Calls {@link Ext#applyIf} for all field in this form with the passed object.
25081      * @param {Object} values
25082      * @return {BasicForm} this
25083      */
25084     applyIfToFields : function(o){
25085         this.items.each(function(f){
25086            Roo.applyIf(f, o);
25087         });
25088         return this;
25089     }
25090 });
25091
25092 // back compat
25093 Roo.BasicForm = Roo.form.BasicForm;
25094
25095 Roo.apply(Roo.form.BasicForm, {
25096     
25097     popover : {
25098         
25099         padding : 5,
25100         
25101         isApplied : false,
25102         
25103         isMasked : false,
25104         
25105         form : false,
25106         
25107         target : false,
25108         
25109         intervalID : false,
25110         
25111         maskEl : false,
25112         
25113         apply : function()
25114         {
25115             if(this.isApplied){
25116                 return;
25117             }
25118             
25119             this.maskEl = {
25120                 top : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-top-mask" }, true),
25121                 left : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-left-mask" }, true),
25122                 bottom : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-bottom-mask" }, true),
25123                 right : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-right-mask" }, true)
25124             };
25125             
25126             this.maskEl.top.enableDisplayMode("block");
25127             this.maskEl.left.enableDisplayMode("block");
25128             this.maskEl.bottom.enableDisplayMode("block");
25129             this.maskEl.right.enableDisplayMode("block");
25130             
25131             Roo.get(document.body).on('click', function(){
25132                 this.unmask();
25133             }, this);
25134             
25135             Roo.get(document.body).on('touchstart', function(){
25136                 this.unmask();
25137             }, this);
25138             
25139             this.isApplied = true
25140         },
25141         
25142         mask : function(form, target)
25143         {
25144             this.form = form;
25145             
25146             this.target = target;
25147             
25148             if(!this.form.errorMask || !target.el){
25149                 return;
25150             }
25151             
25152             var scrollable = this.target.el.findScrollableParent() || this.target.el.findParent('div.x-layout-active-content', 100, true) || Roo.get(document.body);
25153             
25154             var ot = this.target.el.calcOffsetsTo(scrollable);
25155             
25156             var scrollTo = ot[1] - this.form.maskOffset;
25157             
25158             scrollTo = Math.min(scrollTo, scrollable.dom.scrollHeight);
25159             
25160             scrollable.scrollTo('top', scrollTo);
25161             
25162             var el = this.target.wrap || this.target.el;
25163             
25164             var box = el.getBox();
25165             
25166             this.maskEl.top.setStyle('position', 'absolute');
25167             this.maskEl.top.setStyle('z-index', 10000);
25168             this.maskEl.top.setSize(Roo.lib.Dom.getDocumentWidth(), box.y - this.padding);
25169             this.maskEl.top.setLeft(0);
25170             this.maskEl.top.setTop(0);
25171             this.maskEl.top.show();
25172             
25173             this.maskEl.left.setStyle('position', 'absolute');
25174             this.maskEl.left.setStyle('z-index', 10000);
25175             this.maskEl.left.setSize(box.x - this.padding, box.height + this.padding * 2);
25176             this.maskEl.left.setLeft(0);
25177             this.maskEl.left.setTop(box.y - this.padding);
25178             this.maskEl.left.show();
25179
25180             this.maskEl.bottom.setStyle('position', 'absolute');
25181             this.maskEl.bottom.setStyle('z-index', 10000);
25182             this.maskEl.bottom.setSize(Roo.lib.Dom.getDocumentWidth(), Roo.lib.Dom.getDocumentHeight() - box.bottom - this.padding);
25183             this.maskEl.bottom.setLeft(0);
25184             this.maskEl.bottom.setTop(box.bottom + this.padding);
25185             this.maskEl.bottom.show();
25186
25187             this.maskEl.right.setStyle('position', 'absolute');
25188             this.maskEl.right.setStyle('z-index', 10000);
25189             this.maskEl.right.setSize(Roo.lib.Dom.getDocumentWidth() - box.right - this.padding, box.height + this.padding * 2);
25190             this.maskEl.right.setLeft(box.right + this.padding);
25191             this.maskEl.right.setTop(box.y - this.padding);
25192             this.maskEl.right.show();
25193
25194             this.intervalID = window.setInterval(function() {
25195                 Roo.form.BasicForm.popover.unmask();
25196             }, 10000);
25197
25198             window.onwheel = function(){ return false;};
25199             
25200             (function(){ this.isMasked = true; }).defer(500, this);
25201             
25202         },
25203         
25204         unmask : function()
25205         {
25206             if(!this.isApplied || !this.isMasked || !this.form || !this.target || !this.form.errorMask){
25207                 return;
25208             }
25209             
25210             this.maskEl.top.setStyle('position', 'absolute');
25211             this.maskEl.top.setSize(0, 0).setXY([0, 0]);
25212             this.maskEl.top.hide();
25213
25214             this.maskEl.left.setStyle('position', 'absolute');
25215             this.maskEl.left.setSize(0, 0).setXY([0, 0]);
25216             this.maskEl.left.hide();
25217
25218             this.maskEl.bottom.setStyle('position', 'absolute');
25219             this.maskEl.bottom.setSize(0, 0).setXY([0, 0]);
25220             this.maskEl.bottom.hide();
25221
25222             this.maskEl.right.setStyle('position', 'absolute');
25223             this.maskEl.right.setSize(0, 0).setXY([0, 0]);
25224             this.maskEl.right.hide();
25225             
25226             window.onwheel = function(){ return true;};
25227             
25228             if(this.intervalID){
25229                 window.clearInterval(this.intervalID);
25230                 this.intervalID = false;
25231             }
25232             
25233             this.isMasked = false;
25234             
25235         }
25236         
25237     }
25238     
25239 });/*
25240  * Based on:
25241  * Ext JS Library 1.1.1
25242  * Copyright(c) 2006-2007, Ext JS, LLC.
25243  *
25244  * Originally Released Under LGPL - original licence link has changed is not relivant.
25245  *
25246  * Fork - LGPL
25247  * <script type="text/javascript">
25248  */
25249
25250 /**
25251  * @class Roo.form.Form
25252  * @extends Roo.form.BasicForm
25253  * Adds the ability to dynamically render forms with JavaScript to {@link Roo.form.BasicForm}.
25254  * @constructor
25255  * @param {Object} config Configuration options
25256  */
25257 Roo.form.Form = function(config){
25258     var xitems =  [];
25259     if (config.items) {
25260         xitems = config.items;
25261         delete config.items;
25262     }
25263    
25264     
25265     Roo.form.Form.superclass.constructor.call(this, null, config);
25266     this.url = this.url || this.action;
25267     if(!this.root){
25268         this.root = new Roo.form.Layout(Roo.applyIf({
25269             id: Roo.id()
25270         }, config));
25271     }
25272     this.active = this.root;
25273     /**
25274      * Array of all the buttons that have been added to this form via {@link addButton}
25275      * @type Array
25276      */
25277     this.buttons = [];
25278     this.allItems = [];
25279     this.addEvents({
25280         /**
25281          * @event clientvalidation
25282          * If the monitorValid config option is true, this event fires repetitively to notify of valid state
25283          * @param {Form} this
25284          * @param {Boolean} valid true if the form has passed client-side validation
25285          */
25286         clientvalidation: true,
25287         /**
25288          * @event rendered
25289          * Fires when the form is rendered
25290          * @param {Roo.form.Form} form
25291          */
25292         rendered : true
25293     });
25294     
25295     if (this.progressUrl) {
25296             // push a hidden field onto the list of fields..
25297             this.addxtype( {
25298                     xns: Roo.form, 
25299                     xtype : 'Hidden', 
25300                     name : 'UPLOAD_IDENTIFIER' 
25301             });
25302         }
25303         
25304     
25305     Roo.each(xitems, this.addxtype, this);
25306     
25307 };
25308
25309 Roo.extend(Roo.form.Form, Roo.form.BasicForm, {
25310     /**
25311      * @cfg {Number} labelWidth The width of labels. This property cascades to child containers.
25312      */
25313     /**
25314      * @cfg {String} itemCls A css class to apply to the x-form-item of fields. This property cascades to child containers.
25315      */
25316     /**
25317      * @cfg {String} buttonAlign Valid values are "left," "center" and "right" (defaults to "center")
25318      */
25319     buttonAlign:'center',
25320
25321     /**
25322      * @cfg {Number} minButtonWidth Minimum width of all buttons in pixels (defaults to 75)
25323      */
25324     minButtonWidth:75,
25325
25326     /**
25327      * @cfg {String} labelAlign Valid values are "left," "top" and "right" (defaults to "left").
25328      * This property cascades to child containers if not set.
25329      */
25330     labelAlign:'left',
25331
25332     /**
25333      * @cfg {Boolean} monitorValid If true the form monitors its valid state <b>client-side</b> and
25334      * fires a looping event with that state. This is required to bind buttons to the valid
25335      * state using the config value formBind:true on the button.
25336      */
25337     monitorValid : false,
25338
25339     /**
25340      * @cfg {Number} monitorPoll The milliseconds to poll valid state, ignored if monitorValid is not true (defaults to 200)
25341      */
25342     monitorPoll : 200,
25343     
25344     /**
25345      * @cfg {String} progressUrl - Url to return progress data 
25346      */
25347     
25348     progressUrl : false,
25349     /**
25350      * @cfg {boolean|FormData} formData - true to use new 'FormData' post, or set to a new FormData({dom form}) Object, if
25351      * sending a formdata with extra parameters - eg uploaded elements.
25352      */
25353     
25354     formData : false,
25355     
25356     /**
25357      * Opens a new {@link Roo.form.Column} container in the layout stack. If fields are passed after the config, the
25358      * fields are added and the column is closed. If no fields are passed the column remains open
25359      * until end() is called.
25360      * @param {Object} config The config to pass to the column
25361      * @param {Field} field1 (optional)
25362      * @param {Field} field2 (optional)
25363      * @param {Field} etc (optional)
25364      * @return Column The column container object
25365      */
25366     column : function(c){
25367         var col = new Roo.form.Column(c);
25368         this.start(col);
25369         if(arguments.length > 1){ // duplicate code required because of Opera
25370             this.add.apply(this, Array.prototype.slice.call(arguments, 1));
25371             this.end();
25372         }
25373         return col;
25374     },
25375
25376     /**
25377      * Opens a new {@link Roo.form.FieldSet} container in the layout stack. If fields are passed after the config, the
25378      * fields are added and the fieldset is closed. If no fields are passed the fieldset remains open
25379      * until end() is called.
25380      * @param {Object} config The config to pass to the fieldset
25381      * @param {Field} field1 (optional)
25382      * @param {Field} field2 (optional)
25383      * @param {Field} etc (optional)
25384      * @return FieldSet The fieldset container object
25385      */
25386     fieldset : function(c){
25387         var fs = new Roo.form.FieldSet(c);
25388         this.start(fs);
25389         if(arguments.length > 1){ // duplicate code required because of Opera
25390             this.add.apply(this, Array.prototype.slice.call(arguments, 1));
25391             this.end();
25392         }
25393         return fs;
25394     },
25395
25396     /**
25397      * Opens a new {@link Roo.form.Layout} container in the layout stack. If fields are passed after the config, the
25398      * fields are added and the container is closed. If no fields are passed the container remains open
25399      * until end() is called.
25400      * @param {Object} config The config to pass to the Layout
25401      * @param {Field} field1 (optional)
25402      * @param {Field} field2 (optional)
25403      * @param {Field} etc (optional)
25404      * @return Layout The container object
25405      */
25406     container : function(c){
25407         var l = new Roo.form.Layout(c);
25408         this.start(l);
25409         if(arguments.length > 1){ // duplicate code required because of Opera
25410             this.add.apply(this, Array.prototype.slice.call(arguments, 1));
25411             this.end();
25412         }
25413         return l;
25414     },
25415
25416     /**
25417      * Opens the passed container in the layout stack. The container can be any {@link Roo.form.Layout} or subclass.
25418      * @param {Object} container A Roo.form.Layout or subclass of Layout
25419      * @return {Form} this
25420      */
25421     start : function(c){
25422         // cascade label info
25423         Roo.applyIf(c, {'labelAlign': this.active.labelAlign, 'labelWidth': this.active.labelWidth, 'itemCls': this.active.itemCls});
25424         this.active.stack.push(c);
25425         c.ownerCt = this.active;
25426         this.active = c;
25427         return this;
25428     },
25429
25430     /**
25431      * Closes the current open container
25432      * @return {Form} this
25433      */
25434     end : function(){
25435         if(this.active == this.root){
25436             return this;
25437         }
25438         this.active = this.active.ownerCt;
25439         return this;
25440     },
25441
25442     /**
25443      * Add Roo.form components to the current open container (e.g. column, fieldset, etc.).  Fields added via this method
25444      * can also be passed with an additional property of fieldLabel, which if supplied, will provide the text to display
25445      * as the label of the field.
25446      * @param {Field} field1
25447      * @param {Field} field2 (optional)
25448      * @param {Field} etc. (optional)
25449      * @return {Form} this
25450      */
25451     add : function(){
25452         this.active.stack.push.apply(this.active.stack, arguments);
25453         this.allItems.push.apply(this.allItems,arguments);
25454         var r = [];
25455         for(var i = 0, a = arguments, len = a.length; i < len; i++) {
25456             if(a[i].isFormField){
25457                 r.push(a[i]);
25458             }
25459         }
25460         if(r.length > 0){
25461             Roo.form.Form.superclass.add.apply(this, r);
25462         }
25463         return this;
25464     },
25465     
25466
25467     
25468     
25469     
25470      /**
25471      * Find any element that has been added to a form, using it's ID or name
25472      * This can include framesets, columns etc. along with regular fields..
25473      * @param {String} id - id or name to find.
25474      
25475      * @return {Element} e - or false if nothing found.
25476      */
25477     findbyId : function(id)
25478     {
25479         var ret = false;
25480         if (!id) {
25481             return ret;
25482         }
25483         Roo.each(this.allItems, function(f){
25484             if (f.id == id || f.name == id ){
25485                 ret = f;
25486                 return false;
25487             }
25488         });
25489         return ret;
25490     },
25491
25492     
25493     
25494     /**
25495      * Render this form into the passed container. This should only be called once!
25496      * @param {String/HTMLElement/Element} container The element this component should be rendered into
25497      * @return {Form} this
25498      */
25499     render : function(ct)
25500     {
25501         
25502         
25503         
25504         ct = Roo.get(ct);
25505         var o = this.autoCreate || {
25506             tag: 'form',
25507             method : this.method || 'POST',
25508             id : this.id || Roo.id()
25509         };
25510         this.initEl(ct.createChild(o));
25511
25512         this.root.render(this.el);
25513         
25514        
25515              
25516         this.items.each(function(f){
25517             f.render('x-form-el-'+f.id);
25518         });
25519
25520         if(this.buttons.length > 0){
25521             // tables are required to maintain order and for correct IE layout
25522             var tb = this.el.createChild({cls:'x-form-btns-ct', cn: {
25523                 cls:"x-form-btns x-form-btns-"+this.buttonAlign,
25524                 html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'
25525             }}, null, true);
25526             var tr = tb.getElementsByTagName('tr')[0];
25527             for(var i = 0, len = this.buttons.length; i < len; i++) {
25528                 var b = this.buttons[i];
25529                 var td = document.createElement('td');
25530                 td.className = 'x-form-btn-td';
25531                 b.render(tr.appendChild(td));
25532             }
25533         }
25534         if(this.monitorValid){ // initialize after render
25535             this.startMonitoring();
25536         }
25537         this.fireEvent('rendered', this);
25538         return this;
25539     },
25540
25541     /**
25542      * Adds a button to the footer of the form - this <b>must</b> be called before the form is rendered.
25543      * @param {String/Object} config A string becomes the button text, an object can either be a Button config
25544      * object or a valid Roo.DomHelper element config
25545      * @param {Function} handler The function called when the button is clicked
25546      * @param {Object} scope (optional) The scope of the handler function
25547      * @return {Roo.Button}
25548      */
25549     addButton : function(config, handler, scope){
25550         var bc = {
25551             handler: handler,
25552             scope: scope,
25553             minWidth: this.minButtonWidth,
25554             hideParent:true
25555         };
25556         if(typeof config == "string"){
25557             bc.text = config;
25558         }else{
25559             Roo.apply(bc, config);
25560         }
25561         var btn = new Roo.Button(null, bc);
25562         this.buttons.push(btn);
25563         return btn;
25564     },
25565
25566      /**
25567      * Adds a series of form elements (using the xtype property as the factory method.
25568      * Valid xtypes are:  TextField, TextArea .... Button, Layout, FieldSet, Column, (and 'end' to close a block)
25569      * @param {Object} config 
25570      */
25571     
25572     addxtype : function()
25573     {
25574         var ar = Array.prototype.slice.call(arguments, 0);
25575         var ret = false;
25576         for(var i = 0; i < ar.length; i++) {
25577             if (!ar[i]) {
25578                 continue; // skip -- if this happends something invalid got sent, we 
25579                 // should ignore it, as basically that interface element will not show up
25580                 // and that should be pretty obvious!!
25581             }
25582             
25583             if (Roo.form[ar[i].xtype]) {
25584                 ar[i].form = this;
25585                 var fe = Roo.factory(ar[i], Roo.form);
25586                 if (!ret) {
25587                     ret = fe;
25588                 }
25589                 fe.form = this;
25590                 if (fe.store) {
25591                     fe.store.form = this;
25592                 }
25593                 if (fe.isLayout) {  
25594                          
25595                     this.start(fe);
25596                     this.allItems.push(fe);
25597                     if (fe.items && fe.addxtype) {
25598                         fe.addxtype.apply(fe, fe.items);
25599                         delete fe.items;
25600                     }
25601                      this.end();
25602                     continue;
25603                 }
25604                 
25605                 
25606                  
25607                 this.add(fe);
25608               //  console.log('adding ' + ar[i].xtype);
25609             }
25610             if (ar[i].xtype == 'Button') {  
25611                 //console.log('adding button');
25612                 //console.log(ar[i]);
25613                 this.addButton(ar[i]);
25614                 this.allItems.push(fe);
25615                 continue;
25616             }
25617             
25618             if (ar[i].xtype == 'end') { // so we can add fieldsets... / layout etc.
25619                 alert('end is not supported on xtype any more, use items');
25620             //    this.end();
25621             //    //console.log('adding end');
25622             }
25623             
25624         }
25625         return ret;
25626     },
25627     
25628     /**
25629      * Starts monitoring of the valid state of this form. Usually this is done by passing the config
25630      * option "monitorValid"
25631      */
25632     startMonitoring : function(){
25633         if(!this.bound){
25634             this.bound = true;
25635             Roo.TaskMgr.start({
25636                 run : this.bindHandler,
25637                 interval : this.monitorPoll || 200,
25638                 scope: this
25639             });
25640         }
25641     },
25642
25643     /**
25644      * Stops monitoring of the valid state of this form
25645      */
25646     stopMonitoring : function(){
25647         this.bound = false;
25648     },
25649
25650     // private
25651     bindHandler : function(){
25652         if(!this.bound){
25653             return false; // stops binding
25654         }
25655         var valid = true;
25656         this.items.each(function(f){
25657             if(!f.isValid(true)){
25658                 valid = false;
25659                 return false;
25660             }
25661         });
25662         for(var i = 0, len = this.buttons.length; i < len; i++){
25663             var btn = this.buttons[i];
25664             if(btn.formBind === true && btn.disabled === valid){
25665                 btn.setDisabled(!valid);
25666             }
25667         }
25668         this.fireEvent('clientvalidation', this, valid);
25669     }
25670     
25671     
25672     
25673     
25674     
25675     
25676     
25677     
25678 });
25679
25680
25681 // back compat
25682 Roo.Form = Roo.form.Form;
25683 /*
25684  * Based on:
25685  * Ext JS Library 1.1.1
25686  * Copyright(c) 2006-2007, Ext JS, LLC.
25687  *
25688  * Originally Released Under LGPL - original licence link has changed is not relivant.
25689  *
25690  * Fork - LGPL
25691  * <script type="text/javascript">
25692  */
25693
25694 // as we use this in bootstrap.
25695 Roo.namespace('Roo.form');
25696  /**
25697  * @class Roo.form.Action
25698  * Internal Class used to handle form actions
25699  * @constructor
25700  * @param {Roo.form.BasicForm} el The form element or its id
25701  * @param {Object} config Configuration options
25702  */
25703
25704  
25705  
25706 // define the action interface
25707 Roo.form.Action = function(form, options){
25708     this.form = form;
25709     this.options = options || {};
25710 };
25711 /**
25712  * Client Validation Failed
25713  * @const 
25714  */
25715 Roo.form.Action.CLIENT_INVALID = 'client';
25716 /**
25717  * Server Validation Failed
25718  * @const 
25719  */
25720 Roo.form.Action.SERVER_INVALID = 'server';
25721  /**
25722  * Connect to Server Failed
25723  * @const 
25724  */
25725 Roo.form.Action.CONNECT_FAILURE = 'connect';
25726 /**
25727  * Reading Data from Server Failed
25728  * @const 
25729  */
25730 Roo.form.Action.LOAD_FAILURE = 'load';
25731
25732 Roo.form.Action.prototype = {
25733     type : 'default',
25734     failureType : undefined,
25735     response : undefined,
25736     result : undefined,
25737
25738     // interface method
25739     run : function(options){
25740
25741     },
25742
25743     // interface method
25744     success : function(response){
25745
25746     },
25747
25748     // interface method
25749     handleResponse : function(response){
25750
25751     },
25752
25753     // default connection failure
25754     failure : function(response){
25755         
25756         this.response = response;
25757         this.failureType = Roo.form.Action.CONNECT_FAILURE;
25758         this.form.afterAction(this, false);
25759     },
25760
25761     processResponse : function(response){
25762         this.response = response;
25763         if(!response.responseText){
25764             return true;
25765         }
25766         this.result = this.handleResponse(response);
25767         return this.result;
25768     },
25769
25770     // utility functions used internally
25771     getUrl : function(appendParams){
25772         var url = this.options.url || this.form.url || this.form.el.dom.action;
25773         if(appendParams){
25774             var p = this.getParams();
25775             if(p){
25776                 url += (url.indexOf('?') != -1 ? '&' : '?') + p;
25777             }
25778         }
25779         return url;
25780     },
25781
25782     getMethod : function(){
25783         return (this.options.method || this.form.method || this.form.el.dom.method || 'POST').toUpperCase();
25784     },
25785
25786     getParams : function(){
25787         var bp = this.form.baseParams;
25788         var p = this.options.params;
25789         if(p){
25790             if(typeof p == "object"){
25791                 p = Roo.urlEncode(Roo.applyIf(p, bp));
25792             }else if(typeof p == 'string' && bp){
25793                 p += '&' + Roo.urlEncode(bp);
25794             }
25795         }else if(bp){
25796             p = Roo.urlEncode(bp);
25797         }
25798         return p;
25799     },
25800
25801     createCallback : function(){
25802         return {
25803             success: this.success,
25804             failure: this.failure,
25805             scope: this,
25806             timeout: (this.form.timeout*1000),
25807             upload: this.form.fileUpload ? this.success : undefined
25808         };
25809     }
25810 };
25811
25812 Roo.form.Action.Submit = function(form, options){
25813     Roo.form.Action.Submit.superclass.constructor.call(this, form, options);
25814 };
25815
25816 Roo.extend(Roo.form.Action.Submit, Roo.form.Action, {
25817     type : 'submit',
25818
25819     haveProgress : false,
25820     uploadComplete : false,
25821     
25822     // uploadProgress indicator.
25823     uploadProgress : function()
25824     {
25825         if (!this.form.progressUrl) {
25826             return;
25827         }
25828         
25829         if (!this.haveProgress) {
25830             Roo.MessageBox.progress("Uploading", "Uploading");
25831         }
25832         if (this.uploadComplete) {
25833            Roo.MessageBox.hide();
25834            return;
25835         }
25836         
25837         this.haveProgress = true;
25838    
25839         var uid = this.form.findField('UPLOAD_IDENTIFIER').getValue();
25840         
25841         var c = new Roo.data.Connection();
25842         c.request({
25843             url : this.form.progressUrl,
25844             params: {
25845                 id : uid
25846             },
25847             method: 'GET',
25848             success : function(req){
25849                //console.log(data);
25850                 var rdata = false;
25851                 var edata;
25852                 try  {
25853                    rdata = Roo.decode(req.responseText)
25854                 } catch (e) {
25855                     Roo.log("Invalid data from server..");
25856                     Roo.log(edata);
25857                     return;
25858                 }
25859                 if (!rdata || !rdata.success) {
25860                     Roo.log(rdata);
25861                     Roo.MessageBox.alert(Roo.encode(rdata));
25862                     return;
25863                 }
25864                 var data = rdata.data;
25865                 
25866                 if (this.uploadComplete) {
25867                    Roo.MessageBox.hide();
25868                    return;
25869                 }
25870                    
25871                 if (data){
25872                     Roo.MessageBox.updateProgress(data.bytes_uploaded/data.bytes_total,
25873                        Math.floor((data.bytes_total - data.bytes_uploaded)/1000) + 'k remaining'
25874                     );
25875                 }
25876                 this.uploadProgress.defer(2000,this);
25877             },
25878        
25879             failure: function(data) {
25880                 Roo.log('progress url failed ');
25881                 Roo.log(data);
25882             },
25883             scope : this
25884         });
25885            
25886     },
25887     
25888     
25889     run : function()
25890     {
25891         // run get Values on the form, so it syncs any secondary forms.
25892         this.form.getValues();
25893         
25894         var o = this.options;
25895         var method = this.getMethod();
25896         var isPost = method == 'POST';
25897         if(o.clientValidation === false || this.form.isValid()){
25898             
25899             if (this.form.progressUrl) {
25900                 this.form.findField('UPLOAD_IDENTIFIER').setValue(
25901                     (new Date() * 1) + '' + Math.random());
25902                     
25903             } 
25904             
25905             
25906             Roo.Ajax.request(Roo.apply(this.createCallback(), {
25907                 form:this.form.el.dom,
25908                 url:this.getUrl(!isPost),
25909                 method: method,
25910                 params:isPost ? this.getParams() : null,
25911                 isUpload: this.form.fileUpload,
25912                 formData : this.form.formData
25913             }));
25914             
25915             this.uploadProgress();
25916
25917         }else if (o.clientValidation !== false){ // client validation failed
25918             this.failureType = Roo.form.Action.CLIENT_INVALID;
25919             this.form.afterAction(this, false);
25920         }
25921     },
25922
25923     success : function(response)
25924     {
25925         this.uploadComplete= true;
25926         if (this.haveProgress) {
25927             Roo.MessageBox.hide();
25928         }
25929         
25930         
25931         var result = this.processResponse(response);
25932         if(result === true || result.success){
25933             this.form.afterAction(this, true);
25934             return;
25935         }
25936         if(result.errors){
25937             this.form.markInvalid(result.errors);
25938             this.failureType = Roo.form.Action.SERVER_INVALID;
25939         }
25940         this.form.afterAction(this, false);
25941     },
25942     failure : function(response)
25943     {
25944         this.uploadComplete= true;
25945         if (this.haveProgress) {
25946             Roo.MessageBox.hide();
25947         }
25948         
25949         this.response = response;
25950         this.failureType = Roo.form.Action.CONNECT_FAILURE;
25951         this.form.afterAction(this, false);
25952     },
25953     
25954     handleResponse : function(response){
25955         if(this.form.errorReader){
25956             var rs = this.form.errorReader.read(response);
25957             var errors = [];
25958             if(rs.records){
25959                 for(var i = 0, len = rs.records.length; i < len; i++) {
25960                     var r = rs.records[i];
25961                     errors[i] = r.data;
25962                 }
25963             }
25964             if(errors.length < 1){
25965                 errors = null;
25966             }
25967             return {
25968                 success : rs.success,
25969                 errors : errors
25970             };
25971         }
25972         var ret = false;
25973         try {
25974             ret = Roo.decode(response.responseText);
25975         } catch (e) {
25976             ret = {
25977                 success: false,
25978                 errorMsg: "Failed to read server message: " + (response ? response.responseText : ' - no message'),
25979                 errors : []
25980             };
25981         }
25982         return ret;
25983         
25984     }
25985 });
25986
25987
25988 Roo.form.Action.Load = function(form, options){
25989     Roo.form.Action.Load.superclass.constructor.call(this, form, options);
25990     this.reader = this.form.reader;
25991 };
25992
25993 Roo.extend(Roo.form.Action.Load, Roo.form.Action, {
25994     type : 'load',
25995
25996     run : function(){
25997         
25998         Roo.Ajax.request(Roo.apply(
25999                 this.createCallback(), {
26000                     method:this.getMethod(),
26001                     url:this.getUrl(false),
26002                     params:this.getParams()
26003         }));
26004     },
26005
26006     success : function(response){
26007         
26008         var result = this.processResponse(response);
26009         if(result === true || !result.success || !result.data){
26010             this.failureType = Roo.form.Action.LOAD_FAILURE;
26011             this.form.afterAction(this, false);
26012             return;
26013         }
26014         this.form.clearInvalid();
26015         this.form.setValues(result.data);
26016         this.form.afterAction(this, true);
26017     },
26018
26019     handleResponse : function(response){
26020         if(this.form.reader){
26021             var rs = this.form.reader.read(response);
26022             var data = rs.records && rs.records[0] ? rs.records[0].data : null;
26023             return {
26024                 success : rs.success,
26025                 data : data
26026             };
26027         }
26028         return Roo.decode(response.responseText);
26029     }
26030 });
26031
26032 Roo.form.Action.ACTION_TYPES = {
26033     'load' : Roo.form.Action.Load,
26034     'submit' : Roo.form.Action.Submit
26035 };/*
26036  * Based on:
26037  * Ext JS Library 1.1.1
26038  * Copyright(c) 2006-2007, Ext JS, LLC.
26039  *
26040  * Originally Released Under LGPL - original licence link has changed is not relivant.
26041  *
26042  * Fork - LGPL
26043  * <script type="text/javascript">
26044  */
26045  
26046 /**
26047  * @class Roo.form.Layout
26048  * @extends Roo.Component
26049  * Creates a container for layout and rendering of fields in an {@link Roo.form.Form}.
26050  * @constructor
26051  * @param {Object} config Configuration options
26052  */
26053 Roo.form.Layout = function(config){
26054     var xitems = [];
26055     if (config.items) {
26056         xitems = config.items;
26057         delete config.items;
26058     }
26059     Roo.form.Layout.superclass.constructor.call(this, config);
26060     this.stack = [];
26061     Roo.each(xitems, this.addxtype, this);
26062      
26063 };
26064
26065 Roo.extend(Roo.form.Layout, Roo.Component, {
26066     /**
26067      * @cfg {String/Object} autoCreate
26068      * A DomHelper element spec used to autocreate the layout (defaults to {tag: 'div', cls: 'x-form-ct'})
26069      */
26070     /**
26071      * @cfg {String/Object/Function} style
26072      * A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or
26073      * a function which returns such a specification.
26074      */
26075     /**
26076      * @cfg {String} labelAlign
26077      * Valid values are "left," "top" and "right" (defaults to "left")
26078      */
26079     /**
26080      * @cfg {Number} labelWidth
26081      * Fixed width in pixels of all field labels (defaults to undefined)
26082      */
26083     /**
26084      * @cfg {Boolean} clear
26085      * True to add a clearing element at the end of this layout, equivalent to CSS clear: both (defaults to true)
26086      */
26087     clear : true,
26088     /**
26089      * @cfg {String} labelSeparator
26090      * The separator to use after field labels (defaults to ':')
26091      */
26092     labelSeparator : ':',
26093     /**
26094      * @cfg {Boolean} hideLabels
26095      * True to suppress the display of field labels in this layout (defaults to false)
26096      */
26097     hideLabels : false,
26098
26099     // private
26100     defaultAutoCreate : {tag: 'div', cls: 'x-form-ct'},
26101     
26102     isLayout : true,
26103     
26104     // private
26105     onRender : function(ct, position){
26106         if(this.el){ // from markup
26107             this.el = Roo.get(this.el);
26108         }else {  // generate
26109             var cfg = this.getAutoCreate();
26110             this.el = ct.createChild(cfg, position);
26111         }
26112         if(this.style){
26113             this.el.applyStyles(this.style);
26114         }
26115         if(this.labelAlign){
26116             this.el.addClass('x-form-label-'+this.labelAlign);
26117         }
26118         if(this.hideLabels){
26119             this.labelStyle = "display:none";
26120             this.elementStyle = "padding-left:0;";
26121         }else{
26122             if(typeof this.labelWidth == 'number'){
26123                 this.labelStyle = "width:"+this.labelWidth+"px;";
26124                 this.elementStyle = "padding-left:"+((this.labelWidth+(typeof this.labelPad == 'number' ? this.labelPad : 5))+'px')+";";
26125             }
26126             if(this.labelAlign == 'top'){
26127                 this.labelStyle = "width:auto;";
26128                 this.elementStyle = "padding-left:0;";
26129             }
26130         }
26131         var stack = this.stack;
26132         var slen = stack.length;
26133         if(slen > 0){
26134             if(!this.fieldTpl){
26135                 var t = new Roo.Template(
26136                     '<div class="x-form-item {5}">',
26137                         '<label for="{0}" style="{2}">{1}{4}</label>',
26138                         '<div class="x-form-element" id="x-form-el-{0}" style="{3}">',
26139                         '</div>',
26140                     '</div><div class="x-form-clear-left"></div>'
26141                 );
26142                 t.disableFormats = true;
26143                 t.compile();
26144                 Roo.form.Layout.prototype.fieldTpl = t;
26145             }
26146             for(var i = 0; i < slen; i++) {
26147                 if(stack[i].isFormField){
26148                     this.renderField(stack[i]);
26149                 }else{
26150                     this.renderComponent(stack[i]);
26151                 }
26152             }
26153         }
26154         if(this.clear){
26155             this.el.createChild({cls:'x-form-clear'});
26156         }
26157     },
26158
26159     // private
26160     renderField : function(f){
26161         f.fieldEl = Roo.get(this.fieldTpl.append(this.el, [
26162                f.id, //0
26163                f.fieldLabel, //1
26164                f.labelStyle||this.labelStyle||'', //2
26165                this.elementStyle||'', //3
26166                typeof f.labelSeparator == 'undefined' ? this.labelSeparator : f.labelSeparator, //4
26167                f.itemCls||this.itemCls||''  //5
26168        ], true).getPrevSibling());
26169     },
26170
26171     // private
26172     renderComponent : function(c){
26173         c.render(c.isLayout ? this.el : this.el.createChild());    
26174     },
26175     /**
26176      * Adds a object form elements (using the xtype property as the factory method.)
26177      * Valid xtypes are:  TextField, TextArea .... Button, Layout, FieldSet, Column
26178      * @param {Object} config 
26179      */
26180     addxtype : function(o)
26181     {
26182         // create the lement.
26183         o.form = this.form;
26184         var fe = Roo.factory(o, Roo.form);
26185         this.form.allItems.push(fe);
26186         this.stack.push(fe);
26187         
26188         if (fe.isFormField) {
26189             this.form.items.add(fe);
26190         }
26191          
26192         return fe;
26193     }
26194 });
26195
26196 /**
26197  * @class Roo.form.Column
26198  * @extends Roo.form.Layout
26199  * Creates a column container for layout and rendering of fields in an {@link Roo.form.Form}.
26200  * @constructor
26201  * @param {Object} config Configuration options
26202  */
26203 Roo.form.Column = function(config){
26204     Roo.form.Column.superclass.constructor.call(this, config);
26205 };
26206
26207 Roo.extend(Roo.form.Column, Roo.form.Layout, {
26208     /**
26209      * @cfg {Number/String} width
26210      * The fixed width of the column in pixels or CSS value (defaults to "auto")
26211      */
26212     /**
26213      * @cfg {String/Object} autoCreate
26214      * A DomHelper element spec used to autocreate the column (defaults to {tag: 'div', cls: 'x-form-ct x-form-column'})
26215      */
26216
26217     // private
26218     defaultAutoCreate : {tag: 'div', cls: 'x-form-ct x-form-column'},
26219
26220     // private
26221     onRender : function(ct, position){
26222         Roo.form.Column.superclass.onRender.call(this, ct, position);
26223         if(this.width){
26224             this.el.setWidth(this.width);
26225         }
26226     }
26227 });
26228
26229
26230 /**
26231  * @class Roo.form.Row
26232  * @extends Roo.form.Layout
26233  * Creates a row container for layout and rendering of fields in an {@link Roo.form.Form}.
26234  * @constructor
26235  * @param {Object} config Configuration options
26236  */
26237
26238  
26239 Roo.form.Row = function(config){
26240     Roo.form.Row.superclass.constructor.call(this, config);
26241 };
26242  
26243 Roo.extend(Roo.form.Row, Roo.form.Layout, {
26244       /**
26245      * @cfg {Number/String} width
26246      * The fixed width of the column in pixels or CSS value (defaults to "auto")
26247      */
26248     /**
26249      * @cfg {Number/String} height
26250      * The fixed height of the column in pixels or CSS value (defaults to "auto")
26251      */
26252     defaultAutoCreate : {tag: 'div', cls: 'x-form-ct x-form-row'},
26253     
26254     padWidth : 20,
26255     // private
26256     onRender : function(ct, position){
26257         //console.log('row render');
26258         if(!this.rowTpl){
26259             var t = new Roo.Template(
26260                 '<div class="x-form-item {5}" style="float:left;width:{6}px">',
26261                     '<label for="{0}" style="{2}">{1}{4}</label>',
26262                     '<div class="x-form-element" id="x-form-el-{0}" style="{3}">',
26263                     '</div>',
26264                 '</div>'
26265             );
26266             t.disableFormats = true;
26267             t.compile();
26268             Roo.form.Layout.prototype.rowTpl = t;
26269         }
26270         this.fieldTpl = this.rowTpl;
26271         
26272         //console.log('lw' + this.labelWidth +', la:' + this.labelAlign);
26273         var labelWidth = 100;
26274         
26275         if ((this.labelAlign != 'top')) {
26276             if (typeof this.labelWidth == 'number') {
26277                 labelWidth = this.labelWidth
26278             }
26279             this.padWidth =  20 + labelWidth;
26280             
26281         }
26282         
26283         Roo.form.Column.superclass.onRender.call(this, ct, position);
26284         if(this.width){
26285             this.el.setWidth(this.width);
26286         }
26287         if(this.height){
26288             this.el.setHeight(this.height);
26289         }
26290     },
26291     
26292     // private
26293     renderField : function(f){
26294         f.fieldEl = this.fieldTpl.append(this.el, [
26295                f.id, f.fieldLabel,
26296                f.labelStyle||this.labelStyle||'',
26297                this.elementStyle||'',
26298                typeof f.labelSeparator == 'undefined' ? this.labelSeparator : f.labelSeparator,
26299                f.itemCls||this.itemCls||'',
26300                f.width ? f.width + this.padWidth : 160 + this.padWidth
26301        ],true);
26302     }
26303 });
26304  
26305
26306 /**
26307  * @class Roo.form.FieldSet
26308  * @extends Roo.form.Layout
26309  * Creates a fieldset container for layout and rendering of fields in an {@link Roo.form.Form}.
26310  * @constructor
26311  * @param {Object} config Configuration options
26312  */
26313 Roo.form.FieldSet = function(config){
26314     Roo.form.FieldSet.superclass.constructor.call(this, config);
26315 };
26316
26317 Roo.extend(Roo.form.FieldSet, Roo.form.Layout, {
26318     /**
26319      * @cfg {String} legend
26320      * The text to display as the legend for the FieldSet (defaults to '')
26321      */
26322     /**
26323      * @cfg {String/Object} autoCreate
26324      * A DomHelper element spec used to autocreate the fieldset (defaults to {tag: 'fieldset', cn: {tag:'legend'}})
26325      */
26326
26327     // private
26328     defaultAutoCreate : {tag: 'fieldset', cn: {tag:'legend'}},
26329
26330     // private
26331     onRender : function(ct, position){
26332         Roo.form.FieldSet.superclass.onRender.call(this, ct, position);
26333         if(this.legend){
26334             this.setLegend(this.legend);
26335         }
26336     },
26337
26338     // private
26339     setLegend : function(text){
26340         if(this.rendered){
26341             this.el.child('legend').update(text);
26342         }
26343     }
26344 });/*
26345  * Based on:
26346  * Ext JS Library 1.1.1
26347  * Copyright(c) 2006-2007, Ext JS, LLC.
26348  *
26349  * Originally Released Under LGPL - original licence link has changed is not relivant.
26350  *
26351  * Fork - LGPL
26352  * <script type="text/javascript">
26353  */
26354 /**
26355  * @class Roo.form.VTypes
26356  * Overridable validation definitions. The validations provided are basic and intended to be easily customizable and extended.
26357  * @singleton
26358  */
26359 Roo.form.VTypes = function(){
26360     // closure these in so they are only created once.
26361     var alpha = /^[a-zA-Z_]+$/;
26362     var alphanum = /^[a-zA-Z0-9_]+$/;
26363     var email = /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,24}$/;
26364     var url = /(((https?)|(ftp)):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@&#;`~=%!]*)(\.\w{2,})?)*\/?)/i;
26365
26366     // All these messages and functions are configurable
26367     return {
26368         /**
26369          * The function used to validate email addresses
26370          * @param {String} value The email address
26371          */
26372         'email' : function(v){
26373             return email.test(v);
26374         },
26375         /**
26376          * The error text to display when the email validation function returns false
26377          * @type String
26378          */
26379         'emailText' : 'This field should be an e-mail address in the format "user@domain.com"',
26380         /**
26381          * The keystroke filter mask to be applied on email input
26382          * @type RegExp
26383          */
26384         'emailMask' : /[a-z0-9_\.\-@]/i,
26385
26386         /**
26387          * The function used to validate URLs
26388          * @param {String} value The URL
26389          */
26390         'url' : function(v){
26391             return url.test(v);
26392         },
26393         /**
26394          * The error text to display when the url validation function returns false
26395          * @type String
26396          */
26397         'urlText' : 'This field should be a URL in the format "http:/'+'/www.domain.com"',
26398         
26399         /**
26400          * The function used to validate alpha values
26401          * @param {String} value The value
26402          */
26403         'alpha' : function(v){
26404             return alpha.test(v);
26405         },
26406         /**
26407          * The error text to display when the alpha validation function returns false
26408          * @type String
26409          */
26410         'alphaText' : 'This field should only contain letters and _',
26411         /**
26412          * The keystroke filter mask to be applied on alpha input
26413          * @type RegExp
26414          */
26415         'alphaMask' : /[a-z_]/i,
26416
26417         /**
26418          * The function used to validate alphanumeric values
26419          * @param {String} value The value
26420          */
26421         'alphanum' : function(v){
26422             return alphanum.test(v);
26423         },
26424         /**
26425          * The error text to display when the alphanumeric validation function returns false
26426          * @type String
26427          */
26428         'alphanumText' : 'This field should only contain letters, numbers and _',
26429         /**
26430          * The keystroke filter mask to be applied on alphanumeric input
26431          * @type RegExp
26432          */
26433         'alphanumMask' : /[a-z0-9_]/i
26434     };
26435 }();//<script type="text/javascript">
26436
26437 /**
26438  * @class Roo.form.FCKeditor
26439  * @extends Roo.form.TextArea
26440  * Wrapper around the FCKEditor http://www.fckeditor.net
26441  * @constructor
26442  * Creates a new FCKeditor
26443  * @param {Object} config Configuration options
26444  */
26445 Roo.form.FCKeditor = function(config){
26446     Roo.form.FCKeditor.superclass.constructor.call(this, config);
26447     this.addEvents({
26448          /**
26449          * @event editorinit
26450          * Fired when the editor is initialized - you can add extra handlers here..
26451          * @param {FCKeditor} this
26452          * @param {Object} the FCK object.
26453          */
26454         editorinit : true
26455     });
26456     
26457     
26458 };
26459 Roo.form.FCKeditor.editors = { };
26460 Roo.extend(Roo.form.FCKeditor, Roo.form.TextArea,
26461 {
26462     //defaultAutoCreate : {
26463     //    tag : "textarea",style   : "width:100px;height:60px;" ,autocomplete    : "off"
26464     //},
26465     // private
26466     /**
26467      * @cfg {Object} fck options - see fck manual for details.
26468      */
26469     fckconfig : false,
26470     
26471     /**
26472      * @cfg {Object} fck toolbar set (Basic or Default)
26473      */
26474     toolbarSet : 'Basic',
26475     /**
26476      * @cfg {Object} fck BasePath
26477      */ 
26478     basePath : '/fckeditor/',
26479     
26480     
26481     frame : false,
26482     
26483     value : '',
26484     
26485    
26486     onRender : function(ct, position)
26487     {
26488         if(!this.el){
26489             this.defaultAutoCreate = {
26490                 tag: "textarea",
26491                 style:"width:300px;height:60px;",
26492                 autocomplete: "new-password"
26493             };
26494         }
26495         Roo.form.FCKeditor.superclass.onRender.call(this, ct, position);
26496         /*
26497         if(this.grow){
26498             this.textSizeEl = Roo.DomHelper.append(document.body, {tag: "pre", cls: "x-form-grow-sizer"});
26499             if(this.preventScrollbars){
26500                 this.el.setStyle("overflow", "hidden");
26501             }
26502             this.el.setHeight(this.growMin);
26503         }
26504         */
26505         //console.log('onrender' + this.getId() );
26506         Roo.form.FCKeditor.editors[this.getId()] = this;
26507          
26508
26509         this.replaceTextarea() ;
26510         
26511     },
26512     
26513     getEditor : function() {
26514         return this.fckEditor;
26515     },
26516     /**
26517      * Sets a data value into the field and validates it.  To set the value directly without validation see {@link #setRawValue}.
26518      * @param {Mixed} value The value to set
26519      */
26520     
26521     
26522     setValue : function(value)
26523     {
26524         //console.log('setValue: ' + value);
26525         
26526         if(typeof(value) == 'undefined') { // not sure why this is happending...
26527             return;
26528         }
26529         Roo.form.FCKeditor.superclass.setValue.apply(this,[value]);
26530         
26531         //if(!this.el || !this.getEditor()) {
26532         //    this.value = value;
26533             //this.setValue.defer(100,this,[value]);    
26534         //    return;
26535         //} 
26536         
26537         if(!this.getEditor()) {
26538             return;
26539         }
26540         
26541         this.getEditor().SetData(value);
26542         
26543         //
26544
26545     },
26546
26547     /**
26548      * Returns the normalized data value (undefined or emptyText will be returned as '').  To return the raw value see {@link #getRawValue}.
26549      * @return {Mixed} value The field value
26550      */
26551     getValue : function()
26552     {
26553         
26554         if (this.frame && this.frame.dom.style.display == 'none') {
26555             return Roo.form.FCKeditor.superclass.getValue.call(this);
26556         }
26557         
26558         if(!this.el || !this.getEditor()) {
26559            
26560            // this.getValue.defer(100,this); 
26561             return this.value;
26562         }
26563        
26564         
26565         var value=this.getEditor().GetData();
26566         Roo.form.FCKeditor.superclass.setValue.apply(this,[value]);
26567         return Roo.form.FCKeditor.superclass.getValue.call(this);
26568         
26569
26570     },
26571
26572     /**
26573      * Returns the raw data value which may or may not be a valid, defined value.  To return a normalized value see {@link #getValue}.
26574      * @return {Mixed} value The field value
26575      */
26576     getRawValue : function()
26577     {
26578         if (this.frame && this.frame.dom.style.display == 'none') {
26579             return Roo.form.FCKeditor.superclass.getRawValue.call(this);
26580         }
26581         
26582         if(!this.el || !this.getEditor()) {
26583             //this.getRawValue.defer(100,this); 
26584             return this.value;
26585             return;
26586         }
26587         
26588         
26589         
26590         var value=this.getEditor().GetData();
26591         Roo.form.FCKeditor.superclass.setRawValue.apply(this,[value]);
26592         return Roo.form.FCKeditor.superclass.getRawValue.call(this);
26593          
26594     },
26595     
26596     setSize : function(w,h) {
26597         
26598         
26599         
26600         //if (this.frame && this.frame.dom.style.display == 'none') {
26601         //    Roo.form.FCKeditor.superclass.setSize.apply(this, [w, h]);
26602         //    return;
26603         //}
26604         //if(!this.el || !this.getEditor()) {
26605         //    this.setSize.defer(100,this, [w,h]); 
26606         //    return;
26607         //}
26608         
26609         
26610         
26611         Roo.form.FCKeditor.superclass.setSize.apply(this, [w, h]);
26612         
26613         this.frame.dom.setAttribute('width', w);
26614         this.frame.dom.setAttribute('height', h);
26615         this.frame.setSize(w,h);
26616         
26617     },
26618     
26619     toggleSourceEdit : function(value) {
26620         
26621       
26622          
26623         this.el.dom.style.display = value ? '' : 'none';
26624         this.frame.dom.style.display = value ?  'none' : '';
26625         
26626     },
26627     
26628     
26629     focus: function(tag)
26630     {
26631         if (this.frame.dom.style.display == 'none') {
26632             return Roo.form.FCKeditor.superclass.focus.call(this);
26633         }
26634         if(!this.el || !this.getEditor()) {
26635             this.focus.defer(100,this, [tag]); 
26636             return;
26637         }
26638         
26639         
26640         
26641         
26642         var tgs = this.getEditor().EditorDocument.getElementsByTagName(tag);
26643         this.getEditor().Focus();
26644         if (tgs.length) {
26645             if (!this.getEditor().Selection.GetSelection()) {
26646                 this.focus.defer(100,this, [tag]); 
26647                 return;
26648             }
26649             
26650             
26651             var r = this.getEditor().EditorDocument.createRange();
26652             r.setStart(tgs[0],0);
26653             r.setEnd(tgs[0],0);
26654             this.getEditor().Selection.GetSelection().removeAllRanges();
26655             this.getEditor().Selection.GetSelection().addRange(r);
26656             this.getEditor().Focus();
26657         }
26658         
26659     },
26660     
26661     
26662     
26663     replaceTextarea : function()
26664     {
26665         if ( document.getElementById( this.getId() + '___Frame' ) ) {
26666             return ;
26667         }
26668         //if ( !this.checkBrowser || this._isCompatibleBrowser() )
26669         //{
26670             // We must check the elements firstly using the Id and then the name.
26671         var oTextarea = document.getElementById( this.getId() );
26672         
26673         var colElementsByName = document.getElementsByName( this.getId() ) ;
26674          
26675         oTextarea.style.display = 'none' ;
26676
26677         if ( oTextarea.tabIndex ) {            
26678             this.TabIndex = oTextarea.tabIndex ;
26679         }
26680         
26681         this._insertHtmlBefore( this._getConfigHtml(), oTextarea ) ;
26682         this._insertHtmlBefore( this._getIFrameHtml(), oTextarea ) ;
26683         this.frame = Roo.get(this.getId() + '___Frame')
26684     },
26685     
26686     _getConfigHtml : function()
26687     {
26688         var sConfig = '' ;
26689
26690         for ( var o in this.fckconfig ) {
26691             sConfig += sConfig.length > 0  ? '&amp;' : '';
26692             sConfig += encodeURIComponent( o ) + '=' + encodeURIComponent( this.fckconfig[o] ) ;
26693         }
26694
26695         return '<input type="hidden" id="' + this.getId() + '___Config" value="' + sConfig + '" style="display:none" />' ;
26696     },
26697     
26698     
26699     _getIFrameHtml : function()
26700     {
26701         var sFile = 'fckeditor.html' ;
26702         /* no idea what this is about..
26703         try
26704         {
26705             if ( (/fcksource=true/i).test( window.top.location.search ) )
26706                 sFile = 'fckeditor.original.html' ;
26707         }
26708         catch (e) { 
26709         */
26710
26711         var sLink = this.basePath + 'editor/' + sFile + '?InstanceName=' + encodeURIComponent( this.getId() ) ;
26712         sLink += this.toolbarSet ? ( '&amp;Toolbar=' + this.toolbarSet)  : '';
26713         
26714         
26715         var html = '<iframe id="' + this.getId() +
26716             '___Frame" src="' + sLink +
26717             '" width="' + this.width +
26718             '" height="' + this.height + '"' +
26719             (this.tabIndex ?  ' tabindex="' + this.tabIndex + '"' :'' ) +
26720             ' frameborder="0" scrolling="no"></iframe>' ;
26721
26722         return html ;
26723     },
26724     
26725     _insertHtmlBefore : function( html, element )
26726     {
26727         if ( element.insertAdjacentHTML )       {
26728             // IE
26729             element.insertAdjacentHTML( 'beforeBegin', html ) ;
26730         } else { // Gecko
26731             var oRange = document.createRange() ;
26732             oRange.setStartBefore( element ) ;
26733             var oFragment = oRange.createContextualFragment( html );
26734             element.parentNode.insertBefore( oFragment, element ) ;
26735         }
26736     }
26737     
26738     
26739   
26740     
26741     
26742     
26743     
26744
26745 });
26746
26747 //Roo.reg('fckeditor', Roo.form.FCKeditor);
26748
26749 function FCKeditor_OnComplete(editorInstance){
26750     var f = Roo.form.FCKeditor.editors[editorInstance.Name];
26751     f.fckEditor = editorInstance;
26752     //console.log("loaded");
26753     f.fireEvent('editorinit', f, editorInstance);
26754
26755   
26756
26757  
26758
26759
26760
26761
26762
26763
26764
26765
26766
26767
26768
26769
26770
26771
26772
26773 //<script type="text/javascript">
26774 /**
26775  * @class Roo.form.GridField
26776  * @extends Roo.form.Field
26777  * Embed a grid (or editable grid into a form)
26778  * STATUS ALPHA
26779  * 
26780  * This embeds a grid in a form, the value of the field should be the json encoded array of rows
26781  * it needs 
26782  * xgrid.store = Roo.data.Store
26783  * xgrid.store.proxy = Roo.data.MemoryProxy (data = [] )
26784  * xgrid.store.reader = Roo.data.JsonReader 
26785  * 
26786  * 
26787  * @constructor
26788  * Creates a new GridField
26789  * @param {Object} config Configuration options
26790  */
26791 Roo.form.GridField = function(config){
26792     Roo.form.GridField.superclass.constructor.call(this, config);
26793      
26794 };
26795
26796 Roo.extend(Roo.form.GridField, Roo.form.Field,  {
26797     /**
26798      * @cfg {Number} width  - used to restrict width of grid..
26799      */
26800     width : 100,
26801     /**
26802      * @cfg {Number} height - used to restrict height of grid..
26803      */
26804     height : 50,
26805      /**
26806      * @cfg {Object} xgrid (xtype'd description of grid) { xtype : 'Grid', dataSource: .... }
26807          * 
26808          *}
26809      */
26810     xgrid : false, 
26811     /**
26812      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
26813      * {tag: "input", type: "checkbox", autocomplete: "off"})
26814      */
26815    // defaultAutoCreate : { tag: 'div' },
26816     defaultAutoCreate : { tag: 'input', type: 'hidden', autocomplete: 'new-password'},
26817     /**
26818      * @cfg {String} addTitle Text to include for adding a title.
26819      */
26820     addTitle : false,
26821     //
26822     onResize : function(){
26823         Roo.form.Field.superclass.onResize.apply(this, arguments);
26824     },
26825
26826     initEvents : function(){
26827         // Roo.form.Checkbox.superclass.initEvents.call(this);
26828         // has no events...
26829        
26830     },
26831
26832
26833     getResizeEl : function(){
26834         return this.wrap;
26835     },
26836
26837     getPositionEl : function(){
26838         return this.wrap;
26839     },
26840
26841     // private
26842     onRender : function(ct, position){
26843         
26844         this.style = this.style || 'overflow: hidden; border:1px solid #c3daf9;';
26845         var style = this.style;
26846         delete this.style;
26847         
26848         Roo.form.GridField.superclass.onRender.call(this, ct, position);
26849         this.wrap = this.el.wrap({cls: ''}); // not sure why ive done thsi...
26850         this.viewEl = this.wrap.createChild({ tag: 'div' });
26851         if (style) {
26852             this.viewEl.applyStyles(style);
26853         }
26854         if (this.width) {
26855             this.viewEl.setWidth(this.width);
26856         }
26857         if (this.height) {
26858             this.viewEl.setHeight(this.height);
26859         }
26860         //if(this.inputValue !== undefined){
26861         //this.setValue(this.value);
26862         
26863         
26864         this.grid = new Roo.grid[this.xgrid.xtype](this.viewEl, this.xgrid);
26865         
26866         
26867         this.grid.render();
26868         this.grid.getDataSource().on('remove', this.refreshValue, this);
26869         this.grid.getDataSource().on('update', this.refreshValue, this);
26870         this.grid.on('afteredit', this.refreshValue, this);
26871  
26872     },
26873      
26874     
26875     /**
26876      * Sets the value of the item. 
26877      * @param {String} either an object  or a string..
26878      */
26879     setValue : function(v){
26880         //this.value = v;
26881         v = v || []; // empty set..
26882         // this does not seem smart - it really only affects memoryproxy grids..
26883         if (this.grid && this.grid.getDataSource() && typeof(v) != 'undefined') {
26884             var ds = this.grid.getDataSource();
26885             // assumes a json reader..
26886             var data = {}
26887             data[ds.reader.meta.root ] =  typeof(v) == 'string' ? Roo.decode(v) : v;
26888             ds.loadData( data);
26889         }
26890         // clear selection so it does not get stale.
26891         if (this.grid.sm) { 
26892             this.grid.sm.clearSelections();
26893         }
26894         
26895         Roo.form.GridField.superclass.setValue.call(this, v);
26896         this.refreshValue();
26897         // should load data in the grid really....
26898     },
26899     
26900     // private
26901     refreshValue: function() {
26902          var val = [];
26903         this.grid.getDataSource().each(function(r) {
26904             val.push(r.data);
26905         });
26906         this.el.dom.value = Roo.encode(val);
26907     }
26908     
26909      
26910     
26911     
26912 });/*
26913  * Based on:
26914  * Ext JS Library 1.1.1
26915  * Copyright(c) 2006-2007, Ext JS, LLC.
26916  *
26917  * Originally Released Under LGPL - original licence link has changed is not relivant.
26918  *
26919  * Fork - LGPL
26920  * <script type="text/javascript">
26921  */
26922 /**
26923  * @class Roo.form.DisplayField
26924  * @extends Roo.form.Field
26925  * A generic Field to display non-editable data.
26926  * @cfg {Boolean} closable (true|false) default false
26927  * @constructor
26928  * Creates a new Display Field item.
26929  * @param {Object} config Configuration options
26930  */
26931 Roo.form.DisplayField = function(config){
26932     Roo.form.DisplayField.superclass.constructor.call(this, config);
26933     
26934     this.addEvents({
26935         /**
26936          * @event close
26937          * Fires after the click the close btn
26938              * @param {Roo.form.DisplayField} this
26939              */
26940         close : true
26941     });
26942 };
26943
26944 Roo.extend(Roo.form.DisplayField, Roo.form.TextField,  {
26945     inputType:      'hidden',
26946     allowBlank:     true,
26947     readOnly:         true,
26948     
26949  
26950     /**
26951      * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
26952      */
26953     focusClass : undefined,
26954     /**
26955      * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to "x-form-field")
26956      */
26957     fieldClass: 'x-form-field',
26958     
26959      /**
26960      * @cfg {Function} valueRenderer The renderer for the field (so you can reformat output). should return raw HTML
26961      */
26962     valueRenderer: undefined,
26963     
26964     width: 100,
26965     /**
26966      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
26967      * {tag: "input", type: "checkbox", autocomplete: "off"})
26968      */
26969      
26970  //   defaultAutoCreate : { tag: 'input', type: 'hidden', autocomplete: 'off'},
26971  
26972     closable : false,
26973     
26974     onResize : function(){
26975         Roo.form.DisplayField.superclass.onResize.apply(this, arguments);
26976         
26977     },
26978
26979     initEvents : function(){
26980         // Roo.form.Checkbox.superclass.initEvents.call(this);
26981         // has no events...
26982         
26983         if(this.closable){
26984             this.closeEl.on('click', this.onClose, this);
26985         }
26986        
26987     },
26988
26989
26990     getResizeEl : function(){
26991         return this.wrap;
26992     },
26993
26994     getPositionEl : function(){
26995         return this.wrap;
26996     },
26997
26998     // private
26999     onRender : function(ct, position){
27000         
27001         Roo.form.DisplayField.superclass.onRender.call(this, ct, position);
27002         //if(this.inputValue !== undefined){
27003         this.wrap = this.el.wrap();
27004         
27005         this.viewEl = this.wrap.createChild({ tag: 'div', cls: 'x-form-displayfield'});
27006         
27007         if(this.closable){
27008             this.closeEl = this.wrap.createChild({ tag: 'div', cls: 'x-dlg-close'});
27009         }
27010         
27011         if (this.bodyStyle) {
27012             this.viewEl.applyStyles(this.bodyStyle);
27013         }
27014         //this.viewEl.setStyle('padding', '2px');
27015         
27016         this.setValue(this.value);
27017         
27018     },
27019 /*
27020     // private
27021     initValue : Roo.emptyFn,
27022
27023   */
27024
27025         // private
27026     onClick : function(){
27027         
27028     },
27029
27030     /**
27031      * Sets the checked state of the checkbox.
27032      * @param {Boolean/String} checked True, 'true', '1', or 'on' to check the checkbox, any other value will uncheck it.
27033      */
27034     setValue : function(v){
27035         this.value = v;
27036         var html = this.valueRenderer ?  this.valueRenderer(v) : String.format('{0}', v);
27037         // this might be called before we have a dom element..
27038         if (!this.viewEl) {
27039             return;
27040         }
27041         this.viewEl.dom.innerHTML = html;
27042         Roo.form.DisplayField.superclass.setValue.call(this, v);
27043
27044     },
27045     
27046     onClose : function(e)
27047     {
27048         e.preventDefault();
27049         
27050         this.fireEvent('close', this);
27051     }
27052 });/*
27053  * 
27054  * Licence- LGPL
27055  * 
27056  */
27057
27058 /**
27059  * @class Roo.form.DayPicker
27060  * @extends Roo.form.Field
27061  * A Day picker show [M] [T] [W] ....
27062  * @constructor
27063  * Creates a new Day Picker
27064  * @param {Object} config Configuration options
27065  */
27066 Roo.form.DayPicker= function(config){
27067     Roo.form.DayPicker.superclass.constructor.call(this, config);
27068      
27069 };
27070
27071 Roo.extend(Roo.form.DayPicker, Roo.form.Field,  {
27072     /**
27073      * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
27074      */
27075     focusClass : undefined,
27076     /**
27077      * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to "x-form-field")
27078      */
27079     fieldClass: "x-form-field",
27080    
27081     /**
27082      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
27083      * {tag: "input", type: "checkbox", autocomplete: "off"})
27084      */
27085     defaultAutoCreate : { tag: "input", type: 'hidden', autocomplete: "new-password"},
27086     
27087    
27088     actionMode : 'viewEl', 
27089     //
27090     // private
27091  
27092     inputType : 'hidden',
27093     
27094      
27095     inputElement: false, // real input element?
27096     basedOn: false, // ????
27097     
27098     isFormField: true, // not sure where this is needed!!!!
27099
27100     onResize : function(){
27101         Roo.form.Checkbox.superclass.onResize.apply(this, arguments);
27102         if(!this.boxLabel){
27103             this.el.alignTo(this.wrap, 'c-c');
27104         }
27105     },
27106
27107     initEvents : function(){
27108         Roo.form.Checkbox.superclass.initEvents.call(this);
27109         this.el.on("click", this.onClick,  this);
27110         this.el.on("change", this.onClick,  this);
27111     },
27112
27113
27114     getResizeEl : function(){
27115         return this.wrap;
27116     },
27117
27118     getPositionEl : function(){
27119         return this.wrap;
27120     },
27121
27122     
27123     // private
27124     onRender : function(ct, position){
27125         Roo.form.Checkbox.superclass.onRender.call(this, ct, position);
27126        
27127         this.wrap = this.el.wrap({cls: 'x-form-daypick-item '});
27128         
27129         var r1 = '<table><tr>';
27130         var r2 = '<tr class="x-form-daypick-icons">';
27131         for (var i=0; i < 7; i++) {
27132             r1+= '<td><div>' + Date.dayNames[i].substring(0,3) + '</div></td>';
27133             r2+= '<td><img class="x-menu-item-icon" src="' + Roo.BLANK_IMAGE_URL  +'"></td>';
27134         }
27135         
27136         var viewEl = this.wrap.createChild( r1 + '</tr>' + r2 + '</tr></table>');
27137         viewEl.select('img').on('click', this.onClick, this);
27138         this.viewEl = viewEl;   
27139         
27140         
27141         // this will not work on Chrome!!!
27142         this.el.on('DOMAttrModified', this.setFromHidden,  this); //ff
27143         this.el.on('propertychange', this.setFromHidden,  this);  //ie
27144         
27145         
27146           
27147
27148     },
27149
27150     // private
27151     initValue : Roo.emptyFn,
27152
27153     /**
27154      * Returns the checked state of the checkbox.
27155      * @return {Boolean} True if checked, else false
27156      */
27157     getValue : function(){
27158         return this.el.dom.value;
27159         
27160     },
27161
27162         // private
27163     onClick : function(e){ 
27164         //this.setChecked(!this.checked);
27165         Roo.get(e.target).toggleClass('x-menu-item-checked');
27166         this.refreshValue();
27167         //if(this.el.dom.checked != this.checked){
27168         //    this.setValue(this.el.dom.checked);
27169        // }
27170     },
27171     
27172     // private
27173     refreshValue : function()
27174     {
27175         var val = '';
27176         this.viewEl.select('img',true).each(function(e,i,n)  {
27177             val += e.is(".x-menu-item-checked") ? String(n) : '';
27178         });
27179         this.setValue(val, true);
27180     },
27181
27182     /**
27183      * Sets the checked state of the checkbox.
27184      * On is always based on a string comparison between inputValue and the param.
27185      * @param {Boolean/String} value - the value to set 
27186      * @param {Boolean/String} suppressEvent - whether to suppress the checkchange event.
27187      */
27188     setValue : function(v,suppressEvent){
27189         if (!this.el.dom) {
27190             return;
27191         }
27192         var old = this.el.dom.value ;
27193         this.el.dom.value = v;
27194         if (suppressEvent) {
27195             return ;
27196         }
27197          
27198         // update display..
27199         this.viewEl.select('img',true).each(function(e,i,n)  {
27200             
27201             var on = e.is(".x-menu-item-checked");
27202             var newv = v.indexOf(String(n)) > -1;
27203             if (on != newv) {
27204                 e.toggleClass('x-menu-item-checked');
27205             }
27206             
27207         });
27208         
27209         
27210         this.fireEvent('change', this, v, old);
27211         
27212         
27213     },
27214    
27215     // handle setting of hidden value by some other method!!?!?
27216     setFromHidden: function()
27217     {
27218         if(!this.el){
27219             return;
27220         }
27221         //console.log("SET FROM HIDDEN");
27222         //alert('setFrom hidden');
27223         this.setValue(this.el.dom.value);
27224     },
27225     
27226     onDestroy : function()
27227     {
27228         if(this.viewEl){
27229             Roo.get(this.viewEl).remove();
27230         }
27231          
27232         Roo.form.DayPicker.superclass.onDestroy.call(this);
27233     }
27234
27235 });/*
27236  * RooJS Library 1.1.1
27237  * Copyright(c) 2008-2011  Alan Knowles
27238  *
27239  * License - LGPL
27240  */
27241  
27242
27243 /**
27244  * @class Roo.form.ComboCheck
27245  * @extends Roo.form.ComboBox
27246  * A combobox for multiple select items.
27247  *
27248  * FIXME - could do with a reset button..
27249  * 
27250  * @constructor
27251  * Create a new ComboCheck
27252  * @param {Object} config Configuration options
27253  */
27254 Roo.form.ComboCheck = function(config){
27255     Roo.form.ComboCheck.superclass.constructor.call(this, config);
27256     // should verify some data...
27257     // like
27258     // hiddenName = required..
27259     // displayField = required
27260     // valudField == required
27261     var req= [ 'hiddenName', 'displayField', 'valueField' ];
27262     var _t = this;
27263     Roo.each(req, function(e) {
27264         if ((typeof(_t[e]) == 'undefined' ) || !_t[e].length) {
27265             throw "Roo.form.ComboCheck : missing value for: " + e;
27266         }
27267     });
27268     
27269     
27270 };
27271
27272 Roo.extend(Roo.form.ComboCheck, Roo.form.ComboBox, {
27273      
27274      
27275     editable : false,
27276      
27277     selectedClass: 'x-menu-item-checked', 
27278     
27279     // private
27280     onRender : function(ct, position){
27281         var _t = this;
27282         
27283         
27284         
27285         if(!this.tpl){
27286             var cls = 'x-combo-list';
27287
27288             
27289             this.tpl =  new Roo.Template({
27290                 html :  '<div class="'+cls+'-item x-menu-check-item">' +
27291                    '<img class="x-menu-item-icon" style="margin: 0px;" src="' + Roo.BLANK_IMAGE_URL + '">' + 
27292                    '<span>{' + this.displayField + '}</span>' +
27293                     '</div>' 
27294                 
27295             });
27296         }
27297  
27298         
27299         Roo.form.ComboCheck.superclass.onRender.call(this, ct, position);
27300         this.view.singleSelect = false;
27301         this.view.multiSelect = true;
27302         this.view.toggleSelect = true;
27303         this.pageTb.add(new Roo.Toolbar.Fill(), {
27304             
27305             text: 'Done',
27306             handler: function()
27307             {
27308                 _t.collapse();
27309             }
27310         });
27311     },
27312     
27313     onViewOver : function(e, t){
27314         // do nothing...
27315         return;
27316         
27317     },
27318     
27319     onViewClick : function(doFocus,index){
27320         return;
27321         
27322     },
27323     select: function () {
27324         //Roo.log("SELECT CALLED");
27325     },
27326      
27327     selectByValue : function(xv, scrollIntoView){
27328         var ar = this.getValueArray();
27329         var sels = [];
27330         
27331         Roo.each(ar, function(v) {
27332             if(v === undefined || v === null){
27333                 return;
27334             }
27335             var r = this.findRecord(this.valueField, v);
27336             if(r){
27337                 sels.push(this.store.indexOf(r))
27338                 
27339             }
27340         },this);
27341         this.view.select(sels);
27342         return false;
27343     },
27344     
27345     
27346     
27347     onSelect : function(record, index){
27348        // Roo.log("onselect Called");
27349        // this is only called by the clear button now..
27350         this.view.clearSelections();
27351         this.setValue('[]');
27352         if (this.value != this.valueBefore) {
27353             this.fireEvent('change', this, this.value, this.valueBefore);
27354             this.valueBefore = this.value;
27355         }
27356     },
27357     getValueArray : function()
27358     {
27359         var ar = [] ;
27360         
27361         try {
27362             //Roo.log(this.value);
27363             if (typeof(this.value) == 'undefined') {
27364                 return [];
27365             }
27366             var ar = Roo.decode(this.value);
27367             return  ar instanceof Array ? ar : []; //?? valid?
27368             
27369         } catch(e) {
27370             Roo.log(e + "\nRoo.form.ComboCheck:getValueArray  invalid data:" + this.getValue());
27371             return [];
27372         }
27373          
27374     },
27375     expand : function ()
27376     {
27377         
27378         Roo.form.ComboCheck.superclass.expand.call(this);
27379         this.valueBefore = typeof(this.value) == 'undefined' ? '' : this.value;
27380         //this.valueBefore = typeof(this.valueBefore) == 'undefined' ? '' : this.valueBefore;
27381         
27382
27383     },
27384     
27385     collapse : function(){
27386         Roo.form.ComboCheck.superclass.collapse.call(this);
27387         var sl = this.view.getSelectedIndexes();
27388         var st = this.store;
27389         var nv = [];
27390         var tv = [];
27391         var r;
27392         Roo.each(sl, function(i) {
27393             r = st.getAt(i);
27394             nv.push(r.get(this.valueField));
27395         },this);
27396         this.setValue(Roo.encode(nv));
27397         if (this.value != this.valueBefore) {
27398
27399             this.fireEvent('change', this, this.value, this.valueBefore);
27400             this.valueBefore = this.value;
27401         }
27402         
27403     },
27404     
27405     setValue : function(v){
27406         // Roo.log(v);
27407         this.value = v;
27408         
27409         var vals = this.getValueArray();
27410         var tv = [];
27411         Roo.each(vals, function(k) {
27412             var r = this.findRecord(this.valueField, k);
27413             if(r){
27414                 tv.push(r.data[this.displayField]);
27415             }else if(this.valueNotFoundText !== undefined){
27416                 tv.push( this.valueNotFoundText );
27417             }
27418         },this);
27419        // Roo.log(tv);
27420         
27421         Roo.form.ComboBox.superclass.setValue.call(this, tv.join(', '));
27422         this.hiddenField.value = v;
27423         this.value = v;
27424     }
27425     
27426 });/*
27427  * Based on:
27428  * Ext JS Library 1.1.1
27429  * Copyright(c) 2006-2007, Ext JS, LLC.
27430  *
27431  * Originally Released Under LGPL - original licence link has changed is not relivant.
27432  *
27433  * Fork - LGPL
27434  * <script type="text/javascript">
27435  */
27436  
27437 /**
27438  * @class Roo.form.Signature
27439  * @extends Roo.form.Field
27440  * Signature field.  
27441  * @constructor
27442  * 
27443  * @param {Object} config Configuration options
27444  */
27445
27446 Roo.form.Signature = function(config){
27447     Roo.form.Signature.superclass.constructor.call(this, config);
27448     
27449     this.addEvents({// not in used??
27450          /**
27451          * @event confirm
27452          * Fires when the 'confirm' icon is pressed (add a listener to enable add button)
27453              * @param {Roo.form.Signature} combo This combo box
27454              */
27455         'confirm' : true,
27456         /**
27457          * @event reset
27458          * Fires when the 'edit' icon is pressed (add a listener to enable add button)
27459              * @param {Roo.form.ComboBox} combo This combo box
27460              * @param {Roo.data.Record|false} record The data record returned from the underlying store (or false on nothing selected)
27461              */
27462         'reset' : true
27463     });
27464 };
27465
27466 Roo.extend(Roo.form.Signature, Roo.form.Field,  {
27467     /**
27468      * @cfg {Object} labels Label to use when rendering a form.
27469      * defaults to 
27470      * labels : { 
27471      *      clear : "Clear",
27472      *      confirm : "Confirm"
27473      *  }
27474      */
27475     labels : { 
27476         clear : "Clear",
27477         confirm : "Confirm"
27478     },
27479     /**
27480      * @cfg {Number} width The signature panel width (defaults to 300)
27481      */
27482     width: 300,
27483     /**
27484      * @cfg {Number} height The signature panel height (defaults to 100)
27485      */
27486     height : 100,
27487     /**
27488      * @cfg {Boolean} allowBlank False to validate that the value length > 0 (defaults to false)
27489      */
27490     allowBlank : false,
27491     
27492     //private
27493     // {Object} signPanel The signature SVG panel element (defaults to {})
27494     signPanel : {},
27495     // {Boolean} isMouseDown False to validate that the mouse down event (defaults to false)
27496     isMouseDown : false,
27497     // {Boolean} isConfirmed validate the signature is confirmed or not for submitting form (defaults to false)
27498     isConfirmed : false,
27499     // {String} signatureTmp SVG mapping string (defaults to empty string)
27500     signatureTmp : '',
27501     
27502     
27503     defaultAutoCreate : { // modified by initCompnoent..
27504         tag: "input",
27505         type:"hidden"
27506     },
27507
27508     // private
27509     onRender : function(ct, position){
27510         
27511         Roo.form.Signature.superclass.onRender.call(this, ct, position);
27512         
27513         this.wrap = this.el.wrap({
27514             cls:'x-form-signature-wrap', style : 'width: ' + this.width + 'px', cn:{cls:'x-form-signature'}
27515         });
27516         
27517         this.createToolbar(this);
27518         this.signPanel = this.wrap.createChild({
27519                 tag: 'div',
27520                 style: 'width: ' + this.width + 'px; height: ' + this.height + 'px; border: 0;'
27521             }, this.el
27522         );
27523             
27524         this.svgID = Roo.id();
27525         this.svgEl = this.signPanel.createChild({
27526               xmlns : 'http://www.w3.org/2000/svg',
27527               tag : 'svg',
27528               id : this.svgID + "-svg",
27529               width: this.width,
27530               height: this.height,
27531               viewBox: '0 0 '+this.width+' '+this.height,
27532               cn : [
27533                 {
27534                     tag: "rect",
27535                     id: this.svgID + "-svg-r",
27536                     width: this.width,
27537                     height: this.height,
27538                     fill: "#ffa"
27539                 },
27540                 {
27541                     tag: "line",
27542                     id: this.svgID + "-svg-l",
27543                     x1: "0", // start
27544                     y1: (this.height*0.8), // start set the line in 80% of height
27545                     x2: this.width, // end
27546                     y2: (this.height*0.8), // end set the line in 80% of height
27547                     'stroke': "#666",
27548                     'stroke-width': "1",
27549                     'stroke-dasharray': "3",
27550                     'shape-rendering': "crispEdges",
27551                     'pointer-events': "none"
27552                 },
27553                 {
27554                     tag: "path",
27555                     id: this.svgID + "-svg-p",
27556                     'stroke': "navy",
27557                     'stroke-width': "3",
27558                     'fill': "none",
27559                     'pointer-events': 'none'
27560                 }
27561               ]
27562         });
27563         this.createSVG();
27564         this.svgBox = this.svgEl.dom.getScreenCTM();
27565     },
27566     createSVG : function(){ 
27567         var svg = this.signPanel;
27568         var r = svg.select('#'+ this.svgID + '-svg-r', true).first().dom;
27569         var t = this;
27570
27571         r.addEventListener('mousedown', function(e) { return t.down(e); }, false);
27572         r.addEventListener('mousemove', function(e) { return t.move(e); }, false);
27573         r.addEventListener('mouseup', function(e) { return t.up(e); }, false);
27574         r.addEventListener('mouseout', function(e) { return t.up(e); }, false);
27575         r.addEventListener('touchstart', function(e) { return t.down(e); }, false);
27576         r.addEventListener('touchmove', function(e) { return t.move(e); }, false);
27577         r.addEventListener('touchend', function(e) { return t.up(e); }, false);
27578         
27579     },
27580     isTouchEvent : function(e){
27581         return e.type.match(/^touch/);
27582     },
27583     getCoords : function (e) {
27584         var pt    = this.svgEl.dom.createSVGPoint();
27585         pt.x = e.clientX; 
27586         pt.y = e.clientY;
27587         if (this.isTouchEvent(e)) {
27588             pt.x =  e.targetTouches[0].clientX;
27589             pt.y = e.targetTouches[0].clientY;
27590         }
27591         var a = this.svgEl.dom.getScreenCTM();
27592         var b = a.inverse();
27593         var mx = pt.matrixTransform(b);
27594         return mx.x + ',' + mx.y;
27595     },
27596     //mouse event headler 
27597     down : function (e) {
27598         this.signatureTmp += 'M' + this.getCoords(e) + ' ';
27599         this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr('d', this.signatureTmp);
27600         
27601         this.isMouseDown = true;
27602         
27603         e.preventDefault();
27604     },
27605     move : function (e) {
27606         if (this.isMouseDown) {
27607             this.signatureTmp += 'L' + this.getCoords(e) + ' ';
27608             this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr( 'd', this.signatureTmp);
27609         }
27610         
27611         e.preventDefault();
27612     },
27613     up : function (e) {
27614         this.isMouseDown = false;
27615         var sp = this.signatureTmp.split(' ');
27616         
27617         if(sp.length > 1){
27618             if(!sp[sp.length-2].match(/^L/)){
27619                 sp.pop();
27620                 sp.pop();
27621                 sp.push("");
27622                 this.signatureTmp = sp.join(" ");
27623             }
27624         }
27625         if(this.getValue() != this.signatureTmp){
27626             this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#ffa');
27627             this.isConfirmed = false;
27628         }
27629         e.preventDefault();
27630     },
27631     
27632     /**
27633      * Protected method that will not generally be called directly. It
27634      * is called when the editor creates its toolbar. Override this method if you need to
27635      * add custom toolbar buttons.
27636      * @param {HtmlEditor} editor
27637      */
27638     createToolbar : function(editor){
27639          function btn(id, toggle, handler){
27640             var xid = fid + '-'+ id ;
27641             return {
27642                 id : xid,
27643                 cmd : id,
27644                 cls : 'x-btn-icon x-edit-'+id,
27645                 enableToggle:toggle !== false,
27646                 scope: editor, // was editor...
27647                 handler:handler||editor.relayBtnCmd,
27648                 clickEvent:'mousedown',
27649                 tooltip: etb.buttonTips[id] || undefined, ///tips ???
27650                 tabIndex:-1
27651             };
27652         }
27653         
27654         
27655         var tb = new Roo.Toolbar(editor.wrap.dom.firstChild);
27656         this.tb = tb;
27657         this.tb.add(
27658            {
27659                 cls : ' x-signature-btn x-signature-'+id,
27660                 scope: editor, // was editor...
27661                 handler: this.reset,
27662                 clickEvent:'mousedown',
27663                 text: this.labels.clear
27664             },
27665             {
27666                  xtype : 'Fill',
27667                  xns: Roo.Toolbar
27668             }, 
27669             {
27670                 cls : '  x-signature-btn x-signature-'+id,
27671                 scope: editor, // was editor...
27672                 handler: this.confirmHandler,
27673                 clickEvent:'mousedown',
27674                 text: this.labels.confirm
27675             }
27676         );
27677     
27678     },
27679     //public
27680     /**
27681      * when user is clicked confirm then show this image.....
27682      * 
27683      * @return {String} Image Data URI
27684      */
27685     getImageDataURI : function(){
27686         var svg = this.svgEl.dom.parentNode.innerHTML;
27687         var src = 'data:image/svg+xml;base64,'+window.btoa(svg);
27688         return src; 
27689     },
27690     /**
27691      * 
27692      * @return {Boolean} this.isConfirmed
27693      */
27694     getConfirmed : function(){
27695         return this.isConfirmed;
27696     },
27697     /**
27698      * 
27699      * @return {Number} this.width
27700      */
27701     getWidth : function(){
27702         return this.width;
27703     },
27704     /**
27705      * 
27706      * @return {Number} this.height
27707      */
27708     getHeight : function(){
27709         return this.height;
27710     },
27711     // private
27712     getSignature : function(){
27713         return this.signatureTmp;
27714     },
27715     // private
27716     reset : function(){
27717         this.signatureTmp = '';
27718         this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#ffa');
27719         this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr( 'd', '');
27720         this.isConfirmed = false;
27721         Roo.form.Signature.superclass.reset.call(this);
27722     },
27723     setSignature : function(s){
27724         this.signatureTmp = s;
27725         this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#ffa');
27726         this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr( 'd', s);
27727         this.setValue(s);
27728         this.isConfirmed = false;
27729         Roo.form.Signature.superclass.reset.call(this);
27730     }, 
27731     test : function(){
27732 //        Roo.log(this.signPanel.dom.contentWindow.up())
27733     },
27734     //private
27735     setConfirmed : function(){
27736         
27737         
27738         
27739 //        Roo.log(Roo.get(this.signPanel.dom.contentWindow.r).attr('fill', '#cfc'));
27740     },
27741     // private
27742     confirmHandler : function(){
27743         if(!this.getSignature()){
27744             return;
27745         }
27746         
27747         this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#cfc');
27748         this.setValue(this.getSignature());
27749         this.isConfirmed = true;
27750         
27751         this.fireEvent('confirm', this);
27752     },
27753     // private
27754     // Subclasses should provide the validation implementation by overriding this
27755     validateValue : function(value){
27756         if(this.allowBlank){
27757             return true;
27758         }
27759         
27760         if(this.isConfirmed){
27761             return true;
27762         }
27763         return false;
27764     }
27765 });/*
27766  * Based on:
27767  * Ext JS Library 1.1.1
27768  * Copyright(c) 2006-2007, Ext JS, LLC.
27769  *
27770  * Originally Released Under LGPL - original licence link has changed is not relivant.
27771  *
27772  * Fork - LGPL
27773  * <script type="text/javascript">
27774  */
27775  
27776
27777 /**
27778  * @class Roo.form.ComboBox
27779  * @extends Roo.form.TriggerField
27780  * A combobox control with support for autocomplete, remote-loading, paging and many other features.
27781  * @constructor
27782  * Create a new ComboBox.
27783  * @param {Object} config Configuration options
27784  */
27785 Roo.form.Select = function(config){
27786     Roo.form.Select.superclass.constructor.call(this, config);
27787      
27788 };
27789
27790 Roo.extend(Roo.form.Select , Roo.form.ComboBox, {
27791     /**
27792      * @cfg {String/HTMLElement/Element} transform The id, DOM node or element of an existing select to convert to a ComboBox
27793      */
27794     /**
27795      * @cfg {Boolean} lazyRender True to prevent the ComboBox from rendering until requested (should always be used when
27796      * rendering into an Roo.Editor, defaults to false)
27797      */
27798     /**
27799      * @cfg {Boolean/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to:
27800      * {tag: "input", type: "text", size: "24", autocomplete: "off"})
27801      */
27802     /**
27803      * @cfg {Roo.data.Store} store The data store to which this combo is bound (defaults to undefined)
27804      */
27805     /**
27806      * @cfg {String} title If supplied, a header element is created containing this text and added into the top of
27807      * the dropdown list (defaults to undefined, with no header element)
27808      */
27809
27810      /**
27811      * @cfg {String/Roo.Template} tpl The template to use to render the output
27812      */
27813      
27814     // private
27815     defaultAutoCreate : {tag: "select"  },
27816     /**
27817      * @cfg {Number} listWidth The width in pixels of the dropdown list (defaults to the width of the ComboBox field)
27818      */
27819     listWidth: undefined,
27820     /**
27821      * @cfg {String} displayField The underlying data field name to bind to this CombBox (defaults to undefined if
27822      * mode = 'remote' or 'text' if mode = 'local')
27823      */
27824     displayField: undefined,
27825     /**
27826      * @cfg {String} valueField The underlying data value name to bind to this CombBox (defaults to undefined if
27827      * mode = 'remote' or 'value' if mode = 'local'). 
27828      * Note: use of a valueField requires the user make a selection
27829      * in order for a value to be mapped.
27830      */
27831     valueField: undefined,
27832     
27833     
27834     /**
27835      * @cfg {String} hiddenName If specified, a hidden form field with this name is dynamically generated to store the
27836      * field's data value (defaults to the underlying DOM element's name)
27837      */
27838     hiddenName: undefined,
27839     /**
27840      * @cfg {String} listClass CSS class to apply to the dropdown list element (defaults to '')
27841      */
27842     listClass: '',
27843     /**
27844      * @cfg {String} selectedClass CSS class to apply to the selected item in the dropdown list (defaults to 'x-combo-selected')
27845      */
27846     selectedClass: 'x-combo-selected',
27847     /**
27848      * @cfg {String} triggerClass An additional CSS class used to style the trigger button.  The trigger will always get the
27849      * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-arrow-trigger'
27850      * which displays a downward arrow icon).
27851      */
27852     triggerClass : 'x-form-arrow-trigger',
27853     /**
27854      * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
27855      */
27856     shadow:'sides',
27857     /**
27858      * @cfg {String} listAlign A valid anchor position value. See {@link Roo.Element#alignTo} for details on supported
27859      * anchor positions (defaults to 'tl-bl')
27860      */
27861     listAlign: 'tl-bl?',
27862     /**
27863      * @cfg {Number} maxHeight The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300)
27864      */
27865     maxHeight: 300,
27866     /**
27867      * @cfg {String} triggerAction The action to execute when the trigger field is activated.  Use 'all' to run the
27868      * query specified by the allQuery config option (defaults to 'query')
27869      */
27870     triggerAction: 'query',
27871     /**
27872      * @cfg {Number} minChars The minimum number of characters the user must type before autocomplete and typeahead activate
27873      * (defaults to 4, does not apply if editable = false)
27874      */
27875     minChars : 4,
27876     /**
27877      * @cfg {Boolean} typeAhead True to populate and autoselect the remainder of the text being typed after a configurable
27878      * delay (typeAheadDelay) if it matches a known value (defaults to false)
27879      */
27880     typeAhead: false,
27881     /**
27882      * @cfg {Number} queryDelay The length of time in milliseconds to delay between the start of typing and sending the
27883      * query to filter the dropdown list (defaults to 500 if mode = 'remote' or 10 if mode = 'local')
27884      */
27885     queryDelay: 500,
27886     /**
27887      * @cfg {Number} pageSize If greater than 0, a paging toolbar is displayed in the footer of the dropdown list and the
27888      * filter queries will execute with page start and limit parameters.  Only applies when mode = 'remote' (defaults to 0)
27889      */
27890     pageSize: 0,
27891     /**
27892      * @cfg {Boolean} selectOnFocus True to select any existing text in the field immediately on focus.  Only applies
27893      * when editable = true (defaults to false)
27894      */
27895     selectOnFocus:false,
27896     /**
27897      * @cfg {String} queryParam Name of the query as it will be passed on the querystring (defaults to 'query')
27898      */
27899     queryParam: 'query',
27900     /**
27901      * @cfg {String} loadingText The text to display in the dropdown list while data is loading.  Only applies
27902      * when mode = 'remote' (defaults to 'Loading...')
27903      */
27904     loadingText: 'Loading...',
27905     /**
27906      * @cfg {Boolean} resizable True to add a resize handle to the bottom of the dropdown list (defaults to false)
27907      */
27908     resizable: false,
27909     /**
27910      * @cfg {Number} handleHeight The height in pixels of the dropdown list resize handle if resizable = true (defaults to 8)
27911      */
27912     handleHeight : 8,
27913     /**
27914      * @cfg {Boolean} editable False to prevent the user from typing text directly into the field, just like a
27915      * traditional select (defaults to true)
27916      */
27917     editable: true,
27918     /**
27919      * @cfg {String} allQuery The text query to send to the server to return all records for the list with no filtering (defaults to '')
27920      */
27921     allQuery: '',
27922     /**
27923      * @cfg {String} mode Set to 'local' if the ComboBox loads local data (defaults to 'remote' which loads from the server)
27924      */
27925     mode: 'remote',
27926     /**
27927      * @cfg {Number} minListWidth The minimum width of the dropdown list in pixels (defaults to 70, will be ignored if
27928      * listWidth has a higher value)
27929      */
27930     minListWidth : 70,
27931     /**
27932      * @cfg {Boolean} forceSelection True to restrict the selected value to one of the values in the list, false to
27933      * allow the user to set arbitrary text into the field (defaults to false)
27934      */
27935     forceSelection:false,
27936     /**
27937      * @cfg {Number} typeAheadDelay The length of time in milliseconds to wait until the typeahead text is displayed
27938      * if typeAhead = true (defaults to 250)
27939      */
27940     typeAheadDelay : 250,
27941     /**
27942      * @cfg {String} valueNotFoundText When using a name/value combo, if the value passed to setValue is not found in
27943      * the store, valueNotFoundText will be displayed as the field text if defined (defaults to undefined)
27944      */
27945     valueNotFoundText : undefined,
27946     
27947     /**
27948      * @cfg {String} defaultValue The value displayed after loading the store.
27949      */
27950     defaultValue: '',
27951     
27952     /**
27953      * @cfg {Boolean} blockFocus Prevents all focus calls, so it can work with things like HTML edtor bar
27954      */
27955     blockFocus : false,
27956     
27957     /**
27958      * @cfg {Boolean} disableClear Disable showing of clear button.
27959      */
27960     disableClear : false,
27961     /**
27962      * @cfg {Boolean} alwaysQuery  Disable caching of results, and always send query
27963      */
27964     alwaysQuery : false,
27965     
27966     //private
27967     addicon : false,
27968     editicon: false,
27969     
27970     // element that contains real text value.. (when hidden is used..)
27971      
27972     // private
27973     onRender : function(ct, position){
27974         Roo.form.Field.prototype.onRender.call(this, ct, position);
27975         
27976         if(this.store){
27977             this.store.on('beforeload', this.onBeforeLoad, this);
27978             this.store.on('load', this.onLoad, this);
27979             this.store.on('loadexception', this.onLoadException, this);
27980             this.store.load({});
27981         }
27982         
27983         
27984         
27985     },
27986
27987     // private
27988     initEvents : function(){
27989         //Roo.form.ComboBox.superclass.initEvents.call(this);
27990  
27991     },
27992
27993     onDestroy : function(){
27994        
27995         if(this.store){
27996             this.store.un('beforeload', this.onBeforeLoad, this);
27997             this.store.un('load', this.onLoad, this);
27998             this.store.un('loadexception', this.onLoadException, this);
27999         }
28000         //Roo.form.ComboBox.superclass.onDestroy.call(this);
28001     },
28002
28003     // private
28004     fireKey : function(e){
28005         if(e.isNavKeyPress() && !this.list.isVisible()){
28006             this.fireEvent("specialkey", this, e);
28007         }
28008     },
28009
28010     // private
28011     onResize: function(w, h){
28012         
28013         return; 
28014     
28015         
28016     },
28017
28018     /**
28019      * Allow or prevent the user from directly editing the field text.  If false is passed,
28020      * the user will only be able to select from the items defined in the dropdown list.  This method
28021      * is the runtime equivalent of setting the 'editable' config option at config time.
28022      * @param {Boolean} value True to allow the user to directly edit the field text
28023      */
28024     setEditable : function(value){
28025          
28026     },
28027
28028     // private
28029     onBeforeLoad : function(){
28030         
28031         Roo.log("Select before load");
28032         return;
28033     
28034         this.innerList.update(this.loadingText ?
28035                '<div class="loading-indicator">'+this.loadingText+'</div>' : '');
28036         //this.restrictHeight();
28037         this.selectedIndex = -1;
28038     },
28039
28040     // private
28041     onLoad : function(){
28042
28043     
28044         var dom = this.el.dom;
28045         dom.innerHTML = '';
28046          var od = dom.ownerDocument;
28047          
28048         if (this.emptyText) {
28049             var op = od.createElement('option');
28050             op.setAttribute('value', '');
28051             op.innerHTML = String.format('{0}', this.emptyText);
28052             dom.appendChild(op);
28053         }
28054         if(this.store.getCount() > 0){
28055            
28056             var vf = this.valueField;
28057             var df = this.displayField;
28058             this.store.data.each(function(r) {
28059                 // which colmsn to use... testing - cdoe / title..
28060                 var op = od.createElement('option');
28061                 op.setAttribute('value', r.data[vf]);
28062                 op.innerHTML = String.format('{0}', r.data[df]);
28063                 dom.appendChild(op);
28064             });
28065             if (typeof(this.defaultValue != 'undefined')) {
28066                 this.setValue(this.defaultValue);
28067             }
28068             
28069              
28070         }else{
28071             //this.onEmptyResults();
28072         }
28073         //this.el.focus();
28074     },
28075     // private
28076     onLoadException : function()
28077     {
28078         dom.innerHTML = '';
28079             
28080         Roo.log("Select on load exception");
28081         return;
28082     
28083         this.collapse();
28084         Roo.log(this.store.reader.jsonData);
28085         if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
28086             Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
28087         }
28088         
28089         
28090     },
28091     // private
28092     onTypeAhead : function(){
28093          
28094     },
28095
28096     // private
28097     onSelect : function(record, index){
28098         Roo.log('on select?');
28099         return;
28100         if(this.fireEvent('beforeselect', this, record, index) !== false){
28101             this.setFromData(index > -1 ? record.data : false);
28102             this.collapse();
28103             this.fireEvent('select', this, record, index);
28104         }
28105     },
28106
28107     /**
28108      * Returns the currently selected field value or empty string if no value is set.
28109      * @return {String} value The selected value
28110      */
28111     getValue : function(){
28112         var dom = this.el.dom;
28113         this.value = dom.options[dom.selectedIndex].value;
28114         return this.value;
28115         
28116     },
28117
28118     /**
28119      * Clears any text/value currently set in the field
28120      */
28121     clearValue : function(){
28122         this.value = '';
28123         this.el.dom.selectedIndex = this.emptyText ? 0 : -1;
28124         
28125     },
28126
28127     /**
28128      * Sets the specified value into the field.  If the value finds a match, the corresponding record text
28129      * will be displayed in the field.  If the value does not match the data value of an existing item,
28130      * and the valueNotFoundText config option is defined, it will be displayed as the default field text.
28131      * Otherwise the field will be blank (although the value will still be set).
28132      * @param {String} value The value to match
28133      */
28134     setValue : function(v){
28135         var d = this.el.dom;
28136         for (var i =0; i < d.options.length;i++) {
28137             if (v == d.options[i].value) {
28138                 d.selectedIndex = i;
28139                 this.value = v;
28140                 return;
28141             }
28142         }
28143         this.clearValue();
28144     },
28145     /**
28146      * @property {Object} the last set data for the element
28147      */
28148     
28149     lastData : false,
28150     /**
28151      * Sets the value of the field based on a object which is related to the record format for the store.
28152      * @param {Object} value the value to set as. or false on reset?
28153      */
28154     setFromData : function(o){
28155         Roo.log('setfrom data?');
28156          
28157         
28158         
28159     },
28160     // private
28161     reset : function(){
28162         this.clearValue();
28163     },
28164     // private
28165     findRecord : function(prop, value){
28166         
28167         return false;
28168     
28169         var record;
28170         if(this.store.getCount() > 0){
28171             this.store.each(function(r){
28172                 if(r.data[prop] == value){
28173                     record = r;
28174                     return false;
28175                 }
28176                 return true;
28177             });
28178         }
28179         return record;
28180     },
28181     
28182     getName: function()
28183     {
28184         // returns hidden if it's set..
28185         if (!this.rendered) {return ''};
28186         return !this.hiddenName && this.el.dom.name  ? this.el.dom.name : (this.hiddenName || '');
28187         
28188     },
28189      
28190
28191     
28192
28193     // private
28194     onEmptyResults : function(){
28195         Roo.log('empty results');
28196         //this.collapse();
28197     },
28198
28199     /**
28200      * Returns true if the dropdown list is expanded, else false.
28201      */
28202     isExpanded : function(){
28203         return false;
28204     },
28205
28206     /**
28207      * Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire.
28208      * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
28209      * @param {String} value The data value of the item to select
28210      * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
28211      * selected item if it is not currently in view (defaults to true)
28212      * @return {Boolean} True if the value matched an item in the list, else false
28213      */
28214     selectByValue : function(v, scrollIntoView){
28215         Roo.log('select By Value');
28216         return false;
28217     
28218         if(v !== undefined && v !== null){
28219             var r = this.findRecord(this.valueField || this.displayField, v);
28220             if(r){
28221                 this.select(this.store.indexOf(r), scrollIntoView);
28222                 return true;
28223             }
28224         }
28225         return false;
28226     },
28227
28228     /**
28229      * Select an item in the dropdown list by its numeric index in the list. This function does NOT cause the select event to fire.
28230      * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
28231      * @param {Number} index The zero-based index of the list item to select
28232      * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
28233      * selected item if it is not currently in view (defaults to true)
28234      */
28235     select : function(index, scrollIntoView){
28236         Roo.log('select ');
28237         return  ;
28238         
28239         this.selectedIndex = index;
28240         this.view.select(index);
28241         if(scrollIntoView !== false){
28242             var el = this.view.getNode(index);
28243             if(el){
28244                 this.innerList.scrollChildIntoView(el, false);
28245             }
28246         }
28247     },
28248
28249       
28250
28251     // private
28252     validateBlur : function(){
28253         
28254         return;
28255         
28256     },
28257
28258     // private
28259     initQuery : function(){
28260         this.doQuery(this.getRawValue());
28261     },
28262
28263     // private
28264     doForce : function(){
28265         if(this.el.dom.value.length > 0){
28266             this.el.dom.value =
28267                 this.lastSelectionText === undefined ? '' : this.lastSelectionText;
28268              
28269         }
28270     },
28271
28272     /**
28273      * Execute a query to filter the dropdown list.  Fires the beforequery event prior to performing the
28274      * query allowing the query action to be canceled if needed.
28275      * @param {String} query The SQL query to execute
28276      * @param {Boolean} forceAll True to force the query to execute even if there are currently fewer characters
28277      * in the field than the minimum specified by the minChars config option.  It also clears any filter previously
28278      * saved in the current store (defaults to false)
28279      */
28280     doQuery : function(q, forceAll){
28281         
28282         Roo.log('doQuery?');
28283         if(q === undefined || q === null){
28284             q = '';
28285         }
28286         var qe = {
28287             query: q,
28288             forceAll: forceAll,
28289             combo: this,
28290             cancel:false
28291         };
28292         if(this.fireEvent('beforequery', qe)===false || qe.cancel){
28293             return false;
28294         }
28295         q = qe.query;
28296         forceAll = qe.forceAll;
28297         if(forceAll === true || (q.length >= this.minChars)){
28298             if(this.lastQuery != q || this.alwaysQuery){
28299                 this.lastQuery = q;
28300                 if(this.mode == 'local'){
28301                     this.selectedIndex = -1;
28302                     if(forceAll){
28303                         this.store.clearFilter();
28304                     }else{
28305                         this.store.filter(this.displayField, q);
28306                     }
28307                     this.onLoad();
28308                 }else{
28309                     this.store.baseParams[this.queryParam] = q;
28310                     this.store.load({
28311                         params: this.getParams(q)
28312                     });
28313                     this.expand();
28314                 }
28315             }else{
28316                 this.selectedIndex = -1;
28317                 this.onLoad();   
28318             }
28319         }
28320     },
28321
28322     // private
28323     getParams : function(q){
28324         var p = {};
28325         //p[this.queryParam] = q;
28326         if(this.pageSize){
28327             p.start = 0;
28328             p.limit = this.pageSize;
28329         }
28330         return p;
28331     },
28332
28333     /**
28334      * Hides the dropdown list if it is currently expanded. Fires the 'collapse' event on completion.
28335      */
28336     collapse : function(){
28337         
28338     },
28339
28340     // private
28341     collapseIf : function(e){
28342         
28343     },
28344
28345     /**
28346      * Expands the dropdown list if it is currently hidden. Fires the 'expand' event on completion.
28347      */
28348     expand : function(){
28349         
28350     } ,
28351
28352     // private
28353      
28354
28355     /** 
28356     * @cfg {Boolean} grow 
28357     * @hide 
28358     */
28359     /** 
28360     * @cfg {Number} growMin 
28361     * @hide 
28362     */
28363     /** 
28364     * @cfg {Number} growMax 
28365     * @hide 
28366     */
28367     /**
28368      * @hide
28369      * @method autoSize
28370      */
28371     
28372     setWidth : function()
28373     {
28374         
28375     },
28376     getResizeEl : function(){
28377         return this.el;
28378     }
28379 });//<script type="text/javasscript">
28380  
28381
28382 /**
28383  * @class Roo.DDView
28384  * A DnD enabled version of Roo.View.
28385  * @param {Element/String} container The Element in which to create the View.
28386  * @param {String} tpl The template string used to create the markup for each element of the View
28387  * @param {Object} config The configuration properties. These include all the config options of
28388  * {@link Roo.View} plus some specific to this class.<br>
28389  * <p>
28390  * Drag/drop is implemented by adding {@link Roo.data.Record}s to the target DDView. If copying is
28391  * not being performed, the original {@link Roo.data.Record} is removed from the source DDView.<br>
28392  * <p>
28393  * The following extra CSS rules are needed to provide insertion point highlighting:<pre><code>
28394 .x-view-drag-insert-above {
28395         border-top:1px dotted #3366cc;
28396 }
28397 .x-view-drag-insert-below {
28398         border-bottom:1px dotted #3366cc;
28399 }
28400 </code></pre>
28401  * 
28402  */
28403  
28404 Roo.DDView = function(container, tpl, config) {
28405     Roo.DDView.superclass.constructor.apply(this, arguments);
28406     this.getEl().setStyle("outline", "0px none");
28407     this.getEl().unselectable();
28408     if (this.dragGroup) {
28409                 this.setDraggable(this.dragGroup.split(","));
28410     }
28411     if (this.dropGroup) {
28412                 this.setDroppable(this.dropGroup.split(","));
28413     }
28414     if (this.deletable) {
28415         this.setDeletable();
28416     }
28417     this.isDirtyFlag = false;
28418         this.addEvents({
28419                 "drop" : true
28420         });
28421 };
28422
28423 Roo.extend(Roo.DDView, Roo.View, {
28424 /**     @cfg {String/Array} dragGroup The ddgroup name(s) for the View's DragZone. */
28425 /**     @cfg {String/Array} dropGroup The ddgroup name(s) for the View's DropZone. */
28426 /**     @cfg {Boolean} copy Causes drag operations to copy nodes rather than move. */
28427 /**     @cfg {Boolean} allowCopy Causes ctrl/drag operations to copy nodes rather than move. */
28428
28429         isFormField: true,
28430
28431         reset: Roo.emptyFn,
28432         
28433         clearInvalid: Roo.form.Field.prototype.clearInvalid,
28434
28435         validate: function() {
28436                 return true;
28437         },
28438         
28439         destroy: function() {
28440                 this.purgeListeners();
28441                 this.getEl.removeAllListeners();
28442                 this.getEl().remove();
28443                 if (this.dragZone) {
28444                         if (this.dragZone.destroy) {
28445                                 this.dragZone.destroy();
28446                         }
28447                 }
28448                 if (this.dropZone) {
28449                         if (this.dropZone.destroy) {
28450                                 this.dropZone.destroy();
28451                         }
28452                 }
28453         },
28454
28455 /**     Allows this class to be an Roo.form.Field so it can be found using {@link Roo.form.BasicForm#findField}. */
28456         getName: function() {
28457                 return this.name;
28458         },
28459
28460 /**     Loads the View from a JSON string representing the Records to put into the Store. */
28461         setValue: function(v) {
28462                 if (!this.store) {
28463                         throw "DDView.setValue(). DDView must be constructed with a valid Store";
28464                 }
28465                 var data = {};
28466                 data[this.store.reader.meta.root] = v ? [].concat(v) : [];
28467                 this.store.proxy = new Roo.data.MemoryProxy(data);
28468                 this.store.load();
28469         },
28470
28471 /**     @return {String} a parenthesised list of the ids of the Records in the View. */
28472         getValue: function() {
28473                 var result = '(';
28474                 this.store.each(function(rec) {
28475                         result += rec.id + ',';
28476                 });
28477                 return result.substr(0, result.length - 1) + ')';
28478         },
28479         
28480         getIds: function() {
28481                 var i = 0, result = new Array(this.store.getCount());
28482                 this.store.each(function(rec) {
28483                         result[i++] = rec.id;
28484                 });
28485                 return result;
28486         },
28487         
28488         isDirty: function() {
28489                 return this.isDirtyFlag;
28490         },
28491
28492 /**
28493  *      Part of the Roo.dd.DropZone interface. If no target node is found, the
28494  *      whole Element becomes the target, and this causes the drop gesture to append.
28495  */
28496     getTargetFromEvent : function(e) {
28497                 var target = e.getTarget();
28498                 while ((target !== null) && (target.parentNode != this.el.dom)) {
28499                 target = target.parentNode;
28500                 }
28501                 if (!target) {
28502                         target = this.el.dom.lastChild || this.el.dom;
28503                 }
28504                 return target;
28505     },
28506
28507 /**
28508  *      Create the drag data which consists of an object which has the property "ddel" as
28509  *      the drag proxy element. 
28510  */
28511     getDragData : function(e) {
28512         var target = this.findItemFromChild(e.getTarget());
28513                 if(target) {
28514                         this.handleSelection(e);
28515                         var selNodes = this.getSelectedNodes();
28516             var dragData = {
28517                 source: this,
28518                 copy: this.copy || (this.allowCopy && e.ctrlKey),
28519                 nodes: selNodes,
28520                 records: []
28521                         };
28522                         var selectedIndices = this.getSelectedIndexes();
28523                         for (var i = 0; i < selectedIndices.length; i++) {
28524                                 dragData.records.push(this.store.getAt(selectedIndices[i]));
28525                         }
28526                         if (selNodes.length == 1) {
28527                                 dragData.ddel = target.cloneNode(true); // the div element
28528                         } else {
28529                                 var div = document.createElement('div'); // create the multi element drag "ghost"
28530                                 div.className = 'multi-proxy';
28531                                 for (var i = 0, len = selNodes.length; i < len; i++) {
28532                                         div.appendChild(selNodes[i].cloneNode(true));
28533                                 }
28534                                 dragData.ddel = div;
28535                         }
28536             //console.log(dragData)
28537             //console.log(dragData.ddel.innerHTML)
28538                         return dragData;
28539                 }
28540         //console.log('nodragData')
28541                 return false;
28542     },
28543     
28544 /**     Specify to which ddGroup items in this DDView may be dragged. */
28545     setDraggable: function(ddGroup) {
28546         if (ddGroup instanceof Array) {
28547                 Roo.each(ddGroup, this.setDraggable, this);
28548                 return;
28549         }
28550         if (this.dragZone) {
28551                 this.dragZone.addToGroup(ddGroup);
28552         } else {
28553                         this.dragZone = new Roo.dd.DragZone(this.getEl(), {
28554                                 containerScroll: true,
28555                                 ddGroup: ddGroup 
28556
28557                         });
28558 //                      Draggability implies selection. DragZone's mousedown selects the element.
28559                         if (!this.multiSelect) { this.singleSelect = true; }
28560
28561 //                      Wire the DragZone's handlers up to methods in *this*
28562                         this.dragZone.getDragData = this.getDragData.createDelegate(this);
28563                 }
28564     },
28565
28566 /**     Specify from which ddGroup this DDView accepts drops. */
28567     setDroppable: function(ddGroup) {
28568         if (ddGroup instanceof Array) {
28569                 Roo.each(ddGroup, this.setDroppable, this);
28570                 return;
28571         }
28572         if (this.dropZone) {
28573                 this.dropZone.addToGroup(ddGroup);
28574         } else {
28575                         this.dropZone = new Roo.dd.DropZone(this.getEl(), {
28576                                 containerScroll: true,
28577                                 ddGroup: ddGroup
28578                         });
28579
28580 //                      Wire the DropZone's handlers up to methods in *this*
28581                         this.dropZone.getTargetFromEvent = this.getTargetFromEvent.createDelegate(this);
28582                         this.dropZone.onNodeEnter = this.onNodeEnter.createDelegate(this);
28583                         this.dropZone.onNodeOver = this.onNodeOver.createDelegate(this);
28584                         this.dropZone.onNodeOut = this.onNodeOut.createDelegate(this);
28585                         this.dropZone.onNodeDrop = this.onNodeDrop.createDelegate(this);
28586                 }
28587     },
28588
28589 /**     Decide whether to drop above or below a View node. */
28590     getDropPoint : function(e, n, dd){
28591         if (n == this.el.dom) { return "above"; }
28592                 var t = Roo.lib.Dom.getY(n), b = t + n.offsetHeight;
28593                 var c = t + (b - t) / 2;
28594                 var y = Roo.lib.Event.getPageY(e);
28595                 if(y <= c) {
28596                         return "above";
28597                 }else{
28598                         return "below";
28599                 }
28600     },
28601
28602     onNodeEnter : function(n, dd, e, data){
28603                 return false;
28604     },
28605     
28606     onNodeOver : function(n, dd, e, data){
28607                 var pt = this.getDropPoint(e, n, dd);
28608                 // set the insert point style on the target node
28609                 var dragElClass = this.dropNotAllowed;
28610                 if (pt) {
28611                         var targetElClass;
28612                         if (pt == "above"){
28613                                 dragElClass = n.previousSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-above";
28614                                 targetElClass = "x-view-drag-insert-above";
28615                         } else {
28616                                 dragElClass = n.nextSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-below";
28617                                 targetElClass = "x-view-drag-insert-below";
28618                         }
28619                         if (this.lastInsertClass != targetElClass){
28620                                 Roo.fly(n).replaceClass(this.lastInsertClass, targetElClass);
28621                                 this.lastInsertClass = targetElClass;
28622                         }
28623                 }
28624                 return dragElClass;
28625         },
28626
28627     onNodeOut : function(n, dd, e, data){
28628                 this.removeDropIndicators(n);
28629     },
28630
28631     onNodeDrop : function(n, dd, e, data){
28632         if (this.fireEvent("drop", this, n, dd, e, data) === false) {
28633                 return false;
28634         }
28635         var pt = this.getDropPoint(e, n, dd);
28636                 var insertAt = (n == this.el.dom) ? this.nodes.length : n.nodeIndex;
28637                 if (pt == "below") { insertAt++; }
28638                 for (var i = 0; i < data.records.length; i++) {
28639                         var r = data.records[i];
28640                         var dup = this.store.getById(r.id);
28641                         if (dup && (dd != this.dragZone)) {
28642                                 Roo.fly(this.getNode(this.store.indexOf(dup))).frame("red", 1);
28643                         } else {
28644                                 if (data.copy) {
28645                                         this.store.insert(insertAt++, r.copy());
28646                                 } else {
28647                                         data.source.isDirtyFlag = true;
28648                                         r.store.remove(r);
28649                                         this.store.insert(insertAt++, r);
28650                                 }
28651                                 this.isDirtyFlag = true;
28652                         }
28653                 }
28654                 this.dragZone.cachedTarget = null;
28655                 return true;
28656     },
28657
28658     removeDropIndicators : function(n){
28659                 if(n){
28660                         Roo.fly(n).removeClass([
28661                                 "x-view-drag-insert-above",
28662                                 "x-view-drag-insert-below"]);
28663                         this.lastInsertClass = "_noclass";
28664                 }
28665     },
28666
28667 /**
28668  *      Utility method. Add a delete option to the DDView's context menu.
28669  *      @param {String} imageUrl The URL of the "delete" icon image.
28670  */
28671         setDeletable: function(imageUrl) {
28672                 if (!this.singleSelect && !this.multiSelect) {
28673                         this.singleSelect = true;
28674                 }
28675                 var c = this.getContextMenu();
28676                 this.contextMenu.on("itemclick", function(item) {
28677                         switch (item.id) {
28678                                 case "delete":
28679                                         this.remove(this.getSelectedIndexes());
28680                                         break;
28681                         }
28682                 }, this);
28683                 this.contextMenu.add({
28684                         icon: imageUrl,
28685                         id: "delete",
28686                         text: 'Delete'
28687                 });
28688         },
28689         
28690 /**     Return the context menu for this DDView. */
28691         getContextMenu: function() {
28692                 if (!this.contextMenu) {
28693 //                      Create the View's context menu
28694                         this.contextMenu = new Roo.menu.Menu({
28695                                 id: this.id + "-contextmenu"
28696                         });
28697                         this.el.on("contextmenu", this.showContextMenu, this);
28698                 }
28699                 return this.contextMenu;
28700         },
28701         
28702         disableContextMenu: function() {
28703                 if (this.contextMenu) {
28704                         this.el.un("contextmenu", this.showContextMenu, this);
28705                 }
28706         },
28707
28708         showContextMenu: function(e, item) {
28709         item = this.findItemFromChild(e.getTarget());
28710                 if (item) {
28711                         e.stopEvent();
28712                         this.select(this.getNode(item), this.multiSelect && e.ctrlKey, true);
28713                         this.contextMenu.showAt(e.getXY());
28714             }
28715     },
28716
28717 /**
28718  *      Remove {@link Roo.data.Record}s at the specified indices.
28719  *      @param {Array/Number} selectedIndices The index (or Array of indices) of Records to remove.
28720  */
28721     remove: function(selectedIndices) {
28722                 selectedIndices = [].concat(selectedIndices);
28723                 for (var i = 0; i < selectedIndices.length; i++) {
28724                         var rec = this.store.getAt(selectedIndices[i]);
28725                         this.store.remove(rec);
28726                 }
28727     },
28728
28729 /**
28730  *      Double click fires the event, but also, if this is draggable, and there is only one other
28731  *      related DropZone, it transfers the selected node.
28732  */
28733     onDblClick : function(e){
28734         var item = this.findItemFromChild(e.getTarget());
28735         if(item){
28736             if (this.fireEvent("dblclick", this, this.indexOf(item), item, e) === false) {
28737                 return false;
28738             }
28739             if (this.dragGroup) {
28740                     var targets = Roo.dd.DragDropMgr.getRelated(this.dragZone, true);
28741                     while (targets.indexOf(this.dropZone) > -1) {
28742                             targets.remove(this.dropZone);
28743                                 }
28744                     if (targets.length == 1) {
28745                                         this.dragZone.cachedTarget = null;
28746                         var el = Roo.get(targets[0].getEl());
28747                         var box = el.getBox(true);
28748                         targets[0].onNodeDrop(el.dom, {
28749                                 target: el.dom,
28750                                 xy: [box.x, box.y + box.height - 1]
28751                         }, null, this.getDragData(e));
28752                     }
28753                 }
28754         }
28755     },
28756     
28757     handleSelection: function(e) {
28758                 this.dragZone.cachedTarget = null;
28759         var item = this.findItemFromChild(e.getTarget());
28760         if (!item) {
28761                 this.clearSelections(true);
28762                 return;
28763         }
28764                 if (item && (this.multiSelect || this.singleSelect)){
28765                         if(this.multiSelect && e.shiftKey && (!e.ctrlKey) && this.lastSelection){
28766                                 this.select(this.getNodes(this.indexOf(this.lastSelection), item.nodeIndex), false);
28767                         }else if (this.isSelected(this.getNode(item)) && e.ctrlKey){
28768                                 this.unselect(item);
28769                         } else {
28770                                 this.select(item, this.multiSelect && e.ctrlKey);
28771                                 this.lastSelection = item;
28772                         }
28773                 }
28774     },
28775
28776     onItemClick : function(item, index, e){
28777                 if(this.fireEvent("beforeclick", this, index, item, e) === false){
28778                         return false;
28779                 }
28780                 return true;
28781     },
28782
28783     unselect : function(nodeInfo, suppressEvent){
28784                 var node = this.getNode(nodeInfo);
28785                 if(node && this.isSelected(node)){
28786                         if(this.fireEvent("beforeselect", this, node, this.selections) !== false){
28787                                 Roo.fly(node).removeClass(this.selectedClass);
28788                                 this.selections.remove(node);
28789                                 if(!suppressEvent){
28790                                         this.fireEvent("selectionchange", this, this.selections);
28791                                 }
28792                         }
28793                 }
28794     }
28795 });
28796 /*
28797  * Based on:
28798  * Ext JS Library 1.1.1
28799  * Copyright(c) 2006-2007, Ext JS, LLC.
28800  *
28801  * Originally Released Under LGPL - original licence link has changed is not relivant.
28802  *
28803  * Fork - LGPL
28804  * <script type="text/javascript">
28805  */
28806  
28807 /**
28808  * @class Roo.LayoutManager
28809  * @extends Roo.util.Observable
28810  * Base class for layout managers.
28811  */
28812 Roo.LayoutManager = function(container, config){
28813     Roo.LayoutManager.superclass.constructor.call(this);
28814     this.el = Roo.get(container);
28815     // ie scrollbar fix
28816     if(this.el.dom == document.body && Roo.isIE && !config.allowScroll){
28817         document.body.scroll = "no";
28818     }else if(this.el.dom != document.body && this.el.getStyle('position') == 'static'){
28819         this.el.position('relative');
28820     }
28821     this.id = this.el.id;
28822     this.el.addClass("x-layout-container");
28823     /** false to disable window resize monitoring @type Boolean */
28824     this.monitorWindowResize = true;
28825     this.regions = {};
28826     this.addEvents({
28827         /**
28828          * @event layout
28829          * Fires when a layout is performed. 
28830          * @param {Roo.LayoutManager} this
28831          */
28832         "layout" : true,
28833         /**
28834          * @event regionresized
28835          * Fires when the user resizes a region. 
28836          * @param {Roo.LayoutRegion} region The resized region
28837          * @param {Number} newSize The new size (width for east/west, height for north/south)
28838          */
28839         "regionresized" : true,
28840         /**
28841          * @event regioncollapsed
28842          * Fires when a region is collapsed. 
28843          * @param {Roo.LayoutRegion} region The collapsed region
28844          */
28845         "regioncollapsed" : true,
28846         /**
28847          * @event regionexpanded
28848          * Fires when a region is expanded.  
28849          * @param {Roo.LayoutRegion} region The expanded region
28850          */
28851         "regionexpanded" : true
28852     });
28853     this.updating = false;
28854     Roo.EventManager.onWindowResize(this.onWindowResize, this, true);
28855 };
28856
28857 Roo.extend(Roo.LayoutManager, Roo.util.Observable, {
28858     /**
28859      * Returns true if this layout is currently being updated
28860      * @return {Boolean}
28861      */
28862     isUpdating : function(){
28863         return this.updating; 
28864     },
28865     
28866     /**
28867      * Suspend the LayoutManager from doing auto-layouts while
28868      * making multiple add or remove calls
28869      */
28870     beginUpdate : function(){
28871         this.updating = true;    
28872     },
28873     
28874     /**
28875      * Restore auto-layouts and optionally disable the manager from performing a layout
28876      * @param {Boolean} noLayout true to disable a layout update 
28877      */
28878     endUpdate : function(noLayout){
28879         this.updating = false;
28880         if(!noLayout){
28881             this.layout();
28882         }    
28883     },
28884     
28885     layout: function(){
28886         
28887     },
28888     
28889     onRegionResized : function(region, newSize){
28890         this.fireEvent("regionresized", region, newSize);
28891         this.layout();
28892     },
28893     
28894     onRegionCollapsed : function(region){
28895         this.fireEvent("regioncollapsed", region);
28896     },
28897     
28898     onRegionExpanded : function(region){
28899         this.fireEvent("regionexpanded", region);
28900     },
28901         
28902     /**
28903      * Returns the size of the current view. This method normalizes document.body and element embedded layouts and
28904      * performs box-model adjustments.
28905      * @return {Object} The size as an object {width: (the width), height: (the height)}
28906      */
28907     getViewSize : function(){
28908         var size;
28909         if(this.el.dom != document.body){
28910             size = this.el.getSize();
28911         }else{
28912             size = {width: Roo.lib.Dom.getViewWidth(), height: Roo.lib.Dom.getViewHeight()};
28913         }
28914         size.width -= this.el.getBorderWidth("lr")-this.el.getPadding("lr");
28915         size.height -= this.el.getBorderWidth("tb")-this.el.getPadding("tb");
28916         return size;
28917     },
28918     
28919     /**
28920      * Returns the Element this layout is bound to.
28921      * @return {Roo.Element}
28922      */
28923     getEl : function(){
28924         return this.el;
28925     },
28926     
28927     /**
28928      * Returns the specified region.
28929      * @param {String} target The region key ('center', 'north', 'south', 'east' or 'west')
28930      * @return {Roo.LayoutRegion}
28931      */
28932     getRegion : function(target){
28933         return this.regions[target.toLowerCase()];
28934     },
28935     
28936     onWindowResize : function(){
28937         if(this.monitorWindowResize){
28938             this.layout();
28939         }
28940     }
28941 });/*
28942  * Based on:
28943  * Ext JS Library 1.1.1
28944  * Copyright(c) 2006-2007, Ext JS, LLC.
28945  *
28946  * Originally Released Under LGPL - original licence link has changed is not relivant.
28947  *
28948  * Fork - LGPL
28949  * <script type="text/javascript">
28950  */
28951 /**
28952  * @class Roo.BorderLayout
28953  * @extends Roo.LayoutManager
28954  * This class represents a common layout manager used in desktop applications. For screenshots and more details,
28955  * please see: <br><br>
28956  * <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>
28957  * <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>
28958  * Example:
28959  <pre><code>
28960  var layout = new Roo.BorderLayout(document.body, {
28961     north: {
28962         initialSize: 25,
28963         titlebar: false
28964     },
28965     west: {
28966         split:true,
28967         initialSize: 200,
28968         minSize: 175,
28969         maxSize: 400,
28970         titlebar: true,
28971         collapsible: true
28972     },
28973     east: {
28974         split:true,
28975         initialSize: 202,
28976         minSize: 175,
28977         maxSize: 400,
28978         titlebar: true,
28979         collapsible: true
28980     },
28981     south: {
28982         split:true,
28983         initialSize: 100,
28984         minSize: 100,
28985         maxSize: 200,
28986         titlebar: true,
28987         collapsible: true
28988     },
28989     center: {
28990         titlebar: true,
28991         autoScroll:true,
28992         resizeTabs: true,
28993         minTabWidth: 50,
28994         preferredTabWidth: 150
28995     }
28996 });
28997
28998 // shorthand
28999 var CP = Roo.ContentPanel;
29000
29001 layout.beginUpdate();
29002 layout.add("north", new CP("north", "North"));
29003 layout.add("south", new CP("south", {title: "South", closable: true}));
29004 layout.add("west", new CP("west", {title: "West"}));
29005 layout.add("east", new CP("autoTabs", {title: "Auto Tabs", closable: true}));
29006 layout.add("center", new CP("center1", {title: "Close Me", closable: true}));
29007 layout.add("center", new CP("center2", {title: "Center Panel", closable: false}));
29008 layout.getRegion("center").showPanel("center1");
29009 layout.endUpdate();
29010 </code></pre>
29011
29012 <b>The container the layout is rendered into can be either the body element or any other element.
29013 If it is not the body element, the container needs to either be an absolute positioned element,
29014 or you will need to add "position:relative" to the css of the container.  You will also need to specify
29015 the container size if it is not the body element.</b>
29016
29017 * @constructor
29018 * Create a new BorderLayout
29019 * @param {String/HTMLElement/Element} container The container this layout is bound to
29020 * @param {Object} config Configuration options
29021  */
29022 Roo.BorderLayout = function(container, config){
29023     config = config || {};
29024     Roo.BorderLayout.superclass.constructor.call(this, container, config);
29025     this.factory = config.factory || Roo.BorderLayout.RegionFactory;
29026     for(var i = 0, len = this.factory.validRegions.length; i < len; i++) {
29027         var target = this.factory.validRegions[i];
29028         if(config[target]){
29029             this.addRegion(target, config[target]);
29030         }
29031     }
29032 };
29033
29034 Roo.extend(Roo.BorderLayout, Roo.LayoutManager, {
29035     /**
29036      * Creates and adds a new region if it doesn't already exist.
29037      * @param {String} target The target region key (north, south, east, west or center).
29038      * @param {Object} config The regions config object
29039      * @return {BorderLayoutRegion} The new region
29040      */
29041     addRegion : function(target, config){
29042         if(!this.regions[target]){
29043             var r = this.factory.create(target, this, config);
29044             this.bindRegion(target, r);
29045         }
29046         return this.regions[target];
29047     },
29048
29049     // private (kinda)
29050     bindRegion : function(name, r){
29051         this.regions[name] = r;
29052         r.on("visibilitychange", this.layout, this);
29053         r.on("paneladded", this.layout, this);
29054         r.on("panelremoved", this.layout, this);
29055         r.on("invalidated", this.layout, this);
29056         r.on("resized", this.onRegionResized, this);
29057         r.on("collapsed", this.onRegionCollapsed, this);
29058         r.on("expanded", this.onRegionExpanded, this);
29059     },
29060
29061     /**
29062      * Performs a layout update.
29063      */
29064     layout : function(){
29065         if(this.updating) {
29066             return;
29067         }
29068         var size = this.getViewSize();
29069         var w = size.width;
29070         var h = size.height;
29071         var centerW = w;
29072         var centerH = h;
29073         var centerY = 0;
29074         var centerX = 0;
29075         //var x = 0, y = 0;
29076
29077         var rs = this.regions;
29078         var north = rs["north"];
29079         var south = rs["south"]; 
29080         var west = rs["west"];
29081         var east = rs["east"];
29082         var center = rs["center"];
29083         //if(this.hideOnLayout){ // not supported anymore
29084             //c.el.setStyle("display", "none");
29085         //}
29086         if(north && north.isVisible()){
29087             var b = north.getBox();
29088             var m = north.getMargins();
29089             b.width = w - (m.left+m.right);
29090             b.x = m.left;
29091             b.y = m.top;
29092             centerY = b.height + b.y + m.bottom;
29093             centerH -= centerY;
29094             north.updateBox(this.safeBox(b));
29095         }
29096         if(south && south.isVisible()){
29097             var b = south.getBox();
29098             var m = south.getMargins();
29099             b.width = w - (m.left+m.right);
29100             b.x = m.left;
29101             var totalHeight = (b.height + m.top + m.bottom);
29102             b.y = h - totalHeight + m.top;
29103             centerH -= totalHeight;
29104             south.updateBox(this.safeBox(b));
29105         }
29106         if(west && west.isVisible()){
29107             var b = west.getBox();
29108             var m = west.getMargins();
29109             b.height = centerH - (m.top+m.bottom);
29110             b.x = m.left;
29111             b.y = centerY + m.top;
29112             var totalWidth = (b.width + m.left + m.right);
29113             centerX += totalWidth;
29114             centerW -= totalWidth;
29115             west.updateBox(this.safeBox(b));
29116         }
29117         if(east && east.isVisible()){
29118             var b = east.getBox();
29119             var m = east.getMargins();
29120             b.height = centerH - (m.top+m.bottom);
29121             var totalWidth = (b.width + m.left + m.right);
29122             b.x = w - totalWidth + m.left;
29123             b.y = centerY + m.top;
29124             centerW -= totalWidth;
29125             east.updateBox(this.safeBox(b));
29126         }
29127         if(center){
29128             var m = center.getMargins();
29129             var centerBox = {
29130                 x: centerX + m.left,
29131                 y: centerY + m.top,
29132                 width: centerW - (m.left+m.right),
29133                 height: centerH - (m.top+m.bottom)
29134             };
29135             //if(this.hideOnLayout){
29136                 //center.el.setStyle("display", "block");
29137             //}
29138             center.updateBox(this.safeBox(centerBox));
29139         }
29140         this.el.repaint();
29141         this.fireEvent("layout", this);
29142     },
29143
29144     // private
29145     safeBox : function(box){
29146         box.width = Math.max(0, box.width);
29147         box.height = Math.max(0, box.height);
29148         return box;
29149     },
29150
29151     /**
29152      * Adds a ContentPanel (or subclass) to this layout.
29153      * @param {String} target The target region key (north, south, east, west or center).
29154      * @param {Roo.ContentPanel} panel The panel to add
29155      * @return {Roo.ContentPanel} The added panel
29156      */
29157     add : function(target, panel){
29158          
29159         target = target.toLowerCase();
29160         return this.regions[target].add(panel);
29161     },
29162
29163     /**
29164      * Remove a ContentPanel (or subclass) to this layout.
29165      * @param {String} target The target region key (north, south, east, west or center).
29166      * @param {Number/String/Roo.ContentPanel} panel The index, id or panel to remove
29167      * @return {Roo.ContentPanel} The removed panel
29168      */
29169     remove : function(target, panel){
29170         target = target.toLowerCase();
29171         return this.regions[target].remove(panel);
29172     },
29173
29174     /**
29175      * Searches all regions for a panel with the specified id
29176      * @param {String} panelId
29177      * @return {Roo.ContentPanel} The panel or null if it wasn't found
29178      */
29179     findPanel : function(panelId){
29180         var rs = this.regions;
29181         for(var target in rs){
29182             if(typeof rs[target] != "function"){
29183                 var p = rs[target].getPanel(panelId);
29184                 if(p){
29185                     return p;
29186                 }
29187             }
29188         }
29189         return null;
29190     },
29191
29192     /**
29193      * Searches all regions for a panel with the specified id and activates (shows) it.
29194      * @param {String/ContentPanel} panelId The panels id or the panel itself
29195      * @return {Roo.ContentPanel} The shown panel or null
29196      */
29197     showPanel : function(panelId) {
29198       var rs = this.regions;
29199       for(var target in rs){
29200          var r = rs[target];
29201          if(typeof r != "function"){
29202             if(r.hasPanel(panelId)){
29203                return r.showPanel(panelId);
29204             }
29205          }
29206       }
29207       return null;
29208    },
29209
29210    /**
29211      * Restores this layout's state using Roo.state.Manager or the state provided by the passed provider.
29212      * @param {Roo.state.Provider} provider (optional) An alternate state provider
29213      */
29214     restoreState : function(provider){
29215         if(!provider){
29216             provider = Roo.state.Manager;
29217         }
29218         var sm = new Roo.LayoutStateManager();
29219         sm.init(this, provider);
29220     },
29221
29222     /**
29223      * Adds a batch of multiple ContentPanels dynamically by passing a special regions config object.  This config
29224      * object should contain properties for each region to add ContentPanels to, and each property's value should be
29225      * a valid ContentPanel config object.  Example:
29226      * <pre><code>
29227 // Create the main layout
29228 var layout = new Roo.BorderLayout('main-ct', {
29229     west: {
29230         split:true,
29231         minSize: 175,
29232         titlebar: true
29233     },
29234     center: {
29235         title:'Components'
29236     }
29237 }, 'main-ct');
29238
29239 // Create and add multiple ContentPanels at once via configs
29240 layout.batchAdd({
29241    west: {
29242        id: 'source-files',
29243        autoCreate:true,
29244        title:'Ext Source Files',
29245        autoScroll:true,
29246        fitToFrame:true
29247    },
29248    center : {
29249        el: cview,
29250        autoScroll:true,
29251        fitToFrame:true,
29252        toolbar: tb,
29253        resizeEl:'cbody'
29254    }
29255 });
29256 </code></pre>
29257      * @param {Object} regions An object containing ContentPanel configs by region name
29258      */
29259     batchAdd : function(regions){
29260         this.beginUpdate();
29261         for(var rname in regions){
29262             var lr = this.regions[rname];
29263             if(lr){
29264                 this.addTypedPanels(lr, regions[rname]);
29265             }
29266         }
29267         this.endUpdate();
29268     },
29269
29270     // private
29271     addTypedPanels : function(lr, ps){
29272         if(typeof ps == 'string'){
29273             lr.add(new Roo.ContentPanel(ps));
29274         }
29275         else if(ps instanceof Array){
29276             for(var i =0, len = ps.length; i < len; i++){
29277                 this.addTypedPanels(lr, ps[i]);
29278             }
29279         }
29280         else if(!ps.events){ // raw config?
29281             var el = ps.el;
29282             delete ps.el; // prevent conflict
29283             lr.add(new Roo.ContentPanel(el || Roo.id(), ps));
29284         }
29285         else {  // panel object assumed!
29286             lr.add(ps);
29287         }
29288     },
29289     /**
29290      * Adds a xtype elements to the layout.
29291      * <pre><code>
29292
29293 layout.addxtype({
29294        xtype : 'ContentPanel',
29295        region: 'west',
29296        items: [ .... ]
29297    }
29298 );
29299
29300 layout.addxtype({
29301         xtype : 'NestedLayoutPanel',
29302         region: 'west',
29303         layout: {
29304            center: { },
29305            west: { }   
29306         },
29307         items : [ ... list of content panels or nested layout panels.. ]
29308    }
29309 );
29310 </code></pre>
29311      * @param {Object} cfg Xtype definition of item to add.
29312      */
29313     addxtype : function(cfg)
29314     {
29315         // basically accepts a pannel...
29316         // can accept a layout region..!?!?
29317         //Roo.log('Roo.BorderLayout add ' + cfg.xtype)
29318         
29319         if (!cfg.xtype.match(/Panel$/)) {
29320             return false;
29321         }
29322         var ret = false;
29323         
29324         if (typeof(cfg.region) == 'undefined') {
29325             Roo.log("Failed to add Panel, region was not set");
29326             Roo.log(cfg);
29327             return false;
29328         }
29329         var region = cfg.region;
29330         delete cfg.region;
29331         
29332           
29333         var xitems = [];
29334         if (cfg.items) {
29335             xitems = cfg.items;
29336             delete cfg.items;
29337         }
29338         var nb = false;
29339         
29340         switch(cfg.xtype) 
29341         {
29342             case 'ContentPanel':  // ContentPanel (el, cfg)
29343             case 'ScrollPanel':  // ContentPanel (el, cfg)
29344             case 'ViewPanel': 
29345                 if(cfg.autoCreate) {
29346                     ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
29347                 } else {
29348                     var el = this.el.createChild();
29349                     ret = new Roo[cfg.xtype](el, cfg); // new panel!!!!!
29350                 }
29351                 
29352                 this.add(region, ret);
29353                 break;
29354             
29355             
29356             case 'TreePanel': // our new panel!
29357                 cfg.el = this.el.createChild();
29358                 ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
29359                 this.add(region, ret);
29360                 break;
29361             
29362             case 'NestedLayoutPanel': 
29363                 // create a new Layout (which is  a Border Layout...
29364                 var el = this.el.createChild();
29365                 var clayout = cfg.layout;
29366                 delete cfg.layout;
29367                 clayout.items   = clayout.items  || [];
29368                 // replace this exitems with the clayout ones..
29369                 xitems = clayout.items;
29370                  
29371                 
29372                 if (region == 'center' && this.active && this.getRegion('center').panels.length < 1) {
29373                     cfg.background = false;
29374                 }
29375                 var layout = new Roo.BorderLayout(el, clayout);
29376                 
29377                 ret = new Roo[cfg.xtype](layout, cfg); // new panel!!!!!
29378                 //console.log('adding nested layout panel '  + cfg.toSource());
29379                 this.add(region, ret);
29380                 nb = {}; /// find first...
29381                 break;
29382                 
29383             case 'GridPanel': 
29384             
29385                 // needs grid and region
29386                 
29387                 //var el = this.getRegion(region).el.createChild();
29388                 var el = this.el.createChild();
29389                 // create the grid first...
29390                 
29391                 var grid = new Roo.grid[cfg.grid.xtype](el, cfg.grid);
29392                 delete cfg.grid;
29393                 if (region == 'center' && this.active ) {
29394                     cfg.background = false;
29395                 }
29396                 ret = new Roo[cfg.xtype](grid, cfg); // new panel!!!!!
29397                 
29398                 this.add(region, ret);
29399                 if (cfg.background) {
29400                     ret.on('activate', function(gp) {
29401                         if (!gp.grid.rendered) {
29402                             gp.grid.render();
29403                         }
29404                     });
29405                 } else {
29406                     grid.render();
29407                 }
29408                 break;
29409            
29410            
29411            
29412                 
29413                 
29414                 
29415             default:
29416                 if (typeof(Roo[cfg.xtype]) != 'undefined') {
29417                     
29418                     ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
29419                     this.add(region, ret);
29420                 } else {
29421                 
29422                     alert("Can not add '" + cfg.xtype + "' to BorderLayout");
29423                     return null;
29424                 }
29425                 
29426              // GridPanel (grid, cfg)
29427             
29428         }
29429         this.beginUpdate();
29430         // add children..
29431         var region = '';
29432         var abn = {};
29433         Roo.each(xitems, function(i)  {
29434             region = nb && i.region ? i.region : false;
29435             
29436             var add = ret.addxtype(i);
29437            
29438             if (region) {
29439                 nb[region] = nb[region] == undefined ? 0 : nb[region]+1;
29440                 if (!i.background) {
29441                     abn[region] = nb[region] ;
29442                 }
29443             }
29444             
29445         });
29446         this.endUpdate();
29447
29448         // make the last non-background panel active..
29449         //if (nb) { Roo.log(abn); }
29450         if (nb) {
29451             
29452             for(var r in abn) {
29453                 region = this.getRegion(r);
29454                 if (region) {
29455                     // tried using nb[r], but it does not work..
29456                      
29457                     region.showPanel(abn[r]);
29458                    
29459                 }
29460             }
29461         }
29462         return ret;
29463         
29464     }
29465 });
29466
29467 /**
29468  * Shortcut for creating a new BorderLayout object and adding one or more ContentPanels to it in a single step, handling
29469  * the beginUpdate and endUpdate calls internally.  The key to this method is the <b>panels</b> property that can be
29470  * provided with each region config, which allows you to add ContentPanel configs in addition to the region configs
29471  * during creation.  The following code is equivalent to the constructor-based example at the beginning of this class:
29472  * <pre><code>
29473 // shorthand
29474 var CP = Roo.ContentPanel;
29475
29476 var layout = Roo.BorderLayout.create({
29477     north: {
29478         initialSize: 25,
29479         titlebar: false,
29480         panels: [new CP("north", "North")]
29481     },
29482     west: {
29483         split:true,
29484         initialSize: 200,
29485         minSize: 175,
29486         maxSize: 400,
29487         titlebar: true,
29488         collapsible: true,
29489         panels: [new CP("west", {title: "West"})]
29490     },
29491     east: {
29492         split:true,
29493         initialSize: 202,
29494         minSize: 175,
29495         maxSize: 400,
29496         titlebar: true,
29497         collapsible: true,
29498         panels: [new CP("autoTabs", {title: "Auto Tabs", closable: true})]
29499     },
29500     south: {
29501         split:true,
29502         initialSize: 100,
29503         minSize: 100,
29504         maxSize: 200,
29505         titlebar: true,
29506         collapsible: true,
29507         panels: [new CP("south", {title: "South", closable: true})]
29508     },
29509     center: {
29510         titlebar: true,
29511         autoScroll:true,
29512         resizeTabs: true,
29513         minTabWidth: 50,
29514         preferredTabWidth: 150,
29515         panels: [
29516             new CP("center1", {title: "Close Me", closable: true}),
29517             new CP("center2", {title: "Center Panel", closable: false})
29518         ]
29519     }
29520 }, document.body);
29521
29522 layout.getRegion("center").showPanel("center1");
29523 </code></pre>
29524  * @param config
29525  * @param targetEl
29526  */
29527 Roo.BorderLayout.create = function(config, targetEl){
29528     var layout = new Roo.BorderLayout(targetEl || document.body, config);
29529     layout.beginUpdate();
29530     var regions = Roo.BorderLayout.RegionFactory.validRegions;
29531     for(var j = 0, jlen = regions.length; j < jlen; j++){
29532         var lr = regions[j];
29533         if(layout.regions[lr] && config[lr].panels){
29534             var r = layout.regions[lr];
29535             var ps = config[lr].panels;
29536             layout.addTypedPanels(r, ps);
29537         }
29538     }
29539     layout.endUpdate();
29540     return layout;
29541 };
29542
29543 // private
29544 Roo.BorderLayout.RegionFactory = {
29545     // private
29546     validRegions : ["north","south","east","west","center"],
29547
29548     // private
29549     create : function(target, mgr, config){
29550         target = target.toLowerCase();
29551         if(config.lightweight || config.basic){
29552             return new Roo.BasicLayoutRegion(mgr, config, target);
29553         }
29554         switch(target){
29555             case "north":
29556                 return new Roo.NorthLayoutRegion(mgr, config);
29557             case "south":
29558                 return new Roo.SouthLayoutRegion(mgr, config);
29559             case "east":
29560                 return new Roo.EastLayoutRegion(mgr, config);
29561             case "west":
29562                 return new Roo.WestLayoutRegion(mgr, config);
29563             case "center":
29564                 return new Roo.CenterLayoutRegion(mgr, config);
29565         }
29566         throw 'Layout region "'+target+'" not supported.';
29567     }
29568 };/*
29569  * Based on:
29570  * Ext JS Library 1.1.1
29571  * Copyright(c) 2006-2007, Ext JS, LLC.
29572  *
29573  * Originally Released Under LGPL - original licence link has changed is not relivant.
29574  *
29575  * Fork - LGPL
29576  * <script type="text/javascript">
29577  */
29578  
29579 /**
29580  * @class Roo.BasicLayoutRegion
29581  * @extends Roo.util.Observable
29582  * This class represents a lightweight region in a layout manager. This region does not move dom nodes
29583  * and does not have a titlebar, tabs or any other features. All it does is size and position 
29584  * panels. To create a BasicLayoutRegion, add lightweight:true or basic:true to your regions config.
29585  */
29586 Roo.BasicLayoutRegion = function(mgr, config, pos, skipConfig){
29587     this.mgr = mgr;
29588     this.position  = pos;
29589     this.events = {
29590         /**
29591          * @scope Roo.BasicLayoutRegion
29592          */
29593         
29594         /**
29595          * @event beforeremove
29596          * Fires before a panel is removed (or closed). To cancel the removal set "e.cancel = true" on the event argument.
29597          * @param {Roo.LayoutRegion} this
29598          * @param {Roo.ContentPanel} panel The panel
29599          * @param {Object} e The cancel event object
29600          */
29601         "beforeremove" : true,
29602         /**
29603          * @event invalidated
29604          * Fires when the layout for this region is changed.
29605          * @param {Roo.LayoutRegion} this
29606          */
29607         "invalidated" : true,
29608         /**
29609          * @event visibilitychange
29610          * Fires when this region is shown or hidden 
29611          * @param {Roo.LayoutRegion} this
29612          * @param {Boolean} visibility true or false
29613          */
29614         "visibilitychange" : true,
29615         /**
29616          * @event paneladded
29617          * Fires when a panel is added. 
29618          * @param {Roo.LayoutRegion} this
29619          * @param {Roo.ContentPanel} panel The panel
29620          */
29621         "paneladded" : true,
29622         /**
29623          * @event panelremoved
29624          * Fires when a panel is removed. 
29625          * @param {Roo.LayoutRegion} this
29626          * @param {Roo.ContentPanel} panel The panel
29627          */
29628         "panelremoved" : true,
29629         /**
29630          * @event beforecollapse
29631          * Fires when this region before collapse.
29632          * @param {Roo.LayoutRegion} this
29633          */
29634         "beforecollapse" : true,
29635         /**
29636          * @event collapsed
29637          * Fires when this region is collapsed.
29638          * @param {Roo.LayoutRegion} this
29639          */
29640         "collapsed" : true,
29641         /**
29642          * @event expanded
29643          * Fires when this region is expanded.
29644          * @param {Roo.LayoutRegion} this
29645          */
29646         "expanded" : true,
29647         /**
29648          * @event slideshow
29649          * Fires when this region is slid into view.
29650          * @param {Roo.LayoutRegion} this
29651          */
29652         "slideshow" : true,
29653         /**
29654          * @event slidehide
29655          * Fires when this region slides out of view. 
29656          * @param {Roo.LayoutRegion} this
29657          */
29658         "slidehide" : true,
29659         /**
29660          * @event panelactivated
29661          * Fires when a panel is activated. 
29662          * @param {Roo.LayoutRegion} this
29663          * @param {Roo.ContentPanel} panel The activated panel
29664          */
29665         "panelactivated" : true,
29666         /**
29667          * @event resized
29668          * Fires when the user resizes this region. 
29669          * @param {Roo.LayoutRegion} this
29670          * @param {Number} newSize The new size (width for east/west, height for north/south)
29671          */
29672         "resized" : true
29673     };
29674     /** A collection of panels in this region. @type Roo.util.MixedCollection */
29675     this.panels = new Roo.util.MixedCollection();
29676     this.panels.getKey = this.getPanelId.createDelegate(this);
29677     this.box = null;
29678     this.activePanel = null;
29679     // ensure listeners are added...
29680     
29681     if (config.listeners || config.events) {
29682         Roo.BasicLayoutRegion.superclass.constructor.call(this, {
29683             listeners : config.listeners || {},
29684             events : config.events || {}
29685         });
29686     }
29687     
29688     if(skipConfig !== true){
29689         this.applyConfig(config);
29690     }
29691 };
29692
29693 Roo.extend(Roo.BasicLayoutRegion, Roo.util.Observable, {
29694     getPanelId : function(p){
29695         return p.getId();
29696     },
29697     
29698     applyConfig : function(config){
29699         this.margins = config.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
29700         this.config = config;
29701         
29702     },
29703     
29704     /**
29705      * Resizes the region to the specified size. For vertical regions (west, east) this adjusts 
29706      * the width, for horizontal (north, south) the height.
29707      * @param {Number} newSize The new width or height
29708      */
29709     resizeTo : function(newSize){
29710         var el = this.el ? this.el :
29711                  (this.activePanel ? this.activePanel.getEl() : null);
29712         if(el){
29713             switch(this.position){
29714                 case "east":
29715                 case "west":
29716                     el.setWidth(newSize);
29717                     this.fireEvent("resized", this, newSize);
29718                 break;
29719                 case "north":
29720                 case "south":
29721                     el.setHeight(newSize);
29722                     this.fireEvent("resized", this, newSize);
29723                 break;                
29724             }
29725         }
29726     },
29727     
29728     getBox : function(){
29729         return this.activePanel ? this.activePanel.getEl().getBox(false, true) : null;
29730     },
29731     
29732     getMargins : function(){
29733         return this.margins;
29734     },
29735     
29736     updateBox : function(box){
29737         this.box = box;
29738         var el = this.activePanel.getEl();
29739         el.dom.style.left = box.x + "px";
29740         el.dom.style.top = box.y + "px";
29741         this.activePanel.setSize(box.width, box.height);
29742     },
29743     
29744     /**
29745      * Returns the container element for this region.
29746      * @return {Roo.Element}
29747      */
29748     getEl : function(){
29749         return this.activePanel;
29750     },
29751     
29752     /**
29753      * Returns true if this region is currently visible.
29754      * @return {Boolean}
29755      */
29756     isVisible : function(){
29757         return this.activePanel ? true : false;
29758     },
29759     
29760     setActivePanel : function(panel){
29761         panel = this.getPanel(panel);
29762         if(this.activePanel && this.activePanel != panel){
29763             this.activePanel.setActiveState(false);
29764             this.activePanel.getEl().setLeftTop(-10000,-10000);
29765         }
29766         this.activePanel = panel;
29767         panel.setActiveState(true);
29768         if(this.box){
29769             panel.setSize(this.box.width, this.box.height);
29770         }
29771         this.fireEvent("panelactivated", this, panel);
29772         this.fireEvent("invalidated");
29773     },
29774     
29775     /**
29776      * Show the specified panel.
29777      * @param {Number/String/ContentPanel} panelId The panels index, id or the panel itself
29778      * @return {Roo.ContentPanel} The shown panel or null
29779      */
29780     showPanel : function(panel){
29781         if(panel = this.getPanel(panel)){
29782             this.setActivePanel(panel);
29783         }
29784         return panel;
29785     },
29786     
29787     /**
29788      * Get the active panel for this region.
29789      * @return {Roo.ContentPanel} The active panel or null
29790      */
29791     getActivePanel : function(){
29792         return this.activePanel;
29793     },
29794     
29795     /**
29796      * Add the passed ContentPanel(s)
29797      * @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
29798      * @return {Roo.ContentPanel} The panel added (if only one was added)
29799      */
29800     add : function(panel){
29801         if(arguments.length > 1){
29802             for(var i = 0, len = arguments.length; i < len; i++) {
29803                 this.add(arguments[i]);
29804             }
29805             return null;
29806         }
29807         if(this.hasPanel(panel)){
29808             this.showPanel(panel);
29809             return panel;
29810         }
29811         var el = panel.getEl();
29812         if(el.dom.parentNode != this.mgr.el.dom){
29813             this.mgr.el.dom.appendChild(el.dom);
29814         }
29815         if(panel.setRegion){
29816             panel.setRegion(this);
29817         }
29818         this.panels.add(panel);
29819         el.setStyle("position", "absolute");
29820         if(!panel.background){
29821             this.setActivePanel(panel);
29822             if(this.config.initialSize && this.panels.getCount()==1){
29823                 this.resizeTo(this.config.initialSize);
29824             }
29825         }
29826         this.fireEvent("paneladded", this, panel);
29827         return panel;
29828     },
29829     
29830     /**
29831      * Returns true if the panel is in this region.
29832      * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
29833      * @return {Boolean}
29834      */
29835     hasPanel : function(panel){
29836         if(typeof panel == "object"){ // must be panel obj
29837             panel = panel.getId();
29838         }
29839         return this.getPanel(panel) ? true : false;
29840     },
29841     
29842     /**
29843      * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
29844      * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
29845      * @param {Boolean} preservePanel Overrides the config preservePanel option
29846      * @return {Roo.ContentPanel} The panel that was removed
29847      */
29848     remove : function(panel, preservePanel){
29849         panel = this.getPanel(panel);
29850         if(!panel){
29851             return null;
29852         }
29853         var e = {};
29854         this.fireEvent("beforeremove", this, panel, e);
29855         if(e.cancel === true){
29856             return null;
29857         }
29858         var panelId = panel.getId();
29859         this.panels.removeKey(panelId);
29860         return panel;
29861     },
29862     
29863     /**
29864      * Returns the panel specified or null if it's not in this region.
29865      * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
29866      * @return {Roo.ContentPanel}
29867      */
29868     getPanel : function(id){
29869         if(typeof id == "object"){ // must be panel obj
29870             return id;
29871         }
29872         return this.panels.get(id);
29873     },
29874     
29875     /**
29876      * Returns this regions position (north/south/east/west/center).
29877      * @return {String} 
29878      */
29879     getPosition: function(){
29880         return this.position;    
29881     }
29882 });/*
29883  * Based on:
29884  * Ext JS Library 1.1.1
29885  * Copyright(c) 2006-2007, Ext JS, LLC.
29886  *
29887  * Originally Released Under LGPL - original licence link has changed is not relivant.
29888  *
29889  * Fork - LGPL
29890  * <script type="text/javascript">
29891  */
29892  
29893 /**
29894  * @class Roo.LayoutRegion
29895  * @extends Roo.BasicLayoutRegion
29896  * This class represents a region in a layout manager.
29897  * @cfg {Boolean}   collapsible     False to disable collapsing (defaults to true)
29898  * @cfg {Boolean}   collapsed       True to set the initial display to collapsed (defaults to false)
29899  * @cfg {Boolean}   floatable       False to disable floating (defaults to true)
29900  * @cfg {Object}    margins         Margins for the element (defaults to {top: 0, left: 0, right:0, bottom: 0})
29901  * @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})
29902  * @cfg {String}    tabPosition     (top|bottom) "top" or "bottom" (defaults to "bottom")
29903  * @cfg {String}    collapsedTitle  Optional string message to display in the collapsed block of a north or south region
29904  * @cfg {Boolean}   alwaysShowTabs  True to always display tabs even when there is only 1 panel (defaults to false)
29905  * @cfg {Boolean}   autoScroll      True to enable overflow scrolling (defaults to false)
29906  * @cfg {Boolean}   titlebar        True to display a title bar (defaults to true)
29907  * @cfg {String}    title           The title for the region (overrides panel titles)
29908  * @cfg {Boolean}   animate         True to animate expand/collapse (defaults to false)
29909  * @cfg {Boolean}   autoHide        False to disable auto hiding when the mouse leaves the "floated" region (defaults to true)
29910  * @cfg {Boolean}   preservePanels  True to preserve removed panels so they can be readded later (defaults to false)
29911  * @cfg {Boolean}   closeOnTab      True to place the close icon on the tabs instead of the region titlebar (defaults to false)
29912  * @cfg {Boolean}   hideTabs        True to hide the tab strip (defaults to false)
29913  * @cfg {Boolean}   resizeTabs      True to enable automatic tab resizing. This will resize the tabs so they are all the same size and fit within
29914  *                      the space available, similar to FireFox 1.5 tabs (defaults to false)
29915  * @cfg {Number}    minTabWidth     The minimum tab width (defaults to 40)
29916  * @cfg {Number}    preferredTabWidth The preferred tab width (defaults to 150)
29917  * @cfg {Boolean}   showPin         True to show a pin button
29918  * @cfg {Boolean}   hidden          True to start the region hidden (defaults to false)
29919  * @cfg {Boolean}   hideWhenEmpty   True to hide the region when it has no panels
29920  * @cfg {Boolean}   disableTabTips  True to disable tab tooltips
29921  * @cfg {Number}    width           For East/West panels
29922  * @cfg {Number}    height          For North/South panels
29923  * @cfg {Boolean}   split           To show the splitter
29924  * @cfg {Boolean}   toolbar         xtype configuration for a toolbar - shows on right of tabbar
29925  */
29926 Roo.LayoutRegion = function(mgr, config, pos){
29927     Roo.LayoutRegion.superclass.constructor.call(this, mgr, config, pos, true);
29928     var dh = Roo.DomHelper;
29929     /** This region's container element 
29930     * @type Roo.Element */
29931     this.el = dh.append(mgr.el.dom, {tag: "div", cls: "x-layout-panel x-layout-panel-" + this.position}, true);
29932     /** This region's title element 
29933     * @type Roo.Element */
29934
29935     this.titleEl = dh.append(this.el.dom, {tag: "div", unselectable: "on", cls: "x-unselectable x-layout-panel-hd x-layout-title-"+this.position, children:[
29936         {tag: "span", cls: "x-unselectable x-layout-panel-hd-text", unselectable: "on", html: "&#160;"},
29937         {tag: "div", cls: "x-unselectable x-layout-panel-hd-tools", unselectable: "on"}
29938     ]}, true);
29939     this.titleEl.enableDisplayMode();
29940     /** This region's title text element 
29941     * @type HTMLElement */
29942     this.titleTextEl = this.titleEl.dom.firstChild;
29943     this.tools = Roo.get(this.titleEl.dom.childNodes[1], true);
29944     this.closeBtn = this.createTool(this.tools.dom, "x-layout-close");
29945     this.closeBtn.enableDisplayMode();
29946     this.closeBtn.on("click", this.closeClicked, this);
29947     this.closeBtn.hide();
29948
29949     this.createBody(config);
29950     this.visible = true;
29951     this.collapsed = false;
29952
29953     if(config.hideWhenEmpty){
29954         this.hide();
29955         this.on("paneladded", this.validateVisibility, this);
29956         this.on("panelremoved", this.validateVisibility, this);
29957     }
29958     this.applyConfig(config);
29959 };
29960
29961 Roo.extend(Roo.LayoutRegion, Roo.BasicLayoutRegion, {
29962
29963     createBody : function(){
29964         /** This region's body element 
29965         * @type Roo.Element */
29966         this.bodyEl = this.el.createChild({tag: "div", cls: "x-layout-panel-body"});
29967     },
29968
29969     applyConfig : function(c){
29970         if(c.collapsible && this.position != "center" && !this.collapsedEl){
29971             var dh = Roo.DomHelper;
29972             if(c.titlebar !== false){
29973                 this.collapseBtn = this.createTool(this.tools.dom, "x-layout-collapse-"+this.position);
29974                 this.collapseBtn.on("click", this.collapse, this);
29975                 this.collapseBtn.enableDisplayMode();
29976
29977                 if(c.showPin === true || this.showPin){
29978                     this.stickBtn = this.createTool(this.tools.dom, "x-layout-stick");
29979                     this.stickBtn.enableDisplayMode();
29980                     this.stickBtn.on("click", this.expand, this);
29981                     this.stickBtn.hide();
29982                 }
29983             }
29984             /** This region's collapsed element
29985             * @type Roo.Element */
29986             this.collapsedEl = dh.append(this.mgr.el.dom, {cls: "x-layout-collapsed x-layout-collapsed-"+this.position, children:[
29987                 {cls: "x-layout-collapsed-tools", children:[{cls: "x-layout-ctools-inner"}]}
29988             ]}, true);
29989             if(c.floatable !== false){
29990                this.collapsedEl.addClassOnOver("x-layout-collapsed-over");
29991                this.collapsedEl.on("click", this.collapseClick, this);
29992             }
29993
29994             if(c.collapsedTitle && (this.position == "north" || this.position== "south")) {
29995                 this.collapsedTitleTextEl = dh.append(this.collapsedEl.dom, {tag: "div", cls: "x-unselectable x-layout-panel-hd-text",
29996                    id: "message", unselectable: "on", style:{"float":"left"}});
29997                this.collapsedTitleTextEl.innerHTML = c.collapsedTitle;
29998              }
29999             this.expandBtn = this.createTool(this.collapsedEl.dom.firstChild.firstChild, "x-layout-expand-"+this.position);
30000             this.expandBtn.on("click", this.expand, this);
30001         }
30002         if(this.collapseBtn){
30003             this.collapseBtn.setVisible(c.collapsible == true);
30004         }
30005         this.cmargins = c.cmargins || this.cmargins ||
30006                          (this.position == "west" || this.position == "east" ?
30007                              {top: 0, left: 2, right:2, bottom: 0} :
30008                              {top: 2, left: 0, right:0, bottom: 2});
30009         this.margins = c.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
30010         this.bottomTabs = c.tabPosition != "top";
30011         this.autoScroll = c.autoScroll || false;
30012         if(this.autoScroll){
30013             this.bodyEl.setStyle("overflow", "auto");
30014         }else{
30015             this.bodyEl.setStyle("overflow", "hidden");
30016         }
30017         //if(c.titlebar !== false){
30018             if((!c.titlebar && !c.title) || c.titlebar === false){
30019                 this.titleEl.hide();
30020             }else{
30021                 this.titleEl.show();
30022                 if(c.title){
30023                     this.titleTextEl.innerHTML = c.title;
30024                 }
30025             }
30026         //}
30027         this.duration = c.duration || .30;
30028         this.slideDuration = c.slideDuration || .45;
30029         this.config = c;
30030         if(c.collapsed){
30031             this.collapse(true);
30032         }
30033         if(c.hidden){
30034             this.hide();
30035         }
30036     },
30037     /**
30038      * Returns true if this region is currently visible.
30039      * @return {Boolean}
30040      */
30041     isVisible : function(){
30042         return this.visible;
30043     },
30044
30045     /**
30046      * Updates the title for collapsed north/south regions (used with {@link #collapsedTitle} config option)
30047      * @param {String} title (optional) The title text (accepts HTML markup, defaults to the numeric character reference for a non-breaking space, "&amp;#160;")
30048      */
30049     setCollapsedTitle : function(title){
30050         title = title || "&#160;";
30051         if(this.collapsedTitleTextEl){
30052             this.collapsedTitleTextEl.innerHTML = title;
30053         }
30054     },
30055
30056     getBox : function(){
30057         var b;
30058         if(!this.collapsed){
30059             b = this.el.getBox(false, true);
30060         }else{
30061             b = this.collapsedEl.getBox(false, true);
30062         }
30063         return b;
30064     },
30065
30066     getMargins : function(){
30067         return this.collapsed ? this.cmargins : this.margins;
30068     },
30069
30070     highlight : function(){
30071         this.el.addClass("x-layout-panel-dragover");
30072     },
30073
30074     unhighlight : function(){
30075         this.el.removeClass("x-layout-panel-dragover");
30076     },
30077
30078     updateBox : function(box){
30079         this.box = box;
30080         if(!this.collapsed){
30081             this.el.dom.style.left = box.x + "px";
30082             this.el.dom.style.top = box.y + "px";
30083             this.updateBody(box.width, box.height);
30084         }else{
30085             this.collapsedEl.dom.style.left = box.x + "px";
30086             this.collapsedEl.dom.style.top = box.y + "px";
30087             this.collapsedEl.setSize(box.width, box.height);
30088         }
30089         if(this.tabs){
30090             this.tabs.autoSizeTabs();
30091         }
30092     },
30093
30094     updateBody : function(w, h){
30095         if(w !== null){
30096             this.el.setWidth(w);
30097             w -= this.el.getBorderWidth("rl");
30098             if(this.config.adjustments){
30099                 w += this.config.adjustments[0];
30100             }
30101         }
30102         if(h !== null){
30103             this.el.setHeight(h);
30104             h = this.titleEl && this.titleEl.isDisplayed() ? h - (this.titleEl.getHeight()||0) : h;
30105             h -= this.el.getBorderWidth("tb");
30106             if(this.config.adjustments){
30107                 h += this.config.adjustments[1];
30108             }
30109             this.bodyEl.setHeight(h);
30110             if(this.tabs){
30111                 h = this.tabs.syncHeight(h);
30112             }
30113         }
30114         if(this.panelSize){
30115             w = w !== null ? w : this.panelSize.width;
30116             h = h !== null ? h : this.panelSize.height;
30117         }
30118         if(this.activePanel){
30119             var el = this.activePanel.getEl();
30120             w = w !== null ? w : el.getWidth();
30121             h = h !== null ? h : el.getHeight();
30122             this.panelSize = {width: w, height: h};
30123             this.activePanel.setSize(w, h);
30124         }
30125         if(Roo.isIE && this.tabs){
30126             this.tabs.el.repaint();
30127         }
30128     },
30129
30130     /**
30131      * Returns the container element for this region.
30132      * @return {Roo.Element}
30133      */
30134     getEl : function(){
30135         return this.el;
30136     },
30137
30138     /**
30139      * Hides this region.
30140      */
30141     hide : function(){
30142         if(!this.collapsed){
30143             this.el.dom.style.left = "-2000px";
30144             this.el.hide();
30145         }else{
30146             this.collapsedEl.dom.style.left = "-2000px";
30147             this.collapsedEl.hide();
30148         }
30149         this.visible = false;
30150         this.fireEvent("visibilitychange", this, false);
30151     },
30152
30153     /**
30154      * Shows this region if it was previously hidden.
30155      */
30156     show : function(){
30157         if(!this.collapsed){
30158             this.el.show();
30159         }else{
30160             this.collapsedEl.show();
30161         }
30162         this.visible = true;
30163         this.fireEvent("visibilitychange", this, true);
30164     },
30165
30166     closeClicked : function(){
30167         if(this.activePanel){
30168             this.remove(this.activePanel);
30169         }
30170     },
30171
30172     collapseClick : function(e){
30173         if(this.isSlid){
30174            e.stopPropagation();
30175            this.slideIn();
30176         }else{
30177            e.stopPropagation();
30178            this.slideOut();
30179         }
30180     },
30181
30182     /**
30183      * Collapses this region.
30184      * @param {Boolean} skipAnim (optional) true to collapse the element without animation (if animate is true)
30185      */
30186     collapse : function(skipAnim, skipCheck){
30187         if(this.collapsed) {
30188             return;
30189         }
30190         
30191         if(skipCheck || this.fireEvent("beforecollapse", this) != false){
30192             
30193             this.collapsed = true;
30194             if(this.split){
30195                 this.split.el.hide();
30196             }
30197             if(this.config.animate && skipAnim !== true){
30198                 this.fireEvent("invalidated", this);
30199                 this.animateCollapse();
30200             }else{
30201                 this.el.setLocation(-20000,-20000);
30202                 this.el.hide();
30203                 this.collapsedEl.show();
30204                 this.fireEvent("collapsed", this);
30205                 this.fireEvent("invalidated", this);
30206             }
30207         }
30208         
30209     },
30210
30211     animateCollapse : function(){
30212         // overridden
30213     },
30214
30215     /**
30216      * Expands this region if it was previously collapsed.
30217      * @param {Roo.EventObject} e The event that triggered the expand (or null if calling manually)
30218      * @param {Boolean} skipAnim (optional) true to expand the element without animation (if animate is true)
30219      */
30220     expand : function(e, skipAnim){
30221         if(e) {
30222             e.stopPropagation();
30223         }
30224         if(!this.collapsed || this.el.hasActiveFx()) {
30225             return;
30226         }
30227         if(this.isSlid){
30228             this.afterSlideIn();
30229             skipAnim = true;
30230         }
30231         this.collapsed = false;
30232         if(this.config.animate && skipAnim !== true){
30233             this.animateExpand();
30234         }else{
30235             this.el.show();
30236             if(this.split){
30237                 this.split.el.show();
30238             }
30239             this.collapsedEl.setLocation(-2000,-2000);
30240             this.collapsedEl.hide();
30241             this.fireEvent("invalidated", this);
30242             this.fireEvent("expanded", this);
30243         }
30244     },
30245
30246     animateExpand : function(){
30247         // overridden
30248     },
30249
30250     initTabs : function()
30251     {
30252         this.bodyEl.setStyle("overflow", "hidden");
30253         var ts = new Roo.TabPanel(
30254                 this.bodyEl.dom,
30255                 {
30256                     tabPosition: this.bottomTabs ? 'bottom' : 'top',
30257                     disableTooltips: this.config.disableTabTips,
30258                     toolbar : this.config.toolbar
30259                 }
30260         );
30261         if(this.config.hideTabs){
30262             ts.stripWrap.setDisplayed(false);
30263         }
30264         this.tabs = ts;
30265         ts.resizeTabs = this.config.resizeTabs === true;
30266         ts.minTabWidth = this.config.minTabWidth || 40;
30267         ts.maxTabWidth = this.config.maxTabWidth || 250;
30268         ts.preferredTabWidth = this.config.preferredTabWidth || 150;
30269         ts.monitorResize = false;
30270         ts.bodyEl.setStyle("overflow", this.config.autoScroll ? "auto" : "hidden");
30271         ts.bodyEl.addClass('x-layout-tabs-body');
30272         this.panels.each(this.initPanelAsTab, this);
30273     },
30274
30275     initPanelAsTab : function(panel){
30276         var ti = this.tabs.addTab(panel.getEl().id, panel.getTitle(), null,
30277                     this.config.closeOnTab && panel.isClosable());
30278         if(panel.tabTip !== undefined){
30279             ti.setTooltip(panel.tabTip);
30280         }
30281         ti.on("activate", function(){
30282               this.setActivePanel(panel);
30283         }, this);
30284         if(this.config.closeOnTab){
30285             ti.on("beforeclose", function(t, e){
30286                 e.cancel = true;
30287                 this.remove(panel);
30288             }, this);
30289         }
30290         return ti;
30291     },
30292
30293     updatePanelTitle : function(panel, title){
30294         if(this.activePanel == panel){
30295             this.updateTitle(title);
30296         }
30297         if(this.tabs){
30298             var ti = this.tabs.getTab(panel.getEl().id);
30299             ti.setText(title);
30300             if(panel.tabTip !== undefined){
30301                 ti.setTooltip(panel.tabTip);
30302             }
30303         }
30304     },
30305
30306     updateTitle : function(title){
30307         if(this.titleTextEl && !this.config.title){
30308             this.titleTextEl.innerHTML = (typeof title != "undefined" && title.length > 0 ? title : "&#160;");
30309         }
30310     },
30311
30312     setActivePanel : function(panel){
30313         panel = this.getPanel(panel);
30314         if(this.activePanel && this.activePanel != panel){
30315             this.activePanel.setActiveState(false);
30316         }
30317         this.activePanel = panel;
30318         panel.setActiveState(true);
30319         if(this.panelSize){
30320             panel.setSize(this.panelSize.width, this.panelSize.height);
30321         }
30322         if(this.closeBtn){
30323             this.closeBtn.setVisible(!this.config.closeOnTab && !this.isSlid && panel.isClosable());
30324         }
30325         this.updateTitle(panel.getTitle());
30326         if(this.tabs){
30327             this.fireEvent("invalidated", this);
30328         }
30329         this.fireEvent("panelactivated", this, panel);
30330     },
30331
30332     /**
30333      * Shows the specified panel.
30334      * @param {Number/String/ContentPanel} panelId The panel's index, id or the panel itself
30335      * @return {Roo.ContentPanel} The shown panel, or null if a panel could not be found from panelId
30336      */
30337     showPanel : function(panel)
30338     {
30339         panel = this.getPanel(panel);
30340         if(panel){
30341             if(this.tabs){
30342                 var tab = this.tabs.getTab(panel.getEl().id);
30343                 if(tab.isHidden()){
30344                     this.tabs.unhideTab(tab.id);
30345                 }
30346                 tab.activate();
30347             }else{
30348                 this.setActivePanel(panel);
30349             }
30350         }
30351         return panel;
30352     },
30353
30354     /**
30355      * Get the active panel for this region.
30356      * @return {Roo.ContentPanel} The active panel or null
30357      */
30358     getActivePanel : function(){
30359         return this.activePanel;
30360     },
30361
30362     validateVisibility : function(){
30363         if(this.panels.getCount() < 1){
30364             this.updateTitle("&#160;");
30365             this.closeBtn.hide();
30366             this.hide();
30367         }else{
30368             if(!this.isVisible()){
30369                 this.show();
30370             }
30371         }
30372     },
30373
30374     /**
30375      * Adds the passed ContentPanel(s) to this region.
30376      * @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
30377      * @return {Roo.ContentPanel} The panel added (if only one was added; null otherwise)
30378      */
30379     add : function(panel){
30380         if(arguments.length > 1){
30381             for(var i = 0, len = arguments.length; i < len; i++) {
30382                 this.add(arguments[i]);
30383             }
30384             return null;
30385         }
30386         if(this.hasPanel(panel)){
30387             this.showPanel(panel);
30388             return panel;
30389         }
30390         panel.setRegion(this);
30391         this.panels.add(panel);
30392         if(this.panels.getCount() == 1 && !this.config.alwaysShowTabs){
30393             this.bodyEl.dom.appendChild(panel.getEl().dom);
30394             if(panel.background !== true){
30395                 this.setActivePanel(panel);
30396             }
30397             this.fireEvent("paneladded", this, panel);
30398             return panel;
30399         }
30400         if(!this.tabs){
30401             this.initTabs();
30402         }else{
30403             this.initPanelAsTab(panel);
30404         }
30405         if(panel.background !== true){
30406             this.tabs.activate(panel.getEl().id);
30407         }
30408         this.fireEvent("paneladded", this, panel);
30409         return panel;
30410     },
30411
30412     /**
30413      * Hides the tab for the specified panel.
30414      * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
30415      */
30416     hidePanel : function(panel){
30417         if(this.tabs && (panel = this.getPanel(panel))){
30418             this.tabs.hideTab(panel.getEl().id);
30419         }
30420     },
30421
30422     /**
30423      * Unhides the tab for a previously hidden panel.
30424      * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
30425      */
30426     unhidePanel : function(panel){
30427         if(this.tabs && (panel = this.getPanel(panel))){
30428             this.tabs.unhideTab(panel.getEl().id);
30429         }
30430     },
30431
30432     clearPanels : function(){
30433         while(this.panels.getCount() > 0){
30434              this.remove(this.panels.first());
30435         }
30436     },
30437
30438     /**
30439      * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
30440      * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
30441      * @param {Boolean} preservePanel Overrides the config preservePanel option
30442      * @return {Roo.ContentPanel} The panel that was removed
30443      */
30444     remove : function(panel, preservePanel){
30445         panel = this.getPanel(panel);
30446         if(!panel){
30447             return null;
30448         }
30449         var e = {};
30450         this.fireEvent("beforeremove", this, panel, e);
30451         if(e.cancel === true){
30452             return null;
30453         }
30454         preservePanel = (typeof preservePanel != "undefined" ? preservePanel : (this.config.preservePanels === true || panel.preserve === true));
30455         var panelId = panel.getId();
30456         this.panels.removeKey(panelId);
30457         if(preservePanel){
30458             document.body.appendChild(panel.getEl().dom);
30459         }
30460         if(this.tabs){
30461             this.tabs.removeTab(panel.getEl().id);
30462         }else if (!preservePanel){
30463             this.bodyEl.dom.removeChild(panel.getEl().dom);
30464         }
30465         if(this.panels.getCount() == 1 && this.tabs && !this.config.alwaysShowTabs){
30466             var p = this.panels.first();
30467             var tempEl = document.createElement("div"); // temp holder to keep IE from deleting the node
30468             tempEl.appendChild(p.getEl().dom);
30469             this.bodyEl.update("");
30470             this.bodyEl.dom.appendChild(p.getEl().dom);
30471             tempEl = null;
30472             this.updateTitle(p.getTitle());
30473             this.tabs = null;
30474             this.bodyEl.setStyle("overflow", this.config.autoScroll ? "auto" : "hidden");
30475             this.setActivePanel(p);
30476         }
30477         panel.setRegion(null);
30478         if(this.activePanel == panel){
30479             this.activePanel = null;
30480         }
30481         if(this.config.autoDestroy !== false && preservePanel !== true){
30482             try{panel.destroy();}catch(e){}
30483         }
30484         this.fireEvent("panelremoved", this, panel);
30485         return panel;
30486     },
30487
30488     /**
30489      * Returns the TabPanel component used by this region
30490      * @return {Roo.TabPanel}
30491      */
30492     getTabs : function(){
30493         return this.tabs;
30494     },
30495
30496     createTool : function(parentEl, className){
30497         var btn = Roo.DomHelper.append(parentEl, {tag: "div", cls: "x-layout-tools-button",
30498             children: [{tag: "div", cls: "x-layout-tools-button-inner " + className, html: "&#160;"}]}, true);
30499         btn.addClassOnOver("x-layout-tools-button-over");
30500         return btn;
30501     }
30502 });/*
30503  * Based on:
30504  * Ext JS Library 1.1.1
30505  * Copyright(c) 2006-2007, Ext JS, LLC.
30506  *
30507  * Originally Released Under LGPL - original licence link has changed is not relivant.
30508  *
30509  * Fork - LGPL
30510  * <script type="text/javascript">
30511  */
30512  
30513
30514
30515 /**
30516  * @class Roo.SplitLayoutRegion
30517  * @extends Roo.LayoutRegion
30518  * Adds a splitbar and other (private) useful functionality to a {@link Roo.LayoutRegion}.
30519  */
30520 Roo.SplitLayoutRegion = function(mgr, config, pos, cursor){
30521     this.cursor = cursor;
30522     Roo.SplitLayoutRegion.superclass.constructor.call(this, mgr, config, pos);
30523 };
30524
30525 Roo.extend(Roo.SplitLayoutRegion, Roo.LayoutRegion, {
30526     splitTip : "Drag to resize.",
30527     collapsibleSplitTip : "Drag to resize. Double click to hide.",
30528     useSplitTips : false,
30529
30530     applyConfig : function(config){
30531         Roo.SplitLayoutRegion.superclass.applyConfig.call(this, config);
30532         if(config.split){
30533             if(!this.split){
30534                 var splitEl = Roo.DomHelper.append(this.mgr.el.dom, 
30535                         {tag: "div", id: this.el.id + "-split", cls: "x-layout-split x-layout-split-"+this.position, html: "&#160;"});
30536                 /** The SplitBar for this region 
30537                 * @type Roo.SplitBar */
30538                 this.split = new Roo.SplitBar(splitEl, this.el, this.orientation);
30539                 this.split.on("moved", this.onSplitMove, this);
30540                 this.split.useShim = config.useShim === true;
30541                 this.split.getMaximumSize = this[this.position == 'north' || this.position == 'south' ? 'getVMaxSize' : 'getHMaxSize'].createDelegate(this);
30542                 if(this.useSplitTips){
30543                     this.split.el.dom.title = config.collapsible ? this.collapsibleSplitTip : this.splitTip;
30544                 }
30545                 if(config.collapsible){
30546                     this.split.el.on("dblclick", this.collapse,  this);
30547                 }
30548             }
30549             if(typeof config.minSize != "undefined"){
30550                 this.split.minSize = config.minSize;
30551             }
30552             if(typeof config.maxSize != "undefined"){
30553                 this.split.maxSize = config.maxSize;
30554             }
30555             if(config.hideWhenEmpty || config.hidden || config.collapsed){
30556                 this.hideSplitter();
30557             }
30558         }
30559     },
30560
30561     getHMaxSize : function(){
30562          var cmax = this.config.maxSize || 10000;
30563          var center = this.mgr.getRegion("center");
30564          return Math.min(cmax, (this.el.getWidth()+center.getEl().getWidth())-center.getMinWidth());
30565     },
30566
30567     getVMaxSize : function(){
30568          var cmax = this.config.maxSize || 10000;
30569          var center = this.mgr.getRegion("center");
30570          return Math.min(cmax, (this.el.getHeight()+center.getEl().getHeight())-center.getMinHeight());
30571     },
30572
30573     onSplitMove : function(split, newSize){
30574         this.fireEvent("resized", this, newSize);
30575     },
30576     
30577     /** 
30578      * Returns the {@link Roo.SplitBar} for this region.
30579      * @return {Roo.SplitBar}
30580      */
30581     getSplitBar : function(){
30582         return this.split;
30583     },
30584     
30585     hide : function(){
30586         this.hideSplitter();
30587         Roo.SplitLayoutRegion.superclass.hide.call(this);
30588     },
30589
30590     hideSplitter : function(){
30591         if(this.split){
30592             this.split.el.setLocation(-2000,-2000);
30593             this.split.el.hide();
30594         }
30595     },
30596
30597     show : function(){
30598         if(this.split){
30599             this.split.el.show();
30600         }
30601         Roo.SplitLayoutRegion.superclass.show.call(this);
30602     },
30603     
30604     beforeSlide: function(){
30605         if(Roo.isGecko){// firefox overflow auto bug workaround
30606             this.bodyEl.clip();
30607             if(this.tabs) {
30608                 this.tabs.bodyEl.clip();
30609             }
30610             if(this.activePanel){
30611                 this.activePanel.getEl().clip();
30612                 
30613                 if(this.activePanel.beforeSlide){
30614                     this.activePanel.beforeSlide();
30615                 }
30616             }
30617         }
30618     },
30619     
30620     afterSlide : function(){
30621         if(Roo.isGecko){// firefox overflow auto bug workaround
30622             this.bodyEl.unclip();
30623             if(this.tabs) {
30624                 this.tabs.bodyEl.unclip();
30625             }
30626             if(this.activePanel){
30627                 this.activePanel.getEl().unclip();
30628                 if(this.activePanel.afterSlide){
30629                     this.activePanel.afterSlide();
30630                 }
30631             }
30632         }
30633     },
30634
30635     initAutoHide : function(){
30636         if(this.autoHide !== false){
30637             if(!this.autoHideHd){
30638                 var st = new Roo.util.DelayedTask(this.slideIn, this);
30639                 this.autoHideHd = {
30640                     "mouseout": function(e){
30641                         if(!e.within(this.el, true)){
30642                             st.delay(500);
30643                         }
30644                     },
30645                     "mouseover" : function(e){
30646                         st.cancel();
30647                     },
30648                     scope : this
30649                 };
30650             }
30651             this.el.on(this.autoHideHd);
30652         }
30653     },
30654
30655     clearAutoHide : function(){
30656         if(this.autoHide !== false){
30657             this.el.un("mouseout", this.autoHideHd.mouseout);
30658             this.el.un("mouseover", this.autoHideHd.mouseover);
30659         }
30660     },
30661
30662     clearMonitor : function(){
30663         Roo.get(document).un("click", this.slideInIf, this);
30664     },
30665
30666     // these names are backwards but not changed for compat
30667     slideOut : function(){
30668         if(this.isSlid || this.el.hasActiveFx()){
30669             return;
30670         }
30671         this.isSlid = true;
30672         if(this.collapseBtn){
30673             this.collapseBtn.hide();
30674         }
30675         this.closeBtnState = this.closeBtn.getStyle('display');
30676         this.closeBtn.hide();
30677         if(this.stickBtn){
30678             this.stickBtn.show();
30679         }
30680         this.el.show();
30681         this.el.alignTo(this.collapsedEl, this.getCollapseAnchor());
30682         this.beforeSlide();
30683         this.el.setStyle("z-index", 10001);
30684         this.el.slideIn(this.getSlideAnchor(), {
30685             callback: function(){
30686                 this.afterSlide();
30687                 this.initAutoHide();
30688                 Roo.get(document).on("click", this.slideInIf, this);
30689                 this.fireEvent("slideshow", this);
30690             },
30691             scope: this,
30692             block: true
30693         });
30694     },
30695
30696     afterSlideIn : function(){
30697         this.clearAutoHide();
30698         this.isSlid = false;
30699         this.clearMonitor();
30700         this.el.setStyle("z-index", "");
30701         if(this.collapseBtn){
30702             this.collapseBtn.show();
30703         }
30704         this.closeBtn.setStyle('display', this.closeBtnState);
30705         if(this.stickBtn){
30706             this.stickBtn.hide();
30707         }
30708         this.fireEvent("slidehide", this);
30709     },
30710
30711     slideIn : function(cb){
30712         if(!this.isSlid || this.el.hasActiveFx()){
30713             Roo.callback(cb);
30714             return;
30715         }
30716         this.isSlid = false;
30717         this.beforeSlide();
30718         this.el.slideOut(this.getSlideAnchor(), {
30719             callback: function(){
30720                 this.el.setLeftTop(-10000, -10000);
30721                 this.afterSlide();
30722                 this.afterSlideIn();
30723                 Roo.callback(cb);
30724             },
30725             scope: this,
30726             block: true
30727         });
30728     },
30729     
30730     slideInIf : function(e){
30731         if(!e.within(this.el)){
30732             this.slideIn();
30733         }
30734     },
30735
30736     animateCollapse : function(){
30737         this.beforeSlide();
30738         this.el.setStyle("z-index", 20000);
30739         var anchor = this.getSlideAnchor();
30740         this.el.slideOut(anchor, {
30741             callback : function(){
30742                 this.el.setStyle("z-index", "");
30743                 this.collapsedEl.slideIn(anchor, {duration:.3});
30744                 this.afterSlide();
30745                 this.el.setLocation(-10000,-10000);
30746                 this.el.hide();
30747                 this.fireEvent("collapsed", this);
30748             },
30749             scope: this,
30750             block: true
30751         });
30752     },
30753
30754     animateExpand : function(){
30755         this.beforeSlide();
30756         this.el.alignTo(this.collapsedEl, this.getCollapseAnchor(), this.getExpandAdj());
30757         this.el.setStyle("z-index", 20000);
30758         this.collapsedEl.hide({
30759             duration:.1
30760         });
30761         this.el.slideIn(this.getSlideAnchor(), {
30762             callback : function(){
30763                 this.el.setStyle("z-index", "");
30764                 this.afterSlide();
30765                 if(this.split){
30766                     this.split.el.show();
30767                 }
30768                 this.fireEvent("invalidated", this);
30769                 this.fireEvent("expanded", this);
30770             },
30771             scope: this,
30772             block: true
30773         });
30774     },
30775
30776     anchors : {
30777         "west" : "left",
30778         "east" : "right",
30779         "north" : "top",
30780         "south" : "bottom"
30781     },
30782
30783     sanchors : {
30784         "west" : "l",
30785         "east" : "r",
30786         "north" : "t",
30787         "south" : "b"
30788     },
30789
30790     canchors : {
30791         "west" : "tl-tr",
30792         "east" : "tr-tl",
30793         "north" : "tl-bl",
30794         "south" : "bl-tl"
30795     },
30796
30797     getAnchor : function(){
30798         return this.anchors[this.position];
30799     },
30800
30801     getCollapseAnchor : function(){
30802         return this.canchors[this.position];
30803     },
30804
30805     getSlideAnchor : function(){
30806         return this.sanchors[this.position];
30807     },
30808
30809     getAlignAdj : function(){
30810         var cm = this.cmargins;
30811         switch(this.position){
30812             case "west":
30813                 return [0, 0];
30814             break;
30815             case "east":
30816                 return [0, 0];
30817             break;
30818             case "north":
30819                 return [0, 0];
30820             break;
30821             case "south":
30822                 return [0, 0];
30823             break;
30824         }
30825     },
30826
30827     getExpandAdj : function(){
30828         var c = this.collapsedEl, cm = this.cmargins;
30829         switch(this.position){
30830             case "west":
30831                 return [-(cm.right+c.getWidth()+cm.left), 0];
30832             break;
30833             case "east":
30834                 return [cm.right+c.getWidth()+cm.left, 0];
30835             break;
30836             case "north":
30837                 return [0, -(cm.top+cm.bottom+c.getHeight())];
30838             break;
30839             case "south":
30840                 return [0, cm.top+cm.bottom+c.getHeight()];
30841             break;
30842         }
30843     }
30844 });/*
30845  * Based on:
30846  * Ext JS Library 1.1.1
30847  * Copyright(c) 2006-2007, Ext JS, LLC.
30848  *
30849  * Originally Released Under LGPL - original licence link has changed is not relivant.
30850  *
30851  * Fork - LGPL
30852  * <script type="text/javascript">
30853  */
30854 /*
30855  * These classes are private internal classes
30856  */
30857 Roo.CenterLayoutRegion = function(mgr, config){
30858     Roo.LayoutRegion.call(this, mgr, config, "center");
30859     this.visible = true;
30860     this.minWidth = config.minWidth || 20;
30861     this.minHeight = config.minHeight || 20;
30862 };
30863
30864 Roo.extend(Roo.CenterLayoutRegion, Roo.LayoutRegion, {
30865     hide : function(){
30866         // center panel can't be hidden
30867     },
30868     
30869     show : function(){
30870         // center panel can't be hidden
30871     },
30872     
30873     getMinWidth: function(){
30874         return this.minWidth;
30875     },
30876     
30877     getMinHeight: function(){
30878         return this.minHeight;
30879     }
30880 });
30881
30882
30883 Roo.NorthLayoutRegion = function(mgr, config){
30884     Roo.LayoutRegion.call(this, mgr, config, "north", "n-resize");
30885     if(this.split){
30886         this.split.placement = Roo.SplitBar.TOP;
30887         this.split.orientation = Roo.SplitBar.VERTICAL;
30888         this.split.el.addClass("x-layout-split-v");
30889     }
30890     var size = config.initialSize || config.height;
30891     if(typeof size != "undefined"){
30892         this.el.setHeight(size);
30893     }
30894 };
30895 Roo.extend(Roo.NorthLayoutRegion, Roo.SplitLayoutRegion, {
30896     orientation: Roo.SplitBar.VERTICAL,
30897     getBox : function(){
30898         if(this.collapsed){
30899             return this.collapsedEl.getBox();
30900         }
30901         var box = this.el.getBox();
30902         if(this.split){
30903             box.height += this.split.el.getHeight();
30904         }
30905         return box;
30906     },
30907     
30908     updateBox : function(box){
30909         if(this.split && !this.collapsed){
30910             box.height -= this.split.el.getHeight();
30911             this.split.el.setLeft(box.x);
30912             this.split.el.setTop(box.y+box.height);
30913             this.split.el.setWidth(box.width);
30914         }
30915         if(this.collapsed){
30916             this.updateBody(box.width, null);
30917         }
30918         Roo.LayoutRegion.prototype.updateBox.call(this, box);
30919     }
30920 });
30921
30922 Roo.SouthLayoutRegion = function(mgr, config){
30923     Roo.SplitLayoutRegion.call(this, mgr, config, "south", "s-resize");
30924     if(this.split){
30925         this.split.placement = Roo.SplitBar.BOTTOM;
30926         this.split.orientation = Roo.SplitBar.VERTICAL;
30927         this.split.el.addClass("x-layout-split-v");
30928     }
30929     var size = config.initialSize || config.height;
30930     if(typeof size != "undefined"){
30931         this.el.setHeight(size);
30932     }
30933 };
30934 Roo.extend(Roo.SouthLayoutRegion, Roo.SplitLayoutRegion, {
30935     orientation: Roo.SplitBar.VERTICAL,
30936     getBox : function(){
30937         if(this.collapsed){
30938             return this.collapsedEl.getBox();
30939         }
30940         var box = this.el.getBox();
30941         if(this.split){
30942             var sh = this.split.el.getHeight();
30943             box.height += sh;
30944             box.y -= sh;
30945         }
30946         return box;
30947     },
30948     
30949     updateBox : function(box){
30950         if(this.split && !this.collapsed){
30951             var sh = this.split.el.getHeight();
30952             box.height -= sh;
30953             box.y += sh;
30954             this.split.el.setLeft(box.x);
30955             this.split.el.setTop(box.y-sh);
30956             this.split.el.setWidth(box.width);
30957         }
30958         if(this.collapsed){
30959             this.updateBody(box.width, null);
30960         }
30961         Roo.LayoutRegion.prototype.updateBox.call(this, box);
30962     }
30963 });
30964
30965 Roo.EastLayoutRegion = function(mgr, config){
30966     Roo.SplitLayoutRegion.call(this, mgr, config, "east", "e-resize");
30967     if(this.split){
30968         this.split.placement = Roo.SplitBar.RIGHT;
30969         this.split.orientation = Roo.SplitBar.HORIZONTAL;
30970         this.split.el.addClass("x-layout-split-h");
30971     }
30972     var size = config.initialSize || config.width;
30973     if(typeof size != "undefined"){
30974         this.el.setWidth(size);
30975     }
30976 };
30977 Roo.extend(Roo.EastLayoutRegion, Roo.SplitLayoutRegion, {
30978     orientation: Roo.SplitBar.HORIZONTAL,
30979     getBox : function(){
30980         if(this.collapsed){
30981             return this.collapsedEl.getBox();
30982         }
30983         var box = this.el.getBox();
30984         if(this.split){
30985             var sw = this.split.el.getWidth();
30986             box.width += sw;
30987             box.x -= sw;
30988         }
30989         return box;
30990     },
30991
30992     updateBox : function(box){
30993         if(this.split && !this.collapsed){
30994             var sw = this.split.el.getWidth();
30995             box.width -= sw;
30996             this.split.el.setLeft(box.x);
30997             this.split.el.setTop(box.y);
30998             this.split.el.setHeight(box.height);
30999             box.x += sw;
31000         }
31001         if(this.collapsed){
31002             this.updateBody(null, box.height);
31003         }
31004         Roo.LayoutRegion.prototype.updateBox.call(this, box);
31005     }
31006 });
31007
31008 Roo.WestLayoutRegion = function(mgr, config){
31009     Roo.SplitLayoutRegion.call(this, mgr, config, "west", "w-resize");
31010     if(this.split){
31011         this.split.placement = Roo.SplitBar.LEFT;
31012         this.split.orientation = Roo.SplitBar.HORIZONTAL;
31013         this.split.el.addClass("x-layout-split-h");
31014     }
31015     var size = config.initialSize || config.width;
31016     if(typeof size != "undefined"){
31017         this.el.setWidth(size);
31018     }
31019 };
31020 Roo.extend(Roo.WestLayoutRegion, Roo.SplitLayoutRegion, {
31021     orientation: Roo.SplitBar.HORIZONTAL,
31022     getBox : function(){
31023         if(this.collapsed){
31024             return this.collapsedEl.getBox();
31025         }
31026         var box = this.el.getBox();
31027         if(this.split){
31028             box.width += this.split.el.getWidth();
31029         }
31030         return box;
31031     },
31032     
31033     updateBox : function(box){
31034         if(this.split && !this.collapsed){
31035             var sw = this.split.el.getWidth();
31036             box.width -= sw;
31037             this.split.el.setLeft(box.x+box.width);
31038             this.split.el.setTop(box.y);
31039             this.split.el.setHeight(box.height);
31040         }
31041         if(this.collapsed){
31042             this.updateBody(null, box.height);
31043         }
31044         Roo.LayoutRegion.prototype.updateBox.call(this, box);
31045     }
31046 });
31047 /*
31048  * Based on:
31049  * Ext JS Library 1.1.1
31050  * Copyright(c) 2006-2007, Ext JS, LLC.
31051  *
31052  * Originally Released Under LGPL - original licence link has changed is not relivant.
31053  *
31054  * Fork - LGPL
31055  * <script type="text/javascript">
31056  */
31057  
31058  
31059 /*
31060  * Private internal class for reading and applying state
31061  */
31062 Roo.LayoutStateManager = function(layout){
31063      // default empty state
31064      this.state = {
31065         north: {},
31066         south: {},
31067         east: {},
31068         west: {}       
31069     };
31070 };
31071
31072 Roo.LayoutStateManager.prototype = {
31073     init : function(layout, provider){
31074         this.provider = provider;
31075         var state = provider.get(layout.id+"-layout-state");
31076         if(state){
31077             var wasUpdating = layout.isUpdating();
31078             if(!wasUpdating){
31079                 layout.beginUpdate();
31080             }
31081             for(var key in state){
31082                 if(typeof state[key] != "function"){
31083                     var rstate = state[key];
31084                     var r = layout.getRegion(key);
31085                     if(r && rstate){
31086                         if(rstate.size){
31087                             r.resizeTo(rstate.size);
31088                         }
31089                         if(rstate.collapsed == true){
31090                             r.collapse(true);
31091                         }else{
31092                             r.expand(null, true);
31093                         }
31094                     }
31095                 }
31096             }
31097             if(!wasUpdating){
31098                 layout.endUpdate();
31099             }
31100             this.state = state; 
31101         }
31102         this.layout = layout;
31103         layout.on("regionresized", this.onRegionResized, this);
31104         layout.on("regioncollapsed", this.onRegionCollapsed, this);
31105         layout.on("regionexpanded", this.onRegionExpanded, this);
31106     },
31107     
31108     storeState : function(){
31109         this.provider.set(this.layout.id+"-layout-state", this.state);
31110     },
31111     
31112     onRegionResized : function(region, newSize){
31113         this.state[region.getPosition()].size = newSize;
31114         this.storeState();
31115     },
31116     
31117     onRegionCollapsed : function(region){
31118         this.state[region.getPosition()].collapsed = true;
31119         this.storeState();
31120     },
31121     
31122     onRegionExpanded : function(region){
31123         this.state[region.getPosition()].collapsed = false;
31124         this.storeState();
31125     }
31126 };/*
31127  * Based on:
31128  * Ext JS Library 1.1.1
31129  * Copyright(c) 2006-2007, Ext JS, LLC.
31130  *
31131  * Originally Released Under LGPL - original licence link has changed is not relivant.
31132  *
31133  * Fork - LGPL
31134  * <script type="text/javascript">
31135  */
31136 /**
31137  * @class Roo.ContentPanel
31138  * @extends Roo.util.Observable
31139  * A basic ContentPanel element.
31140  * @cfg {Boolean}   fitToFrame    True for this panel to adjust its size to fit when the region resizes  (defaults to false)
31141  * @cfg {Boolean}   fitContainer   When using {@link #fitToFrame} and {@link #resizeEl}, you can also fit the parent container  (defaults to false)
31142  * @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
31143  * @cfg {Boolean}   closable      True if the panel can be closed/removed
31144  * @cfg {Boolean}   background    True if the panel should not be activated when it is added (defaults to false)
31145  * @cfg {String/HTMLElement/Element} resizeEl An element to resize if {@link #fitToFrame} is true (instead of this panel's element)
31146  * @cfg {Toolbar}   toolbar       A toolbar for this panel
31147  * @cfg {Boolean} autoScroll    True to scroll overflow in this panel (use with {@link #fitToFrame})
31148  * @cfg {String} title          The title for this panel
31149  * @cfg {Array} adjustments     Values to <b>add</b> to the width/height when doing a {@link #fitToFrame} (default is [0, 0])
31150  * @cfg {String} url            Calls {@link #setUrl} with this value
31151  * @cfg {String} region         (center|north|south|east|west) which region to put this panel on (when used with xtype constructors)
31152  * @cfg {String/Object} params  When used with {@link #url}, calls {@link #setUrl} with this value
31153  * @cfg {Boolean} loadOnce      When used with {@link #url}, calls {@link #setUrl} with this value
31154  * @cfg {String}    content        Raw content to fill content panel with (uses setContent on construction.)
31155
31156  * @constructor
31157  * Create a new ContentPanel.
31158  * @param {String/HTMLElement/Roo.Element} el The container element for this panel
31159  * @param {String/Object} config A string to set only the title or a config object
31160  * @param {String} content (optional) Set the HTML content for this panel
31161  * @param {String} region (optional) Used by xtype constructors to add to regions. (values center,east,west,south,north)
31162  */
31163 Roo.ContentPanel = function(el, config, content){
31164     
31165      
31166     /*
31167     if(el.autoCreate || el.xtype){ // xtype is available if this is called from factory
31168         config = el;
31169         el = Roo.id();
31170     }
31171     if (config && config.parentLayout) { 
31172         el = config.parentLayout.el.createChild(); 
31173     }
31174     */
31175     if(el.autoCreate){ // xtype is available if this is called from factory
31176         config = el;
31177         el = Roo.id();
31178     }
31179     this.el = Roo.get(el);
31180     if(!this.el && config && config.autoCreate){
31181         if(typeof config.autoCreate == "object"){
31182             if(!config.autoCreate.id){
31183                 config.autoCreate.id = config.id||el;
31184             }
31185             this.el = Roo.DomHelper.append(document.body,
31186                         config.autoCreate, true);
31187         }else{
31188             this.el = Roo.DomHelper.append(document.body,
31189                         {tag: "div", cls: "x-layout-inactive-content", id: config.id||el}, true);
31190         }
31191     }
31192     this.closable = false;
31193     this.loaded = false;
31194     this.active = false;
31195     if(typeof config == "string"){
31196         this.title = config;
31197     }else{
31198         Roo.apply(this, config);
31199     }
31200     
31201     if (this.toolbar && !this.toolbar.el && this.toolbar.xtype) {
31202         this.wrapEl = this.el.wrap();
31203         this.toolbar.container = this.el.insertSibling(false, 'before');
31204         this.toolbar = new Roo.Toolbar(this.toolbar);
31205     }
31206     
31207     // xtype created footer. - not sure if will work as we normally have to render first..
31208     if (this.footer && !this.footer.el && this.footer.xtype) {
31209         if (!this.wrapEl) {
31210             this.wrapEl = this.el.wrap();
31211         }
31212     
31213         this.footer.container = this.wrapEl.createChild();
31214          
31215         this.footer = Roo.factory(this.footer, Roo);
31216         
31217     }
31218     
31219     if(this.resizeEl){
31220         this.resizeEl = Roo.get(this.resizeEl, true);
31221     }else{
31222         this.resizeEl = this.el;
31223     }
31224     // handle view.xtype
31225     
31226  
31227     
31228     
31229     this.addEvents({
31230         /**
31231          * @event activate
31232          * Fires when this panel is activated. 
31233          * @param {Roo.ContentPanel} this
31234          */
31235         "activate" : true,
31236         /**
31237          * @event deactivate
31238          * Fires when this panel is activated. 
31239          * @param {Roo.ContentPanel} this
31240          */
31241         "deactivate" : true,
31242
31243         /**
31244          * @event resize
31245          * Fires when this panel is resized if fitToFrame is true.
31246          * @param {Roo.ContentPanel} this
31247          * @param {Number} width The width after any component adjustments
31248          * @param {Number} height The height after any component adjustments
31249          */
31250         "resize" : true,
31251         
31252          /**
31253          * @event render
31254          * Fires when this tab is created
31255          * @param {Roo.ContentPanel} this
31256          */
31257         "render" : true
31258          
31259         
31260     });
31261     
31262
31263     
31264     
31265     if(this.autoScroll){
31266         this.resizeEl.setStyle("overflow", "auto");
31267     } else {
31268         // fix randome scrolling
31269         this.el.on('scroll', function() {
31270             Roo.log('fix random scolling');
31271             this.scrollTo('top',0); 
31272         });
31273     }
31274     content = content || this.content;
31275     if(content){
31276         this.setContent(content);
31277     }
31278     if(config && config.url){
31279         this.setUrl(this.url, this.params, this.loadOnce);
31280     }
31281     
31282     
31283     
31284     Roo.ContentPanel.superclass.constructor.call(this);
31285     
31286     if (this.view && typeof(this.view.xtype) != 'undefined') {
31287         this.view.el = this.el.appendChild(document.createElement("div"));
31288         this.view = Roo.factory(this.view); 
31289         this.view.render  &&  this.view.render(false, '');  
31290     }
31291     
31292     
31293     this.fireEvent('render', this);
31294 };
31295
31296 Roo.extend(Roo.ContentPanel, Roo.util.Observable, {
31297     tabTip:'',
31298     setRegion : function(region){
31299         this.region = region;
31300         if(region){
31301            this.el.replaceClass("x-layout-inactive-content", "x-layout-active-content");
31302         }else{
31303            this.el.replaceClass("x-layout-active-content", "x-layout-inactive-content");
31304         } 
31305     },
31306     
31307     /**
31308      * Returns the toolbar for this Panel if one was configured. 
31309      * @return {Roo.Toolbar} 
31310      */
31311     getToolbar : function(){
31312         return this.toolbar;
31313     },
31314     
31315     setActiveState : function(active){
31316         this.active = active;
31317         if(!active){
31318             this.fireEvent("deactivate", this);
31319         }else{
31320             this.fireEvent("activate", this);
31321         }
31322     },
31323     /**
31324      * Updates this panel's element
31325      * @param {String} content The new content
31326      * @param {Boolean} loadScripts (optional) true to look for and process scripts
31327     */
31328     setContent : function(content, loadScripts){
31329         this.el.update(content, loadScripts);
31330     },
31331
31332     ignoreResize : function(w, h){
31333         if(this.lastSize && this.lastSize.width == w && this.lastSize.height == h){
31334             return true;
31335         }else{
31336             this.lastSize = {width: w, height: h};
31337             return false;
31338         }
31339     },
31340     /**
31341      * Get the {@link Roo.UpdateManager} for this panel. Enables you to perform Ajax updates.
31342      * @return {Roo.UpdateManager} The UpdateManager
31343      */
31344     getUpdateManager : function(){
31345         return this.el.getUpdateManager();
31346     },
31347      /**
31348      * Loads this content panel immediately with content from XHR. Note: to delay loading until the panel is activated, use {@link #setUrl}.
31349      * @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:
31350 <pre><code>
31351 panel.load({
31352     url: "your-url.php",
31353     params: {param1: "foo", param2: "bar"}, // or a URL encoded string
31354     callback: yourFunction,
31355     scope: yourObject, //(optional scope)
31356     discardUrl: false,
31357     nocache: false,
31358     text: "Loading...",
31359     timeout: 30,
31360     scripts: false
31361 });
31362 </code></pre>
31363      * The only required property is <i>url</i>. The optional properties <i>nocache</i>, <i>text</i> and <i>scripts</i>
31364      * 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.
31365      * @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}
31366      * @param {Function} callback (optional) Callback when transaction is complete -- called with signature (oElement, bSuccess, oResponse)
31367      * @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.
31368      * @return {Roo.ContentPanel} this
31369      */
31370     load : function(){
31371         var um = this.el.getUpdateManager();
31372         um.update.apply(um, arguments);
31373         return this;
31374     },
31375
31376
31377     /**
31378      * 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.
31379      * @param {String/Function} url The URL to load the content from or a function to call to get the URL
31380      * @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)
31381      * @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)
31382      * @return {Roo.UpdateManager} The UpdateManager
31383      */
31384     setUrl : function(url, params, loadOnce){
31385         if(this.refreshDelegate){
31386             this.removeListener("activate", this.refreshDelegate);
31387         }
31388         this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
31389         this.on("activate", this.refreshDelegate);
31390         return this.el.getUpdateManager();
31391     },
31392     
31393     _handleRefresh : function(url, params, loadOnce){
31394         if(!loadOnce || !this.loaded){
31395             var updater = this.el.getUpdateManager();
31396             updater.update(url, params, this._setLoaded.createDelegate(this));
31397         }
31398     },
31399     
31400     _setLoaded : function(){
31401         this.loaded = true;
31402     }, 
31403     
31404     /**
31405      * Returns this panel's id
31406      * @return {String} 
31407      */
31408     getId : function(){
31409         return this.el.id;
31410     },
31411     
31412     /** 
31413      * Returns this panel's element - used by regiosn to add.
31414      * @return {Roo.Element} 
31415      */
31416     getEl : function(){
31417         return this.wrapEl || this.el;
31418     },
31419     
31420     adjustForComponents : function(width, height)
31421     {
31422         //Roo.log('adjustForComponents ');
31423         if(this.resizeEl != this.el){
31424             width -= this.el.getFrameWidth('lr');
31425             height -= this.el.getFrameWidth('tb');
31426         }
31427         if(this.toolbar){
31428             var te = this.toolbar.getEl();
31429             height -= te.getHeight();
31430             te.setWidth(width);
31431         }
31432         if(this.footer){
31433             var te = this.footer.getEl();
31434             //Roo.log("footer:" + te.getHeight());
31435             
31436             height -= te.getHeight();
31437             te.setWidth(width);
31438         }
31439         
31440         
31441         if(this.adjustments){
31442             width += this.adjustments[0];
31443             height += this.adjustments[1];
31444         }
31445         return {"width": width, "height": height};
31446     },
31447     
31448     setSize : function(width, height){
31449         if(this.fitToFrame && !this.ignoreResize(width, height)){
31450             if(this.fitContainer && this.resizeEl != this.el){
31451                 this.el.setSize(width, height);
31452             }
31453             var size = this.adjustForComponents(width, height);
31454             this.resizeEl.setSize(this.autoWidth ? "auto" : size.width, this.autoHeight ? "auto" : size.height);
31455             this.fireEvent('resize', this, size.width, size.height);
31456         }
31457     },
31458     
31459     /**
31460      * Returns this panel's title
31461      * @return {String} 
31462      */
31463     getTitle : function(){
31464         return this.title;
31465     },
31466     
31467     /**
31468      * Set this panel's title
31469      * @param {String} title
31470      */
31471     setTitle : function(title){
31472         this.title = title;
31473         if(this.region){
31474             this.region.updatePanelTitle(this, title);
31475         }
31476     },
31477     
31478     /**
31479      * Returns true is this panel was configured to be closable
31480      * @return {Boolean} 
31481      */
31482     isClosable : function(){
31483         return this.closable;
31484     },
31485     
31486     beforeSlide : function(){
31487         this.el.clip();
31488         this.resizeEl.clip();
31489     },
31490     
31491     afterSlide : function(){
31492         this.el.unclip();
31493         this.resizeEl.unclip();
31494     },
31495     
31496     /**
31497      *   Force a content refresh from the URL specified in the {@link #setUrl} method.
31498      *   Will fail silently if the {@link #setUrl} method has not been called.
31499      *   This does not activate the panel, just updates its content.
31500      */
31501     refresh : function(){
31502         if(this.refreshDelegate){
31503            this.loaded = false;
31504            this.refreshDelegate();
31505         }
31506     },
31507     
31508     /**
31509      * Destroys this panel
31510      */
31511     destroy : function(){
31512         this.el.removeAllListeners();
31513         var tempEl = document.createElement("span");
31514         tempEl.appendChild(this.el.dom);
31515         tempEl.innerHTML = "";
31516         this.el.remove();
31517         this.el = null;
31518     },
31519     
31520     /**
31521      * form - if the content panel contains a form - this is a reference to it.
31522      * @type {Roo.form.Form}
31523      */
31524     form : false,
31525     /**
31526      * view - if the content panel contains a view (Roo.DatePicker / Roo.View / Roo.JsonView)
31527      *    This contains a reference to it.
31528      * @type {Roo.View}
31529      */
31530     view : false,
31531     
31532       /**
31533      * Adds a xtype elements to the panel - currently only supports Forms, View, JsonView.
31534      * <pre><code>
31535
31536 layout.addxtype({
31537        xtype : 'Form',
31538        items: [ .... ]
31539    }
31540 );
31541
31542 </code></pre>
31543      * @param {Object} cfg Xtype definition of item to add.
31544      */
31545     
31546     addxtype : function(cfg) {
31547         // add form..
31548         if (cfg.xtype.match(/^Form$/)) {
31549             
31550             var el;
31551             //if (this.footer) {
31552             //    el = this.footer.container.insertSibling(false, 'before');
31553             //} else {
31554                 el = this.el.createChild();
31555             //}
31556
31557             this.form = new  Roo.form.Form(cfg);
31558             
31559             
31560             if ( this.form.allItems.length) {
31561                 this.form.render(el.dom);
31562             }
31563             return this.form;
31564         }
31565         // should only have one of theses..
31566         if ([ 'View', 'JsonView', 'DatePicker'].indexOf(cfg.xtype) > -1) {
31567             // views.. should not be just added - used named prop 'view''
31568             
31569             cfg.el = this.el.appendChild(document.createElement("div"));
31570             // factory?
31571             
31572             var ret = new Roo.factory(cfg);
31573              
31574              ret.render && ret.render(false, ''); // render blank..
31575             this.view = ret;
31576             return ret;
31577         }
31578         return false;
31579     }
31580 });
31581
31582 /**
31583  * @class Roo.GridPanel
31584  * @extends Roo.ContentPanel
31585  * @constructor
31586  * Create a new GridPanel.
31587  * @param {Roo.grid.Grid} grid The grid for this panel
31588  * @param {String/Object} config A string to set only the panel's title, or a config object
31589  */
31590 Roo.GridPanel = function(grid, config){
31591     
31592   
31593     this.wrapper = Roo.DomHelper.append(document.body, // wrapper for IE7 strict & safari scroll issue
31594         {tag: "div", cls: "x-layout-grid-wrapper x-layout-inactive-content"}, true);
31595         
31596     this.wrapper.dom.appendChild(grid.getGridEl().dom);
31597     
31598     Roo.GridPanel.superclass.constructor.call(this, this.wrapper, config);
31599     
31600     if(this.toolbar){
31601         this.toolbar.el.insertBefore(this.wrapper.dom.firstChild);
31602     }
31603     // xtype created footer. - not sure if will work as we normally have to render first..
31604     if (this.footer && !this.footer.el && this.footer.xtype) {
31605         
31606         this.footer.container = this.grid.getView().getFooterPanel(true);
31607         this.footer.dataSource = this.grid.dataSource;
31608         this.footer = Roo.factory(this.footer, Roo);
31609         
31610     }
31611     
31612     grid.monitorWindowResize = false; // turn off autosizing
31613     grid.autoHeight = false;
31614     grid.autoWidth = false;
31615     this.grid = grid;
31616     this.grid.getGridEl().replaceClass("x-layout-inactive-content", "x-layout-component-panel");
31617 };
31618
31619 Roo.extend(Roo.GridPanel, Roo.ContentPanel, {
31620     getId : function(){
31621         return this.grid.id;
31622     },
31623     
31624     /**
31625      * Returns the grid for this panel
31626      * @return {Roo.grid.Grid} 
31627      */
31628     getGrid : function(){
31629         return this.grid;    
31630     },
31631     
31632     setSize : function(width, height){
31633         if(!this.ignoreResize(width, height)){
31634             var grid = this.grid;
31635             var size = this.adjustForComponents(width, height);
31636             grid.getGridEl().setSize(size.width, size.height);
31637             grid.autoSize();
31638         }
31639     },
31640     
31641     beforeSlide : function(){
31642         this.grid.getView().scroller.clip();
31643     },
31644     
31645     afterSlide : function(){
31646         this.grid.getView().scroller.unclip();
31647     },
31648     
31649     destroy : function(){
31650         this.grid.destroy();
31651         delete this.grid;
31652         Roo.GridPanel.superclass.destroy.call(this); 
31653     }
31654 });
31655
31656
31657 /**
31658  * @class Roo.NestedLayoutPanel
31659  * @extends Roo.ContentPanel
31660  * @constructor
31661  * Create a new NestedLayoutPanel.
31662  * 
31663  * 
31664  * @param {Roo.BorderLayout} layout The layout for this panel
31665  * @param {String/Object} config A string to set only the title or a config object
31666  */
31667 Roo.NestedLayoutPanel = function(layout, config)
31668 {
31669     // construct with only one argument..
31670     /* FIXME - implement nicer consturctors
31671     if (layout.layout) {
31672         config = layout;
31673         layout = config.layout;
31674         delete config.layout;
31675     }
31676     if (layout.xtype && !layout.getEl) {
31677         // then layout needs constructing..
31678         layout = Roo.factory(layout, Roo);
31679     }
31680     */
31681     
31682     
31683     Roo.NestedLayoutPanel.superclass.constructor.call(this, layout.getEl(), config);
31684     
31685     layout.monitorWindowResize = false; // turn off autosizing
31686     this.layout = layout;
31687     this.layout.getEl().addClass("x-layout-nested-layout");
31688     
31689     
31690     
31691     
31692 };
31693
31694 Roo.extend(Roo.NestedLayoutPanel, Roo.ContentPanel, {
31695
31696     setSize : function(width, height){
31697         if(!this.ignoreResize(width, height)){
31698             var size = this.adjustForComponents(width, height);
31699             var el = this.layout.getEl();
31700             el.setSize(size.width, size.height);
31701             var touch = el.dom.offsetWidth;
31702             this.layout.layout();
31703             // ie requires a double layout on the first pass
31704             if(Roo.isIE && !this.initialized){
31705                 this.initialized = true;
31706                 this.layout.layout();
31707             }
31708         }
31709     },
31710     
31711     // activate all subpanels if not currently active..
31712     
31713     setActiveState : function(active){
31714         this.active = active;
31715         if(!active){
31716             this.fireEvent("deactivate", this);
31717             return;
31718         }
31719         
31720         this.fireEvent("activate", this);
31721         // not sure if this should happen before or after..
31722         if (!this.layout) {
31723             return; // should not happen..
31724         }
31725         var reg = false;
31726         for (var r in this.layout.regions) {
31727             reg = this.layout.getRegion(r);
31728             if (reg.getActivePanel()) {
31729                 //reg.showPanel(reg.getActivePanel()); // force it to activate.. 
31730                 reg.setActivePanel(reg.getActivePanel());
31731                 continue;
31732             }
31733             if (!reg.panels.length) {
31734                 continue;
31735             }
31736             reg.showPanel(reg.getPanel(0));
31737         }
31738         
31739         
31740         
31741         
31742     },
31743     
31744     /**
31745      * Returns the nested BorderLayout for this panel
31746      * @return {Roo.BorderLayout} 
31747      */
31748     getLayout : function(){
31749         return this.layout;
31750     },
31751     
31752      /**
31753      * Adds a xtype elements to the layout of the nested panel
31754      * <pre><code>
31755
31756 panel.addxtype({
31757        xtype : 'ContentPanel',
31758        region: 'west',
31759        items: [ .... ]
31760    }
31761 );
31762
31763 panel.addxtype({
31764         xtype : 'NestedLayoutPanel',
31765         region: 'west',
31766         layout: {
31767            center: { },
31768            west: { }   
31769         },
31770         items : [ ... list of content panels or nested layout panels.. ]
31771    }
31772 );
31773 </code></pre>
31774      * @param {Object} cfg Xtype definition of item to add.
31775      */
31776     addxtype : function(cfg) {
31777         return this.layout.addxtype(cfg);
31778     
31779     }
31780 });
31781
31782 Roo.ScrollPanel = function(el, config, content){
31783     config = config || {};
31784     config.fitToFrame = true;
31785     Roo.ScrollPanel.superclass.constructor.call(this, el, config, content);
31786     
31787     this.el.dom.style.overflow = "hidden";
31788     var wrap = this.el.wrap({cls: "x-scroller x-layout-inactive-content"});
31789     this.el.removeClass("x-layout-inactive-content");
31790     this.el.on("mousewheel", this.onWheel, this);
31791
31792     var up = wrap.createChild({cls: "x-scroller-up", html: "&#160;"}, this.el.dom);
31793     var down = wrap.createChild({cls: "x-scroller-down", html: "&#160;"});
31794     up.unselectable(); down.unselectable();
31795     up.on("click", this.scrollUp, this);
31796     down.on("click", this.scrollDown, this);
31797     up.addClassOnOver("x-scroller-btn-over");
31798     down.addClassOnOver("x-scroller-btn-over");
31799     up.addClassOnClick("x-scroller-btn-click");
31800     down.addClassOnClick("x-scroller-btn-click");
31801     this.adjustments = [0, -(up.getHeight() + down.getHeight())];
31802
31803     this.resizeEl = this.el;
31804     this.el = wrap; this.up = up; this.down = down;
31805 };
31806
31807 Roo.extend(Roo.ScrollPanel, Roo.ContentPanel, {
31808     increment : 100,
31809     wheelIncrement : 5,
31810     scrollUp : function(){
31811         this.resizeEl.scroll("up", this.increment, {callback: this.afterScroll, scope: this});
31812     },
31813
31814     scrollDown : function(){
31815         this.resizeEl.scroll("down", this.increment, {callback: this.afterScroll, scope: this});
31816     },
31817
31818     afterScroll : function(){
31819         var el = this.resizeEl;
31820         var t = el.dom.scrollTop, h = el.dom.scrollHeight, ch = el.dom.clientHeight;
31821         this.up[t == 0 ? "addClass" : "removeClass"]("x-scroller-btn-disabled");
31822         this.down[h - t <= ch ? "addClass" : "removeClass"]("x-scroller-btn-disabled");
31823     },
31824
31825     setSize : function(){
31826         Roo.ScrollPanel.superclass.setSize.apply(this, arguments);
31827         this.afterScroll();
31828     },
31829
31830     onWheel : function(e){
31831         var d = e.getWheelDelta();
31832         this.resizeEl.dom.scrollTop -= (d*this.wheelIncrement);
31833         this.afterScroll();
31834         e.stopEvent();
31835     },
31836
31837     setContent : function(content, loadScripts){
31838         this.resizeEl.update(content, loadScripts);
31839     }
31840
31841 });
31842
31843
31844
31845
31846
31847
31848
31849
31850
31851 /**
31852  * @class Roo.TreePanel
31853  * @extends Roo.ContentPanel
31854  * @constructor
31855  * Create a new TreePanel. - defaults to fit/scoll contents.
31856  * @param {String/Object} config A string to set only the panel's title, or a config object
31857  * @cfg {Roo.tree.TreePanel} tree The tree TreePanel, with config etc.
31858  */
31859 Roo.TreePanel = function(config){
31860     var el = config.el;
31861     var tree = config.tree;
31862     delete config.tree; 
31863     delete config.el; // hopefull!
31864     
31865     // wrapper for IE7 strict & safari scroll issue
31866     
31867     var treeEl = el.createChild();
31868     config.resizeEl = treeEl;
31869     
31870     
31871     
31872     Roo.TreePanel.superclass.constructor.call(this, el, config);
31873  
31874  
31875     this.tree = new Roo.tree.TreePanel(treeEl , tree);
31876     //console.log(tree);
31877     this.on('activate', function()
31878     {
31879         if (this.tree.rendered) {
31880             return;
31881         }
31882         //console.log('render tree');
31883         this.tree.render();
31884     });
31885     // this should not be needed.. - it's actually the 'el' that resizes?
31886     // actuall it breaks the containerScroll - dragging nodes auto scroll at top
31887     
31888     //this.on('resize',  function (cp, w, h) {
31889     //        this.tree.innerCt.setWidth(w);
31890     //        this.tree.innerCt.setHeight(h);
31891     //        //this.tree.innerCt.setStyle('overflow-y', 'auto');
31892     //});
31893
31894         
31895     
31896 };
31897
31898 Roo.extend(Roo.TreePanel, Roo.ContentPanel, {   
31899     fitToFrame : true,
31900     autoScroll : true
31901 });
31902
31903
31904
31905
31906
31907
31908
31909
31910
31911
31912
31913 /*
31914  * Based on:
31915  * Ext JS Library 1.1.1
31916  * Copyright(c) 2006-2007, Ext JS, LLC.
31917  *
31918  * Originally Released Under LGPL - original licence link has changed is not relivant.
31919  *
31920  * Fork - LGPL
31921  * <script type="text/javascript">
31922  */
31923  
31924
31925 /**
31926  * @class Roo.ReaderLayout
31927  * @extends Roo.BorderLayout
31928  * This is a pre-built layout that represents a classic, 5-pane application.  It consists of a header, a primary
31929  * center region containing two nested regions (a top one for a list view and one for item preview below),
31930  * and regions on either side that can be used for navigation, application commands, informational displays, etc.
31931  * The setup and configuration work exactly the same as it does for a {@link Roo.BorderLayout} - this class simply
31932  * expedites the setup of the overall layout and regions for this common application style.
31933  * Example:
31934  <pre><code>
31935 var reader = new Roo.ReaderLayout();
31936 var CP = Roo.ContentPanel;  // shortcut for adding
31937
31938 reader.beginUpdate();
31939 reader.add("north", new CP("north", "North"));
31940 reader.add("west", new CP("west", {title: "West"}));
31941 reader.add("east", new CP("east", {title: "East"}));
31942
31943 reader.regions.listView.add(new CP("listView", "List"));
31944 reader.regions.preview.add(new CP("preview", "Preview"));
31945 reader.endUpdate();
31946 </code></pre>
31947 * @constructor
31948 * Create a new ReaderLayout
31949 * @param {Object} config Configuration options
31950 * @param {String/HTMLElement/Element} container (optional) The container this layout is bound to (defaults to
31951 * document.body if omitted)
31952 */
31953 Roo.ReaderLayout = function(config, renderTo){
31954     var c = config || {size:{}};
31955     Roo.ReaderLayout.superclass.constructor.call(this, renderTo || document.body, {
31956         north: c.north !== false ? Roo.apply({
31957             split:false,
31958             initialSize: 32,
31959             titlebar: false
31960         }, c.north) : false,
31961         west: c.west !== false ? Roo.apply({
31962             split:true,
31963             initialSize: 200,
31964             minSize: 175,
31965             maxSize: 400,
31966             titlebar: true,
31967             collapsible: true,
31968             animate: true,
31969             margins:{left:5,right:0,bottom:5,top:5},
31970             cmargins:{left:5,right:5,bottom:5,top:5}
31971         }, c.west) : false,
31972         east: c.east !== false ? Roo.apply({
31973             split:true,
31974             initialSize: 200,
31975             minSize: 175,
31976             maxSize: 400,
31977             titlebar: true,
31978             collapsible: true,
31979             animate: true,
31980             margins:{left:0,right:5,bottom:5,top:5},
31981             cmargins:{left:5,right:5,bottom:5,top:5}
31982         }, c.east) : false,
31983         center: Roo.apply({
31984             tabPosition: 'top',
31985             autoScroll:false,
31986             closeOnTab: true,
31987             titlebar:false,
31988             margins:{left:c.west!==false ? 0 : 5,right:c.east!==false ? 0 : 5,bottom:5,top:2}
31989         }, c.center)
31990     });
31991
31992     this.el.addClass('x-reader');
31993
31994     this.beginUpdate();
31995
31996     var inner = new Roo.BorderLayout(Roo.get(document.body).createChild(), {
31997         south: c.preview !== false ? Roo.apply({
31998             split:true,
31999             initialSize: 200,
32000             minSize: 100,
32001             autoScroll:true,
32002             collapsible:true,
32003             titlebar: true,
32004             cmargins:{top:5,left:0, right:0, bottom:0}
32005         }, c.preview) : false,
32006         center: Roo.apply({
32007             autoScroll:false,
32008             titlebar:false,
32009             minHeight:200
32010         }, c.listView)
32011     });
32012     this.add('center', new Roo.NestedLayoutPanel(inner,
32013             Roo.apply({title: c.mainTitle || '',tabTip:''},c.innerPanelCfg)));
32014
32015     this.endUpdate();
32016
32017     this.regions.preview = inner.getRegion('south');
32018     this.regions.listView = inner.getRegion('center');
32019 };
32020
32021 Roo.extend(Roo.ReaderLayout, Roo.BorderLayout);/*
32022  * Based on:
32023  * Ext JS Library 1.1.1
32024  * Copyright(c) 2006-2007, Ext JS, LLC.
32025  *
32026  * Originally Released Under LGPL - original licence link has changed is not relivant.
32027  *
32028  * Fork - LGPL
32029  * <script type="text/javascript">
32030  */
32031  
32032 /**
32033  * @class Roo.grid.Grid
32034  * @extends Roo.util.Observable
32035  * This class represents the primary interface of a component based grid control.
32036  * <br><br>Usage:<pre><code>
32037  var grid = new Roo.grid.Grid("my-container-id", {
32038      ds: myDataStore,
32039      cm: myColModel,
32040      selModel: mySelectionModel,
32041      autoSizeColumns: true,
32042      monitorWindowResize: false,
32043      trackMouseOver: true
32044  });
32045  // set any options
32046  grid.render();
32047  * </code></pre>
32048  * <b>Common Problems:</b><br/>
32049  * - Grid does not resize properly when going smaller: Setting overflow hidden on the container
32050  * element will correct this<br/>
32051  * - If you get el.style[camel]= NaNpx or -2px or something related, be certain you have given your container element
32052  * dimensions. The grid adapts to your container's size, if your container has no size defined then the results
32053  * are unpredictable.<br/>
32054  * - Do not render the grid into an element with display:none. Try using visibility:hidden. Otherwise there is no way for the
32055  * grid to calculate dimensions/offsets.<br/>
32056   * @constructor
32057  * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered -
32058  * The container MUST have some type of size defined for the grid to fill. The container will be
32059  * automatically set to position relative if it isn't already.
32060  * @param {Object} config A config object that sets properties on this grid.
32061  */
32062 Roo.grid.Grid = function(container, config){
32063         // initialize the container
32064         this.container = Roo.get(container);
32065         this.container.update("");
32066         this.container.setStyle("overflow", "hidden");
32067     this.container.addClass('x-grid-container');
32068
32069     this.id = this.container.id;
32070
32071     Roo.apply(this, config);
32072     // check and correct shorthanded configs
32073     if(this.ds){
32074         this.dataSource = this.ds;
32075         delete this.ds;
32076     }
32077     if(this.cm){
32078         this.colModel = this.cm;
32079         delete this.cm;
32080     }
32081     if(this.sm){
32082         this.selModel = this.sm;
32083         delete this.sm;
32084     }
32085
32086     if (this.selModel) {
32087         this.selModel = Roo.factory(this.selModel, Roo.grid);
32088         this.sm = this.selModel;
32089         this.sm.xmodule = this.xmodule || false;
32090     }
32091     if (typeof(this.colModel.config) == 'undefined') {
32092         this.colModel = new Roo.grid.ColumnModel(this.colModel);
32093         this.cm = this.colModel;
32094         this.cm.xmodule = this.xmodule || false;
32095     }
32096     if (this.dataSource) {
32097         this.dataSource= Roo.factory(this.dataSource, Roo.data);
32098         this.ds = this.dataSource;
32099         this.ds.xmodule = this.xmodule || false;
32100          
32101     }
32102     
32103     
32104     
32105     if(this.width){
32106         this.container.setWidth(this.width);
32107     }
32108
32109     if(this.height){
32110         this.container.setHeight(this.height);
32111     }
32112     /** @private */
32113         this.addEvents({
32114         // raw events
32115         /**
32116          * @event click
32117          * The raw click event for the entire grid.
32118          * @param {Roo.EventObject} e
32119          */
32120         "click" : true,
32121         /**
32122          * @event dblclick
32123          * The raw dblclick event for the entire grid.
32124          * @param {Roo.EventObject} e
32125          */
32126         "dblclick" : true,
32127         /**
32128          * @event contextmenu
32129          * The raw contextmenu event for the entire grid.
32130          * @param {Roo.EventObject} e
32131          */
32132         "contextmenu" : true,
32133         /**
32134          * @event mousedown
32135          * The raw mousedown event for the entire grid.
32136          * @param {Roo.EventObject} e
32137          */
32138         "mousedown" : true,
32139         /**
32140          * @event mouseup
32141          * The raw mouseup event for the entire grid.
32142          * @param {Roo.EventObject} e
32143          */
32144         "mouseup" : true,
32145         /**
32146          * @event mouseover
32147          * The raw mouseover event for the entire grid.
32148          * @param {Roo.EventObject} e
32149          */
32150         "mouseover" : true,
32151         /**
32152          * @event mouseout
32153          * The raw mouseout event for the entire grid.
32154          * @param {Roo.EventObject} e
32155          */
32156         "mouseout" : true,
32157         /**
32158          * @event keypress
32159          * The raw keypress event for the entire grid.
32160          * @param {Roo.EventObject} e
32161          */
32162         "keypress" : true,
32163         /**
32164          * @event keydown
32165          * The raw keydown event for the entire grid.
32166          * @param {Roo.EventObject} e
32167          */
32168         "keydown" : true,
32169
32170         // custom events
32171
32172         /**
32173          * @event cellclick
32174          * Fires when a cell is clicked
32175          * @param {Grid} this
32176          * @param {Number} rowIndex
32177          * @param {Number} columnIndex
32178          * @param {Roo.EventObject} e
32179          */
32180         "cellclick" : true,
32181         /**
32182          * @event celldblclick
32183          * Fires when a cell is double clicked
32184          * @param {Grid} this
32185          * @param {Number} rowIndex
32186          * @param {Number} columnIndex
32187          * @param {Roo.EventObject} e
32188          */
32189         "celldblclick" : true,
32190         /**
32191          * @event rowclick
32192          * Fires when a row is clicked
32193          * @param {Grid} this
32194          * @param {Number} rowIndex
32195          * @param {Roo.EventObject} e
32196          */
32197         "rowclick" : true,
32198         /**
32199          * @event rowdblclick
32200          * Fires when a row is double clicked
32201          * @param {Grid} this
32202          * @param {Number} rowIndex
32203          * @param {Roo.EventObject} e
32204          */
32205         "rowdblclick" : true,
32206         /**
32207          * @event headerclick
32208          * Fires when a header is clicked
32209          * @param {Grid} this
32210          * @param {Number} columnIndex
32211          * @param {Roo.EventObject} e
32212          */
32213         "headerclick" : true,
32214         /**
32215          * @event headerdblclick
32216          * Fires when a header cell is double clicked
32217          * @param {Grid} this
32218          * @param {Number} columnIndex
32219          * @param {Roo.EventObject} e
32220          */
32221         "headerdblclick" : true,
32222         /**
32223          * @event rowcontextmenu
32224          * Fires when a row is right clicked
32225          * @param {Grid} this
32226          * @param {Number} rowIndex
32227          * @param {Roo.EventObject} e
32228          */
32229         "rowcontextmenu" : true,
32230         /**
32231          * @event cellcontextmenu
32232          * Fires when a cell is right clicked
32233          * @param {Grid} this
32234          * @param {Number} rowIndex
32235          * @param {Number} cellIndex
32236          * @param {Roo.EventObject} e
32237          */
32238          "cellcontextmenu" : true,
32239         /**
32240          * @event headercontextmenu
32241          * Fires when a header is right clicked
32242          * @param {Grid} this
32243          * @param {Number} columnIndex
32244          * @param {Roo.EventObject} e
32245          */
32246         "headercontextmenu" : true,
32247         /**
32248          * @event bodyscroll
32249          * Fires when the body element is scrolled
32250          * @param {Number} scrollLeft
32251          * @param {Number} scrollTop
32252          */
32253         "bodyscroll" : true,
32254         /**
32255          * @event columnresize
32256          * Fires when the user resizes a column
32257          * @param {Number} columnIndex
32258          * @param {Number} newSize
32259          */
32260         "columnresize" : true,
32261         /**
32262          * @event columnmove
32263          * Fires when the user moves a column
32264          * @param {Number} oldIndex
32265          * @param {Number} newIndex
32266          */
32267         "columnmove" : true,
32268         /**
32269          * @event startdrag
32270          * Fires when row(s) start being dragged
32271          * @param {Grid} this
32272          * @param {Roo.GridDD} dd The drag drop object
32273          * @param {event} e The raw browser event
32274          */
32275         "startdrag" : true,
32276         /**
32277          * @event enddrag
32278          * Fires when a drag operation is complete
32279          * @param {Grid} this
32280          * @param {Roo.GridDD} dd The drag drop object
32281          * @param {event} e The raw browser event
32282          */
32283         "enddrag" : true,
32284         /**
32285          * @event dragdrop
32286          * Fires when dragged row(s) are dropped on a valid DD target
32287          * @param {Grid} this
32288          * @param {Roo.GridDD} dd The drag drop object
32289          * @param {String} targetId The target drag drop object
32290          * @param {event} e The raw browser event
32291          */
32292         "dragdrop" : true,
32293         /**
32294          * @event dragover
32295          * Fires while row(s) are being dragged. "targetId" is the id of the Yahoo.util.DD object the selected rows are being dragged over.
32296          * @param {Grid} this
32297          * @param {Roo.GridDD} dd The drag drop object
32298          * @param {String} targetId The target drag drop object
32299          * @param {event} e The raw browser event
32300          */
32301         "dragover" : true,
32302         /**
32303          * @event dragenter
32304          *  Fires when the dragged row(s) first cross another DD target while being dragged
32305          * @param {Grid} this
32306          * @param {Roo.GridDD} dd The drag drop object
32307          * @param {String} targetId The target drag drop object
32308          * @param {event} e The raw browser event
32309          */
32310         "dragenter" : true,
32311         /**
32312          * @event dragout
32313          * Fires when the dragged row(s) leave another DD target while being dragged
32314          * @param {Grid} this
32315          * @param {Roo.GridDD} dd The drag drop object
32316          * @param {String} targetId The target drag drop object
32317          * @param {event} e The raw browser event
32318          */
32319         "dragout" : true,
32320         /**
32321          * @event rowclass
32322          * Fires when a row is rendered, so you can change add a style to it.
32323          * @param {GridView} gridview   The grid view
32324          * @param {Object} rowcfg   contains record  rowIndex and rowClass - set rowClass to add a style.
32325          */
32326         'rowclass' : true,
32327
32328         /**
32329          * @event render
32330          * Fires when the grid is rendered
32331          * @param {Grid} grid
32332          */
32333         'render' : true
32334     });
32335
32336     Roo.grid.Grid.superclass.constructor.call(this);
32337 };
32338 Roo.extend(Roo.grid.Grid, Roo.util.Observable, {
32339     
32340     /**
32341      * @cfg {String} ddGroup - drag drop group.
32342      */
32343
32344     /**
32345      * @cfg {Number} minColumnWidth The minimum width a column can be resized to. Default is 25.
32346      */
32347     minColumnWidth : 25,
32348
32349     /**
32350      * @cfg {Boolean} autoSizeColumns True to automatically resize the columns to fit their content
32351      * <b>on initial render.</b> It is more efficient to explicitly size the columns
32352      * through the ColumnModel's {@link Roo.grid.ColumnModel#width} config option.  Default is false.
32353      */
32354     autoSizeColumns : false,
32355
32356     /**
32357      * @cfg {Boolean} autoSizeHeaders True to measure headers with column data when auto sizing columns. Default is true.
32358      */
32359     autoSizeHeaders : true,
32360
32361     /**
32362      * @cfg {Boolean} monitorWindowResize True to autoSize the grid when the window resizes. Default is true.
32363      */
32364     monitorWindowResize : true,
32365
32366     /**
32367      * @cfg {Boolean} maxRowsToMeasure If autoSizeColumns is on, maxRowsToMeasure can be used to limit the number of
32368      * rows measured to get a columns size. Default is 0 (all rows).
32369      */
32370     maxRowsToMeasure : 0,
32371
32372     /**
32373      * @cfg {Boolean} trackMouseOver True to highlight rows when the mouse is over. Default is true.
32374      */
32375     trackMouseOver : true,
32376
32377     /**
32378     * @cfg {Boolean} enableDrag  True to enable drag of rows. Default is false. (double check if this is needed?)
32379     */
32380     
32381     /**
32382     * @cfg {Boolean} enableDragDrop True to enable drag and drop of rows. Default is false.
32383     */
32384     enableDragDrop : false,
32385     
32386     /**
32387     * @cfg {Boolean} enableColumnMove True to enable drag and drop reorder of columns. Default is true.
32388     */
32389     enableColumnMove : true,
32390     
32391     /**
32392     * @cfg {Boolean} enableColumnHide True to enable hiding of columns with the header context menu. Default is true.
32393     */
32394     enableColumnHide : true,
32395     
32396     /**
32397     * @cfg {Boolean} enableRowHeightSync True to manually sync row heights across locked and not locked rows. Default is false.
32398     */
32399     enableRowHeightSync : false,
32400     
32401     /**
32402     * @cfg {Boolean} stripeRows True to stripe the rows.  Default is true.
32403     */
32404     stripeRows : true,
32405     
32406     /**
32407     * @cfg {Boolean} autoHeight True to fit the height of the grid container to the height of the data. Default is false.
32408     */
32409     autoHeight : false,
32410
32411     /**
32412      * @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.
32413      */
32414     autoExpandColumn : false,
32415
32416     /**
32417     * @cfg {Number} autoExpandMin The minimum width the autoExpandColumn can have (if enabled).
32418     * Default is 50.
32419     */
32420     autoExpandMin : 50,
32421
32422     /**
32423     * @cfg {Number} autoExpandMax The maximum width the autoExpandColumn can have (if enabled). Default is 1000.
32424     */
32425     autoExpandMax : 1000,
32426
32427     /**
32428     * @cfg {Object} view The {@link Roo.grid.GridView} used by the grid. This can be set before a call to render().
32429     */
32430     view : null,
32431
32432     /**
32433     * @cfg {Object} loadMask An {@link Roo.LoadMask} config or true to mask the grid while loading. Default is false.
32434     */
32435     loadMask : false,
32436     /**
32437     * @cfg {Roo.dd.DropTarget} dropTarget An {@link Roo.dd.DropTarget} config
32438     */
32439     dropTarget: false,
32440     
32441    
32442     
32443     // private
32444     rendered : false,
32445
32446     /**
32447     * @cfg {Boolean} autoWidth True to set the grid's width to the default total width of the grid's columns instead
32448     * of a fixed width. Default is false.
32449     */
32450     /**
32451     * @cfg {Number} maxHeight Sets the maximum height of the grid - ignored if autoHeight is not on.
32452     */
32453     /**
32454      * Called once after all setup has been completed and the grid is ready to be rendered.
32455      * @return {Roo.grid.Grid} this
32456      */
32457     render : function()
32458     {
32459         var c = this.container;
32460         // try to detect autoHeight/width mode
32461         if((!c.dom.offsetHeight || c.dom.offsetHeight < 20) || c.getStyle("height") == "auto"){
32462             this.autoHeight = true;
32463         }
32464         var view = this.getView();
32465         view.init(this);
32466
32467         c.on("click", this.onClick, this);
32468         c.on("dblclick", this.onDblClick, this);
32469         c.on("contextmenu", this.onContextMenu, this);
32470         c.on("keydown", this.onKeyDown, this);
32471         if (Roo.isTouch) {
32472             c.on("touchstart", this.onTouchStart, this);
32473         }
32474
32475         this.relayEvents(c, ["mousedown","mouseup","mouseover","mouseout","keypress"]);
32476
32477         this.getSelectionModel().init(this);
32478
32479         view.render();
32480
32481         if(this.loadMask){
32482             this.loadMask = new Roo.LoadMask(this.container,
32483                     Roo.apply({store:this.dataSource}, this.loadMask));
32484         }
32485         
32486         
32487         if (this.toolbar && this.toolbar.xtype) {
32488             this.toolbar.container = this.getView().getHeaderPanel(true);
32489             this.toolbar = new Roo.Toolbar(this.toolbar);
32490         }
32491         if (this.footer && this.footer.xtype) {
32492             this.footer.dataSource = this.getDataSource();
32493             this.footer.container = this.getView().getFooterPanel(true);
32494             this.footer = Roo.factory(this.footer, Roo);
32495         }
32496         if (this.dropTarget && this.dropTarget.xtype) {
32497             delete this.dropTarget.xtype;
32498             this.dropTarget =  new Roo.dd.DropTarget(this.getView().mainBody, this.dropTarget);
32499         }
32500         
32501         
32502         this.rendered = true;
32503         this.fireEvent('render', this);
32504         return this;
32505     },
32506
32507         /**
32508          * Reconfigures the grid to use a different Store and Column Model.
32509          * The View will be bound to the new objects and refreshed.
32510          * @param {Roo.data.Store} dataSource The new {@link Roo.data.Store} object
32511          * @param {Roo.grid.ColumnModel} The new {@link Roo.grid.ColumnModel} object
32512          */
32513     reconfigure : function(dataSource, colModel){
32514         if(this.loadMask){
32515             this.loadMask.destroy();
32516             this.loadMask = new Roo.LoadMask(this.container,
32517                     Roo.apply({store:dataSource}, this.loadMask));
32518         }
32519         this.view.bind(dataSource, colModel);
32520         this.dataSource = dataSource;
32521         this.colModel = colModel;
32522         this.view.refresh(true);
32523     },
32524
32525     // private
32526     onKeyDown : function(e){
32527         this.fireEvent("keydown", e);
32528     },
32529
32530     /**
32531      * Destroy this grid.
32532      * @param {Boolean} removeEl True to remove the element
32533      */
32534     destroy : function(removeEl, keepListeners){
32535         if(this.loadMask){
32536             this.loadMask.destroy();
32537         }
32538         var c = this.container;
32539         c.removeAllListeners();
32540         this.view.destroy();
32541         this.colModel.purgeListeners();
32542         if(!keepListeners){
32543             this.purgeListeners();
32544         }
32545         c.update("");
32546         if(removeEl === true){
32547             c.remove();
32548         }
32549     },
32550
32551     // private
32552     processEvent : function(name, e){
32553         // does this fire select???
32554         //Roo.log('grid:processEvent '  + name);
32555         
32556         if (name != 'touchstart' ) {
32557             this.fireEvent(name, e);    
32558         }
32559         
32560         var t = e.getTarget();
32561         var v = this.view;
32562         var header = v.findHeaderIndex(t);
32563         if(header !== false){
32564             var ename = name == 'touchstart' ? 'click' : name;
32565              
32566             this.fireEvent("header" + ename, this, header, e);
32567         }else{
32568             var row = v.findRowIndex(t);
32569             var cell = v.findCellIndex(t);
32570             if (name == 'touchstart') {
32571                 // first touch is always a click.
32572                 // hopefull this happens after selection is updated.?
32573                 name = false;
32574                 
32575                 if (typeof(this.selModel.getSelectedCell) != 'undefined') {
32576                     var cs = this.selModel.getSelectedCell();
32577                     if (row == cs[0] && cell == cs[1]){
32578                         name = 'dblclick';
32579                     }
32580                 }
32581                 if (typeof(this.selModel.getSelections) != 'undefined') {
32582                     var cs = this.selModel.getSelections();
32583                     var ds = this.dataSource;
32584                     if (cs.length == 1 && ds.getAt(row) == cs[0]){
32585                         name = 'dblclick';
32586                     }
32587                 }
32588                 if (!name) {
32589                     return;
32590                 }
32591             }
32592             
32593             
32594             if(row !== false){
32595                 this.fireEvent("row" + name, this, row, e);
32596                 if(cell !== false){
32597                     this.fireEvent("cell" + name, this, row, cell, e);
32598                 }
32599             }
32600         }
32601     },
32602
32603     // private
32604     onClick : function(e){
32605         this.processEvent("click", e);
32606     },
32607    // private
32608     onTouchStart : function(e){
32609         this.processEvent("touchstart", e);
32610     },
32611
32612     // private
32613     onContextMenu : function(e, t){
32614         this.processEvent("contextmenu", e);
32615     },
32616
32617     // private
32618     onDblClick : function(e){
32619         this.processEvent("dblclick", e);
32620     },
32621
32622     // private
32623     walkCells : function(row, col, step, fn, scope){
32624         var cm = this.colModel, clen = cm.getColumnCount();
32625         var ds = this.dataSource, rlen = ds.getCount(), first = true;
32626         if(step < 0){
32627             if(col < 0){
32628                 row--;
32629                 first = false;
32630             }
32631             while(row >= 0){
32632                 if(!first){
32633                     col = clen-1;
32634                 }
32635                 first = false;
32636                 while(col >= 0){
32637                     if(fn.call(scope || this, row, col, cm) === true){
32638                         return [row, col];
32639                     }
32640                     col--;
32641                 }
32642                 row--;
32643             }
32644         } else {
32645             if(col >= clen){
32646                 row++;
32647                 first = false;
32648             }
32649             while(row < rlen){
32650                 if(!first){
32651                     col = 0;
32652                 }
32653                 first = false;
32654                 while(col < clen){
32655                     if(fn.call(scope || this, row, col, cm) === true){
32656                         return [row, col];
32657                     }
32658                     col++;
32659                 }
32660                 row++;
32661             }
32662         }
32663         return null;
32664     },
32665
32666     // private
32667     getSelections : function(){
32668         return this.selModel.getSelections();
32669     },
32670
32671     /**
32672      * Causes the grid to manually recalculate its dimensions. Generally this is done automatically,
32673      * but if manual update is required this method will initiate it.
32674      */
32675     autoSize : function(){
32676         if(this.rendered){
32677             this.view.layout();
32678             if(this.view.adjustForScroll){
32679                 this.view.adjustForScroll();
32680             }
32681         }
32682     },
32683
32684     /**
32685      * Returns the grid's underlying element.
32686      * @return {Element} The element
32687      */
32688     getGridEl : function(){
32689         return this.container;
32690     },
32691
32692     // private for compatibility, overridden by editor grid
32693     stopEditing : function(){},
32694
32695     /**
32696      * Returns the grid's SelectionModel.
32697      * @return {SelectionModel}
32698      */
32699     getSelectionModel : function(){
32700         if(!this.selModel){
32701             this.selModel = new Roo.grid.RowSelectionModel();
32702         }
32703         return this.selModel;
32704     },
32705
32706     /**
32707      * Returns the grid's DataSource.
32708      * @return {DataSource}
32709      */
32710     getDataSource : function(){
32711         return this.dataSource;
32712     },
32713
32714     /**
32715      * Returns the grid's ColumnModel.
32716      * @return {ColumnModel}
32717      */
32718     getColumnModel : function(){
32719         return this.colModel;
32720     },
32721
32722     /**
32723      * Returns the grid's GridView object.
32724      * @return {GridView}
32725      */
32726     getView : function(){
32727         if(!this.view){
32728             this.view = new Roo.grid.GridView(this.viewConfig);
32729         }
32730         return this.view;
32731     },
32732     /**
32733      * Called to get grid's drag proxy text, by default returns this.ddText.
32734      * @return {String}
32735      */
32736     getDragDropText : function(){
32737         var count = this.selModel.getCount();
32738         return String.format(this.ddText, count, count == 1 ? '' : 's');
32739     }
32740 });
32741 /**
32742  * Configures the text is the drag proxy (defaults to "%0 selected row(s)").
32743  * %0 is replaced with the number of selected rows.
32744  * @type String
32745  */
32746 Roo.grid.Grid.prototype.ddText = "{0} selected row{1}";/*
32747  * Based on:
32748  * Ext JS Library 1.1.1
32749  * Copyright(c) 2006-2007, Ext JS, LLC.
32750  *
32751  * Originally Released Under LGPL - original licence link has changed is not relivant.
32752  *
32753  * Fork - LGPL
32754  * <script type="text/javascript">
32755  */
32756  
32757 Roo.grid.AbstractGridView = function(){
32758         this.grid = null;
32759         
32760         this.events = {
32761             "beforerowremoved" : true,
32762             "beforerowsinserted" : true,
32763             "beforerefresh" : true,
32764             "rowremoved" : true,
32765             "rowsinserted" : true,
32766             "rowupdated" : true,
32767             "refresh" : true
32768         };
32769     Roo.grid.AbstractGridView.superclass.constructor.call(this);
32770 };
32771
32772 Roo.extend(Roo.grid.AbstractGridView, Roo.util.Observable, {
32773     rowClass : "x-grid-row",
32774     cellClass : "x-grid-cell",
32775     tdClass : "x-grid-td",
32776     hdClass : "x-grid-hd",
32777     splitClass : "x-grid-hd-split",
32778     
32779     init: function(grid){
32780         this.grid = grid;
32781                 var cid = this.grid.getGridEl().id;
32782         this.colSelector = "#" + cid + " ." + this.cellClass + "-";
32783         this.tdSelector = "#" + cid + " ." + this.tdClass + "-";
32784         this.hdSelector = "#" + cid + " ." + this.hdClass + "-";
32785         this.splitSelector = "#" + cid + " ." + this.splitClass + "-";
32786         },
32787         
32788     getColumnRenderers : function(){
32789         var renderers = [];
32790         var cm = this.grid.colModel;
32791         var colCount = cm.getColumnCount();
32792         for(var i = 0; i < colCount; i++){
32793             renderers[i] = cm.getRenderer(i);
32794         }
32795         return renderers;
32796     },
32797     
32798     getColumnIds : function(){
32799         var ids = [];
32800         var cm = this.grid.colModel;
32801         var colCount = cm.getColumnCount();
32802         for(var i = 0; i < colCount; i++){
32803             ids[i] = cm.getColumnId(i);
32804         }
32805         return ids;
32806     },
32807     
32808     getDataIndexes : function(){
32809         if(!this.indexMap){
32810             this.indexMap = this.buildIndexMap();
32811         }
32812         return this.indexMap.colToData;
32813     },
32814     
32815     getColumnIndexByDataIndex : function(dataIndex){
32816         if(!this.indexMap){
32817             this.indexMap = this.buildIndexMap();
32818         }
32819         return this.indexMap.dataToCol[dataIndex];
32820     },
32821     
32822     /**
32823      * Set a css style for a column dynamically. 
32824      * @param {Number} colIndex The index of the column
32825      * @param {String} name The css property name
32826      * @param {String} value The css value
32827      */
32828     setCSSStyle : function(colIndex, name, value){
32829         var selector = "#" + this.grid.id + " .x-grid-col-" + colIndex;
32830         Roo.util.CSS.updateRule(selector, name, value);
32831     },
32832     
32833     generateRules : function(cm){
32834         var ruleBuf = [], rulesId = this.grid.id + '-cssrules';
32835         Roo.util.CSS.removeStyleSheet(rulesId);
32836         for(var i = 0, len = cm.getColumnCount(); i < len; i++){
32837             var cid = cm.getColumnId(i);
32838             ruleBuf.push(this.colSelector, cid, " {\n", cm.config[i].css, "}\n",
32839                          this.tdSelector, cid, " {\n}\n",
32840                          this.hdSelector, cid, " {\n}\n",
32841                          this.splitSelector, cid, " {\n}\n");
32842         }
32843         return Roo.util.CSS.createStyleSheet(ruleBuf.join(""), rulesId);
32844     }
32845 });/*
32846  * Based on:
32847  * Ext JS Library 1.1.1
32848  * Copyright(c) 2006-2007, Ext JS, LLC.
32849  *
32850  * Originally Released Under LGPL - original licence link has changed is not relivant.
32851  *
32852  * Fork - LGPL
32853  * <script type="text/javascript">
32854  */
32855
32856 // private
32857 // This is a support class used internally by the Grid components
32858 Roo.grid.HeaderDragZone = function(grid, hd, hd2){
32859     this.grid = grid;
32860     this.view = grid.getView();
32861     this.ddGroup = "gridHeader" + this.grid.getGridEl().id;
32862     Roo.grid.HeaderDragZone.superclass.constructor.call(this, hd);
32863     if(hd2){
32864         this.setHandleElId(Roo.id(hd));
32865         this.setOuterHandleElId(Roo.id(hd2));
32866     }
32867     this.scroll = false;
32868 };
32869 Roo.extend(Roo.grid.HeaderDragZone, Roo.dd.DragZone, {
32870     maxDragWidth: 120,
32871     getDragData : function(e){
32872         var t = Roo.lib.Event.getTarget(e);
32873         var h = this.view.findHeaderCell(t);
32874         if(h){
32875             return {ddel: h.firstChild, header:h};
32876         }
32877         return false;
32878     },
32879
32880     onInitDrag : function(e){
32881         this.view.headersDisabled = true;
32882         var clone = this.dragData.ddel.cloneNode(true);
32883         clone.id = Roo.id();
32884         clone.style.width = Math.min(this.dragData.header.offsetWidth,this.maxDragWidth) + "px";
32885         this.proxy.update(clone);
32886         return true;
32887     },
32888
32889     afterValidDrop : function(){
32890         var v = this.view;
32891         setTimeout(function(){
32892             v.headersDisabled = false;
32893         }, 50);
32894     },
32895
32896     afterInvalidDrop : function(){
32897         var v = this.view;
32898         setTimeout(function(){
32899             v.headersDisabled = false;
32900         }, 50);
32901     }
32902 });
32903 /*
32904  * Based on:
32905  * Ext JS Library 1.1.1
32906  * Copyright(c) 2006-2007, Ext JS, LLC.
32907  *
32908  * Originally Released Under LGPL - original licence link has changed is not relivant.
32909  *
32910  * Fork - LGPL
32911  * <script type="text/javascript">
32912  */
32913 // private
32914 // This is a support class used internally by the Grid components
32915 Roo.grid.HeaderDropZone = function(grid, hd, hd2){
32916     this.grid = grid;
32917     this.view = grid.getView();
32918     // split the proxies so they don't interfere with mouse events
32919     this.proxyTop = Roo.DomHelper.append(document.body, {
32920         cls:"col-move-top", html:"&#160;"
32921     }, true);
32922     this.proxyBottom = Roo.DomHelper.append(document.body, {
32923         cls:"col-move-bottom", html:"&#160;"
32924     }, true);
32925     this.proxyTop.hide = this.proxyBottom.hide = function(){
32926         this.setLeftTop(-100,-100);
32927         this.setStyle("visibility", "hidden");
32928     };
32929     this.ddGroup = "gridHeader" + this.grid.getGridEl().id;
32930     // temporarily disabled
32931     //Roo.dd.ScrollManager.register(this.view.scroller.dom);
32932     Roo.grid.HeaderDropZone.superclass.constructor.call(this, grid.getGridEl().dom);
32933 };
32934 Roo.extend(Roo.grid.HeaderDropZone, Roo.dd.DropZone, {
32935     proxyOffsets : [-4, -9],
32936     fly: Roo.Element.fly,
32937
32938     getTargetFromEvent : function(e){
32939         var t = Roo.lib.Event.getTarget(e);
32940         var cindex = this.view.findCellIndex(t);
32941         if(cindex !== false){
32942             return this.view.getHeaderCell(cindex);
32943         }
32944         return null;
32945     },
32946
32947     nextVisible : function(h){
32948         var v = this.view, cm = this.grid.colModel;
32949         h = h.nextSibling;
32950         while(h){
32951             if(!cm.isHidden(v.getCellIndex(h))){
32952                 return h;
32953             }
32954             h = h.nextSibling;
32955         }
32956         return null;
32957     },
32958
32959     prevVisible : function(h){
32960         var v = this.view, cm = this.grid.colModel;
32961         h = h.prevSibling;
32962         while(h){
32963             if(!cm.isHidden(v.getCellIndex(h))){
32964                 return h;
32965             }
32966             h = h.prevSibling;
32967         }
32968         return null;
32969     },
32970
32971     positionIndicator : function(h, n, e){
32972         var x = Roo.lib.Event.getPageX(e);
32973         var r = Roo.lib.Dom.getRegion(n.firstChild);
32974         var px, pt, py = r.top + this.proxyOffsets[1];
32975         if((r.right - x) <= (r.right-r.left)/2){
32976             px = r.right+this.view.borderWidth;
32977             pt = "after";
32978         }else{
32979             px = r.left;
32980             pt = "before";
32981         }
32982         var oldIndex = this.view.getCellIndex(h);
32983         var newIndex = this.view.getCellIndex(n);
32984
32985         if(this.grid.colModel.isFixed(newIndex)){
32986             return false;
32987         }
32988
32989         var locked = this.grid.colModel.isLocked(newIndex);
32990
32991         if(pt == "after"){
32992             newIndex++;
32993         }
32994         if(oldIndex < newIndex){
32995             newIndex--;
32996         }
32997         if(oldIndex == newIndex && (locked == this.grid.colModel.isLocked(oldIndex))){
32998             return false;
32999         }
33000         px +=  this.proxyOffsets[0];
33001         this.proxyTop.setLeftTop(px, py);
33002         this.proxyTop.show();
33003         if(!this.bottomOffset){
33004             this.bottomOffset = this.view.mainHd.getHeight();
33005         }
33006         this.proxyBottom.setLeftTop(px, py+this.proxyTop.dom.offsetHeight+this.bottomOffset);
33007         this.proxyBottom.show();
33008         return pt;
33009     },
33010
33011     onNodeEnter : function(n, dd, e, data){
33012         if(data.header != n){
33013             this.positionIndicator(data.header, n, e);
33014         }
33015     },
33016
33017     onNodeOver : function(n, dd, e, data){
33018         var result = false;
33019         if(data.header != n){
33020             result = this.positionIndicator(data.header, n, e);
33021         }
33022         if(!result){
33023             this.proxyTop.hide();
33024             this.proxyBottom.hide();
33025         }
33026         return result ? this.dropAllowed : this.dropNotAllowed;
33027     },
33028
33029     onNodeOut : function(n, dd, e, data){
33030         this.proxyTop.hide();
33031         this.proxyBottom.hide();
33032     },
33033
33034     onNodeDrop : function(n, dd, e, data){
33035         var h = data.header;
33036         if(h != n){
33037             var cm = this.grid.colModel;
33038             var x = Roo.lib.Event.getPageX(e);
33039             var r = Roo.lib.Dom.getRegion(n.firstChild);
33040             var pt = (r.right - x) <= ((r.right-r.left)/2) ? "after" : "before";
33041             var oldIndex = this.view.getCellIndex(h);
33042             var newIndex = this.view.getCellIndex(n);
33043             var locked = cm.isLocked(newIndex);
33044             if(pt == "after"){
33045                 newIndex++;
33046             }
33047             if(oldIndex < newIndex){
33048                 newIndex--;
33049             }
33050             if(oldIndex == newIndex && (locked == cm.isLocked(oldIndex))){
33051                 return false;
33052             }
33053             cm.setLocked(oldIndex, locked, true);
33054             cm.moveColumn(oldIndex, newIndex);
33055             this.grid.fireEvent("columnmove", oldIndex, newIndex);
33056             return true;
33057         }
33058         return false;
33059     }
33060 });
33061 /*
33062  * Based on:
33063  * Ext JS Library 1.1.1
33064  * Copyright(c) 2006-2007, Ext JS, LLC.
33065  *
33066  * Originally Released Under LGPL - original licence link has changed is not relivant.
33067  *
33068  * Fork - LGPL
33069  * <script type="text/javascript">
33070  */
33071   
33072 /**
33073  * @class Roo.grid.GridView
33074  * @extends Roo.util.Observable
33075  *
33076  * @constructor
33077  * @param {Object} config
33078  */
33079 Roo.grid.GridView = function(config){
33080     Roo.grid.GridView.superclass.constructor.call(this);
33081     this.el = null;
33082
33083     Roo.apply(this, config);
33084 };
33085
33086 Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
33087
33088     unselectable :  'unselectable="on"',
33089     unselectableCls :  'x-unselectable',
33090     
33091     
33092     rowClass : "x-grid-row",
33093
33094     cellClass : "x-grid-col",
33095
33096     tdClass : "x-grid-td",
33097
33098     hdClass : "x-grid-hd",
33099
33100     splitClass : "x-grid-split",
33101
33102     sortClasses : ["sort-asc", "sort-desc"],
33103
33104     enableMoveAnim : false,
33105
33106     hlColor: "C3DAF9",
33107
33108     dh : Roo.DomHelper,
33109
33110     fly : Roo.Element.fly,
33111
33112     css : Roo.util.CSS,
33113
33114     borderWidth: 1,
33115
33116     splitOffset: 3,
33117
33118     scrollIncrement : 22,
33119
33120     cellRE: /(?:.*?)x-grid-(?:hd|cell|csplit)-(?:[\d]+)-([\d]+)(?:.*?)/,
33121
33122     findRE: /\s?(?:x-grid-hd|x-grid-col|x-grid-csplit)\s/,
33123
33124     bind : function(ds, cm){
33125         if(this.ds){
33126             this.ds.un("load", this.onLoad, this);
33127             this.ds.un("datachanged", this.onDataChange, this);
33128             this.ds.un("add", this.onAdd, this);
33129             this.ds.un("remove", this.onRemove, this);
33130             this.ds.un("update", this.onUpdate, this);
33131             this.ds.un("clear", this.onClear, this);
33132         }
33133         if(ds){
33134             ds.on("load", this.onLoad, this);
33135             ds.on("datachanged", this.onDataChange, this);
33136             ds.on("add", this.onAdd, this);
33137             ds.on("remove", this.onRemove, this);
33138             ds.on("update", this.onUpdate, this);
33139             ds.on("clear", this.onClear, this);
33140         }
33141         this.ds = ds;
33142
33143         if(this.cm){
33144             this.cm.un("widthchange", this.onColWidthChange, this);
33145             this.cm.un("headerchange", this.onHeaderChange, this);
33146             this.cm.un("hiddenchange", this.onHiddenChange, this);
33147             this.cm.un("columnmoved", this.onColumnMove, this);
33148             this.cm.un("columnlockchange", this.onColumnLock, this);
33149         }
33150         if(cm){
33151             this.generateRules(cm);
33152             cm.on("widthchange", this.onColWidthChange, this);
33153             cm.on("headerchange", this.onHeaderChange, this);
33154             cm.on("hiddenchange", this.onHiddenChange, this);
33155             cm.on("columnmoved", this.onColumnMove, this);
33156             cm.on("columnlockchange", this.onColumnLock, this);
33157         }
33158         this.cm = cm;
33159     },
33160
33161     init: function(grid){
33162         Roo.grid.GridView.superclass.init.call(this, grid);
33163
33164         this.bind(grid.dataSource, grid.colModel);
33165
33166         grid.on("headerclick", this.handleHeaderClick, this);
33167
33168         if(grid.trackMouseOver){
33169             grid.on("mouseover", this.onRowOver, this);
33170             grid.on("mouseout", this.onRowOut, this);
33171         }
33172         grid.cancelTextSelection = function(){};
33173         this.gridId = grid.id;
33174
33175         var tpls = this.templates || {};
33176
33177         if(!tpls.master){
33178             tpls.master = new Roo.Template(
33179                '<div class="x-grid" hidefocus="true">',
33180                 '<a href="#" class="x-grid-focus" tabIndex="-1"></a>',
33181                   '<div class="x-grid-topbar"></div>',
33182                   '<div class="x-grid-scroller"><div></div></div>',
33183                   '<div class="x-grid-locked">',
33184                       '<div class="x-grid-header">{lockedHeader}</div>',
33185                       '<div class="x-grid-body">{lockedBody}</div>',
33186                   "</div>",
33187                   '<div class="x-grid-viewport">',
33188                       '<div class="x-grid-header">{header}</div>',
33189                       '<div class="x-grid-body">{body}</div>',
33190                   "</div>",
33191                   '<div class="x-grid-bottombar"></div>',
33192                  
33193                   '<div class="x-grid-resize-proxy">&#160;</div>',
33194                "</div>"
33195             );
33196             tpls.master.disableformats = true;
33197         }
33198
33199         if(!tpls.header){
33200             tpls.header = new Roo.Template(
33201                '<table border="0" cellspacing="0" cellpadding="0">',
33202                '<tbody><tr class="x-grid-hd-row">{cells}</tr></tbody>',
33203                "</table>{splits}"
33204             );
33205             tpls.header.disableformats = true;
33206         }
33207         tpls.header.compile();
33208
33209         if(!tpls.hcell){
33210             tpls.hcell = new Roo.Template(
33211                 '<td class="x-grid-hd x-grid-td-{id} {cellId}"><div title="{title}" class="x-grid-hd-inner x-grid-hd-{id}">',
33212                 '<div class="x-grid-hd-text ' + this.unselectableCls +  '" ' + this.unselectable +'>{value}<img class="x-grid-sort-icon" src="', Roo.BLANK_IMAGE_URL, '" /></div>',
33213                 "</div></td>"
33214              );
33215              tpls.hcell.disableFormats = true;
33216         }
33217         tpls.hcell.compile();
33218
33219         if(!tpls.hsplit){
33220             tpls.hsplit = new Roo.Template('<div class="x-grid-split {splitId} x-grid-split-{id}" style="{style} ' +
33221                                             this.unselectableCls +  '" ' + this.unselectable +'>&#160;</div>');
33222             tpls.hsplit.disableFormats = true;
33223         }
33224         tpls.hsplit.compile();
33225
33226         if(!tpls.body){
33227             tpls.body = new Roo.Template(
33228                '<table border="0" cellspacing="0" cellpadding="0">',
33229                "<tbody>{rows}</tbody>",
33230                "</table>"
33231             );
33232             tpls.body.disableFormats = true;
33233         }
33234         tpls.body.compile();
33235
33236         if(!tpls.row){
33237             tpls.row = new Roo.Template('<tr class="x-grid-row {alt}">{cells}</tr>');
33238             tpls.row.disableFormats = true;
33239         }
33240         tpls.row.compile();
33241
33242         if(!tpls.cell){
33243             tpls.cell = new Roo.Template(
33244                 '<td class="x-grid-col x-grid-td-{id} {cellId} {css}" tabIndex="0">',
33245                 '<div class="x-grid-col-{id} x-grid-cell-inner"><div class="x-grid-cell-text ' +
33246                     this.unselectableCls +  '" ' + this.unselectable +'" {attr}>{value}</div></div>',
33247                 "</td>"
33248             );
33249             tpls.cell.disableFormats = true;
33250         }
33251         tpls.cell.compile();
33252
33253         this.templates = tpls;
33254     },
33255
33256     // remap these for backwards compat
33257     onColWidthChange : function(){
33258         this.updateColumns.apply(this, arguments);
33259     },
33260     onHeaderChange : function(){
33261         this.updateHeaders.apply(this, arguments);
33262     }, 
33263     onHiddenChange : function(){
33264         this.handleHiddenChange.apply(this, arguments);
33265     },
33266     onColumnMove : function(){
33267         this.handleColumnMove.apply(this, arguments);
33268     },
33269     onColumnLock : function(){
33270         this.handleLockChange.apply(this, arguments);
33271     },
33272
33273     onDataChange : function(){
33274         this.refresh();
33275         this.updateHeaderSortState();
33276     },
33277
33278     onClear : function(){
33279         this.refresh();
33280     },
33281
33282     onUpdate : function(ds, record){
33283         this.refreshRow(record);
33284     },
33285
33286     refreshRow : function(record){
33287         var ds = this.ds, index;
33288         if(typeof record == 'number'){
33289             index = record;
33290             record = ds.getAt(index);
33291         }else{
33292             index = ds.indexOf(record);
33293         }
33294         this.insertRows(ds, index, index, true);
33295         this.onRemove(ds, record, index+1, true);
33296         this.syncRowHeights(index, index);
33297         this.layout();
33298         this.fireEvent("rowupdated", this, index, record);
33299     },
33300
33301     onAdd : function(ds, records, index){
33302         this.insertRows(ds, index, index + (records.length-1));
33303     },
33304
33305     onRemove : function(ds, record, index, isUpdate){
33306         if(isUpdate !== true){
33307             this.fireEvent("beforerowremoved", this, index, record);
33308         }
33309         var bt = this.getBodyTable(), lt = this.getLockedTable();
33310         if(bt.rows[index]){
33311             bt.firstChild.removeChild(bt.rows[index]);
33312         }
33313         if(lt.rows[index]){
33314             lt.firstChild.removeChild(lt.rows[index]);
33315         }
33316         if(isUpdate !== true){
33317             this.stripeRows(index);
33318             this.syncRowHeights(index, index);
33319             this.layout();
33320             this.fireEvent("rowremoved", this, index, record);
33321         }
33322     },
33323
33324     onLoad : function(){
33325         this.scrollToTop();
33326     },
33327
33328     /**
33329      * Scrolls the grid to the top
33330      */
33331     scrollToTop : function(){
33332         if(this.scroller){
33333             this.scroller.dom.scrollTop = 0;
33334             this.syncScroll();
33335         }
33336     },
33337
33338     /**
33339      * Gets a panel in the header of the grid that can be used for toolbars etc.
33340      * After modifying the contents of this panel a call to grid.autoSize() may be
33341      * required to register any changes in size.
33342      * @param {Boolean} doShow By default the header is hidden. Pass true to show the panel
33343      * @return Roo.Element
33344      */
33345     getHeaderPanel : function(doShow){
33346         if(doShow){
33347             this.headerPanel.show();
33348         }
33349         return this.headerPanel;
33350     },
33351
33352     /**
33353      * Gets a panel in the footer of the grid that can be used for toolbars etc.
33354      * After modifying the contents of this panel a call to grid.autoSize() may be
33355      * required to register any changes in size.
33356      * @param {Boolean} doShow By default the footer is hidden. Pass true to show the panel
33357      * @return Roo.Element
33358      */
33359     getFooterPanel : function(doShow){
33360         if(doShow){
33361             this.footerPanel.show();
33362         }
33363         return this.footerPanel;
33364     },
33365
33366     initElements : function(){
33367         var E = Roo.Element;
33368         var el = this.grid.getGridEl().dom.firstChild;
33369         var cs = el.childNodes;
33370
33371         this.el = new E(el);
33372         
33373          this.focusEl = new E(el.firstChild);
33374         this.focusEl.swallowEvent("click", true);
33375         
33376         this.headerPanel = new E(cs[1]);
33377         this.headerPanel.enableDisplayMode("block");
33378
33379         this.scroller = new E(cs[2]);
33380         this.scrollSizer = new E(this.scroller.dom.firstChild);
33381
33382         this.lockedWrap = new E(cs[3]);
33383         this.lockedHd = new E(this.lockedWrap.dom.firstChild);
33384         this.lockedBody = new E(this.lockedWrap.dom.childNodes[1]);
33385
33386         this.mainWrap = new E(cs[4]);
33387         this.mainHd = new E(this.mainWrap.dom.firstChild);
33388         this.mainBody = new E(this.mainWrap.dom.childNodes[1]);
33389
33390         this.footerPanel = new E(cs[5]);
33391         this.footerPanel.enableDisplayMode("block");
33392
33393         this.resizeProxy = new E(cs[6]);
33394
33395         this.headerSelector = String.format(
33396            '#{0} td.x-grid-hd, #{1} td.x-grid-hd',
33397            this.lockedHd.id, this.mainHd.id
33398         );
33399
33400         this.splitterSelector = String.format(
33401            '#{0} div.x-grid-split, #{1} div.x-grid-split',
33402            this.idToCssName(this.lockedHd.id), this.idToCssName(this.mainHd.id)
33403         );
33404     },
33405     idToCssName : function(s)
33406     {
33407         return s.replace(/[^a-z0-9]+/ig, '-');
33408     },
33409
33410     getHeaderCell : function(index){
33411         return Roo.DomQuery.select(this.headerSelector)[index];
33412     },
33413
33414     getHeaderCellMeasure : function(index){
33415         return this.getHeaderCell(index).firstChild;
33416     },
33417
33418     getHeaderCellText : function(index){
33419         return this.getHeaderCell(index).firstChild.firstChild;
33420     },
33421
33422     getLockedTable : function(){
33423         return this.lockedBody.dom.firstChild;
33424     },
33425
33426     getBodyTable : function(){
33427         return this.mainBody.dom.firstChild;
33428     },
33429
33430     getLockedRow : function(index){
33431         return this.getLockedTable().rows[index];
33432     },
33433
33434     getRow : function(index){
33435         return this.getBodyTable().rows[index];
33436     },
33437
33438     getRowComposite : function(index){
33439         if(!this.rowEl){
33440             this.rowEl = new Roo.CompositeElementLite();
33441         }
33442         var els = [], lrow, mrow;
33443         if(lrow = this.getLockedRow(index)){
33444             els.push(lrow);
33445         }
33446         if(mrow = this.getRow(index)){
33447             els.push(mrow);
33448         }
33449         this.rowEl.elements = els;
33450         return this.rowEl;
33451     },
33452     /**
33453      * Gets the 'td' of the cell
33454      * 
33455      * @param {Integer} rowIndex row to select
33456      * @param {Integer} colIndex column to select
33457      * 
33458      * @return {Object} 
33459      */
33460     getCell : function(rowIndex, colIndex){
33461         var locked = this.cm.getLockedCount();
33462         var source;
33463         if(colIndex < locked){
33464             source = this.lockedBody.dom.firstChild;
33465         }else{
33466             source = this.mainBody.dom.firstChild;
33467             colIndex -= locked;
33468         }
33469         return source.rows[rowIndex].childNodes[colIndex];
33470     },
33471
33472     getCellText : function(rowIndex, colIndex){
33473         return this.getCell(rowIndex, colIndex).firstChild.firstChild;
33474     },
33475
33476     getCellBox : function(cell){
33477         var b = this.fly(cell).getBox();
33478         if(Roo.isOpera){ // opera fails to report the Y
33479             b.y = cell.offsetTop + this.mainBody.getY();
33480         }
33481         return b;
33482     },
33483
33484     getCellIndex : function(cell){
33485         var id = String(cell.className).match(this.cellRE);
33486         if(id){
33487             return parseInt(id[1], 10);
33488         }
33489         return 0;
33490     },
33491
33492     findHeaderIndex : function(n){
33493         var r = Roo.fly(n).findParent("td." + this.hdClass, 6);
33494         return r ? this.getCellIndex(r) : false;
33495     },
33496
33497     findHeaderCell : function(n){
33498         var r = Roo.fly(n).findParent("td." + this.hdClass, 6);
33499         return r ? r : false;
33500     },
33501
33502     findRowIndex : function(n){
33503         if(!n){
33504             return false;
33505         }
33506         var r = Roo.fly(n).findParent("tr." + this.rowClass, 6);
33507         return r ? r.rowIndex : false;
33508     },
33509
33510     findCellIndex : function(node){
33511         var stop = this.el.dom;
33512         while(node && node != stop){
33513             if(this.findRE.test(node.className)){
33514                 return this.getCellIndex(node);
33515             }
33516             node = node.parentNode;
33517         }
33518         return false;
33519     },
33520
33521     getColumnId : function(index){
33522         return this.cm.getColumnId(index);
33523     },
33524
33525     getSplitters : function()
33526     {
33527         if(this.splitterSelector){
33528            return Roo.DomQuery.select(this.splitterSelector);
33529         }else{
33530             return null;
33531       }
33532     },
33533
33534     getSplitter : function(index){
33535         return this.getSplitters()[index];
33536     },
33537
33538     onRowOver : function(e, t){
33539         var row;
33540         if((row = this.findRowIndex(t)) !== false){
33541             this.getRowComposite(row).addClass("x-grid-row-over");
33542         }
33543     },
33544
33545     onRowOut : function(e, t){
33546         var row;
33547         if((row = this.findRowIndex(t)) !== false && row !== this.findRowIndex(e.getRelatedTarget())){
33548             this.getRowComposite(row).removeClass("x-grid-row-over");
33549         }
33550     },
33551
33552     renderHeaders : function(){
33553         var cm = this.cm;
33554         var ct = this.templates.hcell, ht = this.templates.header, st = this.templates.hsplit;
33555         var cb = [], lb = [], sb = [], lsb = [], p = {};
33556         for(var i = 0, len = cm.getColumnCount(); i < len; i++){
33557             p.cellId = "x-grid-hd-0-" + i;
33558             p.splitId = "x-grid-csplit-0-" + i;
33559             p.id = cm.getColumnId(i);
33560             p.value = cm.getColumnHeader(i) || "";
33561             p.title = cm.getColumnTooltip(i) || (''+p.value).match(/\</)  ? '' :  p.value  || "";
33562             p.style = (this.grid.enableColumnResize === false || !cm.isResizable(i) || cm.isFixed(i)) ? 'cursor:default' : '';
33563             if(!cm.isLocked(i)){
33564                 cb[cb.length] = ct.apply(p);
33565                 sb[sb.length] = st.apply(p);
33566             }else{
33567                 lb[lb.length] = ct.apply(p);
33568                 lsb[lsb.length] = st.apply(p);
33569             }
33570         }
33571         return [ht.apply({cells: lb.join(""), splits:lsb.join("")}),
33572                 ht.apply({cells: cb.join(""), splits:sb.join("")})];
33573     },
33574
33575     updateHeaders : function(){
33576         var html = this.renderHeaders();
33577         this.lockedHd.update(html[0]);
33578         this.mainHd.update(html[1]);
33579     },
33580
33581     /**
33582      * Focuses the specified row.
33583      * @param {Number} row The row index
33584      */
33585     focusRow : function(row)
33586     {
33587         //Roo.log('GridView.focusRow');
33588         var x = this.scroller.dom.scrollLeft;
33589         this.focusCell(row, 0, false);
33590         this.scroller.dom.scrollLeft = x;
33591     },
33592
33593     /**
33594      * Focuses the specified cell.
33595      * @param {Number} row The row index
33596      * @param {Number} col The column index
33597      * @param {Boolean} hscroll false to disable horizontal scrolling
33598      */
33599     focusCell : function(row, col, hscroll)
33600     {
33601         //Roo.log('GridView.focusCell');
33602         var el = this.ensureVisible(row, col, hscroll);
33603         this.focusEl.alignTo(el, "tl-tl");
33604         if(Roo.isGecko){
33605             this.focusEl.focus();
33606         }else{
33607             this.focusEl.focus.defer(1, this.focusEl);
33608         }
33609     },
33610
33611     /**
33612      * Scrolls the specified cell into view
33613      * @param {Number} row The row index
33614      * @param {Number} col The column index
33615      * @param {Boolean} hscroll false to disable horizontal scrolling
33616      */
33617     ensureVisible : function(row, col, hscroll)
33618     {
33619         //Roo.log('GridView.ensureVisible,' + row + ',' + col);
33620         //return null; //disable for testing.
33621         if(typeof row != "number"){
33622             row = row.rowIndex;
33623         }
33624         if(row < 0 && row >= this.ds.getCount()){
33625             return  null;
33626         }
33627         col = (col !== undefined ? col : 0);
33628         var cm = this.grid.colModel;
33629         while(cm.isHidden(col)){
33630             col++;
33631         }
33632
33633         var el = this.getCell(row, col);
33634         if(!el){
33635             return null;
33636         }
33637         var c = this.scroller.dom;
33638
33639         var ctop = parseInt(el.offsetTop, 10);
33640         var cleft = parseInt(el.offsetLeft, 10);
33641         var cbot = ctop + el.offsetHeight;
33642         var cright = cleft + el.offsetWidth;
33643         
33644         var ch = c.clientHeight - this.mainHd.dom.offsetHeight;
33645         var stop = parseInt(c.scrollTop, 10);
33646         var sleft = parseInt(c.scrollLeft, 10);
33647         var sbot = stop + ch;
33648         var sright = sleft + c.clientWidth;
33649         /*
33650         Roo.log('GridView.ensureVisible:' +
33651                 ' ctop:' + ctop +
33652                 ' c.clientHeight:' + c.clientHeight +
33653                 ' this.mainHd.dom.offsetHeight:' + this.mainHd.dom.offsetHeight +
33654                 ' stop:' + stop +
33655                 ' cbot:' + cbot +
33656                 ' sbot:' + sbot +
33657                 ' ch:' + ch  
33658                 );
33659         */
33660         if(ctop < stop){
33661              c.scrollTop = ctop;
33662             //Roo.log("set scrolltop to ctop DISABLE?");
33663         }else if(cbot > sbot){
33664             //Roo.log("set scrolltop to cbot-ch");
33665             c.scrollTop = cbot-ch;
33666         }
33667         
33668         if(hscroll !== false){
33669             if(cleft < sleft){
33670                 c.scrollLeft = cleft;
33671             }else if(cright > sright){
33672                 c.scrollLeft = cright-c.clientWidth;
33673             }
33674         }
33675          
33676         return el;
33677     },
33678
33679     updateColumns : function(){
33680         this.grid.stopEditing();
33681         var cm = this.grid.colModel, colIds = this.getColumnIds();
33682         //var totalWidth = cm.getTotalWidth();
33683         var pos = 0;
33684         for(var i = 0, len = cm.getColumnCount(); i < len; i++){
33685             //if(cm.isHidden(i)) continue;
33686             var w = cm.getColumnWidth(i);
33687             this.css.updateRule(this.colSelector+this.idToCssName(colIds[i]), "width", (w - this.borderWidth) + "px");
33688             this.css.updateRule(this.hdSelector+this.idToCssName(colIds[i]), "width", (w - this.borderWidth) + "px");
33689         }
33690         this.updateSplitters();
33691     },
33692
33693     generateRules : function(cm){
33694         var ruleBuf = [], rulesId = this.idToCssName(this.grid.id)+ '-cssrules';
33695         Roo.util.CSS.removeStyleSheet(rulesId);
33696         for(var i = 0, len = cm.getColumnCount(); i < len; i++){
33697             var cid = cm.getColumnId(i);
33698             var align = '';
33699             if(cm.config[i].align){
33700                 align = 'text-align:'+cm.config[i].align+';';
33701             }
33702             var hidden = '';
33703             if(cm.isHidden(i)){
33704                 hidden = 'display:none;';
33705             }
33706             var width = "width:" + (cm.getColumnWidth(i) - this.borderWidth) + "px;";
33707             ruleBuf.push(
33708                     this.colSelector, cid, " {\n", cm.config[i].css, align, width, "\n}\n",
33709                     this.hdSelector, cid, " {\n", align, width, "}\n",
33710                     this.tdSelector, cid, " {\n",hidden,"\n}\n",
33711                     this.splitSelector, cid, " {\n", hidden , "\n}\n");
33712         }
33713         return Roo.util.CSS.createStyleSheet(ruleBuf.join(""), rulesId);
33714     },
33715
33716     updateSplitters : function(){
33717         var cm = this.cm, s = this.getSplitters();
33718         if(s){ // splitters not created yet
33719             var pos = 0, locked = true;
33720             for(var i = 0, len = cm.getColumnCount(); i < len; i++){
33721                 if(cm.isHidden(i)) {
33722                     continue;
33723                 }
33724                 var w = cm.getColumnWidth(i); // make sure it's a number
33725                 if(!cm.isLocked(i) && locked){
33726                     pos = 0;
33727                     locked = false;
33728                 }
33729                 pos += w;
33730                 s[i].style.left = (pos-this.splitOffset) + "px";
33731             }
33732         }
33733     },
33734
33735     handleHiddenChange : function(colModel, colIndex, hidden){
33736         if(hidden){
33737             this.hideColumn(colIndex);
33738         }else{
33739             this.unhideColumn(colIndex);
33740         }
33741     },
33742
33743     hideColumn : function(colIndex){
33744         var cid = this.getColumnId(colIndex);
33745         this.css.updateRule(this.tdSelector+this.idToCssName(cid), "display", "none");
33746         this.css.updateRule(this.splitSelector+this.idToCssName(cid), "display", "none");
33747         if(Roo.isSafari){
33748             this.updateHeaders();
33749         }
33750         this.updateSplitters();
33751         this.layout();
33752     },
33753
33754     unhideColumn : function(colIndex){
33755         var cid = this.getColumnId(colIndex);
33756         this.css.updateRule(this.tdSelector+this.idToCssName(cid), "display", "");
33757         this.css.updateRule(this.splitSelector+this.idToCssName(cid), "display", "");
33758
33759         if(Roo.isSafari){
33760             this.updateHeaders();
33761         }
33762         this.updateSplitters();
33763         this.layout();
33764     },
33765
33766     insertRows : function(dm, firstRow, lastRow, isUpdate){
33767         if(firstRow == 0 && lastRow == dm.getCount()-1){
33768             this.refresh();
33769         }else{
33770             if(!isUpdate){
33771                 this.fireEvent("beforerowsinserted", this, firstRow, lastRow);
33772             }
33773             var s = this.getScrollState();
33774             var markup = this.renderRows(firstRow, lastRow);
33775             this.bufferRows(markup[0], this.getLockedTable(), firstRow);
33776             this.bufferRows(markup[1], this.getBodyTable(), firstRow);
33777             this.restoreScroll(s);
33778             if(!isUpdate){
33779                 this.fireEvent("rowsinserted", this, firstRow, lastRow);
33780                 this.syncRowHeights(firstRow, lastRow);
33781                 this.stripeRows(firstRow);
33782                 this.layout();
33783             }
33784         }
33785     },
33786
33787     bufferRows : function(markup, target, index){
33788         var before = null, trows = target.rows, tbody = target.tBodies[0];
33789         if(index < trows.length){
33790             before = trows[index];
33791         }
33792         var b = document.createElement("div");
33793         b.innerHTML = "<table><tbody>"+markup+"</tbody></table>";
33794         var rows = b.firstChild.rows;
33795         for(var i = 0, len = rows.length; i < len; i++){
33796             if(before){
33797                 tbody.insertBefore(rows[0], before);
33798             }else{
33799                 tbody.appendChild(rows[0]);
33800             }
33801         }
33802         b.innerHTML = "";
33803         b = null;
33804     },
33805
33806     deleteRows : function(dm, firstRow, lastRow){
33807         if(dm.getRowCount()<1){
33808             this.fireEvent("beforerefresh", this);
33809             this.mainBody.update("");
33810             this.lockedBody.update("");
33811             this.fireEvent("refresh", this);
33812         }else{
33813             this.fireEvent("beforerowsdeleted", this, firstRow, lastRow);
33814             var bt = this.getBodyTable();
33815             var tbody = bt.firstChild;
33816             var rows = bt.rows;
33817             for(var rowIndex = firstRow; rowIndex <= lastRow; rowIndex++){
33818                 tbody.removeChild(rows[firstRow]);
33819             }
33820             this.stripeRows(firstRow);
33821             this.fireEvent("rowsdeleted", this, firstRow, lastRow);
33822         }
33823     },
33824
33825     updateRows : function(dataSource, firstRow, lastRow){
33826         var s = this.getScrollState();
33827         this.refresh();
33828         this.restoreScroll(s);
33829     },
33830
33831     handleSort : function(dataSource, sortColumnIndex, sortDir, noRefresh){
33832         if(!noRefresh){
33833            this.refresh();
33834         }
33835         this.updateHeaderSortState();
33836     },
33837
33838     getScrollState : function(){
33839         
33840         var sb = this.scroller.dom;
33841         return {left: sb.scrollLeft, top: sb.scrollTop};
33842     },
33843
33844     stripeRows : function(startRow){
33845         if(!this.grid.stripeRows || this.ds.getCount() < 1){
33846             return;
33847         }
33848         startRow = startRow || 0;
33849         var rows = this.getBodyTable().rows;
33850         var lrows = this.getLockedTable().rows;
33851         var cls = ' x-grid-row-alt ';
33852         for(var i = startRow, len = rows.length; i < len; i++){
33853             var row = rows[i], lrow = lrows[i];
33854             var isAlt = ((i+1) % 2 == 0);
33855             var hasAlt = (' '+row.className + ' ').indexOf(cls) != -1;
33856             if(isAlt == hasAlt){
33857                 continue;
33858             }
33859             if(isAlt){
33860                 row.className += " x-grid-row-alt";
33861             }else{
33862                 row.className = row.className.replace("x-grid-row-alt", "");
33863             }
33864             if(lrow){
33865                 lrow.className = row.className;
33866             }
33867         }
33868     },
33869
33870     restoreScroll : function(state){
33871         //Roo.log('GridView.restoreScroll');
33872         var sb = this.scroller.dom;
33873         sb.scrollLeft = state.left;
33874         sb.scrollTop = state.top;
33875         this.syncScroll();
33876     },
33877
33878     syncScroll : function(){
33879         //Roo.log('GridView.syncScroll');
33880         var sb = this.scroller.dom;
33881         var sh = this.mainHd.dom;
33882         var bs = this.mainBody.dom;
33883         var lv = this.lockedBody.dom;
33884         sh.scrollLeft = bs.scrollLeft = sb.scrollLeft;
33885         lv.scrollTop = bs.scrollTop = sb.scrollTop;
33886     },
33887
33888     handleScroll : function(e){
33889         this.syncScroll();
33890         var sb = this.scroller.dom;
33891         this.grid.fireEvent("bodyscroll", sb.scrollLeft, sb.scrollTop);
33892         e.stopEvent();
33893     },
33894
33895     handleWheel : function(e){
33896         var d = e.getWheelDelta();
33897         this.scroller.dom.scrollTop -= d*22;
33898         // set this here to prevent jumpy scrolling on large tables
33899         this.lockedBody.dom.scrollTop = this.mainBody.dom.scrollTop = this.scroller.dom.scrollTop;
33900         e.stopEvent();
33901     },
33902
33903     renderRows : function(startRow, endRow){
33904         // pull in all the crap needed to render rows
33905         var g = this.grid, cm = g.colModel, ds = g.dataSource, stripe = g.stripeRows;
33906         var colCount = cm.getColumnCount();
33907
33908         if(ds.getCount() < 1){
33909             return ["", ""];
33910         }
33911
33912         // build a map for all the columns
33913         var cs = [];
33914         for(var i = 0; i < colCount; i++){
33915             var name = cm.getDataIndex(i);
33916             cs[i] = {
33917                 name : typeof name == 'undefined' ? ds.fields.get(i).name : name,
33918                 renderer : cm.getRenderer(i),
33919                 id : cm.getColumnId(i),
33920                 locked : cm.isLocked(i),
33921                 has_editor : cm.isCellEditable(i)
33922             };
33923         }
33924
33925         startRow = startRow || 0;
33926         endRow = typeof endRow == "undefined"? ds.getCount()-1 : endRow;
33927
33928         // records to render
33929         var rs = ds.getRange(startRow, endRow);
33930
33931         return this.doRender(cs, rs, ds, startRow, colCount, stripe);
33932     },
33933
33934     // As much as I hate to duplicate code, this was branched because FireFox really hates
33935     // [].join("") on strings. The performance difference was substantial enough to
33936     // branch this function
33937     doRender : Roo.isGecko ?
33938             function(cs, rs, ds, startRow, colCount, stripe){
33939                 var ts = this.templates, ct = ts.cell, rt = ts.row;
33940                 // buffers
33941                 var buf = "", lbuf = "", cb, lcb, c, p = {}, rp = {}, r, rowIndex;
33942                 
33943                 var hasListener = this.grid.hasListener('rowclass');
33944                 var rowcfg = {};
33945                 for(var j = 0, len = rs.length; j < len; j++){
33946                     r = rs[j]; cb = ""; lcb = ""; rowIndex = (j+startRow);
33947                     for(var i = 0; i < colCount; i++){
33948                         c = cs[i];
33949                         p.cellId = "x-grid-cell-" + rowIndex + "-" + i;
33950                         p.id = c.id;
33951                         p.css = p.attr = "";
33952                         p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
33953                         if(p.value == undefined || p.value === "") {
33954                             p.value = "&#160;";
33955                         }
33956                         if(c.has_editor){
33957                             p.css += ' x-grid-editable-cell';
33958                         }
33959                         if(c.dirty && typeof r.modified[c.name] !== 'undefined'){
33960                             p.css +=  ' x-grid-dirty-cell';
33961                         }
33962                         var markup = ct.apply(p);
33963                         if(!c.locked){
33964                             cb+= markup;
33965                         }else{
33966                             lcb+= markup;
33967                         }
33968                     }
33969                     var alt = [];
33970                     if(stripe && ((rowIndex+1) % 2 == 0)){
33971                         alt.push("x-grid-row-alt")
33972                     }
33973                     if(r.dirty){
33974                         alt.push(  " x-grid-dirty-row");
33975                     }
33976                     rp.cells = lcb;
33977                     if(this.getRowClass){
33978                         alt.push(this.getRowClass(r, rowIndex));
33979                     }
33980                     if (hasListener) {
33981                         rowcfg = {
33982                              
33983                             record: r,
33984                             rowIndex : rowIndex,
33985                             rowClass : ''
33986                         };
33987                         this.grid.fireEvent('rowclass', this, rowcfg);
33988                         alt.push(rowcfg.rowClass);
33989                     }
33990                     rp.alt = alt.join(" ");
33991                     lbuf+= rt.apply(rp);
33992                     rp.cells = cb;
33993                     buf+=  rt.apply(rp);
33994                 }
33995                 return [lbuf, buf];
33996             } :
33997             function(cs, rs, ds, startRow, colCount, stripe){
33998                 var ts = this.templates, ct = ts.cell, rt = ts.row;
33999                 // buffers
34000                 var buf = [], lbuf = [], cb, lcb, c, p = {}, rp = {}, r, rowIndex;
34001                 var hasListener = this.grid.hasListener('rowclass');
34002  
34003                 var rowcfg = {};
34004                 for(var j = 0, len = rs.length; j < len; j++){
34005                     r = rs[j]; cb = []; lcb = []; rowIndex = (j+startRow);
34006                     for(var i = 0; i < colCount; i++){
34007                         c = cs[i];
34008                         p.cellId = "x-grid-cell-" + rowIndex + "-" + i;
34009                         p.id = c.id;
34010                         p.css = p.attr = "";
34011                         p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
34012                         if(p.value == undefined || p.value === "") {
34013                             p.value = "&#160;";
34014                         }
34015                         //Roo.log(c);
34016                          if(c.has_editor){
34017                             p.css += ' x-grid-editable-cell';
34018                         }
34019                         if(r.dirty && typeof r.modified[c.name] !== 'undefined'){
34020                             p.css += ' x-grid-dirty-cell' 
34021                         }
34022                         
34023                         var markup = ct.apply(p);
34024                         if(!c.locked){
34025                             cb[cb.length] = markup;
34026                         }else{
34027                             lcb[lcb.length] = markup;
34028                         }
34029                     }
34030                     var alt = [];
34031                     if(stripe && ((rowIndex+1) % 2 == 0)){
34032                         alt.push( "x-grid-row-alt");
34033                     }
34034                     if(r.dirty){
34035                         alt.push(" x-grid-dirty-row");
34036                     }
34037                     rp.cells = lcb;
34038                     if(this.getRowClass){
34039                         alt.push( this.getRowClass(r, rowIndex));
34040                     }
34041                     if (hasListener) {
34042                         rowcfg = {
34043                              
34044                             record: r,
34045                             rowIndex : rowIndex,
34046                             rowClass : ''
34047                         };
34048                         this.grid.fireEvent('rowclass', this, rowcfg);
34049                         alt.push(rowcfg.rowClass);
34050                     }
34051                     
34052                     rp.alt = alt.join(" ");
34053                     rp.cells = lcb.join("");
34054                     lbuf[lbuf.length] = rt.apply(rp);
34055                     rp.cells = cb.join("");
34056                     buf[buf.length] =  rt.apply(rp);
34057                 }
34058                 return [lbuf.join(""), buf.join("")];
34059             },
34060
34061     renderBody : function(){
34062         var markup = this.renderRows();
34063         var bt = this.templates.body;
34064         return [bt.apply({rows: markup[0]}), bt.apply({rows: markup[1]})];
34065     },
34066
34067     /**
34068      * Refreshes the grid
34069      * @param {Boolean} headersToo
34070      */
34071     refresh : function(headersToo){
34072         this.fireEvent("beforerefresh", this);
34073         this.grid.stopEditing();
34074         var result = this.renderBody();
34075         this.lockedBody.update(result[0]);
34076         this.mainBody.update(result[1]);
34077         if(headersToo === true){
34078             this.updateHeaders();
34079             this.updateColumns();
34080             this.updateSplitters();
34081             this.updateHeaderSortState();
34082         }
34083         this.syncRowHeights();
34084         this.layout();
34085         this.fireEvent("refresh", this);
34086     },
34087
34088     handleColumnMove : function(cm, oldIndex, newIndex){
34089         this.indexMap = null;
34090         var s = this.getScrollState();
34091         this.refresh(true);
34092         this.restoreScroll(s);
34093         this.afterMove(newIndex);
34094     },
34095
34096     afterMove : function(colIndex){
34097         if(this.enableMoveAnim && Roo.enableFx){
34098             this.fly(this.getHeaderCell(colIndex).firstChild).highlight(this.hlColor);
34099         }
34100         // if multisort - fix sortOrder, and reload..
34101         if (this.grid.dataSource.multiSort) {
34102             // the we can call sort again..
34103             var dm = this.grid.dataSource;
34104             var cm = this.grid.colModel;
34105             var so = [];
34106             for(var i = 0; i < cm.config.length; i++ ) {
34107                 
34108                 if ((typeof(dm.sortToggle[cm.config[i].dataIndex]) == 'undefined')) {
34109                     continue; // dont' bother, it's not in sort list or being set.
34110                 }
34111                 
34112                 so.push(cm.config[i].dataIndex);
34113             };
34114             dm.sortOrder = so;
34115             dm.load(dm.lastOptions);
34116             
34117             
34118         }
34119         
34120     },
34121
34122     updateCell : function(dm, rowIndex, dataIndex){
34123         var colIndex = this.getColumnIndexByDataIndex(dataIndex);
34124         if(typeof colIndex == "undefined"){ // not present in grid
34125             return;
34126         }
34127         var cm = this.grid.colModel;
34128         var cell = this.getCell(rowIndex, colIndex);
34129         var cellText = this.getCellText(rowIndex, colIndex);
34130
34131         var p = {
34132             cellId : "x-grid-cell-" + rowIndex + "-" + colIndex,
34133             id : cm.getColumnId(colIndex),
34134             css: colIndex == cm.getColumnCount()-1 ? "x-grid-col-last" : ""
34135         };
34136         var renderer = cm.getRenderer(colIndex);
34137         var val = renderer(dm.getValueAt(rowIndex, dataIndex), p, rowIndex, colIndex, dm);
34138         if(typeof val == "undefined" || val === "") {
34139             val = "&#160;";
34140         }
34141         cellText.innerHTML = val;
34142         cell.className = this.cellClass + " " + this.idToCssName(p.cellId) + " " + p.css;
34143         this.syncRowHeights(rowIndex, rowIndex);
34144     },
34145
34146     calcColumnWidth : function(colIndex, maxRowsToMeasure){
34147         var maxWidth = 0;
34148         if(this.grid.autoSizeHeaders){
34149             var h = this.getHeaderCellMeasure(colIndex);
34150             maxWidth = Math.max(maxWidth, h.scrollWidth);
34151         }
34152         var tb, index;
34153         if(this.cm.isLocked(colIndex)){
34154             tb = this.getLockedTable();
34155             index = colIndex;
34156         }else{
34157             tb = this.getBodyTable();
34158             index = colIndex - this.cm.getLockedCount();
34159         }
34160         if(tb && tb.rows){
34161             var rows = tb.rows;
34162             var stopIndex = Math.min(maxRowsToMeasure || rows.length, rows.length);
34163             for(var i = 0; i < stopIndex; i++){
34164                 var cell = rows[i].childNodes[index].firstChild;
34165                 maxWidth = Math.max(maxWidth, cell.scrollWidth);
34166             }
34167         }
34168         return maxWidth + /*margin for error in IE*/ 5;
34169     },
34170     /**
34171      * Autofit a column to its content.
34172      * @param {Number} colIndex
34173      * @param {Boolean} forceMinSize true to force the column to go smaller if possible
34174      */
34175      autoSizeColumn : function(colIndex, forceMinSize, suppressEvent){
34176          if(this.cm.isHidden(colIndex)){
34177              return; // can't calc a hidden column
34178          }
34179         if(forceMinSize){
34180             var cid = this.cm.getColumnId(colIndex);
34181             this.css.updateRule(this.colSelector +this.idToCssName( cid), "width", this.grid.minColumnWidth + "px");
34182            if(this.grid.autoSizeHeaders){
34183                this.css.updateRule(this.hdSelector + this.idToCssName(cid), "width", this.grid.minColumnWidth + "px");
34184            }
34185         }
34186         var newWidth = this.calcColumnWidth(colIndex);
34187         this.cm.setColumnWidth(colIndex,
34188             Math.max(this.grid.minColumnWidth, newWidth), suppressEvent);
34189         if(!suppressEvent){
34190             this.grid.fireEvent("columnresize", colIndex, newWidth);
34191         }
34192     },
34193
34194     /**
34195      * Autofits all columns to their content and then expands to fit any extra space in the grid
34196      */
34197      autoSizeColumns : function(){
34198         var cm = this.grid.colModel;
34199         var colCount = cm.getColumnCount();
34200         for(var i = 0; i < colCount; i++){
34201             this.autoSizeColumn(i, true, true);
34202         }
34203         if(cm.getTotalWidth() < this.scroller.dom.clientWidth){
34204             this.fitColumns();
34205         }else{
34206             this.updateColumns();
34207             this.layout();
34208         }
34209     },
34210
34211     /**
34212      * Autofits all columns to the grid's width proportionate with their current size
34213      * @param {Boolean} reserveScrollSpace Reserve space for a scrollbar
34214      */
34215     fitColumns : function(reserveScrollSpace){
34216         var cm = this.grid.colModel;
34217         var colCount = cm.getColumnCount();
34218         var cols = [];
34219         var width = 0;
34220         var i, w;
34221         for (i = 0; i < colCount; i++){
34222             if(!cm.isHidden(i) && !cm.isFixed(i)){
34223                 w = cm.getColumnWidth(i);
34224                 cols.push(i);
34225                 cols.push(w);
34226                 width += w;
34227             }
34228         }
34229         var avail = Math.min(this.scroller.dom.clientWidth, this.el.getWidth());
34230         if(reserveScrollSpace){
34231             avail -= 17;
34232         }
34233         var frac = (avail - cm.getTotalWidth())/width;
34234         while (cols.length){
34235             w = cols.pop();
34236             i = cols.pop();
34237             cm.setColumnWidth(i, Math.floor(w + w*frac), true);
34238         }
34239         this.updateColumns();
34240         this.layout();
34241     },
34242
34243     onRowSelect : function(rowIndex){
34244         var row = this.getRowComposite(rowIndex);
34245         row.addClass("x-grid-row-selected");
34246     },
34247
34248     onRowDeselect : function(rowIndex){
34249         var row = this.getRowComposite(rowIndex);
34250         row.removeClass("x-grid-row-selected");
34251     },
34252
34253     onCellSelect : function(row, col){
34254         var cell = this.getCell(row, col);
34255         if(cell){
34256             Roo.fly(cell).addClass("x-grid-cell-selected");
34257         }
34258     },
34259
34260     onCellDeselect : function(row, col){
34261         var cell = this.getCell(row, col);
34262         if(cell){
34263             Roo.fly(cell).removeClass("x-grid-cell-selected");
34264         }
34265     },
34266
34267     updateHeaderSortState : function(){
34268         
34269         // sort state can be single { field: xxx, direction : yyy}
34270         // or   { xxx=>ASC , yyy : DESC ..... }
34271         
34272         var mstate = {};
34273         if (!this.ds.multiSort) { 
34274             var state = this.ds.getSortState();
34275             if(!state){
34276                 return;
34277             }
34278             mstate[state.field] = state.direction;
34279             // FIXME... - this is not used here.. but might be elsewhere..
34280             this.sortState = state;
34281             
34282         } else {
34283             mstate = this.ds.sortToggle;
34284         }
34285         //remove existing sort classes..
34286         
34287         var sc = this.sortClasses;
34288         var hds = this.el.select(this.headerSelector).removeClass(sc);
34289         
34290         for(var f in mstate) {
34291         
34292             var sortColumn = this.cm.findColumnIndex(f);
34293             
34294             if(sortColumn != -1){
34295                 var sortDir = mstate[f];        
34296                 hds.item(sortColumn).addClass(sc[sortDir == "DESC" ? 1 : 0]);
34297             }
34298         }
34299         
34300          
34301         
34302     },
34303
34304
34305     handleHeaderClick : function(g, index,e){
34306         
34307         Roo.log("header click");
34308         
34309         if (Roo.isTouch) {
34310             // touch events on header are handled by context
34311             this.handleHdCtx(g,index,e);
34312             return;
34313         }
34314         
34315         
34316         if(this.headersDisabled){
34317             return;
34318         }
34319         var dm = g.dataSource, cm = g.colModel;
34320         if(!cm.isSortable(index)){
34321             return;
34322         }
34323         g.stopEditing();
34324         
34325         if (dm.multiSort) {
34326             // update the sortOrder
34327             var so = [];
34328             for(var i = 0; i < cm.config.length; i++ ) {
34329                 
34330                 if ((typeof(dm.sortToggle[cm.config[i].dataIndex]) == 'undefined') && (index != i)) {
34331                     continue; // dont' bother, it's not in sort list or being set.
34332                 }
34333                 
34334                 so.push(cm.config[i].dataIndex);
34335             };
34336             dm.sortOrder = so;
34337         }
34338         
34339         
34340         dm.sort(cm.getDataIndex(index));
34341     },
34342
34343
34344     destroy : function(){
34345         if(this.colMenu){
34346             this.colMenu.removeAll();
34347             Roo.menu.MenuMgr.unregister(this.colMenu);
34348             this.colMenu.getEl().remove();
34349             delete this.colMenu;
34350         }
34351         if(this.hmenu){
34352             this.hmenu.removeAll();
34353             Roo.menu.MenuMgr.unregister(this.hmenu);
34354             this.hmenu.getEl().remove();
34355             delete this.hmenu;
34356         }
34357         if(this.grid.enableColumnMove){
34358             var dds = Roo.dd.DDM.ids['gridHeader' + this.grid.getGridEl().id];
34359             if(dds){
34360                 for(var dd in dds){
34361                     if(!dds[dd].config.isTarget && dds[dd].dragElId){
34362                         var elid = dds[dd].dragElId;
34363                         dds[dd].unreg();
34364                         Roo.get(elid).remove();
34365                     } else if(dds[dd].config.isTarget){
34366                         dds[dd].proxyTop.remove();
34367                         dds[dd].proxyBottom.remove();
34368                         dds[dd].unreg();
34369                     }
34370                     if(Roo.dd.DDM.locationCache[dd]){
34371                         delete Roo.dd.DDM.locationCache[dd];
34372                     }
34373                 }
34374                 delete Roo.dd.DDM.ids['gridHeader' + this.grid.getGridEl().id];
34375             }
34376         }
34377         Roo.util.CSS.removeStyleSheet(this.idToCssName(this.grid.id) + '-cssrules');
34378         this.bind(null, null);
34379         Roo.EventManager.removeResizeListener(this.onWindowResize, this);
34380     },
34381
34382     handleLockChange : function(){
34383         this.refresh(true);
34384     },
34385
34386     onDenyColumnLock : function(){
34387
34388     },
34389
34390     onDenyColumnHide : function(){
34391
34392     },
34393
34394     handleHdMenuClick : function(item){
34395         var index = this.hdCtxIndex;
34396         var cm = this.cm, ds = this.ds;
34397         switch(item.id){
34398             case "asc":
34399                 ds.sort(cm.getDataIndex(index), "ASC");
34400                 break;
34401             case "desc":
34402                 ds.sort(cm.getDataIndex(index), "DESC");
34403                 break;
34404             case "lock":
34405                 var lc = cm.getLockedCount();
34406                 if(cm.getColumnCount(true) <= lc+1){
34407                     this.onDenyColumnLock();
34408                     return;
34409                 }
34410                 if(lc != index){
34411                     cm.setLocked(index, true, true);
34412                     cm.moveColumn(index, lc);
34413                     this.grid.fireEvent("columnmove", index, lc);
34414                 }else{
34415                     cm.setLocked(index, true);
34416                 }
34417             break;
34418             case "unlock":
34419                 var lc = cm.getLockedCount();
34420                 if((lc-1) != index){
34421                     cm.setLocked(index, false, true);
34422                     cm.moveColumn(index, lc-1);
34423                     this.grid.fireEvent("columnmove", index, lc-1);
34424                 }else{
34425                     cm.setLocked(index, false);
34426                 }
34427             break;
34428             case 'wider': // used to expand cols on touch..
34429             case 'narrow':
34430                 var cw = cm.getColumnWidth(index);
34431                 cw += (item.id == 'wider' ? 1 : -1) * 50;
34432                 cw = Math.max(0, cw);
34433                 cw = Math.min(cw,4000);
34434                 cm.setColumnWidth(index, cw);
34435                 break;
34436                 
34437             default:
34438                 index = cm.getIndexById(item.id.substr(4));
34439                 if(index != -1){
34440                     if(item.checked && cm.getColumnCount(true) <= 1){
34441                         this.onDenyColumnHide();
34442                         return false;
34443                     }
34444                     cm.setHidden(index, item.checked);
34445                 }
34446         }
34447         return true;
34448     },
34449
34450     beforeColMenuShow : function(){
34451         var cm = this.cm,  colCount = cm.getColumnCount();
34452         this.colMenu.removeAll();
34453         for(var i = 0; i < colCount; i++){
34454             this.colMenu.add(new Roo.menu.CheckItem({
34455                 id: "col-"+cm.getColumnId(i),
34456                 text: cm.getColumnHeader(i),
34457                 checked: !cm.isHidden(i),
34458                 hideOnClick:false
34459             }));
34460         }
34461     },
34462
34463     handleHdCtx : function(g, index, e){
34464         e.stopEvent();
34465         var hd = this.getHeaderCell(index);
34466         this.hdCtxIndex = index;
34467         var ms = this.hmenu.items, cm = this.cm;
34468         ms.get("asc").setDisabled(!cm.isSortable(index));
34469         ms.get("desc").setDisabled(!cm.isSortable(index));
34470         if(this.grid.enableColLock !== false){
34471             ms.get("lock").setDisabled(cm.isLocked(index));
34472             ms.get("unlock").setDisabled(!cm.isLocked(index));
34473         }
34474         this.hmenu.show(hd, "tl-bl");
34475     },
34476
34477     handleHdOver : function(e){
34478         var hd = this.findHeaderCell(e.getTarget());
34479         if(hd && !this.headersDisabled){
34480             if(this.grid.colModel.isSortable(this.getCellIndex(hd))){
34481                this.fly(hd).addClass("x-grid-hd-over");
34482             }
34483         }
34484     },
34485
34486     handleHdOut : function(e){
34487         var hd = this.findHeaderCell(e.getTarget());
34488         if(hd){
34489             this.fly(hd).removeClass("x-grid-hd-over");
34490         }
34491     },
34492
34493     handleSplitDblClick : function(e, t){
34494         var i = this.getCellIndex(t);
34495         if(this.grid.enableColumnResize !== false && this.cm.isResizable(i) && !this.cm.isFixed(i)){
34496             this.autoSizeColumn(i, true);
34497             this.layout();
34498         }
34499     },
34500
34501     render : function(){
34502
34503         var cm = this.cm;
34504         var colCount = cm.getColumnCount();
34505
34506         if(this.grid.monitorWindowResize === true){
34507             Roo.EventManager.onWindowResize(this.onWindowResize, this, true);
34508         }
34509         var header = this.renderHeaders();
34510         var body = this.templates.body.apply({rows:""});
34511         var html = this.templates.master.apply({
34512             lockedBody: body,
34513             body: body,
34514             lockedHeader: header[0],
34515             header: header[1]
34516         });
34517
34518         //this.updateColumns();
34519
34520         this.grid.getGridEl().dom.innerHTML = html;
34521
34522         this.initElements();
34523         
34524         // a kludge to fix the random scolling effect in webkit
34525         this.el.on("scroll", function() {
34526             this.el.dom.scrollTop=0; // hopefully not recursive..
34527         },this);
34528
34529         this.scroller.on("scroll", this.handleScroll, this);
34530         this.lockedBody.on("mousewheel", this.handleWheel, this);
34531         this.mainBody.on("mousewheel", this.handleWheel, this);
34532
34533         this.mainHd.on("mouseover", this.handleHdOver, this);
34534         this.mainHd.on("mouseout", this.handleHdOut, this);
34535         this.mainHd.on("dblclick", this.handleSplitDblClick, this,
34536                 {delegate: "."+this.splitClass});
34537
34538         this.lockedHd.on("mouseover", this.handleHdOver, this);
34539         this.lockedHd.on("mouseout", this.handleHdOut, this);
34540         this.lockedHd.on("dblclick", this.handleSplitDblClick, this,
34541                 {delegate: "."+this.splitClass});
34542
34543         if(this.grid.enableColumnResize !== false && Roo.grid.SplitDragZone){
34544             new Roo.grid.SplitDragZone(this.grid, this.lockedHd.dom, this.mainHd.dom);
34545         }
34546
34547         this.updateSplitters();
34548
34549         if(this.grid.enableColumnMove && Roo.grid.HeaderDragZone){
34550             new Roo.grid.HeaderDragZone(this.grid, this.lockedHd.dom, this.mainHd.dom);
34551             new Roo.grid.HeaderDropZone(this.grid, this.lockedHd.dom, this.mainHd.dom);
34552         }
34553
34554         if(this.grid.enableCtxMenu !== false && Roo.menu.Menu){
34555             this.hmenu = new Roo.menu.Menu({id: this.grid.id + "-hctx"});
34556             this.hmenu.add(
34557                 {id:"asc", text: this.sortAscText, cls: "xg-hmenu-sort-asc"},
34558                 {id:"desc", text: this.sortDescText, cls: "xg-hmenu-sort-desc"}
34559             );
34560             if(this.grid.enableColLock !== false){
34561                 this.hmenu.add('-',
34562                     {id:"lock", text: this.lockText, cls: "xg-hmenu-lock"},
34563                     {id:"unlock", text: this.unlockText, cls: "xg-hmenu-unlock"}
34564                 );
34565             }
34566             if (Roo.isTouch) {
34567                  this.hmenu.add('-',
34568                     {id:"wider", text: this.columnsWiderText},
34569                     {id:"narrow", text: this.columnsNarrowText }
34570                 );
34571                 
34572                  
34573             }
34574             
34575             if(this.grid.enableColumnHide !== false){
34576
34577                 this.colMenu = new Roo.menu.Menu({id:this.grid.id + "-hcols-menu"});
34578                 this.colMenu.on("beforeshow", this.beforeColMenuShow, this);
34579                 this.colMenu.on("itemclick", this.handleHdMenuClick, this);
34580
34581                 this.hmenu.add('-',
34582                     {id:"columns", text: this.columnsText, menu: this.colMenu}
34583                 );
34584             }
34585             this.hmenu.on("itemclick", this.handleHdMenuClick, this);
34586
34587             this.grid.on("headercontextmenu", this.handleHdCtx, this);
34588         }
34589
34590         if((this.grid.enableDragDrop || this.grid.enableDrag) && Roo.grid.GridDragZone){
34591             this.dd = new Roo.grid.GridDragZone(this.grid, {
34592                 ddGroup : this.grid.ddGroup || 'GridDD'
34593             });
34594             
34595         }
34596
34597         /*
34598         for(var i = 0; i < colCount; i++){
34599             if(cm.isHidden(i)){
34600                 this.hideColumn(i);
34601             }
34602             if(cm.config[i].align){
34603                 this.css.updateRule(this.colSelector + i, "textAlign", cm.config[i].align);
34604                 this.css.updateRule(this.hdSelector + i, "textAlign", cm.config[i].align);
34605             }
34606         }*/
34607         
34608         this.updateHeaderSortState();
34609
34610         this.beforeInitialResize();
34611         this.layout(true);
34612
34613         // two part rendering gives faster view to the user
34614         this.renderPhase2.defer(1, this);
34615     },
34616
34617     renderPhase2 : function(){
34618         // render the rows now
34619         this.refresh();
34620         if(this.grid.autoSizeColumns){
34621             this.autoSizeColumns();
34622         }
34623     },
34624
34625     beforeInitialResize : function(){
34626
34627     },
34628
34629     onColumnSplitterMoved : function(i, w){
34630         this.userResized = true;
34631         var cm = this.grid.colModel;
34632         cm.setColumnWidth(i, w, true);
34633         var cid = cm.getColumnId(i);
34634         this.css.updateRule(this.colSelector + this.idToCssName(cid), "width", (w-this.borderWidth) + "px");
34635         this.css.updateRule(this.hdSelector + this.idToCssName(cid), "width", (w-this.borderWidth) + "px");
34636         this.updateSplitters();
34637         this.layout();
34638         this.grid.fireEvent("columnresize", i, w);
34639     },
34640
34641     syncRowHeights : function(startIndex, endIndex){
34642         if(this.grid.enableRowHeightSync === true && this.cm.getLockedCount() > 0){
34643             startIndex = startIndex || 0;
34644             var mrows = this.getBodyTable().rows;
34645             var lrows = this.getLockedTable().rows;
34646             var len = mrows.length-1;
34647             endIndex = Math.min(endIndex || len, len);
34648             for(var i = startIndex; i <= endIndex; i++){
34649                 var m = mrows[i], l = lrows[i];
34650                 var h = Math.max(m.offsetHeight, l.offsetHeight);
34651                 m.style.height = l.style.height = h + "px";
34652             }
34653         }
34654     },
34655
34656     layout : function(initialRender, is2ndPass){
34657         var g = this.grid;
34658         var auto = g.autoHeight;
34659         var scrollOffset = 16;
34660         var c = g.getGridEl(), cm = this.cm,
34661                 expandCol = g.autoExpandColumn,
34662                 gv = this;
34663         //c.beginMeasure();
34664
34665         if(!c.dom.offsetWidth){ // display:none?
34666             if(initialRender){
34667                 this.lockedWrap.show();
34668                 this.mainWrap.show();
34669             }
34670             return;
34671         }
34672
34673         var hasLock = this.cm.isLocked(0);
34674
34675         var tbh = this.headerPanel.getHeight();
34676         var bbh = this.footerPanel.getHeight();
34677
34678         if(auto){
34679             var ch = this.getBodyTable().offsetHeight + tbh + bbh + this.mainHd.getHeight();
34680             var newHeight = ch + c.getBorderWidth("tb");
34681             if(g.maxHeight){
34682                 newHeight = Math.min(g.maxHeight, newHeight);
34683             }
34684             c.setHeight(newHeight);
34685         }
34686
34687         if(g.autoWidth){
34688             c.setWidth(cm.getTotalWidth()+c.getBorderWidth('lr'));
34689         }
34690
34691         var s = this.scroller;
34692
34693         var csize = c.getSize(true);
34694
34695         this.el.setSize(csize.width, csize.height);
34696
34697         this.headerPanel.setWidth(csize.width);
34698         this.footerPanel.setWidth(csize.width);
34699
34700         var hdHeight = this.mainHd.getHeight();
34701         var vw = csize.width;
34702         var vh = csize.height - (tbh + bbh);
34703
34704         s.setSize(vw, vh);
34705
34706         var bt = this.getBodyTable();
34707         
34708         if(cm.getLockedCount() == cm.config.length){
34709             bt = this.getLockedTable();
34710         }
34711         
34712         var ltWidth = hasLock ?
34713                       Math.max(this.getLockedTable().offsetWidth, this.lockedHd.dom.firstChild.offsetWidth) : 0;
34714
34715         var scrollHeight = bt.offsetHeight;
34716         var scrollWidth = ltWidth + bt.offsetWidth;
34717         var vscroll = false, hscroll = false;
34718
34719         this.scrollSizer.setSize(scrollWidth, scrollHeight+hdHeight);
34720
34721         var lw = this.lockedWrap, mw = this.mainWrap;
34722         var lb = this.lockedBody, mb = this.mainBody;
34723
34724         setTimeout(function(){
34725             var t = s.dom.offsetTop;
34726             var w = s.dom.clientWidth,
34727                 h = s.dom.clientHeight;
34728
34729             lw.setTop(t);
34730             lw.setSize(ltWidth, h);
34731
34732             mw.setLeftTop(ltWidth, t);
34733             mw.setSize(w-ltWidth, h);
34734
34735             lb.setHeight(h-hdHeight);
34736             mb.setHeight(h-hdHeight);
34737
34738             if(is2ndPass !== true && !gv.userResized && expandCol){
34739                 // high speed resize without full column calculation
34740                 
34741                 var ci = cm.getIndexById(expandCol);
34742                 if (ci < 0) {
34743                     ci = cm.findColumnIndex(expandCol);
34744                 }
34745                 ci = Math.max(0, ci); // make sure it's got at least the first col.
34746                 var expandId = cm.getColumnId(ci);
34747                 var  tw = cm.getTotalWidth(false);
34748                 var currentWidth = cm.getColumnWidth(ci);
34749                 var cw = Math.min(Math.max(((w-tw)+currentWidth-2)-/*scrollbar*/(w <= s.dom.offsetWidth ? 0 : 18), g.autoExpandMin), g.autoExpandMax);
34750                 if(currentWidth != cw){
34751                     cm.setColumnWidth(ci, cw, true);
34752                     gv.css.updateRule(gv.colSelector+gv.idToCssName(expandId), "width", (cw - gv.borderWidth) + "px");
34753                     gv.css.updateRule(gv.hdSelector+gv.idToCssName(expandId), "width", (cw - gv.borderWidth) + "px");
34754                     gv.updateSplitters();
34755                     gv.layout(false, true);
34756                 }
34757             }
34758
34759             if(initialRender){
34760                 lw.show();
34761                 mw.show();
34762             }
34763             //c.endMeasure();
34764         }, 10);
34765     },
34766
34767     onWindowResize : function(){
34768         if(!this.grid.monitorWindowResize || this.grid.autoHeight){
34769             return;
34770         }
34771         this.layout();
34772     },
34773
34774     appendFooter : function(parentEl){
34775         return null;
34776     },
34777
34778     sortAscText : "Sort Ascending",
34779     sortDescText : "Sort Descending",
34780     lockText : "Lock Column",
34781     unlockText : "Unlock Column",
34782     columnsText : "Columns",
34783  
34784     columnsWiderText : "Wider",
34785     columnsNarrowText : "Thinner"
34786 });
34787
34788
34789 Roo.grid.GridView.ColumnDragZone = function(grid, hd){
34790     Roo.grid.GridView.ColumnDragZone.superclass.constructor.call(this, grid, hd, null);
34791     this.proxy.el.addClass('x-grid3-col-dd');
34792 };
34793
34794 Roo.extend(Roo.grid.GridView.ColumnDragZone, Roo.grid.HeaderDragZone, {
34795     handleMouseDown : function(e){
34796
34797     },
34798
34799     callHandleMouseDown : function(e){
34800         Roo.grid.GridView.ColumnDragZone.superclass.handleMouseDown.call(this, e);
34801     }
34802 });
34803 /*
34804  * Based on:
34805  * Ext JS Library 1.1.1
34806  * Copyright(c) 2006-2007, Ext JS, LLC.
34807  *
34808  * Originally Released Under LGPL - original licence link has changed is not relivant.
34809  *
34810  * Fork - LGPL
34811  * <script type="text/javascript">
34812  */
34813  
34814 // private
34815 // This is a support class used internally by the Grid components
34816 Roo.grid.SplitDragZone = function(grid, hd, hd2){
34817     this.grid = grid;
34818     this.view = grid.getView();
34819     this.proxy = this.view.resizeProxy;
34820     Roo.grid.SplitDragZone.superclass.constructor.call(this, hd,
34821         "gridSplitters" + this.grid.getGridEl().id, {
34822         dragElId : Roo.id(this.proxy.dom), resizeFrame:false
34823     });
34824     this.setHandleElId(Roo.id(hd));
34825     this.setOuterHandleElId(Roo.id(hd2));
34826     this.scroll = false;
34827 };
34828 Roo.extend(Roo.grid.SplitDragZone, Roo.dd.DDProxy, {
34829     fly: Roo.Element.fly,
34830
34831     b4StartDrag : function(x, y){
34832         this.view.headersDisabled = true;
34833         this.proxy.setHeight(this.view.mainWrap.getHeight());
34834         var w = this.cm.getColumnWidth(this.cellIndex);
34835         var minw = Math.max(w-this.grid.minColumnWidth, 0);
34836         this.resetConstraints();
34837         this.setXConstraint(minw, 1000);
34838         this.setYConstraint(0, 0);
34839         this.minX = x - minw;
34840         this.maxX = x + 1000;
34841         this.startPos = x;
34842         Roo.dd.DDProxy.prototype.b4StartDrag.call(this, x, y);
34843     },
34844
34845
34846     handleMouseDown : function(e){
34847         ev = Roo.EventObject.setEvent(e);
34848         var t = this.fly(ev.getTarget());
34849         if(t.hasClass("x-grid-split")){
34850             this.cellIndex = this.view.getCellIndex(t.dom);
34851             this.split = t.dom;
34852             this.cm = this.grid.colModel;
34853             if(this.cm.isResizable(this.cellIndex) && !this.cm.isFixed(this.cellIndex)){
34854                 Roo.grid.SplitDragZone.superclass.handleMouseDown.apply(this, arguments);
34855             }
34856         }
34857     },
34858
34859     endDrag : function(e){
34860         this.view.headersDisabled = false;
34861         var endX = Math.max(this.minX, Roo.lib.Event.getPageX(e));
34862         var diff = endX - this.startPos;
34863         this.view.onColumnSplitterMoved(this.cellIndex, this.cm.getColumnWidth(this.cellIndex)+diff);
34864     },
34865
34866     autoOffset : function(){
34867         this.setDelta(0,0);
34868     }
34869 });/*
34870  * Based on:
34871  * Ext JS Library 1.1.1
34872  * Copyright(c) 2006-2007, Ext JS, LLC.
34873  *
34874  * Originally Released Under LGPL - original licence link has changed is not relivant.
34875  *
34876  * Fork - LGPL
34877  * <script type="text/javascript">
34878  */
34879  
34880 // private
34881 // This is a support class used internally by the Grid components
34882 Roo.grid.GridDragZone = function(grid, config){
34883     this.view = grid.getView();
34884     Roo.grid.GridDragZone.superclass.constructor.call(this, this.view.mainBody.dom, config);
34885     if(this.view.lockedBody){
34886         this.setHandleElId(Roo.id(this.view.mainBody.dom));
34887         this.setOuterHandleElId(Roo.id(this.view.lockedBody.dom));
34888     }
34889     this.scroll = false;
34890     this.grid = grid;
34891     this.ddel = document.createElement('div');
34892     this.ddel.className = 'x-grid-dd-wrap';
34893 };
34894
34895 Roo.extend(Roo.grid.GridDragZone, Roo.dd.DragZone, {
34896     ddGroup : "GridDD",
34897
34898     getDragData : function(e){
34899         var t = Roo.lib.Event.getTarget(e);
34900         var rowIndex = this.view.findRowIndex(t);
34901         var sm = this.grid.selModel;
34902             
34903         //Roo.log(rowIndex);
34904         
34905         if (sm.getSelectedCell) {
34906             // cell selection..
34907             if (!sm.getSelectedCell()) {
34908                 return false;
34909             }
34910             if (rowIndex != sm.getSelectedCell()[0]) {
34911                 return false;
34912             }
34913         
34914         }
34915         
34916         if(rowIndex !== false){
34917             
34918             // if editorgrid.. 
34919             
34920             
34921             //Roo.log([ sm.getSelectedCell() ? sm.getSelectedCell()[0] : 'NO' , rowIndex ]);
34922                
34923             //if(!sm.isSelected(rowIndex) || e.hasModifier()){
34924               //  
34925             //}
34926             if (e.hasModifier()){
34927                 sm.handleMouseDown(e, t); // non modifier buttons are handled by row select.
34928             }
34929             
34930             Roo.log("getDragData");
34931             
34932             return {
34933                 grid: this.grid,
34934                 ddel: this.ddel,
34935                 rowIndex: rowIndex,
34936                 selections:sm.getSelections ? sm.getSelections() : (
34937                     sm.getSelectedCell() ? [ this.grid.ds.getAt(sm.getSelectedCell()[0]) ] : []
34938                 )
34939             };
34940         }
34941         return false;
34942     },
34943
34944     onInitDrag : function(e){
34945         var data = this.dragData;
34946         this.ddel.innerHTML = this.grid.getDragDropText();
34947         this.proxy.update(this.ddel);
34948         // fire start drag?
34949     },
34950
34951     afterRepair : function(){
34952         this.dragging = false;
34953     },
34954
34955     getRepairXY : function(e, data){
34956         return false;
34957     },
34958
34959     onEndDrag : function(data, e){
34960         // fire end drag?
34961     },
34962
34963     onValidDrop : function(dd, e, id){
34964         // fire drag drop?
34965         this.hideProxy();
34966     },
34967
34968     beforeInvalidDrop : function(e, id){
34969
34970     }
34971 });/*
34972  * Based on:
34973  * Ext JS Library 1.1.1
34974  * Copyright(c) 2006-2007, Ext JS, LLC.
34975  *
34976  * Originally Released Under LGPL - original licence link has changed is not relivant.
34977  *
34978  * Fork - LGPL
34979  * <script type="text/javascript">
34980  */
34981  
34982
34983 /**
34984  * @class Roo.grid.ColumnModel
34985  * @extends Roo.util.Observable
34986  * This is the default implementation of a ColumnModel used by the Grid. It defines
34987  * the columns in the grid.
34988  * <br>Usage:<br>
34989  <pre><code>
34990  var colModel = new Roo.grid.ColumnModel([
34991         {header: "Ticker", width: 60, sortable: true, locked: true},
34992         {header: "Company Name", width: 150, sortable: true},
34993         {header: "Market Cap.", width: 100, sortable: true},
34994         {header: "$ Sales", width: 100, sortable: true, renderer: money},
34995         {header: "Employees", width: 100, sortable: true, resizable: false}
34996  ]);
34997  </code></pre>
34998  * <p>
34999  
35000  * The config options listed for this class are options which may appear in each
35001  * individual column definition.
35002  * <br/>RooJS Fix - column id's are not sequential but use Roo.id() - fixes bugs with layouts.
35003  * @constructor
35004  * @param {Object} config An Array of column config objects. See this class's
35005  * config objects for details.
35006 */
35007 Roo.grid.ColumnModel = function(config){
35008         /**
35009      * The config passed into the constructor
35010      */
35011     this.config = config;
35012     this.lookup = {};
35013
35014     // if no id, create one
35015     // if the column does not have a dataIndex mapping,
35016     // map it to the order it is in the config
35017     for(var i = 0, len = config.length; i < len; i++){
35018         var c = config[i];
35019         if(typeof c.dataIndex == "undefined"){
35020             c.dataIndex = i;
35021         }
35022         if(typeof c.renderer == "string"){
35023             c.renderer = Roo.util.Format[c.renderer];
35024         }
35025         if(typeof c.id == "undefined"){
35026             c.id = Roo.id();
35027         }
35028         if(c.editor && c.editor.xtype){
35029             c.editor  = Roo.factory(c.editor, Roo.grid);
35030         }
35031         if(c.editor && c.editor.isFormField){
35032             c.editor = new Roo.grid.GridEditor(c.editor);
35033         }
35034         this.lookup[c.id] = c;
35035     }
35036
35037     /**
35038      * The width of columns which have no width specified (defaults to 100)
35039      * @type Number
35040      */
35041     this.defaultWidth = 100;
35042
35043     /**
35044      * Default sortable of columns which have no sortable specified (defaults to false)
35045      * @type Boolean
35046      */
35047     this.defaultSortable = false;
35048
35049     this.addEvents({
35050         /**
35051              * @event widthchange
35052              * Fires when the width of a column changes.
35053              * @param {ColumnModel} this
35054              * @param {Number} columnIndex The column index
35055              * @param {Number} newWidth The new width
35056              */
35057             "widthchange": true,
35058         /**
35059              * @event headerchange
35060              * Fires when the text of a header changes.
35061              * @param {ColumnModel} this
35062              * @param {Number} columnIndex The column index
35063              * @param {Number} newText The new header text
35064              */
35065             "headerchange": true,
35066         /**
35067              * @event hiddenchange
35068              * Fires when a column is hidden or "unhidden".
35069              * @param {ColumnModel} this
35070              * @param {Number} columnIndex The column index
35071              * @param {Boolean} hidden true if hidden, false otherwise
35072              */
35073             "hiddenchange": true,
35074             /**
35075          * @event columnmoved
35076          * Fires when a column is moved.
35077          * @param {ColumnModel} this
35078          * @param {Number} oldIndex
35079          * @param {Number} newIndex
35080          */
35081         "columnmoved" : true,
35082         /**
35083          * @event columlockchange
35084          * Fires when a column's locked state is changed
35085          * @param {ColumnModel} this
35086          * @param {Number} colIndex
35087          * @param {Boolean} locked true if locked
35088          */
35089         "columnlockchange" : true
35090     });
35091     Roo.grid.ColumnModel.superclass.constructor.call(this);
35092 };
35093 Roo.extend(Roo.grid.ColumnModel, Roo.util.Observable, {
35094     /**
35095      * @cfg {String} header The header text to display in the Grid view.
35096      */
35097     /**
35098      * @cfg {String} dataIndex (Optional) The name of the field in the grid's {@link Roo.data.Store}'s
35099      * {@link Roo.data.Record} definition from which to draw the column's value. If not
35100      * specified, the column's index is used as an index into the Record's data Array.
35101      */
35102     /**
35103      * @cfg {Number} width (Optional) The initial width in pixels of the column. Using this
35104      * instead of {@link Roo.grid.Grid#autoSizeColumns} is more efficient.
35105      */
35106     /**
35107      * @cfg {Boolean} sortable (Optional) True if sorting is to be allowed on this column.
35108      * Defaults to the value of the {@link #defaultSortable} property.
35109      * Whether local/remote sorting is used is specified in {@link Roo.data.Store#remoteSort}.
35110      */
35111     /**
35112      * @cfg {Boolean} locked (Optional) True to lock the column in place while scrolling the Grid.  Defaults to false.
35113      */
35114     /**
35115      * @cfg {Boolean} fixed (Optional) True if the column width cannot be changed.  Defaults to false.
35116      */
35117     /**
35118      * @cfg {Boolean} resizable (Optional) False to disable column resizing. Defaults to true.
35119      */
35120     /**
35121      * @cfg {Boolean} hidden (Optional) True to hide the column. Defaults to false.
35122      */
35123     /**
35124      * @cfg {Function} renderer (Optional) A function used to generate HTML markup for a cell
35125      * given the cell's data value. See {@link #setRenderer}. If not specified, the
35126      * default renderer returns the escaped data value. If an object is returned (bootstrap only)
35127      * then it is treated as a Roo Component object instance, and it is rendered after the initial row is rendered
35128      */
35129        /**
35130      * @cfg {Roo.grid.GridEditor} editor (Optional) For grid editors - returns the grid editor 
35131      */
35132     /**
35133      * @cfg {String} align (Optional) Set the CSS text-align property of the column.  Defaults to undefined.
35134      */
35135     /**
35136      * @cfg {String} valign (Optional) Set the CSS vertical-align property of the column (eg. middle, top, bottom etc).  Defaults to undefined.
35137      */
35138     /**
35139      * @cfg {String} cursor (Optional)
35140      */
35141     /**
35142      * @cfg {String} tooltip (Optional)
35143      */
35144     /**
35145      * @cfg {Number} xs (Optional)
35146      */
35147     /**
35148      * @cfg {Number} sm (Optional)
35149      */
35150     /**
35151      * @cfg {Number} md (Optional)
35152      */
35153     /**
35154      * @cfg {Number} lg (Optional)
35155      */
35156     /**
35157      * Returns the id of the column at the specified index.
35158      * @param {Number} index The column index
35159      * @return {String} the id
35160      */
35161     getColumnId : function(index){
35162         return this.config[index].id;
35163     },
35164
35165     /**
35166      * Returns the column for a specified id.
35167      * @param {String} id The column id
35168      * @return {Object} the column
35169      */
35170     getColumnById : function(id){
35171         return this.lookup[id];
35172     },
35173
35174     
35175     /**
35176      * Returns the column for a specified dataIndex.
35177      * @param {String} dataIndex The column dataIndex
35178      * @return {Object|Boolean} the column or false if not found
35179      */
35180     getColumnByDataIndex: function(dataIndex){
35181         var index = this.findColumnIndex(dataIndex);
35182         return index > -1 ? this.config[index] : false;
35183     },
35184     
35185     /**
35186      * Returns the index for a specified column id.
35187      * @param {String} id The column id
35188      * @return {Number} the index, or -1 if not found
35189      */
35190     getIndexById : function(id){
35191         for(var i = 0, len = this.config.length; i < len; i++){
35192             if(this.config[i].id == id){
35193                 return i;
35194             }
35195         }
35196         return -1;
35197     },
35198     
35199     /**
35200      * Returns the index for a specified column dataIndex.
35201      * @param {String} dataIndex The column dataIndex
35202      * @return {Number} the index, or -1 if not found
35203      */
35204     
35205     findColumnIndex : function(dataIndex){
35206         for(var i = 0, len = this.config.length; i < len; i++){
35207             if(this.config[i].dataIndex == dataIndex){
35208                 return i;
35209             }
35210         }
35211         return -1;
35212     },
35213     
35214     
35215     moveColumn : function(oldIndex, newIndex){
35216         var c = this.config[oldIndex];
35217         this.config.splice(oldIndex, 1);
35218         this.config.splice(newIndex, 0, c);
35219         this.dataMap = null;
35220         this.fireEvent("columnmoved", this, oldIndex, newIndex);
35221     },
35222
35223     isLocked : function(colIndex){
35224         return this.config[colIndex].locked === true;
35225     },
35226
35227     setLocked : function(colIndex, value, suppressEvent){
35228         if(this.isLocked(colIndex) == value){
35229             return;
35230         }
35231         this.config[colIndex].locked = value;
35232         if(!suppressEvent){
35233             this.fireEvent("columnlockchange", this, colIndex, value);
35234         }
35235     },
35236
35237     getTotalLockedWidth : function(){
35238         var totalWidth = 0;
35239         for(var i = 0; i < this.config.length; i++){
35240             if(this.isLocked(i) && !this.isHidden(i)){
35241                 this.totalWidth += this.getColumnWidth(i);
35242             }
35243         }
35244         return totalWidth;
35245     },
35246
35247     getLockedCount : function(){
35248         for(var i = 0, len = this.config.length; i < len; i++){
35249             if(!this.isLocked(i)){
35250                 return i;
35251             }
35252         }
35253         
35254         return this.config.length;
35255     },
35256
35257     /**
35258      * Returns the number of columns.
35259      * @return {Number}
35260      */
35261     getColumnCount : function(visibleOnly){
35262         if(visibleOnly === true){
35263             var c = 0;
35264             for(var i = 0, len = this.config.length; i < len; i++){
35265                 if(!this.isHidden(i)){
35266                     c++;
35267                 }
35268             }
35269             return c;
35270         }
35271         return this.config.length;
35272     },
35273
35274     /**
35275      * Returns the column configs that return true by the passed function that is called with (columnConfig, index)
35276      * @param {Function} fn
35277      * @param {Object} scope (optional)
35278      * @return {Array} result
35279      */
35280     getColumnsBy : function(fn, scope){
35281         var r = [];
35282         for(var i = 0, len = this.config.length; i < len; i++){
35283             var c = this.config[i];
35284             if(fn.call(scope||this, c, i) === true){
35285                 r[r.length] = c;
35286             }
35287         }
35288         return r;
35289     },
35290
35291     /**
35292      * Returns true if the specified column is sortable.
35293      * @param {Number} col The column index
35294      * @return {Boolean}
35295      */
35296     isSortable : function(col){
35297         if(typeof this.config[col].sortable == "undefined"){
35298             return this.defaultSortable;
35299         }
35300         return this.config[col].sortable;
35301     },
35302
35303     /**
35304      * Returns the rendering (formatting) function defined for the column.
35305      * @param {Number} col The column index.
35306      * @return {Function} The function used to render the cell. See {@link #setRenderer}.
35307      */
35308     getRenderer : function(col){
35309         if(!this.config[col].renderer){
35310             return Roo.grid.ColumnModel.defaultRenderer;
35311         }
35312         return this.config[col].renderer;
35313     },
35314
35315     /**
35316      * Sets the rendering (formatting) function for a column.
35317      * @param {Number} col The column index
35318      * @param {Function} fn The function to use to process the cell's raw data
35319      * to return HTML markup for the grid view. The render function is called with
35320      * the following parameters:<ul>
35321      * <li>Data value.</li>
35322      * <li>Cell metadata. An object in which you may set the following attributes:<ul>
35323      * <li>css A CSS style string to apply to the table cell.</li>
35324      * <li>attr An HTML attribute definition string to apply to the data container element <i>within</i> the table cell.</li></ul>
35325      * <li>The {@link Roo.data.Record} from which the data was extracted.</li>
35326      * <li>Row index</li>
35327      * <li>Column index</li>
35328      * <li>The {@link Roo.data.Store} object from which the Record was extracted</li></ul>
35329      */
35330     setRenderer : function(col, fn){
35331         this.config[col].renderer = fn;
35332     },
35333
35334     /**
35335      * Returns the width for the specified column.
35336      * @param {Number} col The column index
35337      * @return {Number}
35338      */
35339     getColumnWidth : function(col){
35340         return this.config[col].width * 1 || this.defaultWidth;
35341     },
35342
35343     /**
35344      * Sets the width for a column.
35345      * @param {Number} col The column index
35346      * @param {Number} width The new width
35347      */
35348     setColumnWidth : function(col, width, suppressEvent){
35349         this.config[col].width = width;
35350         this.totalWidth = null;
35351         if(!suppressEvent){
35352              this.fireEvent("widthchange", this, col, width);
35353         }
35354     },
35355
35356     /**
35357      * Returns the total width of all columns.
35358      * @param {Boolean} includeHidden True to include hidden column widths
35359      * @return {Number}
35360      */
35361     getTotalWidth : function(includeHidden){
35362         if(!this.totalWidth){
35363             this.totalWidth = 0;
35364             for(var i = 0, len = this.config.length; i < len; i++){
35365                 if(includeHidden || !this.isHidden(i)){
35366                     this.totalWidth += this.getColumnWidth(i);
35367                 }
35368             }
35369         }
35370         return this.totalWidth;
35371     },
35372
35373     /**
35374      * Returns the header for the specified column.
35375      * @param {Number} col The column index
35376      * @return {String}
35377      */
35378     getColumnHeader : function(col){
35379         return this.config[col].header;
35380     },
35381
35382     /**
35383      * Sets the header for a column.
35384      * @param {Number} col The column index
35385      * @param {String} header The new header
35386      */
35387     setColumnHeader : function(col, header){
35388         this.config[col].header = header;
35389         this.fireEvent("headerchange", this, col, header);
35390     },
35391
35392     /**
35393      * Returns the tooltip for the specified column.
35394      * @param {Number} col The column index
35395      * @return {String}
35396      */
35397     getColumnTooltip : function(col){
35398             return this.config[col].tooltip;
35399     },
35400     /**
35401      * Sets the tooltip for a column.
35402      * @param {Number} col The column index
35403      * @param {String} tooltip The new tooltip
35404      */
35405     setColumnTooltip : function(col, tooltip){
35406             this.config[col].tooltip = tooltip;
35407     },
35408
35409     /**
35410      * Returns the dataIndex for the specified column.
35411      * @param {Number} col The column index
35412      * @return {Number}
35413      */
35414     getDataIndex : function(col){
35415         return this.config[col].dataIndex;
35416     },
35417
35418     /**
35419      * Sets the dataIndex for a column.
35420      * @param {Number} col The column index
35421      * @param {Number} dataIndex The new dataIndex
35422      */
35423     setDataIndex : function(col, dataIndex){
35424         this.config[col].dataIndex = dataIndex;
35425     },
35426
35427     
35428     
35429     /**
35430      * Returns true if the cell is editable.
35431      * @param {Number} colIndex The column index
35432      * @param {Number} rowIndex The row index - this is nto actually used..?
35433      * @return {Boolean}
35434      */
35435     isCellEditable : function(colIndex, rowIndex){
35436         return (this.config[colIndex].editable || (typeof this.config[colIndex].editable == "undefined" && this.config[colIndex].editor)) ? true : false;
35437     },
35438
35439     /**
35440      * Returns the editor defined for the cell/column.
35441      * return false or null to disable editing.
35442      * @param {Number} colIndex The column index
35443      * @param {Number} rowIndex The row index
35444      * @return {Object}
35445      */
35446     getCellEditor : function(colIndex, rowIndex){
35447         return this.config[colIndex].editor;
35448     },
35449
35450     /**
35451      * Sets if a column is editable.
35452      * @param {Number} col The column index
35453      * @param {Boolean} editable True if the column is editable
35454      */
35455     setEditable : function(col, editable){
35456         this.config[col].editable = editable;
35457     },
35458
35459
35460     /**
35461      * Returns true if the column is hidden.
35462      * @param {Number} colIndex The column index
35463      * @return {Boolean}
35464      */
35465     isHidden : function(colIndex){
35466         return this.config[colIndex].hidden;
35467     },
35468
35469
35470     /**
35471      * Returns true if the column width cannot be changed
35472      */
35473     isFixed : function(colIndex){
35474         return this.config[colIndex].fixed;
35475     },
35476
35477     /**
35478      * Returns true if the column can be resized
35479      * @return {Boolean}
35480      */
35481     isResizable : function(colIndex){
35482         return colIndex >= 0 && this.config[colIndex].resizable !== false && this.config[colIndex].fixed !== true;
35483     },
35484     /**
35485      * Sets if a column is hidden.
35486      * @param {Number} colIndex The column index
35487      * @param {Boolean} hidden True if the column is hidden
35488      */
35489     setHidden : function(colIndex, hidden){
35490         this.config[colIndex].hidden = hidden;
35491         this.totalWidth = null;
35492         this.fireEvent("hiddenchange", this, colIndex, hidden);
35493     },
35494
35495     /**
35496      * Sets the editor for a column.
35497      * @param {Number} col The column index
35498      * @param {Object} editor The editor object
35499      */
35500     setEditor : function(col, editor){
35501         this.config[col].editor = editor;
35502     }
35503 });
35504
35505 Roo.grid.ColumnModel.defaultRenderer = function(value)
35506 {
35507     if(typeof value == "object") {
35508         return value;
35509     }
35510         if(typeof value == "string" && value.length < 1){
35511             return "&#160;";
35512         }
35513     
35514         return String.format("{0}", value);
35515 };
35516
35517 // Alias for backwards compatibility
35518 Roo.grid.DefaultColumnModel = Roo.grid.ColumnModel;
35519 /*
35520  * Based on:
35521  * Ext JS Library 1.1.1
35522  * Copyright(c) 2006-2007, Ext JS, LLC.
35523  *
35524  * Originally Released Under LGPL - original licence link has changed is not relivant.
35525  *
35526  * Fork - LGPL
35527  * <script type="text/javascript">
35528  */
35529
35530 /**
35531  * @class Roo.grid.AbstractSelectionModel
35532  * @extends Roo.util.Observable
35533  * Abstract base class for grid SelectionModels.  It provides the interface that should be
35534  * implemented by descendant classes.  This class should not be directly instantiated.
35535  * @constructor
35536  */
35537 Roo.grid.AbstractSelectionModel = function(){
35538     this.locked = false;
35539     Roo.grid.AbstractSelectionModel.superclass.constructor.call(this);
35540 };
35541
35542 Roo.extend(Roo.grid.AbstractSelectionModel, Roo.util.Observable,  {
35543     /** @ignore Called by the grid automatically. Do not call directly. */
35544     init : function(grid){
35545         this.grid = grid;
35546         this.initEvents();
35547     },
35548
35549     /**
35550      * Locks the selections.
35551      */
35552     lock : function(){
35553         this.locked = true;
35554     },
35555
35556     /**
35557      * Unlocks the selections.
35558      */
35559     unlock : function(){
35560         this.locked = false;
35561     },
35562
35563     /**
35564      * Returns true if the selections are locked.
35565      * @return {Boolean}
35566      */
35567     isLocked : function(){
35568         return this.locked;
35569     }
35570 });/*
35571  * Based on:
35572  * Ext JS Library 1.1.1
35573  * Copyright(c) 2006-2007, Ext JS, LLC.
35574  *
35575  * Originally Released Under LGPL - original licence link has changed is not relivant.
35576  *
35577  * Fork - LGPL
35578  * <script type="text/javascript">
35579  */
35580 /**
35581  * @extends Roo.grid.AbstractSelectionModel
35582  * @class Roo.grid.RowSelectionModel
35583  * The default SelectionModel used by {@link Roo.grid.Grid}.
35584  * It supports multiple selections and keyboard selection/navigation. 
35585  * @constructor
35586  * @param {Object} config
35587  */
35588 Roo.grid.RowSelectionModel = function(config){
35589     Roo.apply(this, config);
35590     this.selections = new Roo.util.MixedCollection(false, function(o){
35591         return o.id;
35592     });
35593
35594     this.last = false;
35595     this.lastActive = false;
35596
35597     this.addEvents({
35598         /**
35599              * @event selectionchange
35600              * Fires when the selection changes
35601              * @param {SelectionModel} this
35602              */
35603             "selectionchange" : true,
35604         /**
35605              * @event afterselectionchange
35606              * Fires after the selection changes (eg. by key press or clicking)
35607              * @param {SelectionModel} this
35608              */
35609             "afterselectionchange" : true,
35610         /**
35611              * @event beforerowselect
35612              * Fires when a row is selected being selected, return false to cancel.
35613              * @param {SelectionModel} this
35614              * @param {Number} rowIndex The selected index
35615              * @param {Boolean} keepExisting False if other selections will be cleared
35616              */
35617             "beforerowselect" : true,
35618         /**
35619              * @event rowselect
35620              * Fires when a row is selected.
35621              * @param {SelectionModel} this
35622              * @param {Number} rowIndex The selected index
35623              * @param {Roo.data.Record} r The record
35624              */
35625             "rowselect" : true,
35626         /**
35627              * @event rowdeselect
35628              * Fires when a row is deselected.
35629              * @param {SelectionModel} this
35630              * @param {Number} rowIndex The selected index
35631              */
35632         "rowdeselect" : true
35633     });
35634     Roo.grid.RowSelectionModel.superclass.constructor.call(this);
35635     this.locked = false;
35636 };
35637
35638 Roo.extend(Roo.grid.RowSelectionModel, Roo.grid.AbstractSelectionModel,  {
35639     /**
35640      * @cfg {Boolean} singleSelect
35641      * True to allow selection of only one row at a time (defaults to false)
35642      */
35643     singleSelect : false,
35644
35645     // private
35646     initEvents : function(){
35647
35648         if(!this.grid.enableDragDrop && !this.grid.enableDrag){
35649             this.grid.on("mousedown", this.handleMouseDown, this);
35650         }else{ // allow click to work like normal
35651             this.grid.on("rowclick", this.handleDragableRowClick, this);
35652         }
35653
35654         this.rowNav = new Roo.KeyNav(this.grid.getGridEl(), {
35655             "up" : function(e){
35656                 if(!e.shiftKey){
35657                     this.selectPrevious(e.shiftKey);
35658                 }else if(this.last !== false && this.lastActive !== false){
35659                     var last = this.last;
35660                     this.selectRange(this.last,  this.lastActive-1);
35661                     this.grid.getView().focusRow(this.lastActive);
35662                     if(last !== false){
35663                         this.last = last;
35664                     }
35665                 }else{
35666                     this.selectFirstRow();
35667                 }
35668                 this.fireEvent("afterselectionchange", this);
35669             },
35670             "down" : function(e){
35671                 if(!e.shiftKey){
35672                     this.selectNext(e.shiftKey);
35673                 }else if(this.last !== false && this.lastActive !== false){
35674                     var last = this.last;
35675                     this.selectRange(this.last,  this.lastActive+1);
35676                     this.grid.getView().focusRow(this.lastActive);
35677                     if(last !== false){
35678                         this.last = last;
35679                     }
35680                 }else{
35681                     this.selectFirstRow();
35682                 }
35683                 this.fireEvent("afterselectionchange", this);
35684             },
35685             scope: this
35686         });
35687
35688         var view = this.grid.view;
35689         view.on("refresh", this.onRefresh, this);
35690         view.on("rowupdated", this.onRowUpdated, this);
35691         view.on("rowremoved", this.onRemove, this);
35692     },
35693
35694     // private
35695     onRefresh : function(){
35696         var ds = this.grid.dataSource, i, v = this.grid.view;
35697         var s = this.selections;
35698         s.each(function(r){
35699             if((i = ds.indexOfId(r.id)) != -1){
35700                 v.onRowSelect(i);
35701                 s.add(ds.getAt(i)); // updating the selection relate data
35702             }else{
35703                 s.remove(r);
35704             }
35705         });
35706     },
35707
35708     // private
35709     onRemove : function(v, index, r){
35710         this.selections.remove(r);
35711     },
35712
35713     // private
35714     onRowUpdated : function(v, index, r){
35715         if(this.isSelected(r)){
35716             v.onRowSelect(index);
35717         }
35718     },
35719
35720     /**
35721      * Select records.
35722      * @param {Array} records The records to select
35723      * @param {Boolean} keepExisting (optional) True to keep existing selections
35724      */
35725     selectRecords : function(records, keepExisting){
35726         if(!keepExisting){
35727             this.clearSelections();
35728         }
35729         var ds = this.grid.dataSource;
35730         for(var i = 0, len = records.length; i < len; i++){
35731             this.selectRow(ds.indexOf(records[i]), true);
35732         }
35733     },
35734
35735     /**
35736      * Gets the number of selected rows.
35737      * @return {Number}
35738      */
35739     getCount : function(){
35740         return this.selections.length;
35741     },
35742
35743     /**
35744      * Selects the first row in the grid.
35745      */
35746     selectFirstRow : function(){
35747         this.selectRow(0);
35748     },
35749
35750     /**
35751      * Select the last row.
35752      * @param {Boolean} keepExisting (optional) True to keep existing selections
35753      */
35754     selectLastRow : function(keepExisting){
35755         this.selectRow(this.grid.dataSource.getCount() - 1, keepExisting);
35756     },
35757
35758     /**
35759      * Selects the row immediately following the last selected row.
35760      * @param {Boolean} keepExisting (optional) True to keep existing selections
35761      */
35762     selectNext : function(keepExisting){
35763         if(this.last !== false && (this.last+1) < this.grid.dataSource.getCount()){
35764             this.selectRow(this.last+1, keepExisting);
35765             this.grid.getView().focusRow(this.last);
35766         }
35767     },
35768
35769     /**
35770      * Selects the row that precedes the last selected row.
35771      * @param {Boolean} keepExisting (optional) True to keep existing selections
35772      */
35773     selectPrevious : function(keepExisting){
35774         if(this.last){
35775             this.selectRow(this.last-1, keepExisting);
35776             this.grid.getView().focusRow(this.last);
35777         }
35778     },
35779
35780     /**
35781      * Returns the selected records
35782      * @return {Array} Array of selected records
35783      */
35784     getSelections : function(){
35785         return [].concat(this.selections.items);
35786     },
35787
35788     /**
35789      * Returns the first selected record.
35790      * @return {Record}
35791      */
35792     getSelected : function(){
35793         return this.selections.itemAt(0);
35794     },
35795
35796
35797     /**
35798      * Clears all selections.
35799      */
35800     clearSelections : function(fast){
35801         if(this.locked) {
35802             return;
35803         }
35804         if(fast !== true){
35805             var ds = this.grid.dataSource;
35806             var s = this.selections;
35807             s.each(function(r){
35808                 this.deselectRow(ds.indexOfId(r.id));
35809             }, this);
35810             s.clear();
35811         }else{
35812             this.selections.clear();
35813         }
35814         this.last = false;
35815     },
35816
35817
35818     /**
35819      * Selects all rows.
35820      */
35821     selectAll : function(){
35822         if(this.locked) {
35823             return;
35824         }
35825         this.selections.clear();
35826         for(var i = 0, len = this.grid.dataSource.getCount(); i < len; i++){
35827             this.selectRow(i, true);
35828         }
35829     },
35830
35831     /**
35832      * Returns True if there is a selection.
35833      * @return {Boolean}
35834      */
35835     hasSelection : function(){
35836         return this.selections.length > 0;
35837     },
35838
35839     /**
35840      * Returns True if the specified row is selected.
35841      * @param {Number/Record} record The record or index of the record to check
35842      * @return {Boolean}
35843      */
35844     isSelected : function(index){
35845         var r = typeof index == "number" ? this.grid.dataSource.getAt(index) : index;
35846         return (r && this.selections.key(r.id) ? true : false);
35847     },
35848
35849     /**
35850      * Returns True if the specified record id is selected.
35851      * @param {String} id The id of record to check
35852      * @return {Boolean}
35853      */
35854     isIdSelected : function(id){
35855         return (this.selections.key(id) ? true : false);
35856     },
35857
35858     // private
35859     handleMouseDown : function(e, t){
35860         var view = this.grid.getView(), rowIndex;
35861         if(this.isLocked() || (rowIndex = view.findRowIndex(t)) === false){
35862             return;
35863         };
35864         if(e.shiftKey && this.last !== false){
35865             var last = this.last;
35866             this.selectRange(last, rowIndex, e.ctrlKey);
35867             this.last = last; // reset the last
35868             view.focusRow(rowIndex);
35869         }else{
35870             var isSelected = this.isSelected(rowIndex);
35871             if(e.button !== 0 && isSelected){
35872                 view.focusRow(rowIndex);
35873             }else if(e.ctrlKey && isSelected){
35874                 this.deselectRow(rowIndex);
35875             }else if(!isSelected){
35876                 this.selectRow(rowIndex, e.button === 0 && (e.ctrlKey || e.shiftKey));
35877                 view.focusRow(rowIndex);
35878             }
35879         }
35880         this.fireEvent("afterselectionchange", this);
35881     },
35882     // private
35883     handleDragableRowClick :  function(grid, rowIndex, e) 
35884     {
35885         if(e.button === 0 && !e.shiftKey && !e.ctrlKey) {
35886             this.selectRow(rowIndex, false);
35887             grid.view.focusRow(rowIndex);
35888              this.fireEvent("afterselectionchange", this);
35889         }
35890     },
35891     
35892     /**
35893      * Selects multiple rows.
35894      * @param {Array} rows Array of the indexes of the row to select
35895      * @param {Boolean} keepExisting (optional) True to keep existing selections
35896      */
35897     selectRows : function(rows, keepExisting){
35898         if(!keepExisting){
35899             this.clearSelections();
35900         }
35901         for(var i = 0, len = rows.length; i < len; i++){
35902             this.selectRow(rows[i], true);
35903         }
35904     },
35905
35906     /**
35907      * Selects a range of rows. All rows in between startRow and endRow are also selected.
35908      * @param {Number} startRow The index of the first row in the range
35909      * @param {Number} endRow The index of the last row in the range
35910      * @param {Boolean} keepExisting (optional) True to retain existing selections
35911      */
35912     selectRange : function(startRow, endRow, keepExisting){
35913         if(this.locked) {
35914             return;
35915         }
35916         if(!keepExisting){
35917             this.clearSelections();
35918         }
35919         if(startRow <= endRow){
35920             for(var i = startRow; i <= endRow; i++){
35921                 this.selectRow(i, true);
35922             }
35923         }else{
35924             for(var i = startRow; i >= endRow; i--){
35925                 this.selectRow(i, true);
35926             }
35927         }
35928     },
35929
35930     /**
35931      * Deselects a range of rows. All rows in between startRow and endRow are also deselected.
35932      * @param {Number} startRow The index of the first row in the range
35933      * @param {Number} endRow The index of the last row in the range
35934      */
35935     deselectRange : function(startRow, endRow, preventViewNotify){
35936         if(this.locked) {
35937             return;
35938         }
35939         for(var i = startRow; i <= endRow; i++){
35940             this.deselectRow(i, preventViewNotify);
35941         }
35942     },
35943
35944     /**
35945      * Selects a row.
35946      * @param {Number} row The index of the row to select
35947      * @param {Boolean} keepExisting (optional) True to keep existing selections
35948      */
35949     selectRow : function(index, keepExisting, preventViewNotify){
35950         if(this.locked || (index < 0 || index >= this.grid.dataSource.getCount())) {
35951             return;
35952         }
35953         if(this.fireEvent("beforerowselect", this, index, keepExisting) !== false){
35954             if(!keepExisting || this.singleSelect){
35955                 this.clearSelections();
35956             }
35957             var r = this.grid.dataSource.getAt(index);
35958             this.selections.add(r);
35959             this.last = this.lastActive = index;
35960             if(!preventViewNotify){
35961                 this.grid.getView().onRowSelect(index);
35962             }
35963             this.fireEvent("rowselect", this, index, r);
35964             this.fireEvent("selectionchange", this);
35965         }
35966     },
35967
35968     /**
35969      * Deselects a row.
35970      * @param {Number} row The index of the row to deselect
35971      */
35972     deselectRow : function(index, preventViewNotify){
35973         if(this.locked) {
35974             return;
35975         }
35976         if(this.last == index){
35977             this.last = false;
35978         }
35979         if(this.lastActive == index){
35980             this.lastActive = false;
35981         }
35982         var r = this.grid.dataSource.getAt(index);
35983         this.selections.remove(r);
35984         if(!preventViewNotify){
35985             this.grid.getView().onRowDeselect(index);
35986         }
35987         this.fireEvent("rowdeselect", this, index);
35988         this.fireEvent("selectionchange", this);
35989     },
35990
35991     // private
35992     restoreLast : function(){
35993         if(this._last){
35994             this.last = this._last;
35995         }
35996     },
35997
35998     // private
35999     acceptsNav : function(row, col, cm){
36000         return !cm.isHidden(col) && cm.isCellEditable(col, row);
36001     },
36002
36003     // private
36004     onEditorKey : function(field, e){
36005         var k = e.getKey(), newCell, g = this.grid, ed = g.activeEditor;
36006         if(k == e.TAB){
36007             e.stopEvent();
36008             ed.completeEdit();
36009             if(e.shiftKey){
36010                 newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this);
36011             }else{
36012                 newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
36013             }
36014         }else if(k == e.ENTER && !e.ctrlKey){
36015             e.stopEvent();
36016             ed.completeEdit();
36017             if(e.shiftKey){
36018                 newCell = g.walkCells(ed.row-1, ed.col, -1, this.acceptsNav, this);
36019             }else{
36020                 newCell = g.walkCells(ed.row+1, ed.col, 1, this.acceptsNav, this);
36021             }
36022         }else if(k == e.ESC){
36023             ed.cancelEdit();
36024         }
36025         if(newCell){
36026             g.startEditing(newCell[0], newCell[1]);
36027         }
36028     }
36029 });/*
36030  * Based on:
36031  * Ext JS Library 1.1.1
36032  * Copyright(c) 2006-2007, Ext JS, LLC.
36033  *
36034  * Originally Released Under LGPL - original licence link has changed is not relivant.
36035  *
36036  * Fork - LGPL
36037  * <script type="text/javascript">
36038  */
36039 /**
36040  * @class Roo.grid.CellSelectionModel
36041  * @extends Roo.grid.AbstractSelectionModel
36042  * This class provides the basic implementation for cell selection in a grid.
36043  * @constructor
36044  * @param {Object} config The object containing the configuration of this model.
36045  * @cfg {Boolean} enter_is_tab Enter behaves the same as tab. (eg. goes to next cell) default: false
36046  */
36047 Roo.grid.CellSelectionModel = function(config){
36048     Roo.apply(this, config);
36049
36050     this.selection = null;
36051
36052     this.addEvents({
36053         /**
36054              * @event beforerowselect
36055              * Fires before a cell is selected.
36056              * @param {SelectionModel} this
36057              * @param {Number} rowIndex The selected row index
36058              * @param {Number} colIndex The selected cell index
36059              */
36060             "beforecellselect" : true,
36061         /**
36062              * @event cellselect
36063              * Fires when a cell is selected.
36064              * @param {SelectionModel} this
36065              * @param {Number} rowIndex The selected row index
36066              * @param {Number} colIndex The selected cell index
36067              */
36068             "cellselect" : true,
36069         /**
36070              * @event selectionchange
36071              * Fires when the active selection changes.
36072              * @param {SelectionModel} this
36073              * @param {Object} selection null for no selection or an object (o) with two properties
36074                 <ul>
36075                 <li>o.record: the record object for the row the selection is in</li>
36076                 <li>o.cell: An array of [rowIndex, columnIndex]</li>
36077                 </ul>
36078              */
36079             "selectionchange" : true,
36080         /**
36081              * @event tabend
36082              * Fires when the tab (or enter) was pressed on the last editable cell
36083              * You can use this to trigger add new row.
36084              * @param {SelectionModel} this
36085              */
36086             "tabend" : true,
36087          /**
36088              * @event beforeeditnext
36089              * Fires before the next editable sell is made active
36090              * You can use this to skip to another cell or fire the tabend
36091              *    if you set cell to false
36092              * @param {Object} eventdata object : { cell : [ row, col ] } 
36093              */
36094             "beforeeditnext" : true
36095     });
36096     Roo.grid.CellSelectionModel.superclass.constructor.call(this);
36097 };
36098
36099 Roo.extend(Roo.grid.CellSelectionModel, Roo.grid.AbstractSelectionModel,  {
36100     
36101     enter_is_tab: false,
36102
36103     /** @ignore */
36104     initEvents : function(){
36105         this.grid.on("mousedown", this.handleMouseDown, this);
36106         this.grid.getGridEl().on(Roo.isIE ? "keydown" : "keypress", this.handleKeyDown, this);
36107         var view = this.grid.view;
36108         view.on("refresh", this.onViewChange, this);
36109         view.on("rowupdated", this.onRowUpdated, this);
36110         view.on("beforerowremoved", this.clearSelections, this);
36111         view.on("beforerowsinserted", this.clearSelections, this);
36112         if(this.grid.isEditor){
36113             this.grid.on("beforeedit", this.beforeEdit,  this);
36114         }
36115     },
36116
36117         //private
36118     beforeEdit : function(e){
36119         this.select(e.row, e.column, false, true, e.record);
36120     },
36121
36122         //private
36123     onRowUpdated : function(v, index, r){
36124         if(this.selection && this.selection.record == r){
36125             v.onCellSelect(index, this.selection.cell[1]);
36126         }
36127     },
36128
36129         //private
36130     onViewChange : function(){
36131         this.clearSelections(true);
36132     },
36133
36134         /**
36135          * Returns the currently selected cell,.
36136          * @return {Array} The selected cell (row, column) or null if none selected.
36137          */
36138     getSelectedCell : function(){
36139         return this.selection ? this.selection.cell : null;
36140     },
36141
36142     /**
36143      * Clears all selections.
36144      * @param {Boolean} true to prevent the gridview from being notified about the change.
36145      */
36146     clearSelections : function(preventNotify){
36147         var s = this.selection;
36148         if(s){
36149             if(preventNotify !== true){
36150                 this.grid.view.onCellDeselect(s.cell[0], s.cell[1]);
36151             }
36152             this.selection = null;
36153             this.fireEvent("selectionchange", this, null);
36154         }
36155     },
36156
36157     /**
36158      * Returns true if there is a selection.
36159      * @return {Boolean}
36160      */
36161     hasSelection : function(){
36162         return this.selection ? true : false;
36163     },
36164
36165     /** @ignore */
36166     handleMouseDown : function(e, t){
36167         var v = this.grid.getView();
36168         if(this.isLocked()){
36169             return;
36170         };
36171         var row = v.findRowIndex(t);
36172         var cell = v.findCellIndex(t);
36173         if(row !== false && cell !== false){
36174             this.select(row, cell);
36175         }
36176     },
36177
36178     /**
36179      * Selects a cell.
36180      * @param {Number} rowIndex
36181      * @param {Number} collIndex
36182      */
36183     select : function(rowIndex, colIndex, preventViewNotify, preventFocus, /*internal*/ r){
36184         if(this.fireEvent("beforecellselect", this, rowIndex, colIndex) !== false){
36185             this.clearSelections();
36186             r = r || this.grid.dataSource.getAt(rowIndex);
36187             this.selection = {
36188                 record : r,
36189                 cell : [rowIndex, colIndex]
36190             };
36191             if(!preventViewNotify){
36192                 var v = this.grid.getView();
36193                 v.onCellSelect(rowIndex, colIndex);
36194                 if(preventFocus !== true){
36195                     v.focusCell(rowIndex, colIndex);
36196                 }
36197             }
36198             this.fireEvent("cellselect", this, rowIndex, colIndex);
36199             this.fireEvent("selectionchange", this, this.selection);
36200         }
36201     },
36202
36203         //private
36204     isSelectable : function(rowIndex, colIndex, cm){
36205         return !cm.isHidden(colIndex);
36206     },
36207
36208     /** @ignore */
36209     handleKeyDown : function(e){
36210         //Roo.log('Cell Sel Model handleKeyDown');
36211         if(!e.isNavKeyPress()){
36212             return;
36213         }
36214         var g = this.grid, s = this.selection;
36215         if(!s){
36216             e.stopEvent();
36217             var cell = g.walkCells(0, 0, 1, this.isSelectable,  this);
36218             if(cell){
36219                 this.select(cell[0], cell[1]);
36220             }
36221             return;
36222         }
36223         var sm = this;
36224         var walk = function(row, col, step){
36225             return g.walkCells(row, col, step, sm.isSelectable,  sm);
36226         };
36227         var k = e.getKey(), r = s.cell[0], c = s.cell[1];
36228         var newCell;
36229
36230       
36231
36232         switch(k){
36233             case e.TAB:
36234                 // handled by onEditorKey
36235                 if (g.isEditor && g.editing) {
36236                     return;
36237                 }
36238                 if(e.shiftKey) {
36239                     newCell = walk(r, c-1, -1);
36240                 } else {
36241                     newCell = walk(r, c+1, 1);
36242                 }
36243                 break;
36244             
36245             case e.DOWN:
36246                newCell = walk(r+1, c, 1);
36247                 break;
36248             
36249             case e.UP:
36250                 newCell = walk(r-1, c, -1);
36251                 break;
36252             
36253             case e.RIGHT:
36254                 newCell = walk(r, c+1, 1);
36255                 break;
36256             
36257             case e.LEFT:
36258                 newCell = walk(r, c-1, -1);
36259                 break;
36260             
36261             case e.ENTER:
36262                 
36263                 if(g.isEditor && !g.editing){
36264                    g.startEditing(r, c);
36265                    e.stopEvent();
36266                    return;
36267                 }
36268                 
36269                 
36270              break;
36271         };
36272         if(newCell){
36273             this.select(newCell[0], newCell[1]);
36274             e.stopEvent();
36275             
36276         }
36277     },
36278
36279     acceptsNav : function(row, col, cm){
36280         return !cm.isHidden(col) && cm.isCellEditable(col, row);
36281     },
36282     /**
36283      * Selects a cell.
36284      * @param {Number} field (not used) - as it's normally used as a listener
36285      * @param {Number} e - event - fake it by using
36286      *
36287      * var e = Roo.EventObjectImpl.prototype;
36288      * e.keyCode = e.TAB
36289      *
36290      * 
36291      */
36292     onEditorKey : function(field, e){
36293         
36294         var k = e.getKey(),
36295             newCell,
36296             g = this.grid,
36297             ed = g.activeEditor,
36298             forward = false;
36299         ///Roo.log('onEditorKey' + k);
36300         
36301         
36302         if (this.enter_is_tab && k == e.ENTER) {
36303             k = e.TAB;
36304         }
36305         
36306         if(k == e.TAB){
36307             if(e.shiftKey){
36308                 newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this);
36309             }else{
36310                 newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
36311                 forward = true;
36312             }
36313             
36314             e.stopEvent();
36315             
36316         } else if(k == e.ENTER &&  !e.ctrlKey){
36317             ed.completeEdit();
36318             e.stopEvent();
36319             newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
36320         
36321                 } else if(k == e.ESC){
36322             ed.cancelEdit();
36323         }
36324                 
36325         if (newCell) {
36326             var ecall = { cell : newCell, forward : forward };
36327             this.fireEvent('beforeeditnext', ecall );
36328             newCell = ecall.cell;
36329                         forward = ecall.forward;
36330         }
36331                 
36332         if(newCell){
36333             //Roo.log('next cell after edit');
36334             g.startEditing.defer(100, g, [newCell[0], newCell[1]]);
36335         } else if (forward) {
36336             // tabbed past last
36337             this.fireEvent.defer(100, this, ['tabend',this]);
36338         }
36339     }
36340 });/*
36341  * Based on:
36342  * Ext JS Library 1.1.1
36343  * Copyright(c) 2006-2007, Ext JS, LLC.
36344  *
36345  * Originally Released Under LGPL - original licence link has changed is not relivant.
36346  *
36347  * Fork - LGPL
36348  * <script type="text/javascript">
36349  */
36350  
36351 /**
36352  * @class Roo.grid.EditorGrid
36353  * @extends Roo.grid.Grid
36354  * Class for creating and editable grid.
36355  * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered - 
36356  * The container MUST have some type of size defined for the grid to fill. The container will be 
36357  * automatically set to position relative if it isn't already.
36358  * @param {Object} dataSource The data model to bind to
36359  * @param {Object} colModel The column model with info about this grid's columns
36360  */
36361 Roo.grid.EditorGrid = function(container, config){
36362     Roo.grid.EditorGrid.superclass.constructor.call(this, container, config);
36363     this.getGridEl().addClass("xedit-grid");
36364
36365     if(!this.selModel){
36366         this.selModel = new Roo.grid.CellSelectionModel();
36367     }
36368
36369     this.activeEditor = null;
36370
36371         this.addEvents({
36372             /**
36373              * @event beforeedit
36374              * Fires before cell editing is triggered. The edit event object has the following properties <br />
36375              * <ul style="padding:5px;padding-left:16px;">
36376              * <li>grid - This grid</li>
36377              * <li>record - The record being edited</li>
36378              * <li>field - The field name being edited</li>
36379              * <li>value - The value for the field being edited.</li>
36380              * <li>row - The grid row index</li>
36381              * <li>column - The grid column index</li>
36382              * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
36383              * </ul>
36384              * @param {Object} e An edit event (see above for description)
36385              */
36386             "beforeedit" : true,
36387             /**
36388              * @event afteredit
36389              * Fires after a cell is edited. <br />
36390              * <ul style="padding:5px;padding-left:16px;">
36391              * <li>grid - This grid</li>
36392              * <li>record - The record being edited</li>
36393              * <li>field - The field name being edited</li>
36394              * <li>value - The value being set</li>
36395              * <li>originalValue - The original value for the field, before the edit.</li>
36396              * <li>row - The grid row index</li>
36397              * <li>column - The grid column index</li>
36398              * </ul>
36399              * @param {Object} e An edit event (see above for description)
36400              */
36401             "afteredit" : true,
36402             /**
36403              * @event validateedit
36404              * Fires after a cell is edited, but before the value is set in the record. 
36405          * You can use this to modify the value being set in the field, Return false
36406              * to cancel the change. The edit event object has the following properties <br />
36407              * <ul style="padding:5px;padding-left:16px;">
36408          * <li>editor - This editor</li>
36409              * <li>grid - This grid</li>
36410              * <li>record - The record being edited</li>
36411              * <li>field - The field name being edited</li>
36412              * <li>value - The value being set</li>
36413              * <li>originalValue - The original value for the field, before the edit.</li>
36414              * <li>row - The grid row index</li>
36415              * <li>column - The grid column index</li>
36416              * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
36417              * </ul>
36418              * @param {Object} e An edit event (see above for description)
36419              */
36420             "validateedit" : true
36421         });
36422     this.on("bodyscroll", this.stopEditing,  this);
36423     this.on(this.clicksToEdit == 1 ? "cellclick" : "celldblclick", this.onCellDblClick,  this);
36424 };
36425
36426 Roo.extend(Roo.grid.EditorGrid, Roo.grid.Grid, {
36427     /**
36428      * @cfg {Number} clicksToEdit
36429      * The number of clicks on a cell required to display the cell's editor (defaults to 2)
36430      */
36431     clicksToEdit: 2,
36432
36433     // private
36434     isEditor : true,
36435     // private
36436     trackMouseOver: false, // causes very odd FF errors
36437
36438     onCellDblClick : function(g, row, col){
36439         this.startEditing(row, col);
36440     },
36441
36442     onEditComplete : function(ed, value, startValue){
36443         this.editing = false;
36444         this.activeEditor = null;
36445         ed.un("specialkey", this.selModel.onEditorKey, this.selModel);
36446         var r = ed.record;
36447         var field = this.colModel.getDataIndex(ed.col);
36448         var e = {
36449             grid: this,
36450             record: r,
36451             field: field,
36452             originalValue: startValue,
36453             value: value,
36454             row: ed.row,
36455             column: ed.col,
36456             cancel:false,
36457             editor: ed
36458         };
36459         var cell = Roo.get(this.view.getCell(ed.row,ed.col));
36460         cell.show();
36461           
36462         if(String(value) !== String(startValue)){
36463             
36464             if(this.fireEvent("validateedit", e) !== false && !e.cancel){
36465                 r.set(field, e.value);
36466                 // if we are dealing with a combo box..
36467                 // then we also set the 'name' colum to be the displayField
36468                 if (ed.field.displayField && ed.field.name) {
36469                     r.set(ed.field.name, ed.field.el.dom.value);
36470                 }
36471                 
36472                 delete e.cancel; //?? why!!!
36473                 this.fireEvent("afteredit", e);
36474             }
36475         } else {
36476             this.fireEvent("afteredit", e); // always fire it!
36477         }
36478         this.view.focusCell(ed.row, ed.col);
36479     },
36480
36481     /**
36482      * Starts editing the specified for the specified row/column
36483      * @param {Number} rowIndex
36484      * @param {Number} colIndex
36485      */
36486     startEditing : function(row, col){
36487         this.stopEditing();
36488         if(this.colModel.isCellEditable(col, row)){
36489             this.view.ensureVisible(row, col, true);
36490           
36491             var r = this.dataSource.getAt(row);
36492             var field = this.colModel.getDataIndex(col);
36493             var cell = Roo.get(this.view.getCell(row,col));
36494             var e = {
36495                 grid: this,
36496                 record: r,
36497                 field: field,
36498                 value: r.data[field],
36499                 row: row,
36500                 column: col,
36501                 cancel:false 
36502             };
36503             if(this.fireEvent("beforeedit", e) !== false && !e.cancel){
36504                 this.editing = true;
36505                 var ed = this.colModel.getCellEditor(col, row);
36506                 
36507                 if (!ed) {
36508                     return;
36509                 }
36510                 if(!ed.rendered){
36511                     ed.render(ed.parentEl || document.body);
36512                 }
36513                 ed.field.reset();
36514                
36515                 cell.hide();
36516                 
36517                 (function(){ // complex but required for focus issues in safari, ie and opera
36518                     ed.row = row;
36519                     ed.col = col;
36520                     ed.record = r;
36521                     ed.on("complete",   this.onEditComplete,        this,       {single: true});
36522                     ed.on("specialkey", this.selModel.onEditorKey,  this.selModel);
36523                     this.activeEditor = ed;
36524                     var v = r.data[field];
36525                     ed.startEdit(this.view.getCell(row, col), v);
36526                     // combo's with 'displayField and name set
36527                     if (ed.field.displayField && ed.field.name) {
36528                         ed.field.el.dom.value = r.data[ed.field.name];
36529                     }
36530                     
36531                     
36532                 }).defer(50, this);
36533             }
36534         }
36535     },
36536         
36537     /**
36538      * Stops any active editing
36539      */
36540     stopEditing : function(){
36541         if(this.activeEditor){
36542             this.activeEditor.completeEdit();
36543         }
36544         this.activeEditor = null;
36545     },
36546         
36547          /**
36548      * Called to get grid's drag proxy text, by default returns this.ddText.
36549      * @return {String}
36550      */
36551     getDragDropText : function(){
36552         var count = this.selModel.getSelectedCell() ? 1 : 0;
36553         return String.format(this.ddText, count, count == 1 ? '' : 's');
36554     }
36555         
36556 });/*
36557  * Based on:
36558  * Ext JS Library 1.1.1
36559  * Copyright(c) 2006-2007, Ext JS, LLC.
36560  *
36561  * Originally Released Under LGPL - original licence link has changed is not relivant.
36562  *
36563  * Fork - LGPL
36564  * <script type="text/javascript">
36565  */
36566
36567 // private - not really -- you end up using it !
36568 // This is a support class used internally by the Grid components
36569
36570 /**
36571  * @class Roo.grid.GridEditor
36572  * @extends Roo.Editor
36573  * Class for creating and editable grid elements.
36574  * @param {Object} config any settings (must include field)
36575  */
36576 Roo.grid.GridEditor = function(field, config){
36577     if (!config && field.field) {
36578         config = field;
36579         field = Roo.factory(config.field, Roo.form);
36580     }
36581     Roo.grid.GridEditor.superclass.constructor.call(this, field, config);
36582     field.monitorTab = false;
36583 };
36584
36585 Roo.extend(Roo.grid.GridEditor, Roo.Editor, {
36586     
36587     /**
36588      * @cfg {Roo.form.Field} field Field to wrap (or xtyped)
36589      */
36590     
36591     alignment: "tl-tl",
36592     autoSize: "width",
36593     hideEl : false,
36594     cls: "x-small-editor x-grid-editor",
36595     shim:false,
36596     shadow:"frame"
36597 });/*
36598  * Based on:
36599  * Ext JS Library 1.1.1
36600  * Copyright(c) 2006-2007, Ext JS, LLC.
36601  *
36602  * Originally Released Under LGPL - original licence link has changed is not relivant.
36603  *
36604  * Fork - LGPL
36605  * <script type="text/javascript">
36606  */
36607   
36608
36609   
36610 Roo.grid.PropertyRecord = Roo.data.Record.create([
36611     {name:'name',type:'string'},  'value'
36612 ]);
36613
36614
36615 Roo.grid.PropertyStore = function(grid, source){
36616     this.grid = grid;
36617     this.store = new Roo.data.Store({
36618         recordType : Roo.grid.PropertyRecord
36619     });
36620     this.store.on('update', this.onUpdate,  this);
36621     if(source){
36622         this.setSource(source);
36623     }
36624     Roo.grid.PropertyStore.superclass.constructor.call(this);
36625 };
36626
36627
36628
36629 Roo.extend(Roo.grid.PropertyStore, Roo.util.Observable, {
36630     setSource : function(o){
36631         this.source = o;
36632         this.store.removeAll();
36633         var data = [];
36634         for(var k in o){
36635             if(this.isEditableValue(o[k])){
36636                 data.push(new Roo.grid.PropertyRecord({name: k, value: o[k]}, k));
36637             }
36638         }
36639         this.store.loadRecords({records: data}, {}, true);
36640     },
36641
36642     onUpdate : function(ds, record, type){
36643         if(type == Roo.data.Record.EDIT){
36644             var v = record.data['value'];
36645             var oldValue = record.modified['value'];
36646             if(this.grid.fireEvent('beforepropertychange', this.source, record.id, v, oldValue) !== false){
36647                 this.source[record.id] = v;
36648                 record.commit();
36649                 this.grid.fireEvent('propertychange', this.source, record.id, v, oldValue);
36650             }else{
36651                 record.reject();
36652             }
36653         }
36654     },
36655
36656     getProperty : function(row){
36657        return this.store.getAt(row);
36658     },
36659
36660     isEditableValue: function(val){
36661         if(val && val instanceof Date){
36662             return true;
36663         }else if(typeof val == 'object' || typeof val == 'function'){
36664             return false;
36665         }
36666         return true;
36667     },
36668
36669     setValue : function(prop, value){
36670         this.source[prop] = value;
36671         this.store.getById(prop).set('value', value);
36672     },
36673
36674     getSource : function(){
36675         return this.source;
36676     }
36677 });
36678
36679 Roo.grid.PropertyColumnModel = function(grid, store){
36680     this.grid = grid;
36681     var g = Roo.grid;
36682     g.PropertyColumnModel.superclass.constructor.call(this, [
36683         {header: this.nameText, sortable: true, dataIndex:'name', id: 'name'},
36684         {header: this.valueText, resizable:false, dataIndex: 'value', id: 'value'}
36685     ]);
36686     this.store = store;
36687     this.bselect = Roo.DomHelper.append(document.body, {
36688         tag: 'select', style:'display:none', cls: 'x-grid-editor', children: [
36689             {tag: 'option', value: 'true', html: 'true'},
36690             {tag: 'option', value: 'false', html: 'false'}
36691         ]
36692     });
36693     Roo.id(this.bselect);
36694     var f = Roo.form;
36695     this.editors = {
36696         'date' : new g.GridEditor(new f.DateField({selectOnFocus:true})),
36697         'string' : new g.GridEditor(new f.TextField({selectOnFocus:true})),
36698         'number' : new g.GridEditor(new f.NumberField({selectOnFocus:true, style:'text-align:left;'})),
36699         'int' : new g.GridEditor(new f.NumberField({selectOnFocus:true, allowDecimals:false, style:'text-align:left;'})),
36700         'boolean' : new g.GridEditor(new f.Field({el:this.bselect,selectOnFocus:true}))
36701     };
36702     this.renderCellDelegate = this.renderCell.createDelegate(this);
36703     this.renderPropDelegate = this.renderProp.createDelegate(this);
36704 };
36705
36706 Roo.extend(Roo.grid.PropertyColumnModel, Roo.grid.ColumnModel, {
36707     
36708     
36709     nameText : 'Name',
36710     valueText : 'Value',
36711     
36712     dateFormat : 'm/j/Y',
36713     
36714     
36715     renderDate : function(dateVal){
36716         return dateVal.dateFormat(this.dateFormat);
36717     },
36718
36719     renderBool : function(bVal){
36720         return bVal ? 'true' : 'false';
36721     },
36722
36723     isCellEditable : function(colIndex, rowIndex){
36724         return colIndex == 1;
36725     },
36726
36727     getRenderer : function(col){
36728         return col == 1 ?
36729             this.renderCellDelegate : this.renderPropDelegate;
36730     },
36731
36732     renderProp : function(v){
36733         return this.getPropertyName(v);
36734     },
36735
36736     renderCell : function(val){
36737         var rv = val;
36738         if(val instanceof Date){
36739             rv = this.renderDate(val);
36740         }else if(typeof val == 'boolean'){
36741             rv = this.renderBool(val);
36742         }
36743         return Roo.util.Format.htmlEncode(rv);
36744     },
36745
36746     getPropertyName : function(name){
36747         var pn = this.grid.propertyNames;
36748         return pn && pn[name] ? pn[name] : name;
36749     },
36750
36751     getCellEditor : function(colIndex, rowIndex){
36752         var p = this.store.getProperty(rowIndex);
36753         var n = p.data['name'], val = p.data['value'];
36754         
36755         if(typeof(this.grid.customEditors[n]) == 'string'){
36756             return this.editors[this.grid.customEditors[n]];
36757         }
36758         if(typeof(this.grid.customEditors[n]) != 'undefined'){
36759             return this.grid.customEditors[n];
36760         }
36761         if(val instanceof Date){
36762             return this.editors['date'];
36763         }else if(typeof val == 'number'){
36764             return this.editors['number'];
36765         }else if(typeof val == 'boolean'){
36766             return this.editors['boolean'];
36767         }else{
36768             return this.editors['string'];
36769         }
36770     }
36771 });
36772
36773 /**
36774  * @class Roo.grid.PropertyGrid
36775  * @extends Roo.grid.EditorGrid
36776  * This class represents the  interface of a component based property grid control.
36777  * <br><br>Usage:<pre><code>
36778  var grid = new Roo.grid.PropertyGrid("my-container-id", {
36779       
36780  });
36781  // set any options
36782  grid.render();
36783  * </code></pre>
36784   
36785  * @constructor
36786  * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered -
36787  * The container MUST have some type of size defined for the grid to fill. The container will be
36788  * automatically set to position relative if it isn't already.
36789  * @param {Object} config A config object that sets properties on this grid.
36790  */
36791 Roo.grid.PropertyGrid = function(container, config){
36792     config = config || {};
36793     var store = new Roo.grid.PropertyStore(this);
36794     this.store = store;
36795     var cm = new Roo.grid.PropertyColumnModel(this, store);
36796     store.store.sort('name', 'ASC');
36797     Roo.grid.PropertyGrid.superclass.constructor.call(this, container, Roo.apply({
36798         ds: store.store,
36799         cm: cm,
36800         enableColLock:false,
36801         enableColumnMove:false,
36802         stripeRows:false,
36803         trackMouseOver: false,
36804         clicksToEdit:1
36805     }, config));
36806     this.getGridEl().addClass('x-props-grid');
36807     this.lastEditRow = null;
36808     this.on('columnresize', this.onColumnResize, this);
36809     this.addEvents({
36810          /**
36811              * @event beforepropertychange
36812              * Fires before a property changes (return false to stop?)
36813              * @param {Roo.grid.PropertyGrid} grid property grid? (check could be store)
36814              * @param {String} id Record Id
36815              * @param {String} newval New Value
36816          * @param {String} oldval Old Value
36817              */
36818         "beforepropertychange": true,
36819         /**
36820              * @event propertychange
36821              * Fires after a property changes
36822              * @param {Roo.grid.PropertyGrid} grid property grid? (check could be store)
36823              * @param {String} id Record Id
36824              * @param {String} newval New Value
36825          * @param {String} oldval Old Value
36826              */
36827         "propertychange": true
36828     });
36829     this.customEditors = this.customEditors || {};
36830 };
36831 Roo.extend(Roo.grid.PropertyGrid, Roo.grid.EditorGrid, {
36832     
36833      /**
36834      * @cfg {Object} customEditors map of colnames=> custom editors.
36835      * the custom editor can be one of the standard ones (date|string|number|int|boolean), or a
36836      * grid editor eg. Roo.grid.GridEditor(new Roo.form.TextArea({selectOnFocus:true})),
36837      * false disables editing of the field.
36838          */
36839     
36840       /**
36841      * @cfg {Object} propertyNames map of property Names to their displayed value
36842          */
36843     
36844     render : function(){
36845         Roo.grid.PropertyGrid.superclass.render.call(this);
36846         this.autoSize.defer(100, this);
36847     },
36848
36849     autoSize : function(){
36850         Roo.grid.PropertyGrid.superclass.autoSize.call(this);
36851         if(this.view){
36852             this.view.fitColumns();
36853         }
36854     },
36855
36856     onColumnResize : function(){
36857         this.colModel.setColumnWidth(1, this.container.getWidth(true)-this.colModel.getColumnWidth(0));
36858         this.autoSize();
36859     },
36860     /**
36861      * Sets the data for the Grid
36862      * accepts a Key => Value object of all the elements avaiable.
36863      * @param {Object} data  to appear in grid.
36864      */
36865     setSource : function(source){
36866         this.store.setSource(source);
36867         //this.autoSize();
36868     },
36869     /**
36870      * Gets all the data from the grid.
36871      * @return {Object} data  data stored in grid
36872      */
36873     getSource : function(){
36874         return this.store.getSource();
36875     }
36876 });/*
36877   
36878  * Licence LGPL
36879  
36880  */
36881  
36882 /**
36883  * @class Roo.grid.Calendar
36884  * @extends Roo.util.Grid
36885  * This class extends the Grid to provide a calendar widget
36886  * <br><br>Usage:<pre><code>
36887  var grid = new Roo.grid.Calendar("my-container-id", {
36888      ds: myDataStore,
36889      cm: myColModel,
36890      selModel: mySelectionModel,
36891      autoSizeColumns: true,
36892      monitorWindowResize: false,
36893      trackMouseOver: true
36894      eventstore : real data store..
36895  });
36896  // set any options
36897  grid.render();
36898   
36899   * @constructor
36900  * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered -
36901  * The container MUST have some type of size defined for the grid to fill. The container will be
36902  * automatically set to position relative if it isn't already.
36903  * @param {Object} config A config object that sets properties on this grid.
36904  */
36905 Roo.grid.Calendar = function(container, config){
36906         // initialize the container
36907         this.container = Roo.get(container);
36908         this.container.update("");
36909         this.container.setStyle("overflow", "hidden");
36910     this.container.addClass('x-grid-container');
36911
36912     this.id = this.container.id;
36913
36914     Roo.apply(this, config);
36915     // check and correct shorthanded configs
36916     
36917     var rows = [];
36918     var d =1;
36919     for (var r = 0;r < 6;r++) {
36920         
36921         rows[r]=[];
36922         for (var c =0;c < 7;c++) {
36923             rows[r][c]= '';
36924         }
36925     }
36926     if (this.eventStore) {
36927         this.eventStore= Roo.factory(this.eventStore, Roo.data);
36928         this.eventStore.on('load',this.onLoad, this);
36929         this.eventStore.on('beforeload',this.clearEvents, this);
36930          
36931     }
36932     
36933     this.dataSource = new Roo.data.Store({
36934             proxy: new Roo.data.MemoryProxy(rows),
36935             reader: new Roo.data.ArrayReader({}, [
36936                    'weekday0', 'weekday1', 'weekday2', 'weekday3', 'weekday4', 'weekday5', 'weekday6' ])
36937     });
36938
36939     this.dataSource.load();
36940     this.ds = this.dataSource;
36941     this.ds.xmodule = this.xmodule || false;
36942     
36943     
36944     var cellRender = function(v,x,r)
36945     {
36946         return String.format(
36947             '<div class="fc-day  fc-widget-content"><div>' +
36948                 '<div class="fc-event-container"></div>' +
36949                 '<div class="fc-day-number">{0}</div>'+
36950                 
36951                 '<div class="fc-day-content"><div style="position:relative"></div></div>' +
36952             '</div></div>', v);
36953     
36954     }
36955     
36956     
36957     this.colModel = new Roo.grid.ColumnModel( [
36958         {
36959             xtype: 'ColumnModel',
36960             xns: Roo.grid,
36961             dataIndex : 'weekday0',
36962             header : 'Sunday',
36963             renderer : cellRender
36964         },
36965         {
36966             xtype: 'ColumnModel',
36967             xns: Roo.grid,
36968             dataIndex : 'weekday1',
36969             header : 'Monday',
36970             renderer : cellRender
36971         },
36972         {
36973             xtype: 'ColumnModel',
36974             xns: Roo.grid,
36975             dataIndex : 'weekday2',
36976             header : 'Tuesday',
36977             renderer : cellRender
36978         },
36979         {
36980             xtype: 'ColumnModel',
36981             xns: Roo.grid,
36982             dataIndex : 'weekday3',
36983             header : 'Wednesday',
36984             renderer : cellRender
36985         },
36986         {
36987             xtype: 'ColumnModel',
36988             xns: Roo.grid,
36989             dataIndex : 'weekday4',
36990             header : 'Thursday',
36991             renderer : cellRender
36992         },
36993         {
36994             xtype: 'ColumnModel',
36995             xns: Roo.grid,
36996             dataIndex : 'weekday5',
36997             header : 'Friday',
36998             renderer : cellRender
36999         },
37000         {
37001             xtype: 'ColumnModel',
37002             xns: Roo.grid,
37003             dataIndex : 'weekday6',
37004             header : 'Saturday',
37005             renderer : cellRender
37006         }
37007     ]);
37008     this.cm = this.colModel;
37009     this.cm.xmodule = this.xmodule || false;
37010  
37011         
37012           
37013     //this.selModel = new Roo.grid.CellSelectionModel();
37014     //this.sm = this.selModel;
37015     //this.selModel.init(this);
37016     
37017     
37018     if(this.width){
37019         this.container.setWidth(this.width);
37020     }
37021
37022     if(this.height){
37023         this.container.setHeight(this.height);
37024     }
37025     /** @private */
37026         this.addEvents({
37027         // raw events
37028         /**
37029          * @event click
37030          * The raw click event for the entire grid.
37031          * @param {Roo.EventObject} e
37032          */
37033         "click" : true,
37034         /**
37035          * @event dblclick
37036          * The raw dblclick event for the entire grid.
37037          * @param {Roo.EventObject} e
37038          */
37039         "dblclick" : true,
37040         /**
37041          * @event contextmenu
37042          * The raw contextmenu event for the entire grid.
37043          * @param {Roo.EventObject} e
37044          */
37045         "contextmenu" : true,
37046         /**
37047          * @event mousedown
37048          * The raw mousedown event for the entire grid.
37049          * @param {Roo.EventObject} e
37050          */
37051         "mousedown" : true,
37052         /**
37053          * @event mouseup
37054          * The raw mouseup event for the entire grid.
37055          * @param {Roo.EventObject} e
37056          */
37057         "mouseup" : true,
37058         /**
37059          * @event mouseover
37060          * The raw mouseover event for the entire grid.
37061          * @param {Roo.EventObject} e
37062          */
37063         "mouseover" : true,
37064         /**
37065          * @event mouseout
37066          * The raw mouseout event for the entire grid.
37067          * @param {Roo.EventObject} e
37068          */
37069         "mouseout" : true,
37070         /**
37071          * @event keypress
37072          * The raw keypress event for the entire grid.
37073          * @param {Roo.EventObject} e
37074          */
37075         "keypress" : true,
37076         /**
37077          * @event keydown
37078          * The raw keydown event for the entire grid.
37079          * @param {Roo.EventObject} e
37080          */
37081         "keydown" : true,
37082
37083         // custom events
37084
37085         /**
37086          * @event cellclick
37087          * Fires when a cell is clicked
37088          * @param {Grid} this
37089          * @param {Number} rowIndex
37090          * @param {Number} columnIndex
37091          * @param {Roo.EventObject} e
37092          */
37093         "cellclick" : true,
37094         /**
37095          * @event celldblclick
37096          * Fires when a cell is double clicked
37097          * @param {Grid} this
37098          * @param {Number} rowIndex
37099          * @param {Number} columnIndex
37100          * @param {Roo.EventObject} e
37101          */
37102         "celldblclick" : true,
37103         /**
37104          * @event rowclick
37105          * Fires when a row is clicked
37106          * @param {Grid} this
37107          * @param {Number} rowIndex
37108          * @param {Roo.EventObject} e
37109          */
37110         "rowclick" : true,
37111         /**
37112          * @event rowdblclick
37113          * Fires when a row is double clicked
37114          * @param {Grid} this
37115          * @param {Number} rowIndex
37116          * @param {Roo.EventObject} e
37117          */
37118         "rowdblclick" : true,
37119         /**
37120          * @event headerclick
37121          * Fires when a header is clicked
37122          * @param {Grid} this
37123          * @param {Number} columnIndex
37124          * @param {Roo.EventObject} e
37125          */
37126         "headerclick" : true,
37127         /**
37128          * @event headerdblclick
37129          * Fires when a header cell is double clicked
37130          * @param {Grid} this
37131          * @param {Number} columnIndex
37132          * @param {Roo.EventObject} e
37133          */
37134         "headerdblclick" : true,
37135         /**
37136          * @event rowcontextmenu
37137          * Fires when a row is right clicked
37138          * @param {Grid} this
37139          * @param {Number} rowIndex
37140          * @param {Roo.EventObject} e
37141          */
37142         "rowcontextmenu" : true,
37143         /**
37144          * @event cellcontextmenu
37145          * Fires when a cell is right clicked
37146          * @param {Grid} this
37147          * @param {Number} rowIndex
37148          * @param {Number} cellIndex
37149          * @param {Roo.EventObject} e
37150          */
37151          "cellcontextmenu" : true,
37152         /**
37153          * @event headercontextmenu
37154          * Fires when a header is right clicked
37155          * @param {Grid} this
37156          * @param {Number} columnIndex
37157          * @param {Roo.EventObject} e
37158          */
37159         "headercontextmenu" : true,
37160         /**
37161          * @event bodyscroll
37162          * Fires when the body element is scrolled
37163          * @param {Number} scrollLeft
37164          * @param {Number} scrollTop
37165          */
37166         "bodyscroll" : true,
37167         /**
37168          * @event columnresize
37169          * Fires when the user resizes a column
37170          * @param {Number} columnIndex
37171          * @param {Number} newSize
37172          */
37173         "columnresize" : true,
37174         /**
37175          * @event columnmove
37176          * Fires when the user moves a column
37177          * @param {Number} oldIndex
37178          * @param {Number} newIndex
37179          */
37180         "columnmove" : true,
37181         /**
37182          * @event startdrag
37183          * Fires when row(s) start being dragged
37184          * @param {Grid} this
37185          * @param {Roo.GridDD} dd The drag drop object
37186          * @param {event} e The raw browser event
37187          */
37188         "startdrag" : true,
37189         /**
37190          * @event enddrag
37191          * Fires when a drag operation is complete
37192          * @param {Grid} this
37193          * @param {Roo.GridDD} dd The drag drop object
37194          * @param {event} e The raw browser event
37195          */
37196         "enddrag" : true,
37197         /**
37198          * @event dragdrop
37199          * Fires when dragged row(s) are dropped on a valid DD target
37200          * @param {Grid} this
37201          * @param {Roo.GridDD} dd The drag drop object
37202          * @param {String} targetId The target drag drop object
37203          * @param {event} e The raw browser event
37204          */
37205         "dragdrop" : true,
37206         /**
37207          * @event dragover
37208          * Fires while row(s) are being dragged. "targetId" is the id of the Yahoo.util.DD object the selected rows are being dragged over.
37209          * @param {Grid} this
37210          * @param {Roo.GridDD} dd The drag drop object
37211          * @param {String} targetId The target drag drop object
37212          * @param {event} e The raw browser event
37213          */
37214         "dragover" : true,
37215         /**
37216          * @event dragenter
37217          *  Fires when the dragged row(s) first cross another DD target while being dragged
37218          * @param {Grid} this
37219          * @param {Roo.GridDD} dd The drag drop object
37220          * @param {String} targetId The target drag drop object
37221          * @param {event} e The raw browser event
37222          */
37223         "dragenter" : true,
37224         /**
37225          * @event dragout
37226          * Fires when the dragged row(s) leave another DD target while being dragged
37227          * @param {Grid} this
37228          * @param {Roo.GridDD} dd The drag drop object
37229          * @param {String} targetId The target drag drop object
37230          * @param {event} e The raw browser event
37231          */
37232         "dragout" : true,
37233         /**
37234          * @event rowclass
37235          * Fires when a row is rendered, so you can change add a style to it.
37236          * @param {GridView} gridview   The grid view
37237          * @param {Object} rowcfg   contains record  rowIndex and rowClass - set rowClass to add a style.
37238          */
37239         'rowclass' : true,
37240
37241         /**
37242          * @event render
37243          * Fires when the grid is rendered
37244          * @param {Grid} grid
37245          */
37246         'render' : true,
37247             /**
37248              * @event select
37249              * Fires when a date is selected
37250              * @param {DatePicker} this
37251              * @param {Date} date The selected date
37252              */
37253         'select': true,
37254         /**
37255              * @event monthchange
37256              * Fires when the displayed month changes 
37257              * @param {DatePicker} this
37258              * @param {Date} date The selected month
37259              */
37260         'monthchange': true,
37261         /**
37262              * @event evententer
37263              * Fires when mouse over an event
37264              * @param {Calendar} this
37265              * @param {event} Event
37266              */
37267         'evententer': true,
37268         /**
37269              * @event eventleave
37270              * Fires when the mouse leaves an
37271              * @param {Calendar} this
37272              * @param {event}
37273              */
37274         'eventleave': true,
37275         /**
37276              * @event eventclick
37277              * Fires when the mouse click an
37278              * @param {Calendar} this
37279              * @param {event}
37280              */
37281         'eventclick': true,
37282         /**
37283              * @event eventrender
37284              * Fires before each cell is rendered, so you can modify the contents, like cls / title / qtip
37285              * @param {Calendar} this
37286              * @param {data} data to be modified
37287              */
37288         'eventrender': true
37289         
37290     });
37291
37292     Roo.grid.Grid.superclass.constructor.call(this);
37293     this.on('render', function() {
37294         this.view.el.addClass('x-grid-cal'); 
37295         
37296         (function() { this.setDate(new Date()); }).defer(100,this); //default today..
37297
37298     },this);
37299     
37300     if (!Roo.grid.Calendar.style) {
37301         Roo.grid.Calendar.style = Roo.util.CSS.createStyleSheet({
37302             
37303             
37304             '.x-grid-cal .x-grid-col' :  {
37305                 height: 'auto !important',
37306                 'vertical-align': 'top'
37307             },
37308             '.x-grid-cal  .fc-event-hori' : {
37309                 height: '14px'
37310             }
37311              
37312             
37313         }, Roo.id());
37314     }
37315
37316     
37317     
37318 };
37319 Roo.extend(Roo.grid.Calendar, Roo.grid.Grid, {
37320     /**
37321      * @cfg {Store} eventStore The store that loads events.
37322      */
37323     eventStore : 25,
37324
37325      
37326     activeDate : false,
37327     startDay : 0,
37328     autoWidth : true,
37329     monitorWindowResize : false,
37330
37331     
37332     resizeColumns : function() {
37333         var col = (this.view.el.getWidth() / 7) - 3;
37334         // loop through cols, and setWidth
37335         for(var i =0 ; i < 7 ; i++){
37336             this.cm.setColumnWidth(i, col);
37337         }
37338     },
37339      setDate :function(date) {
37340         
37341         Roo.log('setDate?');
37342         
37343         this.resizeColumns();
37344         var vd = this.activeDate;
37345         this.activeDate = date;
37346 //        if(vd && this.el){
37347 //            var t = date.getTime();
37348 //            if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
37349 //                Roo.log('using add remove');
37350 //                
37351 //                this.fireEvent('monthchange', this, date);
37352 //                
37353 //                this.cells.removeClass("fc-state-highlight");
37354 //                this.cells.each(function(c){
37355 //                   if(c.dateValue == t){
37356 //                       c.addClass("fc-state-highlight");
37357 //                       setTimeout(function(){
37358 //                            try{c.dom.firstChild.focus();}catch(e){}
37359 //                       }, 50);
37360 //                       return false;
37361 //                   }
37362 //                   return true;
37363 //                });
37364 //                return;
37365 //            }
37366 //        }
37367         
37368         var days = date.getDaysInMonth();
37369         
37370         var firstOfMonth = date.getFirstDateOfMonth();
37371         var startingPos = firstOfMonth.getDay()-this.startDay;
37372         
37373         if(startingPos < this.startDay){
37374             startingPos += 7;
37375         }
37376         
37377         var pm = date.add(Date.MONTH, -1);
37378         var prevStart = pm.getDaysInMonth()-startingPos;
37379 //        
37380         
37381         
37382         this.cells = this.view.el.select('.x-grid-row .x-grid-col',true);
37383         
37384         this.textNodes = this.view.el.query('.x-grid-row .x-grid-col .x-grid-cell-text');
37385         //this.cells.addClassOnOver('fc-state-hover');
37386         
37387         var cells = this.cells.elements;
37388         var textEls = this.textNodes;
37389         
37390         //Roo.each(cells, function(cell){
37391         //    cell.removeClass([ 'fc-past', 'fc-other-month', 'fc-future', 'fc-state-highlight', 'fc-state-disabled']);
37392         //});
37393         
37394         days += startingPos;
37395
37396         // convert everything to numbers so it's fast
37397         var day = 86400000;
37398         var d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime();
37399         //Roo.log(d);
37400         //Roo.log(pm);
37401         //Roo.log(prevStart);
37402         
37403         var today = new Date().clearTime().getTime();
37404         var sel = date.clearTime().getTime();
37405         var min = this.minDate ? this.minDate.clearTime() : Number.NEGATIVE_INFINITY;
37406         var max = this.maxDate ? this.maxDate.clearTime() : Number.POSITIVE_INFINITY;
37407         var ddMatch = this.disabledDatesRE;
37408         var ddText = this.disabledDatesText;
37409         var ddays = this.disabledDays ? this.disabledDays.join("") : false;
37410         var ddaysText = this.disabledDaysText;
37411         var format = this.format;
37412         
37413         var setCellClass = function(cal, cell){
37414             
37415             //Roo.log('set Cell Class');
37416             cell.title = "";
37417             var t = d.getTime();
37418             
37419             //Roo.log(d);
37420             
37421             
37422             cell.dateValue = t;
37423             if(t == today){
37424                 cell.className += " fc-today";
37425                 cell.className += " fc-state-highlight";
37426                 cell.title = cal.todayText;
37427             }
37428             if(t == sel){
37429                 // disable highlight in other month..
37430                 cell.className += " fc-state-highlight";
37431                 
37432             }
37433             // disabling
37434             if(t < min) {
37435                 //cell.className = " fc-state-disabled";
37436                 cell.title = cal.minText;
37437                 return;
37438             }
37439             if(t > max) {
37440                 //cell.className = " fc-state-disabled";
37441                 cell.title = cal.maxText;
37442                 return;
37443             }
37444             if(ddays){
37445                 if(ddays.indexOf(d.getDay()) != -1){
37446                     // cell.title = ddaysText;
37447                    // cell.className = " fc-state-disabled";
37448                 }
37449             }
37450             if(ddMatch && format){
37451                 var fvalue = d.dateFormat(format);
37452                 if(ddMatch.test(fvalue)){
37453                     cell.title = ddText.replace("%0", fvalue);
37454                    cell.className = " fc-state-disabled";
37455                 }
37456             }
37457             
37458             if (!cell.initialClassName) {
37459                 cell.initialClassName = cell.dom.className;
37460             }
37461             
37462             cell.dom.className = cell.initialClassName  + ' ' +  cell.className;
37463         };
37464
37465         var i = 0;
37466         
37467         for(; i < startingPos; i++) {
37468             cells[i].dayName =  (++prevStart);
37469             Roo.log(textEls[i]);
37470             d.setDate(d.getDate()+1);
37471             
37472             //cells[i].className = "fc-past fc-other-month";
37473             setCellClass(this, cells[i]);
37474         }
37475         
37476         var intDay = 0;
37477         
37478         for(; i < days; i++){
37479             intDay = i - startingPos + 1;
37480             cells[i].dayName =  (intDay);
37481             d.setDate(d.getDate()+1);
37482             
37483             cells[i].className = ''; // "x-date-active";
37484             setCellClass(this, cells[i]);
37485         }
37486         var extraDays = 0;
37487         
37488         for(; i < 42; i++) {
37489             //textEls[i].innerHTML = (++extraDays);
37490             
37491             d.setDate(d.getDate()+1);
37492             cells[i].dayName = (++extraDays);
37493             cells[i].className = "fc-future fc-other-month";
37494             setCellClass(this, cells[i]);
37495         }
37496         
37497         //this.el.select('.fc-header-title h2',true).update(Date.monthNames[date.getMonth()] + " " + date.getFullYear());
37498         
37499         var totalRows = Math.ceil((date.getDaysInMonth() + date.getFirstDateOfMonth().getDay()) / 7);
37500         
37501         // this will cause all the cells to mis
37502         var rows= [];
37503         var i =0;
37504         for (var r = 0;r < 6;r++) {
37505             for (var c =0;c < 7;c++) {
37506                 this.ds.getAt(r).set('weekday' + c ,cells[i++].dayName );
37507             }    
37508         }
37509         
37510         this.cells = this.view.el.select('.x-grid-row .x-grid-col',true);
37511         for(i=0;i<cells.length;i++) {
37512             
37513             this.cells.elements[i].dayName = cells[i].dayName ;
37514             this.cells.elements[i].className = cells[i].className;
37515             this.cells.elements[i].initialClassName = cells[i].initialClassName ;
37516             this.cells.elements[i].title = cells[i].title ;
37517             this.cells.elements[i].dateValue = cells[i].dateValue ;
37518         }
37519         
37520         
37521         
37522         
37523         //this.el.select('tr.fc-week.fc-prev-last',true).removeClass('fc-last');
37524         //this.el.select('tr.fc-week.fc-next-last',true).addClass('fc-last').show();
37525         
37526         ////if(totalRows != 6){
37527             //this.el.select('tr.fc-week.fc-last',true).removeClass('fc-last').addClass('fc-next-last').hide();
37528            // this.el.select('tr.fc-week.fc-prev-last',true).addClass('fc-last');
37529        // }
37530         
37531         this.fireEvent('monthchange', this, date);
37532         
37533         
37534     },
37535  /**
37536      * Returns the grid's SelectionModel.
37537      * @return {SelectionModel}
37538      */
37539     getSelectionModel : function(){
37540         if(!this.selModel){
37541             this.selModel = new Roo.grid.CellSelectionModel();
37542         }
37543         return this.selModel;
37544     },
37545
37546     load: function() {
37547         this.eventStore.load()
37548         
37549         
37550         
37551     },
37552     
37553     findCell : function(dt) {
37554         dt = dt.clearTime().getTime();
37555         var ret = false;
37556         this.cells.each(function(c){
37557             //Roo.log("check " +c.dateValue + '?=' + dt);
37558             if(c.dateValue == dt){
37559                 ret = c;
37560                 return false;
37561             }
37562             return true;
37563         });
37564         
37565         return ret;
37566     },
37567     
37568     findCells : function(rec) {
37569         var s = rec.data.start_dt.clone().clearTime().getTime();
37570        // Roo.log(s);
37571         var e= rec.data.end_dt.clone().clearTime().getTime();
37572        // Roo.log(e);
37573         var ret = [];
37574         this.cells.each(function(c){
37575              ////Roo.log("check " +c.dateValue + '<' + e + ' > ' + s);
37576             
37577             if(c.dateValue > e){
37578                 return ;
37579             }
37580             if(c.dateValue < s){
37581                 return ;
37582             }
37583             ret.push(c);
37584         });
37585         
37586         return ret;    
37587     },
37588     
37589     findBestRow: function(cells)
37590     {
37591         var ret = 0;
37592         
37593         for (var i =0 ; i < cells.length;i++) {
37594             ret  = Math.max(cells[i].rows || 0,ret);
37595         }
37596         return ret;
37597         
37598     },
37599     
37600     
37601     addItem : function(rec)
37602     {
37603         // look for vertical location slot in
37604         var cells = this.findCells(rec);
37605         
37606         rec.row = this.findBestRow(cells);
37607         
37608         // work out the location.
37609         
37610         var crow = false;
37611         var rows = [];
37612         for(var i =0; i < cells.length; i++) {
37613             if (!crow) {
37614                 crow = {
37615                     start : cells[i],
37616                     end :  cells[i]
37617                 };
37618                 continue;
37619             }
37620             if (crow.start.getY() == cells[i].getY()) {
37621                 // on same row.
37622                 crow.end = cells[i];
37623                 continue;
37624             }
37625             // different row.
37626             rows.push(crow);
37627             crow = {
37628                 start: cells[i],
37629                 end : cells[i]
37630             };
37631             
37632         }
37633         
37634         rows.push(crow);
37635         rec.els = [];
37636         rec.rows = rows;
37637         rec.cells = cells;
37638         for (var i = 0; i < cells.length;i++) {
37639             cells[i].rows = Math.max(cells[i].rows || 0 , rec.row + 1 );
37640             
37641         }
37642         
37643         
37644     },
37645     
37646     clearEvents: function() {
37647         
37648         if (!this.eventStore.getCount()) {
37649             return;
37650         }
37651         // reset number of rows in cells.
37652         Roo.each(this.cells.elements, function(c){
37653             c.rows = 0;
37654         });
37655         
37656         this.eventStore.each(function(e) {
37657             this.clearEvent(e);
37658         },this);
37659         
37660     },
37661     
37662     clearEvent : function(ev)
37663     {
37664         if (ev.els) {
37665             Roo.each(ev.els, function(el) {
37666                 el.un('mouseenter' ,this.onEventEnter, this);
37667                 el.un('mouseleave' ,this.onEventLeave, this);
37668                 el.remove();
37669             },this);
37670             ev.els = [];
37671         }
37672     },
37673     
37674     
37675     renderEvent : function(ev,ctr) {
37676         if (!ctr) {
37677              ctr = this.view.el.select('.fc-event-container',true).first();
37678         }
37679         
37680          
37681         this.clearEvent(ev);
37682             //code
37683        
37684         
37685         
37686         ev.els = [];
37687         var cells = ev.cells;
37688         var rows = ev.rows;
37689         this.fireEvent('eventrender', this, ev);
37690         
37691         for(var i =0; i < rows.length; i++) {
37692             
37693             cls = '';
37694             if (i == 0) {
37695                 cls += ' fc-event-start';
37696             }
37697             if ((i+1) == rows.length) {
37698                 cls += ' fc-event-end';
37699             }
37700             
37701             //Roo.log(ev.data);
37702             // how many rows should it span..
37703             var cg = this.eventTmpl.append(ctr,Roo.apply({
37704                 fccls : cls
37705                 
37706             }, ev.data) , true);
37707             
37708             
37709             cg.on('mouseenter' ,this.onEventEnter, this, ev);
37710             cg.on('mouseleave' ,this.onEventLeave, this, ev);
37711             cg.on('click', this.onEventClick, this, ev);
37712             
37713             ev.els.push(cg);
37714             
37715             var sbox = rows[i].start.select('.fc-day-content',true).first().getBox();
37716             var ebox = rows[i].end.select('.fc-day-content',true).first().getBox();
37717             //Roo.log(cg);
37718              
37719             cg.setXY([sbox.x +2, sbox.y +(ev.row * 20)]);    
37720             cg.setWidth(ebox.right - sbox.x -2);
37721         }
37722     },
37723     
37724     renderEvents: function()
37725     {   
37726         // first make sure there is enough space..
37727         
37728         if (!this.eventTmpl) {
37729             this.eventTmpl = new Roo.Template(
37730                 '<div class="roo-dynamic fc-event fc-event-hori fc-event-draggable ui-draggable {fccls} {cls}"  style="position: absolute" unselectable="on">' +
37731                     '<div class="fc-event-inner">' +
37732                         '<span class="fc-event-time">{time}</span>' +
37733                         '<span class="fc-event-title" qtip="{qtip}">{title}</span>' +
37734                     '</div>' +
37735                     '<div class="ui-resizable-heandle ui-resizable-e">&nbsp;&nbsp;&nbsp;</div>' +
37736                 '</div>'
37737             );
37738                 
37739         }
37740                
37741         
37742         
37743         this.cells.each(function(c) {
37744             //Roo.log(c.select('.fc-day-content div',true).first());
37745             c.select('.fc-day-content div',true).first().setHeight(Math.max(34, (c.rows || 1) * 20));
37746         });
37747         
37748         var ctr = this.view.el.select('.fc-event-container',true).first();
37749         
37750         var cls;
37751         this.eventStore.each(function(ev){
37752             
37753             this.renderEvent(ev);
37754              
37755              
37756         }, this);
37757         this.view.layout();
37758         
37759     },
37760     
37761     onEventEnter: function (e, el,event,d) {
37762         this.fireEvent('evententer', this, el, event);
37763     },
37764     
37765     onEventLeave: function (e, el,event,d) {
37766         this.fireEvent('eventleave', this, el, event);
37767     },
37768     
37769     onEventClick: function (e, el,event,d) {
37770         this.fireEvent('eventclick', this, el, event);
37771     },
37772     
37773     onMonthChange: function () {
37774         this.store.load();
37775     },
37776     
37777     onLoad: function () {
37778         
37779         //Roo.log('calendar onload');
37780 //         
37781         if(this.eventStore.getCount() > 0){
37782             
37783            
37784             
37785             this.eventStore.each(function(d){
37786                 
37787                 
37788                 // FIXME..
37789                 var add =   d.data;
37790                 if (typeof(add.end_dt) == 'undefined')  {
37791                     Roo.log("Missing End time in calendar data: ");
37792                     Roo.log(d);
37793                     return;
37794                 }
37795                 if (typeof(add.start_dt) == 'undefined')  {
37796                     Roo.log("Missing Start time in calendar data: ");
37797                     Roo.log(d);
37798                     return;
37799                 }
37800                 add.start_dt = typeof(add.start_dt) == 'string' ? Date.parseDate(add.start_dt,'Y-m-d H:i:s') : add.start_dt,
37801                 add.end_dt = typeof(add.end_dt) == 'string' ? Date.parseDate(add.end_dt,'Y-m-d H:i:s') : add.end_dt,
37802                 add.id = add.id || d.id;
37803                 add.title = add.title || '??';
37804                 
37805                 this.addItem(d);
37806                 
37807              
37808             },this);
37809         }
37810         
37811         this.renderEvents();
37812     }
37813     
37814
37815 });
37816 /*
37817  grid : {
37818                 xtype: 'Grid',
37819                 xns: Roo.grid,
37820                 listeners : {
37821                     render : function ()
37822                     {
37823                         _this.grid = this;
37824                         
37825                         if (!this.view.el.hasClass('course-timesheet')) {
37826                             this.view.el.addClass('course-timesheet');
37827                         }
37828                         if (this.tsStyle) {
37829                             this.ds.load({});
37830                             return; 
37831                         }
37832                         Roo.log('width');
37833                         Roo.log(_this.grid.view.el.getWidth());
37834                         
37835                         
37836                         this.tsStyle =  Roo.util.CSS.createStyleSheet({
37837                             '.course-timesheet .x-grid-row' : {
37838                                 height: '80px'
37839                             },
37840                             '.x-grid-row td' : {
37841                                 'vertical-align' : 0
37842                             },
37843                             '.course-edit-link' : {
37844                                 'color' : 'blue',
37845                                 'text-overflow' : 'ellipsis',
37846                                 'overflow' : 'hidden',
37847                                 'white-space' : 'nowrap',
37848                                 'cursor' : 'pointer'
37849                             },
37850                             '.sub-link' : {
37851                                 'color' : 'green'
37852                             },
37853                             '.de-act-sup-link' : {
37854                                 'color' : 'purple',
37855                                 'text-decoration' : 'line-through'
37856                             },
37857                             '.de-act-link' : {
37858                                 'color' : 'red',
37859                                 'text-decoration' : 'line-through'
37860                             },
37861                             '.course-timesheet .course-highlight' : {
37862                                 'border-top-style': 'dashed !important',
37863                                 'border-bottom-bottom': 'dashed !important'
37864                             },
37865                             '.course-timesheet .course-item' : {
37866                                 'font-family'   : 'tahoma, arial, helvetica',
37867                                 'font-size'     : '11px',
37868                                 'overflow'      : 'hidden',
37869                                 'padding-left'  : '10px',
37870                                 'padding-right' : '10px',
37871                                 'padding-top' : '10px' 
37872                             }
37873                             
37874                         }, Roo.id());
37875                                 this.ds.load({});
37876                     }
37877                 },
37878                 autoWidth : true,
37879                 monitorWindowResize : false,
37880                 cellrenderer : function(v,x,r)
37881                 {
37882                     return v;
37883                 },
37884                 sm : {
37885                     xtype: 'CellSelectionModel',
37886                     xns: Roo.grid
37887                 },
37888                 dataSource : {
37889                     xtype: 'Store',
37890                     xns: Roo.data,
37891                     listeners : {
37892                         beforeload : function (_self, options)
37893                         {
37894                             options.params = options.params || {};
37895                             options.params._month = _this.monthField.getValue();
37896                             options.params.limit = 9999;
37897                             options.params['sort'] = 'when_dt';    
37898                             options.params['dir'] = 'ASC';    
37899                             this.proxy.loadResponse = this.loadResponse;
37900                             Roo.log("load?");
37901                             //this.addColumns();
37902                         },
37903                         load : function (_self, records, options)
37904                         {
37905                             _this.grid.view.el.select('.course-edit-link', true).on('click', function() {
37906                                 // if you click on the translation.. you can edit it...
37907                                 var el = Roo.get(this);
37908                                 var id = el.dom.getAttribute('data-id');
37909                                 var d = el.dom.getAttribute('data-date');
37910                                 var t = el.dom.getAttribute('data-time');
37911                                 //var id = this.child('span').dom.textContent;
37912                                 
37913                                 //Roo.log(this);
37914                                 Pman.Dialog.CourseCalendar.show({
37915                                     id : id,
37916                                     when_d : d,
37917                                     when_t : t,
37918                                     productitem_active : id ? 1 : 0
37919                                 }, function() {
37920                                     _this.grid.ds.load({});
37921                                 });
37922                            
37923                            });
37924                            
37925                            _this.panel.fireEvent('resize', [ '', '' ]);
37926                         }
37927                     },
37928                     loadResponse : function(o, success, response){
37929                             // this is overridden on before load..
37930                             
37931                             Roo.log("our code?");       
37932                             //Roo.log(success);
37933                             //Roo.log(response)
37934                             delete this.activeRequest;
37935                             if(!success){
37936                                 this.fireEvent("loadexception", this, o, response);
37937                                 o.request.callback.call(o.request.scope, null, o.request.arg, false);
37938                                 return;
37939                             }
37940                             var result;
37941                             try {
37942                                 result = o.reader.read(response);
37943                             }catch(e){
37944                                 Roo.log("load exception?");
37945                                 this.fireEvent("loadexception", this, o, response, e);
37946                                 o.request.callback.call(o.request.scope, null, o.request.arg, false);
37947                                 return;
37948                             }
37949                             Roo.log("ready...");        
37950                             // loop through result.records;
37951                             // and set this.tdate[date] = [] << array of records..
37952                             _this.tdata  = {};
37953                             Roo.each(result.records, function(r){
37954                                 //Roo.log(r.data);
37955                                 if(typeof(_this.tdata[r.data.when_dt.format('j')]) == 'undefined'){
37956                                     _this.tdata[r.data.when_dt.format('j')] = [];
37957                                 }
37958                                 _this.tdata[r.data.when_dt.format('j')].push(r.data);
37959                             });
37960                             
37961                             //Roo.log(_this.tdata);
37962                             
37963                             result.records = [];
37964                             result.totalRecords = 6;
37965                     
37966                             // let's generate some duumy records for the rows.
37967                             //var st = _this.dateField.getValue();
37968                             
37969                             // work out monday..
37970                             //st = st.add(Date.DAY, -1 * st.format('w'));
37971                             
37972                             var date = Date.parseDate(_this.monthField.getValue(), "Y-m-d");
37973                             
37974                             var firstOfMonth = date.getFirstDayOfMonth();
37975                             var days = date.getDaysInMonth();
37976                             var d = 1;
37977                             var firstAdded = false;
37978                             for (var i = 0; i < result.totalRecords ; i++) {
37979                                 //var d= st.add(Date.DAY, i);
37980                                 var row = {};
37981                                 var added = 0;
37982                                 for(var w = 0 ; w < 7 ; w++){
37983                                     if(!firstAdded && firstOfMonth != w){
37984                                         continue;
37985                                     }
37986                                     if(d > days){
37987                                         continue;
37988                                     }
37989                                     firstAdded = true;
37990                                     var dd = (d > 0 && d < 10) ? "0"+d : d;
37991                                     row['weekday'+w] = String.format(
37992                                                     '<span style="font-size: 16px;"><b>{0}</b></span>'+
37993                                                     '<span class="course-edit-link" style="color:blue;" data-id="0" data-date="{1}"> Add New</span>',
37994                                                     d,
37995                                                     date.format('Y-m-')+dd
37996                                                 );
37997                                     added++;
37998                                     if(typeof(_this.tdata[d]) != 'undefined'){
37999                                         Roo.each(_this.tdata[d], function(r){
38000                                             var is_sub = '';
38001                                             var deactive = '';
38002                                             var id = r.id;
38003                                             var desc = (r.productitem_id_descrip) ? r.productitem_id_descrip : '';
38004                                             if(r.parent_id*1>0){
38005                                                 is_sub = (r.productitem_id_visible*1 < 1) ? 'de-act-sup-link' :'sub-link';
38006                                                 id = r.parent_id;
38007                                             }
38008                                             if(r.productitem_id_visible*1 < 1 && r.parent_id*1 < 1){
38009                                                 deactive = 'de-act-link';
38010                                             }
38011                                             
38012                                             row['weekday'+w] += String.format(
38013                                                     '<br /><span class="course-edit-link {3} {4}" qtip="{5}" data-id="{0}">{2} - {1}</span>',
38014                                                     id, //0
38015                                                     r.product_id_name, //1
38016                                                     r.when_dt.format('h:ia'), //2
38017                                                     is_sub, //3
38018                                                     deactive, //4
38019                                                     desc // 5
38020                                             );
38021                                         });
38022                                     }
38023                                     d++;
38024                                 }
38025                                 
38026                                 // only do this if something added..
38027                                 if(added > 0){ 
38028                                     result.records.push(_this.grid.dataSource.reader.newRow(row));
38029                                 }
38030                                 
38031                                 
38032                                 // push it twice. (second one with an hour..
38033                                 
38034                             }
38035                             //Roo.log(result);
38036                             this.fireEvent("load", this, o, o.request.arg);
38037                             o.request.callback.call(o.request.scope, result, o.request.arg, true);
38038                         },
38039                     sortInfo : {field: 'when_dt', direction : 'ASC' },
38040                     proxy : {
38041                         xtype: 'HttpProxy',
38042                         xns: Roo.data,
38043                         method : 'GET',
38044                         url : baseURL + '/Roo/Shop_course.php'
38045                     },
38046                     reader : {
38047                         xtype: 'JsonReader',
38048                         xns: Roo.data,
38049                         id : 'id',
38050                         fields : [
38051                             {
38052                                 'name': 'id',
38053                                 'type': 'int'
38054                             },
38055                             {
38056                                 'name': 'when_dt',
38057                                 'type': 'string'
38058                             },
38059                             {
38060                                 'name': 'end_dt',
38061                                 'type': 'string'
38062                             },
38063                             {
38064                                 'name': 'parent_id',
38065                                 'type': 'int'
38066                             },
38067                             {
38068                                 'name': 'product_id',
38069                                 'type': 'int'
38070                             },
38071                             {
38072                                 'name': 'productitem_id',
38073                                 'type': 'int'
38074                             },
38075                             {
38076                                 'name': 'guid',
38077                                 'type': 'int'
38078                             }
38079                         ]
38080                     }
38081                 },
38082                 toolbar : {
38083                     xtype: 'Toolbar',
38084                     xns: Roo,
38085                     items : [
38086                         {
38087                             xtype: 'Button',
38088                             xns: Roo.Toolbar,
38089                             listeners : {
38090                                 click : function (_self, e)
38091                                 {
38092                                     var sd = Date.parseDate(_this.monthField.getValue(), "Y-m-d");
38093                                     sd.setMonth(sd.getMonth()-1);
38094                                     _this.monthField.setValue(sd.format('Y-m-d'));
38095                                     _this.grid.ds.load({});
38096                                 }
38097                             },
38098                             text : "Back"
38099                         },
38100                         {
38101                             xtype: 'Separator',
38102                             xns: Roo.Toolbar
38103                         },
38104                         {
38105                             xtype: 'MonthField',
38106                             xns: Roo.form,
38107                             listeners : {
38108                                 render : function (_self)
38109                                 {
38110                                     _this.monthField = _self;
38111                                    // _this.monthField.set  today
38112                                 },
38113                                 select : function (combo, date)
38114                                 {
38115                                     _this.grid.ds.load({});
38116                                 }
38117                             },
38118                             value : (function() { return new Date(); })()
38119                         },
38120                         {
38121                             xtype: 'Separator',
38122                             xns: Roo.Toolbar
38123                         },
38124                         {
38125                             xtype: 'TextItem',
38126                             xns: Roo.Toolbar,
38127                             text : "Blue: in-active, green: in-active sup-event, red: de-active, purple: de-active sup-event"
38128                         },
38129                         {
38130                             xtype: 'Fill',
38131                             xns: Roo.Toolbar
38132                         },
38133                         {
38134                             xtype: 'Button',
38135                             xns: Roo.Toolbar,
38136                             listeners : {
38137                                 click : function (_self, e)
38138                                 {
38139                                     var sd = Date.parseDate(_this.monthField.getValue(), "Y-m-d");
38140                                     sd.setMonth(sd.getMonth()+1);
38141                                     _this.monthField.setValue(sd.format('Y-m-d'));
38142                                     _this.grid.ds.load({});
38143                                 }
38144                             },
38145                             text : "Next"
38146                         }
38147                     ]
38148                 },
38149                  
38150             }
38151         };
38152         
38153         *//*
38154  * Based on:
38155  * Ext JS Library 1.1.1
38156  * Copyright(c) 2006-2007, Ext JS, LLC.
38157  *
38158  * Originally Released Under LGPL - original licence link has changed is not relivant.
38159  *
38160  * Fork - LGPL
38161  * <script type="text/javascript">
38162  */
38163  
38164 /**
38165  * @class Roo.LoadMask
38166  * A simple utility class for generically masking elements while loading data.  If the element being masked has
38167  * an underlying {@link Roo.data.Store}, the masking will be automatically synchronized with the store's loading
38168  * process and the mask element will be cached for reuse.  For all other elements, this mask will replace the
38169  * element's UpdateManager load indicator and will be destroyed after the initial load.
38170  * @constructor
38171  * Create a new LoadMask
38172  * @param {String/HTMLElement/Roo.Element} el The element or DOM node, or its id
38173  * @param {Object} config The config object
38174  */
38175 Roo.LoadMask = function(el, config){
38176     this.el = Roo.get(el);
38177     Roo.apply(this, config);
38178     if(this.store){
38179         this.store.on('beforeload', this.onBeforeLoad, this);
38180         this.store.on('load', this.onLoad, this);
38181         this.store.on('loadexception', this.onLoadException, this);
38182         this.removeMask = false;
38183     }else{
38184         var um = this.el.getUpdateManager();
38185         um.showLoadIndicator = false; // disable the default indicator
38186         um.on('beforeupdate', this.onBeforeLoad, this);
38187         um.on('update', this.onLoad, this);
38188         um.on('failure', this.onLoad, this);
38189         this.removeMask = true;
38190     }
38191 };
38192
38193 Roo.LoadMask.prototype = {
38194     /**
38195      * @cfg {Boolean} removeMask
38196      * True to create a single-use mask that is automatically destroyed after loading (useful for page loads),
38197      * False to persist the mask element reference for multiple uses (e.g., for paged data widgets).  Defaults to false.
38198      */
38199     /**
38200      * @cfg {String} msg
38201      * The text to display in a centered loading message box (defaults to 'Loading...')
38202      */
38203     msg : 'Loading...',
38204     /**
38205      * @cfg {String} msgCls
38206      * The CSS class to apply to the loading message element (defaults to "x-mask-loading")
38207      */
38208     msgCls : 'x-mask-loading',
38209
38210     /**
38211      * Read-only. True if the mask is currently disabled so that it will not be displayed (defaults to false)
38212      * @type Boolean
38213      */
38214     disabled: false,
38215
38216     /**
38217      * Disables the mask to prevent it from being displayed
38218      */
38219     disable : function(){
38220        this.disabled = true;
38221     },
38222
38223     /**
38224      * Enables the mask so that it can be displayed
38225      */
38226     enable : function(){
38227         this.disabled = false;
38228     },
38229     
38230     onLoadException : function()
38231     {
38232         Roo.log(arguments);
38233         
38234         if (typeof(arguments[3]) != 'undefined') {
38235             Roo.MessageBox.alert("Error loading",arguments[3]);
38236         } 
38237         /*
38238         try {
38239             if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
38240                 Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
38241             }   
38242         } catch(e) {
38243             
38244         }
38245         */
38246     
38247         (function() { this.el.unmask(this.removeMask); }).defer(50, this);
38248     },
38249     // private
38250     onLoad : function()
38251     {
38252         (function() { this.el.unmask(this.removeMask); }).defer(50, this);
38253     },
38254
38255     // private
38256     onBeforeLoad : function(){
38257         if(!this.disabled){
38258             (function() { this.el.mask(this.msg, this.msgCls); }).defer(50, this);
38259         }
38260     },
38261
38262     // private
38263     destroy : function(){
38264         if(this.store){
38265             this.store.un('beforeload', this.onBeforeLoad, this);
38266             this.store.un('load', this.onLoad, this);
38267             this.store.un('loadexception', this.onLoadException, this);
38268         }else{
38269             var um = this.el.getUpdateManager();
38270             um.un('beforeupdate', this.onBeforeLoad, this);
38271             um.un('update', this.onLoad, this);
38272             um.un('failure', this.onLoad, this);
38273         }
38274     }
38275 };/*
38276  * Based on:
38277  * Ext JS Library 1.1.1
38278  * Copyright(c) 2006-2007, Ext JS, LLC.
38279  *
38280  * Originally Released Under LGPL - original licence link has changed is not relivant.
38281  *
38282  * Fork - LGPL
38283  * <script type="text/javascript">
38284  */
38285
38286
38287 /**
38288  * @class Roo.XTemplate
38289  * @extends Roo.Template
38290  * Provides a template that can have nested templates for loops or conditionals. The syntax is:
38291 <pre><code>
38292 var t = new Roo.XTemplate(
38293         '&lt;select name="{name}"&gt;',
38294                 '&lt;tpl for="options"&gt;&lt;option value="{value:trim}"&gt;{text:ellipsis(10)}&lt;/option&gt;&lt;/tpl&gt;',
38295         '&lt;/select&gt;'
38296 );
38297  
38298 // then append, applying the master template values
38299  </code></pre>
38300  *
38301  * Supported features:
38302  *
38303  *  Tags:
38304
38305 <pre><code>
38306       {a_variable} - output encoded.
38307       {a_variable.format:("Y-m-d")} - call a method on the variable
38308       {a_variable:raw} - unencoded output
38309       {a_variable:toFixed(1,2)} - Roo.util.Format."toFixed"
38310       {a_variable:this.method_on_template(...)} - call a method on the template object.
38311  
38312 </code></pre>
38313  *  The tpl tag:
38314 <pre><code>
38315         &lt;tpl for="a_variable or condition.."&gt;&lt;/tpl&gt;
38316         &lt;tpl if="a_variable or condition"&gt;&lt;/tpl&gt;
38317         &lt;tpl exec="some javascript"&gt;&lt;/tpl&gt;
38318         &lt;tpl name="named_template"&gt;&lt;/tpl&gt; (experimental)
38319   
38320         &lt;tpl for="."&gt;&lt;/tpl&gt; - just iterate the property..
38321         &lt;tpl for=".."&gt;&lt;/tpl&gt; - iterates with the parent (probably the template) 
38322 </code></pre>
38323  *      
38324  */
38325 Roo.XTemplate = function()
38326 {
38327     Roo.XTemplate.superclass.constructor.apply(this, arguments);
38328     if (this.html) {
38329         this.compile();
38330     }
38331 };
38332
38333
38334 Roo.extend(Roo.XTemplate, Roo.Template, {
38335
38336     /**
38337      * The various sub templates
38338      */
38339     tpls : false,
38340     /**
38341      *
38342      * basic tag replacing syntax
38343      * WORD:WORD()
38344      *
38345      * // you can fake an object call by doing this
38346      *  x.t:(test,tesT) 
38347      * 
38348      */
38349     re : /\{([\w-\.]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
38350
38351     /**
38352      * compile the template
38353      *
38354      * This is not recursive, so I'm not sure how nested templates are really going to be handled..
38355      *
38356      */
38357     compile: function()
38358     {
38359         var s = this.html;
38360      
38361         s = ['<tpl>', s, '</tpl>'].join('');
38362     
38363         var re     = /<tpl\b[^>]*>((?:(?=([^<]+))\2|<(?!tpl\b[^>]*>))*?)<\/tpl>/,
38364             nameRe = /^<tpl\b[^>]*?for="(.*?)"/,
38365             ifRe   = /^<tpl\b[^>]*?if="(.*?)"/,
38366             execRe = /^<tpl\b[^>]*?exec="(.*?)"/,
38367             namedRe = /^<tpl\b[^>]*?name="(\w+)"/,  // named templates..
38368             m,
38369             id     = 0,
38370             tpls   = [];
38371     
38372         while(true == !!(m = s.match(re))){
38373             var forMatch   = m[0].match(nameRe),
38374                 ifMatch   = m[0].match(ifRe),
38375                 execMatch   = m[0].match(execRe),
38376                 namedMatch   = m[0].match(namedRe),
38377                 
38378                 exp  = null, 
38379                 fn   = null,
38380                 exec = null,
38381                 name = forMatch && forMatch[1] ? forMatch[1] : '';
38382                 
38383             if (ifMatch) {
38384                 // if - puts fn into test..
38385                 exp = ifMatch && ifMatch[1] ? ifMatch[1] : null;
38386                 if(exp){
38387                    fn = new Function('values', 'parent', 'with(values){ return '+(Roo.util.Format.htmlDecode(exp))+'; }');
38388                 }
38389             }
38390             
38391             if (execMatch) {
38392                 // exec - calls a function... returns empty if true is  returned.
38393                 exp = execMatch && execMatch[1] ? execMatch[1] : null;
38394                 if(exp){
38395                    exec = new Function('values', 'parent', 'with(values){ '+(Roo.util.Format.htmlDecode(exp))+'; }');
38396                 }
38397             }
38398             
38399             
38400             if (name) {
38401                 // for = 
38402                 switch(name){
38403                     case '.':  name = new Function('values', 'parent', 'with(values){ return values; }'); break;
38404                     case '..': name = new Function('values', 'parent', 'with(values){ return parent; }'); break;
38405                     default:   name = new Function('values', 'parent', 'with(values){ return '+name+'; }');
38406                 }
38407             }
38408             var uid = namedMatch ? namedMatch[1] : id;
38409             
38410             
38411             tpls.push({
38412                 id:     namedMatch ? namedMatch[1] : id,
38413                 target: name,
38414                 exec:   exec,
38415                 test:   fn,
38416                 body:   m[1] || ''
38417             });
38418             if (namedMatch) {
38419                 s = s.replace(m[0], '');
38420             } else { 
38421                 s = s.replace(m[0], '{xtpl'+ id + '}');
38422             }
38423             ++id;
38424         }
38425         this.tpls = [];
38426         for(var i = tpls.length-1; i >= 0; --i){
38427             this.compileTpl(tpls[i]);
38428             this.tpls[tpls[i].id] = tpls[i];
38429         }
38430         this.master = tpls[tpls.length-1];
38431         return this;
38432     },
38433     /**
38434      * same as applyTemplate, except it's done to one of the subTemplates
38435      * when using named templates, you can do:
38436      *
38437      * var str = pl.applySubTemplate('your-name', values);
38438      *
38439      * 
38440      * @param {Number} id of the template
38441      * @param {Object} values to apply to template
38442      * @param {Object} parent (normaly the instance of this object)
38443      */
38444     applySubTemplate : function(id, values, parent)
38445     {
38446         
38447         
38448         var t = this.tpls[id];
38449         
38450         
38451         try { 
38452             if(t.test && !t.test.call(this, values, parent)){
38453                 return '';
38454             }
38455         } catch(e) {
38456             Roo.log("Xtemplate.applySubTemplate 'test': Exception thrown");
38457             Roo.log(e.toString());
38458             Roo.log(t.test);
38459             return ''
38460         }
38461         try { 
38462             
38463             if(t.exec && t.exec.call(this, values, parent)){
38464                 return '';
38465             }
38466         } catch(e) {
38467             Roo.log("Xtemplate.applySubTemplate 'exec': Exception thrown");
38468             Roo.log(e.toString());
38469             Roo.log(t.exec);
38470             return ''
38471         }
38472         try {
38473             var vs = t.target ? t.target.call(this, values, parent) : values;
38474             parent = t.target ? values : parent;
38475             if(t.target && vs instanceof Array){
38476                 var buf = [];
38477                 for(var i = 0, len = vs.length; i < len; i++){
38478                     buf[buf.length] = t.compiled.call(this, vs[i], parent);
38479                 }
38480                 return buf.join('');
38481             }
38482             return t.compiled.call(this, vs, parent);
38483         } catch (e) {
38484             Roo.log("Xtemplate.applySubTemplate : Exception thrown");
38485             Roo.log(e.toString());
38486             Roo.log(t.compiled);
38487             return '';
38488         }
38489     },
38490
38491     compileTpl : function(tpl)
38492     {
38493         var fm = Roo.util.Format;
38494         var useF = this.disableFormats !== true;
38495         var sep = Roo.isGecko ? "+" : ",";
38496         var undef = function(str) {
38497             Roo.log("Property not found :"  + str);
38498             return '';
38499         };
38500         
38501         var fn = function(m, name, format, args)
38502         {
38503             //Roo.log(arguments);
38504             args = args ? args.replace(/\\'/g,"'") : args;
38505             //["{TEST:(a,b,c)}", "TEST", "", "a,b,c", 0, "{TEST:(a,b,c)}"]
38506             if (typeof(format) == 'undefined') {
38507                 format= 'htmlEncode';
38508             }
38509             if (format == 'raw' ) {
38510                 format = false;
38511             }
38512             
38513             if(name.substr(0, 4) == 'xtpl'){
38514                 return "'"+ sep +'this.applySubTemplate('+name.substr(4)+', values, parent)'+sep+"'";
38515             }
38516             
38517             // build an array of options to determine if value is undefined..
38518             
38519             // basically get 'xxxx.yyyy' then do
38520             // (typeof(xxxx) == 'undefined' || typeof(xxx.yyyy) == 'undefined') ?
38521             //    (function () { Roo.log("Property not found"); return ''; })() :
38522             //    ......
38523             
38524             var udef_ar = [];
38525             var lookfor = '';
38526             Roo.each(name.split('.'), function(st) {
38527                 lookfor += (lookfor.length ? '.': '') + st;
38528                 udef_ar.push(  "(typeof(" + lookfor + ") == 'undefined')"  );
38529             });
38530             
38531             var udef_st = '((' + udef_ar.join(" || ") +") ? undef('" + name + "') : "; // .. needs )
38532             
38533             
38534             if(format && useF){
38535                 
38536                 args = args ? ',' + args : "";
38537                  
38538                 if(format.substr(0, 5) != "this."){
38539                     format = "fm." + format + '(';
38540                 }else{
38541                     format = 'this.call("'+ format.substr(5) + '", ';
38542                     args = ", values";
38543                 }
38544                 
38545                 return "'"+ sep +   udef_st   +    format + name + args + "))"+sep+"'";
38546             }
38547              
38548             if (args.length) {
38549                 // called with xxyx.yuu:(test,test)
38550                 // change to ()
38551                 return "'"+ sep + udef_st  + name + '(' +  args + "))"+sep+"'";
38552             }
38553             // raw.. - :raw modifier..
38554             return "'"+ sep + udef_st  + name + ")"+sep+"'";
38555             
38556         };
38557         var body;
38558         // branched to use + in gecko and [].join() in others
38559         if(Roo.isGecko){
38560             body = "tpl.compiled = function(values, parent){  with(values) { return '" +
38561                    tpl.body.replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn) +
38562                     "';};};";
38563         }else{
38564             body = ["tpl.compiled = function(values, parent){  with (values) { return ['"];
38565             body.push(tpl.body.replace(/(\r\n|\n)/g,
38566                             '\\n').replace(/'/g, "\\'").replace(this.re, fn));
38567             body.push("'].join('');};};");
38568             body = body.join('');
38569         }
38570         
38571         Roo.debug && Roo.log(body.replace(/\\n/,'\n'));
38572        
38573         /** eval:var:tpl eval:var:fm eval:var:useF eval:var:undef  */
38574         eval(body);
38575         
38576         return this;
38577     },
38578
38579     applyTemplate : function(values){
38580         return this.master.compiled.call(this, values, {});
38581         //var s = this.subs;
38582     },
38583
38584     apply : function(){
38585         return this.applyTemplate.apply(this, arguments);
38586     }
38587
38588  });
38589
38590 Roo.XTemplate.from = function(el){
38591     el = Roo.getDom(el);
38592     return new Roo.XTemplate(el.value || el.innerHTML);
38593 };